:root{--ink:#15293a;--muted:#5e6d79;--paper:#f7f9f8;--soft:#e9eff0;--line:#d3dce0;--green:#316b65;--moss:#718d89;--gold:#b78a55;--max:1160px}
*{box-sizing:border-box}
html{font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink);scroll-behavior:smooth}
body{margin:0;line-height:1.72}
a{color:inherit;text-decoration:none}
a:hover{color:var(--green)}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;background:white;padding:10px;z-index:20}
.site-header{min-height:82px;width:min(calc(100% - 36px),var(--max));margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}
.brand{font-size:1.28rem;font-weight:800;letter-spacing:-.035em}
.brand small{display:block;font-size:.62rem;letter-spacing:.16em;color:var(--moss)}
nav{display:flex;gap:20px;font-weight:700;font-size:.86rem}
.hero{width:min(calc(100% - 36px),var(--max));margin:52px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.hero h1,.article-hero h1,.tool-page h1,.text-page h1{font-size:clamp(2.3rem,5.4vw,4.7rem);line-height:1.08;letter-spacing:-.06em;margin:.28em 0}
.hero>div>p{font-size:1.08rem;color:var(--muted);max-width:600px}
.hero img{border-radius:8px 42px 8px 42px;box-shadow:0 24px 70px rgba(21,41,58,.15)}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.actions{display:flex;gap:18px;align-items:center;margin:28px 0}
.button{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:white;padding:13px 20px;border-radius:999px;font-weight:800;border:0}
.button:hover{color:white;background:#344d41}
.button.light{background:white;color:var(--ink)}
.hero dl,.article-hero dl{display:flex;gap:32px;margin-top:34px}
.hero dt,.article-hero dt{font-size:.72rem;color:var(--muted)}
.hero dd,.article-hero dd{margin:2px 0;font-weight:800}
.promise{margin-top:70px;background:var(--ink);color:white;padding:72px 24px;text-align:center}
.promise p{font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.45;margin:0}
.section,.upcoming,.article-page,.tool-page,.text-page{width:min(calc(100% - 36px),920px);margin:96px auto}
.section>header{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:38px}
.section h2,.tool-banner h2,.decision h2,.sources h2,.tool-help h2,.upcoming h2{font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.18;letter-spacing:-.045em;margin:.28em 0}
.section header p{color:var(--muted)}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.story{background:#fff;border:1px solid var(--line);padding:26px;border-radius:20px;display:flex;flex-direction:column}
.story>span,.upcoming li span{font-size:.72rem;color:var(--green);font-weight:800}
.story h3{font-size:1.28rem;line-height:1.34;letter-spacing:-.03em}
.story p{color:var(--muted);flex:1}
.story>a{font-weight:800;color:var(--green)}
.tool-banner{width:min(calc(100% - 36px),var(--max));margin:96px auto;background:var(--green);color:white;border-radius:30px;padding:52px;display:flex;align-items:end;justify-content:space-between;gap:40px}
.tool-banner p{opacity:.8}
.upcoming ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.upcoming li{background:var(--soft);padding:18px 20px;border-radius:14px}
.upcoming li span{display:block}
.article-page{max-width:820px}
.article-hero{padding-bottom:34px;border-bottom:1px solid var(--line)}
.article-hero>p{font-size:1.2rem;color:var(--muted)}
.article-opening{font-size:1.35rem;line-height:1.75;margin:52px 0}
.article-body section{margin:62px 0}
.article-body h2{font-size:1.8rem;letter-spacing:-.04em}
.article-body p{font-size:1.06rem}
.article-body ul{background:var(--soft);border-radius:18px;padding:24px 24px 24px 46px}
.decision{background:#e6eee8;border-radius:24px;padding:36px;margin:60px 0}
.sources{border-top:1px solid var(--line);margin-top:70px;padding-top:40px}
.sources ol{padding-left:22px}
.sources li{margin:18px 0}
.sources li a{font-weight:800}
.sources li span{display:block;color:var(--muted);font-size:.9rem}
.text-link{font-weight:800;color:var(--green)}
.tool-page{max-width:900px}
.tool-page>header{text-align:center;max-width:760px;margin:0 auto 42px}
.calculator{background:white;border:1px solid var(--line);border-radius:26px;padding:34px}
.calculator form{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.calculator label{font-size:.82rem;font-weight:800}
.calculator label.check{display:flex;align-items:center;gap:10px;background:var(--soft);padding:14px;border-radius:12px}
.calculator label.check input{width:auto;margin:0}
.calculator input{width:100%;display:block;margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:13px;font:inherit}
.calculator button{grid-column:1/-1;border:0;background:var(--green);color:white;border-radius:12px;padding:14px;font-weight:800}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.results div{background:var(--soft);border-radius:14px;padding:18px}
.results span{display:block;font-size:.75rem;color:var(--muted)}
.results strong{font-size:1.3rem}
.calculator-note{color:var(--muted);font-size:.9rem}
.tool-help{margin-top:50px}
.text-page{max-width:720px}
.text-page>p{font-size:1.1rem}
footer{background:var(--ink);color:white;padding:50px max(24px,calc((100% - var(--max))/2));display:flex;justify-content:space-between;gap:30px}
footer p{color:#c4cdc8}
footer>div:last-child{display:flex;gap:16px}
[hidden]{display:none!important}
@media(max-width:760px){.site-header{align-items:flex-start;flex-direction:column;padding:16px 0}
.site-header nav{gap:12px;flex-wrap:wrap}
.hero{grid-template-columns:1fr;margin-top:34px}
.hero dl{display:block}
.hero dl div{margin:12px 0}
.section>header,.story-grid,.calculator form,.results{grid-template-columns:1fr}
.tool-banner{align-items:flex-start;flex-direction:column;padding:34px}
.upcoming ul{grid-template-columns:1fr}
.article-hero dl{display:block}
.article-hero dl div{margin:10px 0}
footer{flex-direction:column}
footer>div:last-child{flex-wrap:wrap}
}