:root {
  --paper: #f5f0e5;
  --panel: #fffdf8;
  --ink: #0d3b4c;
  --text: #20363e;
  --muted: #66736e;
  --line: #c7cec4;
  --orange: #d86935;
  --orange-soft: #f5dfcf;
  --sage: #e5e9df;
  --shadow: 7px 8px 0 rgba(13, 59, 76, .10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--paper); font-family: "Noto Sans KR", "Malgun Gothic", Arial, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.mono { font-family: "SFMono-Regular", Consolas, monospace; }
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.site-nav { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #d5d0c4; background: rgba(245,240,229,.96); backdrop-filter: blur(10px); }
.nav-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; background: var(--ink); color: #f7c5a5; font-size: 18px; font-weight: 900; clip-path: polygon(12% 0,88% 0,100% 18%,100% 100%,0 100%,0 18%); }
.brand strong { display: block; color: var(--ink); font-size: 18px; letter-spacing: -.07em; }
.brand small { display: block; margin-top: 1px; color: var(--orange); font: 800 8px/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .15em; }
.nav-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; font-weight: 800; }
.nav-links a { color: #52655f; text-decoration: none; }
.nav-links a[aria-current=page] { color: var(--orange); border-bottom: 2px solid var(--orange); padding-bottom: 4px; }
.guide-nav-link { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #b85023; background: var(--orange); padding: 0 11px; color: white; font-size: 11px; font-weight: 900; text-decoration: none; white-space: nowrap; box-shadow: 3px 3px 0 rgba(13,59,76,.13); }
.guide-nav-link span { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #f7c5a5; font: 800 9px "SFMono-Regular", Consolas, monospace; }
.hero { overflow: hidden; border-bottom: 1px solid #d5d0c4; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 390px; }
.hero-copy { padding: 72px 0 62px; }
.eyebrow { color: #b95123; font: 800 10px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .15em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 720px; margin: 17px 0 18px; color: var(--ink); font-size: clamp(39px, 5vw, 62px); line-height: 1.08; letter-spacing: -.09em; }
h1 em { color: var(--orange); font-style: normal; }
.hero-copy > p { max-width: 670px; color: #566b65; font-size: 15px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); background: var(--ink); padding: 0 16px; color: white; font-size: 12px; font-weight: 900; text-decoration: none; }
.button.secondary { background: transparent; color: var(--ink); }
.button.guide-button { border-color: var(--orange); background: var(--orange); }
.route-map { position: relative; min-height: 300px; overflow: hidden; border-left: 1px solid #d5d0c4; background: linear-gradient(145deg,#ece6da,#b3c1bd 58%,#294d59); }
.route-map::before { content: ""; position: absolute; width: 430px; height: 120px; right: -60px; bottom: 68px; border: 16px solid #edf0ec; border-radius: 70px 115px 32px 32px; box-shadow: inset 0 -23px 0 #72827f, 0 17px 0 rgba(13,59,76,.18); transform: skewX(-9deg); }
.route-map::after { content: ""; position: absolute; width: 95px; height: 95px; right: 48px; bottom: 28px; border: 15px solid #263f48; border-radius: 50%; box-shadow: -226px 0 0 -3px #263f48; }
.map-note { position: absolute; z-index: 1; top: 30px; left: 28px; width: min(240px, calc(100% - 56px)); border-left: 2px solid var(--orange); background: rgba(245,240,229,.93); padding: 16px; box-shadow: 4px 4px 0 rgba(13,59,76,.10); }
.map-note strong { display: block; margin-top: 8px; color: var(--ink); font-size: 14px; }
.map-note p { margin: 7px 0 0; color: #62736d; font-size: 10px; line-height: 1.6; }
.section { padding: 68px 0; }
.section.alt { border-top: 1px solid #d5d0c4; background: var(--sage); }
.guide-section { scroll-margin-top: 68px; border-bottom: 1px solid #082a35; background: var(--ink); }
.guide-section .section-head h2 { color: white; }
.guide-section .section-head p { color: #c4d2cd; }
.guide-section .eyebrow { color: #f4a46f; }
.guide-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.guide-card { position: relative; min-height: 244px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.20); background: #123f4d; padding: 22px; color: white; text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.guide-card:hover { transform: translateY(-4px); border-color: #f4a46f; background: #184c5b; }
.guide-card.featured { border-color: #d97847; background: #fff3e9; color: var(--ink); box-shadow: 5px 5px 0 rgba(216,105,53,.28); }
.guide-card.featured:hover { background: #fff9f3; }
.guide-index { position: absolute; top: 13px; right: 16px; color: rgba(255,255,255,.18); font: 900 42px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: -.1em; }
.guide-card.featured .guide-index { color: rgba(216,105,53,.20); }
.guide-card small { position: relative; z-index: 1; color: #f4a46f; font: 800 9px/1.4 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }
.guide-card h3 { position: relative; z-index: 1; margin: 29px 0 11px; color: inherit; font-size: 18px; line-height: 1.45; letter-spacing: -.055em; }
.guide-card p { position: relative; z-index: 1; margin: 0; color: #b9cbc5; font-size: 11px; line-height: 1.7; }
.guide-card.featured p { color: #5f6f69; }
.guide-card .go { position: relative; z-index: 1; display: block; margin-top: auto; padding-top: 22px; color: #f4a46f; font-size: 11px; font-weight: 900; }
.section-head { display: grid; grid-template-columns: .9fr 1.1fr; align-items: end; gap: 38px; margin-bottom: 28px; }
.section-head h2 { margin: 11px 0 0; color: var(--ink); font-size: clamp(31px,4vw,46px); line-height: 1.1; letter-spacing: -.08em; }
.section-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.layout { display: grid; grid-template-columns: .9fr 1.1fr; border: 1px solid #bdc6bc; background: var(--panel); box-shadow: var(--shadow); }
.panel { padding: 28px; }
.panel + .panel { border-left: 1px solid #cbd1c8; }
.panel.result { background: var(--ink); color: white; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #d5d3ca; padding-bottom: 14px; }
.result .panel-title { border-color: rgba(255,255,255,.22); }
.panel-title h2, .panel-title h3 { margin: 7px 0 0; color: var(--ink); font-size: 21px; letter-spacing: -.06em; }
.result .panel-title h2, .result .panel-title h3 { color: white; }
.field { display: grid; gap: 7px; border-bottom: 1px solid #dbd7cd; padding: 13px 0; }
.field > span:first-child, .legend { color: var(--text); font-size: 12px; font-weight: 900; }
.field small { color: #78837e; font-size: 10px; line-height: 1.45; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap input, .field select { width: 100%; min-height: 39px; border: 0; outline: 0; background: transparent; color: var(--ink); text-align: right; font: 800 18px "SFMono-Regular", Consolas, monospace; }
.field select { border: 1px solid #bdc6bc; background: white; padding: 0 9px; text-align: left; font-family: inherit; font-size: 13px; }
.unit { position: absolute; right: 0; color: #73807a; font: 12px "SFMono-Regular", Consolas, monospace; }
.input-wrap input { padding-right: 28px; }
.range { width: 100%; accent-color: var(--orange); }
.choice-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; margin-top: 8px; }
.choice-row.three { grid-template-columns: repeat(3,1fr); }
.choice-row button { min-height: 41px; border: 1px solid #c2cbc1; background: white; color: #5e7069; font-size: 12px; font-weight: 900; }
.choice-row button.active { border-color: var(--ink); background: var(--ink); color: white; }
.callout { margin: 16px 0 0; border-left: 2px solid var(--orange); background: #fff6ef; padding: 11px 13px; color: #655f5a; font-size: 11px; line-height: 1.6; }
.metric-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.metric { border-left: 2px solid #abc0b8; padding: 10px 12px; }
.metric.primary { grid-column: 1 / -1; border-color: #f4a46f; background: rgba(255,255,255,.07); padding: 17px; }
.metric span { color: #aec2bb; font-size: 10px; font-weight: 800; line-height: 1.4; }
.metric strong { display: block; margin-top: 6px; color: white; font: 800 clamp(21px,3vw,34px)/1.1 "SFMono-Regular", Consolas, monospace; letter-spacing: -.07em; overflow-wrap: anywhere; }
.metric.primary strong { font-size: clamp(31px,4vw,48px); }
.result-note { margin: 19px 0 0; border-top: 1px solid rgba(255,255,255,.22); padding-top: 15px; color: #ccdad2; font-size: 11px; line-height: 1.65; }
.light-result { border: 1px solid #bdc6bc; background: var(--panel); box-shadow: var(--shadow); padding: 28px; }
.table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.table th, .table td { border-top: 1px solid #d5dbd2; padding: 12px 8px; text-align: right; font-size: 12px; }
.table th:first-child, .table td:first-child { text-align: left; }
.table th { color: #66756f; font-size: 10px; }
.table td strong { color: var(--ink); font-family: "SFMono-Regular", Consolas, monospace; }
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.card { border: 1px solid #bdc6bc; background: var(--panel); padding: 20px; text-decoration: none; }
.card.active { border-color: var(--orange); box-shadow: 4px 4px 0 #efc4aa; }
.card small { color: var(--orange); font: 800 9px "SFMono-Regular", Consolas, monospace; letter-spacing: .12em; }
.card h3 { margin: 12px 0 8px; color: var(--ink); font-size: 18px; letter-spacing: -.05em; }
.card p { margin: 0; color: #64736d; font-size: 11px; line-height: 1.65; }
.card .go { display: block; margin-top: 18px; color: var(--ink); font-size: 11px; font-weight: 900; }
.ad-slot { display: none; min-height: 0; margin: 0; padding: 0; border: 0; }
.ad-slot:has(ins.adsbygoogle[data-ad-status="filled"]), .ad-slot.is-ad-filled { display: block; margin: 30px auto; }
.ad-slot ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
.status { margin-top: 18px; border: 1px solid #d7a98d; background: #fff6ef; padding: 14px; color: #655e59; font-size: 11px; line-height: 1.65; }
.footer { background: #0b313f; color: #d7e0d8; }
.footer-inner { display: grid; grid-template-columns: .7fr 1.3fr; gap: 28px; padding: 30px 0; }
.footer p { margin: 0; color: #c5d2c9; font-size: 10px; line-height: 1.7; }
.footer a { color: white; }
.print-only { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .hero-grid, .section-head, .layout { grid-template-columns: 1fr; }
  .route-map { border-left: 0; border-top: 1px solid #d5d0c4; }
  .panel + .panel { border-left: 0; border-top: 1px solid #cbd1c8; }
  .cards, .guide-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 28px,1180px); }
  .nav-inner { min-height: 61px; }
  h1 { font-size: 40px; }
  .hero-copy { padding: 52px 0 44px; }
  .route-map { min-height: 260px; }
  .section { padding: 50px 0; }
  .panel, .light-result { padding: 20px; }
  .form-grid, .metric-grid, .cards, .guide-grid { grid-template-columns: 1fr; }
  .metric.primary { grid-column: auto; }
  .choice-row.three { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .table { min-width: 620px; }
  .table-scroll { overflow-x: auto; }
}
@media print {
  .site-nav, .hero, .ad-slot, .footer, .no-print { display: none !important; }
  body { background: white; }
  .section { padding: 0; }
  .layout, .light-result { box-shadow: none; }
}

/* --- 푸터 링크 · 정책 문서 페이지 · 인쇄 광고 숨김 --- */
.footer-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.footer-links a{color:#cfd8d3;font-size:12px;font-weight:700;text-decoration:none}
.footer-links a:hover{color:#fff}
.doc-page{max-width:760px;margin:0 auto;padding:52px 20px}
.doc-page h1{font-size:clamp(28px,4vw,38px);margin:0 0 8px;color:var(--ink)}
.doc-page h2{font-size:19px;margin:32px 0 10px;color:var(--ink)}
.doc-page p,.doc-page li{font-size:14px;line-height:1.8;color:var(--text)}
.doc-page ul{padding-left:20px}
.doc-updated{color:var(--muted);font-size:12px}
.doc-note{background:var(--orange-soft);border-left:4px solid var(--orange);padding:14px 16px;font-size:13px;line-height:1.7}
@media print{[data-ad]{display:none!important}}