:root{--blue:#2550e8;--ink:#152343;--muted:#59677f;--line:#e2e8f3;--cyan:#007f87}*{box-sizing:border-box}body{margin:0;background:#f4f7fd;color:var(--ink);font-family:Pretendard,'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.6}header{max-width:1280px;margin:auto;padding:24px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:inherit}.brand{text-decoration:none;font-size:23px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:10px}.brand-icon{background:var(--blue);color:white;display:grid;place-items:center;width:37px;height:37px;border-radius:11px;font-size:25px}.edition{color:var(--muted);font-size:14px}.beta{font-size:12px;background:#e3eaff;padding:4px 7px;border-radius:4px;color:var(--blue);margin-left:8px}main{max-width:1200px;margin:auto;padding:36px 0}.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}.eyebrow{color:var(--blue);font-weight:700;font-size:14px;letter-spacing:1px;margin:0 0 8px}h1{font-size:34px;line-height:1.35;letter-spacing:-1.5px;margin:0 0 12px}.intro p:last-child{margin:0;color:var(--muted)}.reference-tag{font-size:13px;border:1px solid #cdd8f4;border-radius:30px;padding:8px 13px;white-space:nowrap}.mobile{display:none}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 5px 20px #21397204}.input-panel{border-top:4px solid var(--blue)}.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:22px}.step{font-size:12px;font-weight:800;color:var(--blue);background:#edf1ff;border-radius:7px;padding:3px 6px}h2{font-size:19px;margin:0;letter-spacing:-.6px}fieldset{border:0;margin:0 0 18px;padding:0}legend,.field{font-size:14px;font-weight:650}legend{margin-bottom:9px}.sex-options{display:flex;gap:8px}.sex-options label{flex:1}.sex-options label{position:relative;min-width:0}.sex-options input{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0}.sex-options span{display:block;text-align:center;border:1px solid var(--line);padding:9px;border-radius:9px;cursor:pointer}.sex-options input:checked+span{border-color:var(--blue);color:var(--blue);background:#f0f4ff}.sex-options input:focus-visible+span{outline:3px solid #9bb2ff}.field{display:block;margin-bottom:16px}input,select,button{font:inherit}input,select{width:100%;min-width:0;border:1px solid #d7deeb;background:#fff;color:var(--ink);border-radius:9px;min-height:46px;padding:10px 11px;margin-top:7px;font-size:16px}input:focus,select:focus{outline:3px solid #e0e8ff;border-color:var(--blue)}.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.unit-input{position:relative}.unit-input input{padding-right:40px}.unit-input span{position:absolute;right:13px;top:18px;color:var(--muted);font-size:14px;font-weight:400}.hint{color:var(--muted);font-size:13px;margin:5px 0 14px;line-height:1.6}.primary,.secondary,.text-button{border:0;cursor:pointer;border-radius:9px;font-weight:650;min-height:44px;font-size:14px}.primary{background:var(--blue);color:white;width:100%;padding:13px}.primary:hover{background:#183ccc}.secondary{padding:9px 16px;background:#eef2ff;color:var(--blue)}.secondary:hover{background:#e0e7ff}.text-button{background:transparent;color:var(--muted);padding:8px 12px}#example{width:100%;margin-top:6px}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #8fa9ff;outline-offset:3px}.privacy-note{font-size:12px;color:var(--muted);padding-top:17px;margin-top:14px;border-top:1px solid var(--line)}#error{color:#b32a43;font-size:14px}.output{display:grid;gap:24px}.age-badge{margin-left:auto;font-size:13px;color:var(--muted)}.empty{padding:31px 10px 44px;text-align:center}.empty-symbol{display:inline-block;font-size:40px;color:var(--blue);background:#edf2ff;width:76px;height:76px;border-radius:24px;line-height:76px}.empty h3{font-size:19px;margin:20px 0 8px}.empty p{color:var(--muted);font-size:14px}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.metric{border-radius:14px;background:#f1f5ff;padding:20px;min-width:0}.metric.weight{background:#eff8f7}.metric-title{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:14px}.metric-title strong{color:var(--ink)}.big{font-size:44px;font-weight:800;line-height:1.3;letter-spacing:-2px;color:var(--blue);margin:10px 0 3px}.weight .big{color:var(--cyan)}.big small{font-size:14px;font-weight:500;letter-spacing:0;margin-left:5px}.rail{height:7px;background:#d8e2fe;border-radius:6px;position:relative;margin:20px 0 6px}.rail i{position:absolute;width:13px;height:13px;border-radius:50%;top:-3px;transform:translateX(-50%);background:var(--blue);border:2px solid white;box-shadow:0 0 0 2px var(--blue)}.weight .rail{background:#cfebe7}.weight .rail i{background:var(--cyan);box-shadow:0 0 0 2px var(--cyan)}.rail-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.meaning{font-size:14px;background:#fafbfe;border-left:3px solid var(--blue);padding:12px 16px;margin:20px 0}.sensitivity{border-top:1px solid var(--line);padding-top:20px;margin-bottom:18px}.sensitivity h3{font-size:15px;margin:0}.sensitivity p{font-size:13px;color:var(--muted);margin:3px 0 14px}.sensitivity-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}.sensitivity-values div{border:1px solid var(--line);padding:10px 4px;border-radius:9px;font-size:13px}.sensitivity-values strong{display:block;font-size:17px;color:var(--blue)}.sensitivity-values .current{border-color:#9cb2fb;background:#f5f8ff}.chart-legend{display:flex;gap:20px;font-size:13px;margin:4px 0 12px}.chart-legend span:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:var(--blue)}.chart-legend .weight-key:before{background:var(--cyan)}.chart{min-height:210px}.chart svg{width:100%;height:auto;display:block}.chart-placeholder{padding:70px 10px;text-align:center;font-size:14px;color:var(--muted);background:repeating-linear-gradient(to top,#fff 0,#fff 49px,#eef2f9 50px);margin:0}.record-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.history-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 1fr auto;gap:8px;border-top:1px solid var(--line);padding:10px 0;font-size:13px;align-items:center}.history-row button{border:0;background:transparent;color:#737f94;cursor:pointer;font-size:16px;min-width:32px;min-height:32px}.explanation{margin-top:50px}.explain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:20px}.explain-grid article>span{color:var(--blue);font-size:12px;font-weight:700}.explain-grid h3{font-size:17px;margin:9px 0}.explain-grid p{font-size:14px;color:var(--muted);margin:0}details{margin-top:25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;font-size:14px;color:var(--muted)}summary{cursor:pointer;color:var(--ink);font-weight:600}#technical{max-width:900px;padding-top:8px}footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:30px}footer .brand{font-size:19px;white-space:nowrap}footer p{font-size:12px;color:var(--muted);margin:0}footer a{font-size:12px;white-space:nowrap;color:var(--muted)}[hidden]{display:none!important}@media(max-width:1250px){main{padding:32px}header{padding:22px 32px}}@media(max-width:800px){.intro{display:block}.reference-tag{display:inline-block;margin-top:18px}.workspace{grid-template-columns:minmax(0,1fr)}.input-panel{padding:22px}.explain-grid{grid-template-columns:1fr;gap:22px}.intro h1{font-size:29px}main{padding:26px 18px}header{padding:18px}.edition{font-size:12px}.brand{font-size:21px}.panel{padding:22px}.result-grid{gap:10px}.metric{padding:15px}.big{font-size:37px}.metric-title{display:block}.metric-title strong{display:block}.mobile{display:block}footer{align-items:flex-start;flex-direction:column;gap:12px}.age-badge{font-size:12px}.section-heading{gap:8px}h2{font-size:17px}.history-row{font-size:12px;grid-template-columns:1.15fr 1fr 1fr auto}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}.metric{animation:rise .25s ease-out}@keyframes rise{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}}

/* Calculator identity and factual product benefits. */
.intro{align-items:center}.benefits{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:17px 0 0;padding:0}.benefits li{font-size:13px;font-weight:600;background:#e9efff;color:#2349c7;border-radius:6px;padding:5px 9px}.reference-tag{border-radius:12px;white-space:normal;max-width:295px;padding:14px 17px;background:#fff}.reference-tag strong,.reference-tag span,.reference-tag small{display:block}.reference-tag strong{font-size:13px;color:#2545a3}.reference-tag span{font-size:13px;margin-top:3px}.reference-tag small{font-size:12px;color:var(--muted);margin-top:4px}@media(max-width:800px){.reference-tag{max-width:none;display:block;margin-top:20px}.intro h1{font-size:29px;line-height:1.4}.benefits{gap:6px}.benefits li{font-size:12px}}

/* Creator credit and advertiser invitation. */
.creator-link{display:inline-block;color:var(--blue);font-size:14px;text-underline-offset:4px;margin:0 0 3px}.intro .eyebrow{letter-spacing:0}.advertiser-banner{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:32px;padding:28px 30px;background:#18368a;color:#fff;border-radius:18px}.advertiser-label{font-size:12px;font-weight:700;letter-spacing:.04em;color:#c6d6ff}.advertiser-banner h2{font-size:21px;line-height:1.5;margin:6px 0 8px;word-break:keep-all}.advertiser-banner p{font-size:16px;margin:0;color:#e0e8ff}.advertiser-contact{display:flex;flex-direction:column;align-items:center;gap:9px;flex-shrink:0}.advertiser-contact a{background:#fff;color:#18368a;text-decoration:none;font-size:15px;font-weight:700;padding:12px 22px;border-radius:9px}.advertiser-contact a:hover{background:#e6edff}.advertiser-contact span{font-size:13px;color:#e0e8ff}.creator-link:focus-visible,.advertiser-contact a:focus-visible{outline:3px solid #91b7ff;outline-offset:4px}@media(max-width:800px){.advertiser-banner{flex-direction:column;align-items:flex-start;padding:24px;gap:20px}.advertiser-banner h2{font-size:20px}.advertiser-contact{align-items:flex-start}.empty p{overflow-wrap:anywhere}}

/* Refined blue editorial identity; preserve calculator-first layout. */
:root{--blue:#3159dc;--ink:#172747;--muted:#61708a;--line:#dfe6f2}
body{background:linear-gradient(180deg,#eaf0ff 0,#f5f7fc 470px,#f5f7fc 100%)}
header{padding-top:22px;padding-bottom:22px;border-bottom-color:#d7e0f1}
.brand{letter-spacing:-.05em}.brand-icon{background:#2548ba;border-radius:12px;box-shadow:0 5px 12px #2548ba20}
.beta{background:#fff;color:#52688f;border:1px solid #d5dff2;letter-spacing:.08em}
main{padding-top:40px}.intro{gap:28px;align-items:center;margin-bottom:32px}.intro>div:first-child{min-width:0;flex:1}
.intro .eyebrow{color:#4a608b;font-size:14px;font-weight:600;margin-bottom:12px}
.intro h1{font-size:clamp(1.75rem,3.05vw,2.625rem);line-height:1.35;letter-spacing:-.065em;font-weight:800;margin:0 0 13px;color:#182d59}
.intro h1+p{color:var(--muted);margin:0 0 8px;font-size:16px}
.creator-link{font-size:14px;color:#3c5ca3;text-decoration-color:#b3c3e5;text-underline-offset:5px}
.benefits{gap:9px;margin-top:20px}.benefits li{background:#ffffffa6;border:1px solid #d7e1f7;border-radius:30px;padding:5px 12px;color:#425c8d;font-weight:500;font-size:13px}
.reference-tag{flex:0 0 245px;max-width:245px;padding:18px 20px;border:1px solid #d3def5;box-shadow:0 8px 28px #27487e06;background:#ffffffb8;border-radius:15px}.reference-tag strong{font-size:13px;font-weight:600;color:#536789}.reference-tag span{font-size:17px;font-weight:750;letter-spacing:-.04em;color:#244595;margin-top:7px}.reference-tag small{margin-top:7px}
.panel{border-color:#e0e6f0;border-radius:18px;box-shadow:0 8px 28px #23376006;padding:28px}.input-panel{border-top:3px solid var(--blue)}
.section-heading{margin-bottom:24px}.step{background:#eef2fc;color:#5670a6;border-radius:6px;font-size:12px;letter-spacing:.02em}h2{font-weight:750}
.primary{background:#3159dc;box-shadow:0 5px 12px #3159dc1c}.primary:hover{background:#264ac2}.sex-options input:checked+span{background:#eef3ff;border-color:#7290e6}
.empty{padding-top:27px;padding-bottom:36px}.empty-symbol{background:linear-gradient(140deg,#edf2ff,#e1eaff);color:#5578d9;border:1px solid #dae4fb;border-radius:22px;font-weight:500}.empty h3{font-size:20px;letter-spacing:-.04em}.empty p{font-size:15px;line-height:1.8}
.chart-placeholder{border-radius:10px}.explanation{margin-top:40px}.explain-grid{gap:28px}.explain-grid article{border-top:2px solid #dce4f4;padding-top:18px}.explain-grid article>span{letter-spacing:.06em;color:#5871a3}.explain-grid h3{margin-top:10px}
.advertiser-banner{background:linear-gradient(115deg,#15294f,#254884);border:1px solid #304e7f;box-shadow:0 12px 28px #1a356012;border-radius:18px;padding:28px 30px}.advertiser-label{letter-spacing:.08em;color:#b9cdef}.advertiser-banner h2{letter-spacing:-.045em}.advertiser-contact a{box-shadow:0 3px 9px #102d4820}
footer{padding-top:28px}
@media(max-width:1100px){.intro{flex-wrap:wrap}.intro>div:first-child{flex-basis:100%}.intro h1{font-size:36px}.reference-tag{display:flex;align-items:center;gap:12px;max-width:none;flex-basis:auto;padding:10px 16px}.reference-tag span,.reference-tag small{margin:0}.reference-tag span{font-size:14px}.intro{gap:18px}}
@media(max-width:800px){main{padding-top:28px}.intro{display:block;margin-bottom:25px}.intro h1{font-size:clamp(1.125rem,5.3vw,2.25rem);letter-spacing:-.065em;line-height:1.45;margin-bottom:10px}.intro .eyebrow{font-size:12px;margin-bottom:10px}.intro h1+p{font-size:14px}.creator-link{font-size:13px}.benefits{gap:6px;margin-top:16px}.benefits li{font-size:12px;padding:4px 8px}.reference-tag{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:20px;padding:12px 14px}.reference-tag strong{flex-basis:100%;font-size:12px}.reference-tag span{font-size:14px}.reference-tag small{font-size:12px}.panel{padding:22px}.empty{padding:24px 0 28px}.empty p{font-size:14px}.advertiser-banner{padding:24px}.advertiser-banner h2{font-size:20px}.advertiser-banner p{font-size:15px}.explain-grid{gap:22px}}

.growth-faq{margin-top:36px}.growth-faq h2{margin-bottom:18px}.growth-faq details{margin:0;padding:18px 0;border-top:0}.growth-faq details:first-of-type{border-top:1px solid var(--line)}.growth-faq summary{font-size:16px;line-height:1.65}.growth-faq p{font-size:16px;line-height:1.8;max-width:900px;margin:12px 0 0;color:var(--muted)}

/* 키몸눈금: ruler mark and two-tone wordmark. */
.brand{gap:11px}.brand-mark{display:block;flex-shrink:0;box-shadow:0 5px 14px #3159dc20;border-radius:13px}.brand-wordmark{font-size:25px;font-weight:800;letter-spacing:-.065em;line-height:1.3;color:#172d58}.brand-wordmark>span{color:#3159dc}footer .brand{gap:9px}footer .brand-mark{width:32px;height:32px;border-radius:9px}footer .brand-wordmark{font-size:20px}@media(max-width:600px){header{gap:12px}.brand{gap:8px}header .brand-mark{width:36px;height:36px;border-radius:11px}header .brand-wordmark{font-size:22px}.edition{font-size:11px;text-align:right}.beta{display:none}}

/* Reading and partnership pathways */
.related-heading{display:flex;justify-content:space-between;gap:16px;align-items:center}.related-heading .eyebrow{margin:0 0 5px;font-size:12px}.related-heading .age-badge{flex-shrink:0}.related-intro{font-size:16px;color:var(--muted);margin:16px 0}.related-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reading-card{display:block;text-decoration:none;background:#f4f7ff;border:1px solid #dfe6f7;border-radius:13px;padding:19px;transition:border-color .15s}.reading-card:hover{border-color:var(--blue)}.reading-card:focus-visible,.blog-all:focus-visible{outline:3px solid #91b7ff;outline-offset:3px}.reading-card h3{margin:0 0 8px;font-size:17px}.reading-card p{font-size:14px;color:var(--muted);margin:0 0 16px}.reading-card span{font-size:14px;color:var(--blue);font-weight:650}.blog-all{display:inline-block;margin-top:18px;font-size:14px;color:var(--blue);text-underline-offset:4px}.editorial-note{font-size:13px;color:var(--muted);margin:14px 0 0}.partner-options{margin-top:24px;border:1px solid var(--line);background:#fff;border-radius:18px;padding:30px}.partner-options .eyebrow{font-size:12px;margin-bottom:7px}.partner-options>div>p:last-child{font-size:16px;color:var(--muted)}.partner-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}.partner-grid article{border-top:2px solid #dce4f4;padding-top:14px}.partner-grid span{font-size:12px;color:var(--blue)}.partner-grid h3{font-size:17px;margin:7px 0}.partner-grid p{font-size:14px;color:var(--muted);margin:0}.partner-footnote{color:var(--muted);font-size:14px;margin:24px 0 12px}.related-panel{border-top:3px solid #007f87}@media(max-width:800px){.related-heading{display:block}.related-heading .age-badge{display:inline-block;margin:9px 0 0}.partner-options{padding:24px}.partner-grid{grid-template-columns:1fr;gap:18px}}@media(max-width:420px){.related-cards{grid-template-columns:1fr}}

.adsense-placement{min-width:0;overflow:hidden}.ad-label{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}.data-policy{margin-top:24px}.data-policy p{max-width:900px;font-size:14px}

/* Keep each control and card within its grid track on narrow screens. */
header,main{width:100%;min-width:0}
.workspace>*,.output,.output>*,.two-col>*,.related-cards>*,.sensitivity-values>*,.intro>*,.advertiser-banner>*{min-width:0}
.panel,fieldset,form,.field,.unit-input,.chart,#results{min-width:0;max-width:100%}
fieldset{width:100%}
input,select{max-width:100%}
.section-heading{flex-wrap:wrap}
header,.chart-legend{flex-wrap:wrap}
.reading-card,.meaning,.percentile-guide,.advertiser-banner,.partner-options,#technical{overflow-wrap:anywhere}
.big{font-size:clamp(1.875rem,4.5vw,2.75rem);letter-spacing:-.045em;overflow-wrap:anywhere}
.percentile-guide{margin-top:20px;padding:16px;border:1px solid #dce5f7;border-radius:12px;background:#f7f9ff}
.percentile-guide h3{font-size:16px;margin:0 0 8px}
.percentile-guide p{font-size:14px;margin:8px 0 0}
.percentile-guide .hint{font-size:13px}
.history-row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr) auto;overflow-wrap:anywhere}
@media(max-width:420px){.result-grid{grid-template-columns:minmax(0,1fr)}.big{font-size:2.25rem}.panel{padding:18px}.sensitivity-values{gap:6px}.sensitivity-values strong{font-size:15px}.edition{max-width:100%}}