:root{
    --ink:#1c2333;
    --ink-soft:#4b5468;
    --paper:#f6f4ee;
    --surface:#ffffff;
    --line:#e2ddd0;
    --navy:#1b2a4a;
    --navy-soft:#33456e;
    --gold:#b8863f;
    --gold-soft:#f0e2c4;
    --good:#2f7d5c;
    --good-soft:#e4f2ea;
    --warn:#b23b3b;
    --warn-soft:#f8e6e2;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#eae7de; --ink-soft:#a9a89f; --paper:#14161c; --surface:#1c1f27;
      --line:#2e323d; --navy:#6c85c2; --navy-soft:#8fa3d1; --gold:#d9ac5f;
      --gold-soft:#3a2f1c; --good:#6cc79b; --good-soft:#183226; --warn:#e08585; --warn-soft:#3a2020;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --ink:#eae7de; --ink-soft:#a9a89f; --paper:#14161c; --surface:#1c1f27;
    --line:#2e323d; --navy:#6c85c2; --navy-soft:#8fa3d1; --gold:#d9ac5f;
    --gold-soft:#3a2f1c; --good:#6cc79b; --good-soft:#183226; --warn:#e08585; --warn-soft:#3a2020;
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  body{
    background:var(--paper); color:var(--ink);
    font-family:"Noto Sans KR","Pretendard",-apple-system,sans-serif;
    padding-inline:0; padding-block:0; line-height:1.5;
  }
  .wrap{max-width:1040px;margin:0 auto;padding-inline:20px;}
  h1,h2,h3{font-family:"Noto Serif KR",serif;font-weight:700;letter-spacing:-0.01em;text-wrap:balance;}
  .mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;}
  a{color:inherit;}
  section{scroll-margin-top:70px;}

  .draft-banner{
    background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--warn);
    padding:10px 20px; font-size:12.5px; display:flex; gap:8px; align-items:center; justify-content:center; text-align:center;
  }

  nav.topbar{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:10;
    background:var(--surface); border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1040px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:center; gap:8px; font-family:"Noto Serif KR",serif; font-weight:700; font-size:17px; color:var(--navy);}
  .brand .logo-mark{width:26px; height:26px; flex:none;}
  .navlinks{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft);}
  .navlinks a:hover{color:var(--navy);}
  .nav-cta{
    font-size:12.5px; border:1px solid var(--navy); color:var(--navy);
    border-radius:8px; padding:6px 12px; white-space:nowrap;
  }

  .trust-strip{background:var(--navy); color:#fff;}
  .trust-inner{
    max-width:1040px;margin:0 auto;padding:10px 20px;
    display:flex; gap:22px; flex-wrap:wrap; font-size:12.5px; align-items:center;
  }
  .trust-inner .item{display:flex; gap:6px; align-items:center; opacity:.92;}
  .trust-inner .item b{color:var(--gold);}

  header.hero{padding-block:48px 24px;}
  .hero-logo-row{display:flex; align-items:center; gap:14px; margin-bottom:4px;}
  .hero-logo-row .logo-mark{width:52px; height:52px; flex:none;}
  .eyebrow{color:var(--gold); font-size:12px; letter-spacing:.12em; font-weight:700; text-transform:uppercase;}
  h1{font-size:clamp(26px,5vw,40px); margin:10px 0 12px; color:var(--navy);}
  .lede{color:var(--ink-soft); font-size:15.5px; max-width:58ch;}
  .tagline{
    font-family:"Noto Serif KR",serif; font-style:italic; color:var(--gold);
    font-size:14px; margin-top:10px;
  }
  .badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
  .badge{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 12px; font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px;}
  .badge b{color:var(--navy);}

  .panel{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; margin-top:24px;}
  .panel h2{font-size:19px; margin:0 0 4px; color:var(--navy);}
  .panel .sub{color:var(--ink-soft); font-size:13px; margin-bottom:18px;}

  label.field{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
  input[type="text"], input[type="number"]{
    width:100%; border:1px solid var(--line); background:var(--paper); color:var(--ink);
    border-radius:10px; padding:10px 12px; font-size:15px; font-family:inherit;
  }
  input:focus{outline:2px solid var(--navy-soft); outline-offset:1px;}
  .row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px;}
  @media (max-width:520px){.row{grid-template-columns:1fr;}}

  .country-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px;}
  @media (max-width:640px){.country-grid{grid-template-columns:repeat(2,1fr);}}
  .country-card{border:1px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; background:var(--paper); transition:border-color .15s, background .15s; position:relative;}
  .country-card input{position:absolute; top:10px; right:10px; width:16px; height:16px; accent-color:var(--navy);}
  .country-card.checked{border-color:var(--navy); background:var(--gold-soft);}
  .country-card .flag{font-size:22px;}
  .country-card .name{font-weight:700; font-size:14px; margin-top:4px; color:var(--ink);}
  .country-card .period{font-size:11px; color:var(--ink-soft); margin-top:2px;}
  .country-card .custom-tag{font-size:10px; color:var(--gold); font-weight:700; margin-top:2px;}
  .rank-dot{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:999px; background:var(--navy); color:#fff;
    font-size:9px; font-weight:700; margin-right:4px; font-family:"IBM Plex Mono",monospace;
  }

  .result{border-top:1px dashed var(--line); margin-top:20px; padding-top:16px;}
  table.quote{width:100%; border-collapse:collapse; font-size:13px;}
  table.quote th{text-align:left; color:var(--ink-soft); font-weight:600; padding:6px 4px; border-bottom:1px solid var(--line); font-size:11px; text-transform:uppercase; letter-spacing:.04em;}
  table.quote td{padding:8px 4px; border-bottom:1px solid var(--line);}
  table.quote td.num{text-align:right;}
  .total-row td{font-weight:700; color:var(--navy); border-bottom:none; padding-top:12px;}
  .total-row .amount{font-size:22px;}
  .empty-note{color:var(--ink-soft); font-size:13px; padding:14px 0;}

  .cta{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  button.primary{background:var(--navy); color:#fff; border:none; border-radius:10px; padding:12px 20px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;}
  button.primary:hover{background:var(--navy-soft);}
  button.primary:disabled{opacity:.5; cursor:not-allowed;}
  .cta-note{font-size:12px; color:var(--ink-soft);}
  .confirm{background:var(--good-soft); color:var(--good); border:1px solid var(--good); border-radius:10px; padding:12px 16px; font-size:13px; margin-top:14px; display:none;}
  .confirm.show{display:block;}

  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px;}
  @media (max-width:700px){.steps{grid-template-columns:repeat(2,1fr);}}
  .step{border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--paper);}
  .step .num{font-family:"IBM Plex Mono",monospace; color:var(--gold); font-size:12px; font-weight:700;}
  .step .title{font-weight:700; margin-top:6px; font-size:14px;}
  .step .desc{font-size:12px; color:var(--ink-soft); margin-top:4px;}

  .price-table-wrap{overflow-x:auto;}
  table.price-detail{width:100%; border-collapse:collapse; font-size:12.5px; min-width:1080px;}
  .expedite-badge{display:inline-block; background:var(--good-soft); color:var(--good); font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px;}
  table.price-detail th{
    background:var(--paper); color:var(--ink-soft); font-weight:600; font-size:11px;
    text-transform:uppercase; letter-spacing:.03em; padding:10px 8px; border-bottom:1px solid var(--line); text-align:left;
  }
  table.price-detail td{padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top;}
  table.price-detail td.num{text-align:right; font-family:"IBM Plex Mono",monospace;}
  .country-cell{display:flex; align-items:center; gap:8px; font-weight:700;}
  .remark{color:var(--ink-soft); font-size:11.5px;}

  .feed{display:flex; flex-direction:column; gap:0;}
  .feed-row{display:grid; grid-template-columns:70px 1fr 1fr auto; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line); font-size:12.5px; align-items:center;}
  @media (max-width:560px){.feed-row{grid-template-columns:60px 1fr auto; } .feed-row .feed-applicant{display:none;}}
  .feed-status{font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; text-align:center;}
  .feed-status.review{background:var(--gold-soft); color:var(--gold);}
  .feed-status.filed{background:var(--good-soft); color:var(--good);}
  .feed-status.registered{background:#dce6fb; color:var(--navy);}
  .feed-mark{font-family:"IBM Plex Mono",monospace; color:var(--ink-soft);}
  .feed-applicant{color:var(--ink-soft);}
  .feed-date{color:var(--ink-soft); font-size:11.5px; white-space:nowrap;}
  .feed-note{font-size:11px; color:var(--ink-soft); margin-top:10px;}

  .diff-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px;}
  @media (max-width:700px){.diff-grid{grid-template-columns:repeat(2,1fr);}}
  .diff-card{border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--paper);}
  .diff-card .label{font-size:10.5px; letter-spacing:.08em; color:var(--gold); font-weight:700; text-transform:uppercase;}
  .diff-card .val{font-family:"Noto Serif KR",serif; font-weight:700; font-size:15px; margin-top:6px; color:var(--navy);}
  .diff-card .desc{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}

  .company-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; font-size:12.5px; color:var(--ink-soft); margin-top:8px;}
  @media (max-width:560px){.company-grid{grid-template-columns:1fr;}}
  .company-grid dt{font-weight:600; color:var(--ink);}
  .company-grid dd{margin:0 0 6px;}


  .name-meaning{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px;}
  @media (max-width:700px){.name-meaning{grid-template-columns:1fr;}}
  .name-card{border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--paper);}
  .name-card .word{font-family:"IBM Plex Mono",monospace; color:var(--gold); font-size:12px; font-weight:700;}
  .name-card .title{font-weight:700; font-size:14px; margin-top:6px; color:var(--navy);}
  .name-card .desc{font-size:12px; color:var(--ink-soft); margin-top:4px;}

  footer{margin-top:40px; padding:24px 0 40px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft);}

[hidden]{display:none !important;}