/* ============================================================
   Seoul Palace Hours
   Palette taken from dancheong (단청), the polychrome painting on
   palace eaves: meok ink, jangdan red-orange, noerok green,
   samcheong blue, hwang yellow, baek white. Open/closed use the
   building's own green and red rather than generic UI colours.
   ============================================================ */

:root {
  color-scheme: light;

  --meok:       #17140F;
  --meok-soft:  #2A241C;
  --baek:       #F4EFE3;
  --baek-warm:  #EBE4D4;
  --paper:      #FBF8F1;
  --jangdan:    #B93A2B;
  --jangdan-dk: #8E2A1E;
  --noerok:     #3D6B52;
  --noerok-dk:  #2C5040;
  --samcheong:  #2C5F7C;
  --hwang:      #D9A22B;

  --ink:        #1C1811;
  --ink-soft:   #4A4237;
  --muted:      #7A7161;
  --rule:       #DCD4C2;
  --rule-firm:  #C3B9A2;

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --shell: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--samcheong); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible { outline: 3px solid var(--hwang); outline-offset: 2px; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--hwang); color: var(--meok);
  padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ───────────────────────────── HERO ───────────────────────────── */

.hero {
  position: relative;
  background: var(--meok);
  color: var(--baek);
  overflow: hidden;
  padding: 34px 24px 190px;
  isolation: isolate;
}

.hero-art {
  position: absolute; inset: 0; z-index: -1;
  display: flex; align-items: flex-end;
}
.hero-art svg { width: 100%; height: 100%; display: block; }

/* A photograph, if you drop one in, sits over the drawing.
   Set --hero-photo on .hero to use it: url("/assets/gyeongbokgung.jpg") */
.hero-art::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hero-photo, none);
  background-size: cover;
  background-position: center 62%;
  opacity: var(--hero-photo-opacity, 1);
}
.hero[style*="--hero-photo"] .hero-art::after {
  box-shadow: inset 0 0 200px 60px rgba(23, 20, 15, .9);
}

.hero-inner { max-width: var(--shell); margin: 0 auto; position: relative; }

.brand {
  margin: 0 0 46px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--hwang);
}

.today-label {
  margin: 0 0 6px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: #B9AE97;
}

.verdict {
  margin: 0;
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.045em;
}
.verdict-lead {
  display: block;
  font-size: clamp(19px, 3.4vw, 34px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--baek);
  margin-bottom: 6px;
}
#verdict-word {
  display: block;
  font-size: clamp(62px, 13.5vw, 148px);
  text-transform: uppercase;
}
#verdict-word.is-pending { color: #6E6754; }
#verdict-word.is-open   { color: #6FB98F; }
#verdict-word.is-closed { color: #E0705C; }

.verdict-detail {
  margin: 18px 0 0;
  font-size: clamp(16px, 2vw, 20px);
  color: #CFC5AE;
  max-width: 46ch;
}
.verdict-detail b { color: var(--baek); font-weight: 600; }

