/* ============================================================
   지옥 학원 (HELL ACADEMY) — Stylesheet
   ------------------------------------------------------------
   UI 디자인: "지옥학원 프로토타입 (단일파일).html"의 CSS를 그대로 이식.
   (1280×720 고정 스테이지 + 뷰포트 스케일, 심홍 팔레트, Hahmlet/Gowun Batang)
   엔진 연출(배경 크로스페이드·캐릭터 슬롯·CG 효과 등)만 혐관 엔진에서 포팅.
   ============================================================ */

:root {
  --bg-color: #0b060d;
  --text-color: #e8dce4;
  --accent: #e0455a;
  --glow: #ff5a55;
  --font-main: 'Gowun Batang', 'Noto Serif KR', serif;
  --font-title: 'Gowun Batang', 'Noto Serif KR', serif;
  --font-display: 'Hahmlet', 'Gowun Batang', serif;
  --dlg-scale: 1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--text-color);
  font-family: var(--font-main);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
button { font-family: inherit; }

/* ============ 뷰포트 / 스테이지 (프로토타입: 1280×720 고정 → 스케일) ============ */
#app.viewport {
  position: fixed; inset: 0;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#stage {
  width: 1280px; height: 720px;
  position: relative; overflow: hidden;
  background: #0b060d;
  color: #e8dce4;
  flex-shrink: 0;
  /* transform: scale(k) 는 JS fitStage()가 주입 */
}

