/* 공통 셸 — TopAppBar · 퀵레일 · 서브레일 · 스테이지
 * 치수는 20260818 B타입 시안 실측값. tokens.css 참조.
 */

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

/* UA 의 [hidden]{display:none} 은 author 의 display 선언에 밀린다.
   .count(grid) · .subrail-tab(grid) 처럼 display 를 지정한 요소가
   hidden 인데도 보이는 사고를 막는다. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
               "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #12161C;
  overflow: hidden;
}

/* UA 기본 border(1px)+padding(1px 6px) 이 카드 높이에 7px 를 더해
   시안과 세로 위치가 어긋난다. 전역으로 지우고 필요한 곳만 다시 준다. */
button {
  font: inherit; color: inherit; cursor: pointer;
  padding: 0; border: 0; background: none; text-align: center;
}
:where(button, a, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.ic { display: block; flex: 0 0 auto; }

/* 화면에는 안 보이지만 스크린리더에는 읽히는 텍스트 */
.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── 스테이지 ────────────────────────────────────────────────────────────
 * 논리 뷰포트를 고정하고 transform 으로 축소해 어떤 화면에도 통째로 담는다.
 * 축소해도 레이아웃 계산은 항상 1194x834(또는 834x1194) 기준이라
 * 시안과 픽셀 단위로 대조할 수 있다. */

#viewport {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  background: #12161C;
  /* 폰트·스케일이 준비될 때까지 그리지 않는다 (boot 이 data-ready 를 붙인다).
     JS 가 죽어도 화면이 영영 비어 있으면 안 되므로 4초 뒤 강제로 드러낸다. */
  opacity: 0;
  transition: opacity .2s ease;
  animation: reveal-fallback .01s linear 4s forwards;
}
html[data-ready] #viewport { opacity: 1; animation: none; }
@keyframes reveal-fallback { to { opacity: 1; } }
#chrome { opacity: 0; transition: opacity .2s ease; }
html[data-ready] #chrome { opacity: 1; }

/* 래퍼는 축소 후 실제 크기를 차지한다.
 * 스테이지를 직접 중앙정렬하면 레이아웃 박스(1194px)가 창보다 클 때
 * grid 가 safe alignment 로 start 에 붙어 스케일 원점이 어긋난다. */
#stage-fit {
  width: calc(var(--stage-w) * var(--fit, 1));
  height: calc(var(--stage-h) * var(--fit, 1));
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease);
}

#stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  transform: scale(var(--fit, 1));
  transform-origin: top left;
  overflow: hidden;
  border-radius: 14px;
  background: var(--canvas);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ── TopAppBar ─────────────────────────────────────────────────────────── */

.appbar {
  position: absolute; inset: 0 0 auto 0; z-index: 40;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px 0 20px;
  background: var(--bar-navy);
  color: #fff;
}

.appbar-btn {
  width: var(--touch); height: var(--touch);
  flex: 0 0 auto;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-lg);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.appbar-btn:active { transform: scale(.96); }