.chips {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(244, 239, 227, .18);
  background: rgba(244, 239, 227, .05);
  font-size: 13px; font-weight: 500;
  color: #CFC5AE;
}
.chip b { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip.open  .dot { background: #6FB98F; }
.chip.open  b    { color: #6FB98F; }
.chip.closed .dot { background: #E0705C; }
.chip.closed b    { color: #E0705C; }

.hook {
  margin: 34px 0 0;
  max-width: 56ch;
  font-family: var(--serif);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 300;
  line-height: 1.55;
  color: #C6BBA4;
  border-left: 2px solid var(--jangdan);
  padding-left: 20px;
}
.hook strong { color: var(--hwang); font-weight: 500; }
.hook em { font-style: italic; color: var(--baek); }

/* ─────────────────────────── PLANNER ─────────────────────────── */

.planner {
  background: var(--baek);
  border-bottom: 1px solid var(--rule-firm);
  padding: 0 0 56px;
}
.planner .shell { position: relative; }

.planner-title {
  margin: 0;
  padding-top: 42px;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700; letter-spacing: -.03em;
}
.planner-sub { margin: 8px 0 24px; color: var(--muted); font-size: 15px; }

.date-form {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-top: 4px solid var(--jangdan);
}
.field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; min-width: 165px; }
.field label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.field input {
  font-family: var(--sans); font-size: 17px; font-weight: 500;
  padding: 12px 14px;
  border: 1px solid var(--rule-firm);
  background: #fff; color: var(--ink);
  border-radius: 0;
  min-height: 48px;
}
.go {
  flex: 0 0 auto;
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 30px; min-height: 48px;
  background: var(--meok); color: var(--baek);
  border: 1px solid var(--meok); cursor: pointer;
  transition: background .14s ease;
}
.go:hover { background: var(--jangdan); border-color: var(--jangdan); }

.form-error {
  margin: 14px 0 0; padding: 12px 16px;
  background: #F6E4E0; border-left: 3px solid var(--jangdan);
  color: var(--jangdan-dk); font-size: 14px; font-weight: 500;
}

/* ─────────────────────────── RESULTS ─────────────────────────── */

.results:empty { display: none; }
.results { margin-top: 30px; }

.summary {
  padding: 20px 24px;
  background: var(--meok);
  color: var(--baek);
  margin-bottom: 4px;
}
.summary h3 {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.4vw, 23px); font-weight: 700; letter-spacing: -.025em;
}
.summary p { margin: 0; color: #C6BBA4; font-size: 14.5px; max-width: 62ch; }
.summary p b { color: var(--baek); font-weight: 700; font-variant-numeric: tabular-nums; }
.summary .hl { color: var(--hwang); font-weight: 600; }

/* dancheong rule — the recurring motif */
.dancheong { display: flex; height: 4px; }
.dancheong i { flex: 1; display: block; }
.dancheong i:nth-child(1) { background: var(--jangdan); }
.dancheong i:nth-child(2) { background: var(--hwang); }
.dancheong i:nth-child(3) { background: var(--noerok); }
.dancheong i:nth-child(4) { background: var(--samcheong); }
.dancheong i:nth-child(5) { background: var(--jangdan); }

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 16px 0 10px;
  font-size: 12px; color: var(--muted);
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend .sw { width: 11px; height: 11px; flex: none; }
.legend .sw.o { background: var(--noerok); }
.legend .sw.c { background: var(--jangdan); }
.legend .sw.m { background: var(--hwang); }

.day {
  display: grid;
  grid-template-columns: 178px 1fr;
  border: 1px solid var(--rule);
  border-top: none;
  background: var(--paper);
}
.day:first-of-type { border-top: 1px solid var(--rule); }
.day.is-notable { border-left: 4px solid var(--hwang); }
.day.all-closed { background: #FAF0EC; }

.day-head {
  padding: 15px 18px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
}
.day-date { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.day-weekday { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.day-holiday {
  margin-top: 4px; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  background: var(--hwang); color: var(--meok); padding: 3px 7px;
}

.day-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }

.pal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.pal {
  padding: 9px 10px;
  display: flex; flex-direction: column; gap: 3px;
  border-left: 3px solid;
  background: #fff;
  min-width: 0;
}
.pal .pn {
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pal .ps { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pal .ph { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pal.o { border-left-color: var(--noerok); }
.pal.o .ps { color: var(--noerok-dk); }
.pal.c { border-left-color: var(--jangdan); background: #FBF1EE; }
.pal.c .ps { color: var(--jangdan-dk); }

.note {
  font-size: 13px; line-height: 1.55;
  padding: 9px 12px;
  background: #FDF6E4;
  border-left: 3px solid var(--hwang);
  color: var(--ink-soft);
}
.note b { color: var(--ink); font-weight: 700; }
.note.neutral { background: var(--sunken); border-left-color: var(--rule-firm); }
.note.free { background: #E3EDE6; border-left-color: var(--noerok); }
.note.free b { color: var(--noerok-dk); }
.note + .note { margin-top: -4px; }

.provisional {
  margin: 14px 0 0; padding: 11px 15px;
  background: var(--baek-warm); border-left: 3px solid var(--rule-firm);
  font-size: 13px; color: var(--ink-soft);
}

/* ───────────────────── official-source disclaimer ───────────────────── */

.official {
  margin: 52px 0 0;
  max-width: 72ch;
  border: 1px solid var(--rule-firm);
  background: var(--paper);
}
.official .dancheong { height: 3px; }
.official-body { padding: 18px 22px; }
.official h3 {
  margin: 0 0 7px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--jangdan);
}
.official p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 68ch; }
.official p + p { margin-top: 9px; }
.official a {
  color: var(--samcheong); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--rule-firm);
}
.official a:hover { border-bottom-color: var(--samcheong); }


/* ─────────────────────────── EDITORIAL ─────────────────────────── */

.prose-wrap { padding: 64px 0 20px; }
.prose { max-width: 68ch; }
.prose h2 {
  margin: 52px 0 14px;
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 700; letter-spacing: -.03em;
  scroll-margin-top: 20px;
}
.prose h2:first-child { margin-top: 0; }
.prose p {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 18px; font-weight: 300; line-height: 1.68;
  color: var(--ink-soft);
}
.prose p strong { font-weight: 500; color: var(--ink); }
.prose p em { font-style: italic; }

.worked {
  margin: 26px 0 34px; padding: 22px 24px;
  background: var(--baek); border: 1px solid var(--rule-firm);
}
.worked figcaption {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--jangdan); margin-bottom: 14px;
}
.steps { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.steps li {
  padding: 10px 0; border-top: 1px solid var(--rule);
  font-size: 15px; color: var(--ink-soft); line-height: 1.5;
}
.steps li:first-child { border-top: none; padding-top: 0; }
.s-date {
  display: inline-block; min-width: 128px;
  font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
.steps b.ok { color: var(--noerok-dk); }
.steps b.no { color: var(--jangdan-dk); }
.worked-note {
  margin: 16px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 15px !important;
}

.table-scroll { overflow-x: auto; margin: 22px 0 34px; }
.ref { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 14px; }
.ref th {
  text-align: left; padding: 0 16px 10px 0;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--rule-firm);
}
.ref td {
  padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule);
  vertical-align: top; color: var(--ink-soft); line-height: 1.5;
}
.ref td b { color: var(--ink); display: block; font-size: 15px; }
.ref .ko { font-size: 12px; color: var(--muted); }

.shift-list { margin: 22px 0 34px; }
.shift-year {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 8px; border-bottom: 2px solid var(--rule-firm);
  margin-top: 26px;
}
.shift-year:first-child { margin-top: 0; }
.shift {
  display: grid; grid-template-columns: 150px 1fr; gap: 6px 20px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
}
.shift .sd { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.shift .sx { color: var(--ink-soft); line-height: 1.5; }
.shift .sx b { color: var(--jangdan-dk); font-weight: 700; }
.shift .sx i { font-style: normal; color: var(--noerok-dk); font-weight: 700; }

.faq { margin: 20px 0 34px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 15px 0;
  font-size: 16.5px; font-weight: 600; letter-spacing: -.015em;
  list-style: none; display: flex; align-items: baseline; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; color: var(--jangdan); font-weight: 700; font-size: 19px; flex: none;
}
.faq details[open] summary::before { content: "−"; }
.faq details p {
  margin: 0 0 16px; padding-left: 26px;
  font-size: 16.5px; line-height: 1.62;
}

.caveat {
  font-size: 15px !important;
  padding: 16px 18px; background: var(--baek-warm);
  border-left: 3px solid var(--rule-firm);
}

/* ───────────────────────────── FOOT ───────────────────────────── */

.foot {
  margin-top: 60px; padding: 34px 0 54px;
  background: var(--meok); color: #9C927E;
  font-size: 13.5px;
}
.foot p { margin: 0 0 10px; max-width: 66ch; line-height: 1.6; }
.foot-brand {
  color: var(--hwang); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; font-size: 12px;
}
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
.foot a { color: var(--baek); text-decoration: none; border-bottom: 1px solid rgba(244,239,227,.3); }
.foot a:hover { border-bottom-color: var(--hwang); }

/* calendar legend — carries the meaning once the cell text is hidden */
.prose p.cal-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin: -22px 0 34px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 500; line-height: 1.5;
  color: var(--muted);
}
.prose p.cal-key .k { display: inline-flex; align-items: center; gap: 7px; }
.prose p.cal-key .k::before {
  content: ""; width: 11px; height: 13px; flex: none; border-left: 3px solid;
}
.prose p.cal-key .o::before { border-color: var(--noerok); background: #fff; }
.prose p.cal-key .c::before { border-color: var(--jangdan); background: #FBF1EE; }
.prose p.cal-key .a::before { border-color: var(--hwang); background: #FDF6E4; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */

@media (max-width: 860px) {
  .pal-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .hero { padding: 26px 20px 130px; }


  .prose-wrap { padding-bottom: 0; }
  .official { margin-top: 38px; }
  .foot { margin-top: 34px; }
  .shell { padding: 0 20px; }
  .brand { margin-bottom: 30px; }
  .hook { margin-top: 26px; padding-left: 16px; }

  .day { grid-template-columns: 1fr; }
  .day-head {
    border-right: none; border-bottom: 1px solid var(--rule);
    flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap;
  }
  .day-holiday { margin-top: 0; }
  .pal-grid { grid-template-columns: repeat(2, 1fr); }
  .shift { grid-template-columns: 1fr; gap: 3px; }
  .s-date { min-width: 0; display: block; }
  .go { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══════════════ generated sub-pages (palace-month, closure dates) ═══════════════ */

.sub-bar {
  background: var(--meok); color: var(--baek);
  padding: 16px 0; border-bottom: 4px solid var(--jangdan);
}
.sub-bar .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sub-brand {
  color: var(--hwang); font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
}
.sub-cta {
  color: var(--baek); font-size: 13px; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid rgba(244,239,227,.35);
}
.sub-cta:hover { border-bottom-color: var(--hwang); }

body.sub .prose-wrap { padding-top: 44px; }
.crumb {
  font-size: 12px !important; font-family: var(--sans) !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px !important;
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--jangdan); }

.prose h1 {
  margin: 0 0 14px; font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800; letter-spacing: -.038em; line-height: 1.08; text-wrap: balance;
}
.lede {
  font-size: 19px !important; color: var(--ink) !important;
  font-weight: 400 !important; margin-bottom: 28px !important;
}

/* month calendar — pinned to seven columns so the weekday alignment is real */
.cal-scroll { overflow-x: auto; margin: 0 0 34px; }
.cal {
  display: grid; grid-template-columns: repeat(7, minmax(78px, 1fr));
  gap: 5px; min-width: 560px;
}
.g-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding: 0 0 4px 3px;
}
.g-pad { min-height: 58px; }
.g-day {
  padding: 9px 10px; display: flex; flex-direction: column; gap: 2px;
  border-left: 3px solid; background: #fff; min-height: 58px;
}
.g-n { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.g-s { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.g-day.o { border-left-color: var(--noerok); }
.g-day.o .g-s { color: var(--noerok-dk); }
.g-day.c { border-left-color: var(--jangdan); background: #FBF1EE; }
.g-day.c .g-s { color: var(--jangdan-dk); }
.g-day.alert { border-left-color: var(--hwang); background: #FDF6E4; }

.close-list { margin: 0 0 30px; padding: 0; list-style: none; }
.close-list li {
  padding: 12px 0; border-bottom: 1px solid var(--rule);
  font-size: 15.5px; color: var(--ink-soft); line-height: 1.55;
}
.close-list li b { color: var(--ink); font-weight: 700; }
.close-list .warn { color: var(--jangdan-dk); font-weight: 700; }

.cta-line { margin: 34px 0 0 !important; }
.cta {
  display: inline-block; text-decoration: none;
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 15px 28px; background: var(--meok); color: var(--baek);
}
.cta:hover { background: var(--jangdan); }

/* ═════════ sub-page responsive — must sit after the sub-page rules above,
   which are later in source order and would otherwise win ═════════ */

@media (max-width: 640px) {
  /* Seven columns that actually fit. The status word is dropped and the cell
     tint plus the legend carry the state, which keeps weekday alignment —
     the only reason to draw a calendar at all. */
  .cal-scroll { overflow-x: visible; }
  .cal { min-width: 0; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .g-day { padding: 7px 3px; min-height: 44px; border-left-width: 2px; align-items: center; }
  .g-pad { min-height: 44px; }
  .g-n { font-size: 14px; }
  .g-s {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .g-h { font-size: 9px; letter-spacing: .02em; padding: 0 0 4px; text-align: center; }
  .prose p.cal-key { margin-top: -24px; font-size: 11.5px; gap: 5px 14px; }

  .sub-bar .shell { gap: 10px; }
  .prose h1 { font-size: 27px; }
  .lede { font-size: 17px !important; }
}

/* very small phones: the reference table and shift rows still need room */
@media (max-width: 380px) {
  .g-n { font-size: 13px; }
  .g-h { font-size: 8.5px; }
  .cta { padding: 14px 20px; font-size: 13px; }
}

/* ═════════ site guides ═════════ */

.facts {
  display: grid; grid-template-columns: max-content 1fr; gap: 9px 22px;
  margin: 26px 0 8px; padding: 18px 22px;
  background: #fff; border-left: 4px solid var(--hwang); font-size: 15px;
}
.facts dt {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding-top: 3px;
}
.facts dd { margin: 0; color: var(--ink); line-height: 1.5; }

.ref.compact { min-width: 0; }
.ref.compact td b { display: inline; }
.prose h3 {
  margin: 30px 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}

.offers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin: 26px 0 8px;
}
.offer {
  background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--noerok);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
}
.offer h3 { margin: 0; font-size: 16px; }
.prose .offer p { margin: 0; font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1.55; }
.offer-cta {
  margin-top: auto; align-self: flex-start; padding-top: 4px;
  font-size: 14px; font-weight: 700; color: var(--noerok-dk);
  text-decoration: none; border-bottom: 1px solid currentColor;
}
.offer-cta:hover { color: var(--jangdan); }
.prose .offer-note {
  grid-column: 1 / -1; margin: 0; font-family: var(--sans);
  font-size: 12.5px; font-weight: 400; color: var(--muted);
}

.subscribe { background: var(--sunken); padding: 16px 20px; margin: 0 0 8px; }
.prose .subscribe p { margin: 0 0 8px; font-family: var(--sans); font-size: 14.5px; font-weight: 400; }
.prose .subscribe-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.subscribe-links a { font-weight: 700; }

.sources li { font-size: 14.5px; }

.guide-links { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; gap: 8px; }
.guide-links a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 14px 18px; background: #fff; border-left: 3px solid var(--jangdan);
  text-decoration: none; color: var(--ink-soft);
}
.guide-links a:hover { border-left-color: var(--hwang); }
.guide-links b { color: var(--ink); font-size: 16px; min-width: 9.5em; }
.guide-links span { font-size: 14px; }
.ref td b a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-firm); }

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; gap: 2px; padding: 14px 16px; }
  .facts dd { margin-bottom: 8px; }
  .guide-links b { min-width: 0; }
}