:root{--spacing-0:0px;--spacing-2:2px;--spacing-4:4px;--spacing-6:6px;--spacing-8:8px;--spacing-10:10px;--spacing-12:12px;--spacing-14:14px;--spacing-16:16px;--spacing-18:18px;--spacing-20:20px;--spacing-22:22px;--spacing-24:24px;--spacing-28:28px;--spacing-30:30px;--spacing-32:32px;--spacing-36:36px;--spacing-40:40px;--spacing-64:64px;--spacing-76:76px;--spacing-100:100px;--radius-0:0px;--radius-2:2px;--radius-4:4px;--radius-6:6px;--radius-8:8px;--radius-10:10px;--radius-12:12px;--radius-14:14px;--radius-16:16px;--radius-18:18px;--radius-20:20px;--radius-99:99px;--text-title:#434f5c;--text-body:#6b7e93;--primary:#2f7ef5;--surface-dark:#101010;--surface-body:#f8fafa;--surface-subtle:#f3f5f8;--surface-lightblue:#e8f1fe;--surface-lightgray:#bfc8d4;--surface-lightred:#fef2f2;--purple-400:#ede9fe;--purple-800:#7c3aed;--green-400:#f0fdfa;--green-800:#16a390;--blue-400:#e8f1fe;--blue-800:#2f7ef5;--orange-400:#fff7ed;--orange-800:#ea580c;--red-400:#fef2f2;--red-800:#dc2626;--red:#dc2626;--subject-figma-bg:#ede9fe;--subject-figma-text:#7c3aed;--subject-photoshop-bg:#e8f1fe;--subject-photoshop-text:#2f7ef5;--subject-illustrator-bg:#fff7ed;--subject-illustrator-text:#ea580c;--subject-html-bg:#f0fdfa;--subject-html-text:#16a390;--subject-html:#16a390;--subject-ai-bg:#fef2f2;--subject-ai-text:#dc2626;--border-base:#e2e7ed;--on-color-blue:#2f7ef5;--on-color-gray:#6b7e93;--on-color-lightblue:#e8f1fe}.tools-inner .lnb,.tools-inner .lnb .lnb-category{width:auto}.tools-inner .lnb .lnb-sub.is-disabled:hover{color:var(--text-body);background-color:rgba(0,0,0,0)}.tools-inner .tools-article{flex:1 1;min-width:0;padding-top:var(--spacing-24)}.tools-inner .tools-article .title-area .go-lec-list{display:inline-block;margin-bottom:var(--spacing-20);font-size:18px;font-weight:500;color:var(--primary)}.tools-inner .tools-article .title-area .tool-title{margin-bottom:12px;font-size:24px;font-weight:700;color:var(--text-title)}.tools-inner .tools-article .title-area .writer-date{display:flex;gap:12px;font-size:15px;color:var(--text-title)}.tools-inner .tools-article .title-area .writer-date .writer{font-weight:500}.tools-inner .tools-article .title-area .tool-desc{margin-bottom:12px;font-size:16px;font-weight:500;line-height:1.5;color:var(--text-title)}.tools-inner .calc-panel{min-height:518px;padding:var(--spacing-24);border-radius:var(--radius-20);background-color:var(--surface-body);box-shadow:4px 4px 4px rgba(47,126,245,.05),inset 3px 3px 0 #fff}.tools-inner .calc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-20)}.tools-inner .calc-head .calc-title{margin-bottom:0}.tools-inner .calc-title{margin-bottom:var(--spacing-20);font-size:16px;font-weight:500;color:var(--text-title)}.tools-inner .calc-reset{padding:0;border:none;background:none;font-family:inherit;font-size:12px;color:var(--text-body);cursor:pointer}.tools-inner .calc-reset:hover{color:var(--primary)}.tools-inner .calc-field{position:relative;display:block}.tools-inner .calc-field+.calc-field{margin-top:var(--spacing-20)}.tools-inner .calc-label{display:block;margin-bottom:var(--spacing-8);font-size:14px;font-weight:500;color:var(--text-body)}.tools-inner .calc-input{display:block;width:100%;padding:var(--spacing-12);border:none;border-radius:var(--radius-16);background-color:#fff;font-family:inherit;font-size:13px;color:var(--text-body)}.tools-inner .calc-input:focus{outline:1px solid var(--primary)}.tools-inner .calc-input--strong{font-size:16px;font-weight:600}.tools-inner .tool-stack--sorted{padding-top:var(--spacing-36)}.tools-inner .grid-settings{display:flex;gap:66px}.tools-inner .grid-settings__main{flex:1 1;min-width:0}.tools-inner .grid-settings__origin{flex:1 1;min-width:0;display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--spacing-10);gap:var(--spacing-10)}.tools-inner .grid-settings__origin .calc-field+.calc-field{margin-top:0}.tools-inner .result-size{display:flex;align-items:center;gap:var(--spacing-40);margin-bottom:var(--spacing-20)}.tools-inner .result-label{margin-bottom:20px;font-size:14px;font-weight:500;color:var(--text-body)}.tools-inner .result-value{display:flex;align-items:flex-end;gap:var(--spacing-4)}.tools-inner .result-value strong{font-size:24px;font-weight:600;color:var(--primary)}.tools-inner .result-value span{font-size:14px;font-weight:500;color:var(--text-body)}.tools-inner .cta-small{gap:6px}.tools-inner .grid-preview{margin-bottom:var(--spacing-20)}.tools-inner .grid-viewport{display:flex;align-items:center;overflow:hidden;outline:1px solid #b4b4b4;background-color:#fff}.tools-inner .grid-thumb{flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--primary);background-color:var(--surface-lightblue);font-weight:500;color:#a7c5d7;white-space:nowrap}.tools-inner .tool-stack{padding-top:18px}.tools-inner .tool-stack .calc-panel+.calc-panel{margin-top:17px}.tools-inner .calc-panel--auto{min-height:0}.tools-inner .calc-label--line{font-size:15px;line-height:1.5}.tools-inner .vw-fields{display:flex;gap:20px}.tools-inner .vw-fields .calc-field{flex:1 1;min-width:0}.tools-inner .vw-fields .calc-field+.calc-field{margin-top:0}.tools-inner .tool-result-row{display:flex;align-items:center;gap:var(--spacing-28)}.tools-inner .clamp-fields{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--spacing-20);gap:var(--spacing-20)}.tools-inner .clamp-fields .calc-field+.calc-field{margin-top:0}.tools-inner .result-error{font-size:14px;color:var(--text-body)}.tools-inner .calc-input--lg{font-size:16px;line-height:1.5}.tools-inner .calc-input--lg.is-bold{font-weight:600}.tools-inner .calc-input--lg.is-result{color:var(--primary)}.tools-inner .ratio-row{display:flex;align-items:center;gap:var(--spacing-20)}.tools-inner .ratio-group{flex:1 1;min-width:0;display:flex;gap:20px}.tools-inner .ratio-group .calc-field{flex:1 1;min-width:0}.tools-inner .ratio-group .calc-field+.calc-field{margin-top:0}.tools-inner .limit-tooltip{position:absolute;left:0;top:calc(100% + 10px);z-index:2;padding:var(--spacing-10) var(--spacing-12);border-radius:var(--radius-8);background-color:var(--surface-dark);font-size:13px;line-height:1.5;color:#fff;white-space:nowrap}.tools-inner .limit-tooltip:before{content:"";position:absolute;left:20px;bottom:100%;border:6px solid rgba(0,0,0,0);border-bottom:6px solid var(--surface-dark)}.tools-inner .ratio-equal{font-size:24px;font-weight:700;color:var(--text-title)}.tools-inner .ratio-preview{margin-top:60px}.tools-inner .ratio-preview .calc-title{margin-bottom:40px}.tools-inner .preview-area{position:relative;background-color:#fff}.tools-inner .preview-area .preview-img{object-fit:cover}.tools-inner .guide{position:absolute;border:1px solid var(--primary)}.tools-inner .guide--h{left:0;top:-16px;width:100%;height:10px;border-bottom:none}.tools-inner .guide--h .guide-label{left:50%;top:-1px;transform:translate(-50%,-50%)}.tools-inner .guide--v{top:0;right:-20px;width:10px;height:100%;border-left:none}.tools-inner .guide--v .guide-label{left:100%;top:50%;transform:translate(-50%,-50%);padding:var(--spacing-12) 0;writing-mode:vertical-rl;-webkit-text-orientation:sideways;text-orientation:sideways}.tools-inner .guide-label{position:absolute;padding:0 var(--spacing-12);background-color:var(--surface-body);font-size:16px;font-weight:600;color:var(--text-body);white-space:nowrap}.tools-inner .rem-row{display:flex;align-items:center;gap:20px}.tools-inner .rem-field{flex:1 1;min-width:0}.tools-inner .rem-box{display:flex;align-items:center;gap:var(--spacing-8);padding:var(--spacing-16);border-radius:var(--radius-16);background-color:#fff;color:var(--text-body);cursor:text}.tools-inner .rem-box:focus-within{outline:1px solid var(--primary)}.tools-inner .rem-input{padding:0;border:none;outline:none;background:none;font-family:inherit;font-size:24px;font-weight:600;color:var(--text-body)}.tools-inner .rem-input.is-primary{color:var(--primary)}.tools-inner .rem-input{-moz-appearance:textfield}.tools-inner .rem-input::-webkit-inner-spin-button,.tools-inner .rem-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tools-inner .rem-unit{font-size:13px}.tools-inner .tip-panel .tip-title{font-weight:700}.tools-inner .tip-panel .tip-text,.tools-inner .tip-panel .tip-title{margin-bottom:var(--spacing-20);font-size:15px;line-height:1.5;color:var(--text-body)}.tools-inner .tip-panel .tip-text{font-weight:500}.tools-inner .tip-panel .tip-code{font-family:Menlo,Monaco,Consolas,monospace;font-size:14px;background-color:var(--surface-subtle);color:var(--primary);padding:2px 6px;border-radius:4px}.tools-inner .cta-small:disabled{opacity:.5;cursor:not-allowed}.tools-inner .result-x{font-size:22px;font-weight:600;color:var(--text-body)}