@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;700;900&family=Creepster&family=Noto+Sans:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&family=Noto+Sans+KR:wght@400;700;900&family=Noto+Sans+SC:wght@400;700;900&display=swap");
*{box-sizing:border-box;margin:0}
html,body{background:#050405;color:#eee;overflow-x:hidden}
/* 본문: 언어별 일반 글꼴(베트남어 글리프 지원). Creepster는 로고·제목만 */
html[lang=en],html[lang=en] body{font-family:"Noto Sans","Segoe UI",system-ui,sans-serif}
html[lang=vi],html[lang=vi] body{font-family:"Be Vietnam Pro",system-ui,sans-serif}
html[lang=ko],html[lang=ko] body{font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
html[lang=zh],html[lang=zh] body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
html[lang=ru],html[lang=ru] body{font-family:"Noto Sans","Segoe UI",system-ui,sans-serif}
html:not([lang]),html[lang=""]{font-family:"Be Vietnam Pro",system-ui,sans-serif}
/* EN 호러 제목만 Creepster (로고 SVG는 path bake) */
html[lang=en] .end h2,
html[lang=en] .cap,
html[lang=en] .promo .pt,
html[lang=en] .st .n{font-family:Creepster,fantasy}

.lang{position:fixed;left:50%;transform:translateX(-50%);top:calc(6px + clamp(52px, calc(100vw * 1540 / 9315), 140px) + 4px);z-index:99;display:flex;gap:4px;pointer-events:auto}
.lang button{background:#0008;color:#ddd;border:1px solid #555;border-radius:14px;padding:3px 7px;font-size:11px;font-family:inherit}
.lang button.on{background:#b31b1b;border-color:#b31b1b;color:#fff}
.tag{position:fixed;left:12px;top:calc(6px + clamp(52px, calc(100vw * 1540 / 9315), 140px) + 40px);z-index:99;font-size:10px;color:#999;letter-spacing:.1em}
.cta{display:inline-block;margin-top:22px;padding:16px 34px;background:#b31b1b;color:#fff;text-decoration:none;border-radius:40px;font-weight:700;font-size:18px;box-shadow:0 0 30px #b31b1b88}
.info{font-size:16px;line-height:1.8;color:#ccc}.info b{color:#fff}

.brandbar{position:fixed;top:0;left:0;right:0;height:calc(8px + clamp(52px, calc(100vw * 1540 / 9315), 140px) + 44px);z-index:98;background:linear-gradient(#050405 0%,#050405f2 72%,#05040500 100%);pointer-events:none}
.brand{position:fixed;left:0;right:0;top:6px;width:100%;z-index:99;text-align:center;pointer-events:none;padding-top:4px;overflow:visible;
filter:drop-shadow(0 0 10px #c2271faa) drop-shadow(0 0 22px #8a0b0b88)}
.brand-logo{display:block;width:98%;max-width:98%;height:auto;max-height:none;padding:0;margin:0 auto;aspect-ratio:9315/1540;object-fit:contain;object-position:center;box-sizing:border-box}
.brand-logo svg{display:block;width:100%;height:auto;max-height:none}

/* ===== 프로모 배너 (빨강·금색) ===== */
.promo{position:absolute;top:calc(8px + clamp(52px, calc(100vw * 1540 / 9315), 140px) + 44px);left:12px;right:12px;z-index:97;padding:12px 14px;border-radius:16px;text-align:center;color:#fff;
background:linear-gradient(135deg,#8e0f0f,#c0392b 60%,#7a0a0a);border:2px solid #e8b84a;box-shadow:0 6px 24px #0009}
.promo .pt{font-weight:900;font-size:22px;letter-spacing:.06em;color:#ffd76a;text-shadow:0 2px 0 #5a0000}
.promo .pr{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0}
.promo .pr s{font-size:22px;color:#f3c9c9;opacity:.85}.promo .big{font-size:58px;font-weight:900;line-height:1;color:#ffd76a;text-shadow:0 3px 0 #5a0000}
.promo .badge{display:inline-block;background:#e8b84a;color:#5a0000;font-weight:900;border-radius:999px;padding:4px 10px;font-size:18px;vertical-align:middle}
.promo .ps{font-size:13px;color:#ffe9b0}
.promo .cd{display:flex;justify-content:center;gap:6px;margin-top:4px}.promo .cd span{background:#0006;border:1px solid #e8b84a88;border-radius:8px;padding:3px 7px;font-size:11px;color:#ffe9b0}
.promo .cd b{font-size:20px;color:#fff;margin-right:2px;font-variant-numeric:tabular-nums}
.promo .row{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;font-size:15px;padding:4px 0;border-top:1px solid #ffffff22}
.promo .row small{display:block;font-size:11px;color:#ffe9b0}.promo .row s{color:#f3c9c9;font-size:13px}.promo .row b{font-size:22px;color:#ffd76a}
.cta.sticky{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);margin:0;z-index:100;white-space:nowrap;background:linear-gradient(#d4352b,#a01616);border:2px solid #e8b84a;padding:14px 26px;font-size:17px}
@media (prefers-reduced-motion:no-preference){
.promo .badge{animation:hhWob 2.4s ease-in-out infinite}
@keyframes hhWob{0%,100%{transform:rotate(-3deg);box-shadow:0 0 6px #ffd76a66}50%{transform:rotate(3deg);box-shadow:0 0 14px #ffd76acc}}}

/* ===== Motion interactions (CSS + light JS; no new libs) ===== */
.reveal-dark{opacity:0;filter:brightness(0);transition:opacity .9s ease,filter 1.1s ease}
.reveal-dark.is-in{opacity:1;filter:brightness(1)}
.rm.reveal-dark .bg{transition:filter 1.1s ease}
.rm.reveal-dark:not(.is-in) .bg{filter:brightness(0)!important}
.rm.reveal-dark.is-in .bg{filter:brightness(.62) contrast(1.1)}

#seq{isolation:isolate}
#seq .flashlight{position:absolute;inset:0;z-index:4;pointer-events:none;
background:radial-gradient(circle 46vmax at var(--fx,50%) var(--fy,42%),
transparent 0%,transparent 38%,rgba(0,0,0,.22) 62%,rgba(0,0,0,.4) 84%,rgba(5,2,3,.5) 100%);
opacity:.65;transition:opacity .35s ease}
#seq .flashlight.is-idle{opacity:.32;
background:radial-gradient(circle 50vmax at 50% 42%,
transparent 0%,transparent 42%,rgba(0,0,0,.2) 66%,rgba(0,0,0,.36) 86%,rgba(5,2,3,.45) 100%)}
#seq .cap{z-index:5}

@media (prefers-reduced-motion:no-preference){
.cta.sticky{animation:hhBeatSticky 1.35s ease-in-out infinite}
.cta.hh-beat:not(.sticky):not(.zalo){animation:hhBeat 1.35s ease-in-out infinite}
@keyframes hhBeatSticky{
0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 0 22px #b31b1b66,0 0 0 0 #e8b84a00}
50%{transform:translateX(-50%) scale(1.04);box-shadow:0 0 34px #b31b1baa,0 0 18px 2px #e8b84a55}}
@keyframes hhBeat{
0%,100%{transform:scale(1);box-shadow:0 0 30px #b31b1b88}
50%{transform:scale(1.04);box-shadow:0 0 40px #b31b1bcc,0 0 14px #e8b84a66}}
.brand{animation:hhFlicker 7.5s ease-in-out infinite}
@keyframes hhFlicker{
0%,92%,100%{opacity:1;filter:drop-shadow(0 0 10px #c2271faa) drop-shadow(0 0 22px #8a0b0b88)}
93%{opacity:.78;filter:drop-shadow(0 0 3px #800) drop-shadow(0 0 8px #500)}
94.5%{opacity:1;filter:drop-shadow(0 0 16px #e22) drop-shadow(0 0 28px #c2271fcc)}
96%{opacity:.85;filter:drop-shadow(0 0 5px #a00) drop-shadow(0 0 12px #600)}
97.5%{opacity:1;filter:drop-shadow(0 0 10px #c2271faa) drop-shadow(0 0 22px #8a0b0b88)}
}
}
@media (prefers-reduced-motion:reduce){
.reveal-dark,.rm.reveal-dark{opacity:1;filter:none;transition:none}
.rm.reveal-dark .bg{filter:brightness(.62) contrast(1.1)!important;transition:none}
#seq .flashlight{display:none}
.cta.sticky,.cta.hh-beat,.brand{animation:none!important}
.cta.sticky{transform:translateX(-50%)}
}

/* keep price/CTA clear of sticky book button */
.end,#out{padding-bottom:max(96px,calc(56px + env(safe-area-inset-bottom,0px)))!important}
body{padding-bottom:0}

.cta.sticky.hh-hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(120%);transition:opacity .25s ease,transform .25s ease}
.end,#out{padding-bottom:max(120px,calc(72px + env(safe-area-inset-bottom,0px)))!important}

/* ===== HORROR RESKIN: promo + CTA (overrides above) ===== */
:root{--hh-font:inherit;--hh-type:inherit;--hh-blood:#8a0b0b;--hh-red:#c2271f}
.promo{border-radius:3px;color:#e9dcc6;border:0;padding:16px 16px 14px;
background:
 radial-gradient(ellipse 38% 26% at 14% 18%,#5a000088,transparent 70%),
 radial-gradient(ellipse 22% 40% at 88% 70%,#3a000099,transparent 70%),
 radial-gradient(circle at 70% 12%,#00000055 0 6%,transparent 14%),
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .02 0 0 0 0 .02 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
 linear-gradient(170deg,#2a0d0b,#1a0706 55%,#250a08);
box-shadow:inset 0 0 40px #000c,inset 0 0 0 1px #6b1a1499,0 10px 28px #000c;
clip-path:polygon(0 3%,4% 0,11% 2%,19% 0,27% 3%,36% 1%,45% 3%,53% 0,62% 2%,71% 0,80% 3%,88% 1%,96% 2%,100% 0,99% 22%,100% 41%,98% 60%,100% 79%,99% 97%,92% 100%,83% 97%,74% 100%,64% 98%,55% 100%,46% 97%,37% 100%,28% 98%,18% 100%,9% 97%,0 100%,1% 78%,0 57%,2% 38%,0 18%);
transform:rotate(-.6deg)}
.promo::before{content:"";position:absolute;inset:0;pointer-events:none;
background:
 radial-gradient(ellipse 3% 14% at 22% 0,#7a0606dd,transparent 100%),
 radial-gradient(ellipse 2% 22% at 63% 0,#6a0505cc,transparent 100%),
 radial-gradient(ellipse 2.5% 10% at 84% 0,#7a0606bb,transparent 100%),
 radial-gradient(circle at 8% 88%,#5c0404aa 0 3%,transparent 6%),
 repeating-linear-gradient(97deg,transparent 0 22px,#ffffff05 22px 23px)}
.promo>*{position:relative}
.promo .pt{font-family:inherit;font-weight:900;font-size:26px;letter-spacing:.08em;color:var(--hh-red);
text-shadow:0 0 1px #000,1px 2px 0 #000,0 0 12px #8a0b0b99;transform:skewX(-4deg)}
.promo .big{font-family:inherit;font-weight:900;font-size:62px;color:#d8c9a8;text-shadow:2px 3px 0 #000,0 0 14px #8a0b0bcc}
.promo .pr s{color:#a8968088;text-decoration-color:var(--hh-red);text-decoration-thickness:3px}
.promo .badge{font-family:inherit;background:var(--hh-blood);color:#f0e2c8;border-radius:2px;padding:3px 9px;
border:1px dashed #e9dcc666;box-shadow:inset 0 0 8px #000a;transform:rotate(4deg)}
.promo .ps{font-family:inherit;color:#cbb99a;text-shadow:0 1px 1px #000}
.promo .cd span{font-family:inherit;color:#d8c9a8;border-radius:2px;border:1px solid #2a1408;
background:radial-gradient(circle at 20% 30%,#8a4a1f99,transparent 40%),radial-gradient(circle at 80% 70%,#5e2e1288,transparent 45%),linear-gradient(160deg,#4a3a30,#2b211b 50%,#3d2a1e);
box-shadow:inset 0 1px 0 #ffffff1a,inset 0 -2px 4px #000c,0 1px 2px #000;position:relative}
.promo .cd span::before,.promo .cd span::after{content:"";position:absolute;top:3px;width:3px;height:3px;border-radius:50%;background:#1a0f08;box-shadow:0 0 0 1px #6b4a2a88}
.promo .cd span::before{left:3px}.promo .cd span::after{right:3px}
.promo .cd b{color:#eadcbc;font-family:inherit;text-shadow:0 1px 0 #000}
.promo .row{border-top:1px dashed #6b1a1466;font-family:inherit}
.promo .row small{color:#bba98a}.promo .row s{color:#a8968088}.promo .row b{color:var(--hh-red);font-family:inherit;font-weight:900;letter-spacing:.04em}

/* CTA: rough, blood-bordered */
.cta:not(.zalo){border-radius:3px;font-family:inherit;font-weight:900;letter-spacing:.1em;color:#d9221a;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(#140504,#0b0202);
border:2px solid #6e0a0a;text-shadow:0 0 1px #000,1px 1px 0 #000,0 0 10px #c2271f88;
box-shadow:0 0 0 1px #000,0 0 14px 2px #7a0606aa,inset 0 0 14px #5a0404cc;
clip-path:polygon(0 8%,6% 0,30% 4%,55% 0,80% 5%,100% 0,98% 50%,100% 94%,72% 100%,45% 96%,20% 100%,0 95%,2% 50%)}
.cta.sticky{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(#140504,#0b0202);
border:2px solid #6e0a0a;font-size:19px;padding:14px 28px}
@media (prefers-reduced-motion:no-preference){
.cta.sticky{animation:hhBloodBreathSticky 2.6s ease-in-out infinite}
.cta.hh-beat:not(.sticky):not(.zalo){animation:hhBloodBreath 2.6s ease-in-out infinite}
@keyframes hhBloodBreathSticky{
0%,100%{transform:translateX(-50%);box-shadow:0 0 0 1px #000,0 0 10px 1px #7a060688,inset 0 0 14px #5a0404cc;color:#b81c15}
45%{box-shadow:0 0 0 1px #000,0 0 26px 6px #a00b0bcc,inset 0 0 18px #7a0606ee;color:#e3261d}
52%{color:#7a0e0a}55%{color:#e3261d}}
@keyframes hhBloodBreath{
0%,100%{box-shadow:0 0 0 1px #000,0 0 10px 1px #7a060688,inset 0 0 14px #5a0404cc;color:#b81c15}
45%{box-shadow:0 0 0 1px #000,0 0 26px 6px #a00b0bcc,inset 0 0 18px #7a0606ee;color:#e3261d}
52%{color:#7a0e0a}55%{color:#e3261d}}
}
@media (prefers-reduced-motion:reduce){.cta.sticky,.cta.hh-beat{animation:none!important}.cta.sticky{transform:translateX(-50%)}}
.cta.sticky.hh-hidden{animation:none!important}

/* ===== hours under promo ===== */
.promo .hours{margin-top:10px;padding-top:8px;border-top:1px dashed #6b1a1466;font-size:14px;letter-spacing:.04em;color:#e9dcc6;text-shadow:0 0 8px #8a0b0b99,0 1px 2px #000;font-weight:700}
.st .hours{display:block;margin:12px 0 4px;font-size:clamp(14px,3.6vw,18px);letter-spacing:.04em;color:#e9dcc6;text-shadow:0 0 10px #8a0b0bcc,0 1px 2px #000;font-weight:700}

/* promo-out: sticky countdown+book stack */
.cta.sticky.promo-out-cd{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15}
.cta.sticky .st-cd{font-size:.68em;letter-spacing:.04em;opacity:.85;font-variant-numeric:tabular-nums;white-space:nowrap}
.cta.sticky .st-book{white-space:nowrap}

/* ===== force horizontal center on main homepage text ===== */
.promo,.promo .pt,.promo .ps,.promo .hours,.promo .cd,.promo .pr{text-align:center}
.promo .pt{display:block;width:100%;transform:skewX(-4deg);transform-origin:center center;margin-left:auto;margin-right:auto}
.promo .ps,.promo .hours{display:block;width:100%}
.promo .row{justify-content:center;text-align:center;gap:12px}
.promo .row>span{text-align:center}
.brand,.lang{text-align:center}
.end,.end h2,.end .info,.info{text-align:center}
.info{margin-left:auto;margin-right:auto}
.info small{display:inline-block;text-align:center}

/* JA + price one-line + single sticky CTA */
html[lang=ja],html[lang=ja] body{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif}
.end .info,.info{font-size:clamp(12px,3.4vw,15px);line-height:1.45}
.end .info .pline,.info .pline{display:inline-block;max-width:100%;white-space:nowrap;font-size:clamp(11px,2.9vw,14px)}
.end .info .money,.info .money,.info s,.info b{white-space:nowrap}
.end > a.cta:not(.zalo),#dare.cta,#out > a.cta:not(.zalo){display:none!important}

.promo.promo-away{opacity:0!important;visibility:hidden!important;pointer-events:none!important}