/*
Theme Name: 과거 리뉴얼 (Gwageo Renewal)
Theme URI: https://gwageo.com/
Description: gwageo.com 국가자격 시험정보 전용 테마. 시스템 폰트, 단일 컬럼, 데이터 표 중심.
Author: gwageo.com
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: gwageo-renewal
*/

/* ============================================================
   1. 디자인 토큰 — 하드코딩 hex는 여기 2개(--c1/--c2)뿐이다.
      파생색은 전부 color-mix()로 유도한다(§3-4).
   ============================================================ */
:root {
  /* 브랜드 원색 */
  --c1: #23407A;             /* 주색 — 짙은 남색 */
  --c2: #C0442E;             /* 강조색 — 인장 붉은색 */

  /* 혼합 기준점 — CSS 키워드를 쓴다. hex를 새로 만들지 않는다. */
  --w: white;
  --k: black;

  /* 무채 스케일: 주색을 흰/검에 섞어 유도 (파생 hex 0건) */
  --gray-1:   color-mix(in srgb, var(--w) 29%, var(--k));   /* 중간 회색 */
  --gray-2:   color-mix(in srgb, var(--w) 46%, var(--k));   /* 밝은 회색 */
  --ink:      color-mix(in srgb, var(--c1) 22%, var(--k));
  --ink-2:    color-mix(in srgb, var(--c1) 30%, var(--gray-1));
  --ink-3:    color-mix(in srgb, var(--c1) 22%, var(--gray-2));
  --line:     color-mix(in srgb, var(--c1) 16%, var(--w));
  --line-2:   color-mix(in srgb, var(--c1) 28%, var(--w));
  --bg:       var(--w);
  --bg-soft:  color-mix(in srgb, var(--c1) 4%, var(--w));
  --bg-c1:    color-mix(in srgb, var(--c1) 8%, var(--w));
  --bg-c2:    color-mix(in srgb, var(--c2) 8%, var(--w));
  --on-c1:    var(--w);                                     /* 주색 위 글자 */

  /* 상태색 — 강조색 파생 */
  --c2-ink:   color-mix(in srgb, var(--c2) 78%, var(--k));
  --c1-hover: color-mix(in srgb, var(--c1) 82%, var(--k));
  --line-c2:  color-mix(in srgb, var(--c2) 30%, var(--w));

  /* 타이포 (§3-5) */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
          "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --fs-body: 17px;
  --lh-body: 1.8;

  /* 레이아웃 */
  --wrap: 720px;
  --pad: 16px;
  --radius: 6px;

  /* CLS 예약 높이 — D-day 영역(§3-4).
     두 상태(데이터 있음 D-4 / 없음 미발표) 중 최대 콘텐츠 높이 108.8px보다
     크게 잡아야 min-height가 양쪽을 흡수해 레이아웃 이동이 0이 된다. */
  --dday-h: 112px;
}

/* ============================================================
   2. 리셋 — 최소한만
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  word-break: keep-all;      /* 한글 단어 중간 줄바꿈 방지 */
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c1); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c1-hover); }

/* 그리드/플렉스 오버플로 방지 (§3-4 — min-width:auto가 첫 의심 지점) */
.g-grid > *, .g-flex > * { min-width: 0; }

/* ============================================================
   3. 레이아웃
   ============================================================ */
.g-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

.g-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.g-header__in {
  display: flex; align-items: baseline; gap: 10px;
  min-height: 60px; padding-top: 12px; padding-bottom: 12px;
}
.g-logo {
  font-size: 25px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--c1); text-decoration: none; flex-shrink: 0;
}
.g-logo:hover { color: var(--c1); }
.g-tagline { font-size: 13px; color: var(--ink-3); line-height: 1.4; }

.g-main { padding: 28px 0 40px; }

.g-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 22px 0 30px;
  font-size: 14px; line-height: 1.7; color: var(--ink-3);
}
/* §0-3 / §1-8 — 민간 서비스 고지 상시 노출 */
.g-disclaimer {
  border-left: 3px solid var(--c1);
  padding: 8px 0 8px 12px;
  margin: 0 0 12px;
  color: var(--ink-2);
}
.g-footer__nav { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ============================================================
   4. 본문 타이포 (§3-5) — h2·h3 굵기 500, 700 금지
   ============================================================ */
.g-title { font-size: 28px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; }
.g-content h2 { font-size: 22px; font-weight: 500; line-height: 1.45; margin: 34px 0 12px; letter-spacing: -0.01em; }
.g-content h3 { font-size: 19px; font-weight: 500; line-height: 1.5; margin: 26px 0 10px; }
.g-content p { margin: 0 0 18px; }
.g-content ul, .g-content ol { margin: 0 0 18px; padding-left: 22px; }
.g-content li { margin: 0 0 6px; }
.g-lead { font-size: 18px; color: var(--ink-2); margin: 0 0 20px; }

.g-mark { background: var(--bg-c2); padding: 0 3px; }

/* ============================================================
   5. 고지 박스 — 출처·기준일 (§3-2)
   ============================================================ */
.g-note {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 20px;
  font-size: 14px; line-height: 1.65; color: var(--ink-2);
}
.g-note dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.g-note dt { color: var(--ink-3); }
.g-note dd { margin: 0; }

/* 배지 — 시행연도(강조색) / 최종확인일(무채) — §3-3 배지 문구 규약 */
.g-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.g-badge {
  display: inline-block; font-size: 13px; line-height: 1.5;
  padding: 2px 9px; border-radius: 100px; white-space: nowrap;
}
.g-badge--year { background: var(--bg-c2); color: var(--c2-ink); border: 1px solid var(--line-c2); }
.g-badge--checked { background: var(--bg-c1); color: var(--c1); border: 1px solid var(--line-2); }
.g-badge--always { background: var(--bg-c1); color: var(--c1); border: 1px solid var(--line-2); }

/* ============================================================
   6. ★ 회차별 일정 표 — 이 사이트의 핵심 컴포넌트
      375px에서는 래퍼 스크롤이 아니라 '열 재배치'로 푼다.
      (래퍼 안 스크롤도 가로 스크롤이다 — grassflavor 판단)

      모바일(<640px): 회차를 카드 헤더로 올리고 3개 날짜를 세로 나열
      데스크탑(≥640px): 4열 가로 표로 복원
   ============================================================ */
.g-sched { margin: 0 0 22px; }

/* --- 모바일: 카드형 (기본값) --- */
.g-sched__list { list-style: none; margin: 0; padding: 0; }
.g-sched__card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 10px;
  overflow: hidden;          /* 카드 밖으로 삐져나가는 것 차단 */
}
.g-sched__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  background: var(--bg-c1);
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  font-size: 16px;
}
.g-sched__seq { font-weight: 700; color: var(--c1); }
.g-sched__kind { font-size: 13px; color: var(--ink-3); }

.g-sched__rows { margin: 0; padding: 4px 12px 10px; }
.g-sched__row {
  display: grid;
  grid-template-columns: 76px 1fr;   /* 라벨 | 값 — 375px 실측 여유 107px */
  gap: 2px 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.55;
}
.g-sched__row:last-child { border-bottom: 0; }
.g-sched__row > * { min-width: 0; }
.g-sched__label { color: var(--ink-3); font-size: 14px; }
.g-sched__val { font-variant-numeric: tabular-nums; }
.g-sched__val--tbd { color: var(--ink-3); }          /* §1-3 미발표 */
.g-sched__val--soon { color: var(--c2-ink); font-weight: 700; }  /* 접수 임박 */

