/* 시연 무대 — 기기 틀 안에 실제 작품 화면. 틀 안 iframe 은 실제 해상도로 그리고 transform 으로만 줄인다 */
.stage-page { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr; background: var(--stage); overflow: hidden; isolation: isolate; }
.stage-page::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 42%, color-mix(in oklab, var(--acc) 16%, transparent), transparent 70%), radial-gradient(40% 18% at 50% 100%, color-mix(in oklab, var(--acc) 10%, transparent), transparent); }
.stage-bar { display: flex; align-items: center; gap: 10px; padding: 10px clamp(10px, 2vw, 20px); border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 70%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 5; min-width: 0; }
.stage-bar .title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stage-bar .title b { font-weight: 700; letter-spacing: var(--track-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-bar .title .swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--acc); flex: none; }
.stage-bar .spacer { flex: 1; }
.role-switch { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; max-width: 52vw; }
.role-switch button { position: relative; height: 32px; padding: 0 12px; border: 0; background: transparent; border-radius: var(--r-pill); color: var(--text-2); font-weight: 620; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur) var(--ease-out); }
.role-switch button svg { width: 15px; height: 15px; }
.role-switch button[aria-pressed='true'] { color: var(--text); }
.role-switch .pill { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px var(--line); transition: transform var(--dur-slow) var(--ease-spring), width var(--dur-slow) var(--ease-spring), height var(--dur-slow) var(--ease-spring); z-index: 0; pointer-events: none; }
.role-switch .pill.instant { transition: none; }
.role-switch button > * { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .stage-bar { flex-wrap: wrap; row-gap: 8px; }
  .role-switch { order: 10; width: 100%; max-width: 100%; }
  .stage-bar .lbl { display: none; }
}
/* 크게 보기: 옆 패널을 접고 틀이 화면을 꽉 채움(PC 창·대형 화면은 실제 해상도도 화면 크기로) */
.stage.wide { grid-template-columns: 1fr; }
.stage.wide .side { display: none; }
.stage.wide .floor { padding: 10px; }
.stage.wide .dev-box::after { display: none; }

.stage { position: relative; display: grid; grid-template-columns: 1fr auto; min-height: 0; }
.stage .floor { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: clamp(16px, 3vw, 40px); }
.stage .side { width: 320px; border-left: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 60%, transparent); padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 1100px) { .stage { grid-template-columns: 1fr; } .stage .side { display: none; } }
.stage .side h3 { margin: 0; font-size: 1.2rem; letter-spacing: var(--track-tight); }
.stage .side p { margin: 0; color: var(--text-2); font-size: .94rem; }
.stage .side .qr { display: grid; place-items: center; padding: 14px; border-radius: var(--r-lg); background: #fff; aspect-ratio: 1; }
.stage .side .qr svg { width: 100%; height: 100%; }
.stage .side .qr-cap { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
.count { font-variant-numeric: tabular-nums; }

/* 기기 크기 상자(줄인 크기) → 그 안에 실제 크기 기기를 scale */
.dev-box { position: relative; width: calc(var(--ow) * var(--k) * 1px); height: calc(var(--oh) * var(--k) * 1px); transition: width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out); }
.dev-box::after { /* 바닥 반사광 */ content: ''; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--acc) 30%, transparent), transparent); filter: blur(10px); opacity: .7; pointer-events: none; }
.device { position: absolute; left: 0; top: 0; width: calc(var(--ow) * 1px); height: calc(var(--oh) * 1px); transform-origin: 0 0; transform: scale(var(--k));
  animation: dev-on var(--dur-story) var(--ease-out) both; }
@keyframes dev-on { from { opacity: 0; translate: 0 18px; } }
.device .screen { position: absolute; overflow: hidden; background: #000; }
.device iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.device iframe.ready { opacity: 1; }
.device .loading { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; background: var(--bg-2); color: var(--text-2); transition: opacity var(--dur-slow) var(--ease-out); text-align: center; padding: 10%; }
.device .loading.gone { opacity: 0; pointer-events: none; }
.device .loading .ring { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--acc); animation: spin var(--dur-spin) linear infinite; }
.device .loading b { color: var(--text); font-size: 1.4em; letter-spacing: var(--track-tight); }

