:root{
    --bg:#ffffff; --fg:#16181d; --muted:#5b6270; --line:#e3e6ec;
    --card:#f7f8fa; --accent:#1f6feb; --accent-fg:#ffffff;
    --good:#0f7b47; --warn:#8a5a00; --warnbg:#fff8e6;
    --accent-strong:#1a5fd0;
    --font-sans:"IBM Plex Sans KR","Malgun Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --radius:12px; --maxw:760px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#101317; --fg:#e8eaee; --muted:#a0a7b4; --line:#272c34;
      --card:#171b21; --accent:#4c8dff; --accent-fg:#0b0d10; --accent-strong:#8fbaff;
      --good:#4ade80; --warn:#e0b357; --warnbg:#241f12;
    }
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--bg); color:var(--fg);
    font:400 16px/1.75 var(--font-sans);
    word-break:keep-all;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px 72px}
  header{padding:28px 0 6px}
  h1{font-size:1.6rem; line-height:1.35; margin:0 0 8px; letter-spacing:-.02em}
  .sub{color:var(--muted); font-size:.94rem; margin:0}
  .updated{color:var(--muted); font-size:.82rem; margin-top:10px}
  h2{font-size:1.18rem; margin:36px 0 12px; letter-spacing:-.01em}
  h3{font-size:1rem; margin:22px 0 8px}
  p{margin:0 0 12px}
  a{color:var(--accent)}
  /* 앰버 배경(.note) 위에서는 기본 파랑이 대비 4.37 로 기준(4.5) 미달 — Lighthouse 실측 */
  .note a{color:var(--accent-strong); text-underline-offset:2px}

  form{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-top:18px}
  .field{margin-bottom:16px}
  .field:last-of-type{margin-bottom:0}
  label,.lbl{display:block; font-weight:600; font-size:.92rem; margin-bottom:6px}
  .hint{color:var(--muted); font-size:.82rem; font-weight:400; margin-top:4px}
  /* 타입을 열거하지 않는다 — 새 input 타입(date 등)이 추가될 때마다
   빠뜨려 폭이 깨지는 사고가 세 번 났다. 예외만 뺀다. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]),select{
    width:100%; padding:12px 13px; font-size:1rem; color:var(--fg);
    background:var(--bg); border:1px solid var(--line); border-radius:9px;
  }
  input:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px}
  .check{display:flex; gap:9px; align-items:flex-start}
  .check input{margin-top:5px; width:18px; height:18px; flex:none}
  .check label{font-weight:500; margin:0}
  button{
    width:100%; margin-top:18px; padding:14px; font-size:1rem; font-weight:700;
    color:var(--accent-fg); background:var(--accent); border:0; border-radius:9px; cursor:pointer;
  }
  details.adv{margin-top:14px; border-top:1px dashed var(--line); padding-top:12px}
  details.adv summary{cursor:pointer; font-size:.9rem; color:var(--muted)}
  details.adv .field{margin-top:14px}

  #result{margin-top:20px}
  .headline{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px; text-align:center;
  }
  .headline .big{font-size:2.1rem; font-weight:700; letter-spacing:-.035em; color:var(--good); margin:8px 0; font-variant-numeric:tabular-nums}
  .headline .cap{color:var(--muted); font-size:.88rem}
  .rows{margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
  .row{display:flex; justify-content:space-between; gap:12px; padding:12px 15px; border-bottom:1px solid var(--line); font-size:.95rem}
  .row:last-child{border-bottom:0}
  .row span:first-child{color:var(--muted)}
  .row span:last-child{font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
  .note{background:var(--warnbg); border:1px solid var(--line); border-left:3px solid var(--warn);
        border-radius:8px; padding:12px 14px; font-size:.88rem; color:var(--fg); margin-top:14px}
  .steps{margin-top:12px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); font-size:.88rem}
  .steps div{padding:4px 0; color:var(--muted)}
  .steps b{color:var(--fg)}
  .err{color:#c0392b; font-weight:600; padding:14px; border:1px solid var(--line); border-radius:var(--radius)}

  table{width:100%; border-collapse:collapse; font-size:.9rem; margin:10px 0 4px; display:block; overflow-x:auto; white-space:nowrap}
  th,td{border:1px solid var(--line); padding:9px 11px; text-align:center}
  th{background:var(--card); font-weight:600}
  ul{padding-left:20px; margin:0 0 12px}
  li{margin-bottom:7px}
  .faq{border:1px solid var(--line); border-radius:var(--radius); padding:2px 16px; margin-bottom:10px}
  .faq summary{cursor:pointer; font-weight:600; padding:13px 0; font-size:.96rem}
  .faq p{padding-bottom:8px; margin:0; color:var(--muted)}
  footer{margin-top:44px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem}
  .src{font-size:.84rem; color:var(--muted)}
  .src a{color:var(--muted)}

/* ---- 사이트 공통 내비 / 홈 목록 (2페이지부터 추가) ---- */
nav.top{display:flex; gap:14px; align-items:center; padding:14px 0 0; font-size:.88rem}
nav.top a{color:var(--muted); text-decoration:none}
nav.top a:hover{color:var(--accent)}
nav.top .brand{font-weight:800; color:var(--fg); letter-spacing:-.02em}

.cards{display:grid; gap:12px; margin-top:18px}
.card{display:block; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius);
      background:var(--card); text-decoration:none; color:var(--fg)}
.card:hover{border-color:var(--accent)}
.card b{display:block; font-size:1.02rem; margin-bottom:4px}
.card span{color:var(--muted); font-size:.88rem}
.card.soon{opacity:.55; pointer-events:none}

/* ---- 선택지(라디오)를 버튼처럼 ---- */
.seg{display:flex; gap:8px; flex-wrap:wrap}
.seg label{
  flex:1 1 auto; min-width:96px; margin:0; padding:11px 10px; text-align:center; cursor:pointer;
  border:1px solid var(--line); border-radius:9px; background:var(--bg);
  font-weight:500; font-size:.92rem;
}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg input:checked + span{color:var(--accent-fg)}
.seg label:has(input:checked){background:var(--accent); border-color:var(--accent); color:var(--accent-fg); font-weight:700}
.seg label:focus-within{outline:2px solid var(--accent); outline-offset:1px}

/* ---- 결과 링크 복사 (share.js 가 폼 끝에 넣는다) ---- */
button.share{
  margin-top:9px; padding:11px; font-size:.9rem; font-weight:500;
  color:var(--muted); background:transparent; border:1px solid var(--line);
}
button.share:hover{color:var(--accent); border-color:var(--accent)}