/* --- 데스크탑: 4열 가로 표로 복원 --- */
@media (min-width: 640px) {
  .g-sched__card { border-radius: var(--radius); }
  .g-sched__head { padding: 8px 14px; }
  .g-sched__rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
  }
  .g-sched__row {
    display: block;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding: 10px 14px;
  }
  .g-sched__row:last-child { border-right: 0; }
  .g-sched__label { display: block; margin-bottom: 2px; }
}

/* 상시검정 분기 (§3-2-1) — 회차 표 대신 상시 접수 안내 */
.g-always {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--c1);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 14px 16px;
  margin: 0 0 22px;
}
.g-always__t { font-size: 17px; font-weight: 500; margin: 0 0 8px; color: var(--c1); }
.g-always__d { margin: 0 0 10px; font-size: 15px; line-height: 1.7; }
.g-always dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 15px; }
.g-always dt { color: var(--ink-3); }
.g-always dd { margin: 0; }

/* 상시검정 유의사항 — 지역 제약 · 실기 중복접수 제한 (§3-2-1) */
.g-caution {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--c2);
  border-radius: var(--radius);
  background: var(--bg-c2);
  padding: 13px 16px;
  margin: 0 0 22px;
}
.g-caution__t { font-size: 16px; font-weight: 500; margin: 0 0 8px; color: var(--c2-ink); }
.g-caution__list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.7; }
.g-caution__list > li { margin: 0 0 8px; }
.g-caution__list > li:last-child { margin-bottom: 0; }
.g-caution__src { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.6; }

/* ============================================================
   7. D-day — 높이 예약으로 CLS 0 (§3-4)
      데이터가 없을 때도 같은 높이를 유지한다.
   ============================================================ */
.g-dday {
  min-height: var(--dday-h);
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--line);
  border-left: 3px solid var(--c2);
  border-radius: var(--radius);
  background: var(--bg-c2);
  padding: 12px 16px;
  margin: 0 0 22px;
}
.g-dday__label { font-size: 14px; color: var(--ink-2); margin: 0 0 2px; }
.g-dday__num { font-size: 27px; font-weight: 700; line-height: 1.2; color: var(--c2-ink); font-variant-numeric: tabular-nums; }
.g-dday__sub { font-size: 14px; color: var(--ink-2); margin: 2px 0 0; }
.g-dday--empty { background: var(--bg-soft); border-left-color: var(--line-2); }
.g-dday--empty .g-dday__num { font-size: 17px; font-weight: 500; color: var(--ink-3); }

/* ============================================================
   8. 일반 데이터 표 (과목·시험장 등)
      좁은 화면에서 라벨-값 스택으로 재배치 (스크롤 금지)
   ============================================================ */
.g-table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }
.g-table th, .g-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.g-table thead th { background: var(--bg-soft); font-weight: 500; color: var(--ink-2); font-size: 14px; }

@media (max-width: 559px) {
  .g-table, .g-table tbody, .g-table tr, .g-table td { display: block; width: 100%; }
  .g-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .g-table tr { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 10px; padding: 4px 12px; }
  .g-table td { border-bottom: 1px solid var(--line); padding: 6px 0; display: grid; grid-template-columns: 84px 1fr; gap: 10px; }
  .g-table td:last-child { border-bottom: 0; }
  .g-table td > * { min-width: 0; }
  .g-table td::before { content: attr(data-th); color: var(--ink-3); font-size: 14px; }
}

/* ============================================================
   9. 내부링크 카드 / 목록
   ============================================================ */
.g-links { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
@media (min-width: 560px) { .g-links { grid-template-columns: 1fr 1fr; } }
.g-links > li { min-width: 0; }
.g-links a {
  display: block; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); font-size: 15px;
  background: var(--bg);
}
.g-links a:hover { border-color: var(--line-2); background: var(--bg-soft); }

.g-official {
  display: inline-block; margin: 0 0 20px; padding: 9px 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg-c1); color: var(--c1);
  text-decoration: none; font-size: 15px;
}

/* ============================================================
   2026 리뉴얼 — 직답·고유 데이터·검색·이미지
   ============================================================ */
.g-answer {
  margin: 18px 0 24px;
  padding: 18px 20px;
  border-left: 4px solid var(--c2);
  border-radius: var(--radius);
  background: var(--bg-c2);
}
.g-answer strong { display: block; margin-bottom: 5px; color: var(--c2-ink); }
.g-answer p { margin: 0; }

.g-cert-visual { margin: 18px 0; overflow: hidden; border-radius: var(--radius); background: var(--bg-soft); }
.g-cert-visual img,
.g-cert-visual__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.g-snapshot {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.g-snapshot h2 { margin-top: 0; }
.g-snapshot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.g-snapshot__grid div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--w); }
.g-snapshot__grid dt { color: var(--text-meta); font-size: .8125rem; }
.g-snapshot__grid dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.g-snapshot__subjects { margin: 16px 0 0; }

.g-faq { margin: 30px 0; }
.g-faq details { border-top: 1px solid var(--line-2); }
.g-faq details:last-child { border-bottom: 1px solid var(--line-2); }
.g-faq summary { min-height: 52px; padding: 12px 4px; cursor: pointer; font-weight: 700; }
.g-faq details p { margin: 0; padding: 0 4px 16px; }

.g-search { display: flex; gap: 8px; width: min(100%, 620px); margin: 18px 0; }
.g-search__input {
  min-width: 0;
  min-height: var(--btn-h);
  flex: 1 1 auto;
  padding: 0 14px;
  border: 2px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--w);
  color: var(--text);
  font: inherit;
}
.g-search__input:focus { outline: 3px solid var(--bg-c2); border-color: var(--c2); }
.g-search__button { flex: 0 0 auto; }
.g-search__status { margin: 0 0 18px; color: var(--text-meta); font-size: .875rem; }

.g-featured-certs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.g-featured-certs li { min-width: 0; }
.g-featured-certs a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--w);
  color: var(--c1);
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease;
}
.g-featured-certs a:hover { transform: translateY(-2px); border-color: var(--c2); }

.g-hero .g-search { margin-top: 0; }
.g-hero .g-search__input { border-color: color-mix(in srgb, var(--w) 56%, transparent); }

.g-more,
.g-official,
.g-idx__tab,
.g-certlist__i > a { min-height: 44px; display: inline-flex; align-items: center; }

.g-reveal { transform: translateY(8px); transition: transform 180ms ease; }
.g-reveal.is-visible { transform: translateY(0); }

@media (max-width: 900px) {
  .g-hero__fig { display: block; width: 100%; }
  .g-hero__img { width: 100%; height: auto; aspect-ratio: 560 / 313; }
  .g-featured-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .g-snapshot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-search { flex-direction: column; }
  .g-search__button { width: 100%; }
  .g-featured-certs { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .g-reveal, .g-featured-certs a { transition: none; transform: none; }
}

/* 대표이미지 */
.g-thumb { margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; }
.g-thumb img { width: 100%; }

/* 아카이브 목록 */
.g-list { list-style: none; margin: 0; padding: 0; }
.g-list__item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.g-list__item:first-child { padding-top: 0; }
.g-list__t { font-size: 18px; font-weight: 500; margin: 0 0 4px; line-height: 1.45; }
.g-list__t a { text-decoration: none; color: var(--ink); }
.g-list__t a:hover { color: var(--c1); }
.g-list__meta { font-size: 13px; color: var(--ink-3); }
.g-list__thumb { margin: 0 0 10px; border-radius: var(--radius); overflow: hidden; }

/* FAQ */
.g-faq { margin: 0 0 22px; }
.g-faq__q { font-size: 16px; font-weight: 500; margin: 16px 0 6px; }
.g-faq__a { margin: 0; color: var(--ink-2); }

/* 목차 — 서버사이드 렌더 전제 (§3-5) */
.g-toc { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 24px; background: var(--bg-soft); font-size: 15px; }
.g-toc__t { font-size: 14px; color: var(--ink-3); margin: 0 0 6px; }
.g-toc ol { margin: 0; padding-left: 20px; }
.g-toc li { margin: 0 0 4px; }

/* 페이지네이션 */
.g-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 0; }
.g-pager a, .g-pager span { padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; font-size: 15px; }
.g-pager .current { background: var(--c1); color: var(--on-c1); border-color: var(--c1); }