/* 폰 */
.device.phone { border-radius: 64px; background: linear-gradient(145deg, #2a2d33, #0d0e11 40%, #1b1d22); box-shadow: 0 0 0 2px #3a3d44 inset, 0 60px 120px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); }
.device.phone .screen { inset: 14px; border-radius: 50px; }
.device.phone .status { position: absolute; left: 0; right: 0; top: 0; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 40px; font: 600 16px/1 var(--font); color: #fff; background: #000; z-index: 2; }
.device.phone .status .icons { display: flex; gap: 6px; align-items: center; }
.device.phone .status .icons i { display: block; width: 18px; height: 11px; border-radius: 3px; border: 1.5px solid #fff; position: relative; }
.device.phone .status .icons i::after { content: ''; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: #fff; border-radius: 1px; }
.device.phone .status .bars { display: flex; gap: 2px; align-items: end; height: 11px; }
.device.phone .status .bars span { width: 3px; background: #fff; border-radius: 1px; }
.device.phone .island { position: absolute; top: 11px; left: 50%; width: 122px; height: 34px; margin-left: -61px; border-radius: 20px; background: #000; z-index: 3; }
.device.phone iframe, .device.phone .loading { top: 50px; height: calc(100% - 50px); bottom: auto; }
.device.phone .home { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(120,120,120,.55); z-index: 3; pointer-events: none; }
.device.phone .btn-side { position: absolute; width: 4px; border-radius: 2px; background: #2a2d33; }

/* 패드 */
.device.tablet { border-radius: 44px; background: linear-gradient(145deg, #2b2e34, #121317); box-shadow: 0 0 0 2px #3a3d44 inset, 0 60px 120px -30px rgba(0,0,0,.6); }
.device.tablet .screen { inset: 22px; border-radius: 24px; }
.device.tablet .cam { position: absolute; top: 50%; left: 8px; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: #0b0c0f; box-shadow: 0 0 0 1.5px #24262b; }
.device.tablet.portrait .cam { top: 8px; left: 50%; margin: 0 0 0 -3px; }

/* PC 브라우저 창 */
.device.desktop { border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 60px 140px -40px rgba(0,0,0,.55); overflow: hidden; }
.device.desktop .chrome { position: absolute; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; gap: 18px; padding: 0 20px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.device.desktop .lights { display: flex; gap: 8px; }
.device.desktop .lights i { width: 13px; height: 13px; border-radius: 50%; background: #ff5f57; }
.device.desktop .lights i:nth-child(2) { background: #febc2e; } .device.desktop .lights i:nth-child(3) { background: #28c840; }
.device.desktop .url { flex: 1; max-width: 640px; margin: 0 auto; height: 32px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; color: var(--text-2); }
.device.desktop .url svg { width: 14px; height: 14px; color: var(--ok); }
.device.desktop .screen { left: 0; right: 0; bottom: 0; top: 52px; }

/* 세로 키오스크 */
.device.kiosk { border-radius: 26px; background: linear-gradient(180deg, #23262c, #101114); box-shadow: 0 0 0 2px #34373e inset, 0 80px 140px -40px rgba(0,0,0,.6); }
.device.kiosk .screen { inset: 30px 30px 150px; border-radius: 8px; }
.device.kiosk .chin { position: absolute; left: 30px; right: 30px; bottom: 34px; height: 82px; border-radius: 12px; background: linear-gradient(180deg, #17191d, #0e0f12); display: flex; align-items: center; justify-content: center; gap: 22px; }
.device.kiosk .chin i { width: 160px; height: 8px; border-radius: 4px; background: #000; box-shadow: 0 0 0 1px #2a2c31; }
.device.kiosk .chin b { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3b4a5c, #0b0c0f 70%); }

/* 대형 화면 */
.device.wall { border-radius: 14px; background: #0b0c0e; box-shadow: 0 0 0 2px #26282d inset, 0 70px 140px -40px rgba(0,0,0,.65); }
.device.wall .screen { inset: 16px; border-radius: 4px; }

/* 틀 없이(새 창 권장 안내) */
.frame-note { max-width: 520px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.frame-note h2 { margin: 0; font-size: var(--fs-h2); letter-spacing: var(--track-tight); }
.frame-note p { margin: 0; color: var(--text-2); }
.frame-note .acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* 폰 화면에서 허브를 볼 때: 틀 대신 꽉 찬 화면 */
@media (max-width: 640px) {
  .stage-bar .btn .lbl { display: none; }
}
/* 크게 줄어드는 기기(키오스크·대형 화면)는 안내 글자를 키워 줄인 뒤에도 읽히게 */
.device.kiosk .loading { font-size: 2.4em; }
.device.wall .loading, .device.desktop .loading { font-size: 1.5em; }
.device.tablet .loading { font-size: 1.3em; }
.device.phone .frame-note h2 { font-size: 1.5rem; }