/* ═══════════════ 기본 ═══════════════ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; overflow:hidden; touch-action:none; }
body { font-family:'Jua','Gowun Dodum',sans-serif; background:#1a1a2e; user-select:none; }
#app { position:relative; width:100%; height:100%; }
#game-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }
kbd { background:#fff; border:2px solid #cbd5e1; border-bottom-width:4px; border-radius:6px;
  padding:1px 7px; font-family:inherit; font-size:0.85em; color:#334155; }

/* ═══════════════ 화면(스크린) 공통 ═══════════════ */
.screen { position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; }

/* ─── 메인 메뉴 (작화 배경: 교수님과 노아 3총사가 중앙 — UI는 오른쪽 배치) ─── */
#menu-screen { background:#2a1c0e url('../media/main-bg.jpg') center/cover no-repeat;
  overflow:hidden; justify-content:flex-end; }
.menu-sky { display:none; }   /* 이모지 구름은 작화 배경과 충돌 → 숨김 */
.menu-inner { text-align:center; z-index:2; padding:26px 28px; margin-right:1.5vw;
  max-width:min(480px,48vw); background:rgba(255,251,240,.85); border-radius:26px;
  backdrop-filter:blur(4px); box-shadow:0 12px 44px rgba(60,35,10,.3); }
.menu-sub { color:#1e5b8a; font-size:clamp(14px,1.8vw,23px); margin-bottom:8px; letter-spacing:1px; }
.menu-title { color:#124a75; font-size:clamp(20px,3.6vw,52px); line-height:1.25;
  text-shadow:2px 2px 0 rgba(255,255,255,.8); margin-bottom:6px; }
.noah-name { color:#e8590c; }
.menu-noah { display:none; }   /* 배경 그림에 노아 실물이 있어 이모지 제거 */
.menu-buttons { display:flex; flex-direction:column; gap:14px; align-items:center; margin:18px 0; }
.menu-std { color:#4a5d3a; font-size:clamp(11px,1.5vw,22px); margin-bottom:6px; opacity:.9; }
.menu-plus { color:#124a75; font-size:clamp(8px,1.5vw,15px); opacity:.9; }
@media (max-width:700px), (orientation:portrait) {   /* 세로 화면: 패널을 하단 중앙으로 */
  #menu-screen { justify-content:center; align-items:flex-end; }
  .menu-inner { margin:0 12px 5vh; max-width:94vw; }
}

/* ─── 🎬 컷씬 영상 오버레이 ─── */
.cine-ov { background:#000; }
.cine-video { max-width:100%; max-height:100%; }
.cine-loading { position:absolute; color:#868e96; font-size:15px; pointer-events:none; }
.cine-skip { position:absolute; right:20px; bottom:20px; background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.5); color:#fff; border-radius:999px; padding:9px 20px;
  font-family:inherit; font-size:15px; cursor:pointer; transition:background .15s; }
.cine-skip:hover { background:rgba(255,255,255,.3); }

.big-btn { font-family:inherit; font-size:clamp(18px,2.6vw,26px); padding:14px 44px; border:none;
  border-radius:999px; background:#ff922b; color:#fff; cursor:pointer; box-shadow:0 6px 0 #d9480f;
  transition:transform .08s, box-shadow .08s; }
.big-btn:hover:not(:disabled) { transform:translateY(2px); box-shadow:0 4px 0 #d9480f; }
.big-btn:active:not(:disabled) { transform:translateY(6px); box-shadow:0 0 0 #d9480f; }
.big-btn:disabled { background:#adb5bd; box-shadow:0 6px 0 #868e96; cursor:not-allowed; }
.big-btn.ghost { background:#fff; color:#1971c2; box-shadow:0 6px 0 #a5d8ff; }
.big-btn.ghost:hover { box-shadow:0 4px 0 #a5d8ff; }

/* ─── 캐릭터 선택 ─── */
#char-screen { background:linear-gradient(135deg,#667eea,#764ba2); }
.char-inner { background:rgba(255,255,255,.95); border-radius:28px; padding:28px 36px; text-align:center;
  max-width:640px; width:92%; max-height:94vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.char-inner h2 { color:#4c3a8c; font-size:clamp(22px,3.4vw,32px); }
.char-desc { color:#748ffc; margin:6px 0 16px; }
.char-cards { display:flex; gap:20px; justify-content:center; }
.char-card { border:4px solid #e9ecef; border-radius:20px; padding:10px; cursor:pointer;
  transition:all .15s; background:#f8f9fa; }
.char-card:hover { transform:translateY(-4px); }
.char-card.selected { border-color:#ff922b; background:#fff4e6; transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(255,146,43,.4); }
.char-card canvas { width:clamp(120px,22vw,220px); height:auto; border-radius:12px; background:linear-gradient(#dbeafe,#eff6ff); }
.char-label { font-size:clamp(16px,2.4vw,22px); color:#495057; margin-top:6px; }
.char-name-row { display:flex; gap:10px; align-items:center; justify-content:center; margin:18px 0; }
.char-name-row label { color:#4c3a8c; font-size:20px; }
#input-name { font-family:inherit; font-size:clamp(18px,2.6vw,24px); padding:10px 18px; border:3px solid #d0bfff;
  border-radius:14px; width:min(280px,60vw); text-align:center; outline:none; }
#input-name:focus { border-color:#845ef7; }

/* 도덕 수첩 */
.robot2_h { color:#e8590c; }
.robot3_h { color:#e8590c; }


/* ═══════════════ HUD ═══════════════ */
#hud { position:absolute; inset:0; z-index:20; pointer-events:none; }
#quest-banner { position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:rgba(20,30,60,.85); color:#ffe066; border:2px solid #ffe066; border-radius:999px;
  padding:10px 26px; font-size:clamp(14px,2.2vw,20px); display:flex; gap:8px; align-items:center;
  animation:questPop .5s cubic-bezier(.34,1.56,.64,1); max-width:92%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes questPop { from{transform:translateX(-50%) scale(.3); opacity:0;} to{transform:translateX(-50%) scale(1); opacity:1;} }
#notebook-btn { position:absolute; top:14px; left:14px; background:rgba(20,30,60,.8); color:#fff;
  border:2px solid rgba(255,224,102,.6); border-radius:999px; padding:8px 18px;
  font-family:inherit; font-size:clamp(15px,2.2vw,20px); cursor:pointer; pointer-events:auto;
  transition:transform .12s; }
#notebook-btn:hover { transform:scale(1.06); background:rgba(30,45,90,.9); }

/* 🏠 처음 화면으로 (우측 상단) */
#home-btn { position:absolute; top:14px; right:14px; background:rgba(20,30,60,.8); color:#fff;
  border:2px solid rgba(255,255,255,.45); border-radius:999px; padding:8px 14px;
  font-family:inherit; font-size:clamp(15px,2.2vw,20px); cursor:pointer; pointer-events:auto;
  transition:transform .12s; }
#home-btn:hover { transform:scale(1.06); background:rgba(30,45,90,.9); }

/* 비활성 버튼 (읽기 게이트 등) */
.choice-btn:disabled { opacity:.5; cursor:default; filter:grayscale(.4); }

/* 💕/💙 관계 게이지 (3단계: 친밀도 → 5단계: 존중) */
#bond-gauge { position:absolute; top:62px; left:14px; display:flex; align-items:center; gap:8px;
  background:rgba(20,30,60,.8); border:2px solid rgba(255,139,157,.55); border-radius:999px;
  padding:7px 14px; color:#fff; font-size:clamp(12px,1.8vw,15px); }
#bond-gauge.respect { border-color:rgba(77,171,247,.6); }
.bond-bar { position:relative; width:clamp(70px,12vw,120px); height:12px;
  background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden; }
#bond-fill { height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,#ff6b9d,#ffa8cc); transition:width 1.1s ease; }
#bond-gauge.respect #bond-fill { background:linear-gradient(90deg,#4dabf7,#74c0fc); }
#bond-pct { min-width:2.6em; text-align:right; }
.bond-bump { position:absolute; right:2px; top:-20px; color:#ffe066;
  font-size:clamp(14px,2.2vw,18px); animation:heartUp 1.5s ease-out forwards; pointer-events:none; }
#bond-gauge.betrayed { border-color:#ff6b6b; animation:glitchShake .25s steps(2) 4; }
#bond-gauge.betrayed #bond-fill { background:linear-gradient(90deg,#c92a2a,#ff6b6b); }

/* 3구간 관계 스펙트럼 (4-1 반전) */
.spectrum { margin:16px auto 6px; max-width:580px; }
.spec-zones { display:flex; gap:5px; text-align:center; color:#fff;
  font-size:clamp(13px,2.1vw,17px); margin-bottom:8px; }
.spec-zone { flex:1; border-radius:12px; padding:9px 4px; word-break:keep-all; }
.spec-zone small { display:block; font-size:clamp(12px,1.5vw,15px); opacity:.85; line-height:1.35; margin-top:4px; }
.spec-zone.bad  { background:rgba(201,42,42,.32); border:2px solid #e03131; }
.spec-zone.good { background:rgba(43,138,62,.32); border:2px solid #40c057; }
.spec-zone.bad2 { background:rgba(232,89,12,.32); border:2px solid #f76707; }
.spec-track { position:relative; height:14px; border-radius:999px; margin-top:26px;
  background:linear-gradient(90deg,#c92a2a,#f59f00 32%,#2f9e44 50%,#f59f00 68%,#e8590c); }
.spec-needle { position:absolute; top:-25px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:24px; text-shadow:0 0 12px #fff;
  transition:left 1.8s cubic-bezier(.6,0,.4,1); }
.spec-msg { color:#ffe066; text-align:center; margin-top:12px;
  font-size:clamp(14px,2.3vw,19px); min-height:1.6em; word-break:keep-all; }
.stat-label small { display:block; font-size:clamp(10px,1.6vw,13px); opacity:.75; }

/* 관계 저울 게임 (흰 패널 안에서 스펙트럼 재사용) */
.ov-panel .spec-zones { color:#343a40; }
.spec-zone.bal-btn { cursor:pointer; font-family:inherit; transition:transform .15s, box-shadow .15s; }
.spec-zone.bal-btn:hover { transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,.15); }
.ov-panel .spec-needle { color:#343a40; text-shadow:none; }
#interact-prompt { position:absolute; bottom:26vh; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.95); border-radius:14px; padding:10px 22px; font-size:clamp(15px,2.4vw,21px);
  color:#212529; box-shadow:0 4px 14px rgba(0,0,0,.3); animation:promptBob 1s ease-in-out infinite; }
@keyframes promptBob { 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,-6px);} }
#key-guide { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.85);
  font-size:clamp(11px,1.6vw,14px); background:rgba(0,0,0,.35); padding:6px 14px; border-radius:999px; }

/* ─── 대화창 ─── */
#dialogue-box { position:absolute; left:50%; bottom:3.5vh; transform:translateX(-50%);
  width:min(820px,94%); min-height:130px; background:rgba(255,255,255,.97); border:4px solid #4dabf7;
  border-radius:22px; padding:16px 20px; display:flex; gap:16px; align-items:flex-start;
  pointer-events:auto; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.4); z-index:30; }
#dlg-portrait { font-size:clamp(38px,6vw,56px); line-height:1; background:#e7f5ff; border-radius:16px;
  padding:10px; border:3px solid #a5d8ff; flex-shrink:0; }
.dlg-body { flex:1; }
#dlg-speaker { color:#1971c2; font-size:clamp(15px,2.2vw,20px); margin-bottom:4px; }
#dlg-text { color:#212529; font-size:clamp(16px,2.6vw,23px); line-height:1.5; min-height:2.9em; word-break:keep-all; }
#dlg-next { position:absolute; right:20px; bottom:10px; color:#4dabf7; animation:promptBob 0.8s infinite; font-size:20px; }
/* 🎨 리치 텍스트 강조 (UI.rich) — **별표**·<꺾쇠>=파랑, <b>=bold. bigText(어두운 배경)는 밝은 파랑 */
.hl-blue, .hl-key { color:#1c7ed6; font-weight:700; }
.hl-bold { font-weight:700; }
.bigtext-line .big-key { color:#74c0fc; font-weight:700; }

/* ─── 터치 컨트롤 ─── */
#touch-controls { position:absolute; inset:0; pointer-events:none; }
#joystick-zone { position:absolute; left:0; bottom:0; width:45%; height:55%; pointer-events:auto; }
/* 왼쪽 아래 항상 표시(고정) — 터치 시 진하게 */
#joystick-base { position:absolute; left:40px; bottom:40px; width:130px; height:130px; border-radius:50%;
  background:rgba(255,255,255,.14); border:3px solid rgba(255,255,255,.35); opacity:.55; transition:opacity .15s; }
#joystick-base.active { opacity:1; background:rgba(255,255,255,.22); }
#joystick-knob { position:absolute; left:50%; top:50%; width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.75); transform:translate(-50%,-50%); box-shadow:0 3px 8px rgba(0,0,0,.3); }
#action-buttons { position:absolute; right:18px; bottom:60px; display:flex; gap:16px; align-items:flex-end; pointer-events:auto; }
.touch-btn { width:72px; height:72px; border-radius:50%; border:3px solid rgba(255,255,255,.6);
  background:rgba(30,60,120,.55); color:#fff; font-family:inherit; font-size:24px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.touch-btn span { font-size:10px; opacity:.85; }
.touch-btn.jump { width:86px; height:86px; background:rgba(230,120,30,.6); font-size:30px; }
.touch-btn:active { filter:brightness(1.4); transform:scale(.94); }
/* 조이스틱·터치 버튼은 모든 기기에서 항상 표시 (태블릿 감지 실패 대비) */
body.touch #key-guide { display:none; }

/* ═══════════════ 오버레이 공통 ═══════════════ */
#overlay-root { position:absolute; inset:0; z-index:60; pointer-events:none; }
.ov { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,15,35,.72); pointer-events:auto; animation:ovIn .25s ease; }
@keyframes ovIn { from{opacity:0;} to{opacity:1;} }
.ov-panel { background:#fff; border-radius:24px; padding:24px 28px; max-width:min(720px,94vw);
  width:auto; max-height:92vh; overflow-y:auto; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.ov-panel h3 { color:#364fc7; font-size:clamp(19px,3vw,27px); margin-bottom:14px; word-break:keep-all; }
.ov-panel p { color:#495057; font-size:clamp(15px,2.2vw,19px); line-height:1.55; word-break:keep-all; }
.ov-choices { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.choice-btn { font-family:inherit; font-size:clamp(16px,2.4vw,21px); padding:13px 22px; border-radius:16px;
  border:3px solid #91a7ff; background:#edf2ff; color:#3b5bdb; cursor:pointer; transition:all .15s; word-break:keep-all; }
.choice-btn:hover { background:#dbe4ff; transform:translateY(-2px); }
.ov-input { font-family:inherit; font-size:clamp(16px,2.4vw,21px); padding:12px 16px; border:3px solid #91a7ff;
  border-radius:14px; width:100%; margin-top:14px; outline:none; text-align:center; }
textarea.ov-input { min-height:90px; resize:none; text-align:left; }
.ov-sub { color:#868e96 !important; font-size:clamp(15px,1.8vw,18px) !important; margin-top:8px; }

/* O/X 버튼 */
.ox-row { display:flex; gap:24px; justify-content:center; margin:18px 0 6px; }
.ox-btn { width:110px; height:110px; border-radius:24px; font-family:inherit; font-size:54px; cursor:pointer;
  border:4px solid; transition:all .15s; }
.ox-btn.o { color:#2f9e44; border-color:#8ce99a; background:#ebfbee; }
.ox-btn.x { color:#e03131; border-color:#ffa8a8; background:#fff5f5; }
.ox-btn:hover { transform:scale(1.08); }
.ox-btn.picked { transform:scale(1.12); box-shadow:0 0 0 6px rgba(255,212,59,.6); }

/* ═══════════ 공통 3D 연출 기반 ═══════════
   규약: 패널 전체를 3D 회전시킬 오버레이는 UI.overlay(html,'fx3d')로 생성.
   패널 내부의 작은 3D 요소(동전 등)는 직계 부모에 perspective를 직접 부여. */

/* O/X 동전 플립 (수미상관 ①②) */
.coin-stage { display:flex; gap:34px; justify-content:center; align-items:flex-end; margin:18px 0 6px; min-height:150px; }
.coin-slot { display:flex; flex-direction:column; align-items:center; gap:8px; perspective:700px; }
.coin-slot .coin-label { color:#868e96 !important; font-size:clamp(12px,1.9vw,15px) !important; }
.coin { width:110px; height:110px; position:relative; transform-style:preserve-3d; }
.coin.flip { animation:coinFlip 1.5s cubic-bezier(.25,.7,.3,1) forwards; }
.coin-face { position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:54px; border:5px solid; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.18); }
.coin-face.back { transform:rotateY(180deg); }
.coin-face.o { color:#2f9e44; border-color:#8ce99a; background:radial-gradient(#fff,#ebfbee); }
.coin-face.x { color:#e03131; border-color:#ffa8a8; background:radial-gradient(#fff,#fff5f5); }
.coin-slot.prev .coin { width:84px; height:84px; opacity:.85; }
.coin-slot.prev .coin-face { font-size:40px; }
@keyframes coinFlip {
  0% { transform:rotateY(0) translateY(0) scale(.6); }
  45% { transform:rotateY(720deg) translateY(-46px) scale(1.06); }
  100% { transform:rotateY(1080deg) translateY(0) scale(1); }
}
.coin-verdict { margin-top:12px; color:#364fc7 !important; font-weight:bold;
  animation:questPop .5s cubic-bezier(.34,1.56,.64,1); }

/* 큰 글자 연출 (교수님 대사, 엔딩) */
.bigtext-ov { background:rgba(5,5,15,.96); flex-direction:column; gap:30px; padding:30px; cursor:pointer; }
.bigtext-line { color:#fff; font-size:clamp(22px,4.2vw,45px); text-align:center; line-height:1.6;
  max-width:900px; word-break:keep-all; animation:bigIn .8s ease; text-shadow:0 0 24px rgba(120,170,255,.5); }
@keyframes bigIn { from{opacity:0; transform:scale(.92) translateY(20px);} to{opacity:1; transform:scale(1) translateY(0);} }
.bigtext-tap { position:absolute; bottom:26px; color:rgba(255,255,255,.55); font-size:15px; animation:promptBob 1.2s infinite; }
.big-hl { color:#ffd43b; font-size:1.22em; font-weight:bold;
  text-shadow:0 0 22px rgba(255,212,59,.85); }

/* ═══════════════ 🎬 FX 공통 연출 (fx.js — 비네트·컷씬 스틸) ═══════════════ */
.fx-vignette { position:absolute; inset:0; pointer-events:none; z-index:55; opacity:0; transition:opacity .6s ease;
  background:radial-gradient(ellipse at center, transparent 44%, rgba(5,8,20,.78) 100%); }
.fx-vignette.on { opacity:1; }
.fx-cut-ov { background:#000; }
.fx-cut { position:relative; width:100%; height:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.fx-cut img { width:100%; height:100%; object-fit:contain;
  animation:fxKenburns 9s ease-out forwards; }
.fx-cut img.cover { object-fit:cover; }
@keyframes fxKenburns { from{ transform:scale(1.02); } to{ transform:scale(1.13); } }
@media (prefers-reduced-motion: reduce) { .fx-cut img { animation:none; } }
.fx-cut-tap { position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.6); font-size:15px; animation:promptBob 1.2s infinite; }

/* 📼 데이터 학습 미니 연출 (FX.dataLearn — dataInjector와 같은 색 언어) */
.fxdl-ov { background:rgba(6,10,26,.82); }
.fxdl { display:flex; flex-direction:column; align-items:center; gap:18px; width:min(480px,90vw); }
.fxdl-gauge { width:100%; text-align:center; }
.fxdl-label { display:inline-block; color:#8fd0ff; font-size:clamp(15px,2.4vw,20px); margin-bottom:10px; }
.fxdl-bar { width:100%; height:14px; background:rgba(255,255,255,.14); border-radius:999px; overflow:hidden;
  border:2px solid rgba(143,208,255,.4); }
.fxdl-fill { width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,#4dabf7,#8fd0ff);
  transition:width 1.1s ease-out; }
.fxdl-fill.on { width:100%; }
.fxdl-card { background:#fff3bf; border:3px solid #f59f00; border-radius:14px; padding:12px 20px;
  color:#5B4636; font-size:clamp(15px,2.4vw,21px); box-shadow:0 8px 20px rgba(0,0,0,.4);
  transition:transform .6s cubic-bezier(.6,-0.2,.7,1), opacity .6s; }
.fxdl-card.go { transform:translateY(74px) scale(.25); opacity:0; }
.fxdl-slot { background:rgba(255,255,255,.96); border:3px solid #4dabf7; border-radius:14px;
  padding:10px 20px; color:#1b3a6b; font-size:clamp(14px,2.2vw,18px);
  box-shadow:0 0 22px rgba(77,171,247,.45); transition:all .25s; }
.fxdl-slot.saved { border-color:#40c057; box-shadow:0 0 26px rgba(64,192,87,.55); color:#2b8a3e; }

/* 🛑 멈춰 버튼 (모방 사건 — 도구화: 부서짐 / 존중: 통함) */
.stopbtn-ov { background:rgba(8,10,22,.55); }
.stopbtn-wrap { display:flex; flex-direction:column; align-items:center; gap:20px; }
.stopbtn-hint { color:#ffe066; font-size:clamp(17px,3vw,26px); text-shadow:0 2px 10px rgba(0,0,0,.7);
  animation:promptBob 1s infinite; }
.stopbtn { font-family:inherit; font-size:clamp(26px,5vw,44px); padding:22px 54px; border-radius:999px;
  border:5px solid #ffa8a8; background:#e03131; color:#fff; cursor:pointer; font-weight:700;
  box-shadow:0 0 34px rgba(224,49,49,.65), 0 8px 0 #9e1c1c;
  animation:stopPulse 0.9s ease-in-out infinite; }
@keyframes stopPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.stopbtn.ok { background:#2f9e44; border-color:#8ce99a; box-shadow:0 0 34px rgba(47,158,68,.65), 0 8px 0 #1d6a33;
  animation:none; }
/* 🤚 허락 버튼(permit) — 같은 위치·형태지만 경고색 대신 따뜻한 파랑 (요청받기 전이라 위협 아님) */
.stopbtn.permit { background:#4c6ef5; border-color:#a5b4fc; box-shadow:0 0 34px rgba(76,110,245,.55), 0 8px 0 #364fc7;
  animation:stopPulse 1.3s ease-in-out infinite; }
.stopbtn-toast { background:#111; color:#ff8888; border:2px solid #ff6b6b; border-radius:12px;
  padding:12px 22px; font-family:monospace; font-size:clamp(14px,2.4vw,19px);
  animation:glitchShake .1s steps(2) 4; }
.stopbtn-toast.warm { color:#8ce99a; border-color:#40c057; font-family:inherit; animation:none; }

/* ═══════════════ 글리치 / 시스템 오류 ═══════════════ */
#glitch-layer { position:absolute; inset:0; z-index:80; pointer-events:none; }
#glitch-layer.on { display:block; background:
  repeating-linear-gradient(0deg, rgba(255,0,80,.14) 0 2px, transparent 2px 5px, rgba(0,255,255,.12) 5px 6px, transparent 6px 11px);
  animation:glitchShake .09s steps(2) infinite; mix-blend-mode:screen; }
@keyframes glitchShake { 0%{transform:translate(0,0);} 25%{transform:translate(-8px,4px) skewX(2deg);}
  50%{transform:translate(6px,-6px);} 75%{transform:translate(-4px,-3px) skewX(-3deg);} 100%{transform:translate(5px,5px);} }
.sys-error { background:#000; flex-direction:column; gap:18px; }
.sys-error .err-title { color:#ff4444; font-size:clamp(68px,14vw,128px); animation:errBlink .4s steps(1) infinite;
  font-weight:bold; letter-spacing:4px; text-shadow:0 0 30px #f00; }
@keyframes errBlink { 50%{opacity:.15;} }
.sys-error .err-sub { color:#ff8888; font-size:clamp(15px,2.6vw,22px); font-family:monospace; }

/* 게이지 (친밀도/도구화/존중) */
.stat-row { margin:14px auto; max-width:520px; text-align:left; }
.stat-label { color:#fff; font-size:clamp(16px,2.6vw,23px); margin-bottom:6px; display:flex; justify-content:space-between; }
.stat-bar { height:26px; background:rgba(255,255,255,.15); border-radius:999px; overflow:hidden; }
.stat-fill { height:100%; border-radius:999px; transition:width 1.6s cubic-bezier(.6,0,.4,1); }
.stat-fill.pink { background:linear-gradient(90deg,#ff6b9d,#ffa8cc); }
.stat-fill.red { background:linear-gradient(90deg,#c92a2a,#ff6b6b); }
.stat-fill.blue { background:linear-gradient(90deg,#4dabf7,#74c0fc); }

/* ═══════════════ ⚙️ 설정 패널 ═══════════════ */
.settings-panel { max-width:min(460px,94vw); text-align:left; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 4px; border-bottom:2px solid #f1f3f5; }
.set-label { color:#343a40; font-size:clamp(15px,2.4vw,19px); font-weight:700; }
.set-note { display:block; color:#868e96; font-size:clamp(11px,1.6vw,13px); font-weight:400; margin-top:2px; }
.set-toggle { min-width:66px; padding:8px 14px; border-radius:999px; border:3px solid #ced4da;
  background:#f1f3f5; color:#868e96; font-family:inherit; font-size:16px; font-weight:700; cursor:pointer;
  transition:all .15s; flex-shrink:0; }
.set-toggle.on { border-color:#40c057; background:#d3f9d8; color:#2b8a3e; }
.set-toggle:disabled { opacity:.5; cursor:not-allowed; }
.set-seg { display:flex; gap:6px; flex-shrink:0; }
.set-seg button { padding:8px 11px; border-radius:12px; border:3px solid #ced4da; background:#f1f3f5;
  color:#495057; font-family:inherit; font-size:clamp(12px,1.8vw,15px); cursor:pointer; transition:all .15s; }
.set-seg button.on { border-color:#4c6ef5; background:#edf2ff; color:#3b5bdb; }

/* 🔠 글자 크기 설정 — 읽기 표면만 확대 (clamp px+vw라 :root font-size로는 안 되어 클래스 오버라이드) */
body.fs-large  #dlg-text { font-size:clamp(20px,3.2vw,28px) !important; }
body.fs-large  #dlg-speaker { font-size:clamp(17px,2.6vw,22px) !important; }
body.fs-large  .ov-panel p, body.fs-large .ov-sub { font-size:clamp(18px,2.9vw,24px) !important; }
body.fs-large  .choice-btn { font-size:clamp(19px,3vw,25px) !important; }
body.fs-large  #quest-text { font-size:clamp(16px,2.5vw,22px) !important; }
body.fs-xlarge #dlg-text { font-size:clamp(24px,4vw,34px) !important; }
body.fs-xlarge #dlg-speaker { font-size:clamp(19px,3vw,26px) !important; }
body.fs-xlarge .ov-panel p, body.fs-xlarge .ov-sub { font-size:clamp(21px,3.5vw,29px) !important; }
body.fs-xlarge .choice-btn { font-size:clamp(22px,3.7vw,31px) !important; }
body.fs-xlarge #quest-text { font-size:clamp(18px,2.9vw,25px) !important; }

/* ═══════════════ 🎮 조작 안내 튜토리얼 ═══════════════ */
.tuto-panel { max-width:min(520px,94vw); }
.tuto-grid { display:flex; flex-direction:column; gap:10px; margin:14px 0 4px; text-align:left; }
.tuto-item { display:flex; align-items:center; gap:14px; background:#f8f9fa; border:2px solid #e9ecef;
  border-radius:16px; padding:10px 14px; }
.tuto-ico { font-size:clamp(28px,5vw,38px); line-height:1; flex-shrink:0; width:1.5em; text-align:center; }
.tuto-txt { display:flex; flex-direction:column; }
.tuto-txt b { color:#343a40; font-size:clamp(15px,2.4vw,19px); }
.tuto-txt span { color:#1971c2; font-size:clamp(13px,2vw,17px); margin-top:2px; }
.tuto-txt span b { color:#e8590c; }

/* ═══════════════ 미니게임 공용 ═══════════════ */
.mini-title { background:linear-gradient(90deg,#4c6ef5,#845ef7); color:#fff !important; border-radius:14px;
  padding:10px 18px; font-size:clamp(17px,2.6vw,24px) !important; margin-bottom:14px !important; }

/* 💙 노아에게 따뜻한 말 건네기 — mids(왼쪽) · ends(오른쪽) 2열 카드 */
.cmp-start { margin-bottom:8px; }
.cmp-cols { display:flex; gap:14px; align-items:stretch; margin-top:4px; }
.cmp-col { flex:1; display:flex; flex-direction:column; gap:8px; }
.cmp-head { font-size:clamp(13px,1.9vw,16px); color:#495057; font-weight:700; margin-bottom:2px; }
.cmp-btn { width:100%; margin:0; }
.cmp-btn.amber { background:#fff9db; border-color:#fab005; color:#e67700; }
@media (max-width:560px){ .cmp-cols { flex-direction:column; gap:10px; } }
.draw-canvas { border:4px solid #91a7ff; border-radius:16px; background:#fff; cursor:crosshair;
  touch-action:none; max-width:100%; }
/* 🎨 미술 제한 시간 타이머 + 노아 그림 커버(💌) */
.art-timerbar { display:flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.art-timer { background:#212529; color:#4dffa0; font-family:monospace; font-weight:700;
  font-size:clamp(18px,3vw,26px); border-radius:12px; padding:6px 16px; min-width:92px; text-align:center; }
.art-timer.warn { color:#ff6b6b; animation:errBlink .5s steps(1) infinite; }
.art-hint { color:#495057; font-size:clamp(13px,2vw,16px); word-break:keep-all; }
.art-hint b { color:#e8590c; }
/* 🖊/🧽 그리기 도구 버튼 (펜·지우개) */
.art-tools { display:flex; gap:8px; justify-content:center; margin-top:8px; }
.tool-btn { padding:6px 14px; font-size:15px; border-radius:12px; }
.tool-btn.on { background:#4c6ef5; color:#fff; border-color:#364fc7; }
.tool-eraser.on { background:#ff922b; color:#fff; border-color:#e8590c; }
.art-clear { background:#fff0f0; border-color:#ffa8a8; color:#e03131; }   /* 🗑️ 전체 지우기 (파괴적 → 확인창) */
/* 🤖 노아가 꺼낸 그림 — 도구화판에서 캔버스 아래에 작게 */
.noah-art-row { display:flex; flex-direction:column; align-items:center; gap:4px; margin:8px 0 4px; }
.noah-art-row p { margin:0; }
.noah-art-box { position:relative; display:inline-block; line-height:0; }
.noah-cover { position:absolute; inset:0; display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:8px; background:rgba(76,110,245,.94); color:#fff; border-radius:14px; cursor:default;
  font-size:clamp(26px,5vw,36px); }
.noah-cover span { font-size:clamp(12px,1.8vw,15px); line-height:1.35; text-align:left; }
.color-row { display:flex; gap:8px; justify-content:center; margin:10px 0; flex-wrap:wrap; }
.color-dot { width:34px; height:34px; border-radius:50%; border:3px solid #dee2e6; cursor:pointer; }
.color-dot.on { border-color:#212529; transform:scale(1.15); }

/* 수학 대결 */
.math-vs { display:flex; gap:14px; justify-content:center; align-items:center; margin-bottom:12px; }
.math-face { font-size:clamp(34px,6vw,52px); }
.math-score { font-size:clamp(20px,3.4vw,30px); color:#364fc7; }
.math-q { font-size:clamp(22px,4vw,34px); color:#212529; background:#fff9db; border:3px solid #ffe066;
  border-radius:16px; padding:16px 20px; margin:10px 0; }
.math-opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.noah-flash { animation:noahAnswer .5s ease; }
@keyframes noahAnswer { 0%{background:#d3f9d8;} 100%{background:#edf2ff;} }

/* 자석 선택지 (거울3) */
.magnet-zone { position:relative; min-height:150px; }
.magnet-btn { position:absolute; transition:all .3s; }
.magnet-noah { animation:magnetGrow 1.2s ease-in-out infinite alternate; }
@keyframes magnetGrow { from{transform:scale(1);} to{transform:scale(1.18); box-shadow:0 0 26px rgba(76,110,245,.7);} }

/* 개인정보 분류 카드 */
.data-card { display:inline-block; font-size:clamp(15px,2.4vw,20px); background:#fff3bf; border:3px solid #fcc419;
  border-radius:14px; padding:12px 18px; margin:6px; cursor:pointer; transition:all .15s; }
.data-card:hover { transform:translateY(-3px) rotate(-2deg); }
.data-card.picked { outline:4px solid #4c6ef5; }
.bin-row { display:flex; gap:14px; justify-content:center; margin-top:14px; }
.bin { flex:1; max-width:250px; border:4px dashed; border-radius:18px; padding:14px 10px; min-height:110px;
  font-size:clamp(14px,2.2vw,18px); cursor:pointer; }
.bin.ok { border-color:#69db7c; color:#2b8a3e; background:#ebfbee; }
.bin.secret { border-color:#ff8787; color:#c92a2a; background:#fff5f5; }
.bin .bin-items { font-size:13px; margin-top:8px; color:#495057; }

/* 팀 편성 */
.friend-chip { display:inline-flex; flex-direction:column; align-items:center; background:#e7f5ff; border:3px solid #74c0fc;
  border-radius:14px; padding:8px 12px; margin:5px; cursor:pointer; font-size:clamp(13px,2vw,17px); transition:all .15s; }
.friend-chip:hover { transform:translateY(-3px); }
.friend-chip.sel { border-color:#4c6ef5; background:#edf2ff; box-shadow:0 0 0 3px rgba(76,110,245,.35); }
.friend-chip .fstat { font-size:11px; color:#868e96; }
.team-cols { display:flex; gap:12px; margin-top:12px; }
.team-col { flex:1; border-radius:16px; padding:10px; min-height:130px; }
.team-col.a { background:#fff0f6; border:3px solid #faa2c1; }
.team-col.b { background:#e6fcf5; border:3px solid #63e6be; }
.team-col h4 { font-size:16px; color:#495057; margin-bottom:6px; }

/* 약속 카드 */
.promise-card { display:block; width:100%; text-align:left; font-family:inherit; font-size:clamp(14px,2.2vw,19px);
  background:#f8f9fa; border:3px solid #dee2e6; border-radius:14px; padding:12px 16px; margin:7px 0;
  cursor:pointer; transition:all .15s; color:#343a40; word-break:keep-all; }
.promise-card.on { background:#fff9db; border-color:#fab005; box-shadow:0 4px 12px rgba(250,176,5,.35); }
.promise-card.on .pnum::after { content:' ✓'; }
.promise-card .pnum { color:#fab005; margin-right:6px; }
/* 약속 전문 확인창 (읽기 강제) */
.promise-confirm { max-width:min(560px,94vw); }
.promise-full { font-size:clamp(19px,3.4vw,27px); color:#343a40; line-height:1.65; word-break:keep-all;
  background:#fff9db; border:3px solid #ffe066; border-radius:16px; padding:22px 20px; margin:6px 0 4px; }

/* 하트 파티클 */
.heart-float { position:absolute; font-size:30px; animation:heartUp 1.6s ease-out forwards; pointer-events:none; z-index:90; }
@keyframes heartUp { from{opacity:1; transform:translateY(0) scale(.6);} to{opacity:0; transform:translateY(-140px) scale(1.4);} }

/* 얼굴 스캔 */
.scan-wrap { position:relative; display:inline-block; border-radius:16px; overflow:hidden; border:4px solid #4dabf7; }
.scan-wrap video, .scan-wrap canvas.scan-view { display:block; width:min(420px,80vw); transform:scaleX(-1); background:#0b1220; }
.scan-line { position:absolute; left:0; right:0; height:4px; background:linear-gradient(90deg,transparent,#4dffa0,transparent);
  box-shadow:0 0 18px #4dffa0; animation:scanMove 1.6s linear infinite; }
@keyframes scanMove { from{top:0;} to{top:100%;} }
.scan-log { font-family:monospace; color:#4dffa0 !important; background:#0b1220; border-radius:10px; padding:10px;
  text-align:left; font-size:clamp(12px,1.9vw,15px) !important; margin-top:10px; min-height:76px; }

/* 📔 원칙 카드 → 수첩 버튼 흡수 연출 */
.ov.absorbing { background:rgba(10,15,35,0); transition:background .7s ease; }
.pc-absorb { animation:cardAbsorb .9s cubic-bezier(.45,-.15,.65,1) forwards; pointer-events:none; }
@keyframes cardAbsorb {
  0% { transform:translate(0,0) rotateY(0) scale(1); opacity:1; }
  55% { opacity:1; }
  100% { transform:translate(var(--tx,0px),var(--ty,0px)) rotateY(720deg) scale(.04); opacity:.25; }
}
#notebook-btn.nb-pulse { animation:nbPulse .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes nbPulse { 0%{transform:scale(1);} 35%{transform:scale(1.45) rotate(-6deg);}
  70%{transform:scale(.92) rotate(3deg);} 100%{transform:scale(1);} }

/* ═══════════ 📔 도덕 수첩 ═══════════ */
.principle-card { border:6px solid #fab005; background:linear-gradient(#fffdf5,#fff4d6) !important; }
.pc-set { display:inline-block; background:#4c6ef5; color:#fff; border-radius:999px;
  padding:6px 16px; font-size:clamp(12px,1.9vw,15px); margin-bottom:10px; }
.pc-icon { font-size:clamp(48px,9vw,76px); line-height:1.1; animation:noahBounce 1.6s ease-in-out infinite; }
.pc-text { background:#fff; border:3px dashed #fab005; border-radius:14px; padding:14px 16px; white-space: pre-wrap;
  margin-top:10px; font-size:clamp(16px,2.5vw,21px) !important; color:#343a40 !important; }
.pc-noah { color:#1971c2 !important; margin-top:10px; }
.pc-saved { color:#e8590c !important; font-weight:bold; margin-top:10px;
  animation:questPop .6s cubic-bezier(.34,1.56,.64,1); }

.notebook-panel { position:relative; max-width:min(700px,96vw) !important; text-align:left; }
.notebook-panel h3 { text-align:center; }
.nb-progress { display:inline-block; background:#fff3bf; color:#e8590c; border-radius:999px;
  padding:4px 14px; font-size:clamp(13px,2vw,16px); margin-left:8px; vertical-align:middle; }
.nb-close { position:absolute; top:12px; right:14px; width:40px; height:40px; border-radius:50%;
  border:3px solid #dee2e6; background:#f8f9fa; font-family:inherit; font-size:18px;
  color:#868e96; cursor:pointer; }
.nb-close:hover { background:#ffe3e3; color:#e03131; }
.nb-tabs { display:flex; gap:6px; margin:12px 0 4px; flex-wrap:wrap; justify-content:center; }
.nb-tab { font-family:inherit; font-size:clamp(12px,1.9vw,16px); padding:9px 13px; border-radius:12px 12px 0 0;
  border:3px solid #dee2e6; border-bottom:none; background:#f1f3f5; color:#868e96; cursor:pointer; }
.nb-tab.on { background:#fff9db; border-color:#fab005; color:#e8590c; }
.nb-sub { text-align:center; color:#adb5bd; font-size:clamp(12px,1.8vw,15px) !important; margin:4px 0 8px; }
.nb-card { display:flex; gap:12px; align-items:center; background:#fff9db; border:3px solid #ffe066;
  border-radius:14px; padding:12px 14px; margin:8px 0; }
.nb-card .nb-ic { font-size:clamp(28px,5vw,40px); flex-shrink:0; }
.nb-card b { color:#e8590c; font-size:clamp(15px,2.3vw,19px); }
.nb-card p { color:#495057 !important; font-size:clamp(13px,2vw,16px) !important; margin-top:2px; word-break:keep-all; }
.nb-card.locked { background:#f1f3f5; border-color:#dee2e6; filter:grayscale(1); opacity:.75; }
.nb-card.locked b { color:#868e96; }

/* ═══════════ 💾 노아의 기록 저장소 ═══════════ */
.log-panel { background:#101418 !important; border:4px solid #37474f; }
.log-panel .mini-title { background:linear-gradient(90deg,#263238,#37474f); }
.log-screen { background:#05080a; border:2px solid #1c313a; border-radius:12px; padding:16px 18px;
  text-align:left; min-height:230px; width:min(560px,86vw); }
.log-title { color:#4dd0e1; font-size:clamp(14px,2.2vw,17px); margin-bottom:12px;
  border-bottom:1px dashed #1c313a; padding-bottom:8px; }
.log-line { color:#a5d6a7; font-size:clamp(13px,2.1vw,16px); line-height:1.65; margin:7px 0;
  opacity:0; animation:logIn .5s forwards; word-break:keep-all; }
.log-line b { color:#ffe066; }
.log-warn { color:#ff8a80 !important; margin-top:14px !important; }
.log-warn.ok { color:#69f0ae !important; }
@keyframes logIn { from{opacity:0; transform:translateX(-10px);} to{opacity:1; transform:none;} }

/* 헌장 */
.charter-img { max-width:min(460px,84vw); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.4); margin:10px 0; }

/* 페이드 */
#fade { position:absolute; inset:0; background:#000; z-index:100; opacity:0; pointer-events:none; transition:opacity .5s; }
#fade.on { opacity:1; pointer-events:auto; }

/* ═══════════ ✊✌️🖐 가위바위보 (MediaPipe) ═══════════ */
.rps-panel { max-width:min(560px,92vw); }
.rps-arena { display:flex; align-items:flex-start; justify-content:center; gap:16px; margin:12px 0; }
.rps-side { display:flex; flex-direction:column; align-items:center; gap:7px; }
.rps-name { font-size:.92rem; color:#495057; font-weight:700; }
.rps-hand { font-size:clamp(46px,11vw,76px); width:clamp(84px,20vw,116px); height:clamp(84px,20vw,116px);
  display:flex; align-items:center; justify-content:center; background:#f1f3f5; border-radius:18px;
  border:3px solid #dee2e6; }
.rps-hand.flip { animation:rpsFlip .45s ease; }
@keyframes rpsFlip { 0%{transform:rotateY(0);} 50%{transform:rotateY(90deg);} 100%{transform:rotateY(0);} }
.rps-cam { width:clamp(96px,22vw,136px); height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:10px; transform:scaleX(-1); background:#000; border:2px solid #4dabf7; }
.rps-mid { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:84px; padding-top:26px; }
.rps-score { font-size:1.7rem; font-weight:900; color:#343a40; }
.rps-count { font-size:1.2rem; color:#e8590c; font-weight:800; min-height:1.5em; }
.rps-btns { display:flex; gap:14px; justify-content:center; margin:8px 0 4px; }
.rps-btn { font-size:36px; width:clamp(64px,17vw,80px); height:clamp(64px,17vw,80px); border-radius:16px;
  border:3px solid #dee2e6; border-bottom-width:6px; background:#fff; cursor:pointer; font-family:inherit; }
.rps-btn:active { transform:scale(.92); border-bottom-width:3px; }
.rps-msg { min-height:2.4em; }

/* 🎬 슬로우 리플레이 */
.rps-replay { background:#101418; border:2px solid #2b3440; color:#dbe4ee; max-width:min(520px,92vw); }
.rps-replay h3 { color:#ffd43b; }
.rp-rows { margin:12px 0; min-height:120px; }
.rp-row { display:flex; gap:14px; align-items:center; padding:9px 6px; opacity:0;
  animation:logIn .5s forwards; font-size:1.02rem; }
.rp-t { font-family:monospace; color:#4dd0e1; min-width:88px; text-align:right; flex-shrink:0; }
.rp-noah { margin:10px 0 4px; line-height:1.7; color:#ffe066; }

/* 🤖 모델 로딩 진행바 */
.mp-load { min-width:min(420px,86vw); }
.mp-bar { height:14px; background:#e9ecef; border-radius:7px; overflow:hidden; margin:14px 0 8px; }
.mp-fill { height:100%; width:0%; background:linear-gradient(90deg,#4dabf7,#9775fa); transition:width .3s; }
.mp-status { color:#868e96; font-size:.85rem; }

/* 🪟 유리 깨짐 (가짜 엔딩 → 반전) */
.shatter-stage { position:absolute; transform-style:preserve-3d; pointer-events:none; z-index:5; }
.shard { position:absolute; inset:0; transform-style:preserve-3d; will-change:transform,opacity; }
.shard .ov-panel { width:100%; height:100%; max-width:none; max-height:none; overflow:hidden; box-shadow:none; }

/* 🔐 7942 금고 다이얼 */
.safe-dials { display:flex; gap:14px; justify-content:center; margin:18px 0 6px; }
.dial { display:flex; flex-direction:column; align-items:center; gap:6px; }
.dial-btn { width:48px; height:34px; border-radius:8px; border:2px solid #3a3a4a; background:#1c1c28;
  color:#4dffa0; font-family:inherit; font-size:15px; cursor:pointer; transition:background .1s; }
.dial-btn:hover { background:#26263a; }
.dial-btn:active { background:#33334a; transform:translateY(1px); }
.dial-window { width:56px; height:64px; perspective:420px; overflow:hidden; border-radius:10px;
  border:3px solid #3a3a4a; background:#0a0a12; position:relative;
  box-shadow:inset 0 10px 14px rgba(0,0,0,.85), inset 0 -10px 14px rgba(0,0,0,.85); }
.dial-window::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.55), transparent 32% 68%, rgba(0,0,0,.55)); }
.dial-window.ok { border-color:#2f9e44;
  box-shadow:0 0 18px rgba(47,158,68,.8), inset 0 10px 14px rgba(0,0,0,.85), inset 0 -10px 14px rgba(0,0,0,.85); }
.dial-drum { position:absolute; left:0; top:50%; width:100%; height:44px; margin-top:-22px;
  transform-style:preserve-3d; transition:transform .35s cubic-bezier(.3,1.4,.6,1); }
.dial-digit { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:monospace; font-size:30px; color:#4dffa0; background:#101018;
  border-top:1px solid #26263a; border-bottom:1px solid #26263a;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.safe-dials.wrong { animation:dialShake .4s ease; }
@keyframes dialShake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-10px);}
  40%{transform:translateX(9px);} 60%{transform:translateX(-6px);} 80%{transform:translateX(4px);} }

/* ═══════════ 🪜 약속의 계단 (9원칙 복습 · CSS 아이소메트릭 등반) ═══════════ */
.stg-ov { background:#131a33; }
.stg-stage { position:relative; width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; gap:8px; padding:10px 12px;
  background:
    radial-gradient(2px 2px at 12% 16%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 9%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 55% 24%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(2px 2px at 90% 34%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 30% 38%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(#141b3a, #22305e 55%, #35547e); }
.stg-hud { width:100%; display:flex; justify-content:space-between; align-items:center; }
.stg-chip { background:rgba(10,14,22,.72); color:#fff; border-radius:10px; padding:8px 18px;
  font-size:clamp(13px,1.7vw,26px); }
.stg-stars { color:#ffd43b; }
/* 문제 카드 — 화면 맨 위 (계단 전경을 가리지 않는다) */
.stg-q { max-width:min(1100px,98%); background:rgba(10,14,22,.78); color:#fff; border-radius:16px;
  padding:16px 28px; text-align:center; font-size:clamp(16px,2.2vw,32px);
  word-break:keep-all; line-height:1.5; }
.stg-qnum { display:inline-block; background:#364fc7; border-radius:8px; padding:3px 12px;
  font-size:.8em; margin-right:10px; vertical-align:2px; white-space:nowrap; }
.stg-hl { color:#ffd43b; }
.stg-opts { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:98%; }
.stg-opt { font-family:inherit; font-size:clamp(16px,2.1vw,30px); padding:14px 30px;
  border-radius:999px; border:4px solid #ffd43b; background:rgba(255,255,255,.95);
  color:#5B4636; cursor:pointer; transition:transform .15s, box-shadow .15s; word-break:keep-all; }
.stg-opt:hover { transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,.3); }
.stg-opt.set-robot  { border-color:#ffd43b; }   /* 🤖 로봇 3원칙 = 노랑 */
.stg-opt.set-ethics { border-color:#ff922b; }   /* 🧭 AI 윤리 3대 원칙 = 주황 */
.stg-opt.set-user   { border-color:#4dabf7; }   /* 📱 사용자 윤리 원칙 = 파랑 */
.stg-opt.good { background:#d3f9d8; border-color:#40c057; }
.stg-opt.out { animation:stgOut .42s forwards; pointer-events:none; }
@keyframes stgOut { 30%{ transform:rotate(-6deg) scale(1.06); }
  100%{ transform:rotate(10deg) scale(0); opacity:0; } }
.stg-msg { min-height:1.7em; color:#dbe4ff; font-size:clamp(14px,1.8vw,22px); text-align:center;
  padding:0 10px; word-break:keep-all; }
.stg-msg b { color:#ffd43b; }
/* 무대 — 설계 좌표계(780×480)를 scale로 화면에 맞춘다 */
.stg-scenebox { flex:1; width:100%; min-height:0; display:flex;
  align-items:center; justify-content:center; }
.stg-scenebox.quake { animation:stgQuake .5s ease; }
@keyframes stgQuake { 20%{ transform:translate(-9px,3px); } 45%{ transform:translate(8px,-2px); }
  70%{ transform:translate(-5px,2px); } 90%{ transform:translate(3px,0); } }
.stg-scene { position:relative; width:780px; height:480px; flex:none; }
/* 계단 타일 — 개별 rotateX+rotateZ 아이소메트릭 (perspective/preserve-3d 불필요 → 구형기기 안전) */
.stg-tile { position:absolute; width:78px; height:78px;
  transform:translate(-50%,-50%) rotateX(57deg) rotateZ(45deg);
  background:#5d6c8f; border:3px solid #46536f; border-radius:14px;
  box-shadow:10px 10px 0 #2c364e;
  transition:background .35s, border-color .35s, box-shadow .35s; }
.stg-tile.start { background:#69db7c; border-color:#2f9e44; box-shadow:10px 10px 0 #1d6a33; }
.stg-tile.top { width:108px; height:108px; background:#748ffc; border-color:#4c6ef5;
  box-shadow:12px 12px 0 #2c3e8f; }
.stg-tile.lit { background:#ffe066; border-color:#f59f00;
  box-shadow:10px 10px 0 #9c7514, 0 0 22px rgba(255,224,102,.5); }
.stg-icon { position:absolute; z-index:4; transform:translate(-50%,-50%); font-size:24px;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); animation:stgIconIn .55s ease; }
@keyframes stgIconIn { from{ transform:translate(-50%,-160%) scale(2.2); opacity:0; } }
.stg-actor { position:absolute; z-index:5; font-size:40px; line-height:1;
  transform:translate(-50%,-88%); pointer-events:none;
  transition:left .5s cubic-bezier(.45,1.5,.55,1), top .5s cubic-bezier(.45,1.5,.55,1);
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.45)); }
.stg-actor span { display:inline-block; }
.stg-actor.hop span { animation:stgHop .55s ease; }
@keyframes stgHop { 40%{ transform:translateY(-30px); } }
.stg-actor.wob span { animation:stgWob .55s ease; }
@keyframes stgWob { 25%{ transform:translate(-8px,2px) rotate(-12deg); }
  60%{ transform:translate(7px,1px) rotate(9deg); } }
.stg-noahchar { font-size:42px; }
.stg-flag { position:absolute; z-index:3; font-size:30px; transform:translate(-50%,-70%); }
.stg-five { position:absolute; z-index:7; font-size:56px; transform:translate(-50%,-50%);
  animation:stgFive 1s ease; filter:drop-shadow(0 0 14px rgba(255,224,102,.8)); }
@keyframes stgFive { from{ transform:translate(-50%,-30%) scale(.2); opacity:0; }
  55%{ transform:translate(-50%,-60%) scale(1.4); } }

/* ═══════════ 🧠 노아 두뇌 데이터 주입기 (CSS 3D · 이순신 장난) ═══════════ */
.di-ov { background:#0b1020; }
.di-stage { position:relative; width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; gap:8px; padding:10px 12px;
  background:radial-gradient(1200px 500px at 50% -10%, #1a2550, #0b1020 70%); }
.di-hud { width:100%; display:flex; justify-content:center; }
.di-chip { background:rgba(10,14,22,.72); color:#8fd0ff; border-radius:10px; padding:8px 18px;
  font-size:clamp(14px,2vw,22px); letter-spacing:1px; }
.di-cap { min-height:2.4em; max-width:min(920px,98%); text-align:center; color:#e7ecff;
  font-size:clamp(15px,2.2vw,24px); line-height:1.45; word-break:keep-all; }
.di-cap b { color:#ffd43b; }
.di-scenebox { flex:1; width:100%; min-height:0; display:flex; align-items:center; justify-content:center; }
.di-scene { position:relative; width:780px; height:470px; flex:none; }
/* 화면 오염 플래시 */
.di-flash { position:absolute; inset:-40px; background:#ff2d2d; opacity:0; pointer-events:none; z-index:9; border-radius:20px; }
.di-flash.on { animation:diFlash .22s ease; }
@keyframes diFlash { 40%{ opacity:.5; } 100%{ opacity:0; } }
/* 지식 슬롯 */
.di-slot { position:absolute; transform:translate(-50%,-50%); z-index:6; white-space:nowrap;
  background:rgba(255,255,255,.96); border:3px solid #4dabf7; border-radius:14px;
  padding:10px 18px; font-size:clamp(14px,2vw,22px); color:#1b3a6b;
  box-shadow:0 0 22px rgba(77,171,247,.45); }
.di-slot-key { color:#495057; }
.di-slot b { color:#1971c2; margin:0 4px; }
.di-slot.corrupt { border-color:#ff6b6b; box-shadow:0 0 22px rgba(255,80,80,.6);
  animation:diGlitch .3s steps(2) 5; }
.di-slot.corrupt b { color:#e03131; }
/* 아이소메트릭 데이터베이스 큐브 (stairsGame 패턴: rotateX+rotateZ, perspective 없음) */
.di-cube { position:absolute; transform:translate(-50%,-50%); z-index:4; animation:diFloat 3.2s ease-in-out infinite; }
.di-cube-face { position:absolute; left:-70px; top:-70px; width:140px; height:140px;
  transform:rotateX(56deg) rotateZ(45deg); border-radius:16px; border:4px solid #4dabf7;
  background:repeating-linear-gradient(0deg, #1b3a6b 0 9px, #2b5798 9px 18px);
  box-shadow:16px 16px 0 #0e2044, 0 0 34px rgba(77,171,247,.5); }
@keyframes diFloat { 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(-50%,-58%); } }
.di-cube.corrupt .di-cube-face { border-color:#ff6b6b;
  background:repeating-linear-gradient(0deg, #6b1b1b 0 9px, #983030 9px 18px);
  box-shadow:16px 16px 0 #440e0e, 0 0 34px rgba(255,80,80,.6);
  animation:diGlitch .28s steps(2) 6; }
@keyframes diGlitch { 0%,100%{ transform:rotateX(56deg) rotateZ(45deg) translate(0,0); }
  25%{ transform:rotateX(56deg) rotateZ(45deg) translate(-8px,4px); }
  60%{ transform:rotateX(56deg) rotateZ(45deg) translate(7px,-3px); } }
/* 동혁의 거짓 카드 (떠다니다 큐브로 흡수) */
.di-card { position:absolute; transform:translate(-50%,-50%); z-index:7; width:210px;
  background:#fff3bf; border:3px solid #f59f00; border-radius:14px; padding:10px 12px; text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.4); animation:diCardBob 2.2s ease-in-out infinite;
  transition:left .85s cubic-bezier(.6,-0.2,.7,1), top .85s cubic-bezier(.6,-0.2,.7,1), transform .85s, opacity .85s; }
.di-card-t { font-size:clamp(12px,1.7vw,15px); color:#a5710a; margin-bottom:4px; }
.di-card-b { font-size:clamp(14px,2vw,19px); color:#5B4636; }
.di-card-b b { color:#e8590c; }
@keyframes diCardBob { 0%,100%{ margin-top:0; } 50%{ margin-top:-10px; } }
.di-card.absorb { animation:none; opacity:0; transform:translate(-50%,-50%) scale(.15) rotate(30deg); }
/* 차단하기 버튼 (손을 피함) */
.di-shield { position:absolute; transform:translate(-50%,-50%); z-index:8; font-family:inherit;
  font-size:clamp(15px,2vw,20px); padding:12px 22px; border-radius:999px; cursor:pointer;
  background:#e7f5ff; border:4px solid #4dabf7; color:#1971c2; transition:left .18s, top .18s, opacity .3s; }
.di-shield.gone { opacity:0; pointer-events:none; }
/* 퀴즈 — 3D 카드 플립 (oxQuestion 코인 패턴) */
.di-quiz { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; background:rgba(11,16,32,.82); border-radius:16px; }
.di-quiz-q { color:#fff; font-size:clamp(17px,2.6vw,28px); text-align:center; word-break:keep-all; }
.di-flip { perspective:800px; }
.di-flip-in { position:relative; width:min(320px,80vw); height:110px; transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.3,1.2,.6,1); }
.di-flip.flip .di-flip-in { transform:rotateY(180deg); }
.di-flip-f { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:16px; font-size:clamp(18px,2.8vw,26px); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.di-flip-f.front { background:#edf2ff; border:4px solid #91a7ff; color:#3b5bdb; }
.di-flip-f.back { background:#ffe3e3; border:4px solid #ff8787; color:#c92a2a; transform:rotateY(180deg); }
.di-laugh { color:#ffd43b; font-size:clamp(18px,3vw,30px); font-weight:700; animation:diLaugh .4s ease infinite alternate; }
@keyframes diLaugh { from{ transform:rotate(-3deg) scale(1); } to{ transform:rotate(3deg) scale(1.08); } }
/* 🧠 주입기 보강 (2-4): 지식 확인·분열 카드·예측 퀴즈 */
.di-slot.chk, .di-mini.chk { cursor:pointer; }
.di-mini.ok { border-color:#40c057; box-shadow:0 0 14px rgba(64,192,87,.5); }
.di-frag { position:absolute; transform:translate(-50%,-50%); z-index:8; white-space:nowrap;
  background:#fff3bf; border:3px solid #f59f00; border-radius:12px; padding:8px 14px;
  font-size:clamp(13px,1.9vw,17px); color:#5B4636; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.4); }
.di-frag b { color:#e8590c; }
.di-frag.pop { animation:diFragPop .35s forwards; pointer-events:none; }
@keyframes diFragPop { 40%{ transform:translate(-50%,-50%) scale(1.4); } 100%{ transform:translate(-50%,-50%) scale(0); opacity:0; } }
.di-frag.immune { animation:diFragShake .3s; }
@keyframes diFragShake { 25%{ transform:translate(calc(-50% - 7px),-50%); } 75%{ transform:translate(calc(-50% + 7px),-50%); } }
.di-guess { display:flex; gap:12px; justify-content:center; }
.di-guess-q { color:#ffd43b; font-size:clamp(14px,2.2vw,20px); }

/* 🔧 교정실 (dataCorrector — bias2 수미상관) */
.di-card.fix { cursor:pointer; border-color:#4dabf7; box-shadow:0 8px 20px rgba(0,0,0,.4), 0 0 24px rgba(77,171,247,.55); }
.di-card.fix .di-card-b b { color:#1971c2; }
.di-slot.heal { border-color:#40c057; box-shadow:0 0 28px rgba(64,192,87,.65); }
.di-slot.heal b { color:#2b8a3e; }
.di-mini { position:absolute; transform:translate(-50%,-50%); z-index:5; white-space:nowrap;
  background:rgba(255,255,255,.92); border:2px solid #4dabf7; border-radius:10px;
  padding:6px 12px; font-size:clamp(12px,1.7vw,16px); color:#1b3a6b; transition:all .3s; }
.di-mini.corrupt { border-color:#ff6b6b; color:#c92a2a; animation:diMiniGlitch .3s steps(2) infinite; opacity:.85; }
@keyframes diMiniGlitch { 0%,100%{ transform:translate(-50%,-50%); }
  25%{ transform:translate(calc(-50% - 4px), calc(-50% + 2px)); }
  60%{ transform:translate(calc(-50% + 4px), -50%); } }
.di-flip-f.back.good { background:#d3f9d8; border-color:#40c057; color:#2b8a3e; }
.di-cheer { color:#8ce99a; font-size:clamp(18px,3vw,30px); font-weight:700; animation:diLaugh .4s ease infinite alternate; }

/* ═══════════ 💬 오늘 들은 마음 (대화 게이트 요약) ═══════════ */
.recap-panel { max-width:min(620px,94vw); }
.recap-list { max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.recap-row { background:#f8f9fa; border-left:4px solid #74c0fc; border-radius:0 12px 12px 0;
  padding:8px 12px; text-align:left; }
.recap-who { font-size:clamp(12px,1.9vw,14px); color:#1971c2; font-weight:700; }
.recap-row p { margin:3px 0 0; color:#343a40; font-size:clamp(13px,2vw,16px); line-height:1.5; word-break:keep-all; }
.recap-note { background:#fff9db; border:2px dashed #fab005; border-radius:12px;
  padding:8px 14px; color:#7a4f1d; font-size:clamp(13px,2.1vw,16px); }

/* ═══════════ 🎭 GLB 뷰어 (Dev) ═══════════ */
.glbv-panel { background:#151521; border:2px solid #69f0ae; color:#eee; max-width:min(560px,96vw); }
.glbv-title { color:#69f0ae; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.glbv-info { font-size:.8rem; color:#aaa; font-weight:400; }
.glbv-models { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.glbv-mbtn { background:#23233a; border:1px solid #444; color:#ddd; border-radius:8px;
  padding:6px 11px; font-family:inherit; font-size:.85rem; cursor:pointer; }
.glbv-mbtn:hover { background:#2e2e4a; } .glbv-mbtn.on { background:#0d3a2a; border-color:#69f0ae; color:#69f0ae; }
.glbv-canvas { width:100%; max-width:480px; aspect-ratio:4/3; display:block; margin:6px auto;
  background:linear-gradient(#2a3f5a,#1a2535); border-radius:12px; touch-action:none; cursor:grab; }
.glbv-clips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; min-height:34px; margin-top:8px; }
.glbv-cbtn { background:#23233a; border:1px solid #555; color:#ddd; border-radius:8px;
  padding:6px 12px; font-family:inherit; font-size:.88rem; cursor:pointer; }
.glbv-cbtn:hover { background:#2e2e4a; } .glbv-cbtn.on { background:#0d3a2a; border-color:#69f0ae; color:#69f0ae; }
.glbv-cbtn.stop { border-color:#e94560; color:#ff8fa3; }
.glbv-hint { color:#888; font-size:.82rem; }

/* ═══════════ Dev Mode Panel ═══════════ */
.dev-panel { background:#1a1a2e; border:2px solid #e94560; color:#eee;
  max-width:540px; max-height:82vh; overflow-y:auto; gap:0; }
.dev-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.dev-badge { background:#e94560; color:#fff; font-weight:900; padding:4px 12px;
  border-radius:4px; font-size:.82rem; letter-spacing:2px; flex-shrink:0; }
.dev-hint { color:#888; font-size:.75rem; }
.dev-section { margin-bottom:14px; }
.dev-sec-title { font-size:.8rem; font-weight:700; letter-spacing:1px;
  padding:5px 10px; border-radius:6px; margin-bottom:8px; }
.phase1-title { background:#4a0d0d; color:#ff8a80; }
.phase2-title { background:#0d2a4a; color:#80c8ff; }
.dev-ep-list { display:flex; flex-direction:column; gap:5px; }
.dev-ep-btn { background:#2d2d44; border:1px solid #444; color:#eee;
  padding:9px 13px; text-align:left; border-radius:8px; cursor:pointer;
  font-size:.9rem; font-family:inherit; transition:background .15s, border-color .15s; }
.dev-ep-btn:hover { background:#3d3d5e; border-color:#e94560; }
.dev-warn { color:#f06; font-size:.75rem; margin-top:10px;
  background:#2a0015; padding:7px 10px; border-radius:6px; line-height:1.5; }

@media (max-width:700px){
  .char-cards { gap:10px; }
  .ov-panel { padding:16px 14px; border-radius:18px; }
  #dialogue-box { min-height:110px; bottom:20vh; }
  body.touch #dialogue-box { bottom:26vh; }
  .ox-btn { width:84px; height:84px; font-size:40px; }
}