/* =====================================================================
   공통 레이아웃 — 스테이지 · 배경(자모 모션) · 세종 캐릭터 · HUD · 말풍선 · 버튼 · 오버레이
   미디어쿼리 없음(키오스크 해상도 1개). 스테이지 1080×1920 contain-fit.
   화면별 배치는 styles/screens.css, 화면 키보드는 styles/keyboard.css
   ===================================================================== */

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--c-silver-2);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
body { color: var(--c-ink); font-family: var(--font-ui); cursor: none; }
body.is-dev { cursor: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: inherit; -webkit-appearance: none; appearance: none; }
img { display: block; pointer-events: none; -webkit-user-drag: none; }
p, h1, h2, h3 { margin: 0; }

#stage-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--c-silver-2); }
#app {
  position: relative; flex: none; width: var(--stage-w); height: var(--stage-h); overflow: hidden;
  background: var(--c-silver-1);
  transform: scale(var(--app-scale)); transform-origin: center center;
}

/* ── 배경: 은회색 결 + 키비주얼의 빨강·파랑 원 + 떠다니는 훈민정음 자모 ── */
#bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 700px at 20% 12%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(170deg, var(--c-silver-0) 0%, var(--c-silver-2) 55%, var(--c-silver-3) 100%);
}
.bg__disc { position: absolute; border-radius: 50%; transition: transform var(--dur-slow) var(--ease-strong), opacity var(--dur-slow) var(--ease-soft); }
.bg__disc--red  { width: 720px; height: 720px; left: -180px; top: 760px; background: var(--c-red); opacity: .12; }
.bg__disc--blue { width: 640px; height: 640px; right: -200px; top: 560px; background: var(--c-blue); opacity: .10; }
#app[data-screen="ask"] .bg__disc, #app[data-screen="type"] .bg__disc { opacity: .05; }

.jamo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.jamo__g {
  position: absolute; left: var(--x); top: 1960px; font-family: var(--font-serif); font-weight: 700;
  font-size: var(--size); line-height: 1; color: var(--color); opacity: 0;
  animation: jamoFloat var(--dur) linear infinite; animation-delay: var(--delay);
  will-change: transform, opacity;
}
@keyframes jamoFloat {
  0%   { transform: translateY(0) rotate(var(--rot0)); opacity: 0; }
  12%  { opacity: var(--op); }
  88%  { opacity: var(--op); }
  100% { transform: translateY(-2300px) rotate(var(--rot1)); opacity: 0; }
}
/* 대기 화면에서는 자모가 더 또렷하게, 입력 화면에선 옅게 */
#app[data-screen="attract"] .jamo { opacity: 1; }
#app:not([data-screen="attract"]) .jamo { opacity: .45; transition: opacity var(--dur-slow) var(--ease-soft); }

/* ── 세종 캐릭터 (전역 요소 — 화면이 바뀌어도 파괴하지 않고 위치·크기만 트윈) ── */
#sejong {
  position: absolute; left: calc((var(--stage-w) - var(--sj-w)) / 2); bottom: 0; z-index: 1;
  width: var(--sj-w); height: var(--sj-h); pointer-events: none;
  transform-origin: 50% 100%;
  transform: translateY(var(--sj-y, 0px)) scale(var(--sj-s, 1));
  transition: transform var(--dur-slow) var(--ease-strong), opacity var(--dur-med) var(--ease-soft);
  opacity: 0;
}
#sejong.is-ready { opacity: 1; }
.sejong__img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--dur-char) linear; }
/* 교차: 새 이미지는 아래에서 즉시 불투명, 옛 이미지는 위에서 걷어낸다 — 반투명 겹침으로 캐릭터가 비치는 것 방지 */
.sejong__img.is-on { opacity: 1; transition: none; z-index: 1; }
.sejong__img.is-out { z-index: 2; }

/* ── 라우트 뷰 ── */
#view { position: absolute; inset: 0; z-index: 2; }
.page { position: absolute; inset: 0; }

/* ── 상단 띠 + HUD(처음으로) — 모서리 120px(운영 제스처 영역)에는 누를 것을 두지 않는다 ── */
.brand { position: absolute; left: 0; right: 0; top: 40px; z-index: 3; text-align: center; pointer-events: none;
  font-size: 26px; font-weight: 700; letter-spacing: .08em; color: var(--c-ink-dim); opacity: 0; transition: opacity var(--dur-med) var(--ease-soft); }
.brand b { color: var(--c-red); }
#app:not([data-screen="attract"]) .brand { opacity: 1; }
/* 정지 중에는 대기 화면 문구와 겹치므로 숨긴다 */
#app[data-screen="paused"] .brand { opacity: 0; }

.hud { position: absolute; left: 40px; top: 140px; z-index: 4; opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease-soft); }
.hud.is-on { opacity: 1; pointer-events: auto; }
.hud__home {
  display: flex; align-items: center; gap: 12px; height: 88px; padding: 0 30px 0 24px; border-radius: var(--r-pill);
  background: var(--c-white); box-shadow: var(--shadow-card); font-size: 30px; font-weight: 700; color: var(--c-ink-soft);
  transition: transform var(--dur-fast) var(--ease-soft);
}
.hud__home:active { transform: scale(.95); }
.hud__home svg { width: 36px; height: 36px; }

