/* PANDAO public course site — warm editorial paper theme (v2.3.0). */
:root {
  --folio-canvas: #f3eee4;
  --folio-paper: #fffdf8;
  --folio-paper-soft: #f8f2e8;
  --folio-ink: #20201e;
  --folio-body: #504b44;
  --folio-muted: #7e766b;
  --folio-line: #d8cebf;
  --folio-line-soft: #e8e0d4;
  --folio-gold: #aa7d32;
  --folio-gold-dark: #7a5822;
  --folio-gold-soft: #f2e7d3;
  --folio-red: #b94a40;
  --folio-red-dark: #94372f;
  --folio-red-soft: #f8e9e5;
  --folio-olive: #687056;
  --folio-plum: #765b63;
  --folio-shadow: 0 18px 48px rgba(63, 48, 29, 0.09);
  --folio-shadow-small: 0 10px 28px rgba(63, 48, 29, 0.07);
  --folio-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
  --folio-sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;

  /* Existing public components inherit the warm palette without touching admin. */
  --course-bg: var(--folio-canvas);
  --course-panel: var(--folio-paper);
  --course-panel-2: var(--folio-paper-soft);
  --course-ink: var(--folio-ink);
  --course-muted: var(--folio-muted);
  --course-line: var(--folio-line);
  --course-mint: var(--folio-gold);
  --course-red: var(--folio-red);
  --course-blue: var(--folio-olive);
  --course-purple: var(--folio-plum);
  --course-gold: var(--folio-gold);
  --detail-bg: var(--folio-canvas);
  --detail-panel: var(--folio-paper);
  --detail-panel-2: var(--folio-paper-soft);
  --detail-ink: var(--folio-ink);
  --detail-muted: var(--folio-muted);
  --detail-line: var(--folio-line);
  --detail-mint: var(--folio-gold);
  --detail-red: var(--folio-red);
  --detail-blue: var(--folio-olive);
  --detail-purple: var(--folio-plum);
}

html,
body,
body.home-page {
  color: var(--folio-body);
  background: var(--folio-canvas);
  font-family: var(--folio-sans);
}

body.home-page {
  background-image: none;
}

main { background: transparent; }

.home-page button:focus-visible,
.home-page a:focus-visible,
.home-page input:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline-color: rgba(170, 125, 50, 0.35);
}

/* Header and independent-page navigation */
.site-header,
.home-header {
  border-bottom-color: var(--folio-line);
  background: var(--folio-paper-soft);
}

.home-header .brand > .brand-descriptor {
  border-left-color: var(--folio-line);
  color: #665f56;
}

.site-header .site-menu > .site-menu-link,
.site-header .site-menu-group > summary,
.home-header .site-menu > .site-menu-link,
.home-header .site-menu-group > summary {
  color: #5e584f;
}

.site-header .site-menu > .site-menu-link:hover,
.site-header .site-menu-group > summary:hover,
.home-header .site-menu > .site-menu-link:hover,
.home-header .site-menu-group > summary:hover {
  color: var(--folio-ink);
}

.site-menu-link::after,
.site-menu-group > summary::after { background: var(--folio-gold); }

.site-menu-group > summary > span { color: var(--folio-gold-dark); }

.site-submenu {
  border-color: var(--folio-line);
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow-small);
}

.site-header .site-menu .site-submenu a {
  color: var(--folio-body);
}

.site-header .site-menu .site-submenu a:hover,
.site-header .site-menu .site-submenu a.is-current {
  color: var(--folio-ink);
  border-left-color: var(--folio-gold);
  background: var(--folio-gold-soft);
}

/* Home — editorial opening spread */
.home-hero {
  min-height: 660px;
  padding-top: 78px;
  padding-bottom: 82px;
  align-items: center;
}

.home-hero-glow { display: none; }

.home-hero-eyebrow,
.home-section-heading p,
.home-city-heading > div > p,
.course-roadmap > div > p,
.course-notice p,
.catalog-intro > p,
.my-course-intro > p,
.my-course-content-heading p {
  color: var(--folio-gold-dark);
  font-family: var(--folio-sans);
}

.home-hero h1,
.catalog-intro h1,
.my-course-intro h1,
.home-section-heading h2,
.home-city-heading h2,
.course-roadmap h2,
.course-notice h2,
.my-course-content-heading h2 {
  color: var(--folio-ink);
  font-family: var(--folio-serif);
  font-weight: 900;
  letter-spacing: -0.045em;
}

.home-hero h1 {
  max-width: 720px;
  font-size: clamp(50px, 5vw, 72px);
  line-height: 1.12;
}

.home-hero-summary,
.catalog-intro div > span,
.my-course-intro > span,
.catalog-intro > p,
.my-course-intro > p,
.my-course-content-heading p,
.home-section-heading > div > span,
.course-roadmap > div > span,
.course-notice > div > span,
.home-city-heading > p {
  color: var(--folio-muted);
}

.home-ability-strip {
  border-color: var(--folio-line);
}

.home-ability-strip span {
  color: var(--folio-ink);
}

.home-ability-strip span + span { border-left-color: var(--folio-line); }

.home-ability-strip b,
.home-ability-strip [data-track="naver"] b,
.home-ability-strip [data-track="team"] b,
.home-ability-strip [data-track="ai"] b {
  color: var(--folio-gold-dark);
  font-family: var(--folio-sans);
}

.home-trust-metrics > span { border-right-color: var(--folio-line); }
.home-trust-metrics b { color: var(--folio-ink); font-family: var(--folio-serif); }
.home-trust-metrics small { color: var(--folio-muted); }

.featured-course {
  border-color: #cdbb9c;
  border-radius: 2px;
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow);
}

.featured-course::before {
  height: 4px;
  background: var(--folio-red);
}

.featured-course-label {
  border-bottom-color: var(--folio-line-soft);
  color: var(--folio-muted);
  background: var(--folio-paper-soft);
  font-family: var(--folio-sans);
}

.featured-course-label b,
.featured-course-body > p { color: var(--folio-gold-dark); }

.featured-course-cover span {
  color: var(--folio-paper);
  background: rgba(32, 32, 30, 0.84);
}

.featured-course-body h2 {
  color: var(--folio-ink);
  font-family: var(--folio-serif);
}

.home-hero-meta { color: var(--folio-muted); }
.home-hero-meta span + span::before { color: var(--folio-line); }
.home-hero-actions > strong { color: var(--folio-red); font-family: var(--folio-serif); }

.home-primary,
.upcoming-reserve-button,
.course-notice > a,
.upcoming-reservation-dialog form > button {
  color: #fff;
  border-color: var(--folio-red);
  background: var(--folio-red);
  box-shadow: none;
}

.home-primary:hover,
.upcoming-reserve-button:hover,
.course-notice > a:hover,
.upcoming-reservation-dialog form > button:hover {
  color: #fff;
  background: var(--folio-red-dark);
}

.featured-course-secondary { border-top-color: var(--folio-line-soft); }

.featured-course-secondary a,
.featured-course-secondary button {
  color: var(--folio-body);
  border-color: var(--folio-line);
}

.featured-course-secondary a:hover,
.featured-course-secondary button:hover {
  color: var(--folio-red);
  border-color: var(--folio-red);
}

/* Home content — paper folio sections */
.home-section,
.learning-value,
.course-roadmap,
.course-notice,
.catalog-intro,
.catalog-route-tabs,
.my-course-main {
  background: transparent;
}

.learning-value {
  border-color: var(--folio-line);
}

.learning-value-grid article + article { border-left-color: var(--folio-line); }

.learning-value-grid span,
.learning-value-grid article:nth-child(2) span,
.learning-value-grid article:nth-child(3) span,
.learning-value-grid article:nth-child(4) span,
.learning-value-grid article:nth-child(5) span {
  color: var(--folio-gold-dark);
  font-family: var(--folio-sans);
}

.learning-value-grid h3 { color: var(--folio-ink); font-family: var(--folio-serif); }
.learning-value-grid p { color: var(--folio-muted); }

.course-roadmap ol { border-color: var(--folio-line); }
.course-roadmap li { border-color: var(--folio-line); background: rgba(255, 253, 248, 0.44); }
.course-roadmap li b,
.course-roadmap li[data-track="naver"] b,
.course-roadmap li[data-track="team"] b,
.course-roadmap li[data-track="ai"] b {
  color: var(--folio-gold-dark);
  font-family: var(--folio-sans);
}
.course-roadmap li strong { color: var(--folio-ink); font-family: var(--folio-serif); }
.course-roadmap li span { color: var(--folio-muted); }
.course-roadmap > a { color: var(--folio-red); }

.course-notice {
  border-color: #ccb991;
  background: var(--folio-gold-soft);
}

/* Course catalog cards */
.catalog-intro { border-bottom-color: var(--folio-line); }

.catalog-route-tabs {
  border-color: var(--folio-line);
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow-small);
}

.catalog-route-tabs a {
  color: var(--folio-body);
  border-color: var(--folio-line);
}

.catalog-route-tabs a::after { color: var(--folio-gold-dark); }

.catalog-route-tabs a:hover,
.catalog-route-tabs a.is-current {
  color: var(--folio-paper);
  background: var(--folio-gold-dark);
}

.catalog-route-tabs a.is-current::after { color: var(--folio-paper); }
.home-section-heading > strong { color: var(--folio-muted); }

.active-course-card {
  border-color: #c6ad7d;
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow);
}
.active-course-media { background: #f2ece3; }
.active-course-media::after { background: linear-gradient(180deg, transparent 60%, rgba(25, 36, 45, 0.38)); }
.active-course-media > span { color: var(--folio-paper); background: rgba(37, 47, 54, 0.82); }
.active-course-labels span { color: var(--folio-red); border-color: rgba(157, 42, 32, 0.34); background: var(--folio-red-soft); }
.active-course-labels span + span { color: var(--folio-gold-dark); border-color: rgba(139, 99, 31, 0.32); background: var(--folio-gold-soft); }
.active-course-body h3 { color: var(--folio-ink); font-family: var(--folio-serif); }
.active-course-summary { color: var(--folio-muted); }
.active-course-meta { border-color: var(--folio-line); }
.active-course-meta > div + div { border-color: var(--folio-line); }
.active-course-meta dt { color: var(--folio-gold-dark); }
.active-course-meta dd { color: var(--folio-ink); }
.active-course-action p > span { color: var(--folio-muted); }
.active-course-action strong { color: var(--folio-red); font-family: var(--folio-serif); }
.active-course-action > a { color: #fff; background: var(--folio-red); }

.course-mode-tabs { border-color: var(--folio-line); background: var(--folio-paper); }
.course-mode-tabs button { color: var(--folio-muted); border-color: var(--folio-line); }
.course-mode-tabs button:hover { color: var(--folio-red); border-color: var(--folio-red); }
.course-mode-tabs button[aria-pressed="true"] { color: #fff; border-color: var(--folio-gold-dark); background: var(--folio-gold-dark); }

.upcoming-card,
.home-course-card {
  border-color: var(--folio-line);
  border-radius: 2px;
  color: var(--folio-body);
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow-small);
}

.upcoming-card:hover,
.home-course-card:hover {
  border-color: #bda16f;
  box-shadow: var(--folio-shadow);
}

.upcoming-card::before,
.home-course-card::before,
.upcoming-card[data-track="naver"]::before,
.home-course-card[data-track="naver"]::before,
.upcoming-card[data-track="team"]::before,
.home-course-card[data-track="team"]::before,
.upcoming-card[data-track="ai"]::before,
.home-course-card[data-track="ai"]::before { background: var(--folio-gold); }

.upcoming-mode,
.upcoming-status,
.home-course-mode,
.home-course-status,
.home-course-issue {
  color: var(--folio-paper);
  border-color: rgba(255, 253, 248, 0.45);
  background: rgba(32, 32, 30, 0.84);
}

.upcoming-status,
.home-course-status { color: #f4dca8; }

.upcoming-number { color: var(--folio-muted); font-family: var(--folio-sans); }

.upcoming-track,
.home-course-track,
.upcoming-card[data-track="coupang"] .upcoming-track,
.home-course-card[data-track="coupang"] .home-course-track,
.upcoming-card[data-track="team"] .upcoming-track,
.home-course-card[data-track="team"] .home-course-track,
.upcoming-card[data-track="ai"] .upcoming-track,
.home-course-card[data-track="ai"] .home-course-track {
  color: var(--folio-gold-dark);
}

.upcoming-card h3,
.home-course-title {
  color: var(--folio-ink);
  font-family: var(--folio-serif);
}

.upcoming-detail,
.home-course-meta { color: var(--folio-muted); }
.upcoming-detail span + span::before,
.home-course-meta span + span::before { color: var(--folio-line); }

.upcoming-card-footer,
.home-course-footer { border-color: var(--folio-line-soft); }

.upcoming-card-footer strong,
.upcoming-card[data-track="naver"] .upcoming-card-footer strong,
.upcoming-card[data-track="team"] .upcoming-card-footer strong,
.upcoming-card[data-track="ai"] .upcoming-card-footer strong {
  color: var(--folio-red);
  font-family: var(--folio-serif);
}

.upcoming-card-footer span,
.home-course-footer small { color: var(--folio-muted); }
.home-course-footer b { color: var(--folio-ink); font-family: var(--folio-serif); }
.home-course-link { color: var(--folio-red); }

.upcoming-reserve-group,
.upcoming-expect-button { border-color: var(--folio-line); }
.upcoming-reserve-group small { color: var(--folio-muted); }
.upcoming-expect-button { color: var(--folio-body); background: var(--folio-paper-soft); }
.upcoming-expect-button:hover { color: var(--folio-red); border-color: var(--folio-red); }
.upcoming-expect-button[aria-pressed="true"] { color: var(--folio-red-dark); border-color: var(--folio-red); background: var(--folio-red-soft); }
.home-empty { color: var(--folio-muted); border-color: var(--folio-line); background: var(--folio-paper); }

/* City expectation below upcoming courses */
.home-city-expectation { border-top-color: var(--folio-line); }

.city-vote-route {
  border-color: #ccb991;
  background: var(--folio-gold-soft);
}

.city-vote-route span { color: var(--folio-paper); background: var(--folio-gold-dark); font-family: var(--folio-sans); }
.city-vote-route strong { color: var(--folio-ink); }
.city-vote-route b { color: var(--folio-gold); }
.city-vote-route small { color: var(--folio-muted); }

.city-vote-leader,
.city-vote-ballot,
.city-vote-board {
  border-color: var(--folio-line);
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow-small);
}

.city-vote-leader span { color: var(--folio-red); font-family: var(--folio-sans); }
.city-vote-leader strong,
.city-vote-section-title h3,
.city-rank-name,
.city-rank-probability { color: var(--folio-ink); }
.city-vote-leader small,
.city-vote-section-title span,
.city-rank,
.city-rank-votes { color: var(--folio-muted); }
.city-vote-leader > b { color: var(--folio-gold-dark); font-family: var(--folio-serif); }

.city-vote-option {
  color: var(--folio-body);
  border-color: var(--folio-line);
  background: var(--folio-paper-soft);
}
.city-vote-option:hover { color: var(--folio-red); border-color: var(--folio-red); }
.city-vote-option[aria-pressed="true"] { color: #fff; border-color: var(--folio-gold-dark); background: var(--folio-gold-dark); }
.city-vote-option small { color: var(--folio-muted); }
.city-vote-option[aria-pressed="true"] small { color: #efe4d2; }
.city-rank-track { background: var(--folio-line-soft); }
.city-rank-track i,
.city-vote-board li.is-leading .city-rank-track i { background: var(--folio-gold); }
.city-vote-board li.is-selected .city-rank-name,
.city-vote-status { color: var(--folio-red); }
.city-vote-note { color: var(--folio-muted); }

/* My courses */
.my-account-panel,
.my-course-content,
.my-course-page .my-course-entry-link,
.my-course-page .my-course-empty {
  border-color: var(--folio-line);
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow-small);
}

.my-account-panel > strong,
.my-account-panel p,
.my-course-entry-link small,
.my-course-empty p { color: var(--folio-muted); }
.my-account-panel > b,
.my-course-content-heading h2,
.my-course-entry-link strong,
.my-course-empty strong { color: var(--folio-ink); }
.my-account-panel a,
.my-course-content-heading > a,
.my-course-entry-link span,
.my-course-empty a { color: var(--folio-red); }
.my-course-content-heading { border-bottom-color: var(--folio-line); }
.my-course-bind { color: var(--folio-red); border-color: var(--folio-red); background: var(--folio-paper-soft); }

/* Course detail — balanced paper spread */
.detail-context {
  border-bottom-color: var(--folio-line);
}
.detail-context a { color: var(--folio-red); }
.detail-context span { color: var(--folio-muted); }

.hero.course-detail {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 68px 0 78px;
  grid-template-columns: minmax(0, 1.03fr) minmax(390px, 0.82fr);
  gap: clamp(52px, 6vw, 86px);
}

.eyebrow { color: var(--folio-gold-dark); }
.stage-badge { color: var(--folio-red); border-color: var(--folio-red); background: var(--folio-red-soft); }
.stage-badge[data-stage="feedback"] { color: var(--folio-gold-dark); border-color: var(--folio-gold); background: var(--folio-gold-soft); }
.stage-badge[data-stage="archived"] { color: var(--folio-muted); border-color: var(--folio-line); background: var(--folio-paper-soft); }

.hero h1 {
  color: var(--folio-ink);
  font-family: var(--folio-serif);
  font-size: clamp(46px, 4.6vw, 66px);
  letter-spacing: -0.05em;
}
.theme { color: var(--folio-red); font-family: var(--folio-serif); }
.subtitle { color: var(--folio-body); }

.history-proof { border-color: var(--folio-line); color: var(--folio-muted); }
.history-proof .proof-label,
.history-proof span:last-child { color: var(--folio-muted); }
.history-proof strong { color: var(--folio-ink); font-family: var(--folio-serif); }

.primary-action {
  color: #fff;
  border-color: var(--folio-red);
  background: var(--folio-red);
  box-shadow: 0 12px 28px rgba(185, 74, 64, 0.16);
}
.primary-action:hover { background: var(--folio-red-dark); box-shadow: 0 14px 32px rgba(185, 74, 64, 0.2); }

.course-facts { border-color: var(--folio-line); }
.course-facts div { border-color: var(--folio-line); background: rgba(255, 253, 248, 0.56); }
.course-facts dt { color: var(--folio-gold-dark); }
.course-facts dd { color: var(--folio-ink); }

.course-cover {
  border-color: #cdbb9c;
  border-radius: 2px;
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow);
}
.course-cover-meta {
  color: #f7f0e5;
  border-top-color: rgba(255, 255, 255, 0.18);
  background: rgba(32, 32, 30, 0.88);
}
.course-cover-meta span + span { border-left-color: rgba(255, 255, 255, 0.2); }
.course-cover-meta b { color: #f1cf8c; }

.attendance-meter {
  border-color: var(--folio-line);
  color: var(--folio-ink);
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow-small);
}
.attendance-meter div + div { border-left-color: var(--folio-line); }
.attendance-meter span,
.attendance-meter small { color: var(--folio-muted); }
.attendance-meter strong { color: var(--folio-ink); font-family: var(--folio-serif); }
.attendance-meter small { border-top-color: var(--folio-line-soft); }

/* Progress is a course journey, not a system dashboard. */
.progress-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 70px;
  color: var(--folio-body);
  border-top: 1px solid var(--folio-line);
  border-bottom: 1px solid var(--folio-line);
  background: transparent;
}

.section-heading p { color: var(--folio-gold-dark); }
.section-heading h2,
.compact-heading h2 { color: var(--folio-ink); font-family: var(--folio-serif); }

.progress-track {
  margin-top: 38px;
  padding: 24px 22px;
  border: 1px solid var(--folio-line);
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow-small);
}
.progress-track li { border-color: var(--folio-line); }
.progress-track li::after { background: var(--folio-line); }
.progress-marker { color: var(--folio-muted); border-color: var(--folio-line); background: var(--folio-paper); }
.progress-track strong { color: var(--folio-body); }
.progress-track small { color: var(--folio-muted); }
.progress-track li.is-complete .progress-marker { color: #fff; border-color: var(--folio-gold); background: var(--folio-gold); }
.progress-track li.is-complete::after { background: var(--folio-gold); }
.progress-track li.is-current .progress-marker { color: #fff; border: 4px solid #ecd9b8; background: var(--folio-red); box-shadow: 0 0 0 1px var(--folio-red); }
.progress-track li.is-current strong { color: var(--folio-ink); }
.progress-track li.is-current small { color: var(--folio-red); }

/* Replay access — a quiet course-material card, not a pasted QR screenshot. */
.replay-section {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  margin: 72px auto 0;
  padding: clamp(34px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 246px;
  align-items: center;
  gap: clamp(36px, 6vw, 82px);
  overflow: hidden;
  border: 1px solid var(--folio-line);
  border-left: 5px solid var(--folio-gold);
  background:
    linear-gradient(135deg, rgba(213, 180, 120, 0.12), transparent 44%),
    var(--folio-paper);
  box-shadow: var(--folio-shadow-small);
}
.replay-section[hidden] { display: none; }

.replay-copy { min-width: 0; }
.replay-eyebrow {
  margin: 0 0 15px;
  color: var(--folio-gold-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
}
.replay-copy h2 {
  max-width: 720px;
  margin: 0;
  color: var(--folio-ink);
  font-family: var(--folio-serif);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.22;
  letter-spacing: -0.035em;
}
.replay-copy > p:not(.replay-eyebrow) {
  margin: 18px 0 0;
  color: var(--folio-muted);
  font-size: 15px;
  line-height: 1.8;
}
.replay-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 22px;
}
.replay-action {
  min-width: 156px;
  min-height: 48px;
  padding: 0 19px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #fff;
  border: 1px solid var(--folio-red);
  background: var(--folio-red);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(185, 74, 64, 0.14);
}
.replay-action:hover { color: #fff; background: var(--folio-red-dark); }
.replay-action:focus-visible,
.replay-qr-card:focus-visible { outline: 3px solid rgba(185, 74, 64, 0.26); outline-offset: 4px; }
.replay-actions > span { color: var(--folio-muted); font-size: 12px; }

.replay-qr-card {
  width: 100%;
  padding: 14px 14px 16px;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--folio-ink);
  border: 1px solid var(--folio-line);
  background: #fffdf8;
  box-shadow: 0 13px 30px rgba(72, 55, 34, 0.09);
  transform: rotate(0.8deg);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.replay-qr-card:hover { color: var(--folio-red); transform: rotate(0deg) translateY(-2px); box-shadow: 0 17px 34px rgba(72, 55, 34, 0.13); }
.replay-qr-card > span { justify-self: start; color: var(--folio-gold-dark); font-size: 10px; font-weight: 800; letter-spacing: 0.18em; }
.replay-qr-card img { width: 100%; height: auto; aspect-ratio: 1; display: block; background: #fffdf8; }
.replay-qr-card small { color: var(--folio-muted); font-size: 11px; }

.course-body {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 78px 0 88px;
  grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.7fr);
  gap: 30px;
}

.agenda-panel,
.fit-panel {
  border: 1px solid var(--folio-line);
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow-small);
}
.agenda-list { border-top-color: var(--folio-line); }
.agenda-list li { border-bottom-color: var(--folio-line-soft); }
.agenda-list p { color: var(--folio-ink); }
.list-number { color: var(--folio-gold-dark); }
.includes { color: var(--folio-gold-dark); border-color: var(--folio-gold); background: var(--folio-gold-soft); }
.fit-panel { border-top: 4px solid var(--folio-gold); }
.fit-panel section + section { border-top-color: var(--folio-line); }
.aside-label { color: var(--folio-ink); font-family: var(--folio-serif); }
.fit-panel li { border-bottom-color: var(--folio-line-soft); }
.fit-panel li::before { border-color: var(--folio-gold); }
.fit-panel li p { color: var(--folio-body); }

.history-section,
.history-section.review-section {
  border-color: var(--folio-line);
  background: var(--folio-paper-soft);
}
.history-heading > span,
.review-score span,
.review-copy small,
.empty-history { color: var(--folio-muted); }
.review-list { border-top-color: var(--folio-line); }
.review-card { border-bottom-color: var(--folio-line); }
.review-score strong { color: var(--folio-red); font-family: var(--folio-serif); }
.review-copy p { color: var(--folio-ink); }

body > footer,
.home-footer { border-top-color: var(--folio-line); }
body > footer strong,
.footer-brand,
.footer-brand strong { color: var(--folio-ink); }
body > footer span,
.footer-brand small,
.home-footer nav a { color: var(--folio-muted); }
body > footer a,
.home-footer nav a:hover { color: var(--folio-red); }

/* Dialogs and notices */
dialog,
.upcoming-reservation-dialog,
.my-course-dialog {
  color: var(--folio-body);
  border-color: #cdbb9c;
  background: var(--folio-paper);
  box-shadow: 0 28px 80px rgba(63, 48, 29, 0.24);
}
dialog::backdrop,
.upcoming-reservation-dialog::backdrop,
.my-course-dialog::backdrop { background: rgba(55, 45, 34, 0.56); }
.sheet-dialog { border-top-color: var(--folio-red); }
.dialog-close { color: var(--folio-body); border-color: var(--folio-line); background: var(--folio-paper-soft); }
.dialog-eyebrow { color: var(--folio-gold-dark); }
.sheet-dialog h2,
.upcoming-reservation-dialog h2,
.my-course-dialog h2 { color: var(--folio-ink); font-family: var(--folio-serif); }
.dialog-lead,
.upcoming-reservation-copy { color: var(--folio-muted); }
.sheet-dialog label,
.sheet-dialog legend,
.upcoming-reservation-dialog label { color: var(--folio-body); }
.sheet-dialog input,
.sheet-dialog textarea,
.upcoming-reservation-dialog input {
  color: var(--folio-ink);
  border-color: var(--folio-line);
  background: var(--folio-paper-soft);
}
.registration-account-panel,
.privacy-check { border-color: var(--folio-line); background: var(--folio-paper-soft); }
.registration-account-panel > span { color: var(--folio-gold-dark); }
.registration-account-panel > strong { color: var(--folio-ink); }
.secondary-action { color: var(--folio-body); border-color: var(--folio-line); background: var(--folio-paper-soft); }
.registration-status dl,
.registration-status dl div + div { border-color: var(--folio-line); }
.registration-status dt { color: var(--folio-muted); }
.registration-status dd { color: var(--folio-ink); }
.rating-buttons button { color: var(--folio-body); border-color: var(--folio-line); background: var(--folio-paper-soft); }
.rating-buttons button[aria-pressed="true"] { color: #fff; border-color: var(--folio-red); background: var(--folio-red); }
.upcoming-reservation-dialog form > p { color: var(--folio-muted); }
.upcoming-reservation-dialog form > p.is-success { color: var(--folio-olive); }
.upcoming-reservation-dialog form > p.is-error { color: var(--folio-red); }

.invite-notice,
.loading-failure {
  color: var(--folio-ink);
  border-color: #cfb99a;
  background: var(--folio-paper);
  box-shadow: var(--folio-shadow);
}

.mobile-action {
  color: var(--folio-ink);
  border-top-color: var(--folio-line);
  background: rgba(255, 253, 248, 0.97);
}
.mobile-action span { color: var(--folio-red); }
.mobile-action button { color: #fff; background: var(--folio-red); }

@media (max-width: 1100px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr); gap: 44px; }
}

@media (max-width: 930px) {
  .home-hero { min-height: 0; grid-template-columns: 1fr; }
  .featured-course { width: min(660px, 100%); }
  .learning-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-value-grid article { border-bottom: 1px solid var(--folio-line); }
  .learning-value-grid article:nth-child(odd) { padding-left: 0; border-left: 0; }
  .home-course-card { grid-template-columns: 1fr; }
  .home-course-media { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 900px) {
  .hero.course-detail { grid-template-columns: 1fr; }
  .poster-column { width: min(680px, 100%); }
  .replay-section { grid-template-columns: minmax(0, 1fr) 218px; gap: 34px; }
  .course-body { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .home-header,
  .site-header { background: var(--folio-paper-soft); }

  .home-hero,
  .home-section,
  .learning-value,
  .course-roadmap,
  .course-notice,
  .catalog-intro,
  .catalog-route-tabs,
  .my-course-main,
  .detail-context,
  .hero.course-detail,
  .progress-section,
  .replay-section,
  .course-body,
  body > footer,
  .home-footer { width: min(100% - 28px, 1180px); }

  .home-hero { padding-top: 46px; padding-bottom: 58px; }
  .home-hero h1 { font-size: clamp(39px, 11.7vw, 52px); }
  .featured-course { box-shadow: var(--folio-shadow-small); }

  .learning-value-grid { grid-template-columns: 1fr; }
  .learning-value-grid article,
  .learning-value-grid article + article,
  .learning-value-grid article:nth-child(odd) {
    min-height: 0;
    padding: 24px 0;
    border-left: 0;
    border-bottom: 1px solid var(--folio-line);
  }

  .catalog-route-tabs { box-shadow: none; }
  .catalog-route-tabs a { border-color: var(--folio-line); }
  .course-roadmap li { background: var(--folio-paper); }

  .hero.course-detail { padding-top: 42px; padding-bottom: 54px; }
  .hero h1 { font-size: 40px; }
  .progress-section { padding: 52px 0 58px; }
  .progress-track { padding: 10px 16px; }
  .progress-track li { min-height: 76px; }
  .progress-track li::after { top: 47px; right: auto; bottom: -28px; left: 20px; width: 1px; height: auto; }
  .progress-track li:last-child::after { display: none; }
  .replay-section {
    margin-top: 46px;
    padding: 28px 20px 24px;
    grid-template-columns: 1fr;
    gap: 28px;
    border-left-width: 3px;
  }
  .replay-copy h2 { font-size: 30px; }
  .replay-actions { margin-top: 23px; align-items: flex-start; flex-direction: column; }
  .replay-action { width: 100%; }
  .replay-qr-card { width: min(230px, 100%); justify-self: center; transform: none; }
  .course-body { padding-top: 58px; padding-bottom: 68px; }
  .agenda-panel { padding: 24px 18px; }
  .history-section.review-section { padding-right: 14px; padding-left: 14px; }
}