/* ============ 공통 (프로토타입 원본) ============ */
.ttl { font-family: var(--font-display); color: #f3e3e6; text-shadow: 0 0 30px rgba(255,70,70,.45), 0 2px 24px rgba(0,0,0,.9); }
.sub { font-size: 15px; letter-spacing: .55em; color: #c98a9b; text-transform: uppercase; }
.t-art { position: absolute; inset: 0; background: url("assets/ui/title_bg.webp") center/cover; animation: bgin 3s cubic-bezier(.2,.6,.2,1) both; }
.obg { position: absolute; inset: 0; background: url("assets/ui/title_bg.webp") center/cover; }
.moonglow { position: absolute; left: 42%; top: 6%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,90,80,.35), transparent 65%); filter: blur(10px); animation: pulse 5s ease-in-out infinite; pointer-events: none; }
.fog { position: absolute; left: -20%; right: -20%; bottom: -8%; height: 46%; background: radial-gradient(ellipse 45% 60% at 30% 70%, rgba(120,40,70,.28), transparent 70%), radial-gradient(ellipse 50% 55% at 70% 80%, rgba(60,20,60,.32), transparent 70%); filter: blur(18px); animation: drift 24s ease-in-out infinite alternate; pointer-events: none; }
.fog2 { animation-duration: 33s; animation-direction: alternate-reverse; opacity: .7; bottom: 2%; }
.vig { position: absolute; inset: 0; background: radial-gradient(ellipse 88% 78% at 50% 44%, transparent 40%, rgba(6,2,8,.72) 100%); pointer-events: none; }
.dimov { position: absolute; inset: 0; background: rgba(8,3,10,.9); }
@keyframes bgin { from { transform: scale(1.08); filter: brightness(.2) saturate(.6); } to { transform: scale(1); filter: brightness(1) saturate(1); } }
@keyframes pulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes panelin { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
.caret { display: none; margin-left: 4px; color: #e0455a; font-size: 15px; animation: blink-caret 1.1s infinite; vertical-align: 2px; }
.caret.visible { display: inline-block; }
@keyframes blink-caret { 0%,100% { opacity: 1; } 50% { opacity: .1; } }
.scrl { scrollbar-width: thin; scrollbar-color: #7a2b40 #120810; }
.scrl::-webkit-scrollbar { width: 12px; }
.scrl::-webkit-scrollbar-track { background: #120810; border-left: 1px solid #33141f; }
.scrl::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#8a3145,#4a1826); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; box-shadow: inset 0 0 6px rgba(255,90,80,.28); }
.scrl::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#d05a6e,#8a3145); background-clip: padding-box; }

/* ============ 화면 공통 ============ */
.screen { position: absolute; inset: 0; display: none; }
.screen.visible { display: block; }
.hidden { display: none !important; }

/* ============ 타이틀 (프로토타입 1c) ============ */
.c-ttl-wrap { position: absolute; left: 72px; top: 62px; animation: rise 1.6s 1s both; }
.c-ttl { font-size: 80px; font-weight: 800; letter-spacing: .14em; }
.c-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; justify-content: center; gap: 100px; padding: 34px 0 44px; background: linear-gradient(180deg, transparent, rgba(6,2,8,.9) 55%); animation: rise 1.6s 1.8s both; z-index: 2; }
.c-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; letter-spacing: .45em; text-indent: .45em; color: #c9a2ad; background: none; border: none; cursor: pointer; padding: 6px 10px; transition: color .4s; }
.c-num { font-size: 11px; letter-spacing: .3em; color: #7a4b5c; transition: color .4s; }
.c-ember { width: 5px; height: 5px; border-radius: 50%; background: #5a2836; transition: background .4s, box-shadow .4s; }
.c-btn:hover { color: #fff0ec; }
.c-btn:hover .c-num { color: #e0455a; }
.c-btn:hover .c-ember { background: #ff6a55; box-shadow: 0 0 16px 4px rgba(255,90,70,.55); }
.ver { position: absolute; right: 24px; bottom: 12px; font-size: 12px; color: #8a5b6c; letter-spacing: .15em; z-index: 2; }

/* ============ 이름 입력 (프로토타입 1a) ============ */
#name-entry { position: absolute; inset: 0; z-index: 60; display: none; }
#name-entry.show { display: block; }
.nm { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.nm-eye { font-family: var(--font-display); font-size: 12px; letter-spacing: .55em; text-indent: .55em; color: #a04458; margin-bottom: 18px; }
.nm-q { font-family: var(--font-display); font-size: 30px; letter-spacing: .08em; color: #f3e3e6; text-shadow: 0 0 26px rgba(255,80,70,.4); margin-bottom: 44px; }
.nm-input { background: none; border: none; border-bottom: 1px solid #7a2b40; color: #f6e8ea; font-family: var(--font-display); font-size: 34px; font-weight: 600; text-align: center; padding: 10px 24px; outline: none; caret-color: #ff5a55; letter-spacing: .12em; width: 460px; transition: border-color .35s, box-shadow .35s; user-select: text; -webkit-user-select: text; }
.nm-input::placeholder { color: #5f4453; font-weight: 400; letter-spacing: .2em; }
.nm-input:focus { border-bottom-color: #ff5a55; box-shadow: 0 12px 30px -18px rgba(255,90,80,.7); }
.nm-echo { height: 26px; margin-top: 26px; font-size: 16px; color: #c98a9b; letter-spacing: .04em; opacity: 0; transition: opacity .4s; }
.nm-echo.on { opacity: 1; }
.nm-go { margin-top: 34px; background: linear-gradient(180deg,#3a1522,#22091a); border: 1px solid #7a2b40; color: #f0c6d2; font-family: var(--font-display); font-size: 16px; letter-spacing: .32em; text-indent: .32em; padding: 14px 56px; cursor: pointer; transition: border-color .35s, box-shadow .35s, color .35s, opacity .35s; }
.nm-go:hover { border-color: #ff5a55; color: #ffe9e6; box-shadow: 0 0 20px rgba(200,60,60,.35); }
.nm-go.off { opacity: .32; pointer-events: none; }
.nm-x { position: absolute; right: 28px; top: 28px; z-index: 3; }

/* ============ 게임 화면 ============ */
#screen-game { background: #000; cursor: pointer; }
.layer { position: absolute; inset: 0; pointer-events: none; }

/* --- 배경 (엔진 크로스페이드 2장) --- */
.layer-bg { background: #000; }
.bg-image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transition: opacity 0.8s ease;
}
.bg-image.active { opacity: 1; }
.bg-image.placeholder {
  display: flex; align-items: center; justify-content: center;
  color: rgba(240,214,220,.4); font-size: 24px; letter-spacing: .3em; text-transform: uppercase;
  font-family: var(--font-display);
}

/* --- 게임 화면 비네트 (프로토타입 대화 화면의 .vig) --- */
/* 프로토타입 층 순서: 배경 < 비네트 < 스탠딩(.spr z1) — 캐릭터는 비네트 암화의 영향을 받지 않음 */
.stage-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 88% 78% at 50% 44%, transparent 40%, rgba(6,2,8,.72) 100%); pointer-events: none; z-index: 1; }

/* --- 캐릭터 슬롯 (엔진 3슬롯; placeholder는 프로토타입 .spr 디자인) --- */
.layer-char { z-index: 2; }
/* bottom:17% — 버스트(상체) 스탠딩을 더 위로 올려, 하단 검은(대사창) 영역까지 활용 */
.char-slot {
  position: absolute; bottom: 17%; height: 100%; width: 40%;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.45s ease;
  pointer-events: none;
}
.char-slot[data-pos="left"]   { left: 2%; }
.char-slot[data-pos="center"] { left: 30%; }
.char-slot[data-pos="right"]  { right: 2%; }
.char-slot.visible { opacity: 1; transform: translateY(0); }
.char-slot.dim { filter: brightness(.4) saturate(.4); }

.char-slot.enter-left  { animation: char-enter-left 0.7s cubic-bezier(0.22,0.61,0.36,1) both; }
.char-slot.enter-right { animation: char-enter-right 0.7s cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes char-enter-left  { 0% { opacity: 0; transform: translateX(-80%); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes char-enter-right { 0% { opacity: 0; transform: translateX(80%); }  100% { opacity: 1; transform: translateX(0); } }
.char-slot.exit-left  { animation: char-exit-left 0.5s ease-in both; }
.char-slot.exit-right { animation: char-exit-right 0.5s ease-in both; }
@keyframes char-exit-left  { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-80%); } }
@keyframes char-exit-right { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(80%); } }
.char-slot.bounce { animation: char-bounce 0.85s cubic-bezier(0.28,0.84,0.42,1); }
@keyframes char-bounce {
  0% { transform: translateY(0); } 25% { transform: translateY(-40px); } 45% { transform: translateY(0); }
  60% { transform: translateY(-18px); } 78% { transform: translateY(0); } 88% { transform: translateY(-7px); } 100% { transform: translateY(0); }
}
.char-slot.sit { animation: char-sit 0.7s cubic-bezier(0.4,0,0.2,1); }
@keyframes char-sit { 0% { transform: translateY(0); } 55% { transform: translateY(28px); } 78% { transform: translateY(12px); } 100% { transform: translateY(0); } }
.char-slot.enter-left.enter-slow, .char-slot.enter-right.enter-slow {
  animation-duration: 1.4s !important;
  animation-timing-function: cubic-bezier(0.18,0.55,0.3,1) !important;
}
.char-slot img {
  height: 92%; width: auto; max-width: 100%; max-height: 92%;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
/* 입벌림(talking)·눈감음(blink)은 오버레이가 아니라 하나의 '표정'(base 이미지).
   @expr charon talking / blink 로 대사별 표정 지정 (자동 입모양/깜빡임 없음). */

/* --- 교체 순간 마이크로 바운스 ('동작 중 변화'로 인식) --- */
.char-slot.expr-pop { animation: expr-pop 0.26s ease-out; }
@keyframes expr-pop {
  0%   { transform: translateY(0) scale(1); }
  38%  { transform: translateY(-1.4%) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
/* 놀람(느낌표)용 — 더 크게 위로 튐 */
.char-slot.expr-pop-strong { animation: expr-pop-strong 0.44s cubic-bezier(.2,.9,.3,1.25); }
@keyframes expr-pop-strong {
  0%   { transform: translateY(0) scale(1); }
  28%  { transform: translateY(-4.2%) scale(1.05); }
  58%  { transform: translateY(0.6%) scale(0.99); }
  100% { transform: translateY(0) scale(1); }
}

/* --- 이모트 이펙트 (블루아카이브식 머리 위 팝업, 카론) --- */
/* img.char-emote 명시도(0,2,1)로 '.char-slot img'(0,1,1)의 height:92% 등을 반드시 이겨야 함 */
.char-slot img.char-emote {
  position: absolute; top: 25%; left: 26%;
  height: 13%; width: auto; max-height: 13%;
  object-fit: contain; object-position: center;
  opacity: 0; transform: scale(0.3) translateY(14px);
  transform-origin: bottom center;
  pointer-events: none; z-index: 6;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.55));
}
.char-emote.emote-in { animation: emote-pop 0.52s cubic-bezier(.2,1.5,.5,1) forwards; }
@keyframes emote-pop {
  0%   { opacity: 0; transform: scale(0.3) translateY(14px); }
  55%  { opacity: 1; transform: scale(1.16) translateY(-7px); }
  78%  { transform: scale(0.95) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.char-emote.emote-out { animation: emote-out 0.45s ease forwards; }
@keyframes emote-out {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: scale(1) translateY(-16px); }
}

/* 캐릭터 placeholder — 프로토타입 .spr (점선 아치 + 세로쓰기 라벨) */
.char-slot .char-placeholder {
  width: 270px; height: 530px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(160,90,115,.5);
  border-bottom: none;
  border-radius: 150px 150px 0 0;
  background: radial-gradient(ellipse at 50% 18%, rgba(120,50,80,.3), rgba(18,7,14,.65) 72%) !important;
  color: #a87b8c; font-size: 13px; letter-spacing: .35em;
  writing-mode: vertical-rl; text-align: center;
}
.char-slot .char-placeholder small { font-size: 11px; opacity: .6; margin-top: 10px; }

/* --- CG (엔진) --- */
.layer-cg { display: flex; align-items: center; justify-content: center; z-index: 3; }
.layer-cg.tvoff-bg { background: #000; }
#cg-image {
  position: relative; width: 100%; height: 100%;
  background-color: #000; background-size: contain; background-position: center; background-repeat: no-repeat;
  opacity: 0; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(240,214,220,.4); font-size: 21px; letter-spacing: .2em;
  font-family: var(--font-display);
  overflow: hidden;
}
#cg-image.visible { opacity: 1; }
#cg-image.cg-slide-start { opacity: 0; transform: translateX(8%); }
#cg-image.placeholder { background: rgba(26,10,16,.9); border: 1px solid rgba(224,69,90,.18); }
#cg-image.glitch { animation: cg-shake 0.18s linear infinite; }
#cg-image.glitch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay; animation: cg-scan 1.4s linear infinite;
}
#cg-image.glitch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(120,200,255,0.04); mix-blend-mode: screen; animation: cg-flicker 0.27s steps(2) infinite;
}
@keyframes cg-shake {
  0% { transform: translate(0,0); filter: none; } 20% { transform: translate(-2px,1px); filter: contrast(1.15) brightness(1.05); }
  40% { transform: translate(2px,-1px); filter: hue-rotate(-3deg); } 60% { transform: translate(-1px,-1px); filter: contrast(1.1); }
  80% { transform: translate(1px,1px); filter: brightness(1.08); } 100% { transform: translate(0,0); filter: none; }
}
@keyframes cg-scan { 0% { transform: translateY(0); opacity: .6; } 50% { opacity: 1; } 100% { transform: translateY(8px); opacity: .6; } }
@keyframes cg-flicker { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
#cg-image.tvoff { animation: tv-off 0.65s cubic-bezier(0.55,0,0.4,1) forwards; transform-origin: 50% 50%; }
@keyframes tv-off {
  0% { transform: scale(1,1); filter: brightness(1); opacity: 1; }
  20% { transform: scale(1.02,0.06); filter: brightness(2.5); opacity: 1; }
  55% { transform: scale(0.06,0.012); filter: brightness(3); opacity: 1; }
  100% { transform: scale(0,0); filter: brightness(0); opacity: 0; }
}

/* --- UI 오버레이 (@ui — 입학식 현수막) --- */
.layer-uiimg { z-index: 4; }
#ui-overlay {
  position: absolute; top: 6%; left: 50%;
  max-width: 72%;
  transform: translateX(-50%) translateY(-26px);
  opacity: 0; pointer-events: none;
  transition: opacity .55s ease, transform .55s ease;
}
#ui-overlay.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#ui-overlay img { max-width: 100%; display: block; filter: drop-shadow(0 10px 24px rgba(0,0,0,.55)); }
#ui-overlay.placeholder {
  padding: 20px 52px;
  font-family: var(--font-display); font-size: 22px; letter-spacing: .3em; color: #eccfd4;
  background: rgba(26,10,16,.85); border: 1px dashed rgba(224,69,90,.55);
}

/* --- 소형 아이템 오버레이 (@item) — 기존 화면 위 작은 이미지 ("이런 물건이 있다") --- */
#item-overlay {
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%) scale(0.72) rotate(-3deg);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, 1.35, .5, 1);
}
#item-overlay.visible { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
#item-overlay img {
  height: 44vh; max-height: 46%; width: auto; display: block;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.72)) drop-shadow(0 0 2px rgba(0,0,0,.5));
}
/* 스테이지(1280×720) 기준 높이 — vh 대신 스테이지 비율로 (뷰포트 스케일과 무관하게 일정) */
#item-overlay img { height: 300px; }
#item-overlay.placeholder {
  padding: 26px 40px;
  font-family: var(--font-display); font-size: 20px; letter-spacing: .2em; color: #eccfd4;
  background: rgba(26,10,16,.9); border: 1px dashed rgba(224,69,90,.55);
}

/* --- FX 레이어 (엔진) --- */
.layer-fx { z-index: 5; }
#overlay-light {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 95% at -4% 42%,
    rgba(255,255,255,.99) 0%, rgba(255,255,255,.86) 26%,
    rgba(255,255,255,.38) 52%, rgba(255,255,255,0) 74%);
}
#overlay-fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
#overlay-fade.active { opacity: 1; }
#overlay-fade.blink-anim { animation: blink-open var(--blink-ms, 1600ms) ease-in-out forwards; }
@keyframes blink-open {
  0% { opacity: 1; } 20% { opacity: .48; } 36% { opacity: 1; } 54% { opacity: 1; } 100% { opacity: 0; }
}
#overlay-spin { position: absolute; inset: 0; z-index: 58; pointer-events: none; opacity: 0; --spin-a: 0deg; }
#overlay-spin.active { opacity: 1; }
#overlay-spin.cover  { background: conic-gradient(from -90deg, #000 0deg, #000 var(--spin-a), transparent var(--spin-a)); }
#overlay-spin.reveal { background: conic-gradient(from -90deg, transparent 0deg, transparent var(--spin-a), #000 var(--spin-a)); }
#center-type {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-display); font-size: 42px; letter-spacing: .3em;
  color: rgba(255,255,255,.95); text-shadow: 0 0 24px rgba(255,255,255,.18);
  opacity: 0; transition: opacity .7s ease; z-index: 50; text-align: center;
  pointer-events: none; white-space: nowrap; font-weight: 300;
}
#center-type.visible { opacity: 1; }
#text-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1.04);
  font-family: var(--font-display); font-size: 34px; letter-spacing: .45em;
  color: rgba(255,255,255,.92); text-shadow: 0 0 26px rgba(0,0,0,.6);
  opacity: 0; transition: opacity 1s ease, transform 1.4s ease; z-index: 55;
  text-align: center; pointer-events: none; max-width: 78%; line-height: 1.6; font-weight: 300;
}
#text-card.visible { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* --- 씬 타이틀 (@scenetitle) --- */
#scene-title {
  position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 34px; letter-spacing: .3em; text-indent: .3em;
  color: #f3dde3; text-shadow: 0 0 22px rgba(255,80,70,.45), 0 2px 14px rgba(0,0,0,.9);
  opacity: 0; transition: opacity 1s ease; z-index: 45; pointer-events: none; white-space: nowrap;
}
#scene-title::before { content: '【 '; color: #c9556a; }
#scene-title::after  { content: ' 】'; color: #c9556a; }
#scene-title.visible { opacity: 1; }

/* --- 크레딧 스크롤 (엔진) --- */
#credits-roll {
  position: absolute; inset: 0; background: #000; display: none; overflow: hidden;
  z-index: 200; pointer-events: auto; cursor: pointer;
}
#credits-roll.visible { display: block; }
#credits-content {
  position: absolute; top: 100%; left: 50%; width: 80%; max-width: 720px;
  color: rgba(240,224,228,.9); text-align: center; font-size: 16px; line-height: 1.7;
  padding: 32px 0; transform: translate(-50%, 0);
}
#credits-roll.visible #credits-content { animation: credits-scroll 42s linear forwards; }
@keyframes credits-scroll { 0% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, calc(-100% - 760px)); } }
.credits-section { margin: 48px 0; }
.credits-section h3 { color: #c9556a; font-size: 15px; letter-spacing: .42em; margin-bottom: 18px; font-weight: 400; font-family: var(--font-display); }
.credits-name { font-size: 19px; letter-spacing: .2em; color: rgba(243,227,230,.95); }
.credits-attr { font-size: 13px; letter-spacing: .04em; line-height: 1.85; margin: 4px 0; color: rgba(205,185,195,.72); }
.credits-end p { font-family: var(--font-display); letter-spacing: .3em; color: #c98a9b; }

/* --- 클릭 영역 --- */
#click-area { position: absolute; inset: 0; z-index: 6; pointer-events: auto; }

/* ============ 대화 UI (프로토타입 1a — a-zone) ============ */
.layer-ui { z-index: 7; }
#ui-dialogue.a-zone {
  position: absolute; left: 0; right: 0; bottom: 0; height: 238px;
  /* 스탠딩 하단컷(박스 상단 기준 ~48.8%)은 46%부터 순검정으로 '확실히' 가리되,
     그 위쪽은 위로 갈수록 완만하게 옅어지게 — 검정이 필요 이상 두껍게 올라오지 않게. */
  background: linear-gradient(180deg, transparent 0%, rgba(6,2,9,.3) 14%, rgba(5,2,8,.62) 28%, rgba(3,1,5,.92) 40%, #000 46%);
  pointer-events: auto;
  transition: opacity .4s ease, background .4s ease;
}
/* 일러스트(CG) 표시 중엔 가릴 스탠딩이 없으므로 아래 검정을 얇게 — 일러스트가 더 보이게.
   대사 가독성용으로 하단만 어둡게(텍스트존은 은은히), 검정이 높이 올라오지 않음. */
#screen-game.cg-active #ui-dialogue.a-zone {
  background: linear-gradient(180deg, transparent 0%, rgba(6,2,9,.32) 30%, rgba(3,1,5,.82) 66%, #000 96%);
}
.a-hair { position: absolute; top: 50px; left: 7%; right: 7%; height: 3px; background: linear-gradient(90deg, transparent, #b3495e 26%, #cf5670 50%, #b3495e 74%, transparent); box-shadow: 0 0 9px rgba(205,75,95,.55); }
.a-dia { position: absolute; top: 47px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px; background: #0d0510; border: 1px solid #c9556a; }
.a-body { position: absolute; top: 66px; left: 18%; right: 14%; }
#speaker-name.aname {
  display: inline-block; font-family: var(--font-display); font-size: 20px;
  letter-spacing: .26em; text-indent: .26em; color: #f0a8b6; margin-bottom: 15px;
  text-shadow: 0 0 16px rgba(230,80,90,.45);
}
#speaker-name.aname::before { content: '【 '; }
#speaker-name.aname::after  { content: ' 】'; }
#speaker-name.aname:empty { display: none; }
#dialogue-text.dtx {
  font-size: calc(24px * var(--dlg-scale)); line-height: 1.9; color: #efe2e6;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
#dialogue-text.dtx.narration { color: #c3a9b6; font-size: calc(22px * var(--dlg-scale)); }

/* UI 숨김 (ctl '숨김') + 선택지 표시 중 대화창·컨트롤 숨김 (프로토타입: showText/showCtl = !choiceOpen) */
#screen-game.ui-hidden #ui-dialogue.a-zone,
#screen-game.ui-hidden #ui-quick.ctl,
#screen-game.choice-open #ui-dialogue.a-zone,
#screen-game.choice-open #ui-quick.ctl { opacity: 0; pointer-events: none; }
/* 선택지 표시 중엔 스탠딩·CG를 숨겨 선택지에 집중 (뒤는 검은 배경으로 분리) */
#screen-game.choice-open .layer-char,
#screen-game.choice-open .layer-cg { opacity: 0; transition: opacity 0.32s ease; }

/* --- 우하단 컨트롤 (프로토타입 .ctl) --- */
#ui-quick.ctl {
  position: absolute; right: 26px; bottom: 13px; display: flex; gap: 20px;
  font-family: var(--font-display); font-size: 13px; letter-spacing: .18em; color: #96687a;
  z-index: 8; pointer-events: auto; transition: opacity .4s ease;
}
#ui-quick.ctl button {
  background: none; border: none; color: inherit; font: inherit; letter-spacing: inherit;
  cursor: pointer; padding: 6px 2px; transition: color .3s, text-shadow .3s;
}
#ui-quick.ctl button:hover { color: #ffe9e6; text-shadow: 0 0 12px rgba(255,90,70,.85); }
#ui-quick.ctl button.active { color: #ff8a80; text-shadow: 0 0 12px rgba(255,90,70,.9); }
/* 접기/펼치기 토글 — 하단 버튼들을 숨기고 다시 펼 수 있게 */
#ui-quick.ctl button.ctl-toggle { color: #7d5364; font-size: 15px; letter-spacing: 0; padding: 6px 4px; }
#ui-quick.ctl button.ctl-toggle:hover { color: #ffe9e6; text-shadow: 0 0 12px rgba(255,90,70,.85); }
#ui-quick.ctl.collapsed button:not(.ctl-toggle) { display: none; }

/* ============ 선택지 (프로토타입 3a) ============ */
/* 팟 하고 뜨지 않도록 — 오버레이는 페이드, 선택지 묶음은 살짝 떠오르며 등장 */
#choice-overlay { position: absolute; inset: 0; z-index: 40; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility .45s ease; }
#choice-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
#choice-overlay .ch-wrap { opacity: 0; transform: translateY(18px); transition: opacity .5s ease .08s, transform .55s cubic-bezier(.2,.7,.3,1) .08s; }
#choice-overlay.show .ch-wrap { opacity: 1; transform: translateY(0); }
.ch-dark { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 82% at 50% 50%, rgba(4,1,6,.86), rgba(2,0,3,.97)); z-index: 4; }
.ch-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; padding: 0 40px; z-index: 5; }
.ch-prompt { font-size: 19px; letter-spacing: .05em; color: #d8b3c0; text-shadow: 0 2px 12px #000; max-width: 600px; text-align: center; line-height: 1.75; }
.ch-eyebrow { font-family: var(--font-display); font-size: 12px; letter-spacing: .5em; text-indent: .5em; color: #a04458; margin-bottom: 14px; }
.d-stack { display: flex; flex-direction: column; gap: 24px; width: 600px; }
.d-opt {
  position: relative; display: flex; align-items: center; gap: 20px;
  font-family: var(--font-main); font-size: 22px; color: #c9a2ad;
  background: none; border: none; cursor: pointer; padding: 6px 2px; text-align: left;
  transition: color .45s, transform .45s;
}
.d-mark { font-family: var(--font-display); font-size: 26px; line-height: 1; color: rgba(170,64,84,.42); flex-shrink: 0; transform: scale(1); transition: color .45s, text-shadow .45s, transform .45s; }
.d-lbl { position: relative; }
.d-lbl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px;
  background: linear-gradient(90deg, #c42032, rgba(196,32,50,0) 85%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.d-opt:hover { color: #fff0ec; transform: translateX(9px); }
.d-opt:hover .d-mark { color: #ffb0a6; text-shadow: 0 0 15px rgba(255,90,80,.75); transform: scale(1.16); }
.d-opt:hover .d-lbl::after { transform: scaleX(1); }
/* 이미 골라본 선택지 — 어둡게 가라앉혀 기시감 표시 (호버하면 다시 밝아짐) */
.d-opt.picked { color: #6d4a58; }
.d-opt.picked .d-mark { color: rgba(170,64,84,.22); }
.d-opt.picked:hover { color: #d8b3c0; }

/* ============ 오버레이 공통 (.modal = 프로토타입 .ovl) ============ */
/* 오버레이는 페이드로 등장/퇴장 (타이틀 '불러오기' 등이 뚝 끊기지 않게) */
/* pointer-events는 즉시 꺼짐(transition 안 걸림) → 페이드아웃 0.45s 동안 클릭을 가로채지 않음 */
.modal { position: absolute; inset: 0; z-index: 45; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility .45s; }   /* 선택지(40)보다 위 — 선택 중 열린 로그가 가려지지 않게 */
.modal.visible { opacity: 1; visibility: visible; pointer-events: auto; }

/* ============ 세이브/불러오기 (프로토타입 1a) ============ */
.sv { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 44px 80px 30px; }
.sv-hd { display: flex; align-items: center; gap: 26px; margin-bottom: 34px; }
.sv-tab { background: none; border: none; cursor: pointer; font-family: var(--font-display); font-size: 23px; letter-spacing: .32em; text-indent: .32em; color: #7d5364; padding: 4px 2px; transition: color .35s, text-shadow .35s; }
.sv-tab:hover { color: #c98a9b; }
.sv-tab.on { color: #f3dde3; text-shadow: 0 0 18px rgba(255,80,70,.55); }
.sv-tab.on::before { content: '【 '; }
.sv-tab.on::after { content: ' 】'; }
.sv-sep { color: #4a2233; font-size: 20px; }
.sv-x, .st-x, .lg-x { background: none; border: 1px solid #4a2233; color: #96687a; font-size: 15px; width: 38px; height: 38px; cursor: pointer; transition: border-color .3s, color .3s; }
.sv-x { margin-left: auto; }
.st-x { margin-left: auto; }
.sv-x:hover, .st-x:hover, .lg-x:hover { border-color: #a04458; color: #ffe9e6; }
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.slot { border: none; background: #4a2233; padding: 1px; cursor: pointer; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); text-align: left; font-family: var(--font-main); transition: background .4s, filter .4s, transform .4s; }
.sin { display: flex; flex-direction: column; height: 232px; background: linear-gradient(160deg, rgba(22,10,17,.96), rgba(13,5,11,.95)); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.slot:hover { background: #ff6a5f; filter: drop-shadow(0 6px 20px rgba(220,60,55,.4)); transform: translateY(-3px); }
.thumb { height: 146px; background: url("assets/ui/title_bg.webp") center 32%/cover; border-bottom: 1px solid #3a1626; flex-shrink: 0; }
.smeta { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.srow1 { display: flex; align-items: baseline; gap: 12px; }
.sno { font-family: var(--font-display); font-size: 14px; color: #e0455a; letter-spacing: .1em; }
.sch { font-family: var(--font-display); font-size: 16px; color: #e8cdd6; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow2 { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #8d6274; letter-spacing: .08em; }
.srow2 span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sempty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #6b4757; font-size: 14px; letter-spacing: .28em; text-indent: .28em; }
.semark { font-family: var(--font-display); font-size: 26px; color: rgba(170,64,84,.3); transition: color .4s, text-shadow .4s; }
.slot:hover .semark { color: #d88a9b; text-shadow: 0 0 12px rgba(255,90,80,.5); }
.sv-ft { margin-top: auto; display: flex; align-items: center; padding-top: 22px; }
.pgs { display: flex; gap: 14px; font-size: 12px; color: #7d5364; }
.pg { transition: color .3s; }
.pg.on { color: #e0455a; text-shadow: 0 0 10px rgba(255,80,70,.7); }
.hint { margin-left: auto; font-size: 14px; letter-spacing: .12em; color: #96687a; }

/* ============ 설정 (프로토타입 1a — 창 크기 카드 + 검정 백그라운드) ============ */
.st {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(860px, 90%); max-height: 88%;
  display: flex; flex-direction: column;
  padding: 34px 44px 20px;
  background: linear-gradient(150deg, rgba(20,9,15,.98), rgba(10,4,9,.99));
  border: 1px solid #4a2233;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow: 0 30px 90px rgba(0,0,0,.72);
}
.st-hd { display: flex; align-items: center; margin-bottom: 22px; }
.st-ttl { font-family: var(--font-display); font-size: 24px; letter-spacing: .34em; text-indent: .34em; color: #f3dde3; text-shadow: 0 0 18px rgba(255,80,70,.4); }
.st-ttl::before { content: '【 '; }
.st-ttl::after { content: ' 】'; }
.st-body { flex: 1; overflow: auto; padding-right: 16px; }
.sec { margin-bottom: 26px; }
.sechd { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 13px; letter-spacing: .42em; text-indent: .42em; color: #c9556a; margin-bottom: 4px; }
.sechd::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(122,43,64,.55), transparent); }
.row { display: flex; align-items: center; gap: 24px; padding: 15px 4px; border-bottom: 1px solid rgba(58,22,38,.45); }
.rlab { width: 236px; flex-shrink: 0; }
.rname { font-size: 17px; color: #e2c7d0; }
.rdesc { font-size: 12.5px; color: #8d6274; margin-top: 3px; letter-spacing: .02em; }
.rctl { flex: 1; display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
.rval { width: 52px; text-align: right; font-family: var(--font-display); font-size: 14px; color: #d88a9b; letter-spacing: .04em; }
.rng { -webkit-appearance: none; appearance: none; width: 300px; height: 6px; cursor: pointer; outline: none;
  background: linear-gradient(90deg, #c9556a var(--p, 50%), #33141f var(--p, 50%)); }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; background: #f0c6d2; border: 1px solid #ff6a5f; transform: rotate(45deg); box-shadow: 0 0 10px rgba(255,90,80,.6); }
.rng::-moz-range-thumb { width: 13px; height: 13px; background: #f0c6d2; border: 1px solid #ff6a5f; transform: rotate(45deg); box-shadow: 0 0 10px rgba(255,90,80,.6); border-radius: 0; }
.seg { display: inline-flex; border: 1px solid #4a2233; background: #150a12; }
.segb { background: none; border: none; padding: 8px 20px; font-family: var(--font-main); font-size: 15px; color: #9d7284; cursor: pointer; transition: color .3s, background .3s; }
.segb.on { background: linear-gradient(180deg,#3a1522,#22091a); color: #f3dde3; box-shadow: inset 0 0 14px rgba(160,40,50,.25); }
.segb2 { border-left: 1px solid #4a2233; }
.st-ft { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid #3a1626; }
.gbtn { background: none; border: 1px solid #4a2233; color: #c98a9b; font-family: var(--font-display); font-size: 14px; letter-spacing: .2em; padding: 11px 26px; cursor: pointer; transition: border-color .3s, color .3s, box-shadow .3s; }
.gbtn:hover { border-color: #a04458; color: #ffe9e6; }
.gbtn.prim { margin-left: auto; background: linear-gradient(180deg,#3a1522,#22091a); border-color: #7a2b40; color: #f0c6d2; }
.gbtn.prim:hover { border-color: #ff5a55; box-shadow: 0 0 16px rgba(200,60,60,.3); }

/* ============ 대사록 (프로토타입 1a) ============ */
.lg { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 40px 0 24px; }
.lg-hd { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 60px 20px; border-bottom: 1px solid #3a1626; margin: 0 60px; }
.lg-ttl { font-family: var(--font-display); font-size: 22px; letter-spacing: .36em; text-indent: .36em; color: #f3dde3; text-shadow: 0 0 18px rgba(255,80,70,.4); }
.lg-ttl::before { content: '【 '; }
.lg-ttl::after { content: ' 】'; }
.lg-x { position: absolute; right: 0; width: 36px; height: 36px; }
.lg-scroll { flex: 1; overflow: auto; padding: 14px 16% 50px; }
.le { display: flex; gap: 28px; padding: 17px 4px; border-bottom: 1px solid rgba(58,22,38,.4); transition: background .3s; }
.le:hover { background: rgba(90,21,36,.13); }
.le-name { width: 132px; flex-shrink: 0; text-align: right; font-family: var(--font-display); font-size: 15px; color: #d88a9b; letter-spacing: .06em; padding-top: 4px; }
.le-text { flex: 1; font-size: 19px; line-height: 1.78; color: #e4d5db; }
.le.narr .le-text { color: #9d8592; font-size: 17px; }
.le.narr .le-name { color: #5f4453; font-size: 12px; }
.lg-ft { margin-top: auto; display: flex; align-items: center; padding: 16px 70px 0; border-top: 1px solid #3a1626; }
.lg-hint { font-size: 13.5px; letter-spacing: .1em; color: #8d6274; }
.gbtn2 { margin-left: auto; background: linear-gradient(180deg,#3a1522,#22091a); border: 1px solid #7a2b40; color: #f0c6d2; font-family: var(--font-display); font-size: 13px; letter-spacing: .18em; padding: 9px 20px; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.gbtn2:hover { border-color: #ff5a55; box-shadow: 0 0 14px rgba(200,60,60,.3); }

/* ============ 시스템 메뉴 (프로토타입 1b — 우측 패널) ============ */
.mp { position: absolute; right: 0; top: 0; bottom: 0; width: 440px; background: linear-gradient(90deg, transparent, rgba(9,4,10,.72) 26%, rgba(9,4,10,.96) 60%); display: flex; flex-direction: column; justify-content: center; padding: 0 60px 0 76px; animation: panelin 1s cubic-bezier(.2,.7,.2,1) both; }
.mp-eye { font-family: var(--font-display); font-size: 12px; letter-spacing: .5em; text-indent: .5em; color: #a04458; margin-bottom: 8px; }
.mp-ch { font-family: var(--font-display); font-size: 15px; color: #caa0ac; letter-spacing: .08em; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid #3a1626; }
.mp-list { display: flex; flex-direction: column; gap: 12px; }
.mpb { position: relative; display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 19px; letter-spacing: .22em; color: #cfa8b2; background: rgba(255,120,120,.03); border: 1px solid #4a2233; border-left: 2px solid #7a2b40; padding: 14px 20px; cursor: pointer; overflow: hidden; transition: border-color .4s, color .4s; }
.mpb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(170,40,60,.35), transparent 72%); transform: translateX(-101%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.mpb:hover { border-color: #a04458; border-left-color: #ff5a55; color: #ffe9e6; }
.mpb:hover::before { transform: translateX(0); }
.mpb-tip { width: 7px; height: 7px; border: 1px solid #a04458; transform: rotate(45deg); flex-shrink: 0; transition: background .4s, box-shadow .4s; }
.mpb:hover .mpb-tip { background: #ff5a55; box-shadow: 0 0 12px rgba(255,90,85,.9); }
.mpb-lbl { position: relative; }
.mpb.danger { border-left-color: #8a1f30; }
.mpb.danger:hover { border-color: #ff6a5f; color: #ffb0a6; }

/* ============ 확인 다이얼로그 (프로토타입 1b) ============ */
#modal-confirm { z-index: 50; }
.dlg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.dcard2 { width: 552px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); background: #5a2836; padding: 1px; box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.dcard2-in { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); background: linear-gradient(150deg, rgba(24,10,18,.98), rgba(13,5,11,.97)); padding: 46px 48px 36px; }
.dlg-mark { font-family: var(--font-display); font-size: 34px; color: #c9556a; text-align: center; margin-bottom: 16px; text-shadow: 0 0 16px rgba(255,90,80,.4); }
.dlg-eye { font-family: var(--font-display); font-size: 12px; letter-spacing: .5em; text-indent: .5em; color: #a04458; text-align: center; margin-bottom: 20px; }
.dlg-msg { font-size: 22px; line-height: 1.7; color: #eddbe1; text-align: center; white-space: pre-line; }
.dlg-btns { display: flex; gap: 14px; justify-content: center; margin-top: 34px; }
.dbtn { background: none; border: 1px solid #4a2233; color: #c98a9b; font-family: var(--font-display); font-size: 15px; letter-spacing: .2em; padding: 13px 40px; cursor: pointer; transition: border-color .3s, color .3s, box-shadow .3s, background .3s; }
.dbtn:hover { border-color: #a04458; color: #ffe9e6; }
.dbtn.prim { background: linear-gradient(180deg,#5a1524,#8a1f30); border-color: #c9556a; color: #ffe6e2; }
.dbtn.prim:hover { border-color: #ff5a55; box-shadow: 0 0 20px rgba(200,60,60,.4); }

/* ============ 스토리 안내창 (@confirm — 확인 다이얼로그와 동일 디자인) ============ */
#story-confirm { position: absolute; inset: 0; z-index: 65; display: none; }
#story-confirm.show { display: block; }

/* ============ 로고 스플래시 / 화면 전환 커튼 (뷰포트 고정) ============ */
#logo-splash {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 44%, #1a0a10 0%, #060205 100%);
  opacity: 1; transition: opacity 1.1s ease; cursor: pointer;
}
#logo-splash.hide { opacity: 0; pointer-events: none; }
#logo-splash .logo-wordmark {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(30px, 5.4vmin, 56px); font-weight: 700; letter-spacing: 10px; color: #efd9d4;
  text-shadow: 0 0 26px rgba(224,69,90,.35);
  opacity: 0; transform: scale(0.94);
  transition: opacity 1.8s ease, transform 2.4s cubic-bezier(0.2,0.7,0.2,1);
}
#logo-splash .logo-wordmark small { font-size: 11px; font-weight: 500; letter-spacing: 9px; color: rgba(201,138,155,.75); }
#logo-splash.logo-in .logo-wordmark { opacity: 1; transform: scale(1); }

#screen-fade {
  position: fixed; inset: 0; z-index: 95;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity 0.7s ease;
}
#screen-fade.active { opacity: 1; }

/* ============ 회전 안내 (모바일 세로) ============ */
#rotate-hint {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: #0b060d; color: #e8dce4;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-align: center; font-size: 17px; letter-spacing: .1em;
}
#rotate-hint .rotate-icon { font-size: 46px; color: #e0455a; animation: pulse 2s ease-in-out infinite; }
@media (max-width: 900px) and (orientation: portrait) {
  #rotate-hint { display: flex; }
}

/* ============ 터치 기기 호버 잔상 방지 ============ */
@media (hover: none) {
  .c-btn:hover { color: #c9a2ad; }
  .c-btn:hover .c-num { color: #7a4b5c; }
  .c-btn:hover .c-ember { background: #5a2836; box-shadow: none; }
  .d-opt:hover { color: #c9a2ad; transform: none; }
  .d-opt:hover .d-mark { color: rgba(170,64,84,.42); text-shadow: none; transform: scale(1); }
  .d-opt:hover .d-lbl::after { transform: scaleX(0); }
  .slot:hover { background: #4a2233; filter: none; transform: none; }
  .mpb:hover { border-color: #4a2233; border-left-color: #7a2b40; color: #cfa8b2; }
  .mpb:hover::before { transform: translateX(-101%); }
  #ui-quick.ctl button:not(.active):hover { color: inherit; text-shadow: none; }   /* 오토/스킵 활성색은 유지 */
}