:root{
    --ground:#0E1116; --surface:#171C23; --surface-2:#1F262F; --raised:#232B35;
    --ink:#EAEEF3; --muted:#94A1B2; --faint:#8592A3; --hair:#2A333E;
    --accent:#3FB98C; --accent-dim:#1C3A30; --accent-ink:#0E1116;
    --pass:#3FB98C; --warn:#E0A93A; --crit:#E5604D; --undet:#8B99AC;
    --pass-bg:#132A22; --warn-bg:#2E2513; --crit-bg:#2E1815;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR","Malgun Gothic",sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  }
  :root[data-theme="light"]{
    --ground:#F4F6F8; --surface:#FFFFFF; --surface-2:#EDF1F5; --raised:#FFFFFF;
    --ink:#141A21; --muted:#54626F; --faint:#5F6B78; --hair:#DDE3EA;
    --accent:#12805B; --accent-dim:#EDF7F2; --accent-ink:#FFFFFF;
    --pass:#12805B; --warn:#9A6A0E; --crit:#C43A29; --undet:#5A6572;
    --pass-bg:#E4F3EC; --warn-bg:#F8EFD9; --crit-bg:#FAE7E3;
  }
  @media (prefers-color-scheme:light){
    :root:not([data-theme="dark"]){
      --ground:#F4F6F8; --surface:#FFFFFF; --surface-2:#EDF1F5; --raised:#FFFFFF;
      --ink:#141A21; --muted:#54626F; --faint:#5F6B78; --hair:#DDE3EA;
      --accent:#12805B; --accent-dim:#EDF7F2; --accent-ink:#FFFFFF;
      --pass:#12805B; --warn:#9A6A0E; --crit:#C43A29; --undet:#5A6572;
      --pass-bg:#E4F3EC; --warn-bg:#F8EFD9; --crit-bg:#FAE7E3;
    }
  }
  *{box-sizing:border-box}
  /* background FX (technical / scan / AI motif) — transform+opacity only, frozen under reduced-motion */
  :root{ --fx-line:rgba(63,185,140,.06); --fx-beam:rgba(63,185,140,.11); --fx-glow2:#1d4ed8; --fx-glowop:.22 }
  :root[data-theme="light"]{ --fx-line:rgba(18,128,91,.05); --fx-beam:rgba(18,128,91,.06); --fx-glow2:#6aa0ff; --fx-glowop:.13 }
  @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ --fx-line:rgba(18,128,91,.05); --fx-beam:rgba(18,128,91,.06); --fx-glow2:#6aa0ff; --fx-glowop:.13 } }
  .fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
  .fx i{position:absolute;display:block}
  .fx-grid{inset:-2px;background-image:linear-gradient(var(--fx-line) 1px,transparent 1px),linear-gradient(90deg,var(--fx-line) 1px,transparent 1px);background-size:46px 46px;opacity:.7}
  @keyframes fxdrift{to{transform:translateY(46px)}}
  .fx-scan{left:0;right:0;height:200px;top:0;background:linear-gradient(180deg,transparent,var(--fx-beam),transparent);animation:fxscan 8s cubic-bezier(.55,0,.5,1) infinite}
  @keyframes fxscan{0%{transform:translateY(-24vh)}100%{transform:translateY(122vh)}}
  .fx-glow{width:58vw;height:58vw;max-width:680px;max-height:680px;border-radius:50%;opacity:var(--fx-glowop)}
  .fx-g1{top:-14vh;left:-10vw;background:radial-gradient(circle,var(--accent),transparent 68%)}
  .fx-g2{bottom:-18vh;right:-12vw;background:radial-gradient(circle,var(--fx-glow2),transparent 68%)}
  @keyframes fxfloat1{50%{transform:translate(7vw,5vh) scale(1.09)}}
  @keyframes fxfloat2{50%{transform:translate(-6vw,-4vh) scale(1.12)}}
  .wrap{position:relative;z-index:1}
  .step,.vs-card,.price{transition:border-color .18s ease,box-shadow .2s ease}
  .step:hover,.vs-card:hover,.price:hover{border-color:var(--accent);box-shadow:0 4px 22px rgba(0,0,0,.20)}
  @media (prefers-reduced-motion:reduce){ .fx i{animation:none !important} }
  body{background:var(--ground); color:var(--ink); font-family:var(--sans);
    font-size:16px; line-height:1.65; margin:0; padding-block:0 72px;
    padding-left:20px; padding-right:20px; -webkit-font-smoothing:antialiased}
  .wrap{max-width:860px; margin:0 auto}
  a{color:var(--accent)}

  /* hero */
  .hero{padding-block:60px 40px}
  .badge{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
    font-size:12px; font-weight:500; letter-spacing:.05em; color:var(--accent);
    background:var(--accent-dim); border:1px solid var(--accent); border-radius:100px;
    padding:5px 13px; margin-bottom:22px}
  .badge::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent)}
  h1{font-size:clamp(28px,5.6vw,44px); font-weight:700; line-height:1.16;
    letter-spacing:-.02em; margin:0 0 18px; text-wrap:balance}
  h1 .hl{color:var(--accent)}
  .lede{font-size:17.5px; color:var(--muted); margin:0; max-width:60ch}
  .lede b{color:var(--ink); font-weight:600}

  /* trust strip */
  .trust{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair);
    border:1px solid var(--hair); border-radius:12px; overflow:hidden; margin:36px 0 8px}
  @media (max-width:560px){ .trust{grid-template-columns:1fr} }
  .trust div{background:var(--surface); padding:18px 18px}
  .trust .n{font-family:var(--mono); font-size:22px; font-weight:600; color:var(--accent); display:block}
  .trust .k{font-size:13px; color:var(--muted); margin-top:3px; line-height:1.5}

  section{padding-block:44px; border-top:1px solid var(--hair)}
  #faq h3{font-size:16.5px; font-weight:600; margin:22px 0 6px; color:var(--ink)}
  #faq p{color:var(--muted); max-width:64ch; margin:0}
  #faq p b{color:var(--ink); font-weight:600}
  #faq a{color:var(--accent)}
  .kicker{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent); margin:0 0 10px}
  h2{font-size:clamp(20px,3.6vw,26px); font-weight:600; letter-spacing:-.01em; margin:0 0 8px}
  .sub{color:var(--muted); margin:0 0 26px; max-width:60ch}

  /* the promise */
  .promise{background:linear-gradient(135deg,var(--accent-dim),transparent);
    border:1px solid var(--accent); border-radius:14px; padding:26px 26px}
  .promise h3{font-size:19px; margin:0 0 10px; font-weight:600}
  .promise p{margin:0; color:var(--ink); font-size:15.5px}
  .promise .fine{color:var(--muted); font-size:13.5px; margin-top:12px}

  /* steps */
  .steps{display:grid; gap:14px}
  .step{display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start;
    background:var(--surface); border:1px solid var(--hair); border-radius:12px; padding:20px}
  .step-n{width:44px; height:44px; border-radius:11px; background:var(--surface-2);
    border:1px solid var(--hair); display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-weight:600; font-size:18px; color:var(--accent)}
  .step h3{margin:0 0 5px; font-size:16.5px; font-weight:600}
  .step p{margin:0; color:var(--muted); font-size:14px}
  .step code{font-family:var(--mono); font-size:12.5px; background:var(--surface-2);
    padding:2px 6px; border-radius:5px; color:var(--ink); word-break:break-all}

  /* simulator */
  .sim{background:var(--surface); border:1px solid var(--hair); border-radius:14px; overflow:hidden}
  .sim-head{padding:16px 20px; border-bottom:1px solid var(--hair); display:flex;
    align-items:center; gap:10px; background:var(--surface-2)}
  .sim-head .dot{width:11px; height:11px; border-radius:50%; background:var(--faint)}
  .sim-head .t{font-family:var(--mono); font-size:12.5px; color:var(--muted)}
  .sim-body{padding:22px 20px}
  .field{margin-bottom:16px}
  .field label{display:block; font-size:13px; color:var(--muted); margin-bottom:7px; font-weight:500}
  .field input{width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
    background:var(--ground); border:1px solid var(--hair); border-radius:9px; padding:11px 13px}
  .field input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
  .btn{font-family:var(--sans); font-size:15px; font-weight:600; color:var(--accent-ink);
    background:var(--accent); border:none; border-radius:9px; padding:12px 20px; cursor:pointer;
    width:100%; transition:opacity .12s}
  .btn:hover{opacity:.9}
  .btn:disabled{opacity:.4; cursor:not-allowed}
  .btn.ghost{background:var(--surface-2); color:var(--ink); border:1px solid var(--hair)}

  .consent-out{margin-top:20px; border-top:1px dashed var(--hair); padding-top:20px}
  .consent-out[hidden]{display:none}
  .co-label{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--faint); margin:0 0 8px}
  .tokenbox{background:var(--ground); border:1px solid var(--accent); border-radius:9px;
    padding:13px 15px; font-family:var(--mono); font-size:12.5px; color:var(--accent);
    word-break:break-all; line-height:1.6}
  .method{background:var(--surface-2); border:1px solid var(--hair); border-radius:9px;
    padding:14px 16px; margin-top:12px; font-size:14px}
  .method b{font-weight:600}
  .method code{font-family:var(--mono); font-size:12.5px; color:var(--ink); background:var(--ground);
    padding:2px 6px; border-radius:5px; word-break:break-all; display:inline-block; margin-top:4px}
  .verify-state{margin-top:16px; display:flex; align-items:center; gap:10px; font-size:14px;
    padding:12px 14px; border-radius:9px; background:var(--surface-2)}
  .vs-dot{width:10px; height:10px; border-radius:50%; flex:none; background:var(--undet)}
  .vs-dot.wait{background:var(--warn); animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

  /* sample report */
  .report{background:var(--surface); border:1px solid var(--hair); border-radius:14px; overflow:hidden}
  .rep-head{padding:16px 20px; border-bottom:1px solid var(--hair); display:flex;
    justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px}
  .rep-head .dom{font-family:var(--mono); font-size:14px; font-weight:600}
  .rep-head .stamp{font-family:var(--mono); font-size:12px; color:var(--faint)}
  .check{display:grid; grid-template-columns:26px 1fr auto; gap:12px; align-items:center;
    padding:13px 20px; border-top:1px solid var(--hair); font-size:14px}
  .check:first-child{border-top:none}
  .ci{width:22px; height:22px; border-radius:6px; display:flex; align-items:center;
    justify-content:center; font-size:12px; font-weight:700; flex:none}
  .ci.pass{background:var(--pass-bg); color:var(--pass)}
  .ci.warn{background:var(--warn-bg); color:var(--warn)}
  .ci.crit{background:var(--crit-bg); color:var(--crit)}
  .ci.undet{background:var(--surface-2); color:var(--undet)}
  .cname{font-weight:500}
  .creason{color:var(--muted); font-size:12.5px; grid-column:2; margin-top:-2px}
  .ctag{font-family:var(--mono); font-size:12px; padding:3px 8px; border-radius:100px; font-weight:600}
  .ctag.pass{background:var(--pass-bg); color:var(--pass)}
  .ctag.warn{background:var(--warn-bg); color:var(--warn)}
  .ctag.crit{background:var(--crit-bg); color:var(--crit)}
  .ctag.undet{background:var(--surface-2); color:var(--undet)}
  .rep-foot{padding:14px 20px; border-top:1px solid var(--hair); background:var(--surface-2);
    font-family:var(--mono); font-size:12px; color:var(--muted); word-break:break-all}

  /* diff vs free */
  .vs{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media (max-width:560px){ .vs{grid-template-columns:1fr} }
  .vs-card{background:var(--surface); border:1px solid var(--hair); border-radius:12px; padding:20px}
  .vs-card.ours{border-color:var(--accent)}
  .vs-card h3{margin:0 0 14px; font-size:15px; font-weight:600}
  .vs-card ul{margin:0; padding:0; list-style:none}
  .vs-card li{padding-left:24px; position:relative; margin-bottom:10px; font-size:13.5px; color:var(--muted)}
  .vs-card li::before{position:absolute; left:0; top:-1px; font-size:14px}
  .vs-card.free li::before{content:"○"; color:var(--faint)}
  .vs-card.ours li::before{content:"✓"; color:var(--accent); font-weight:700}
  .vs-card.ours li{color:var(--ink)}

  .pricing{display:flex; gap:14px; flex-wrap:wrap}
  .price{flex:1; min-width:200px; background:var(--surface); border:1px solid var(--hair);
    border-radius:12px; padding:22px}
  .price.feat{border-color:var(--accent)}
  .price .p-name{font-size:14px; color:var(--muted); margin:0 0 6px}
  .price .p-amt{font-family:var(--mono); font-size:26px; font-weight:600; margin:0 0 4px}
  .price .p-note{font-size:12.5px; color:var(--faint); margin:0 0 14px}
  .price ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--muted)}
  .price li{margin-bottom:6px}

  .note{font-size:13px; color:var(--muted); background:var(--surface-2); border-radius:10px;
    padding:14px 16px; margin-top:22px; line-height:1.6}
  .note b{color:var(--ink)}
  footer{padding-block:36px 0; font-size:12.5px; color:var(--faint); font-family:var(--mono)}
  @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

  /* ── 언어 전환: 탭(세그먼트) 스타일 ── */
  .langbar-wrap{display:flex;justify-content:flex-end;padding-top:14px}
  .langbar{display:inline-flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--hair);border-radius:11px;font-family:var(--mono)}
  .langbar a{font-size:12px;color:var(--muted);text-decoration:none;padding:5px 11px;border-radius:8px;transition:color .15s ease,background .15s ease}
  .langbar a:hover{color:var(--ink)}
  .langbar a[aria-current]{color:var(--accent-ink);background:var(--accent)}
  @media (max-width:560px){ .langbar-wrap{justify-content:center} .langbar{flex-wrap:wrap} }

  /* ── 탭 (동의 방법 등) ── */
  .tabs{margin-top:12px}
  .tablist{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--hair);border-radius:10px;font-family:var(--mono)}
  .tab{font-family:var(--mono);font-size:12.5px;color:var(--muted);background:none;border:none;cursor:pointer;padding:7px 14px;border-radius:7px;transition:color .15s ease,background .15s ease}
  .tab:hover{color:var(--ink)}
  .tab[aria-selected="true"]{color:var(--accent-ink);background:var(--accent)}
  .tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .tabpanel{margin-top:10px}
  .tabs[data-ready] .tabpanel{animation:tabin .22s ease}
  @keyframes tabin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .tabs[data-ready] .tabpanel{animation:none} .langbar a,.tab{transition:none} }

  /* ── 상단 메뉴바(topbar): 섹션 메뉴 + 언어 탭 ── */
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  .topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    justify-content:space-between;padding:10px 0;margin-bottom:8px;
    background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
  .menu{display:flex;gap:2px;flex-wrap:wrap;font-family:var(--mono)}
  .menu a{font-size:12.5px;color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:8px;
    border:1px solid transparent;transition:color .15s ease,background .15s ease,border-color .15s ease}
  .menu a:hover{color:var(--ink);background:var(--surface)}
  .menu a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* 🔑 언어바는 «항상» 자기 줄을 쓴다.
     내비 항목 수가 페이지마다 다르면 어떤 페이지는 1줄, 어떤 페이지는 2줄이 되어
     링크 하나 누를 때마다 헤더 높이가 튄다 — 2026-09-20 「가이드를 누르면 화면이 다르게 나와요」의 정체다. */
  .topbar .langbar-wrap{padding-top:0;flex-basis:100%;justify-content:flex-start}
  .menu a[aria-current]{color:var(--ink);background:var(--surface);border-color:var(--hair)}
  /* 앵커 이동 시 sticky 바 밑에 숨지 않도록 */
  /* topbar 가 데스크톱에서도 2줄(메뉴+언어바)이라 앵커 오프셋을 그 높이에 맞춘다 */
  section[id],header[id]{scroll-margin-top:104px}
  #reqSec{scroll-margin-top:104px}
  @media (max-width:640px){
    .topbar{gap:6px;padding:8px 0}
    .menu{order:2;width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
      scrollbar-width:none}
    .menu::-webkit-scrollbar{display:none}
    .menu a{white-space:nowrap;padding:6px 10px}
    .menu a.cta{order:-1}   /* 모바일: CTA 를 메뉴 맨 앞으로(스크롤 없이 보이게) */
    .topbar .langbar-wrap{order:1;margin-left:auto;flex-basis:auto}
    /* 모바일 topbar 는 2줄(≈95px) → 앵커 오프셋을 그만큼 키운다 */
    section[id],header[id],#reqSec{scroll-margin-top:104px}
  }
  .menu a.cta{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:600}
  .menu a.cta:hover{background:var(--accent);color:var(--accent-ink);filter:brightness(1.08)}
  /* 🔑 `1fr` 그리드 아이템은 min-width:auto 라 «내용보다 작아지지 못한다».
     지갑 주소처럼 안 끊기는 문자열이 들어가면 트랙이 화면보다 넓어져
     390px 에서 페이지가 가로로 49px 넘쳤다(2026-09-20 자기점검). minmax(0,1fr) 이 정답. */
  .donate-nets{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .donate-nets .method{margin-top:0}
  @media (max-width:560px){ .donate-nets{grid-template-columns:minmax(0,1fr)} }
  .addr-row{display:flex;align-items:center;gap:8px;margin-top:6px}
  .addr-row code.addr{flex:1;min-width:0;overflow-x:auto;cursor:pointer;white-space:nowrap}
  .copy{flex:none;font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--surface);
    border:1px solid var(--hair);border-radius:6px;padding:5px 10px;cursor:pointer;
    transition:color .15s ease,border-color .15s ease,background .15s ease}
  .copy:hover{color:var(--ink);border-color:var(--accent)}
  .copy.ok{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
  .copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .addr-row>.tokenbox{flex:1;min-width:0}

/* 점검 항목 목록 — 엔진 선언(CHECK_NAMES)에서 생성된다. 개수가 늘어도 레이아웃이 버틴다. */
.chkgrid{display:grid;gap:12px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.chk{border:1px solid var(--hair);border-radius:10px;padding:14px 16px;background:var(--surface)}
.chk h3{margin:0 0 6px;font-size:15px;line-height:1.35}
.chk p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.chk code{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:12px;color:var(--muted);
  word-break:break-all}   /* 12px 는 바닥값이다 — 눈짐작으로 더 줄이지 않는다(mco-ui-readable 이 잡는다) */

/* 큐 상태 한 줄 — 검증 결과 밑에 붙는다 */
.qline{display:block;margin-top:8px;font-size:13px;line-height:1.6;color:var(--muted)}