:root { --ink:#17201b; --muted:#59645e; --paper:#f8f7f2; --white:#fff; --accent:#27644a; --soft:#e4eee7; --line:#d9ded9; --serif: Georgia, "Noto Serif KR", serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif; line-height:1.7; }
a { color:inherit; }
.skip { position:absolute; left:-9999px; top:8px; padding:.6rem 1rem; background:var(--ink); color:white; z-index:10; }
.skip:focus { left:8px; }
header { height:72px; padding:0 max(24px,calc((100% - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(248,247,242,.95); border-bottom:1px solid var(--line); }
.brand { font:700 1.1rem var(--serif); text-decoration:none; }
nav { display:flex; align-items:center; gap:24px; }
nav a { font-size:.9rem; font-weight:650; text-decoration:none; }
.nav-cta { padding:8px 15px; color:white; background:var(--accent); border-radius:99px; }
main { min-height:70vh; }
.hero { max-width:1120px; margin:auto; padding:110px 24px 120px; background:radial-gradient(circle at 80% 38%,#dce9df 0 14%,transparent 14.2%); }
.hero h1 { max-width:760px; margin:12px 0 26px; font:700 clamp(3rem,8vw,6.3rem)/1.04 var(--serif); letter-spacing:-.055em; }
.hero h1 em { color:var(--accent); font-style:normal; }
.hero>p:not(.eyebrow) { max-width:600px; color:var(--muted); font-size:1.12rem; }
.hero .trust { margin-top:24px; font-size:.92rem!important; }
.eyebrow { margin:0 0 10px; color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.actions { margin-top:35px; display:flex; align-items:center; flex-wrap:wrap; gap:22px; }
.button { display:inline-block; min-height:50px; padding:12px 22px; color:white; background:var(--accent); border-radius:5px; font-weight:750; text-decoration:none; }
.button:hover { background:#1d503a; }
.text-link { font-weight:700; text-underline-offset:5px; }
.section { padding:90px max(24px,calc((100% - 1120px)/2)); background:var(--white); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:40px; }
.section-head h2,.feature h2 { margin:0; font:700 clamp(2rem,4vw,3rem)/1.2 var(--serif); letter-spacing:-.035em; }
.section-head>p { max-width:430px; color:var(--muted); }
.type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.type-card { min-height:180px; padding:22px; display:grid; grid-template-columns:42px 1fr; align-content:center; background:var(--paper); border:1px solid transparent; text-decoration:none; transition:.2s; }
.type-card:hover,.type-card:focus-visible { border-color:var(--accent); transform:translateY(-2px); }
.type-card span { grid-row:1/3; font:700 2rem var(--serif); color:var(--accent); }
.type-card strong { font-size:1rem; }
.type-card small { color:var(--muted); }
.type-card p { grid-column:2; margin:8px 0 0; color:var(--muted); font-size:.88rem; line-height:1.55; }
.reason-grid,.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.reason-grid article { padding:28px; background:var(--paper); }
.reason-grid b,.guide-card small,.guide-card span { color:var(--accent); font-weight:800; }
.reason-grid h3 { margin:12px 0 8px; font:700 1.25rem var(--serif); }
.reason-grid p { margin:0; color:var(--muted); }
.guide-card { padding:28px; display:flex; flex-direction:column; background:var(--paper); text-decoration:none; border:1px solid transparent; }
.guide-card:hover,.guide-card:focus-visible { border-color:var(--accent); }
.guide-card strong { margin:10px 0; font:700 1.35rem var(--serif); }
.guide-card p { flex:1; color:var(--muted); }
.closing { padding:90px 24px; text-align:center; background:var(--soft); }
.closing h2 { margin:0 auto 30px; font:700 clamp(2rem,4vw,3.2rem)/1.25 var(--serif); }
.feature { padding:90px max(24px,calc((100% - 1120px)/2)); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:50px; }
.steps b { color:var(--accent); }
.steps h3 { margin:8px 0; font:700 1.35rem var(--serif); }
.steps p { color:var(--muted); }
.article { max-width:800px; margin:auto; padding:90px 24px 120px; }
.guide-index { max-width:1120px; }
.guide-index .guide-grid { grid-template-columns:repeat(3,1fr); }
.article h1 { margin:8px 0 30px; font:700 clamp(2.6rem,7vw,4.6rem)/1.12 var(--serif); letter-spacing:-.045em; }
.article .lead { margin-bottom:70px; color:var(--muted); font-size:1.25rem; line-height:1.8; }
.article section { margin:55px 0; }
.article h2 { font:700 1.55rem/1.35 var(--serif); letter-spacing:-.02em; }
.fact-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fact-grid section { margin:0; padding:25px; background:white; border-top:3px solid var(--accent); }
.fact-grid h2 { margin:0; font-size:1.2rem; }
.jump { margin:36px 0 70px; padding:16px 0; display:flex; flex-wrap:wrap; gap:10px 20px; border-block:1px solid var(--line); }
.jump a { font-size:.9rem; text-underline-offset:4px; }
.patterns { padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; list-style:none; }
.patterns li { padding:18px 20px; background:white; border-left:3px solid var(--soft); }
.contrast { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:70px 0; }
.contrast section { margin:0; padding:28px; background:white; }
.contrast section:last-child { background:#f0eee8; }
.observe { margin:70px 0; padding:38px; background:var(--soft); }
.observe h2 { margin:0; font-size:1.7rem; }
.observe ol { margin:24px 0 0; padding:0; list-style:none; }
.observe li { padding:15px 0; display:grid; grid-template-columns:42px 1fr; gap:8px; border-top:1px solid #c5d8ca; font-size:1.08rem; }
.observe li span { color:var(--accent); font-weight:800; }
.related-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.related-cards article { padding:22px; background:white; border:1px solid var(--line); }
.related-cards h3 { margin:0; font:700 1.1rem var(--serif); }
.related-cards p { color:var(--muted); }
.related-cards a { color:var(--accent); font-weight:750; }
.related { display:flex; flex-wrap:wrap; gap:10px; }
.related a { padding:12px 16px; background:white; border:1px solid var(--line); font-weight:700; text-decoration:none; }
.comparison-sides { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.comparison-sides section { margin:0; padding:26px; background:white; border-top:3px solid var(--accent); }
.comparison-sides h3 { margin:4px 0 12px; font:700 1.25rem var(--serif); }
.comparison-sides p:last-child { margin-bottom:0; }
.situations { display:grid; gap:18px; }
.situations>article { padding:24px; background:#f0eee8; }
.situations>article>h3 { margin:0 0 18px; font:700 1.2rem var(--serif); }
.next { margin-top:80px; padding:32px; background:var(--ink); color:white; }
.notice { margin:35px 0; padding:25px; border-left:4px solid var(--accent); background:white; }
.legal h1 { font-size:3rem; }
footer { padding:55px max(24px,calc((100% - 1120px)/2)); color:#d8ded9; background:var(--ink); }
footer strong { color:white; font:700 1.2rem var(--serif); }
footer p { font-size:.9rem; }
footer div { display:flex; gap:20px; font-size:.85rem; }
:focus-visible { outline:3px solid #d18a1e; outline-offset:3px; }
@media (max-width:700px) {
  header { height:64px; } nav { gap:14px; } nav>a:not(.nav-cta) { display:none; }
  .hero { padding-top:75px; padding-bottom:85px; background:radial-gradient(circle at 85% 24%,#dce9df 0 11%,transparent 11.3%); }
  .hero h1 { font-size:clamp(3rem,15vw,4.5rem); }
  .section,.feature { padding-top:65px; padding-bottom:65px; }
  .section-head { display:block; }
  .type-grid { grid-template-columns:1fr; }
  .type-card { min-height:100px; }
  .steps,.fact-grid,.reason-grid,.guide-grid,.patterns,.contrast,.related-cards,.comparison-sides { grid-template-columns:1fr; gap:12px; }
  .type-card { min-height:150px; }
  .article { padding-top:65px; }
  .guide-index .guide-grid { grid-template-columns:1fr; }
  .article .lead { margin-bottom:50px; }
  .observe { margin-left:-8px; margin-right:-8px; padding:28px 24px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }