/* ============================================================
   GUIDE SECTION — scoped design layer for guide.html and its
   sub-pages (guide-*.html). Loaded AFTER apple-style.css, so it
   inherits all --a-* tokens and only adds a "reference document"
   treatment on top: brand color/type stay identical to the rest
   of the site, this file adds citation tags, hairline tables,
   and a distinct hero for the guide pages specifically.
   ============================================================ */

:root{
  --g-paper: #FBF9F3;
  --g-rule: #DDD6C4;
  --g-rule-strong: #C9BFA3;
  --g-ink: #1A1D29;
  --g-ink-soft: #5B6472;
  --g-seal: #B4472E;
  --g-seal-soft: rgba(180,71,46,0.09);
  --g-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---------- Citation tag: the section's signature element ---------- */
.g-cite{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--g-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--g-seal);
  background: var(--g-seal-soft);
  border: 1px solid rgba(180,71,46,0.22);
  border-radius: 4px;
  padding: 1px 6px 2px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 2px;
}
/* No longer auto-prepends "§" — the tag is reused for three different
   kinds of citation (a law's article number, a government notice number,
   and a bare law name), and a section-sign only makes sense for the
   first. Each usage now spells out its own complete, unambiguous label
   in the HTML instead (e.g. "법 제8조" rather than a bare "8" reliant on
   this prefix), which also reads clearly for users unfamiliar with "§". */
.a-on-dark .g-cite{ color: #E8998A; background: rgba(232,153,138,0.12); border-color: rgba(232,153,138,0.3); }

/* ---------- Section eyebrow, guide flavor: mono + rule instead of pill ---------- */
.g-eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--g-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a-primary);
}
.g-eyebrow::before, .g-eyebrow::after{ content: ""; height: 1px; width: 28px; background: var(--g-rule-strong); }
.a-on-dark .g-eyebrow{ color: var(--a-primary-on-dark); }
.a-on-dark .g-eyebrow::before, .a-on-dark .g-eyebrow::after{ background: rgba(255,255,255,0.22); }

/* ---------- Verified-source strip: sits under section headings ---------- */
.g-verified{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--g-mono);
  font-size: 11.5px;
  color: var(--g-ink-soft);
  margin-top: 10px;
}
.g-verified .dot{ width: 5px; height: 5px; border-radius: 50%; background: #3E8C5C; flex-shrink: 0; }

/* ---------- Hairline "ledger" tables (overrides a-compare-table look) ---------- */
.g-scope .a-compare-table{ border-collapse: collapse; }
.g-scope .a-compare-table thead th{
  font-family: var(--g-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.06em;
  border-bottom: 1.5px solid var(--g-ink); background: transparent; padding-bottom: 10px;
}
.g-scope .a-compare-table tbody td, .g-scope .a-compare-table tbody th{
  border-bottom: 1px solid var(--g-rule); font-variant-numeric: tabular-nums;
}
.g-scope .a-compare-table td.is-highlighted, .g-scope .a-compare-table th.is-highlighted{
  background: var(--g-seal-soft);
}

/* ---------- Guide hero: "dossier cover" treatment ---------- */
.g-hero{
  position: relative;
  background: linear-gradient(165deg, #14161F 0%, #1D2030 100%);
  overflow: hidden;
}
.g-hero::before{
  /* faint ruled-paper texture */
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 27px, rgba(255,255,255,0.035) 27px, rgba(255,255,255,0.035) 28px
  );
  pointer-events: none;
}
.g-hero-inner{
  position: relative; z-index: 2;
  max-width: 720px; margin: 0 auto;
  padding: 108px 24px 76px;
  text-align: center;
}
.g-hero-refline{
  font-family: var(--g-mono); font-size: 12px; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5); margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.g-hero-refline .g-seal-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--g-seal); flex-shrink: 0; }
.g-hero-title{
  font-family: var(--a-font-display); color: #fff; font-weight: 700;
  font-size: clamp(32px, 5.2vw, 56px); line-height: 1.08; letter-spacing: -0.02em;
}
.g-hero-lead{
  font-family: var(--a-font-display); color: rgba(255,255,255,0.72);
  font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; margin-top: 18px;
  max-width: 520px; margin-inline: auto;
}
.g-hero-meta{
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  font-family: var(--g-mono); font-size: 11.5px; color: rgba(255,255,255,0.55);
}
.g-hero-meta b{ color: #fff; font-weight: 600; }
@media (max-width: 640px){ .g-hero-inner{ padding: 88px 20px 56px; } }

/* ---------- Cleaner line-wrapping for short headings only ---------- */
/* Originally also covered .a-lead/.g-hero-lead, but text-wrap:balance
   combined with word-break:keep-all on multi-line Korean body copy hits
   a real Chromium rendering bug (broken/staggered line breaks on some
   Chrome/Edge builds — filed against Chrome 114-121, since fixed in 122,
   but re-observed live on this exact "학점은행제란?" lead paragraph).
   Headlines are short (1-2 lines) and much less exposed, so they keep
   the nicer balanced wrap; lead paragraphs fall back to normal wrapping. */
.g-scope .a-display-md, .g-scope .a-display-lg, .g-scope .g-hero-title{
  text-wrap: balance;
}