/* 스크린리더 전용 */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.g-skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  width: auto; height: auto; clip: auto;
  padding: 8px 14px; background: var(--c1); color: var(--on-c1);
}

/* ── PHASE 4: 데이터 렌더 컴포넌트 ───────────────── */
.g-h2{font-size:1.05rem;font-weight:500;margin:1.6em 0 .6em}
.g-badge{display:inline-block;font-size:.8125rem;padding:.2em .6em;border-radius:3px;
  background:color-mix(in srgb,var(--c2) 10%,var(--w));color:var(--c2);margin:0 0 .8em}
.g-tag{font-size:.8125rem;padding:.1em .4em;border-radius:3px;
  background:color-mix(in srgb,var(--k) 6%,var(--w));color:color-mix(in srgb,var(--k) 55%,var(--w))}

/* 시험장 — 표가 아니라 목록. 열 재배치 대상이 아니다 */
.g-venue{list-style:none;padding:0;margin:.8em 0}
.g-venue__item{padding:.7em 0;border-bottom:1px solid color-mix(in srgb,var(--k) 8%,var(--w))}
.g-venue__n{display:block;font-weight:500}
.g-venue__d{display:block;font-size:.86rem;margin-top:.2em;
  color:color-mix(in srgb,var(--k) 55%,var(--w))}

/* 공개문제 — 출처가 제목 아래 항상 보인다(§1-1 취지) */
.g-papers{list-style:none;padding:0;margin:.8em 0}
.g-paper{border-bottom:1px solid color-mix(in srgb,var(--k) 8%,var(--w))}
.g-paper a{display:block;padding:.75em 0;text-decoration:none}
.g-paper__t{display:block;color:var(--c1);text-decoration:underline;text-underline-offset:2px}
.g-paper__src{display:block;font-size:.8125rem;margin-top:.25em;
  color:color-mix(in srgb,var(--k) 50%,var(--w))}
.g-paper__m{display:block;font-size:.8125rem;margin-top:.1em;
  color:color-mix(in srgb,var(--k) 42%,var(--w))}
.g-fail{text-align:center;padding:2em 0}
.g-btn{display:inline-block;padding:.6em 1.1em;border-radius:4px;
  background:var(--c1);color:var(--w);text-decoration:none}

/* ── PHASE 5: 도구 (캘린더 · 색인) ───────────────── */
.g-tools{display:flex;gap:.5em;margin:1.2em 0}
.g-tools__a{flex:1;text-align:center;padding:.7em;border-radius:4px;text-decoration:none;
  background:color-mix(in srgb,var(--c1) 7%,var(--w));color:var(--c1)}

/* 임박 접수 목록 */
.g-up{list-style:none;padding:0;margin:.8em 0}
.g-up__i{display:grid;grid-template-columns:88px 1fr;gap:.1em .7em;padding:.55em 0;
  border-bottom:1px solid color-mix(in srgb,var(--k) 8%,var(--w))}
.g-up__d{font-size:.85rem;color:color-mix(in srgb,var(--k) 55%,var(--w));
  font-variant-numeric:tabular-nums}
.g-up__n{font-weight:500}
.g-up__m{grid-column:2;font-size:.82rem;color:color-mix(in srgb,var(--k) 50%,var(--w))}

/* 캘린더 — 표가 아니라 목록이다. 375px에서 가로 스크롤이 나지 않는다 */
.g-cal__nav{display:flex;align-items:center;justify-content:space-between;gap:.5em;
  margin:1em 0;padding:.5em 0;border-block:1px solid color-mix(in srgb,var(--k) 8%,var(--w))}
.g-cal__pg{font-size:.85rem;text-decoration:none;color:var(--c1);flex:1}
.g-cal__pg:last-child{text-align:right}
.g-cal__pg--off{flex:1}
.g-cal__now{font-size:1rem;white-space:nowrap}
.g-cal__list{list-style:none;padding:0;margin:.6em 0}
.g-cal__ev{display:grid;grid-template-columns:44px 1fr;gap:.6em;padding:.5em 0;
  border-bottom:1px solid color-mix(in srgb,var(--k) 7%,var(--w))}
.g-cal__d{font-size:.85rem;color:color-mix(in srgb,var(--k) 55%,var(--w));
  font-variant-numeric:tabular-nums;min-width:0}
.g-cal__body{min-width:0}
.g-cal__jm{display:block;font-weight:500;overflow-wrap:anywhere}
.g-cal__meta{display:block;font-size:.8125rem;margin-top:.15em;
  color:color-mix(in srgb,var(--k) 50%,var(--w))}
.g-cal__k{display:inline-block;padding:0 .35em;border-radius:3px;font-size:.8125rem}
.g-cal__k--reg{background:color-mix(in srgb,var(--c2) 12%,var(--w));color:var(--c2)}
.g-cal__k--exam{background:color-mix(in srgb,var(--c1) 10%,var(--w));color:var(--c1)}
.g-cal__k--pass{background:color-mix(in srgb,var(--k) 7%,var(--w));
  color:color-mix(in srgb,var(--k) 55%,var(--w))}
.g-cal__fold{margin:1.2em 0}
.g-cal__fold summary{cursor:pointer;padding:.6em 0;color:var(--c1)}

/* 색인 */
.g-idx__tabs{display:flex;gap:.4em;margin:1em 0}
.g-idx__tab{padding:.45em .9em;border-radius:4px;text-decoration:none;font-size:.9rem;
  background:color-mix(in srgb,var(--k) 5%,var(--w));color:color-mix(in srgb,var(--k) 60%,var(--w))}
.g-idx__tab.is-on{background:var(--c1);color:var(--w)}
.g-idx__n{font-size:.8125rem;font-weight:400;color:color-mix(in srgb,var(--k) 45%,var(--w))}
.g-idx__l{list-style:none;padding:0;margin:.5em 0;
  display:grid;grid-template-columns:1fr;gap:.1em}
@media(min-width:560px){.g-idx__l{grid-template-columns:1fr 1fr}}
.g-idx__i{padding:.45em 0;border-bottom:1px solid color-mix(in srgb,var(--k) 7%,var(--w));
  min-width:0;overflow-wrap:anywhere}
.g-cal__always{list-style:none;padding:0;margin:.6em 0}
.g-cal__ac{display:flex;justify-content:space-between;gap:.6em;padding:.5em 0;
  border-bottom:1px solid color-mix(in srgb,var(--k) 7%,var(--w))}
