/* 가이드·소개·정책 페이지 공통 스타일. 계산기(index.html)와 같은 색·글꼴을 씁니다. */
:root{
  color-scheme:light;
  --bg:#eef1f3; --panel:#ffffff; --fg:#17212b; --muted:#5d6b78; --line:#d5dce2;
  --accent:#1d4ed8; --accent-soft:#dbe5fb; --cash:#0f766e; --cash-soft:#cdebe7; --warn:#b91c1c;
  --f-body:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-num:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1419; --panel:#182029; --fg:#e6ebef; --muted:#93a1ad; --line:#2a3541;
  --accent:#7aa2ff; --accent-soft:#1f2d4f; --cash:#4fd1c0; --cash-soft:#163a37; --warn:#f87171; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1419; --panel:#182029; --fg:#e6ebef; --muted:#93a1ad; --line:#2a3541;
  --accent:#7aa2ff; --accent-soft:#1f2d4f; --cash:#4fd1c0; --cash-soft:#163a37; --warn:#f87171; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);word-break:keep-all;overflow-wrap:break-word;font-size:16px;line-height:1.75;
  padding-inline:16px;padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(48px + env(safe-area-inset-bottom,0px))}
a{color:var(--accent)}

/* 상단 메뉴 (계산기 페이지도 함께 사용) */
.top{max-width:1040px;margin:0 auto 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.top .brand{font-weight:700;color:var(--fg);text-decoration:none;letter-spacing:-.01em}
.top nav{display:flex;gap:4px}
.top nav a{color:var(--muted);text-decoration:none;font-size:.92rem;padding:6px 10px;border-radius:6px}
.top nav a:hover{background:var(--panel);color:var(--fg)}
.top nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft);font-weight:500}
.top nav a{white-space:nowrap}
@media (max-width:480px){
  .top{flex-direction:column;align-items:flex-start;gap:6px}
  .top nav{gap:2px;margin-left:-8px}
  .top nav a{padding:6px 8px;font-size:.88rem}
}

/* 하단 링크 (계산기 페이지도 함께 사용) */
.site-foot{max-width:1040px;margin:32px auto 0;text-align:center;font-size:.82rem;color:var(--muted);line-height:1.7}
.site-foot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-bottom:6px}
.site-foot a{color:var(--muted)}

/* 글 본문 */
.article{max-width:760px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:28px 22px}
@media (min-width:640px){.article{padding:40px 48px}}
.article .meta{font-size:.82rem;color:var(--muted);margin:0 0 6px}
.article h1{font-size:1.65rem;line-height:1.35;margin:0 0 12px;letter-spacing:-.02em;text-wrap:balance}
.article .lead{font-size:1.05rem;color:var(--muted);margin:0 0 28px}
.article h2{font-size:1.2rem;margin:36px 0 10px;letter-spacing:-.01em}
.article h3{font-size:1.02rem;margin:24px 0 6px}
.article p,.article li{margin:0 0 12px}
.article ul,.article ol{padding-left:1.3em;margin:0 0 16px}
.article .ex{color:var(--muted);font-size:.9em}
.article table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:.92rem}
.article th,.article td{border-top:1px solid var(--line);padding:9px 8px;text-align:left;vertical-align:top}
.article th{color:var(--muted);font-weight:500;font-size:.85rem}
.article td.n{font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap{overflow-x:auto}
.box{background:var(--cash-soft);border-radius:8px;padding:14px 16px;margin:16px 0 20px}
.box p:last-child{margin-bottom:0}
.box b{color:var(--cash)}
.cta{display:block;margin:32px 0 8px;padding:16px 18px;border-radius:8px;background:var(--accent);color:var(--panel);text-decoration:none;font-weight:700}
.cta span{display:block;font-weight:400;font-size:.9rem;opacity:.9}
.note{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:28px}
.related{margin-top:28px}
.related h2{font-size:1rem;margin:0 0 8px}

/* 문의 폼 */
.form{display:flex;flex-direction:column;gap:18px;margin:8px 0 0}
.form .fld{display:flex;flex-direction:column;gap:6px}
.form label{font-weight:500;font-size:.95rem}
.form input,.form select,.form textarea{font:inherit;font-size:1rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
.form textarea{resize:vertical;min-height:140px;line-height:1.6}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form .ex{font-size:.85rem}
.form p.ex{margin:0}
.form button{align-self:flex-start;font:inherit;font-weight:700;color:var(--panel);background:var(--accent);border:0;border-radius:8px;padding:12px 28px;cursor:pointer}
.form button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 가이드 목록 */
.cards{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:12px}
.cards li{margin:0}
.cards a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--fg)}
.cards a:hover{border-color:var(--accent)}
.cards b{display:block;margin-bottom:2px}
.cards span{color:var(--muted);font-size:.92rem}