/* =====================================================================
   기본 레이아웃 — 1080×1920 세로 스테이지 + contain-fit
   (web-kiosk-framework 규약: 고정 캔버스에 그리고 화면 크기에 맞춰 축소)

   레이어 (아래 → 위)
     #bg     배경 그라데이션 — 절대 언마운트하지 않는다
     #paper  종이 (대기·프롤로그·결과에서 켜진다 — 화면이 바뀌어도 같은 자리)
     #page   라우터 스왑 대상
     #chrome 하단 고정 UI (로고·뒤로·홈) + 진행바 — 별개 타임라인, 깜빡이지 않는다
     #ref    피그마 대조용 오버레이 (?ref=1 · 개발 전용)
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;                 /* 레터박스 여백 */
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 키오스크 운영: 선택·드래그·길게눌러 메뉴·더블탭 확대를 전부 막는다 */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: none;                     /* 마우스 커서 숨김 (?dev=1 에서 되살린다) */
}
html.is-dev body { cursor: auto; }

#stagewrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  flex: 0 0 auto;
  transform: scale(var(--app-scale, 1));
  transform-origin: center center;
  overflow: hidden;
  background: var(--bg-top);
  /* IR 터치 패널에서 스크롤·핀치 제스처가 탭을 삼키지 않게 */
  touch-action: none;
}

/* ── 배경 ───────────────────────────────────────────────────────────
   Section 4 프레임 fill = 세로 그라데이션 #FFFFF9 → #FFFDE2 (33:3).
   발주처가 뽑아 준 자산 9(3241×5760 PNG)도 같은 그라데이션을 래스터로 구운 것이라
   CSS 그라데이션이 1:1 로 같고 메모리(18.7MP 텍스처)를 안 쓴다. */
#bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

/* 종이 — 그림자까지 구운 PNG (자산 7 @2x). 종이 본체가 (186,325) 708×896 에 오도록
   PNG 여백(좌우 40 · 위 20 · 아래 60)만큼 물러서 놓는다. */
#paper {
  position: absolute;
  left: var(--paper-left);
  top: var(--paper-top);
  width: var(--paper-w);
  height: var(--paper-h);
  z-index: 1;
  pointer-events: none;
}
#paper img { display: block; width: 100%; height: 100%; }

/* 페이지 콘텐츠 — 라우터 스왑 대상 */
#page {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* 전역 크롬(하단 로고·뒤로·홈·진행바) — 페이지와 별개 레이어·별개 타임라인 */
#chrome {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;             /* 자식 버튼만 되살린다 */
}
#chrome > * { pointer-events: auto; }

/* 피그마 대조 오버레이 — 개발에서만 생긴다 (scripts/devtools.js) */
#ref {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  display: none;
}
#ref img { display: block; width: 100%; height: 100%; }
#ref.is-on { display: block; }
#ref.mode-diff img { mix-blend-mode: difference; }
#ref__hud {
  position: absolute; left: 12px; top: 12px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.7); color: #fff;
  font: 500 20px/1.3 var(--f-mono);
  pointer-events: none; white-space: pre;
}

/* ── 공통 조각 ───────────────────────────────────────────────────── */

/* 점선 구분선 — 시안 SVG 실측: stroke 5 / dash 14 14 (#B9AE97) */
.rule {
  height: 5px;
  flex: 0 0 auto;
  background-image: repeating-linear-gradient(
    to right, var(--dash) 0 14px, transparent 14px 28px);
}

/* 하단 큰 버튼 (대기 CTA · 터치하여 계속 · 입력 완료) — 33:9 실측 */
.btn-main {
  position: absolute;
  left: var(--btn-left);
  top: var(--btn-top);
  width: var(--btn-w);
  height: var(--btn-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  background: var(--btn);
  border: 0;
  border-radius: var(--btn-radius);
  color: var(--btn-label);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: normal;
  word-break: keep-all;
  white-space: nowrap;
  transition: opacity 200ms ease, filter 200ms ease;
}
.btn-main:disabled { opacity: 0.35; }
.btn-main.is-press, .btn-main:active { filter: brightness(1.18); }

/* 모든 텍스트는 라이브 텍스트. 한글은 어절 단위로만 끊는다. */
h1, h2, h3, p, span, button { word-break: keep-all; }

/* 접근성: 화면에는 안 보이지만 스크린리더는 읽는 라벨 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}