.g-cal__an{font-size:.82rem;color:color-mix(in srgb,var(--k) 50%,var(--w));white-space:nowrap}
.g-cal__rs{font-size:.8125rem;color:color-mix(in srgb,var(--k) 50%,var(--w))}
/* ============================================================
   홈 재설계 (DESIGN.md A-2·A-3·A-4·A-5·A-6·A-7)

   ★ 하드코딩 hex 0건. 파생색은 전부 color-mix()로 유도한다(§3-4).
     기존 토큰(--c1/--c2/--w/--k/--ink/--line…)을 그대로 쓰고
     역할만 매핑한다 — 이름을 바꿔 기존 스타일을 깨지 않는다(§1-5).

   ★ CLS 0(§1-3): 헤더·티커·모바일바 높이를 전부 변수로 고정한다.
     동적 영역은 "가장 높은 상태"보다 크게 예약한다(§3-4-2).

   ★ 외부 JS 0건(§1-4): 드롭다운은 hover/focus-within,
     모바일 메뉴는 체크박스, 아코디언은 details/summary다.
   ============================================================ */

:root {
  /* 홈 전용 파생 토큰 — 새 hex 없이 기존 원색에서 유도 */
  --c1-deep:  color-mix(in srgb, var(--c1) 74%, var(--k));   /* 유틸리티 바·푸터 배경 */
  --c1-soft:  color-mix(in srgb, var(--c1) 6%, var(--w));    /* 섹션 교대 배경 */
  --surface:  color-mix(in srgb, var(--c1) 4%, var(--w));
  --surface-2: color-mix(in srgb, var(--c1) 9%, var(--w));
  --on-deep:  color-mix(in srgb, var(--w) 88%, var(--c1));   /* 짙은 배경 위 본문 */
  --on-deep-2: color-mix(in srgb, var(--w) 62%, var(--c1));  /* 짙은 배경 위 보조 */
  --eyebrow:  color-mix(in srgb, var(--c1) 62%, var(--w));   /* A-7 eyebrow 주색 60% */
  --badge-bg: color-mix(in srgb, var(--c2) 12%, var(--w));
  --pill-bg:  color-mix(in srgb, var(--c1) 5%, var(--w));

  /* 레이아웃 — 홈은 넓게 쓴다(데이터 페이지의 720px는 그대로 둔다) */
  --wrap-wide: 1120px;

  /* CLS 예약 (§3-4-2 — 최대 상태보다 크게) */
  --util-h:  34px;
  --head-h:  64px;
  --strip-h: 46px;
  --tick-h:  132px;   /* 3건 렌더 시 최대 높이보다 크게 */
  --mbar-h:  56px;
}

/* 홈 본문은 g-wrap 제약을 받지 않는다 — 섹션이 전폭을 쓴다 */
.home .g-main > .g-wrap { max-width: none; padding: 0; }

/* ============================================================
   A-2 유틸리티 바
   ============================================================ */
.g-util {
  background: var(--c1-deep);
  color: var(--on-deep);
  font-size: 13px;
  line-height: 1.4;
  min-height: var(--util-h);
  display: flex;
  align-items: center;
}
.g-util__in {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 var(--pad);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.g-util__src { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-util__d { color: var(--w); }
.g-util__cta {
  color: var(--w);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}
.g-util__cta:hover { text-decoration: underline; color: var(--w); }

/* ============================================================
   A-3 헤더 + 메가 드롭다운
   ============================================================ */
.g-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c1);
  color: var(--on-c1);
}
.g-header__in {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 var(--pad);
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 로고 — SVG 심볼 + 워드마크 */
.g-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--on-c1);
  text-decoration: none;
  flex-shrink: 0;
}
.g-logo__mark { flex-shrink: 0; }
.g-logo__t { display: flex; flex-direction: column; line-height: 1.15; }
.g-logo__n { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.g-logo__s { font-size: 13px; color: var(--on-deep-2); font-weight: 500; }

/* 내비 */
.g-nav { margin-left: auto; }
.g-nav__l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.g-nav__i { position: relative; }
.g-nav__a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  gap: 4px;
  padding: 10px 12px;
  color: var(--on-c1);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius);
  cursor: pointer;
}
.g-nav__a:hover { background: color-mix(in srgb, var(--w) 12%, transparent); color: var(--on-c1); }

/* details를 드롭다운 컨테이너로 쓴다. 데스크탑에서는 open과 무관하게
   hover/focus로 펼치므로 마커를 숨긴다. */
.g-dd { position: static; }
.g-dd__s { list-style: none; }
.g-dd__s::-webkit-details-marker { display: none; }
.g-dd__s::marker { content: ''; }
.g-dd__c { transition: transform .15s; flex-shrink: 0; }

.g-dd__p {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--w);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--k) 14%, transparent);
  padding: 16px;
  z-index: 60;
}
/* 전 시도/전 등급을 담는 넓은 패널 — 중앙 정렬 */
.g-dd__p--wide {
  left: 50%;
  transform: translateX(-50%);
  width: min(880px, calc(100vw - 32px));
}
.g-dd__in { max-height: min(70vh, 560px); overflow-y: auto; }

.g-dd__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 20px;
}
.g-dd__g { min-width: 0; }
.g-dd__h {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.g-dd__n {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--pill-bg);
  border-radius: 20px;
  padding: 1px 7px;
}
.g-dd__ul { list-style: none; margin: 0; padding: 0; }
.g-dd__ul li { margin: 0 0 5px; }
.g-dd__ul a {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  display: block;
  padding: 2px 0;
}
.g-dd__ul a:hover { color: var(--c1); text-decoration: underline; }
.g-dd__pills { display: flex; flex-wrap: wrap; gap: 5px; }
.g-dd__all {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c1);
  text-decoration: none;
}
.g-dd__all:hover { text-decoration: underline; }
.g-dd__note { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }

/* 데스크탑: hover/focus-within으로 펼친다 (JS 0건) */
@media (min-width: 861px) {
  .g-dd__p { display: none; }
  .g-nav__i--has:hover .g-dd__p,
  .g-nav__i--has:focus-within .g-dd__p { display: block; }
  .g-nav__i--has:hover .g-dd__c,
  .g-nav__i--has:focus-within .g-dd__c { transform: rotate(180deg); }
  .g-burger, .g-burger__cb { display: none; }
}

