@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@500;700;800;900&family=Noto+Sans+KR:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#FAFAFA; --surface:#FFFFFF; --surface-alt:#F0F0F1;
  --ink:#111213; --ink-soft:#5B5F63; --ink-faint:#9A9EA2; --line:#E3E4E5;
  --accent:#3457D5;
  --btn-bg:#111213; --btn-ink:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F10; --surface:#17181A; --surface-alt:#1E2022;
    --ink:#F2F3F4; --ink-soft:#A7ABAF; --ink-faint:#6B6F73; --line:#2B2D2F;
    --accent:#7C9BFF;
    --btn-bg:#F2F3F4; --btn-ink:#111213;
  }
}
:root[data-theme="dark"]{
  --bg:#0E0F10; --surface:#17181A; --surface-alt:#1E2022;
  --ink:#F2F3F4; --ink-soft:#A7ABAF; --ink-faint:#6B6F73; --line:#2B2D2F;
  --accent:#7C9BFF;
  --btn-bg:#F2F3F4; --btn-ink:#111213;
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  background:var(--bg); color:var(--ink); margin:0;
  font-family:'Noto Sans KR','Gothic A1',sans-serif; line-height:1.6;
}
h1,h2{ font-family:'Gothic A1','Noto Sans KR',sans-serif; text-wrap:balance; letter-spacing:-0.01em; margin:0; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
a{ color:inherit; }

.wrap{ max-width:600px; margin:0 auto; padding:0 20px; }

.topbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.topbar-inner{ max-width:600px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; text-decoration:none; }
.brand .mark{ height:22px; width:auto; display:block; }
.top-call{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700;
  background:var(--btn-bg); color:var(--btn-ink); padding:7px 13px; border-radius:100px; text-decoration:none; white-space:nowrap;
}

.hero{ padding:40px 0 8px; text-align:center; }
.badge{
  display:inline-flex; font-family:'JetBrains Mono',monospace; font-size:11px;
  padding:5px 11px; border-radius:100px; border:1px solid var(--line); color:var(--ink-soft); font-weight:600; margin-bottom:16px;
}
h1.hero-title{ font-size:clamp(24px,6vw,32px); font-weight:900; }
.hero-sub{ color:var(--ink-soft); font-size:14.5px; margin-top:10px; }

.breadcrumb{ font-size:12px; color:var(--ink-faint); text-align:center; padding-top:14px; }
.breadcrumb a{ text-decoration:underline; }

.cta-stack{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.cta{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:17px; padding:17px; border-radius:12px; text-decoration:none;
}
.cta.primary{ background:var(--btn-bg); color:var(--btn-ink); }
.cta.secondary{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line); }
.cta .num{ font-family:'JetBrains Mono',monospace; }

.facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:26px;
}
.fact{ background:var(--surface); padding:14px 8px; text-align:center; }
.fact .k{ font-size:10.5px; color:var(--ink-faint); font-family:'JetBrains Mono',monospace; text-transform:uppercase; }
.fact .v{ font-size:13.5px; font-weight:700; margin-top:4px; }

section.block{ margin-top:52px; }
.eyebrow{
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:8px;
}
.eyebrow .n{ color:var(--accent); font-weight:700; }
h2.block-title{ font-size:19px; font-weight:800; text-align:center; }
.block-sub{ color:var(--ink-soft); font-size:13.5px; text-align:center; margin-top:8px; }

.prose{ margin-top:18px; font-size:14px; color:var(--ink-soft); }
.prose p{ margin:0 0 12px; }
.prose strong{ color:var(--ink); }

.journal-list{ margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.journal-card{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px;
  text-decoration:none; color:var(--ink);
}
.journal-card .thumb{
  width:56px; height:56px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--surface-alt);
}
.journal-card .body{ flex:1; min-width:0; }
.journal-card .lbl{
  font-size:13.5px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.journal-card .src{ font-size:12px; color:var(--ink-faint); margin-top:4px; }
.journal-card .arrow{ font-size:18px; color:var(--accent); flex-shrink:0; }

.faq-list{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
details.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
details.faq-item summary{
  list-style:none; cursor:pointer; padding:14px 16px; font-weight:600; font-size:14.5px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{
  content:"+"; font-size:18px; color:var(--accent); flex-shrink:0; font-weight:400;
  transition:transform .15s ease;
}
details.faq-item[open] summary::after{ transform:rotate(45deg); }
details.faq-item .faq-a{
  padding:0 16px 16px; font-size:13.5px; color:var(--ink-soft); line-height:1.7;
}

.area-grid{ margin-top:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
a.area-card{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px;
  text-decoration:none; color:var(--ink);
}
a.area-card .name{ font-weight:700; font-size:14.5px; }
a.area-card .sub{ font-size:12px; color:var(--ink-faint); margin-top:4px; }

.final-cta{ margin-top:44px; text-align:center; }
.final-cta p{ font-size:13.5px; color:var(--ink-soft); margin:0 0 12px; }

footer.page{ margin-top:50px; background:var(--ink); color:var(--bg); padding:26px 0; }
footer.page .wrap{ display:flex; flex-direction:column; gap:14px; }
.foot-nav{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; font-size:12px; }
.foot-nav a{ text-decoration:underline; color:inherit; opacity:0.85; }
.foot-social{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.foot-social a{ font-size:11.5px; text-decoration:none; padding:5px 11px; border-radius:100px; border:1px solid rgba(255,255,255,0.2); color:inherit; }
.foot-legal{ border-top:1px solid rgba(255,255,255,0.15); padding-top:14px; font-size:11.5px; line-height:1.8; opacity:0.65; text-align:center; }

.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:none; gap:1px;
  background:var(--line); border-top:1px solid var(--line);
}
.mobile-bar a{ flex:1; text-align:center; padding:14px 0; font-weight:700; font-size:14px; text-decoration:none; }
.mobile-bar .call{ background:var(--btn-bg); color:var(--btn-ink); }
.mobile-bar .sms{ background:var(--surface); color:var(--ink); }

@media (max-width:520px){
  .mobile-bar{ display:flex; }
  body{ padding-bottom:58px; }
  .area-grid{ grid-template-columns:1fr; }
}