:root {
  --bg: #090807; --panel: #12100e; --panel2: #191510; --line: #342b21;
  --gold: #b99a62; --gold2: #e3c98f; --text: #eee4d5; --mute: #978b79;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); }
body { margin: 0; min-height: 100vh; font-family: "Noto Sans KR", sans-serif; background: radial-gradient(circle at 50% 0, #21180f 0, var(--bg) 42rem); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.topbar { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(185,154,98,.22); background: rgba(9,8,7,.78); backdrop-filter: blur(18px); }
.topbar-inner { max-width: 1440px; height: 62px; margin: auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-family: "Cormorant Garamond", serif; color: var(--gold2); font-size: 24px; letter-spacing: .16em; }
.topnav { display: flex; align-items: center; gap: 8px; }
.topnav a { padding: 9px 12px; border-radius: 999px; color: var(--mute); font-size: 13px; transition: .2s; }
.topnav a:hover, .topnav a.active { background: rgba(185,154,98,.12); color: var(--gold2); }
.page-head { max-width: 1440px; margin: auto; padding: 72px 24px 34px; }
main:has(.scene-shell) .page-head { padding-top: 28px; padding-bottom: 8px; }
.eyebrow { color: var(--gold); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
h1 { margin: 8px 0 10px; font-family: "Noto Serif KR", serif; font-size: clamp(38px, 6vw, 72px); font-weight: 500; }
.lead { max-width: 760px; color: var(--mute); line-height: 1.8; }
.episode-grid { max-width: 1440px; margin: auto; padding: 0 24px 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.episode-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: rgba(18,16,14,.82); transition: transform .24s, border-color .24s; }
.episode-card:hover { transform: translateY(-5px); border-color: var(--gold); }
.episode-cover { aspect-ratio: 16/10; overflow: hidden; background: #000; }
.episode-cover img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s; }
.episode-card:hover img { transform: scale(1.035); }
.episode-body { padding: 20px; }
.episode-no { color: var(--gold); font-size: 11px; letter-spacing: .18em; }
.episode-body h2 { margin: 7px 0; font-family: "Noto Serif KR", serif; font-size: 25px; }
.episode-body p { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.7; }
.scene-shell { max-width: 1540px; margin: auto; padding: 28px 24px 72px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
.viewer-card { position: sticky; top: 86px; height: calc(100svh - 340px); min-height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #050504; }
.main-stage { position: absolute; inset: 0 0 112px; display: grid; place-items: center; overflow: hidden; touch-action: none; user-select: none; cursor: grab; }
.main-stage.is-panning { cursor: grabbing; }
.main-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: 50% 50%; transform: translate3d(0,0,0) scale(1); transform-origin: center; transition: transform .22s ease, opacity .16s; pointer-events: none; -webkit-user-drag: none; }
.main-stage img.is-moving { transition: none; }
.viewer-info { position: absolute; inset: auto 0 0; min-height: 112px; padding: 18px 80px 17px 22px; border-top: 1px solid var(--line); background: linear-gradient(90deg, #14110e, #0d0c0a); }
.scene-index { color: var(--gold); font-size: 11px; letter-spacing: .16em; }
.viewer-info h2 { margin: 4px 0; font-family: "Noto Serif KR", serif; font-size: 21px; }
.viewer-info p { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.5; }
.icon-btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(10,9,8,.58); color: #fff; backdrop-filter: blur(12px); cursor: pointer; transition: .2s; }
.icon-btn:hover, .icon-btn:focus-visible { border-color: var(--gold2); color: var(--gold2); outline: none; }
.viewer-prev, .viewer-next { position: absolute; z-index: 2; top: calc(50% - 56px); transform: translateY(-50%); font-size: 26px; }
.viewer-prev { left: 16px; } .viewer-next { right: 16px; }
.fullscreen-btn { position: absolute; z-index: 2; right: 18px; bottom: 34px; font-size: 20px; }
.thumb-panel { min-width: 0; }
.thumb-title { display: flex; align-items: end; justify-content: space-between; margin: 4px 2px 14px; }
.thumb-title h2 { margin: 0; font-family: "Noto Serif KR", serif; font-size: 22px; }
.thumb-count { color: var(--mute); font-size: 12px; }
.thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.thumb { position: relative; padding: 0; overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line); border-radius: 12px; background: #050504; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: contain; opacity: .66; transition: .2s; }
.thumb span { position: absolute; left: 8px; bottom: 7px; padding: 3px 6px; border-radius: 6px; background: rgba(0,0,0,.68); color: #ddd; font-size: 10px; }
.thumb:hover img, .thumb.active img { opacity: 1; }
.thumb.active { border-color: var(--gold2); box-shadow: 0 0 0 1px var(--gold2); }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgba(0,0,0,.94); backdrop-filter: blur(5px); }
.lightbox-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 70px 74px 108px; overflow: hidden; touch-action: none; user-select: none; }
.lightbox-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: 50% 50%; transform: translate3d(0,0,0) scale(1); transform-origin: center; pointer-events: none; transition: transform .2s; }
.lightbox-stage img.is-moving { transition: none; }
.lightbox .close { position: fixed; z-index: 3; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); font-size: 28px; }
.lightbox .prev, .lightbox .next { position: fixed; z-index: 3; top: 50%; transform: translateY(-50%); font-size: 28px; }
.lightbox .prev { left: max(18px, env(safe-area-inset-left)); } .lightbox .next { right: max(18px, env(safe-area-inset-right)); }
.lightbox-info { position: fixed; z-index: 3; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); width: min(680px, calc(100% - 130px)); transform: translateX(-50%); padding: 11px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(12,11,9,.65); text-align: center; backdrop-filter: blur(15px); }
.lightbox-info strong { display: block; color: var(--gold2); font-family: "Noto Serif KR", serif; }
.lightbox-info span { color: #aaa092; font-size: 12px; }
.empty { padding: 60px 24px; color: var(--mute); text-align: center; }
@media (max-width: 980px) {
  .scene-shell { display: block; padding: 16px 12px 60px; }
  .viewer-card { position: relative; top: auto; height: min(72vh, 720px); min-height: 500px; margin-bottom: 28px; }
  .thumb-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .topbar-inner { height: 56px; padding: 0 12px; }
  .brand { font-size: 19px; } .topnav { gap: 2px; } .topnav a { padding: 8px; font-size: 11px; }
  .page-head { padding: 48px 18px 26px; }
  .scene-shell { padding: 10px 8px 48px; }
  .viewer-card { height: 72svh; min-height: 480px; border-radius: 16px; }
  .main-stage { inset-bottom: 124px; }
  .viewer-info { min-height: 124px; padding: 15px 66px 14px 15px; }
  .viewer-prev, .viewer-next { top: auto; bottom: 36px; width: 42px; height: 42px; }
  .viewer-prev { left: 10px; } .viewer-next { right: 10px; }
  .fullscreen-btn { right: 12px; bottom: 75px; width: 42px; height: 42px; }
  .thumb-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lightbox-stage { padding: 62px 8px 112px; }
  .lightbox .prev, .lightbox .next { top: auto; bottom: max(28px, env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  .lightbox-info { width: calc(100% - 124px); bottom: max(22px, env(safe-area-inset-bottom)); padding: 8px; }
}