/* 인기 키워드 스트립 (모바일 A-3) */
.g-strip {
  background: var(--c1-deep);
  min-height: var(--strip-h);
  display: none;
  overflow: hidden;
}
.g-strip__in {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px var(--pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.g-strip__in::-webkit-scrollbar { display: none; }
.g-strip .g-pill {
  background: color-mix(in srgb, var(--w) 14%, transparent);
  color: var(--w);
  border-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   모바일 헤더 — 햄버거(체크박스) + details 아코디언
   ============================================================ */
.g-burger__cb { position: absolute; width: 44px; height: 44px; opacity: 0; pointer-events: none; }
.g-burger {
  margin-left: auto;
  width: 44px; height: 44px;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0 8px;
}
.g-burger span {
  display: block;
  height: 2px;
  background: var(--on-c1);
  border-radius: 2px;
  transition: transform .18s, opacity .18s;
}

@media (max-width: 860px) {
  html, body { overflow-x: clip; }
  .g-burger { display: flex; }
  .g-strip { display: block; }

  .g-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--w);
    color: var(--ink);
    border-top: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    /* max-height 전이는 레이아웃을 밀지 않는다(오버레이라 문서 흐름 밖) */
    transition: max-height .2s ease;
    z-index: 60;
  }
  .g-burger__cb:checked ~ .g-nav {
    max-height: calc(100vh - var(--head-h));
    overflow-y: auto;
  }
  .g-burger__cb:checked ~ .g-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .g-burger__cb:checked ~ .g-burger span:nth-child(2) { opacity: 0; }
  .g-burger__cb:checked ~ .g-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .g-nav__l { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0; }
  .g-nav__i { border-bottom: 1px solid var(--line); }
  .g-nav__i:last-child { border-bottom: 0; }
  .g-nav__a {
    color: var(--ink);
    padding: 13px var(--pad);
    justify-content: space-between;
    border-radius: 0;
  }
  .g-nav__a:hover { background: var(--surface); color: var(--c1); }

  /* 모바일에서는 details의 open 상태가 실제로 동작한다 */
  .g-dd__p {
    position: static;
    transform: none;
    width: auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface);
    padding: 12px var(--pad) 16px;
  }
  .g-dd__p--wide { width: auto; }
  .g-dd[open] .g-dd__c { transform: rotate(180deg); }
  .g-dd__in { max-height: none; overflow: visible; }
  .g-dd__cols { grid-template-columns: 1fr; }
  .g-dd__h a, .g-dd__ul a, .g-dd__all { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============================================================
   A-7 공통 — eyebrow · 섹션 · 카드 · pill
   ============================================================ */
.g-sec { padding: 44px 0; background: var(--bg); }
.g-sec--alt { background: var(--surface); }
.g-sec__in { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--pad); }

/* eyebrow — 섹션 리듬의 핵심(A-7) */
.g-eyebrow {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--eyebrow);
  text-transform: uppercase;
}
.g-sec__h {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.g-sec__p { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; }
.g-sec__note { margin: 16px 0 0; font-size: 13px; color: var(--ink-3); }

/* pill */
.g-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 5px;
  padding: 5px 11px;
  background: var(--pill-bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.g-pill:hover { background: var(--bg-c1); border-color: var(--line-2); color: var(--c1); }
.g-pill--s { font-size: 13px; padding: 4px 10px; }
.g-pill--n { font-size: 14px; padding: 7px 13px; }
.g-pill__n {
  font-size: 13px;
  font-weight: 700;
  color: var(--c2-ink);
  background: var(--badge-bg);
  border-radius: 20px;
  padding: 1px 6px;
}
.g-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.g-idx__tab { min-height: 44px; display: inline-flex; align-items: center; }

/* 버튼 */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
}
.g-btn--1 { background: var(--c2); color: var(--w); }
.g-btn--1:hover { background: var(--c2-ink); color: var(--w); }
.g-btn--2 {
  background: color-mix(in srgb, var(--w) 14%, transparent);
  color: var(--w);
  border-color: color-mix(in srgb, var(--w) 45%, transparent);
}
.g-btn--2:hover { background: color-mix(in srgb, var(--w) 24%, transparent); color: var(--w); }

/* ============================================================
   ① 히어로
   ============================================================ */
.g-hero {
  background: linear-gradient(140deg, var(--c1), var(--c1-deep));
  color: var(--on-c1);
  padding: 44px 0 48px;
}
.g-hero__in {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.g-hero__txt { min-width: 0; }
.g-badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  background: var(--c2);
  color: var(--w);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}
/* 홈 H1 예외 — 32~40px/800 (A-7) */
.g-hero__h {
  margin: 0 0 14px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--w);
}
.g-hero__p {
  margin: 0 0 24px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--on-deep);
  max-width: 34em;
}
.g-hero__p strong { color: var(--w); font-weight: 700; }
.g-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* A-8 폴백 — 이미지가 없어도 완주한다. 도착하면 이 자리를 <picture>로 교체.
   높이를 고정해 교체 시점에도 CLS가 나지 않는다. */
.g-hero__fig { flex-shrink: 0; }
.g-hero__svg { display: block; width: 320px; height: 200px; border-radius: 10px; }

/* ============================================================
   ② D-day 티커 — 높이 예약 필수(§B-2 ②)
   ============================================================ */
.g-tick { background: var(--c1-deep); color: var(--on-deep); }
.g-tick__in {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 14px var(--pad);
  min-height: var(--tick-h);
}
.g-tick__lb {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--w);
  text-transform: uppercase;
}
.g-tick__l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.g-tick__i {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "d n" "d m";
  gap: 0 10px;
  align-items: center;
  background: color-mix(in srgb, var(--w) 10%, transparent);
  border-radius: var(--radius);
  padding: 9px 12px;
  min-width: 0;
}
.g-tick__d {
  grid-area: d;
  font-size: 19px;
  font-weight: 800;
  color: var(--w);
  background: var(--c2);
  border-radius: var(--radius);
  padding: 5px 10px;
  min-width: 60px;
  text-align: center;
}
.g-tick__n {
  grid-area: n;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--w);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-tick__m { grid-area: m; font-size: 13px; color: var(--on-deep-2); }

/* ============================================================
   ③ 숫자 스트립
   ============================================================ */
.g-nums {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.g-num {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
}
.g-sec:not(.g-sec--alt) .g-num { background: var(--surface); }
.g-num__v {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--c1);
  letter-spacing: -0.02em;
}
.g-num__l { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }

/* ============================================================
   ④ 빠른 찾기 — 도구 카드
   ============================================================ */
.g-tools2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.g-tool {
  display: block;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}
.g-tool:hover { border-color: var(--c1); background: var(--bg-c1); }
.g-tool__h { display: block; font-size: 16px; font-weight: 700; color: var(--c1); }
.g-tool__p { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }

/* ============================================================
   ⑤ 등급 타일 · 시행형태
   ============================================================ */
.g-grid { display: grid; gap: 14px; }
.g-grid--tile { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.g-tile {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.g-tile__h {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c1);
  display: flex;
  align-items: center;
  gap: 7px;
}
.g-tile__n {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--pill-bg);
  border-radius: 20px;
  padding: 2px 8px;
}
.g-tile__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.g-tile__a { font-size: 13px; font-weight: 700; color: var(--c1); text-decoration: none; }
.g-tile__a:hover { text-decoration: underline; }

.g-mode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.g-mode__i {
  display: block;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  text-decoration: none;
}
.g-mode__i:hover { border-color: var(--c1); }
.g-mode__h { font-size: 15px; font-weight: 700; color: var(--c1); }
.g-mode__n {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c2-ink);
  background: var(--badge-bg);
  border-radius: 20px;
  padding: 2px 8px;
}
.g-mode__p { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); }

/* ============================================================
   ⑥ 카테고리 카드
   ============================================================ */
