@font-face {
  font-family: 'Yongunni Serif';
  src: url('/assets/yongunni-v3/fonts/noto-serif-kr.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Yongunni Sans';
  src: url('/assets/yongunni-v3/fonts/noto-sans-kr.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #0d0d0c;
  --ivory: #f2ebdd;
  --gold: #c3a56a;
  --line: rgba(195, 165, 106, .46);
  --serif: 'Yongunni Serif', Batang, serif;
  --sans: 'Yongunni Sans', 'Malgun Gothic', sans-serif;
  color: var(--ivory);
  background: #151412;
  font-family: var(--sans);
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; color: inherit; cursor: default; }
button:focus-visible, .product-rail:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#app { position: relative; width: min(100%, 480px); margin: auto; padding-bottom: calc(86px + env(safe-area-inset-bottom)); background: var(--ink); }
.brand { position: sticky; top: 0; z-index: 5; color: #dfc18a; background: rgba(13,13,12,.98); border-bottom: 1px solid #72675240; }
.brand-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 16px; }
.brand-lockup { min-width: 0; }
.brand-logo { display: block; width: 206px; max-width: 100%; height: auto; }
.brand-lockup p { margin: 2px 0 0; font: 400 10px/1.5 var(--serif); }
.header-actions { display: flex; flex: none; color: var(--ivory); }
.header-actions button { display: grid; place-items: center; width: 33px; height: 44px; padding: 0; border: 0; background: none; }
.header-actions svg { width: 22px; height: 22px; }
.header-categories { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; padding: 0 8px 8px; }
.header-categories button { min-width: 0; height: 44px; padding: 0 3px; border: 1px solid transparent; border-radius: 24px; background: none; color: #c4beb3; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.header-categories [aria-pressed="true"] { border-color: var(--line); background: #29251e; color: #ecd3a4; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.category-content { display: grid; gap: 14px; padding: 20px 16px 16px; }
.category-content[hidden] { display: none; }
.category-tile { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 6 / 5; border-radius: 18px; background: #1b1917; }
.category-tile::after { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, transparent 36%, #0d0d0c22 54%, #0d0d0ce6 100%); pointer-events: none; }
.category-copy { position: absolute; z-index: 1; left: 18px; right: 78px; bottom: 22px; }
.category-copy h2 { margin: 0; font: 700 22px/1.35 var(--sans); letter-spacing: -.05em; text-wrap: pretty; text-shadow: 0 2px 10px #0008; }
.category-copy p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #e7dfd3; }
.category-play { position: absolute; z-index: 1; right: 18px; bottom: 22px; width: 46px; height: 46px; color: #f2ebdd; }
.category-play svg { width: 100%; height: 100%; stroke-width: .8; }
.category-tile .poster-status { z-index: 1; }
.product-entry-link { position: absolute; inset: 0; z-index: 3; cursor: pointer; border-radius: inherit; }
.product-entry-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.scene { position: relative; overflow: hidden; isolation: isolate; background: #1b1917; }
.scene-image { position: absolute; bottom: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-carousel { position: relative; }
.hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.hero-controls { position: absolute; z-index: 4; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; }
.hero-step { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #ddc69380; border-radius: 50%; color: #f2ebdd; background: #17140ee6; cursor: pointer; }
.hero-step:first-child svg { transform: rotate(180deg); }
.hero-step svg { width: 15px; height: 15px; }
.hero-count { min-width: 34px; text-align: center; font-size: 12px; color: #f2ebdd; }
.scene-overlay { position: absolute; inset: 0; pointer-events: none; }
.scene-overlay[data-preset="hero"] { background: linear-gradient(180deg, rgba(13,13,12,.7), transparent 26%, transparent 43%, #0d0d0c 100%); }
.scene-overlay[data-preset="poster"] { background: linear-gradient(180deg, #0d0d0c, rgba(13,13,12,.2) 34%, transparent 60%, #0d0d0c 100%); }
.scene-overlay[data-preset="bottom"] { background: linear-gradient(to top, #0d0d0c, transparent 75%); }
.scene-overlay[data-preset="feature"] { background: linear-gradient(90deg, rgba(13,13,12,.55), transparent 77%), linear-gradient(0deg, #0d0d0c, transparent 60%); }
.scene-text { position: absolute; isolation: isolate; width: max-content; max-width: min(var(--maxWidth), calc(100% - var(--x) - 12px)); font-size: var(--fontSize); white-space: pre-line; overflow-wrap: anywhere; }
.scene-text[data-anchor="left-bottom"] { left: var(--x); bottom: var(--y); }
.scene-text[data-anchor="left-top"] { left: var(--x); top: var(--y); }
.scene-text[data-font="serif"] { font-family: var(--serif); }
.scene-text[data-font="sans"] { font-family: var(--sans); }
.scene-text[data-font="latin"], .text-emphasis { font-family: Georgia, serif; }
.scene-text > h1, .scene-text > h2, .scene-text > p { margin: 0; font: inherit; letter-spacing: inherit; }
.text-emphasis { line-height: 1.02; letter-spacing: -.045em; }
.scene-text[data-effect]::before { content: ''; position: absolute; z-index: -1; inset: calc(-1 * var(--effect-spread)); opacity: var(--effect-opacity); filter: blur(var(--effect-blur)); pointer-events: none; }
.scene-text[data-effect="radial"]::before { background: radial-gradient(ellipse, #0d0d0c 20%, transparent 74%); }
.scene-text[data-effect="scrim"]::before { background: #0d0d0c; border-radius: 8px; }
.scene-text[data-effect="linear"]::before { background: linear-gradient(90deg, #0d0d0c, transparent); }
.episode-markers { position: absolute; left: 20px; bottom: 22px; display: flex; gap: 4px; }
.episode-markers i { display: block; width: 21px; height: 2px; border-radius: 2px; background: #77746d; }
.episode-markers i:first-child { background: #dfc18a; }
.product-section { padding-top: 12px; }
.product-section + .product-section { margin-top: 16px; }
.feature + .product-section { margin-top: 16px; }
.rail-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 12px; }
.rail-heading h2 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: -.04em; }
.rail-controls { display: flex; gap: 6px; flex: none; }
.rail-step { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #1b1917; color: #dfc18a; cursor: pointer; }
.rail-step:disabled { opacity: .28; cursor: default; }
.rail-step svg { width: 14px; height: 14px; }
.rail-previous svg { transform: rotate(180deg); }
.product-rail { display: flex; padding: 0 12px 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 12px; }
.product-rail::-webkit-scrollbar { display: none; }
.product-rail .scene { flex: 0 0 var(--card-width); border: 1px solid var(--line); border-radius: 8px; scroll-snap-align: start; }
.product-rail[data-sizing="one-and-peek"] .scene { aspect-ratio: 3 / 5; }
.poster-status { position: absolute; top: 12px; right: 12px; padding: 5px 9px; border: 1px solid #ffe58e; border-radius: 20px; background: #ffda4a; color: #17140d; font-size: 11px; font-weight: 700; }
.poster-status.available { background: #e1c58d; border-color: #eed8ac; color: #282014; font-weight: 700; }
[data-availability="preparing"] > .scene-image { filter: grayscale(.65) brightness(.55) blur(1.5px); }
.adult-status { position: absolute; z-index: 1; top: 49px; right: 12px; color: #ecd3a4; font-size: 11px; }
.category-tile[data-availability="preparing"] .category-copy { right: 18px; }
.scene[data-availability="preparing"] button:disabled { background: #292621; border-color: #76684f; color: #c9bda7; box-shadow: none; }
.poster-play { position: absolute; right: 10px; bottom: 10px; width: 24px; height: 24px; color: #dfcda5; }
.poster-play svg { stroke-width: 1; }
.feature { margin: 14px 12px 0; border: 1px solid var(--line); border-radius: 8px; }
.gold-rule { position: absolute; top: -66px; left: 0; width: 28px; height: 1px; background: var(--gold); }
.scene-text button { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; max-width: 100%; padding: 0 21px; border: 1px solid #dab8a4; border-radius: 15px; background: linear-gradient(180deg, #7c2026, #641d22); box-shadow: inset 0 1px 1px #bb656333; white-space: normal; }
.scene-text button svg { flex: none; width: 16px; height: 16px; }
.brand-note { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 76px; margin: 0 14px; color: #c1b9aa; }
.brand-note > span { width: 40px; height: 1px; background: var(--line); }
.brand-note p { margin: 0; text-align: right; font: 400 11px/1.7 var(--serif); white-space: pre-line; }
.business-footer { margin: 22px 14px 4px; padding: 18px 14px; border-top: 1px solid #72675270; color: #bdb5a8; font-size: 11px; line-height: 1.75; }
.business-footer strong { display: block; margin-bottom: 8px; color: #e4c386; font-size: 13px; font-weight: 700; }
.business-footer p { margin: 0; white-space: pre-line; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.legal-links a { color: #dfc18a; text-decoration: none; border-bottom: 1px solid #dfc18a55; }
.bottom-nav { position: fixed; z-index: 3; bottom: 0; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 480px); height: calc(72px + env(safe-area-inset-bottom)); padding: 9px 6px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #72675270; background: rgba(13,13,12,.98); }
.bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0; border: 0; color: #a9a39a; background: none; }
.bottom-nav svg { width: 25px; height: 25px; }
.bottom-nav span { font-size: 10px; line-height: 1.3; white-space: nowrap; }
.bottom-nav [aria-current] { color: #e4c386; }
#load-status { padding: 20px; text-align: center; }
@media (max-width: 374px) {
  .brand-topbar { padding-inline: 13px; }
  .brand-logo { width: 194px; }
}