.appbar-btn.profile { background: var(--blue-raw); color: #fff; }
.appbar-btn.profile:hover { background: var(--blue); }
.appbar-btn.menu { background: #fff; color: var(--bar-navy); }
.appbar-btn.menu:hover { background: #E8EDF6; }
.appbar-btn.menu[aria-expanded="true"] { background: #fff; }

.appnav {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 4px;
  margin-left: 8px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.appnav::-webkit-scrollbar { display: none; }
[data-orientation="landscape"] .appnav { -webkit-mask-image: none; }

.appnav button {
  flex: 0 0 auto;
  min-height: var(--touch);
  padding: 0 15px;
  border: 1.5px solid transparent; border-radius: var(--r);
  background: transparent; color: #fff;
  font-size: 16px; font-weight: 600; white-space: nowrap;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.appnav button:hover { background: rgba(255, 255, 255, .10); }
/* 활성 항목은 fill 이 아니라 흰 아웃라인 pill — 시안 그대로 */
.appnav button[aria-current="page"] {
  border-color: #fff; font-weight: 700;
}

.guest-toggle {
  flex: 0 0 auto;
  display: grid; justify-items: center; gap: 3px;
  min-height: var(--touch);
  padding: 4px 2px 0;
  border: 0; background: transparent; color: #fff;
}
.guest-toggle .track {
  width: 52px; height: 26px; padding: 3px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; gap: 4px;
  background: #6E7B93;
  transition: background var(--dur-fast);
}
.guest-toggle .knob {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease);
}
.guest-toggle .state {
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  color: #fff; margin-right: 4px; margin-left: auto;
}
.guest-toggle[aria-pressed="true"] .track { background: var(--blue-raw); }
.guest-toggle[aria-pressed="true"] .knob { transform: translateX(26px); }
.guest-toggle[aria-pressed="true"] .state { margin-left: 4px; margin-right: auto; }
.guest-toggle .label { font-size: 11px; font-weight: 600; white-space: nowrap; }

/* ── 본문 ──────────────────────────────────────────────────────────────── */

.body {
  position: absolute; inset: var(--bar-h) 0 0 0;
  display: flex;
  overflow: hidden;
}

.main {
  flex: 1 1 auto; min-width: 0;
  height: 100%;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* 퀵레일이 열리면 본문 폭이 줄어든다 — B타입의 핵심 동작 */
  padding: 0 var(--main-right, var(--gutter)) var(--main-bottom, 96px) var(--main-left, var(--gutter));
  transition: padding var(--dur) var(--ease);
}
.main::-webkit-scrollbar { display: none; }

/* ── 퀵레일 ─────────────────────────────────────────────────────────────
 * 시안 02 실측: 전체 높이 도킹이 아니라 세로 중앙에 뜬 부유 패널.
 * x1101..1199(99px), y172..739(568px). 본문 중앙과 세로 중심이 같다.
 * 가로에서는 본문 폭을 차감하고, 세로에서는 오버레이라 차감하지 않는다. */

.quickrail {
  position: absolute; top: calc(50% + var(--bar-h) / 2); right: 0; z-index: 30;
  width: var(--rail-w); height: var(--rail-h);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  padding: 24px 0;
  background: #fff;
  border: 1px solid var(--border); border-right: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  box-shadow: -4px 0 18px rgba(22, 32, 46, .10);
  transform: translate(0, -50%);
  transition: transform var(--dur) var(--ease);
}
.quickrail[aria-hidden="true"] {
  transform: translate(100%, -50%);
  pointer-events: none;
}

.quickrail button {
  width: 78px;
  display: grid; justify-items: center; gap: 5px;
  padding: 4px 0;
  border: 0; background: transparent;
  border-radius: var(--r);
}
/* 롤오버에 배경을 깔면 3D 아이콘 뒤로 회색 판이 비친다.
   아이콘 확대와 라벨 색으로만 반응을 준다. */
.quickrail button img { transition: transform var(--dur-fast) var(--ease); }
.quickrail button:hover img { transform: scale(1.06); }
.quickrail button:active img { transform: scale(.98); }
.quickrail button:hover .label { color: var(--blue); }
.quickrail img { width: 60px; height: 60px; display: block; }
.quickrail .label {
  font-size: 12px; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.quickrail .count {
  position: absolute; top: -2px; right: 8px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--cta); color: #fff;
  font-size: 12px; font-weight: 800;
}
.quickrail .slot { position: relative; }

/* 접힘 탭 — 시안에서 x=1162 부근에 붙어 있는 반원형 손잡이 */
.rail-tab {
  /* 시안 01: y333..534 — 본문 세로 중앙보다 23px 위 */
  position: absolute; top: calc(50% + var(--bar-h) / 2 - 23px); right: 0; z-index: 31;
  transform: translateY(-50%);
  width: var(--rail-tab-w); height: var(--rail-tab-h);
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: var(--tab-bg); color: var(--tab-ink);
  transition: right var(--dur) var(--ease), background var(--dur-fast);
}
.rail-tab:hover { background: var(--tab-bg-hover); }
.rail-tab .ic { transition: transform var(--dur) var(--ease); }
.rail-tab[data-open="true"] .ic { transform: rotate(180deg); }
.rail-tab[data-open="true"] { right: var(--rail-w); }

/* ── 서브레일 (상품목록 전용) ───────────────────────────────────────────── */

.subrail {
  position: relative; z-index: 20;
  flex: 0 0 auto;
  width: var(--subrail-w);
  height: 100%;
  padding: 8px 0 96px;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--border);
  scrollbar-width: none;
  transform: translateX(0);
  transition: transform var(--dur) var(--ease);
}
.subrail::-webkit-scrollbar { display: none; }
/* 자리(155px)는 그대로 두고 밀어낸다 — 가운데 상품이 움직이지 않는다 */
.subrail[aria-hidden="true"] { transform: translateX(-100%); pointer-events: none; }

.subrail button {
  width: 100%;
  display: grid; justify-items: center; gap: 6px;
  padding: 14px 8px;
  border: 0; background: transparent;
}
.subrail .thumb {
  width: 100px; height: 100px;
  border: 2px solid transparent; border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--dur-fast);
}
.subrail img { width: 100%; height: 100%; display: block; object-fit: cover; }
.subrail .label {
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-align: center; line-height: 1.35;
}
/* 선택 상태 — 시안은 검정 border 뿐이라 색만으로 구분된다.
 * 브랜드색 + 굵기 + 체크 아이콘을 함께 써서 색맹 사용자도 구분하게 한다. */
.subrail button[aria-current="true"] .thumb { border-color: var(--blue); }
.subrail button[aria-current="true"] .label { color: var(--blue); font-weight: 800; }

.subrail-tab {
  position: absolute; top: calc(50% + var(--bar-h) / 2 - 23px); left: 0; z-index: 21;
  transform: translateY(-50%);
  width: var(--rail-tab-w); height: var(--rail-tab-h);
  display: grid; place-items: center;
  border: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--tab-bg); color: var(--tab-ink);
  transition: left var(--dur) var(--ease), background var(--dur-fast);
}
.subrail-tab:hover { background: var(--tab-bg-hover); }
.subrail-tab .ic { transition: transform var(--dur) var(--ease); }
.subrail-tab[data-open="false"] .ic { transform: rotate(180deg); }
.subrail-tab[data-open="true"] { left: var(--subrail-w); }

/* ── 프레젠터 크롬 (디바이스 프레임 바깥) ─────────────────────────────────
 * 시연 중 발표자만 쓰는 조작부. 캡처에는 포함하지 않는다. */

#chrome {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: nowrap; overflow-x: auto;
  padding: 9px 14px;
  background: rgba(10, 13, 18, .88);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #C6CEDA; font-size: 12.5px;
}
#chrome.hidden { display: none; }
#chrome button {
  flex: 0 0 auto; white-space: nowrap;
  min-height: 32px; padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px;
  background: rgba(255, 255, 255, .06); color: #E6EAF0;
  font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
#chrome button:hover { background: rgba(255, 255, 255, .14); }
#chrome button[aria-pressed="true"] {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
#chrome .sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .14); margin: 0 4px; }
#chrome .meta { flex: 0 0 auto; white-space: nowrap; color: #7E8A9C; font-variant-numeric: tabular-nums; }
/* 가이드 §15 고지 — 디바이스 프레임 밖에 둔다. 화면은 가리지 않는다. */
#chrome .notice { flex: 0 0 auto; white-space: nowrap; color: #9AA5B4; font-size: 11.5px; }
#chrome .notice b { color: #C6CEDA; font-weight: 700; }

/* ── 유휴 레이어 ─────────────────────────────────────────────────────────
 * 셸을 파괴하지 않고 그 위를 덮는다. 셸이 살아 있어야 레일 transition 이 산다. */
.idle-layer { position: absolute; inset: 0; z-index: 60; }
.idle-layer[hidden] { display: none; }

/* ── 화면 전환 ───────────────────────────────────────────────────────────
 * 1Depth → 2Depth 는 앞으로, 이전은 뒤로. 깊이 이동이 방향으로 읽히게 한다. */
/* 제목(.screen-head)은 깊이가 바뀌어도 제자리에 두고 그리드만 슬라이드한다.
   제목까지 함께 움직이면 전환이 '틀어진 것'으로 읽힌다. */
.main.screen-enter > :not(.screen-head) { animation: screen-in-fwd .26s var(--ease) both; }
.main.screen-enter[data-dir="back"] > :not(.screen-head) { animation-name: screen-in-back; }
.main.screen-enter > .screen-head { animation: screen-fade .26s var(--ease) both; }

@keyframes screen-fade { from { opacity: .55; } to { opacity: 1; } }

/* 깊이가 바뀔 때만 가로로 민다. 같은 깊이의 화면 전환은 페이드 + 미세 상승. */
@keyframes screen-in-fwd {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes screen-in-back {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes screen-in-deeper {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes screen-in-shallower {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}
.main.screen-enter[data-dir="deeper"]    > :not(.screen-head) { animation-name: screen-in-deeper; }
.main.screen-enter[data-dir="shallower"] > :not(.screen-head) { animation-name: screen-in-shallower; }
@media (prefers-reduced-motion: reduce) {
  .main.screen-enter > * { animation: none; }
}

/* ── 몰입 모드 ───────────────────────────────────────────────────────────
 * 홈 화면에 추가해 실행하거나 전체화면으로 들어간 상태.
 * 태블릿 화면을 꽉 채우도록 여백·모서리·그림자를 걷어낸다. */
html[data-immersive="1"] #viewport {
  /* iOS 홈 화면 실행 시 상태바·홈 인디케이터 영역만 비운다 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--canvas);
}
html[data-immersive="1"] #stage { border-radius: 0; box-shadow: none; }
html[data-immersive="1"] #chrome { display: none; }

/* 몰입 모드에서 발표자가 조작부를 다시 부를 수 있는 손잡이.
   화면 좌하단 구석을 두 번 눌러 크롬을 토글한다. */
.chrome-handle { display: none; }
html[data-immersive="1"] .chrome-handle {
  position: fixed; left: 0; bottom: 0; z-index: 120;
  width: 56px; height: 56px;
  background: transparent; border: 0;
}
html[data-immersive="1"].chrome-on #chrome { display: flex; }