.g-grid--card { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.g-sec--alt .g-card { background: var(--bg); }
/* A-8 폴백: 이미지 대신 SVG 아이콘 + 주색 배경. 크기 고정 → CLS 0 */
.g-card__ic { margin-bottom: 12px; }
.g-card__ic svg { display: block; width: 48px; height: 48px; }
.g-card__h {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}
.g-card__b {
  font-size: 13px;
  font-weight: 700;
  color: var(--w);
  background: var(--c1);
  border-radius: 20px;
  padding: 2px 8px;
}
.g-card__p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.g-card__pills { display: flex; flex-wrap: wrap; gap: 5px; }

/* ============================================================
   ⑦ STEP — 이미지 없이 번호만(A-4 #7)
   ============================================================ */
.g-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  counter-reset: step;
}
.g-step {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
}
.g-step__n {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c2);
  margin-bottom: 6px;
}
.g-step__h { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.g-step__p { display: block; font-size: 13px; line-height: 1.6; color: var(--ink-2); }

/* ============================================================
   ⑧ 공식 정보
   ============================================================ */
.g-grid--off { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g-off {
  display: block;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}
.g-off:hover { border-color: var(--c1); background: var(--bg-c1); }
.g-off__h { display: block; font-size: 15px; font-weight: 700; color: var(--c1); }
.g-off__p { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.g-off__u { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); }

/* ============================================================
   ⑨ WHY
   ============================================================ */
.g-grid--why { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.g-why {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--line);
}
.g-why__ic { display: block; margin-bottom: 8px; }
.g-why__h { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.g-why__p { display: block; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

/* ============================================================
   ⑩ 매거진 카드
   ============================================================ */
.g-grid--mag { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g-mag {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.g-sec--alt .g-mag { background: var(--bg); }
.g-mag__a { display: block; padding: 16px; text-decoration: none; height: 100%; }
.g-mag__a:hover .g-mag__h { color: var(--c1); text-decoration: underline; }
/* 제목 2줄 클램프(A-7) */
.g-mag__h {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.g-mag__x {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.g-mag__m {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-mag__r {
  color: var(--c1);
  font-weight: 600;
  background: var(--pill-bg);
  border-radius: 20px;
  padding: 1px 8px;
}

/* ============================================================
   ⑪ 가이드
   ============================================================ */
.g-grid--guide { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g-guide {
  display: block;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}
.g-guide:hover { border-color: var(--c1); }
.g-guide__h { display: block; font-size: 15.5px; font-weight: 700; color: var(--c1); margin-bottom: 5px; }
.g-guide__p {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   ⑬ FAQ 아코디언 — CSS only
   ============================================================ */
.g-faq {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.g-faq__i { border-bottom: 1px solid var(--line); }
.g-faq__i:last-child { border-bottom: 0; }
.g-faq__q {
  padding: 15px 44px 15px 16px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.g-faq__q::-webkit-details-marker { display: none; }
.g-faq__q::marker { content: ''; }
.g-faq__q::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--c1);
  border-bottom: 2px solid var(--c1);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s;
}
.g-faq__i[open] .g-faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.g-faq__q:hover { background: var(--surface); color: var(--c1); }
.g-faq__a { padding: 0 16px 16px; }
.g-faq__a p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.g-faq__a a { font-size: 13.5px; font-weight: 700; }

/* ============================================================
   A-5 메가 푸터
   ============================================================ */
.g-footer {
  background: var(--c1-deep);
  color: var(--on-deep);
  margin-top: 0;
  padding: 36px 0 0;
}
.g-footer__in { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--pad); }
.g-fcols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px 22px;
  padding-bottom: 30px;
}
.g-fcol { min-width: 0; }
.g-fcol--about { grid-column: span 2; }
.g-fcol__h {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--w);
}
.g-fcol__sh {
  margin: 12px 0 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-deep-2);
  letter-spacing: 0.04em;
}
.g-fcol__p { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--on-deep); }
.g-fcol__meta { margin: 0; font-size: 13px; line-height: 1.75; color: var(--on-deep-2); }
.g-fcol__ul { list-style: none; margin: 0; padding: 0; }
.g-fcol__ul li { margin: 0 0 4px; }
.g-fcol__ul a {
  font-size: 13px;
  color: var(--on-deep);
  text-decoration: none;
  display: block;
}
.g-fcol__ul a:hover { color: var(--w); text-decoration: underline; }
.g-fcol__all {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--w);
  text-decoration: none;
}
.g-fcol__all:hover { text-decoration: underline; }

.g-footer__bar {
  border-top: 1px solid color-mix(in srgb, var(--w) 18%, transparent);
  padding: 16px 0 20px;
}
.g-footer__bar .g-disclaimer {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--w);
  font-weight: 600;
}
.g-footer__bar .g-copy { margin: 0; font-size: 13px; line-height: 1.7; color: var(--on-deep-2); }

/* ============================================================
   A-6 모바일 하단 고정 바 — 56px. body 패딩으로 CLS 0
   ============================================================ */
.g-mbar { display: none; }
@media (max-width: 860px) {
  .g-mbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--mbar-h);
    background: var(--w);
    border-top: 1px solid var(--line-2);
    z-index: 70;
  }
  .g-mbar__a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c1);
    text-decoration: none;
  }
  .g-mbar__a--2 { border-left: 1px solid var(--line); }
  .g-mbar__a:active { background: var(--surface); }
  /* 하단 바에 콘텐츠가 가리지 않도록 여백 확보 — 예약이므로 CLS 0 */
  body { padding-bottom: var(--mbar-h); }
}

/* ============================================================
   반응형 — 375px 가로 스크롤 0 (§3-4)
   ============================================================ */
@media (max-width: 900px) {
  .g-hero__in { grid-template-columns: 1fr; gap: 24px; }
  .g-hero__fig { display: none; }   /* 모바일에서는 장식 SVG를 뺀다 */
  .g-hero__h { font-size: 30px; }
  .g-fcol--about { grid-column: span 2; }
}
@media (max-width: 600px) {
  .g-hero { padding: 32px 0 36px; }
  .g-hero__h { font-size: 27px; }
  .g-hero__p { font-size: 15.5px; }
  .g-btn { flex: 1 1 auto; }
  .g-sec { padding: 32px 0; }
  .g-sec__h { font-size: 22px; }
  .g-num__v { font-size: 28px; }
  .g-nums { grid-template-columns: 1fr 1fr; }
  .g-util { font-size: 13px; }
  .g-util__cta { font-size: 13px; }
  .g-fcols { grid-template-columns: 1fr 1fr; }
  .g-fcol--about { grid-column: span 2; }
}
@media (max-width: 400px) {
  .g-util__in { gap: 8px; }
  .g-tick__d { min-width: 52px; font-size: 17px; }
}

/* 인쇄·모션 축소 */
@media (prefers-reduced-motion: reduce) {
  .g-nav, .g-dd__c, .g-burger span, .g-faq__q::after { transition: none; }
}

/* ============================================================
   A-8 이미지 반영 — 제공 이미지가 도착한 슬롯
   ★ 이미지/SVG 폴백이 같은 높이를 차지하도록 고정한다.
     한 카드는 이미지, 옆 카드는 SVG인 혼재 상태에서도 줄이 안 맞으면
     그 자체가 레이아웃 이동으로 보인다.
   ============================================================ */
:root { --card-ic-h: 96px; }

/* 히어로 이미지 — SVG 폴백(320x200)과 같은 자리 */
.g-hero__img {
  display: block;
  width: 320px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

/* 등급 카드 아이콘 — 정사각. 폴백 SVG(48px)와 높이를 맞춘다. */
.g-card__ic {
  min-height: var(--card-ic-h);
  display: flex;
  align-items: center;
}
.g-card__img {
  width: var(--card-ic-h);
  height: var(--card-ic-h);
  object-fit: cover;
  border-radius: var(--radius);
}
/* 폴백 SVG는 48px이라 그대로 두면 이미지 카드와 줄이 안 맞는다 */
.g-card__ic svg { width: 48px; height: 48px; }

@media (max-width: 900px) {
  /* 히어로 이미지는 모바일에서 숨긴다 — 폴백 SVG와 동일 규칙 */
  .g-hero__fig { display: none; }
}

/* ⑤ 시행형태 타일 아이콘 — 상시검정만 이미지가 있다.
   이미지가 있는 타일과 없는 타일의 제목 줄을 맞추기 위해 좌측 정렬을 쓴다. */
.g-mode__ic {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  object-fit: cover;
  float: left;
  margin: 0 10px 0 0;
}

/* ============================================================
   Playwright 실측 교정 (2026-08-04)
   ============================================================ */

/* ① 헤더와 히어로 사이 흰 띠 28px 제거.
   .g-main의 기본 padding(28px 0 40px)은 본문 페이지용이다. 홈은 섹션이
   전폭을 쓰고 자체 padding을 가지므로 상단 여백이 흰 띠로 보였다(실측:
   .g-main top=99 → .g-hero top=127). 하단은 푸터가 바로 붙으므로 함께 0. */
.home .g-main { padding-top: 0; padding-bottom: 0; }

/* ② 히어로 이미지 비율 교정.
   원본이 1280x714(16:9)인데 320x200(16:10) 박스에 넣어 object-fit:cover가
   좌우를 잘라냈다. 박스를 원본 비율에 맞춰 잘림을 없앤다.
   높이는 CSS로 고정돼 있으므로 CLS는 그대로 0이다. */
.g-hero__img { width: 340px; height: 190px; }

/* ============================================================
   매거진 썸네일 · 카테고리 배너 (2026-08-04)

   ★ 썸네일에 한글 제목이 박혀 있으므로 이미지 위에 제목을 겹치지 않는다.
     이미지 → 제목 → 발췌 → 날짜·읽기시간 순서로 세로로 쌓는다.
   ★ 전 이미지 width/height 명시 + aspect-ratio 고정으로 CLS 0.
   ============================================================ */

/* 매거진 카드 썸네일 (홈 ⑩ · 목록) */
.g-mag__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-2);   /* 로드 전 자리 — 흰 깜빡임 방지 */
}
/* 이미지가 카드 상단에 붙으므로 본문 패딩은 이미지 아래에만 준다 */
.g-mag__a { padding: 0; }
.g-mag__a > :not(.g-mag__img) { margin-left: 16px; margin-right: 16px; }
.g-mag__h { margin-top: 14px; }
.g-mag__a > .g-mag__m { margin-bottom: 16px; }
/* 이미지가 없는 카드(폴백)는 기존처럼 위쪽 여백을 준다 */
.g-mag__a > .g-mag__h:first-child { margin-top: 16px; }

