:root {
  --ink: #242424;
  --muted: #666;
  --line: #e1e6ef;
  --blue: #0b57d0;
  --navy: #152d93;
  --brand-blue: #1c73e8;
  --brand-deep: #1c3bc0;
  --soft: #f5f7ff;
  --sky: #bbd6ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif; line-height: 1.72; }
a { color: var(--blue); }
header { position: sticky; z-index: 2; top: 0; border-bottom: 1px solid rgba(11, 87, 208, .1); background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); }
.bar { display: flex; max-width: 1080px; margin: auto; padding: 15px 24px; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: 118px; height: auto; }
.bar nav { display: flex; align-items: center; gap: 18px; }
.bar nav > a:not(.service) { font-size: 14px; font-weight: 750; text-decoration: none; }
.service { padding: 9px 14px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
main { max-width: 820px; margin: auto; padding: 64px 24px 90px; }
.eyebrow { margin: 0; color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 12px 0 20px; font-size: clamp(34px, 6vw, 56px); line-height: 1.18; letter-spacing: -.045em; }
.lead { color: #39485c; font-size: 20px; }
.meta { margin: 26px 0 38px; padding-bottom: 24px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.answer { padding: 24px 26px; border-left: 5px solid var(--blue); background: var(--soft); font-size: 18px; font-weight: 650; }
.toc { margin: 38px 0; padding: 24px 28px; border: 1px solid var(--sky); border-radius: 14px; background: #fff; }
.toc strong { display: block; margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 22px; }
section { margin-top: 58px; }
h2 { margin: 0 0 18px; font-size: 30px; line-height: 1.32; letter-spacing: -.03em; }
h3 { margin: 30px 0 8px; font-size: 21px; }
.step, .panel { margin: 20px 0; padding: 24px; border: 1px solid rgba(11, 87, 208, .08); border-radius: 14px; background: var(--soft); }
.step b, .panel b { display: block; margin-bottom: 4px; color: var(--blue); }
.checklist { padding: 24px 28px; border: 1px solid var(--sky); border-radius: 14px; background: var(--soft); }
.checklist h3 { color: var(--navy); }
.checklist li, .sources li { margin: 9px 0; }
table { width: 100%; margin: 22px 0; border-collapse: collapse; font-size: 15px; }
th, td { padding: 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: linear-gradient(91deg, var(--brand-blue) -23.29%, var(--brand-deep) 98.81%); color: #fff; }
.notice { margin-top: 50px; padding: 20px 22px; border: 1px solid var(--sky); border-radius: 12px; background: var(--soft); color: var(--muted); font-size: 14px; }
footer { border-top: 1px solid var(--line); background: var(--soft); }
footer div { max-width: 820px; margin: auto; padding: 28px 24px; color: var(--muted); font-size: 14px; }

@media (max-width: 640px) {
  main { padding-top: 42px; }
  .bar { padding: 12px 18px; }
  .brand img { width: 105px; }
  .bar nav > a:not(.service) { display: none; }
  .service { padding: 8px 10px; font-size: 12px; }
  h2 { font-size: 26px; }
  .lead { font-size: 18px; }
  table { display: block; overflow-x: auto; white-space: normal; }
}