/* M24 styles stay scoped to the native modal. */
#opening{padding:0;border:0;margin:auto;width:min(100vw,540px);max-width:100vw;height:100dvh;max-height:100dvh;background:#070b12;color:#fff;overflow:hidden}
#opening::backdrop{background:rgba(0,0,0,.94)}
#opening .op-stage{position:relative;min-height:100%;height:100%;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 24px calc(18px + env(safe-area-inset-bottom));box-sizing:border-box;overflow-y:auto;isolation:isolate}
#opening .op-media,#opening .op-veil{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
#opening .op-media{background:radial-gradient(ellipse at 50% 30%,#264145,#080912 75%)}
#opening .op-media img,#opening .op-media video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
#opening .op-image{animation:op-drift 9s ease-out both;opacity:.7}
#opening .op-media video{opacity:.85}
#opening .op-veil{z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(3,8,22,.12) 24%,rgba(3,8,22,.7) 52%,#050912 91%)}
#opening[data-tone=green] .op-veil{background:linear-gradient(180deg,#030e0bd9,#092d1422 28%,#03150fbb 52%,#030d09 93%)}
#opening[data-tone=purple] .op-veil{background:linear-gradient(180deg,#16061edd,#31105022 28%,#14051acc 52%,#0c0312 93%)}
#opening .op-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-shrink:0}
#opening .op-brand{color:#e9b949;font-size:20px;font-weight:900;letter-spacing:.1em}
#opening button,#opening a{font:inherit;font-size:15px;color:#fff;text-decoration:none;cursor:pointer;min-height:44px;border:1px solid #ffffff38;border-radius:12px;background:#080c12b3;padding:11px 14px;box-sizing:border-box}
#opening button:focus-visible,#opening a:focus-visible{outline:3px solid #e9b949;outline-offset:3px}
#opening [hidden]{display:none!important}
#opening .op-progress{display:flex;gap:5px;margin:16px 0 8px}
#opening .op-progress i{height:2px;background:#ffffff30;flex:1}
#opening .op-progress i.on{background:#e9b949}
#opening .op-controls{display:flex;justify-content:flex-end;gap:8px}
#opening .op-controls button{font-size:12px;padding:7px 10px;background:#0007}
#opening .op-body{margin-top:auto;padding-top:60px}
#opening .op-eyebrow{color:#e9b949;font-size:12px;letter-spacing:.12em;margin:0 0 14px}
#opening h1{font-size:clamp(32px,9vw,48px);line-height:1.3;letter-spacing:-.06em;margin:0 0 22px;font-weight:700}
#opening h1 em{font-style:normal;color:#c7e7d4}
#opening .op-caption{font-size:15px;color:#d6d9de;line-height:1.6;margin:0 0 18px}
#opening .op-note{font-size:12px;line-height:1.7;color:#b7bcc4}
#opening .op-dialogue{border-top:1px solid #e9b94966;padding:18px 0 4px}
#opening .op-dialogue>span{font-size:12px;color:#e9b949}
#opening h2{font-size:clamp(19px,5.3vw,25px);line-height:1.65;word-break:keep-all;overflow-wrap:anywhere;font-weight:500;margin:8px 0 0}
#opening h2:focus{outline:none}
#opening .op-bottom{display:grid;gap:10px;margin-top:24px;flex-shrink:0}
#opening .op-primary{background:#e9b949;color:#181208;border-color:#e9b949;font-weight:800}
#opening .op-topics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#opening .op-topics a{background:#24132ccc;text-align:center}
#opening-replay{display:block;margin:24px auto;padding:12px 18px;color:#e9b949;background:#141414;border:1px solid #62532b;border-radius:14px;font:inherit;max-width:calc(100% - 32px)}
.op-highlight{outline:3px solid #e9b949!important;outline-offset:4px}
#opening.op-paused .op-image{animation-play-state:paused}
#opening.op-reduced .op-image{animation:none}
@keyframes op-drift{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){#opening .op-image{animation:none}}
@media(max-height:660px){#opening .op-stage{padding-left:18px;padding-right:18px}#opening .op-body{padding-top:24px}#opening h2{font-size:18px}#opening .op-bottom{margin-top:14px}}

/* Entrance UI: original CSS light/threshold treatment; final shrine media pending. */
#opening.op-entry .op-media{background:radial-gradient(ellipse at 50% 42%,#09271f 0,#040c0d 48%,#020405 85%)}
#opening.op-entry .op-veil{background:linear-gradient(180deg,#01040544,transparent 35%,#02090799 70%,#020605)}
#opening.op-entry .op-body{margin:auto 0 0;padding-top:24px;text-align:center;position:relative}
#opening.op-entry .op-eyebrow{font-size:11px;letter-spacing:.22em;color:#b7ceb8}
#opening .op-wordmark{font-family:"Batang","Noto Serif KR",serif;display:flex;flex-direction:column;font-size:clamp(64px,19vw,100px);line-height:1.04;letter-spacing:.13em;text-indent:.13em;font-weight:900;margin:26px 0 30px;color:#f4eed9;text-shadow:0 2px 22px #bbffd32b}
#opening .op-invitation{font-size:16px;line-height:1.8;color:#dedbcf;margin:0 0 22px;word-break:keep-all}
#opening.op-entry .op-note{font-size:11px;color:#98aaa3}
#opening.op-entry .op-bottom{margin-top:18px}
#opening.op-entry .op-primary{background:linear-gradient(180deg,#4b3826,#261a12);color:#ead9ad;border:1px solid #83683b;border-radius:4px;box-shadow:inset 0 1px 0 #b9975a55,inset 0 -4px 10px #0008,0 5px 18px #0008;text-shadow:0 1px 1px #000;letter-spacing:.04em}
#opening .op-threshold{position:absolute;inset:0;overflow:hidden}
#opening .op-doorlight{position:absolute;left:18%;right:18%;top:19%;bottom:16%;border:1px solid #91ca9355;box-shadow:0 0 30px #40d7a212,inset 0 0 35px #40d7a20c;background:linear-gradient(90deg,transparent 49.6%,#b0ffca22 50%,transparent 50.4%)}
#opening .op-doorlight:before{content:"";position:absolute;inset:10px;border:1px solid #88c5a11a;box-shadow:inset 0 0 0 7px #09140d40,inset 0 0 0 8px #8c70412b}
/* 대문 위 낡은 부적 한 장: 새 이미지가 없어도 영상/폴백 위에 자연스럽게 걸리는 장식. */
#opening .op-talisman{position:absolute;z-index:2;top:24%;left:50%;width:42px;height:88px;transform:translateX(-50%) rotate(-1.5deg);background:radial-gradient(ellipse at 0% 40%,#58401c8a,transparent 57%),radial-gradient(ellipse at 98% 80%,#5e412584,transparent 52%),repeating-linear-gradient(12deg,#50381e12 0 1px,transparent 1px 4px),linear-gradient(35deg,transparent 40%,#75261dcc 42% 48%,transparent 50%) 50% 83%/57% 28% no-repeat,linear-gradient(-35deg,transparent 39%,#75261dbb 42% 47%,transparent 49%) 50% 83%/57% 28% no-repeat,linear-gradient(175deg,#c5ad72,#a78b4f);clip-path:polygon(2% 0,37% 1%,43% 0,93% 2%,100% 0,98% 31%,100% 38%,96% 73%,100% 90%,94% 99%,68% 97%,59% 100%,23% 98%,3% 100%,0 77%,3% 73%,0 39%);box-shadow:inset 0 0 13px #50351a88;filter:drop-shadow(1px 3px 3px #0009);opacity:.82}
#opening .op-talisman:before{content:"敕\A令";white-space:pre;position:absolute;top:7%;left:50%;transform:translateX(-50%) rotate(-2deg);font:700 18px/1.13 Georgia,"Noto Serif KR",serif;color:#75261d;opacity:.75;text-shadow:1px 0 #75261d66}
#opening .op-talisman:after{content:"";position:absolute;left:19%;right:21%;top:58%;height:23%;background:linear-gradient(90deg,transparent 13%,#75261dbb 14% 21%,transparent 23% 72%,#75261dbb 74% 79%,transparent 82%),linear-gradient(0deg,transparent 37%,#75261d99 41% 49%,transparent 52%);transform:skew(-8deg)}
#opening .op-wisp{position:absolute;top:40%;width:32px;height:76px;border-radius:70% 15% 70% 35%;background:radial-gradient(ellipse at 50% 75%,#d0ffe1,#70e7b5 20%,#1eae8766 48%,transparent 70%);filter:blur(3px);box-shadow:0 14px 40px #37efa636;animation:op-wisp 4.5s ease-in-out infinite alternate}
#opening .op-wisp-left{left:9%;transform:rotate(-12deg)}
#opening .op-wisp-right{right:9%;animation-delay:-2.2s}
#opening .op-mist{position:absolute;left:-30%;width:160%;height:40%;bottom:12%;opacity:.4;background:radial-gradient(ellipse at 40% 70%,#81d7b41f,transparent 55%),radial-gradient(ellipse at 65% 40%,#b1d4bf18,transparent 60%);filter:blur(20px);animation:op-mist 12s ease-in-out infinite alternate}
@keyframes op-wisp{from{translate:0 5px;rotate:-8deg;opacity:.55}to{translate:0 -9px;rotate:9deg;opacity:.85}}
@keyframes op-mist{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
@media(max-height:700px){#opening.op-entry .op-wordmark{font-size:64px;margin:14px 0 18px}#opening.op-entry .op-invitation{font-size:14px;margin-bottom:12px}#opening.op-entry .op-body{padding-top:16px}}
@media(prefers-reduced-motion:reduce){#opening .op-wisp,#opening .op-mist{animation:none}}

/* Generated entrance film overlays the CSS fallback. If loading fails, threshold/wisps stay visible. */
#opening .op-entry-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
#opening.op-entry-has-video .op-entry-video{opacity:.86}
#opening.op-entry-has-video .op-threshold{opacity:.22}
#opening.op-entry-has-video .op-veil{background:linear-gradient(180deg,#01040566,transparent 32%,#02090777 67%,#020605e6)}
@media(prefers-reduced-motion:reduce){#opening .op-entry-video{display:none}}


#opening.op-entry-has-video .op-talisman{animation:talisman-door 4s ease-in-out forwards}
@keyframes talisman-door{0%,16%{opacity:.82;transform:translateX(-50%) rotate(-1.5deg)}45%{opacity:.6;transform:translateX(-145px) rotate(-5deg) scale(.7)}65%,100%{opacity:0;transform:translateX(-180px) rotate(-8deg) scale(.5)}}
@media(prefers-reduced-motion:reduce){#opening .op-talisman{animation:none}}

/* Approved OSA wordmark in the home opening. */
#opening .op-wordmark img{width:min(230px,68vw);height:auto;display:block;margin:auto;object-fit:contain}