/* 매거진 목록(index.php) 썸네일 */
.g-list__item .g-mag__img {
  border-radius: var(--radius);
  margin-bottom: 10px;
}

/* 매거진 상세 대표이미지 */
.single .g-mag__img {
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius);
  margin: 0 0 20px;
}

/* ⑥ 카테고리 카드 배너 — 텍스트 없는 이미지라 제목을 그대로 얹는다 */
.g-card__bnr {
  display: block;
  width: calc(100% + 36px);
  margin: -18px -18px 14px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-2);
}
/* 배너가 붙으면 아이콘은 배너 위로 겹치지 않고 아래에 온다 */
.g-card__bnr + .g-card__ic { margin-top: 0; }

/* 매거진 목록 썸네일 폭 제한 (2026-08-04 육안 교정)
   본문 폭(720px) 전체를 먹어 한 화면에 한 건만 보였다.
   목록은 훑는 지면이므로 썸네일을 좌측 고정폭으로 줄이고 제목을 옆에 둔다. */
@media (min-width: 600px) {
  .g-list__item { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
  .g-list__item .g-mag__img { margin-bottom: 0; }
  .g-list__item .g-list__t { margin-top: 0; }
}
@media (max-width: 599px) {
  .g-list__item .g-mag__img { max-width: 100%; }
}

/* 목록 카드 — 제목+날짜를 한 덩어리로 썸네일 옆에 세운다 */
.g-list__body { min-width: 0; }
.g-list__body .g-list__t { margin: 0 0 6px; font-size: 17px; line-height: 1.45; }
.g-list__body .g-list__meta { margin: 0; font-size: 13px; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════
   §2-9 디자인 시스템 — 버튼·타이포·색·정렬 (전 페이지 적용)

   이 블록은 파일 끝에 두어 앞선 정의를 확정적으로 덮는다.
   현 라이브의 문제였던 것:
     · .g-btn 이 378행과 805행에 두 벌 정의돼 같은 화면에서 버튼 크기가 달랐다
     · 섹션 라벨이 영문 스몰캡(BY GRADE 등)이라 위계가 안 보였다
     · 흐린 회색 본문(밝기 40~53% 상당)이 규정 상한보다 옅었다
   규격은 취향 제안이 아니라 준수 대상이다.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* 상태 배지 토큰 — 배지색이 필요하면 토큰으로 정의부에만 둔다(§2-9).
     하드코딩 hex를 늘리지 않는다 — 전부 원색에서 color-mix로 유도한다. */
  /* 접수 중 = 진한 녹색. 새 hex를 만들지 않는다 — CSS 색 키워드 green을
     기준점으로 삼아(--w/--k와 같은 원리) 검정을 섞어 진하게 내린다. */
  --ok:      color-mix(in srgb, green 74%, var(--k));
  --warn:    var(--c2-ink);
  --muted:   color-mix(in srgb, var(--w) 34%, var(--k));
  --on-badge: var(--w);

  /* 본문·메타 텍스트 상한 (§2-9: 본문 명도 20% 이하, 메타 33% 이하) */
  --text:      color-mix(in srgb, var(--w) 12%, var(--k));   /* 명도 12% */
  --text-meta: color-mix(in srgb, var(--w) 30%, var(--k));   /* 명도 30% */

  /* 하나의 그리드 — 전 섹션이 같은 컨테이너 폭·같은 좌우 패딩을 쓴다 */
  --gap: 16px;
  --btn-h: 48px;
  --btn-h-sm: 44px;
}

/* ── 버튼: 2계층만 허용, 제3의 스타일 금지 ─────────────────────── */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--btn-h);
  padding: 0 20px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary   { background: var(--c1); color: var(--w); border-color: var(--c1); }
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--c1-hover); border-color: var(--c1-hover); color: var(--w); }
.btn-secondary { background: var(--w); color: var(--c1); border-color: var(--c1); }
.btn-secondary:hover,
.btn-secondary:focus-visible { background: var(--bg-c1); color: var(--c1); }

@media (max-width: 600px) {
  .btn-primary, .btn-secondary { min-height: var(--btn-h-sm); }
}

/* 같은 줄의 버튼은 높이·radius·좌우 패딩·폰트 크기가 전부 같아야 한다(±0px).
   히어로 CTA 2개는 같은 높이·같은 폭 계열로 나란히. */
.g-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.g-cta > .btn-primary,
.g-cta > .btn-secondary { flex: 0 1 auto; }

/* 버튼이 아닌 텍스트 링크는 버튼처럼 꾸미지 않는다 — 화살표 또는 밑줄만 */
.g-more {
  display: inline-block;
  color: var(--c1);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding: 0;
  background: none;
  min-height: 0;
}
.g-more:hover { color: var(--c1-hover); }

/* ── 타이포 스케일: 고정 4단, 예외 없음 ────────────────────────── */
.g-hero__h,
.g-hero h1        { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.25; }
.g-sec__h,
.g-sec > h2,
.g-sec__head h2   { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1.3; }
.g-card__t,
.g-card h3,
.g-list__t        { font-size: 1.125rem; font-weight: 700; line-height: 1.4; }

/* 영문 eyebrow 라벨 전부 제거 — 위계는 H2 크기·굵기가 직접 담당한다.
   한국어 H2 하나로 충분하다. */
.g-eyebrow { display: none !important; }

/* ── 색: 더 진하게, 구분이 보이게 ──────────────────────────────── */
body { color: var(--text); }
.g-sec p, .g-card p, .g-list p { color: var(--text); }
.g-meta, .g-card__meta, .g-list__meta, .g-note, .g-sec__lead small {
  color: var(--text-meta);
}

/* 카드·구획 경계를 눈에 보이게. "흰 배경 위 아주 옅은 회색 카드" 금지 */
.g-card, .g-panel, .g-list__item {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--bg);
}