/* ── 말풍선 (세종의 말은 바탕 계열) ── */
.bubble {
  position: absolute; box-sizing: border-box; padding: 34px 44px; border-radius: var(--r-card);
  background: var(--c-white); box-shadow: var(--shadow-card); color: var(--c-ink);
  font-family: var(--font-serif); font-size: 40px; line-height: 60px; word-break: keep-all;
}
.bubble::after {
  content: ""; position: absolute; width: 36px; height: 36px; background: inherit;
  transform: rotate(45deg); border-radius: 6px;
  left: var(--tail-x, 50%); bottom: -16px; margin-left: -18px;
}
.bubble--ui { font-family: var(--font-ui); font-weight: 700; }
.bubble__en { display: block; margin-top: 8px; font-family: var(--font-ui); font-size: 30px; line-height: 42px; font-weight: 500; color: var(--c-ink-dim); }

/* ── 버튼 ── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 14px; box-sizing: border-box;
  height: 120px; padding: 0 44px; border-radius: var(--r-pill);
  font-size: 40px; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft);
}
.btn:active { transform: scale(.96); }
.btn svg { flex: none; width: 42px; height: 42px; }
.btn--primary { background: var(--c-blue); color: var(--c-white); box-shadow: 0 10px 24px rgba(12, 80, 161, .28); }
.btn--accent { background: var(--c-red); color: var(--c-white); box-shadow: 0 10px 24px rgba(239, 63, 55, .28); }
.btn--ghost { background: var(--c-white); color: var(--c-ink-soft); box-shadow: var(--shadow-card); }
.is-locked button, .is-locked [data-act] { pointer-events: none; }

/* ── 하단 시트 (추천 질문·키보드) — 윗변이 캐릭터의 잘린 허리를 덮는다 ── */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  background: var(--c-panel); border-radius: 48px 48px 0 0;
  box-shadow: 0 -18px 48px rgba(34, 31, 32, .10);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ── 오버레이: 잠시 쉬는 중 · 운영자 PIN · 오류 ── */
.overlay { position: absolute; inset: 0; z-index: 20; display: none; }
.overlay.is-on { display: block; }
/* 위쪽은 덮고 아래는 비쳐 두어 '눈 감고 쉬는' 캐릭터가 보이게 한다 */
.paused { background: linear-gradient(to bottom, rgba(245, 245, 246, .93) 0 44%, rgba(245, 245, 246, .55) 100%); }
.paused__card {
  position: absolute; left: 110px; right: 110px; top: 330px; padding: 64px 56px; border-radius: 40px;
  background: var(--c-white); box-shadow: var(--shadow-card); text-align: center;
}
.paused__title { font-family: var(--font-serif); font-size: 64px; line-height: 84px; font-weight: 700; }
.paused__en { margin-top: 12px; font-size: 36px; line-height: 48px; color: var(--c-ink-dim); font-weight: 700; }
.paused__note { margin-top: 28px; font-size: 28px; line-height: 40px; color: var(--c-ink-dim); }

.page--error { background: var(--c-silver-1); z-index: 30; }
.error-box { position: absolute; left: 90px; right: 90px; top: 520px; padding: 56px; border-radius: 32px; background: var(--c-white); box-shadow: var(--shadow-card); }
.error-box__icon { font-size: 80px; color: var(--c-red); }
.error-box__title { margin-top: 20px; font-size: 48px; font-weight: 700; }
.error-box__desc { margin-top: 20px; font-size: 28px; line-height: 42px; color: var(--c-ink-soft); white-space: pre-wrap; word-break: break-all; }

/* ── 운영자 PIN 입력창 (좌상단 5연타) — 운영자용이라 한국어 고정 ── */
.pin { z-index: 40; background: rgba(34, 31, 32, .55); }
.pin__card {
  position: absolute; left: 190px; right: 190px; top: 380px; padding: 48px 48px 36px; border-radius: 36px;
  background: var(--c-white); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); text-align: center;
}
.pin__title { font-size: 32px; line-height: 44px; font-weight: 700; }
.pin__dots { margin-top: 24px; height: 60px; font-size: 44px; line-height: 60px; letter-spacing: 14px; color: var(--c-blue); }
.pin__msg { min-height: 40px; font-size: 26px; line-height: 40px; color: var(--c-red); font-weight: 700; }
.pin__grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pin__key { height: 118px; border-radius: 22px; background: var(--c-silver-1); font-size: 44px; font-weight: 700; box-shadow: var(--shadow-key); }
.pin__key:active { transform: translateY(3px); box-shadow: none; }
.pin__key--ok { background: var(--c-blue); color: var(--c-white); font-size: 34px; }
.pin__key[data-pin="bs"] { font-size: 30px; }
.pin__cancel { margin-top: 24px; width: 100%; height: 96px; border-radius: 22px; background: var(--c-silver-2); font-size: 32px; font-weight: 700; color: var(--c-ink-soft); }