/* 학원나라 가이드 — 에디토리얼/블로그 공통 스타일 */
:root{
  --ink:#17191c;        /* 제목 */
  --text:#363a41;       /* 본문 */
  --muted:#8b919a;      /* 보조 */
  --soft:#5b616b;       /* 리드·설명 */
  --line:#eef0f3;       /* 가는 선 */
  --line-2:#e1e4e9;     /* 조금 진한 선 */
  --bg:#ffffff;
  --navy:#0A2C5E;
  --accent:#FDC802;
  --link:#0b4aa2;
  --maxw:680px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
               "Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:17px; line-height:1.82;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:-0.003em;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:40px 20px 96px; }
a{ color:var(--link); }

/* 상단 내비 (탭) */
.topbar{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
         -webkit-backdrop-filter:saturate(1.3) blur(8px); backdrop-filter:saturate(1.3) blur(8px);
         border-bottom:1px solid var(--line-2); }
.topbar-inner{ max-width:var(--maxw); margin:0 auto; padding:15px 20px 0; }
.brand{ font-size:18px; font-weight:800; color:var(--navy); text-decoration:none; letter-spacing:-0.02em; }
.tabs{ max-width:var(--maxw); margin:0 auto; padding:11px 20px 0; display:flex; gap:20px;
       overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs a{ flex:0 0 auto; padding:9px 0; font-size:15px; font-weight:600; color:var(--muted);
         text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.tabs a:hover{ color:var(--ink); }
.tabs a.active{ color:var(--navy); border-bottom-color:var(--navy); }

/* 표지·삽화·개정일 */
.cover{ width:100%; height:auto; display:block; border-radius:14px; margin:6px 0 12px; }
figure{ margin:34px 0; }
figure svg{ width:100%; height:auto; display:block; }
figcaption{ margin-top:10px; font-size:13.5px; color:var(--muted); text-align:center; }
.fresh-line{ margin:13px 0 0; }
.freshness{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
            color:var(--navy); background:#eef3fb; border:1px solid #dbe6f7; border-radius:999px; padding:5px 12px; }
.freshness .dot{ width:7px; height:7px; border-radius:50%; background:#20a05a; }

/* 글 머리 */
.kicker{ font-size:13px; font-weight:700; color:var(--navy); margin:0 0 14px; letter-spacing:.01em; }
h1{ font-size:33px; line-height:1.3; letter-spacing:-0.022em; color:var(--ink); font-weight:800; margin:0 0 16px; }
.lede{ font-size:19px; line-height:1.74; color:var(--soft); margin:0 0 20px; }
.meta{ font-size:14px; color:var(--muted); margin:0; }
.rule{ border:0; border-top:1px solid var(--line-2); margin:30px 0 32px; }

/* 본문 타이포 */
.body h2{ font-size:22px; line-height:1.4; letter-spacing:-0.012em; color:var(--ink); font-weight:700; margin:46px 0 12px; }
.body h3{ font-size:17px; color:var(--ink); font-weight:700; margin:28px 0 6px; }
.body p{ margin:14px 0; }
.body ul, .body ol{ margin:14px 0; padding-left:21px; }
.body li{ margin:8px 0; }
.body li::marker{ color:var(--muted); }
.body strong{ color:var(--ink); font-weight:700; }
.body a{ text-underline-offset:2px; }

/* 인용·팁 (은은하게) */
.tip{ margin:22px 0; padding:3px 0 3px 18px; border-left:3px solid var(--accent); color:var(--soft); font-size:15.5px; }
.tip strong{ color:var(--ink); }

/* 체크리스트 */
.progress{ font-size:14px; color:var(--muted); margin:18px 0 2px; }
.bar{ height:6px; background:var(--line-2); border-radius:999px; overflow:hidden; margin:8px 0 6px; }
.bar > i{ display:block; height:100%; width:0; background:var(--navy); transition:width .25s; }
.checklist{ margin:10px 0 4px; }
.checklist .row{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line); cursor:pointer; }
.checklist .row:first-child{ border-top:0; }
.checklist input{ width:19px; height:19px; margin-top:4px; accent-color:var(--navy); flex:0 0 auto; }
.cond{ color:var(--muted); font-weight:600; font-size:13.5px; }

/* 표 (가로선만) */
table{ width:100%; border-collapse:collapse; font-size:15.5px; margin:20px 0; }
th, td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ color:var(--ink); font-weight:700; border-bottom:2px solid var(--line-2); }

/* 전환 블록 (절제된) */
.promo{ margin:50px 0 6px; padding:26px 26px 28px; background:#f7f8fa; border:1px solid var(--line); border-radius:12px; }
.promo h2{ font-size:19px; color:var(--ink); font-weight:800; margin:0 0 8px; }
.promo p{ margin:8px 0; color:#4a4f57; font-size:15.5px; }
.promo ul{ margin:10px 0 0; padding-left:20px; color:#4a4f57; font-size:15.5px; }
.promo li{ margin:6px 0; }
.btn{ display:inline-block; margin-top:16px; background:var(--navy); color:#fff; font-weight:700;
      text-decoration:none; padding:12px 20px; border-radius:9px; font-size:15px; }
.btn:hover{ background:#0d386f; }

/* 관련 글 */
.more{ margin-top:44px; padding-top:24px; border-top:1px solid var(--line-2); }
.more h2{ font-size:15px; color:var(--ink); font-weight:800; margin:0 0 13px; letter-spacing:-0.01em; }
.more a{ display:block; color:var(--ink); font-weight:700; text-decoration:none; font-size:16px;
         margin:10px 0; padding:15px 17px; border:1px solid var(--line-2); border-radius:12px;
         transition:border-color .15s ease, background .15s ease; }
.more a:hover{ border-color:var(--navy); background:#f7f9fc; }
.more a span{ display:block; color:var(--muted); font-weight:400; font-size:14px; margin-top:3px; line-height:1.5; }

/* 꼬리말 */
.foot{ margin-top:58px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.7; }

/* 허브 목록 */
.hub-list{ margin:36px 0 0; }
.hub-item{ display:block; text-decoration:none; color:inherit; padding:24px 0; border-top:1px solid var(--line-2); }
.hub-item:first-child{ border-top:0; }
.hub-item .k{ font-size:13px; font-weight:700; color:var(--navy); margin:0 0 6px; }
.hub-item h2{ font-size:20px; color:var(--ink); font-weight:700; margin:0 0 5px; letter-spacing:-0.01em; }
.hub-item:hover h2{ color:var(--link); }
.hub-item p{ margin:0; color:var(--soft); font-size:15.5px; line-height:1.62; }

@media (max-width:520px){
  .wrap{ padding:40px 18px 72px; }
  body{ font-size:16px; }
  h1{ font-size:27px; }
  .lede{ font-size:17px; }
  .body h2{ font-size:20px; }
  .promo{ padding:22px 20px 24px; }
}

/* 섹션 아이콘 — 본문 섹션 제목(.body 직계 h2)에만. 전환블록·관련글 제목엔 안 붙는다. */
.body > h2{ display:flex; align-items:center; gap:10px; }
.body > h2 .ico{ flex:0 0 auto; width:25px; height:25px; color:var(--navy); }

/* ============ 에디토리얼 공통 — 요약 띠 · 번호형 섹션 · 전환 카드 (가이드 5종) ============ */
/* 상단 요약 띠 */
.hero-sum{ margin:6px 0 8px; padding:20px 22px; background:#f7f9fc; border:1px solid var(--line-2); border-radius:16px; }
.hero-sum .lbl{ margin:0 0 15px; font-size:12.5px; font-weight:800; color:var(--navy); letter-spacing:.04em; }
.phases{ display:flex; align-items:center; gap:10px; }
.phase{ flex:1 1 0; min-width:0; }
.phase b{ display:block; font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.phase span{ display:block; margin-top:5px; font-size:13px; line-height:1.5; color:var(--muted); }
.phases .arw{ flex:0 0 auto; color:var(--accent); font-weight:800; font-size:17px; line-height:1; }
/* 번호형 섹션 */
.step{ margin:46px 0 0; padding-top:32px; border-top:1px solid var(--line-2); }
.step:first-of-type{ border-top:0; padding-top:0; margin-top:36px; }
.step-head{ display:flex; align-items:baseline; gap:14px; }
.step-n{ flex:0 0 auto; font-size:34px; font-weight:800; line-height:1; color:var(--navy); letter-spacing:-.02em; }
.step-head h2{ margin:0; }
.step-tip{ margin:16px 0 0; padding:13px 16px; background:#f7f9fc; border:1px solid var(--line-2);
           border-left:3px solid var(--accent); border-radius:10px; font-size:15px; line-height:1.66; color:var(--soft); }
.step-tip b{ display:block; margin-bottom:4px; font-size:11.5px; font-weight:800; color:var(--navy); letter-spacing:.06em; }
.step-tip strong{ color:var(--ink); }
/* 하단 전환 카드 (브랜드 네이비) */
.cta{ margin:56px 0 6px; padding:30px 28px 32px; background:var(--navy); border-radius:18px; }
.cta .eyebrow{ margin:0; font-size:12.5px; font-weight:800; color:var(--accent); letter-spacing:.06em; }
.cta h2{ margin:9px 0 10px; font-size:21px; font-weight:800; color:#fff; line-height:1.4; }
.cta p{ margin:0 0 16px; font-size:15.5px; line-height:1.72; color:#c6d4e8; }
.cta-steps{ margin:4px 0 22px; padding:0; list-style:none; }
.cta-steps li{ display:flex; gap:13px; align-items:flex-start; padding:11px 0; border-top:1px solid rgba(255,255,255,.12); }
.cta-steps li:first-child{ border-top:0; }
.cta-steps .sn{ flex:0 0 auto; width:25px; height:25px; border-radius:50%; background:var(--accent); color:var(--navy);
                font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.cta-steps div b{ display:block; color:#fff; font-size:15.5px; font-weight:700; }
.cta-steps div span{ display:block; margin-top:2px; color:#b9c8df; font-size:13.5px; line-height:1.5; }
.cta-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.cta .btn{ margin-top:0; background:var(--accent); color:var(--navy); font-weight:800; }
.cta .btn:hover{ background:#ffd42e; }
.cta .btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border:1.8px solid rgba(255,255,255,.72); }
.cta .btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
@media (max-width:520px){
  .phases{ flex-direction:column; align-items:stretch; gap:14px; }
  .phases .arw{ align-self:center; transform:rotate(90deg); }
  .cta{ padding:24px 20px 26px; }
  .cta-btns{ flex-direction:column; }
  .cta-btns .btn{ text-align:center; }
}