/* 꿍꿍이 오프닝 화면. 메인 위에 덮였다가 끝나면 사라진다. */

/* 스크립트가 오프닝을 띄우기 전, 메인이 잠깐 비치지 않게 가린다. 스크립트가 안 돌면 4초 뒤 저절로 걷힌다. */
html:not(.kko-done)::after{content:"";position:fixed;inset:0;z-index:9998;background:var(--bg,#0f1011);animation:kko-safe 0s 4s forwards}
@keyframes kko-safe{to{visibility:hidden}}
html.kko-on{overflow:hidden}

#kk-opening{position:fixed;inset:0;z-index:9999;background:var(--bg,#0f1011);color:var(--fg,#e6e6e3);transition:opacity .45s;cursor:pointer;touch-action:manipulation;outline:none}
#kk-opening.out{opacity:0;pointer-events:none}
#kk-opening:focus-visible{outline:2px solid var(--acc,#3fd68a);outline-offset:-2px}
#kk-opening canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#kk-opening video{position:absolute;left:0;top:0;width:4px;height:4px;opacity:.01;pointer-events:none}
.kko-en{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:calc(16px + env(safe-area-inset-top,0px));margin:0;font:400 13px var(--mono,monospace);color:var(--dim,#8b8d8a)}
.kko-skip{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(12px + env(safe-area-inset-top,0px));background:transparent;color:var(--dim,#8b8d8a);border:1px solid var(--line2,#37393d);border-radius:4px;padding:4px 12px;font:400 13px var(--ko,sans-serif);cursor:pointer}
.kko-skip:hover{color:var(--fg,#e6e6e3);border-color:var(--dim,#8b8d8a)}
.kko-skip:focus-visible{outline:2px solid var(--acc,#3fd68a);outline-offset:2px}
.kko-tag{position:absolute;left:0;right:0;margin:0;padding-inline:16px;text-align:center;font:400 clamp(15px,1.25vw,26px)/1.75 var(--ko,sans-serif);color:var(--fg,#e6e6e3);min-height:1.75em;word-break:keep-all}
.kko-tag b{color:var(--emp,#ff5a1f);font-weight:400}
.kko-hint{position:absolute;left:0;right:0;bottom:calc(2.5% + env(safe-area-inset-bottom,0px));margin:0;text-align:center;color:var(--dim,#8b8d8a);font:400 clamp(13px,.8vw,17px) var(--ko,sans-serif)}
@media (prefers-reduced-motion:reduce){#kk-opening{transition:none}html::after{display:none}}