/* 혜택나침반 — 공유 스타일 (트러스트 핀테크 톤, 라이트/다크) */
:root {
  --bg:#f4f6fa; --card:#ffffff; --ink:#141821; --muted:#5b6472;
  --line:#e3e8ef; --soft:#eef2f8;
  --accent:#1f5fe0; --accent-soft:#e7effc; --accent-ink:#0b3fa8;
  --ok:#12805c; --ok-soft:#e2f4ec; --warn:#a86a12; --warn-soft:#f8efdc; --danger:#c9302c;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0e1116; --card:#161b22; --ink:#e7ebf2; --muted:#8b95a5;
    --line:#232a35; --soft:#1b212b; --accent:#5b8cff; --accent-soft:#17233c;
    --accent-ink:#a9c4ff; --ok:#3cc78c; --ok-soft:#12271f; --warn:#e0a94a; --warn-soft:#2a2214; --danger:#ff6b63; }
}
:root[data-theme="dark"]{ --bg:#0e1116; --card:#161b22; --ink:#e7ebf2; --muted:#8b95a5; --line:#232a35; --soft:#1b212b; --accent:#5b8cff; --accent-soft:#17233c; --accent-ink:#a9c4ff; --ok:#3cc78c; --ok-soft:#12271f; --warn:#e0a94a; --warn-soft:#2a2214; --danger:#ff6b63; }
:root[data-theme="light"]{ --bg:#f4f6fa; --card:#fff; --ink:#141821; --muted:#5b6472; --line:#e3e8ef; --soft:#eef2f8; --accent:#1f5fe0; --accent-soft:#e7effc; --accent-ink:#0b3fa8; --ok:#12805c; --ok-soft:#e2f4ec; --warn:#a86a12; --warn-soft:#f8efdc; --danger:#c9302c; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased; }
.wrap{ max-width:760px; margin:0 auto; padding:0 18px; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ letter-spacing:-0.02em; text-wrap:balance; line-height:1.3; }
.tnum{ font-variant-numeric:tabular-nums; }

/* 상단바 */
.topbar{ position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line); }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-0.03em; color:var(--ink); }
.brand .mk{ width:26px; height:26px; display:grid; place-items:center; border-radius:8px;
  background:var(--accent); color:#fff; font-size:15px; }
.brand small{ font-weight:500; color:var(--muted); font-size:12px; letter-spacing:0; }
.nav a{ color:var(--muted); font-size:14px; margin-left:16px; }

/* 히어로 */
.hero{ padding:44px 0 8px; }
.eyebrow{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:0.02em;
  color:var(--accent-ink); background:var(--accent-soft); padding:5px 11px; border-radius:999px; }
.hero h1{ font-size:31px; margin:16px 0 10px; }
.hero p.lead{ font-size:17px; color:var(--muted); margin:0 0 22px; }
@media (max-width:560px){ .hero h1{ font-size:25px; } }

/* 카드 */
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; }
.card + .card{ margin-top:16px; }
.section{ margin:34px 0; }
.section > h2{ font-size:20px; margin:0 0 4px; }
.section > .sub{ color:var(--muted); font-size:14px; margin:0 0 16px; }

/* 버튼 */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font:inherit; font-weight:700; border-radius:12px; padding:13px 20px; border:1px solid transparent; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ filter:brightness(1.06); text-decoration:none; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* 진단 위젯 */
.diag .step{ margin-bottom:18px; }
.diag .q{ font-weight:700; margin-bottom:9px; font-size:15px; }
.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{ border:1px solid var(--line); background:var(--soft); color:var(--ink); border-radius:10px;
  padding:9px 14px; font:inherit; font-size:14px; cursor:pointer; }
.opt[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); font-weight:700; }
.opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.progress{ height:6px; background:var(--soft); border-radius:999px; overflow:hidden; margin-bottom:18px; }
.progress > i{ display:block; height:100%; background:var(--accent); width:0; transition:width .25s ease; }

/* 결과 */
.result-item{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line); }
.result-item:first-child{ border-top:0; }
.pill{ font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.pill-hi{ color:#fff; background:var(--ok); }
.pill-mid{ color:var(--warn); background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent); }
.pill-lo{ color:var(--muted); background:var(--soft); }
.result-item .n{ font-weight:700; }
.result-item .d{ color:var(--muted); font-size:13.5px; margin-top:2px; }

/* 리드 폼 */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field label{ font-size:13px; font-weight:600; color:var(--muted); }
.field input,.field select{ font:inherit; padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--card); color:var(--ink); }
.field input:focus,.field select:focus{ outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
.consent{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--muted); }

/* 광고/제휴 슬롯 */
.adslot{ margin:22px 0; padding:14px; border:1px dashed var(--line); border-radius:12px;
  text-align:center; color:var(--muted); font-size:12px; background:var(--soft); }
.affiliate{ margin-top:16px; }
.affiliate .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.affiliate .p{ border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--card); font-size:13.5px; }
.affiliate .p .price{ color:var(--muted); font-size:12px; }
.disclosure{ font-size:12.5px; color:var(--muted); margin-top:8px; }

/* 표 */
.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th,.tbl td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th{ color:var(--muted); font-weight:600; width:34%; }

/* 콘텐츠 */
.prose h2{ font-size:20px; margin:30px 0 10px; padding-top:6px; }
.prose h3{ font-size:16px; margin:20px 0 8px; }
.prose ul{ padding-left:20px; }
.prose li{ margin:4px 0; }
.note{ background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-radius:12px; padding:13px 15px; font-size:13.5px; color:var(--ink); }
.note b{ color:var(--accent-ink); }
.warnbox{ background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
  border-radius:12px; padding:13px 15px; font-size:13px; color:var(--ink); }
.crumbs{ font-size:12.5px; color:var(--muted); margin:18px 0 4px; }
.crumbs a{ color:var(--muted); }

/* FAQ */
details.faq{ border:1px solid var(--line); border-radius:12px; padding:0 16px; margin-bottom:8px; background:var(--card); }
details.faq summary{ cursor:pointer; font-weight:600; padding:14px 0; list-style:none; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq[open] summary{ border-bottom:1px solid var(--line); }
details.faq .a{ padding:12px 0; color:var(--muted); font-size:14px; }

footer.site{ border-top:1px solid var(--line); margin-top:48px; padding:26px 0 60px; color:var(--muted); font-size:12.5px; }
footer.site a{ color:var(--muted); }
footer.site .links{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.legal{ line-height:1.7; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }