:root {
  --bg-page: #f6f2eb;
  --bg-sand: #eee7d5;
  --bg-cream: #fbf8f2;
  --bg-blush: #f6e2dc;
  --bg-mint-soft: #e4f1ea;
  --bg-gold-soft: #f5e6b8;
  --blue-700: #0f70cf;
  --blue-800: #0757a4;
  --blue-100: #eaf4ff;
  --green-700: #2e7d59;
  --green-100: #e9f6ef;
  --gold-700: #a87412;
  --gold-100: #fff3d7;
  --coral-700: #ef8b7f;
  --coral-100: #fff0ec;
  --purple-700: #7c63d8;
  --purple-100: #f1ebff;
  --text: #25405f;
  --text-soft: #63788d;
  --text-faint: #8fa1b1;
  --line: #e4ddd2;
  --surface: #ffffff;
  --surface-soft: #fffcf7;
  --shadow-card: 0 16px 40px rgba(46, 49, 63, 0.08);
  --shadow-hover: 0 22px 52px rgba(46, 49, 63, 0.12);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --container: min(1200px, calc(100vw - 32px));
  --header-height: 68px;
}

body {
  background: var(--bg-page);
  color: var(--text);
}
body[data-page='home'] { background: linear-gradient(180deg, #f3db73 0, #f5f2eb 320px, #f5f2eb 100%); }
body[data-page='book-fair'], body[data-page='school'], body[data-page='podcast'], body[data-page='podcast-detail'], body[data-page='challenge'], body[data-page='challenge-guide'], body[data-page='challenge-rewards'], body[data-page='app-redeem'], body[data-page='wall'], body[data-page='wall-detail'], body[data-page='preview'], body[data-page='bridge'] { background: var(--bg-sand); }
body[data-page='celebrities'] { background: #f3e1db; }

.page-main { padding-top: var(--header-height); }
.container { width: var(--container); }
section { padding: 72px 0; }
@media (max-width: 767px) { section { padding: 54px 0; } }

h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 4.8vw, 4.3rem); font-weight: 900; line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 900; line-height: 1.14; }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.2; }
p { color: var(--text-soft); line-height: 1.75; }
a { color: var(--blue-700); }
.small { color: var(--text-faint); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.section-head { gap: 10px; margin-bottom: 28px; }
.section-head--centered { text-align: center; justify-items: center; }
.section-head p { max-width: 720px; }
.kicker { background: var(--coral-100); color: var(--coral-700); font-size: 0.84rem; padding: 8px 14px; border-radius: 999px; }
.badge { min-height: 34px; border-radius: 999px; background: rgba(255,255,255,0.86); color: var(--text-soft); border: 1px solid rgba(0,0,0,0.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); }
.badge-outline { background: transparent; border: 1px solid var(--line); color: var(--text-soft); }

.site-header { background: rgba(255,255,255,0.94); border-bottom: 1px solid #e8e0d4; backdrop-filter: blur(16px); }
.site-header__inner { height: var(--header-height); grid-template-columns: max-content 1fr auto auto; gap: 16px; }
.site-brand--compact { width: auto; height: auto; overflow: visible; display: flex; align-items: center; }
.site-brand--compact img { display: block; width: auto; height: 56px; max-width: none; border-radius: 0; object-fit: contain; }
.site-nav { display: none; }
.site-nav a { min-height: 40px; padding: 0 14px; font-size: .95rem; font-weight: 800; color: var(--blue-700); }
.site-nav a[aria-current='page'], .site-nav a:hover { color: var(--blue-800); background: rgba(15,112,207,.08); }
.site-header__cta { display: none; min-height: 42px; padding: 0 16px; }
.mobile-nav-toggle { background: #fff; border: 1px solid var(--line); color: var(--blue-700); }
.mobile-panel { background: rgba(249,246,240,.98); }
.mobile-panel a { border: 1px solid #efe7da; box-shadow: none; }
@media (min-width: 1024px) { .site-nav, .site-header__cta { display: block; } .site-header__cta { display: inline-flex; } .mobile-nav-toggle,.mobile-panel { display:none; } }

.btn {
  min-height: 46px;
  border-radius: 999px;
  font-weight: 800;
  padding: 0 18px;
  box-shadow: 0 8px 22px rgba(15,112,207,0.08);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-primary { background: var(--blue-700); color: #fff; }
.btn-primary:hover { background: var(--blue-800); }
.btn-secondary { background: #fff; color: var(--blue-700); border: 1px solid #cfe2f8; }
.btn-secondary:hover { background: #f2f8ff; }
.btn-coral { background: var(--coral-700); color: #fff; }
.btn-coral:hover { background: #df7568; }
.btn-mint { background: #4ab69c; color: #fff; }
.btn-purple { background: var(--purple-700); color: #fff; }
.btn-outline-blue { background: transparent; border: 1px solid #b7d0ed; color: var(--blue-700); }
.btn-outline-pink { background: transparent; border: 1px solid #f4c4cf; color: #df6e91; }
.btn-white-pill { background: rgba(255,255,255,0.92); color: var(--coral-700); }
.btn-block { width: 100%; }
.btn-small { min-height: 38px; padding-inline: 14px; font-size: .9rem; }
.is-disabled, .btn.is-disabled { pointer-events: none; opacity: .42; filter: grayscale(.2); }

.card, .festival-card, .theme-spot-card, .latest-item-card, .bf-book-card, .bf-extra-book-card, .bf-person-card, .bf-platform-card, .bf-podcast-card, .episode-card, .reward-card, .wall-card, .celebrity-card, .step-card {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(221,211,198,0.85);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}
.card { padding: 24px; }
.card__meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 14px; }
.card__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top: 16px; }
.card__list { display:grid; gap:10px; color: var(--text-soft); }
.card__list li { padding-left: 1.2em; position: relative; }
.card__list li::before { content:'•'; position:absolute; left:0; color: var(--blue-700); }

.note-box, .state-banner {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid #efdcca;
  background: #fff9ef;
}
.state-banner--success { background: #eef8f2; border-color: #cfe7d7; }
.state-banner--warning { background: #fff7e8; border-color: #efd8a6; }
.state-banner--danger { background: #fff1ef; border-color: #efc7c0; }

.site-footer--festival {
  margin-top: 0;
  padding: 52px 0 18px;
  background: linear-gradient(180deg, #1876c9 0%, #1767b0 100%);
  color: rgba(255,255,255,0.92);
}
.site-footer__festival-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1.2fr repeat(3, 1fr);
}
.site-footer__brand-block, .site-footer__column { display:grid; gap: 10px; }
.site-footer__brand-block strong, .site-footer__column h4, .site-footer__unit { color:#fff; }
.site-footer__links--stack { display:grid; gap: 8px; }
.site-footer__links--stack a { color: rgba(255,255,255,.88); background: transparent; border: 0; padding: 0; min-height: auto; }
.site-footer__links--stack a:hover { color:#fff; }
.site-footer__socials { display:flex; gap: 12px; margin-top: 8px; }
.site-footer__socials span { width: 34px; height: 34px; display:grid; place-items:center; border-radius:999px; background: rgba(255,255,255,0.14); color:#fff; font-weight:700; }
.site-footer__meta-list { display:grid; gap: 6px; font-size:.93rem; }
.site-footer__bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.74); font-size: .88rem; }
@media (max-width: 1023px) { .site-footer__festival-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .site-footer__festival-grid { grid-template-columns: 1fr; } }

.center-hero, .page-hero {
  position: relative;
  overflow: hidden;
  padding: 36px 0 24px;
}
.center-hero::before, .page-hero::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
  pointer-events:none;
}
.center-hero--gold, .page-hero--gold { background: linear-gradient(180deg, #f4dc7a 0%, #efe7d2 100%); }
.center-hero--sand, .page-hero--sand { background: linear-gradient(180deg, #efe7d2 0%, #f6f1e7 100%); }
.center-hero--blush, .page-hero--blush { background: linear-gradient(180deg, #f4ddd8 0%, #f7ebe8 100%); }
.center-hero__inner, .page-hero__content--center {
  position:relative; z-index:1; display:grid; justify-items:center; gap: 16px; text-align:center;
}
.center-hero__inner--narrow, .hero-copy { max-width: 760px; margin-inline:auto; }
.hero-pill {
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background: rgba(255,255,255,.72); color: #8d6a36; font-size:.9rem; font-weight: 800; border:1px solid rgba(255,255,255,.65);
}
.center-hero__lead, .hero-copy p:first-of-type { font-size: 1.08rem; max-width: 720px; }
.center-hero__sub { color: #93a8b9; font-weight: 700; }
.hero-stat-row {
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.hero-stat-row span, .hero-stat-row a {
  min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border-radius:16px; background: rgba(255,255,255,.72); color: var(--text); font-weight:700; border:1px solid rgba(224,215,200,.8);
}
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

.home-hero-layout {
  padding: 26px 0 50px;
  background: linear-gradient(180deg, #f0d968 0%, #f4f1e7 54%, #f6f4f1 100%);
}
.home-hero-layout__inner { display:grid; gap:22px; justify-items:center; }
.hero-poster { width:min(100%, 1280px); border-radius: 26px; }
.hero-poster img { width:100%; display:block; }
.hero-poster__overlay { inset:auto 0 22px; }
.hero-poster h1 { max-width: 12ch; margin-inline:auto; font-size: clamp(2rem, 3.3vw, 3.7rem); }
.hero-poster__subline { color: #fff7f0; font-size: 1.04rem; }
.home-cta-row { gap: 12px; }
.home-section { padding: 78px 0; }
.home-section--white { background: #f7f7f5; }
.home-section--sand { background: #ece7d8; }
.home-section--soft-pink { background: #f7e7e2; }

.focus-strip, .home-focus-grid { display:grid; gap:16px; }
.home-focus-grid { grid-template-columns: repeat(1,minmax(0,1fr)); }
.focus-pill, .focus-card { display:flex; gap:14px; align-items:flex-start; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.92); border:1px solid #e6ddd1; box-shadow: var(--shadow-card); }
.focus-pill__date, .focus-card__date { min-width: 100px; justify-content:center; background: #f4f0e9; }
.focus-card__body h3 { color: var(--blue-700); margin-bottom: 6px; }
@media (min-width: 768px) { .home-focus-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.festival-overview-grid { display:grid; gap:18px; grid-template-columns: repeat(1,minmax(0,1fr)); }
@media (min-width: 768px) { .festival-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1100px) { .festival-overview-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
.festival-card { min-height: 260px; padding: 24px 20px 20px; display:grid; gap:16px; }
.festival-card__icon { width:48px; height:48px; border-radius:16px; font-size:1.1rem; }
.festival-card__body h3, .latest-column__head h3, .book-fair-group h3, .section-head h2, .celebrities-page-main h2, .book-fair-page-main h2, .home-page-main h2 { color: var(--blue-700); }
.festival-card__sub { color: var(--coral-700); font-weight:800; }
.festival-card__foot span { background:#f7f1ea; }

.theme-spot-grid { display:grid; gap:18px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width: 960px) { .theme-spot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.theme-spot-card { min-height: 236px; padding: 28px; }
.theme-spot-card h3 { color: var(--blue-700); }
.latest-columns { display:grid; gap:20px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .latest-columns { grid-template-columns: 1fr 1fr; } }
.latest-list { display:grid; gap:16px; }
.latest-item-card { padding: 18px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.latest-item-card__icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background: var(--purple-100); color: var(--purple-700); font-weight:900; }
.latest-item-card--video .latest-item-card__icon { background: var(--gold-100); color: var(--gold-700); }
.latest-item-card__eyebrow { color: var(--text-faint); font-size:.88rem; }
.latest-item-card__tag { margin-left:8px; display:inline-flex; padding:4px 10px; border-radius:999px; background:#ffe7ef; color:#df6e91; font-size:.75rem; }
.challenge-banner { padding: 28px; border-radius: 28px; background: linear-gradient(135deg, #fff5ea, #fff); border:1px solid #eadcc7; box-shadow: var(--shadow-card); display:grid; gap:20px; align-items:center; }
.challenge-banner__label { color: var(--coral-700); font-weight:900; margin-bottom:4px; }
.challenge-banner__actions { display:flex; flex-wrap:wrap; gap:12px; }
@media (min-width: 960px) { .challenge-banner { grid-template-columns: 1.1fr auto; } }

.theme-switch-bar { position: sticky; top: var(--header-height); z-index: 10; padding: 14px 0; background: rgba(255,250,243,.86); border-bottom:1px solid #e4ddd2; backdrop-filter: blur(12px); }
.tabs--wide { display:grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.tabs--wide button { min-height: 48px; border-radius: 999px; background: rgba(255,255,255,.8); border:1px solid #e3dccc; font-weight:800; color: var(--text-soft); padding: 0 18px; }
.tabs--wide button[aria-selected='true'] { background: var(--surface); border-color: transparent; color: var(--text); box-shadow: var(--shadow-card); }
@media (min-width: 900px) { .tabs--wide { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.book-fair-panel-section { padding-top: 16px 0 36px; }
.book-fair-theme-shell { display:grid; gap: 18px; }
.theme-highlight { padding: 22px 24px; min-height: auto; border-radius: 28px; border:1px solid rgba(255,255,255,.5); box-shadow: var(--shadow-card); }
.theme-highlight--sdgs { background: linear-gradient(135deg, #dcf3e4, #f9fff9); }
.theme-highlight--sports { background: linear-gradient(135deg, #fff0de, #fffdf9); }
.theme-highlight--mother-tongue { background: linear-gradient(135deg, #efebff, #fffdfd); }
.theme-highlight--awards { background: linear-gradient(135deg, #f7eed0, #fffdf7); }
.theme-highlight__tag { display:inline-flex; min-height:30px; align-items:center; padding:0 12px; border-radius:999px; background: rgba(255,255,255,.66); color: var(--gold-700); font-size:.78rem; font-weight:800; margin-bottom:10px; }
.book-fair-group { display:grid; gap: 10px; }
.book-fair-group__head { display:flex; justify-content:space-between; align-items:end; gap:14px; }
.book-fair-recommenders, .book-fair-podcast-grid, .book-fair-books-grid, .book-fair-extra-grid { display:grid; gap:18px; }
.book-fair-recommenders { grid-template-columns: repeat(1,minmax(0,1fr)); }
.book-fair-podcast-grid { grid-template-columns: repeat(1,minmax(0,1fr)); }
.book-fair-books-grid, .book-fair-extra-grid { grid-template-columns: repeat(1,minmax(0,1fr)); }
@media (min-width: 768px) { .book-fair-recommenders, .book-fair-podcast-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1100px) { .book-fair-books-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .book-fair-extra-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.bf-person-card, .bf-platform-card, .bf-podcast-card, .bf-extra-book-card, .bf-book-card { padding: 20px; }
.bf-platform-card { display:grid; place-items:center; text-align:center; gap:10px; }
.bf-platform-card__icon { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; background:#f5efe7; color: var(--text-soft); font-weight:900; }
.bf-person-card__header { display:grid; grid-template-columns: auto 1fr; gap: 14px; align-items:center; }
.bf-person-card__avatar, .person-card__avatar { width:64px; height:64px; border-radius:999px; overflow:hidden; background: linear-gradient(135deg,#ffd8c6,#f7ecd0); }
.bf-person-card__avatar img, .person-card__avatar img { width:100%; height:100%; object-fit:cover; }
.bf-person-card__role { display:inline-flex; min-height:26px; align-items:center; padding:0 10px; border-radius:999px; background:#e7f6ef; color: #2f8c66; font-size:.76rem; font-weight:800; margin-bottom:6px; }
.bf-podcast-card { display:grid; grid-template-columns: auto 1fr; gap: 14px; align-items:start; }
.bf-podcast-card__icon { width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background: var(--purple-100); color: var(--purple-700); font-weight:900; }
.bf-book-card { display:grid; gap:16px; padding:0; overflow:hidden; }
.bf-book-card__cover, .book-card__cover, .episode-card__cover, .reward-card__image, .wall-card .reward-card__image, .wall-layout .reward-card__image {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #fbefe6, #f9f7ef);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.bf-book-card__cover img, .book-card__cover img, .episode-card__cover img, .reward-card__image img, .wall-card .reward-card__image img, .wall-layout .reward-card__image img { width:100%; height:100%; object-fit:cover; }
.bf-book-card__content { padding: 0 18px 18px; display:grid; gap:10px; }
.bf-book-card__tags, .book-card__selector-tags, .celebrity-card__chips { display:flex; flex-wrap:wrap; gap:8px; }
.bf-book-card__tags span, .book-card__selector-tags span, .celebrity-card__chips span { display:inline-flex; min-height:26px; align-items:center; padding:0 10px; border-radius:999px; background:#fff4d7; color: var(--gold-700); font-size:.74rem; font-weight:800; }
.bf-book-card__quote { color: var(--text-soft); font-size:.95rem; }
.bf-book-card__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.bf-extra-book-card { min-height: 196px; }
.book-fair-group__desc { margin-top:-10px; }

.podcast-hero-grid, .episode-layout, .redeem-layout, .wall-layout, .reward-highlight, .split-layout { display:grid; gap: 22px; }
@media (min-width: 1024px) { .podcast-hero-grid, .redeem-layout { grid-template-columns: 1.15fr .85fr; } .episode-layout { grid-template-columns: minmax(0,1.1fr) 340px; align-items:start; } .wall-layout { grid-template-columns: .95fr 1.05fr; align-items:start; } .reward-highlight { grid-template-columns: minmax(0,1.1fr) .9fr; } .split-layout { grid-template-columns: minmax(0,1fr) 320px; } }
.podcast-intro-card { background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(253,247,239,.96)); }
.episode-card { display:grid; gap:16px; padding: 20px; }
.episode-card__cover { border-bottom: 1px solid #eee4d8; }
.episode-card__content { display:grid; gap:10px; }
.episode-card__number { color: var(--purple-700); font-size:.92rem; font-weight:800; }
.episode-card__links { display:flex; flex-wrap:wrap; gap:8px; margin-top: 8px; }
.audio-shell { padding: 18px; border-radius: 20px; background: linear-gradient(135deg,#eef7ff,#fff6f3); border:1px solid #dce9f6; }
.audio-shell audio { width:100%; }
.video-notice { position: sticky; top: calc(var(--header-height) + 18px); }

.social-banner-strip, .announcement-strip {
  padding: 0;
  background: linear-gradient(90deg, #f78669 0%, #f0cc35 100%);
}
.social-banner-strip__inner, .announcement-strip__inner {
  min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#fff; padding: 16px 0;
}
.social-banner-strip p, .announcement-strip p { color: rgba(255,255,255,.9); }
@media (max-width: 767px) { .social-banner-strip__inner, .announcement-strip__inner { flex-direction:column; align-items:flex-start; } }
.filter-pills, .filter-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 18px; }
.filter-pills button, .filter-row button { min-height: 40px; border-radius:999px; padding: 0 16px; font-weight:800; background: rgba(255,255,255,.8); border:1px solid #e6ddd0; color: var(--text-soft); }
.filter-pills button.is-active, .filter-row button.is-active { background: #2b644a; color:#fff; border-color:#2b644a; }
.celebrity-grid { display:grid; gap:18px; grid-template-columns: repeat(1,minmax(0,1fr)); }
@media (min-width: 768px) { .celebrity-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1200px) { .celebrity-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.celebrity-card { position:relative; overflow:hidden; padding:0; }
.celebrity-card__order { position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:999px; display:grid; place-items:center; background: rgba(82,73,68,.7); color:#fff; font-size:.82rem; font-weight:800; z-index:2; }
.celebrity-card__visual { position:relative; aspect-ratio: 16 / 9; display:block; background: linear-gradient(135deg,#d9cec7,#efe3de); border-bottom:1px solid #e7ddd4; overflow:hidden; }
.celebrity-card__visual::before { content:none; }
.celebrity-card__visual img { position:absolute; inset:0; z-index:1; width:100%; height:100%; max-width:none; object-fit:cover; }
.celebrity-card__date { position:absolute; left:18px; top:18px; z-index:2; min-height:32px; display:inline-flex; align-items:center; padding:0 12px; border-radius:999px; background: rgba(255,255,255,.88); color: #78675a; font-size:.82rem; font-weight:800; }
.celebrity-card__body { padding:18px; display:grid; gap:10px; }
.celebrity-card__book { padding:12px 14px; border-radius:14px; background:#fff8eb; color: var(--text-soft); font-size:.92rem; }
.steps-grid { display:grid; gap:18px; grid-template-columns: repeat(1,minmax(0,1fr)); }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.step-card { padding: 28px 22px; text-align:center; display:grid; gap:12px; justify-items:center; }
.step-card span { width:46px; height:46px; border-radius:999px; display:grid; place-items:center; background:#fff4d7; color: var(--gold-700); font-weight:900; }

.challenge-overview-grid, .reward-grid, .wall-grid, .school-grid { display:grid; gap:18px; grid-template-columns: repeat(1,minmax(0,1fr)); }
@media (min-width: 768px) { .challenge-overview-grid, .reward-grid, .wall-grid, .school-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1100px) { .challenge-overview-grid, .reward-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .wall-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .school-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.stat-grid { display:grid; gap:14px; grid-template-columns: repeat(1,minmax(0,1fr)); }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.stat-card { padding: 18px; border-radius: 20px; background: rgba(255,255,255,.92); border:1px solid #e6ddd0; box-shadow: var(--shadow-card); display:grid; gap:6px; }
.stat-card strong { font-size:1.5rem; color: var(--blue-700); }
.member-panel { display:grid; gap:16px; }
.member-panel__header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; }
.member-panel__coins { font-size: clamp(2.2rem,4vw,3.4rem); font-weight: 900; color: var(--blue-700); line-height:1; }
.redeem-prize-grid { display:grid; gap:16px; grid-template-columns: repeat(1,minmax(0,1fr)); }
@media (min-width: 768px) { .redeem-prize-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1280px) { .redeem-prize-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.form-grid { display:grid; gap:14px; }
.field { display:grid; gap:8px; }
.field label { font-weight:700; color: var(--text); }
.field input, .field textarea {
  width: 100%; min-height: 48px; border-radius: 14px; border:1px solid #dbd1c4; background:#fff; padding: 12px 14px; color: var(--text);
}
.field textarea { min-height: 48px; resize: vertical; }
.help { font-size:.86rem; color: var(--text-faint); }
.sticky-form { position:sticky; top: calc(var(--header-height) + 18px); }
.comment-list, .quote-list { display:grid; gap:14px; }
.comment-card, .quote { padding: 16px 18px; border-radius: 18px; background: #fffdf8; border:1px solid #eee4d7; }
.comment-card__meta { display:flex; justify-content:space-between; gap:12px; color: var(--text-faint); font-size: .88rem; margin-bottom: 8px; }
.empty-state { padding: 26px; border-radius: 20px; background: #fffaf1; border:1px dashed #e7d3b2; text-align:center; }

.bridge-shell { max-width: 860px; margin-inline:auto; padding: 56px 0 80px; }
.bridge-steps { display:grid; gap:12px; }
.bridge-steps li { padding:14px 16px; border-radius:16px; background:#fff; border:1px solid #e8dfd3; box-shadow: var(--shadow-card); }
.kv-grid { display:grid; gap:12px; grid-template-columns: repeat(1,minmax(0,1fr)); }
.kv-grid dt { font-size:.82rem; color: var(--text-faint); margin-bottom:4px; }
.kv-grid dd { color: var(--text); }
@media (min-width: 768px) { .kv-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.skeleton { border-radius: 20px; background: linear-gradient(90deg, rgba(235,228,218,.75), rgba(255,255,255,.95), rgba(235,228,218,.75)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton-lg { height: 320px; }
.skeleton-md { height: 180px; }
.skeleton-sm { height: 96px; }
.skeleton-xl { height: 520px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (max-width: 767px) {
  .hero-poster h1 { max-width: 16ch; }
  .hero-poster__overlay { inset: auto 0 14px; }
  .hero-poster__subline { font-size: .92rem; }
  .card, .festival-card, .theme-spot-card, .latest-item-card, .bf-person-card, .bf-platform-card, .bf-podcast-card, .bf-extra-book-card, .step-card { border-radius: 20px; }
  .home-section { padding: 62px 0; }
}

/* ===== visual alignment update: podcast / school / challenge ===== */
.hero-poster {
  border-radius: 0;
}
.hero-poster img {
  border-radius: 0;
}

body[data-page='podcast'] .section-head h2,
body[data-page='school'] .section-head h2,
body[data-page='challenge'] .section-head h2,
body[data-page='challenge-guide'] .section-head h2,
body[data-page='challenge-rewards'] .section-head h2,
body[data-page='app-redeem'] .section-head h2,
body[data-page='wall'] .section-head h2,
body[data-page='wall-detail'] .section-head h2,
body[data-page='podcast-detail'] .section-head h2 {
  color: var(--blue-700);
}

.festival-content-section {
  padding: 34px 0 76px;
}

.section-head--spaced {
  margin-top: 16px;
}

.intro-card-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 768px) {
  .intro-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.intro-card {
  min-height: 210px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.intro-card__eyebrow,
.school-info-card__eyebrow,
.challenge-entry-card__eyebrow {
  color: var(--coral-700);
  font-size: 0.84rem;
  font-weight: 800;
}

.intro-card--mint {
  background: linear-gradient(135deg, #eef8f2, #ffffff);
}

.intro-card--purple {
  background: linear-gradient(135deg, #f2eeff, #ffffff);
}

.intro-card--gold {
  background: linear-gradient(135deg, #fff6df, #ffffff);
}

.podcast-series-grid,
.school-grid,
.challenge-overview-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .podcast-series-grid,
  .school-grid,
  .challenge-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .podcast-series-grid,
  .school-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .challenge-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.episode-card--festival,
.school-info-card,
.challenge-entry-card {
  height: 100%;
}

.episode-card__cover,
.episode-card__image {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #faf0ea, #f7f4ec);
  border: 1px solid #e7ddd3;
}

.episode-card__cover img,
.episode-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.school-info-card {
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,253,249,0.95));
}

.school-info-card__kv .kv-grid,
.school-info-card__kv {
  gap: 10px;
}

.school-info-card__list li::before {
  color: var(--green-700);
}

.challenge-entry-card {
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,251,243,0.96));
}

.challenge-entry-card .btn,
.school-info-card .btn,
.episode-card--festival .btn {
  width: auto;
}

.bf-book-card__cover,
.book-card__cover,
.episode-card__cover,
.reward-card__image,
.wall-card .reward-card__image,
.wall-layout .reward-card__image {
  aspect-ratio: 1 / 1;
}

.celebrity-card__visual {
  aspect-ratio: 16 / 9;
}

@media (max-width: 767px) {
  .festival-content-section {
    padding: 28px 0 62px;
  }
}

.mobile-panel__extra .btn.btn-coral {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  padding: 0 18px;
  background: var(--coral-700);
  color: #fff;
  border-radius: 18px;
}

body[data-page='book-fair'] .book-fair-theme-shell > section {
  padding: 16px;
}

body[data-page='book-fair'] .book-fair-panel-section {
  padding: 16px 0 28px;
}

body[data-page='book-fair'] .book-fair-theme-shell {
  gap: 18px;
}

body[data-page='book-fair'] .book-fair-group {
  gap: 12px;
}

body[data-page='book-fair'] .theme-highlight {
  padding: 22px 24px;
  min-height: auto;
}

/* Podcast 單集頁新版補丁 */

body[data-page='podcast-detail'] section {
  padding: 0;
}

body[data-page='podcast-detail'] .center-hero {
  padding: 20px 0 20px;
}

body[data-page='podcast-detail'] .podcast-detail-content-section {
  padding: 0 0 20px;
}

body[data-page='podcast-detail'] .podcast-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

body[data-page='podcast-detail'] .podcast-detail-primary,
body[data-page='podcast-detail'] .podcast-detail-sidebar {
  min-width: 0;
}

body[data-page='podcast-detail'] .podcast-detail-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

body[data-page='podcast-detail'] .podcast-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

body[data-page='podcast-detail'] .podcast-detail-title {
  margin: 0 0 8px;
  font-size: clamp(1rem, 5vw, 4rem);
  line-height: 1.08;
  color: #1f456f;
}

body[data-page='podcast-detail'] .podcast-detail-desc {
  margin: 0 0 8px;
  color: #6c7784;
  line-height: 1.7;
}

body[data-page='podcast-detail'] .podcast-player-card {
  background: #f4f1eb;
  border: 1px solid rgba(65, 92, 123, 0.12);
  border-radius: 20px;
  padding: 18px 20px;
  display: grid;
  gap: 12px;
}

body[data-page='podcast-detail'] .podcast-player-card__label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  width: fit-content;
  padding: 0 12px;
  border-radius: 999px;
  background: #f7efe3;
  border: 1px solid #dfd2c1;
  color: #6f7b8a;
  font-size: 0.92rem;
  font-weight: 700;
}

body[data-page='podcast-detail'] .podcast-player-card audio {
  width: 100%;
}

body[data-page='podcast-detail'] .podcast-player-card__hint {
  margin: 0;
  font-size: 0.92rem;
  color: #6f7b8a;
}

body[data-page='podcast-detail'] .podcast-player-card__hint a {
  color: #1d72d8;
  text-decoration: underline;
}

body[data-page='podcast-detail'] .speaker-card,
body[data-page='podcast-detail'] .podcast-side-card,
body[data-page='podcast-detail'] .podcast-detail-group.card {
  background: #fff;
  border: 1px solid rgba(60, 87, 116, 0.1);
  border-radius: 24px;
  padding: 22px;
  box-shadow: none;
}

body[data-page='podcast-detail'] .speaker-card {
  display: grid;
  gap: 14px;
}

body[data-page='podcast-detail'] .speaker-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-page='podcast-detail'] .speaker-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #eef3f8;
}

body[data-page='podcast-detail'] .speaker-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page='podcast-detail'] .speaker-card__name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1f456f;
}

body[data-page='podcast-detail'] .speaker-card__role {
  color: #6f7b8a;
  line-height: 1.6;
}

body[data-page='podcast-detail'] .speaker-card__text,
body[data-page='podcast-detail'] .podcast-side-card p {
  margin: 0;
  color: #5f6c78;
  line-height: 1.8;
}

body[data-page='podcast-detail'] .speaker-card__actions,
body[data-page='podcast-detail'] .podcast-side-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page='podcast-detail'] .podcast-detail-group {
  display: grid;
  gap: 12px;
}

body[data-page='podcast-detail'] .podcast-detail-group + .podcast-detail-group {
  margin-top: 18px;
}

body[data-page='podcast-detail'] .section-heading {
  margin-bottom: 0;
}

body[data-page='podcast-detail'] .section-heading h2,
body[data-page='podcast-detail'] .section-heading h3 {
  margin: 0;
  color: #1f456f;
}

body[data-page='podcast-detail'] .podcast-detail-points {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: grid;
  gap: 12px;
}

body[data-page='podcast-detail'] .podcast-detail-points li {
  position: relative;
  padding-left: 1.4em;
  line-height: 1.8;
}

body[data-page='podcast-detail'] .podcast-detail-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f08a7a;
  transform: translateY(-50%);
}

body[data-page='podcast-detail'] .podcast-books-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body[data-page='podcast-detail'] .book-card {
  background: #fff;
  border: 1px solid rgba(60, 87, 116, 0.1);
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  box-shadow: none;
}

body[data-page='podcast-detail'] .book-card__cover {
  aspect-ratio: 1 / 1;
  background: #eef3ef;
  overflow: hidden;
}

body[data-page='podcast-detail'] .book-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page='podcast-detail'] .book-card__body {
  padding: 16px;
  display: grid;
  gap: 10px;
}

body[data-page='podcast-detail'] .book-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page='podcast-detail'] .book-card h3 {
  margin: 0;
  color: #1f456f;
  font-size: 1.2rem;
  line-height: 1.35;
}

body[data-page='podcast-detail'] .book-card__publisher,
body[data-page='podcast-detail'] .book-card__author,
body[data-page='podcast-detail'] .book-card__desc {
  margin: 0;
  color: #6d7884;
  line-height: 1.7;
}

body[data-page='podcast-detail'] .book-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

body[data-page='podcast-detail'] .pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
}

body[data-page='podcast-detail'] .pill-soft {
  background: #f4efe7;
  color: #6f7b8a;
  border: 1px solid #e1d7ca;
}

body[data-page='podcast-detail'] .pill-accent {
  background: #e9f4ff;
  color: #1d72d8;
  border: 1px solid #cde1f7;
}

@media (max-width: 1023px) {
  body[data-page='podcast-detail'] .podcast-detail-shell,
  body[data-page='podcast-detail'] .podcast-detail-hero-card {
    grid-template-columns: 1fr;
  }

  body[data-page='podcast-detail'] .podcast-books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body[data-page='podcast-detail'] .center-hero {
    padding: 20px 0 14px;
  }

  body[data-page='podcast-detail'] .podcast-detail-title {
    font-size: 2.1rem;
  }

  body[data-page='podcast-detail'] .podcast-books-grid {
    grid-template-columns: 1fr;
  }

  body[data-page='podcast-detail'] .speaker-card,
  body[data-page='podcast-detail'] .podcast-side-card,
  body[data-page='podcast-detail'] .podcast-detail-group.card {
    padding: 18px;
    border-radius: 20px;
  }
}
/* ===== book fair card alignment patch ===== */
body[data-page='book-fair'] .book-fair-books-grid {
  align-items: stretch;
}

body[data-page='book-fair'] .bf-book-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body[data-page='book-fair'] .bf-book-card__cover {
  flex-shrink: 0;
}

body[data-page='book-fair'] .bf-book-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 18px 18px;
}

body[data-page='book-fair'] .bf-book-card__tags {
  min-height: 34px;
  align-items: flex-start;
  margin-bottom: 12px;
}

body[data-page='book-fair'] .bf-book-card h4 {
  min-height: calc(1.45em * 2);
  margin: 0 0 10px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

body[data-page='book-fair'] .bf-book-card__content > p:not(.small):not(.bf-book-card__quote) {
  min-height: 1.75em;
  margin: 0 0 8px;
  line-height: 1.75;
}

body[data-page='book-fair'] .bf-book-card__content > p.small {
  min-height: calc(1.7em * 2);
  margin: 0 0 10px;
  line-height: 1.7;
  color: var(--text-soft);
}

body[data-page='book-fair'] .bf-book-card__quote {
  flex: 1;
  min-height: calc(1.8em * 4);
  margin: 0 0 16px;
  line-height: 1.8;
  color: var(--text-soft);
}

body[data-page='book-fair'] .bf-book-card__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

body[data-page='book-fair'] .bf-book-card__actions .btn {
  min-height: 42px;
}

@media (max-width: 767px) {
  body[data-page='book-fair'] .bf-book-card__quote {
    min-height: auto;
  }
}

/* ===== 數位童書展卡片：緊湊版對齊 ===== */
body[data-page='book-fair'] .book-fair-books-grid {
  align-items: stretch;
}

body[data-page='book-fair'] .bf-book-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body[data-page='book-fair'] .bf-book-card__cover {
  flex-shrink: 0;
}

body[data-page='book-fair'] .bf-book-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;                /* 原本太鬆，縮小區塊間距 */
  padding: 0 18px 16px;
}

/* 黃色膠囊區 */
body[data-page='book-fair'] .bf-book-card__tags {
  min-height: 28px;
  align-items: center;
  margin-bottom: 6px;
}

body[data-page='book-fair'] .bf-book-card__tags span {
  min-height: 24px;
  padding: 0 10px;
  font-size: 0.72rem;
}

/* 書名 */
body[data-page='book-fair'] .bf-book-card h4 {
  min-height: calc(1.35em * 2);
  margin: 0 0 4px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 出版社 */
body[data-page='book-fair'] .bf-book-card__content > p:not(.small):not(.bf-book-card__quote) {
  min-height: 1.5em;
  margin: 0 0 2px;
  line-height: 1.5;
}

/* 作 / 繪者 */
body[data-page='book-fair'] .bf-book-card__content > p.small {
  min-height: calc(1.5em * 2);
  margin: 0 0 6px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* 推薦語：保留彈性，但不要太鬆 */
body[data-page='book-fair'] .bf-book-card__quote {
  flex: 1;
  min-height: calc(1.6em * 3.5);
  margin: 0 0 10px;
  line-height: 1.6;
  color: var(--text-soft);
  font-size: 0.93rem;
}

/* 按鈕區固定到底 */
body[data-page='book-fair'] .bf-book-card__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

body[data-page='book-fair'] .bf-book-card__actions .btn {
  min-height: 40px;
  padding: 0 14px;
}

/* 手機版不要硬撐推薦語高度 */
@media (max-width: 767px) {
  body[data-page='book-fair'] .bf-book-card__quote {
    min-height: auto;
  }
}

body[data-page='book-fair'] .bf-book-card__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
/* 名人讀故事卡片三按鈕版 */
body[data-page='celebrities'] .celebrity-card__actions--stacked {
  display: grid;
  gap: 10px;
}

body[data-page='celebrities'] .celebrity-card__actions--stacked .btn {
  width: 100%;
}

/* ===== 名人讀故事按鈕：FunPark 風格版 ===== */
body[data-page='celebrities'] .celebrity-card__actions--stacked .btn {
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  box-shadow: none;
}

/* 1. 點我看影片：主按鈕 */
body[data-page='celebrities'] .celebrity-card__actions--stacked .btn-secondary {
  background: #4cb7b0;
  border: 1px solid #4cb7b0;
  color: #ffffff;
}

/* 2. 前往貼文留言抽獎：次按鈕 */
body[data-page='celebrities'] .celebrity-card__actions--stacked .btn-coral {
  background: #f6b7a8;
  border: 1px solid #f6b7a8;
  color: #ffffff;
}

/* 3. 試閱電子書：輕量按鈕 */
body[data-page='celebrities'] .celebrity-card__actions--stacked .btn-outline-blue {
  background: #ffffff;
  border: 1px solid #9fc9f3;
  color: #2f7ecb;
}

/* hover */
body[data-page='celebrities'] .celebrity-card__actions--stacked .btn-secondary:hover {
  background: #40aaa3;
  border-color: #40aaa3;
}

body[data-page='celebrities'] .celebrity-card__actions--stacked .btn-coral:hover {
  background: #f2aa99;
  border-color: #f2aa99;
}

body[data-page='celebrities'] .celebrity-card__actions--stacked .btn-outline-blue:hover {
  background: #f8fbff;
  border-color: #89bbea;
  color: #266fb5;
}

/* disabled 狀態 */
body[data-page='celebrities'] .celebrity-card__actions--stacked .btn.is-disabled,
body[data-page='celebrities'] .celebrity-card__actions--stacked .btn:disabled {
  background: #f4f1ee;
  border: 1px solid #e3dcd6;
  color: #b7aca3;
  cursor: not-allowed;
  opacity: 1;
}