/* 상태 배지 — 배경 채움형. 텍스트 색만 바꾸는 흐린 배지 금지 */
.g-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--muted);
  color: var(--on-badge);
}
.g-badge--ok    { background: var(--ok);    color: var(--on-badge); }
.g-badge--warn  { background: var(--warn);  color: var(--on-badge); }
.g-badge--muted { background: var(--muted); color: var(--on-badge); }

/* 빈자리 추가접수는 정규 접수와 섞이지 않게 별도 배지(§2-3) */
.g-badge--binjari {
  background: var(--w);
  color: var(--warn);
  border: 1.5px solid var(--warn);
}

/* ── 정렬: 하나의 그리드 ───────────────────────────────────────── */
/* 전 섹션이 같은 컨테이너 폭·같은 좌우 패딩(.g-wrap 하나)을 쓴다.
   버튼·카드·배지의 좌측 시작선이 섹션 H2의 좌측 시작선과 일치해야 한다. */
.g-sec > .g-wrap > *,
.g-sec__head, .g-sec__body { margin-left: 0; margin-right: 0; }

.g-grid {
  display: grid;
  gap: var(--gap);
  align-items: stretch;          /* 같은 줄의 카드는 높이 동일 */
}
.g-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .g-grid--2, .g-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
.g-grid > * { min-width: 0; }    /* 그리드 오버플로 1차 원인 차단(§3-4) */

/* D-day 인라인 배지 — 클라이언트가 채운다(§1-5). 서버는 비워 둔다.
   비어 있는 동안에도 자리를 차지해 채워질 때 레이아웃이 밀리지 않게 한다. */
.g-dn {
  display: inline-block;
  min-width: 3.6em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.g-dn:empty::before { content: "\00a0"; }

/* ── §2 새 홈 컴포넌트 (2026-08-13) ─────────────────────────────── */

/* 카드 내부 — 배지 줄 → 제목 → 메타 → 날짜 → 액션 순으로 고정.
   같은 줄 카드 높이를 맞추려면 액션이 바닥에 붙어야 한다. */
.g-card { display: flex; flex-direction: column; padding: 16px; }
.g-card__hd { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.g-card__t a { color: inherit; text-decoration: none; }
.g-card__t a:hover { text-decoration: underline; }
.g-card__meta { margin: 6px 0 0; font-size: 0.875rem; color: var(--text-meta); }
.g-card__note { margin: 8px 0 0; font-size: 0.8125rem; color: var(--text-meta); }
.g-card__act { margin: auto 0 0; padding-top: 12px; }

/* 카드 이미지 — width/height 속성이 있어야 CLS 0(§2-10). CSS는 폭만 맞춘다. */
.g-card__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); margin-bottom: 12px;
}

/* 섹션 배너 */
.g-sec__bnr {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); margin: 0 0 20px;
}

/* 날짜 라벨-값 — 375px에서 가로 스크롤이 나지 않게 라벨 폭을 고정한다(§3-4-1) */
.g-kv { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 10px; margin: 10px 0 0; }
.g-kv dt { font-size: 0.8125rem; color: var(--text-meta); }
.g-kv dd { min-width: 0; margin: 0; font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }

/* 종목 목록 — 상태 보드(§2-6). 링크 + 배지 한 줄. */
.g-gradeblk { margin: 0 0 28px; }
.g-certlist { list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.g-certlist__i { display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.g-certlist__i > a { color: var(--c1); text-decoration: none; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-certlist__i > a:hover { text-decoration: underline; }

/* 상시 표시 태그 — 배지와 구분되는 약한 표식 */
.g-tag { display: inline-block; margin-left: 4px; padding: 1px 6px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .8125rem; color: var(--text-meta); }

/* 빈 상태 — 블록을 숨기지 않는다(§2-3). 자리를 지키되 조용히. */
.g-empty { margin: 12px 0; padding: 20px; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  color: var(--text-meta); }

.g-note { margin: 14px 0 0; font-size: 0.875rem; color: var(--text-meta); }
.g-note a { color: var(--c1); }

/* §3-1 다음 일정 요약 박스 — 종목 개요 최상단 */
.g-nextbox { margin: 0 0 24px; padding: 16px;
  border: 2px solid var(--c1); border-radius: var(--radius); background: var(--bg); }
.g-nextbox h2 { margin: 0 0 12px; }
.g-nextbox__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.g-nextbox__seq { font-weight: 700; }
.g-nextbox__sum { margin: 12px 0 0; font-size: 0.9375rem; color: var(--text-meta); }

/* §3-2 일정 표 — 상태 배지 · 접수 중 강조 · 지난 일정 접기 */
.g-sched__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.g-sched__card--now { border-color: var(--ok); border-width: 2px;
  background: color-mix(in srgb, var(--ok) 5%, var(--w)); }
.g-past { margin: 20px 0 0; }
.g-past__s { cursor: pointer; font-weight: 700; color: var(--c1);
  padding: 10px 0; list-style: revert; }
.g-past__s::marker { color: var(--c1); }

/* §2-9 타이포 스케일을 비홈 페이지에도 적용 (G-I ② 실측 지적 반영)
   실측: 종목 schedule의 H2가 16.8px/w500 · 25.5px/w700 로 갈려 있었고
         매거진·가이드 본문 H2는 22px/w500 이었다. 스케일 밖이다.
   §2-9는 "이 스케일 밖의 font-size를 섹션 제목·카드 제목에 쓰지 않는다"를
   전 페이지 준수 대상으로 못박았다. 하나의 규칙으로 통일한다. */
.g-h2,
.g-content h2,
main h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
}
.g-content h3,
main h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.4; }

/* 본문 가독성(§3-5)은 유지 — 제목만 스케일을 따르고 본문은 그대로 둔다 */
.g-content p, .g-content li { font-weight: 400; }

/* 기존 .g-badge 정의(텍스트색만 바꾸는 흐린 배지)를 확정적으로 덮는다.
   §2-9: 상태 배지는 배경 채움형. 텍스트 색만 바꾸는 흐린 배지 금지. */
.g-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--muted);
  color: var(--on-badge);
  margin: 0;
}
.g-badge--ok    { background: var(--ok); }
.g-badge--warn  { background: var(--warn); }
.g-badge--muted { background: var(--muted); }
.g-badge--binjari { background: var(--w); color: var(--warn); border: 1.5px solid var(--warn); }
/* 확인일 배지는 상태가 아니라 메타 정보다 — 약한 표기로 구분 */
.g-badge--checked {
  background: color-mix(in srgb, var(--c1) 8%, var(--w));
  color: var(--text);
  border: 1px solid var(--line-2);
}

/* §2-9 제3의 버튼 스타일 금지 — .g-official 은 더 이상 쓰지 않는다.
   (G-I ⑥ 육안에서 "버튼처럼 보이는 세 번째 스타일"로 잡혔다)
   남아 있는 선언은 과거 마크업 호환용으로만 두고 버튼 외형을 제거한다. */
.g-official {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  color: var(--c1);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* 리뉴얼 최종 터치 게이트 — 뒤쪽 레거시 선언보다 항상 나중에 적용한다. */
.g-logo,
.g-util__cta,
.g-nav__a,
.g-dd__p a,
.g-card__t a,
.g-more,
.g-idx__i > a,
.g-certlist__i > a,
.g-fcol__ul a,
.g-fcol__all,
.g-mbar a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.g-more,
.g-fcol__all { display: inline-flex; }

/* 사이트 문서 규격: 섹션·카드 H2/H3 굵기는 500으로 통일한다. */
.g-sec__h,
.g-sec > h2,
.g-sec__head h2,
.g-card__t,
.g-card h3,
.g-list__t { font-weight: 500; }