/* PopKorn base styles — Lightstick Pop
   Brand palette is fixed by the brief. Colors live as tokens so a test's
   theme (bg, accent) can override them from JSON. */

:root {
  --ink: #3A2A22;
  --cream: #FFF8EF;
  --purple: #7655E8;
  --blue: #334DE6;
  --butter: #FFE36E;
  --pink: #F7A8B8;
  --red: #E2483D;
  --mint: #C9E89A;

  --bg: #FFFFFF;
  --page-bg: var(--theme-bg, var(--bg));
  --surface: #FFFFFF;
  --text: var(--ink);
  --muted: #6E5D55;
  --line: var(--ink);
  --accent: var(--theme-accent, var(--blue));
  --accent-text: var(--accent);
  --on-accent: #FFFFFF;
  --ok: var(--mint);
  --bad: var(--pink);

  --f-hand: "Plus Jakarta Sans", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif; /* titles: clean bold gothic */
  --f-body: "Nunito", "Gowun Dodum", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-logo: "Unbounded", "Nunito", system-ui, sans-serif;

  --r-lg: 28px;
  --r-md: 18px;
  --r-pill: 999px;
  --pop: 0 4px 0 var(--line);
  --pop-sm: 0 3px 0 var(--line);
  --wrap: 480px;
  --header-bg: var(--page-bg);

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1F1830;
    --page-bg: var(--bg);
    --surface: #2B2240;
    --text: #FFF8EF;
    --muted: #CFC3E8;
    --line: #FFF8EF;
    --accent-text: var(--butter);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1F1830;
  --page-bg: var(--bg);
  --surface: #2B2240;
  --text: #FFF8EF;
  --muted: #CFC3E8;
  --line: #FFF8EF;
  --accent-text: var(--butter);
}

*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* Header / footer — sticky bar, logo centered (poomang-style) */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--header-bg);
  border-bottom: 2px solid color-mix(in srgb, var(--line) 14%, transparent);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--header-bg); }
.site-header__bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 60px; }
.site-header__back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text); }
.site-header__back svg { width: 24px; height: 24px; }
.logo { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo img { width: 132px; height: auto; }
.page-home .logo img { width: 156px; }
.site-footer { margin-top: 56px; padding: 28px 0 36px; border-top: 3px dashed color-mix(in srgb, var(--line) 30%, transparent); font-size: 14px; color: var(--muted); }
.site-footer__tag { font-family: var(--f-hand); font-size: 22px; color: var(--text); margin: 0 0 10px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 700; color: var(--text); }
.site-footer small { display: block; margin-top: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 22px;
  border: 3px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  font-family: var(--f-body); font-weight: 700; font-size: 17px; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--pop);
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--butter { background: var(--butter); color: var(--ink); }
.btn--block { display: flex; width: 100%; }
.btn--xl { min-height: 60px; font-size: 19px; }
.btn--ghost { box-shadow: none; border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn--ghost:active { transform: none; box-shadow: none; }
.btn[disabled] { opacity: .6; cursor: default; }

/* Image placeholder (missing file) */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: #D9D6D2; color: #4A4440;
  font: 600 12px/1.3 ui-monospace, Menlo, Consolas, monospace;
  border-radius: inherit; padding: 6px; word-break: break-all; width: 100%; height: 100%;
}
.ph--sticker { border-radius: 12px; font-size: 8px; }

/* Home — poomang-style: logo bar / fixed main banner / category rolling row / Culture Korner */
.wrap--wide { max-width: 1120px; }
@media (min-width: 768px) { .wrap--wide { padding: 0 24px; } }

/* home header: logo left, tagline right */
.site-header--home .site-header__bar { grid-template-columns: auto 1fr; gap: 12px; }
.site-header--home .logo { grid-column: 1; justify-self: start; }
.site-header__tag { justify-self: end; margin: 0; font-family: var(--f-hand); font-weight: 700; font-size: 17px; line-height: 1.1; color: var(--muted); text-align: right; white-space: nowrap; }
@media (max-width: 359px) { .site-header__tag { display: none; } }
@media (min-width: 768px) { .site-header__tag { font-size: 22px; } .page-home .logo img { width: 176px; } }

/* 1. main banner (fixed, one slide) */
.hero-banner { margin: 0 -16px; }
.hero-banner__link { position: relative; display: block; text-decoration: none; color: var(--ink); }
.hero-banner__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #DCD6F7; }
.hero-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-banner__cta {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px;
  border: 3px solid var(--ink); border-radius: var(--r-pill); background: var(--butter); color: var(--ink);
  font-weight: 700; font-size: 17px; box-shadow: 0 3px 0 var(--ink);
}
.hero-banner__cta svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .hero-banner { margin: 16px 0 0; }
  .hero-banner__media { aspect-ratio: 3 / 1; border: 3px solid var(--line); border-radius: var(--r-lg); }
  .hero-banner__cta { left: 28px; bottom: 26px; font-size: 18px; }
}

