:root{color-scheme:light;--ink:#263e35;--paper:#f5f2e9;--mint:#bbd5c4}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #f7be54;outline-offset:5px}button[hidden]{display:none!important}
.intro{position:relative;min-height:100svh;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;background:var(--paper)}
.intro-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:30px 4vw;gap:16px}
.intro-brand{display:flex;align-items:center;gap:10px;background:transparent;padding:10px 16px;box-shadow:none}
.intro-brand img{width:36px;height:36px}.intro-brand strong{display:block;font-size:23px;letter-spacing:-1px;line-height:1.15}.intro-brand small{font-size:8px;letter-spacing:1.25px}
.skip-film{display:flex;align-items:center;gap:16px;border:1px solid #ffffff60;background:#263e35;color:white;border-radius:40px;padding:14px 23px;font-size:14px;font-weight:500;transition:background .2s,transform .2s}
.skip-film small{font-size:10px;letter-spacing:1.6px;color:#cde0d1}.skip-film>span:last-child{font-size:23px;line-height:1}.skip-film:hover{background:#395448;transform:translateY(-2px)}
.film-stage{position:absolute;inset:0;z-index:-2;background:var(--paper)}
.film-stage video{width:100%;height:100%;object-fit:cover;display:block}
.intro:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(12,32,22,.79),rgba(12,32,22,.24) 18%,transparent 38%)}
.mobile-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.intro-footer{padding:0 4vw 20px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;color:white}
.film-caption p{font-family:'Noto Serif KR',serif;font-size:clamp(19px,2vw,29px);font-weight:400;letter-spacing:-.6px;margin:0 0 8px}.film-caption>span{font-size:12px;color:#ffffffe0}
.film-controls{display:flex;align-items:center;gap:10px}.film-controls button{min-width:44px;min-height:44px;border:1px solid #ffffff90;border-radius:28px;background:#17322273;color:white;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;font-size:12px}.film-controls button:hover{background:#1c362a}.film-controls #play-toggle{width:44px;padding:0}.film-time{font-size:11px;letter-spacing:.5px;font-variant-numeric:tabular-nums;margin-left:5px}.time-separator{margin:0 9px;opacity:.5}
.film-progress{grid-column:1/-1;height:2px;background:#ffffff50;overflow:hidden}.film-progress span{display:block;height:100%;width:0;background:#fff;transition:width .2s linear}
.intro-links{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px}.intro-links>span{font-size:9px;letter-spacing:2px;opacity:.8}.intro-links nav{display:flex;gap:25px}.intro-links a{padding:7px 0}.intro-links a:hover{text-decoration:underline;text-underline-offset:5px}
.film-note{grid-column:1/-1;font-size:10px;opacity:.7;margin:0;letter-spacing:.1px}.start-film{position:absolute;inset:0;margin:auto;width:max-content;height:52px;background:#263e35ed;border:1px solid #ffffff80;border-radius:30px;color:#fff;padding:0 24px;box-shadow:0 8px 40px #0002;font-size:14px}.start-film span{margin-right:10px}.no-script{position:absolute;top:110px;left:4vw;background:var(--paper);padding:20px}
@media(max-aspect-ratio:4/3){
 .intro-header{padding:24px 6vw}.intro-brand{background:transparent;padding:0;box-shadow:none}.mobile-heading{position:static;width:auto;height:auto;overflow:visible;clip-path:none;padding:20px 7vw 28px}.mobile-heading p{font-size:10px;letter-spacing:2px;margin:0 0 15px}.mobile-heading h1{font-family:'Noto Serif KR',serif;font-size:clamp(30px,6vw,56px);font-weight:400;line-height:1.55;letter-spacing:-1.5px;margin:0}
 .film-stage{position:relative;inset:auto;z-index:0;width:100%;aspect-ratio:16/9}.film-stage video{object-fit:contain}.intro:after{display:none}.intro-footer{padding:28px 7vw max(22px,env(safe-area-inset-bottom));color:var(--ink);gap:20px}.film-caption{grid-column:1/-1}.film-caption p{font-size:20px}.film-caption>span{color:#526659;font-size:11px}.film-controls{grid-column:1/-1;justify-content:flex-start}.film-controls button{border-color:#9daea1;background:transparent;color:var(--ink)}.film-controls button:hover{background:#e3eadf}.film-time{margin-left:auto}.film-progress{background:#cfd7cd}.film-progress span{background:#56755f}.intro-links{flex-direction:column;align-items:flex-start;gap:8px}.intro-links nav{gap:22px;flex-wrap:wrap}.skip-film{padding:12px 16px;gap:9px}.skip-film small{display:none}.film-note{font-size:9px}
}
@media(max-height:560px) and (min-aspect-ratio:4/3){.intro-header{padding-top:16px;padding-bottom:16px}.intro-footer{padding-bottom:12px;gap:10px}.film-caption p{font-size:19px}.film-note{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
@media(max-aspect-ratio:4/3){.intro-header{position:sticky;top:0;background:rgba(245,242,233,.97);backdrop-filter:blur(12px)}}
@media(min-aspect-ratio:21/9){.film-stage video{object-fit:contain}}