:root{color-scheme:dark;--ink:#e9eef1;--muted:#c5c9d2;--cyan:#9aedf4;--pink:#ed9cd6;font-family:Arial,'Apple SD Gothic Neo','Noto Sans KR',sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#060a14;color:var(--ink)}body{overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.cinema{position:relative;isolation:isolate;width:100%;height:100svh;display:flex;align-items:center;justify-content:center;overflow:clip}.ambience{position:absolute;inset:-40px;z-index:-2;background:linear-gradient(#070b1670,#070b16dd),url('assets/v9/walk-a.webp') center/cover;filter:blur(35px);opacity:.4}.picture{position:relative;width:100%;aspect-ratio:16/9;max-height:100svh;background:#040712}.picture canvas{display:block;width:100%;height:100%;object-fit:contain}.film-top{position:absolute;top:30px;left:3.4%;right:3.4%;z-index:3;display:flex;align-items:center;justify-content:space-between;pointer-events:none;text-shadow:0 1px 14px #0009}.brand{font-size:29px;font-weight:750;letter-spacing:-1.8px;pointer-events:auto}.brand span{color:var(--pink)}.film-edition{font-size:9px;letter-spacing:2.4px;color:#c3ced9}.film-edition i{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--cyan);margin:0 15px 2px}.credits-link{font-size:10px;opacity:.65;pointer-events:auto}.credits-link:hover{opacity:1}.subtitle{position:absolute;left:9%;right:9%;bottom:64px;text-align:center;pointer-events:none;font-size:clamp(15px,1.6vw,22px);font-weight:500;line-height:1.5;color:#f4f7f8;text-shadow:0 2px 5px #000,0 0 15px #000a;z-index:5}.subtitle span{background:#080e19a8;border-radius:4px;padding:5px 12px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.player{position:absolute;bottom:0;left:0;right:0;padding:45px 3.4% max(17px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#030810b5);display:flex;align-items:center;gap:14px;z-index:6;opacity:.82;transition:opacity .2s}.cinema:hover .player,.player:focus-within{opacity:1}.player button{min-width:36px;min-height:36px;white-space:nowrap;font-size:10px;opacity:.82}.player button:hover{opacity:1}.player button[aria-pressed=true]{color:var(--cyan)}.play-symbol{font-size:13px;margin-right:7px}.timeline{appearance:none;-webkit-appearance:none;min-width:40px;flex:1;height:2px;margin:0 8px;background:linear-gradient(90deg,#d9edf2 var(--progress,0%),#e4f2ff40 var(--progress,0%));cursor:pointer}.timeline::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:#e7f3f5}.timeline::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:#e7f3f5;border:0}.time{font-size:10px;font-variant-numeric:tabular-nums;color:#b3c0cf;white-space:nowrap}.replay{font-size:14px!important}.loading{position:absolute;inset:0;z-index:20;background:#090d19;display:grid;place-content:center;text-align:center;gap:18px;font-size:11px;letter-spacing:.5px;color:#acbdca;transition:opacity .45s}.loading strong{font-size:38px;letter-spacing:-2px;color:#e6edf1}.loading strong span{color:var(--pink)}.loading.done{opacity:0;pointer-events:none}.loading button{padding:13px 18px;border:1px solid #a2f5ff77;border-radius:4px}.noscript{position:absolute;z-index:30;inset:40% 10%;text-align:center}
@media(min-aspect-ratio:16/9){.picture{width:calc(100svh * 16 / 9);height:100svh}}
@media(max-width:700px){.film-top{top:20px;left:5%;right:5%}.brand{font-size:25px}.film-edition{font-size:7px;letter-spacing:1.5px}.film-edition i{margin:0 8px 1px}.credits-link{display:none}.player{padding:30px 5% max(16px,env(safe-area-inset-bottom));gap:8px;flex-wrap:wrap}.player button{min-width:44px;min-height:44px;font-size:10px}.timeline{order:6;flex:1 0 100%;height:4px;margin:0}.time{margin-left:auto;font-size:9px}.player .caption-toggle{margin-left:auto}.subtitle{bottom:15px;left:5%;right:5%;font-size:13px}.loading{font-size:9px}}
@media(max-height:500px) and (max-width:700px){.player{padding:25px 5% 7px;flex-wrap:nowrap}.timeline{order:0;flex:1 1 auto;margin:0}.film-top{top:10px}.player button{min-height:36px}.player .caption-toggle{margin-left:0}.subtitle{bottom:53px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.player,.loading{transition:none}}

.timeline{height:28px;background-size:100% 2px;background-position:center;background-repeat:no-repeat}@media(max-width:700px){.timeline{height:28px;background-size:100% 3px}}

.embedded-film .film-top{display:none}.embedded-film .picture{max-height:100svh}.embedded-film .player{padding-top:20px}

/* Inline presentation keeps the 16:9 picture above a separate control row. */
.inline-film .cinema{height:auto;min-height:0;display:block;overflow:hidden}
.inline-film .picture{width:100%;height:auto;max-height:none;aspect-ratio:16/9}
.inline-film .picture canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.inline-film .film-top{display:none}
.inline-film .subtitle{bottom:16px}
.inline-film .player{position:relative;inset:auto;height:64px;min-height:64px;padding:10px 16px;gap:12px;flex-wrap:nowrap;background:#081019;opacity:1;transition:none}
@media(max-width:700px){.inline-film .player{height:88px;min-height:88px;padding:8px 12px;gap:6px;flex-wrap:wrap}.inline-film .player button{min-height:36px;min-width:36px}.inline-film .timeline{order:6;flex:1 0 100%;height:28px;margin:0}.inline-film .player .caption-toggle{margin-left:auto}.inline-film .time{margin-left:auto}.inline-film .subtitle{bottom:12px;font-size:12px}}

/* Full-viewport opening; the standalone and ordinary inline players retain their layout. */
.hero-film .cinema{height:100svh;display:flex;flex-direction:column;min-height:0}
.hero-film .picture{aspect-ratio:auto;min-height:0;width:100%;height:auto;flex:1;max-height:none;overflow:hidden}
.hero-film .picture canvas{object-fit:contain;object-position:center}
.hero-film .player{flex-shrink:0;background:#080a0d;border-top:1px solid #ffffff25;font-family:monospace}
.hero-film .subtitle{bottom:28px}
@media(max-width:700px){.hero-film .subtitle{bottom:22px;font-size:13px}.hero-film .player{padding-inline:18px}}