/* layout placeholders (shown until real images exist) */
.box-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  width: 100%; height: 100%; padding: 12px; color: var(--ink);
  background: repeating-linear-gradient(135deg, rgba(58,42,34,.06) 0 10px, transparent 10px 20px), var(--ph-bg, #E4E0F5);
}
.box-ph__tag { padding: 2px 10px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: #FFFFFF; font-size: 12px; font-weight: 700; }
.box-ph__title { font-family: var(--f-hand); font-weight: 700; font-size: 22px; line-height: 1.05; max-width: 14ch; }
.box-ph__size { font: 600 11px/1.3 ui-monospace, Menlo, Consolas, monospace; opacity: .75; }
.box-ph--A { --ph-bg: #C9D5FF; }
.box-ph--B { --ph-bg: #FBCFD9; }
.box-ph--C { --ph-bg: #D7EFB5; }
.box-ph--banner { --ph-bg: #DCD6F7; }
.box-ph--banner { padding-bottom: 78px; }
.box-ph--banner .box-ph__title { font-size: 30px; max-width: 18ch; }
@media (min-width: 768px) { .box-ph--banner { padding-bottom: 12px; } }
.show-desktop { display: none; }
@media (min-width: 768px) { .show-desktop { display: inline; } .show-mobile { display: none; } }

/* 2. category tabs (underline style) + poster grid: one row collapsed, See all expands */
.cat { margin-top: 6px; }
.tabs {
  position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 10;
  display: flex; margin: 0 -16px; padding: 0 6px; overflow-x: auto; scrollbar-width: none;
  background: var(--page-bg); border-bottom: 2px solid color-mix(in srgb, var(--line) 14%, transparent);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: 1 0 auto; min-height: 50px; padding: 10px 10px;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-weight: 700; font-size: 15.5px; white-space: nowrap;
}
.tab::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -2px; height: 4px; border-radius: 4px; background: transparent; transition: background-color .15s ease; }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { background: var(--accent-tab, var(--ink)); }
.tab[data-filter="A"] { --accent-tab: var(--blue); }
.tab[data-filter="B"] { --accent-tab: #E0577A; }
.tab[data-filter="C"] { --accent-tab: #4E9B3A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab[data-filter="all"] { --accent-tab: var(--butter); } }
@media (min-width: 768px) { .tabs { margin: 0; padding: 0; } .tab { flex: 0 0 auto; padding: 10px 22px; font-size: 17px; } }

.posters {
  --cols: 3;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 14px 10px;
  margin: 18px 0 0; padding: 0; list-style: none;
}
@media (min-width: 600px) { .posters { --cols: 4; gap: 16px 14px; } }
@media (min-width: 960px) { .posters { --cols: 6; } }
.poster[hidden] { display: none; }
.cat:not(.is-expanded) .poster.is-over { display: none; }
.poster a, .poster > div { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 2.5px solid var(--line); background: var(--surface); text-decoration: none; transition: transform .12s ease; }
.poster a:active { transform: scale(.96); }
@media (hover: hover) { .poster a:hover { transform: translateY(-3px); } }
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster .box-ph { gap: 4px; padding: 8px 6px; }
.poster .box-ph__tag { font-size: 10px; padding: 1px 7px; }
.poster .box-ph__title { font-size: clamp(14px, 4.2vw, 21px); }
.poster .box-ph__size { font-size: 9px; }
.poster.is-in { animation: roll-in .42s cubic-bezier(.2,.9,.3,1.1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes roll-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.posters__empty { grid-column: 1 / -1; padding: 30px 0; text-align: center; color: var(--muted); }

.more-wrap { display: flex; justify-content: center; margin: 16px 0 0; }
.more-wrap[hidden] { display: none; }
.more-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 12px 8px 20px; border: 2.5px solid color-mix(in srgb, var(--line) 28%, transparent); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-weight: 700; font-size: 15px; cursor: pointer; }
.more-btn svg { width: 20px; height: 20px; transition: transform .2s ease; }
.more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* 3. Culture Korner (TYPE C guides): tinted panel, 1 featured + 2 */
.korner {
  margin: 34px -16px 0; padding: 22px 16px 26px;
  background: #EAF5DA; color: var(--ink);
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .korner { background: #24301E; color: var(--text); } }
:root[data-theme="dark"] .korner { background: #24301E; color: var(--text); }
@media (min-width: 768px) { .korner { margin: 40px 0 0; padding: 28px 28px 32px; border: 3px solid var(--line); border-radius: var(--r-lg); } }
.korner__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.korner__title { margin: 0; font-family: var(--f-hand); font-weight: 700; font-size: 34px; line-height: 1; }
.korner__title span { font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 28px; margin-right: 6px; }
.korner__sub { margin: 6px 0 0; font-size: 15px; font-weight: 700; opacity: .75; }
.korner__all { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 14px; color: inherit; }

.guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; list-style: none; margin: 0; padding: 0; }
.guide:first-child { grid-column: 1 / -1; }
@media (min-width: 768px) { .guides { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .guide:first-child { grid-column: auto; } }
.guide a, .guide > div { display: block; text-decoration: none; color: inherit; }
.guide__img { aspect-ratio: 16 / 9; border: 2.5px solid var(--ink); border-radius: var(--r-md); overflow: hidden; background: #FFFFFF; }
.guide__img img { width: 100%; height: 100%; object-fit: cover; }
.guide .box-ph__title { font-size: 17px; }
.guide:first-child .box-ph__title { font-size: 24px; }
.guide .box-ph__size { font-size: 10px; }
.guide__title { margin: 10px 2px 4px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.guide:first-child .guide__title { font-size: 19px; }
.guide__excerpt { margin: 0 2px; font-size: 14px; opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skel { display: block; height: 12px; margin: 9px 2px 0; border-radius: 6px; background: rgba(58,42,34,.14); }
.skel--title { height: 16px; width: 85%; margin-top: 12px; }
.skel--short { width: 55%; }

/* Static pages */
.prose { padding: 8px 0; }
.prose h1 { font-family: var(--f-hand); font-size: 40px; line-height: 1.05; margin: 18px 0 16px; }
.prose h2 { font-size: 20px; margin: 30px 0 8px; }
.prose p, .prose li { max-width: 68ch; }

/* GA4 debug drawer (only when config.debug is true) */
.pk-debug { margin-top: 18px; font: 12px/1.4 ui-monospace, Menlo, monospace; }
.pk-debug button { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid #3A2A22; background: #FFE36E; color: #3A2A22; font-weight: 700; cursor: pointer; }
.pk-debug ol { margin: 6px 0 0; padding: 8px 10px 8px 28px; max-height: 40vh; width: 100%; overflow: auto; background: #3A2A22; color: #FFF8EF; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Thumbnail: one character + text (card 4:5 / banner 3:2·3:1 / cover 4:3) ---------- */
.thumb {
  position: relative; container-type: inline-size; overflow: hidden;
  width: 100%; height: 100%; color: var(--ink);
  background:
    radial-gradient(circle at 50% 118%, rgba(255,255,255,.75) 0 34%, transparent 34.5%),
    radial-gradient(rgba(58,42,34,.07) 1.4px, transparent 1.6px) 0 0 / 14px 14px,
    var(--thumb-bg, #FFE7A3);
}
.thumb__title { margin: 0; font-family: var(--f-hand); font-weight: 700; line-height: .98; letter-spacing: -.01em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thumb__hook { margin: 0; font-family: var(--f-body); font-weight: 700; line-height: 1.2; opacity: .82; }
.thumb__chip {
  display: inline-block; white-space: pre; 
  border: 2px solid var(--ink); border-radius: 999px; background: #FFFFFF; color: var(--ink);
  font-family: var(--f-body); font-weight: 700; line-height: 1;
}
.thumb__char { position: absolute; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.thumb__char img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.thumb__emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; }

/* card 4:5 — title top, hook below, character bottom-center, chip bottom-left */
.thumb--card { aspect-ratio: 4 / 5; }
.thumb--card .thumb__text { position: static; padding: 9% 8% 0; text-align: center; }
.thumb--card .thumb__title, .thumb--card .thumb__hook { position: relative; z-index: 2; }
.thumb--card .thumb__title { font-size: clamp(14px, 14.5cqw, 30px); }
.thumb--card .thumb__hook { margin-top: 4%; font-size: clamp(9.5px, 7.2cqw, 14px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thumb--card .thumb__chip { position: absolute; z-index: 3; left: 6%; bottom: 5%; padding: 3px 7px; font-size: clamp(8.5px, 6.2cqw, 12px); border-width: 1.5px; }
.thumb--card .thumb__char { left: 14%; right: 14%; bottom: -2%; height: 58%; }
.thumb--card .thumb__emoji { font-size: 40cqw; }

/* banner — text left, character right, Play now button */
.thumb--banner, .thumb--cover { display: grid; grid-template-columns: 56% 44%; align-items: center; }
.thumb--banner .thumb__text, .thumb--cover .thumb__text { position: relative; z-index: 2; padding: 0 0 0 6%; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4cqw; }
.thumb--banner .thumb__title, .thumb--cover .thumb__title { font-size: clamp(24px, 8.6cqw, 72px); -webkit-line-clamp: 3; }
.thumb--banner .thumb__hook, .thumb--cover .thumb__hook { font-size: clamp(12px, 3.7cqw, 22px); }
.thumb--banner .thumb__chip, .thumb--cover .thumb__chip { padding: 4px 10px; font-size: clamp(11px, 3.4cqw, 16px); }
.thumb--banner .thumb__char, .thumb--cover .thumb__char { right: 1%; bottom: 0; width: 45%; height: 90%; }
.thumb--banner .thumb__emoji, .thumb--cover .thumb__emoji { font-size: 30cqw; }
.thumb__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 1cqw;
  min-height: 36px; padding: 6px 16px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--butter); color: var(--ink); font-family: var(--f-body); font-weight: 700; font-size: clamp(14px, 3.9cqw, 19px);
  box-shadow: 0 3px 0 var(--ink);
}
.thumb__cta svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .thumb--banner { grid-template-columns: 58% 42%; }
  .thumb--banner .thumb__text { padding-left: 6%; gap: 1.4cqw; }
  .thumb--banner .thumb__title { font-size: clamp(36px, 5.6cqw, 72px); -webkit-line-clamp: 2; }
  .thumb--banner .thumb__hook { font-size: clamp(16px, 1.9cqw, 24px); }
  .thumb--banner .thumb__chip { font-size: clamp(13px, 1.4cqw, 16px); }
  .thumb--banner .thumb__char { right: 8%; width: 30%; height: 96%; }
  .thumb--banner .thumb__emoji { font-size: 15cqw; }
}
.hero-banner__media .thumb { position: absolute; inset: 0; }

/* Replaced thumbnail: designer image instead of the auto layout */
.thumb.has-image { background: var(--thumb-bg, #FFE7A3); }
.thumb__img { position: absolute; inset: 0; z-index: 0; }
.thumb__img img, .thumb__img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb.has-image .thumb__text { z-index: 2; }
.thumb.has-image:not(.no-text) .thumb__title, .thumb.has-image:not(.no-text) .thumb__hook { text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 0 10px rgba(255,255,255,.6); }
.thumb.no-text .thumb__text { position: absolute; inset: 0; padding: 0; display: block; }
.thumb--card.no-text .thumb__chip { left: 6%; bottom: 5%; }
.thumb--banner.no-text .thumb__chip, .thumb--cover.no-text .thumb__chip { position: absolute; left: 4%; top: 6%; }
.thumb--banner.no-text .thumb__cta { position: absolute; left: 4%; bottom: 8%; margin: 0; }

/* Long titles (23+ chars): smaller, up to 3 lines */
.thumb--long.thumb--card .thumb__title { font-size: clamp(13px, 12.2cqw, 25px); -webkit-line-clamp: 3; }
.thumb--long.thumb--card .thumb__hook { margin-top: 3%; }
.thumb--long.thumb--card .thumb__char { height: 52%; }
.thumb--long.thumb--banner .thumb__title, .thumb--long.thumb--cover .thumb__title { font-size: clamp(22px, 7.4cqw, 64px); }
@media (min-width: 768px) { .thumb--long.thumb--banner .thumb__title { font-size: clamp(32px, 4.8cqw, 64px); } }

/* Image cards: compact "2 min" chip tucked in the corner so it doesn't cover the art */
.thumb--card.has-image .thumb__chip-q { display: none; }
.thumb--card.has-image .thumb__chip { left: 4%; bottom: 3.5%; padding: 2px 6px; font-size: clamp(8px, 5.6cqw, 11px); }
.nw { white-space: nowrap; }

/* ---------- Rolling main banner (image + one-line title + hook + chip + Play now) ---------- */
.hero-banner--rolling { position: relative; }
.rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; container-type: inline-size;
  aspect-ratio: 3 / 2; overflow: hidden; display: block; text-decoration: none; color: var(--ink); background: var(--slide-bg);
}
.slide__img { position: absolute; inset: 0; }
.slide__img img { width: 100%; height: 100%; object-fit: cover; }
.slide__text {
  position: absolute; z-index: 2; left: calc(6% + var(--pad-l, 0%)); right: calc(6% + var(--pad-l, 0%)); top: var(--top, 11%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2.4cqw;
}
.slide__title {
  display: block; max-width: 100%; white-space: nowrap; overflow: hidden;
  font-family: var(--f-hand); font-weight: 700; line-height: 1.02; font-size: 9.2cqw;
  text-shadow: 0 2px 0 #FFFFFF, 0 0 12px rgba(255,255,255,.9);
}
.slide__title.is-wrap { white-space: normal; text-wrap: balance; line-height: 1.02; }
.slide__actions {
  position: absolute; z-index: 3; left: 50%; top: var(--btn-top, 63%); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.slide__actions .thumb__chip { box-shadow: 0 2px 0 var(--ink); }
.slide__actions .thumb__cta { margin: 0; }
.slide__hook { font-weight: 700; font-size: clamp(13px, 3.8cqw, 22px); line-height: 1.25; max-width: 30ch; text-shadow: 0 0 8px rgba(255,255,255,.95); }
.slide .thumb__chip { padding: 4px 10px; font-size: clamp(11px, 3.3cqw, 16px); }
.slide .thumb__cta { margin-top: .6cqw; }
.rail__count {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 4px 12px; border-radius: 999px;
  background: rgba(58,42,34,.72); color: #FFFFFF; font-weight: 700; font-size: 14px; letter-spacing: .02em; pointer-events: none;
}
@media (min-width: 768px) {
  .hero-banner--rolling { margin: 16px 0 0; border: 3px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
  .slide { aspect-ratio: 3 / 1; }
  /* Desktop: picture on the right half (keeps its 3:2 shape), text on the left panel */
  .slide__img { left: auto; width: 50%; }
  .slide__img::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 18%; z-index: 1; background: linear-gradient(90deg, var(--slide-bg), transparent); }
  /* Desktop: text + buttons flow in one column on the left half, vertically centered — nothing can overlap */
  .slide__body { position: absolute; z-index: 2; left: 5%; right: 52%; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1.8cqw, 22px); }
  .slide__text { position: static; transform: none; gap: clamp(6px, 1.1cqw, 14px); }
  .slide__actions { position: static; transform: none; align-self: center; }
  .slide .thumb__cta { min-height: 40px; padding: 6px 16px; font-size: clamp(14px, 1.6cqw, 18px); }
  .slide__actions { gap: 12px; }
  .slide--nofade .slide__img::before { display: none; }
  .slide__title { font-size: 5.2cqw; }
  .slide__hook { font-size: clamp(15px, 1.7cqw, 21px); }
  .slide .thumb__chip { font-size: clamp(12px, 1.3cqw, 15px); }
  .rail__count { right: 16px; bottom: 14px; }
}

/* Extra-long titles (35+ chars) on cards: smaller, up to 4 lines; on tiny cards hide the hook and the manual break */
.thumb--xlong.thumb--card .thumb__title { font-size: clamp(11px, 9.6cqw, 22px); -webkit-line-clamp: 4; line-height: 1.02; }
.thumb--xlong.thumb--card .thumb__hook { font-size: clamp(9px, 6.4cqw, 13px); }
.thumb--xlong.thumb--card .thumb__char { height: 48%; }
@container (max-width: 150px) {
  .thumb--xlong.thumb--card .thumb__hook { display: none; }
  .thumb--xlong.thumb--card .tb { display: none; }
  .thumb--xlong.thumb--card .thumb__title { font-size: 11.4cqw; }
}

/* banner_fit: "cover" — on desktop the picture fills the whole banner (for images with an empty left side) */
@media (min-width: 768px) {
  .slide--cover .slide__img { left: 0; width: 100%; }
  .slide--cover .slide__img::before { display: none; }
  .slide--cover .slide__img img { object-position: right center; }
}

/* ---------- Card readability pass (mobile first) ---------- */
.thumb--card .thumb__title { font-size: clamp(16px, 17.5cqw, 34px); line-height: .96; letter-spacing: 0; color: #2E211B; }
.thumb--long.thumb--card .thumb__title { font-size: clamp(14px, 14.2cqw, 28px); }
.thumb--xlong.thumb--card .thumb__title { font-size: clamp(12px, 11.6cqw, 24px); }
.thumb--card .thumb__text { padding-top: 10%; }
.thumb--card .thumb__char { height: 50%; left: 18%; right: 18%; }
.thumb--long.thumb--card .thumb__char, .thumb--xlong.thumb--card .thumb__char { height: 44%; }
.thumb--card .thumb__hook { color: #3A2A22; opacity: 1; }
/* On small (phone) cards the hook would be ~9px — hide it so the title stays readable */
@container (max-width: 150px) {
  .thumb--card .thumb__hook { display: none; }
  .thumb--xlong.thumb--card .thumb__title { font-size: 12.2cqw; }
  .thumb--card .thumb__chip { font-size: 9px; padding: 2px 6px; left: 5%; bottom: 4%; }
}
.thumb--card .thumb__title { -webkit-line-clamp: 3; }
.thumb--xlong.thumb--card .thumb__title { -webkit-line-clamp: 4; }
@container (min-width: 151px) {
  .thumb--card .thumb__text { padding-top: 8%; }
  .thumb--card .thumb__char, .thumb--long.thumb--card .thumb__char, .thumb--xlong.thumb--card .thumb__char { height: 40%; bottom: -3%; }
  .thumb--card .thumb__hook { margin-top: 3%; -webkit-line-clamp: 2; }
}

/* Title emphasis: key phrase bigger + heavier; lead-in smaller on its own line */
.thumb__title .kw { font-weight: 700; font-size: 1.16em; -webkit-text-stroke: .045em currentColor; paint-order: stroke fill; letter-spacing: .01em; }
.thumb__title .tsm { display: block; font-size: .74em; line-height: 1.1; margin-bottom: .14em; opacity: .9; }

/* ---------- White base (poomang-like) ---------- */
.site-header { border-bottom-color: #EEEEEE; }
.tabs { border-bottom-color: #EEEEEE; }
/* Culture Korner: no panel — plain section on the white page, big heading kept */
.korner, :root[data-theme="dark"] .korner { margin: 40px 0 0; padding: 0; background: none; border: 0; border-radius: 0; color: inherit; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .korner { background: none; } }
@media (min-width: 768px) { .korner { margin: 48px 0 0; padding: 0; border: 0; } }

/* Titles in clean gothic: slightly tighter tracking, comfortable line height */
.hero__title, .section-title, .slide__title, .thumb__title, .korner__title, .cover__title, .gtitle, .gcard__title, .gbefore__title, .gquiz__title, .gcta__title,
.rcard__name, .rcard__level, .rcard__pct, .rcard__h, .minicard__name, .cheat__title, .share__title, .answers__sum, .reveal__text, .qcard__text, .qcard__badge,
.tip__verdict, .challenge-banner p, .next__label, .powers b, .site-footer__tag { letter-spacing: -.02em; font-weight: 800; }
.qcard__text { line-height: 1.22; font-weight: 700; }
.rcard__name, .gtitle, .cover__title, .korner__title { line-height: 1.12; }
.slide__title { line-height: 1.08; }
.slide__title.is-wrap { line-height: 1.08; }
.site-footer__tag { font-weight: 700; font-size: 18px; }

/* ---------- Thumbnail style variants ---------- */
/* icon: no mascot — one topic sticker, title gets more room */
.thumb--style-icon { background: var(--thumb-bg, #FFE7A3); }
.thumb--style-icon .thumb__icon { position: absolute; right: 7%; bottom: 6%; width: 34%; aspect-ratio: 1; transform: rotate(-8deg); }
.thumb--style-icon .thumb__icon img { width: 100%; height: 100%; }
.thumb--card.thumb--style-icon .thumb__title { font-size: clamp(17px, 19cqw, 38px); }
.thumb--card.thumb--long.thumb--style-icon .thumb__title { font-size: clamp(15px, 15.5cqw, 31px); -webkit-line-clamp: 4; }
.thumb--card.thumb--xlong.thumb--style-icon .thumb__title { font-size: clamp(13px, 13cqw, 26px); -webkit-line-clamp: 5; }
.thumb--card.thumb--style-icon .thumb__text { text-align: left; padding: 11% 9% 0; }
/* type: typography poster — big left-aligned title, keyword on a marker, nothing else */
.thumb--style-type { background: var(--thumb-bg, #FFE7A3); }
.thumb--card.thumb--style-type .thumb__text { text-align: left; padding: 12% 9% 0; }
.thumb--card.thumb--style-type .thumb__title { font-size: clamp(18px, 21cqw, 42px); -webkit-line-clamp: 5; line-height: 1.04; }
.thumb--card.thumb--long.thumb--style-type .thumb__title { font-size: clamp(16px, 16.5cqw, 34px); }
.thumb--card.thumb--xlong.thumb--style-type .thumb__title { font-size: clamp(13px, 13.6cqw, 28px); -webkit-line-clamp: 6; }
.thumb--style-type .thumb__title .kw { background: linear-gradient(transparent 55%, rgba(255,255,255,.85) 55%); -webkit-text-stroke: 0; padding: 0 .06em; }
.thumb--style-type .thumb__title .kw, .thumb--style-icon .thumb__title .kw { -webkit-text-stroke: 0; }
.thumb--style-type, .thumb--style-icon { background-image: none; }

.thumb--card.thumb--xlong.thumb--style-character .thumb__title { -webkit-line-clamp: 5; }
.thumb__title .kw { line-height: .82; }

/* ---------- Poster rolling banner (poomang-style) ---------- */
.slide--poster { background: var(--slide-bg); }
.slide--poster .ps__left { position: absolute; z-index: 3; left: 6%; top: 0; bottom: 0; width: 52%; display: flex; flex-direction: column; justify-content: center; gap: 4.5cqw; padding-bottom: 6%; }
.ps__title { display: block; font-family: var(--f-hand); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; color: #241A15; font-size: 9.6cqw; text-wrap: balance; }
.ps__title .kw { font-size: 1.12em; line-height: .9; -webkit-text-stroke: 0; color: #160F0B; }
.ps__title .tsm { display: block; font-size: .5em; line-height: 1.15; margin-bottom: .25em; font-weight: 700; letter-spacing: -.01em; }
.ps__row { display: flex; align-items: center; flex-wrap: wrap; gap: 2cqw; }
.ps__cta { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4.2cqw; border-radius: 999px; background: #161616; color: #FFFFFF; font-family: var(--f-body); font-weight: 700; font-size: clamp(13px, 3.9cqw, 18px); }
.ps__cta svg { width: 1.05em; height: 1.05em; }
.ps__chip { background: rgba(255,255,255,.9); border-width: 1.5px; padding: 3px 8px; font-size: clamp(10px, 2.9cqw, 14px); }
.ps__art { position: absolute; z-index: 2; right: 3%; top: 8%; bottom: 14%; width: 44%; }
.ps__art--img img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.mcard { position: absolute; top: 4%; width: 30cqw; aspect-ratio: 9 / 13.5; display: flex; flex-direction: column; align-items: center; padding: 0 2cqw 2cqw; gap: 1.1cqw; text-align: center;
  background: #FFFFFF; border: 2px solid #241A15; border-radius: 3.2cqw; box-shadow: 0 1.6cqw 3.2cqw -1cqw rgba(0,0,0,.28); overflow: hidden; color: #241A15; }
.mcard--back { left: 0; transform: rotate(-7deg); }
.mcard--front { right: 0; top: 12%; transform: rotate(6deg); }
.mcard__bar { align-self: stretch; display: flex; align-items: center; gap: .9cqw; margin: 0 -2cqw .6cqw; padding: 1.4cqw 2cqw; border-bottom: 1.5px solid #EDE7E2; font-size: 2.2cqw; }
.mcard__bar b { margin-right: auto; font-family: var(--f-hand); font-weight: 800; }
.mcard__bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #D9D2CC; }
.mcard__art { display: flex; align-items: center; justify-content: center; width: 15cqw; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--c) 32%, #FFFFFF); border: 2px solid #241A15; font-size: 8cqw; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.mcard__lead { font-size: 2.3cqw; font-weight: 700; color: #7A6A62; }
.mcard__name { font-family: var(--f-hand); font-weight: 800; font-size: 3.4cqw; line-height: 1.1; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard__tag { font-size: 2.1cqw; line-height: 1.25; color: #5A4A42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps__cap { position: absolute; z-index: 4; right: calc(14% + 40px); bottom: 5%; padding: 1.4cqw 3cqw; background: #FFFFFF; border: 2px solid #241A15; font-family: var(--f-hand); font-weight: 800; font-size: clamp(12px, 3.4cqw, 18px); letter-spacing: -.02em; white-space: nowrap; color: #241A15; }
@media (min-width: 768px) {
  .slide--poster .ps__left { left: 5%; width: 46%; gap: 1.8cqw; padding-bottom: 0; }
  .ps__title { font-size: 4.6cqw; }
  .ps__cta { padding: 0 1.8cqw; font-size: clamp(14px, 1.5cqw, 18px); }
  .ps__chip { font-size: clamp(11px, 1.1cqw, 14px); }
  .ps__art { right: 12%; top: 6%; bottom: 6%; width: 32%; }
  .mcard { width: 14cqw; border-radius: 1.5cqw; padding: 0 1cqw 1cqw; gap: .5cqw; box-shadow: 0 .8cqw 1.6cqw -.5cqw rgba(0,0,0,.28); }
  .mcard__bar { margin: 0 -1cqw .3cqw; padding: .7cqw 1cqw; font-size: 1.05cqw; gap: .4cqw; }
  .mcard__bar i { width: .55cqw; height: .55cqw; }
  .mcard__art { width: 7cqw; font-size: 3.8cqw; }
  .mcard__lead { font-size: 1.1cqw; } .mcard__name { font-size: 1.6cqw; } .mcard__tag { font-size: 1cqw; }
  .ps__cap { right: calc(6% + 50px); bottom: 7%; padding: .7cqw 1.4cqw; font-size: clamp(14px, 1.5cqw, 20px); }
}
/* Poster banner — mobile tuning (cards smaller, title clear of cards, caption clear of the button) */
@media (max-width: 767px) {
  .slide--poster .ps__left { width: 50%; padding-bottom: 15%; gap: 4cqw; }
  .ps__title { font-size: 8.6cqw; }
  .ps__chip { display: none; }
  .ps__art { right: 2%; top: 6%; bottom: 20%; width: 44%; }
  .mcard { width: 23cqw; padding: 0 1.5cqw 1.5cqw; gap: .8cqw; border-radius: 2.6cqw; }
  .mcard--back { left: 0; top: 2%; }
  .mcard--front { right: 0; top: 16%; }
  .mcard__bar { margin: 0 -1.5cqw .4cqw; padding: 1.1cqw 1.5cqw; font-size: 1.9cqw; }
  .mcard__art { width: 11.5cqw; font-size: 6.2cqw; }
  .mcard__lead { font-size: 1.9cqw; } .mcard__name { font-size: 2.7cqw; } .mcard__tag { display: none; }
  .ps__cap { right: 64px; bottom: 5.5%; padding: 1.2cqw 2.4cqw; font-size: clamp(11px, 3.1cqw, 15px); }
}
@media (max-width: 767px) {
  .slide--poster .ps__left { width: 46%; left: 5.5%; }
  .ps__art { right: 2.5%; width: 41%; }
  .mcard { width: 21.5cqw; }
  .mcard__art { width: 10.5cqw; font-size: 5.8cqw; }
}

/* Wide art (two characters, lightstick set): use more of the card width */
.thumb--card.thumb--wide-art .thumb__char, .thumb--card.thumb--long.thumb--wide-art .thumb__char { left: 3%; right: 3%; height: 50%; bottom: 1%; }
@container (min-width: 151px) { .thumb--card.thumb--wide-art .thumb__char { height: 44%; bottom: 0; } }
/* Per-test title line spacing (thumb_line_height) */
.thumb--tlh .thumb__title { line-height: var(--tlh) !important; }
.thumb--tlh .thumb__title .kw { line-height: 1 !important; }
/* Topic image art: keep it clear of the caption box */
.ps__art--img { top: 6%; bottom: 21%; }
@media (min-width: 768px) { .ps__art--img { right: 10%; width: 36%; top: 6%; bottom: 20%; } }

/* Very long title + wide art (map): give the title room */
.thumb--card.thumb--xlong.thumb--wide-art .thumb__char { height: 37%; bottom: 0; }
@container (min-width: 151px) { .thumb--card.thumb--xlong.thumb--wide-art .thumb__char { height: 34%; } }
.thumb--card.thumb--xlong.thumb--wide-art .thumb__char { left: 26%; right: 1%; height: 40%; bottom: 3%; }
.thumb--card.thumb--xlong.thumb--wide-art .thumb__char img { object-position: right bottom; }
@container (min-width: 151px) { .thumb--card.thumb--xlong.thumb--wide-art .thumb__char { height: 36%; } }
@container (min-width: 151px) { .thumb--card.thumb--xlong.thumb--wide-art .thumb__char { height: 30%; bottom: 2%; } }

/* Art aligned right (keeps details like a held cup clear of the bottom-left chip) */
.thumb--card.thumb--art-right .thumb__char { left: 30%; right: 0; height: 52%; bottom: -2%; }
.thumb--card.thumb--art-right .thumb__char img { object-position: right bottom; }
@container (min-width: 151px) { .thumb--card.thumb--art-right .thumb__char { height: 44%; } }
.thumb--card.thumb--art-right .thumb__chip-q { display: none; }
.thumb--card.thumb--art-right .thumb__chip { left: 4%; bottom: 3.5%; }
/* Idol lineup art: keep it below the 4-line title, full width */
.thumb--card[data-char="char_idols"] .thumb__char { left: 4%; right: 4%; height: 36%; bottom: 9%; }
.thumb--card[data-char="char_idols"] .thumb__char img { object-position: center bottom; }
@container (min-width: 151px) { .thumb--card[data-char="char_idols"] .thumb__char { height: 31%; bottom: 10%; } }
/* Station sign art: tall, sits on the right so the chip never covers it */
.thumb--card[data-char="char_station"] .thumb__char { left: 52%; right: 4%; height: 56%; bottom: 2%; }
.thumb--card[data-char="char_station"] .thumb__char img { object-position: center bottom; }
@container (min-width: 151px) { .thumb--card[data-char="char_station"] .thumb__char { height: 46%; } }
.thumb--card[data-char="char_station"] .thumb__char { left: 46%; right: 2%; height: 60%; bottom: 1%; }
@container (min-width: 151px) { .thumb--card[data-char="char_station"] .thumb__char { height: 50%; } }
/* Culture Korner cards in the tab grid: titles are long, so show the title only (no hook line) */
.poster[data-type="C"] .thumb__hook { display: none; }
/* How Korean banner: the ID card is wide, give it more room on phones */
@media (max-width: 767px) { .slide--poster[href*="how-korean"] .ps__art--img { width: 52%; right: 1%; top: 30%; bottom: 20%; } }
/* Tab grid cards: main title only (no hook line) — cards are narrow */
.poster .thumb__hook { display: none !important; }
/* snack combo + heart girl: sit on the right so the chip never hides them */
.thumb--card[data-char="char_snacks"] .thumb__char,
.thumb--card[data-char="char_heartgirl"] .thumb__char { left: 36%; right: 0; height: 48%; bottom: 0; }
.thumb--card[data-char="char_snacks"] .thumb__char img,
.thumb--card[data-char="char_heartgirl"] .thumb__char img { object-position: right bottom; }
.thumb--card[data-char="char_snacks"] .thumb__char { left: 30%; right: 2%; height: 42%; bottom: 14%; }
/* Banner art: How Korean / Seoul 7 Days / Real Korean keep their size; every other slide gets a bigger picture */
.slide--poster:not([href*="how-korean"]):not([href*="survive-7"]):not([href*="guess-what"]) .ps__art--img { right: 0; width: 54%; top: 3%; bottom: 17%; }
@media (min-width: 768px) {
  .slide--poster:not([href*="how-korean"]):not([href*="survive-7"]):not([href*="guess-what"]) .ps__art--img { right: 6%; width: 44%; top: 3%; bottom: 14%; }
}
.thumb--card[data-char="char_tripgirl"] .thumb__char { left: 34%; right: 0; height: 50%; bottom: 0; }
.thumb--card[data-char="char_tripgirl"] .thumb__char img { object-position: right bottom; }
.thumb--card[data-char="char_sheephat"] .thumb__char { left: 30%; right: 2%; height: 40%; bottom: 15%; }
/* keep descenders (j, g, y, p) from being clipped at the bottom of the title box */
.thumb__title { padding-bottom: .22em; }
.thumb__title .thumb__kw, .thumb__title b { line-height: 1.08; }
.thumb--card[data-char="char_bathroom"] .thumb__char,
.thumb--card[data-char="char_hanriver"] .thumb__char { left: 30%; right: 2%; height: 42%; bottom: 14%; }
.site-footer__contact { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.site-footer__contact a { color: inherit; text-decoration: underline; }