@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root {
  /* Every design token lives in tokens.css, loaded before this file. */
  color-scheme: light;
  font-family: var(--font-sans);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sky-night); color: var(--ink); overflow: hidden; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
button:disabled { opacity: .6; cursor: wait; }
button { transition: background .2s, border-color .2s, transform .2s; }
[hidden] { display: none !important; }
svg { width: 24px; height: 24px; vertical-align: middle; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.topbar { position: fixed; z-index: 3; inset: 0 0 auto; height: 104px; padding: 0 4.5%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; gap: 13px; align-items: center; text-decoration: none; color: var(--ink); font-size: 15px; letter-spacing: 3px; font-weight: 600; }
.brand-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #dfc3955c; border-radius: 50%; color: var(--accent); }
.brand-icon svg { width: 25px; height: 25px; }
.brand-sub { display: block; font-size: 9px; letter-spacing: 5px; margin-top: 5px; color: #b0bfc6; }
.flight-header { font-size: 10px; letter-spacing: 1.6px; color: var(--ink-muted); display: flex; align-items: center; gap: 14px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mark-cloud); box-shadow: 0 0 12px #a2c7b744; }
.divider { opacity: .4; }
.top-actions { display: flex; gap: 10px; }
.icon-button { border: 1px solid var(--line-hairline); border-radius: 50%; background: #182d39c9; width: 44px; height: 44px; display: grid; place-items: center; font-size: 20px; }
.icon-button svg { width: 20px; height: 20px; }
.icon-button:hover, .view-button:hover { background: #344a56; border-color: #e1c39366; }
.boarding { position: absolute; z-index: 2; left: 7.5%; top: 23%; max-width: 450px; }
.eyebrow { font-size: 10px; letter-spacing: 2.1px; color: var(--accent); display: flex; align-items: center; gap: 10px; font-weight: 500; }
.small-line { width: 24px; height: 1px; background: var(--accent); }
h1 { font-size: clamp(42px,4.4vw,68px); letter-spacing: -3px; line-height: 1.3; font-weight: 500; margin: 27px 0 23px; text-wrap: balance; }
h1 span { color: var(--accent); }
.intro { font-size: 15px; line-height: 2; color: #bcc9ce; font-weight: 400; }
.primary { background: var(--accent); border: 1px solid #f1ddbd; color: #20313c; padding: 17px 22px; border-radius: 9px; display: flex; align-items: center; justify-content: space-between; gap: 50px; font-size: 14px; font-weight: 600; margin-top: 28px; min-width: 260px; min-height: 58px; box-shadow: 0 8px 30px #070e1925, inset 0 1px #fff5; }
.primary:hover { background: #eed7b3; transform: translateY(-2px); }
.primary span { font-size: 22px; font-weight: 400; }
.boarding-features { display: flex; align-items: center; gap: 11px; font-size: 11px; color: #c7d1d4; margin-top: 22px; }
.boarding-features i { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
.boarding-note { font-size: 11px; line-height: 1.9; color: #9dafb9; margin-top: 10px; }
.boarding-meta { display: flex; gap: 25px; margin-top: 35px; color: #9dafb9; font-size: 9px; letter-spacing: 1.6px; }
.scene-label { position: fixed; bottom: 15%; right: 7%; text-align: right; border-right: 1px solid #d9bd8e66; padding-right: 18px; }
.scene-label span { font-size: 10px; letter-spacing: 2px; color: var(--accent); }
.scene-label p { font-size: 12px; color: #bcc9ce; margin-bottom: 0; }
footer { position: fixed; bottom: 28px; left: 4.5%; right: 4.5%; display: flex; justify-content: space-between; letter-spacing: 1.7px; font-size: 9px; color: #9dafb9; }
.glass { background: var(--surface-panel); border: 1px solid var(--line-hairline); box-shadow: 0 12px 40px #07151f25, inset 0 1px #ffffff05; backdrop-filter: blur(20px); }
.journey-card { position: absolute; top: 126px; left: 4.5%; width: 248px; border-radius: var(--radius-panel); padding: 22px; }
.journey-card .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
.route { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.route > span { font-size: 23px; font-weight: 500; letter-spacing: 1px; }
.route small { font-size: 11px; letter-spacing: 0; display: block; color: var(--ink-muted); margin-top: 7px; }
.route-line { font-size: 20px; color: var(--accent); }
.ticket-divider { border-top: 1px dashed #c6d7db30; margin: 22px -22px; }
.seat-detail { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.seat-detail small { display: block; font-size: 10px; letter-spacing: 1.4px; color: var(--ink-muted); }
.seat-detail strong { font-size: 44px; line-height: 1.3; font-weight: 400; letter-spacing: -2px; }
.seat-detail > div:last-child { text-align: right; }
.cabin-tag { display: block; font-size: 10px; letter-spacing: 1px; border: 1px solid #d8bc8e55; border-radius: 4px; padding: 6px 8px; color: var(--accent); margin-bottom: 8px; }
.muted { color: var(--ink-muted); font-size: 12px; }
.ticket-bottom { border-top: 1px solid var(--line-hairline); padding-top: 16px; margin-top: 16px; display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--ink-muted); }
.connected { color: var(--mark-cloud); white-space: nowrap; }
.announcement { position: fixed; top: 126px; right: 4.5%; border-radius: var(--radius-panel); padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; max-width: 490px; width: calc(100% - 390px); }
.announcement-icon { color: var(--accent); padding-top: 2px; }
.announcement strong { font-size: 14px; font-weight: 500; }
.announcement p { font-size: 12px; color: #bcc9ce; margin: 6px 0 0; line-height: 1.8; }
.phase-time { font-size: 12px; color: var(--accent); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 3px; }
.scene-controls { position: fixed; bottom: 192px; right: 4.5%; display: flex; align-items: center; gap: 8px; }
.view-button { background: #182d39df; border: 1px solid var(--line-hairline); border-radius: 24px; padding: 10px 17px; min-height: 44px; font-size: 12px; }
.action-hint { position: fixed; bottom: 170px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 12px; color: #d3dcd9; text-shadow: 0 2px 12px #061824; text-align: center; width: max-content; max-width: 90%; }
.action-bar { position: fixed; bottom: 62px; left: 50%; transform: translateX(-50%); display: flex; padding: 10px; gap: 6px; border-radius: 20px; }
.action-bar button { background: transparent; border: 1px solid transparent; border-radius: 12px; min-width: 94px; min-height: 78px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; }
.action-bar button:hover { background: #ffffff0c; }
.action-bar button.suggested { background: #dec29313; border-color: #dec29340; }
.action-bar button.available { border-color: #a2c7b770; }
.action-bar button > span { color: var(--accent); height: 26px; }
.action-bar strong { font-size: 12px; font-weight: 400; white-space: nowrap; }
kbd { font-family: inherit; font-size: 9px; color: #b0bfc6; position: absolute; right: 5px; top: 4px; }
.action-separator { width: 1px; background: var(--line-hairline); margin: 12px 5px; }
.movement-hint { position: fixed; bottom: 27px; width: 100%; text-align: center; font-size: 11px; color: #afc0c8; pointer-events: none; }
.movement-hint span { margin: 0 10px; }
.leave-button { position: fixed; bottom: 24px; left: 4.5%; background: none; border: 0; font-size: 12px; color: #b0bfc6; min-height: 44px; }
/* 안내 바가 모바일에서 z-index 7이라, 5로 두면 패널 제목줄과 닫기 버튼이 그 아래로 가려졌다. */
.sound-panel { position: fixed; z-index: 9; right: 4.5%; top: 90px; width: 300px; padding: 22px; border-radius: var(--radius-panel); max-height: calc(100vh - 106px); overflow-y: auto; overscroll-behavior: contain; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
/* 닫기 버튼만 떠서 따라다닌다. 세로 여백을 0으로 두는 이유는, 고정될 때 버튼이 부모의 안쪽 위를 넘지 못해
   음수 여백을 주면 스크롤이 시작되는 순간 그만큼 아래로 튀기 때문이다. */
/* .plain-button이 뒤에서 background:none을 덮어쓴다. 불투명한 원이 없으면 밑을 지나는 슬라이더가 ×를 관통한다. */
.sound-panel .panel-close { position: sticky; top: 0; z-index: 3; float: right; margin: 0 -14px 0 8px; background: var(--surface-panel-solid); border-radius: 50%; }
.plain-button { background: none; border: 0; font-size: 24px; color: var(--ink-muted); min-width: 44px; min-height: 44px; }
.sound-panel p { font-size: 12px; color: var(--ink-muted); margin: 4px 0 16px; }
.sound-panel label { display: block; font-size: 13px; color: #c7d2d6; margin-top: 13px; }
.sound-panel input { display: block; width: 100%; margin: 5px 0; accent-color: var(--accent); height: 28px; }
.sound-panel small { display: block; color: var(--ink-muted); font-size: 11px; margin-top: 13px; line-height: 1.7; }
.soundscape-hint { font-size: 11px; color: var(--ink-muted); margin: 7px 0 0; line-height: 1.6; }
.soundscape-choice .segmented button { font-size: 11px; padding: 0 3px; word-break: keep-all; line-height: 1.35; }
.secondary { width: 100%; border: 1px solid var(--line-hairline); background: transparent; min-height: 44px; padding: 12px; margin-top: 12px; border-radius: 8px; font-size: 12px; }
dialog { color: var(--ink); background: #172b37; border: 1px solid #d6e0e130; border-radius: 20px; max-width: 480px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: 36px; box-shadow: 0 30px 100px #0006; }
dialog::backdrop { background: #07131ca8; backdrop-filter: blur(10px); }
dialog h2 { font-size: 26px; font-weight: 500; line-height: 1.6; letter-spacing: -1px; }
dialog p, dialog li { font-size: 13px; line-height: 1.9; color: #bcc9ce; }
dialog ul { padding-left: 18px; }
dialog li { margin: 12px 0; }
.dialog-close { position: sticky; top: 0; z-index: 3; float: right; margin: 0 -18px 0 8px; border: 0; background: var(--surface-dialog); border-radius: 50%; color: var(--ink-muted); font-size: 26px; min-width: 44px; min-height: 44px; }

/* 스크롤 막대 (2026-11-09): 기본 막대가 크림 패널 위에서 혼자 회색 상자로 떠 보인다.
   화살표와 트랙을 지우고 손잡이만 종이 팔레트 톤으로 가늘게 남긴다.
   내용이 더 있다는 신호는 필요하므로 숨기지는 않는다.
   Chrome은 scrollbar-width/color가 지정되면 ::-webkit-scrollbar를 무시하므로, 둘을 갈라 쓴다. */
.sound-panel, dialog { scrollbar-width: thin; scrollbar-color: #bfae9680 transparent; }
@supports selector(::-webkit-scrollbar) {
  .sound-panel, dialog { scrollbar-width: auto; scrollbar-color: auto; }
  .sound-panel::-webkit-scrollbar, dialog::-webkit-scrollbar { width: 11px; height: 11px; }
  .sound-panel::-webkit-scrollbar-track, dialog::-webkit-scrollbar-track { background: transparent; }
  .sound-panel::-webkit-scrollbar-button, dialog::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  .sound-panel::-webkit-scrollbar-corner, dialog::-webkit-scrollbar-corner { background: transparent; }
  .sound-panel::-webkit-scrollbar-thumb, dialog::-webkit-scrollbar-thumb { background: #bfae9670; border: 3px solid transparent; background-clip: content-box; border-radius: 99px; }
  .sound-panel::-webkit-scrollbar-thumb:hover, dialog::-webkit-scrollbar-thumb:hover { background: #a9977aa8; border: 3px solid transparent; background-clip: content-box; }
}
.ticket-dialog { color-scheme: light; text-align: center; max-width: 370px; background: #eee9dc; color: var(--ticket-ink); padding: 28px; border: none; border-radius: 14px; }
.ticket-flight { display: flex; justify-content: space-between; padding-bottom: 20px; margin-bottom: 25px; border-bottom: 1px solid var(--ticket-line); font-size: 10px; letter-spacing: 1px; font-weight: 600; }
.ticket-flight span { color: var(--ticket-ink-meta); }
.ticket-dialog .eyebrow { justify-content: center; font-size: 10px; color: var(--ticket-ink-eyebrow); letter-spacing: 1.5px; }
.ticket-dialog h2 { font-size: 19px; margin: 22px 0 0; }
.ticket-traveller { margin-top: 18px; }
.ticket-traveller small { display: block; font-size: 10px; color: var(--ticket-ink-eyebrow); letter-spacing: .5px; }
.ticket-traveller strong { display: block; margin-top: 4px; font-size: 18px; font-weight: 600; color: var(--ink-traveller); word-break: keep-all; }
.big-seat { display: block; font-size: 96px; line-height: 1.2; letter-spacing: -6px; font-weight: 400; margin: 6px 0 12px; color: var(--ink-traveller); }
.ticket-dialog p { font-size: 12px; margin-top: 24px; color: var(--ticket-ink-body); }
.ticket-stub { border-top: 1px dashed #65787366; margin: 24px -28px 0; padding: 22px 28px 0; display: flex; gap: 18px; align-items: center; text-align: left; }
.ticket-stub > span:last-child { font-size: 9px; line-height: 2; letter-spacing: 1px; color: var(--ticket-ink-stub); }
.barcode { display: block; width: 72px; height: 28px; background: repeating-linear-gradient(90deg,#34505a 0 2px,transparent 2px 4px,#34505a 4px 5px,transparent 5px 8px,#34505a 8px 11px,transparent 11px 13px); }
.ticket-dialog .primary { width: 100%; min-width: 0; margin-top: 24px; background: #284e56; border-color: #284e56; color: #f3eedf; min-height: 52px; font-size: 13px; box-shadow: none; }
.ticket-dialog .primary:hover { background: #37616a; }
.toast { position: fixed; left: 50%; bottom: 212px; transform: translateX(-50%); z-index: 10; padding: 15px 22px; background: var(--mark-sun); color: #263844; font-size: 13px; line-height: 1.7; border-radius: 10px; max-width: 90%; text-align: center; box-shadow: 0 10px 30px #0003; }
.joystick { display: none; }
body.belt-on .announcement { border-color: #dab47a88; background: #302e29ed; }
body.belt-on #phaseIcon { color: #efc37f; }

@media (max-width: 1000px) {
  .flight-header { display: none; }
  .boarding { left: 6%; }
  .journey-card { width: 220px; padding: 18px; }
  .ticket-divider { margin: 20px -18px; }
  .announcement { width: calc(100% - 320px); }
  .action-bar button { min-width: 83px; }
  .leave-button { bottom: auto; top: 425px; }
}
@media (max-width: 650px) {
  .topbar { height: 82px; padding: 0 6%; }
  .brand { font-size: 12px; letter-spacing: 2px; gap: 9px; }
  .brand-icon { width: 36px; height: 36px; }
  .brand-icon svg { width: 21px; height: 21px; }
  .brand-sub { font-size: 9px; letter-spacing: 3px; }
  .top-actions { gap: 6px; }
  .boarding { top: 115px; left: 8%; right: 8%; pointer-events: none; }
  .boarding button, .boarding a { pointer-events: auto; }
  .boarding .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  h1 { font-size: 40px; line-height: 1.25; letter-spacing: -2px; margin: 22px 0 15px; }
  .intro { font-size: 13px; line-height: 1.9; }
  .primary { padding: 13px 17px; min-width: 230px; min-height: 52px; margin-top: 20px; font-size: 13px; }
  .boarding-features { font-size: 10px; margin-top: 16px; }
  .boarding-note { font-size: 10px; }
  .boarding-meta { display: none; }
  .scene-label { bottom: 7%; right: 8%; }
  .scene-label p { font-size: 11px; }
  footer { bottom: 18px; font-size: 8px; left: 8%; right: 8%; }
  footer span:last-child { display: none; }
  .journey-card { top: 91px; left: 5%; width: 90%; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 12px; }
  .journey-card > .eyebrow, .route, .ticket-divider, .seat-detail small, .seat-detail .muted { display: none; }
  .seat-detail { flex-direction: row; gap: 12px; }
  .seat-detail strong { font-size: 30px; }
  .cabin-tag { font-size: 9px; padding: 5px 6px; margin-bottom: 0; }
  .ticket-bottom { border: 0; margin: 0; padding: 0; flex-direction: column; align-items: flex-end; gap: 5px; font-size: 10px; }
  .announcement { top: 174px; right: 5%; width: 90%; padding: 13px 14px; gap: 10px; border-radius: 12px; }
  .announcement-icon svg { width: 21px; height: 21px; }
  .announcement strong { font-size: 13px; }
  .announcement p { font-size: 11px; line-height: 1.7; }
  .phase-time { font-size: 11px; }
  .action-bar { width: 94%; padding: 7px 4px; bottom: calc(40px + env(safe-area-inset-bottom)); gap: 2px; justify-content: space-evenly; border-radius: 16px; }
  .action-bar button { min-width: 0; flex: 1; padding: 9px 2px; min-height: 67px; gap: 7px; border-radius: 9px; }
  .action-bar strong { font-size: 10px; }
  .action-bar button > span, .action-bar svg { width: 22px; height: 22px; }
  .action-separator { margin: 9px 2px; }
  kbd { display: none; }
  .action-hint { bottom: calc(133px + env(safe-area-inset-bottom)); font-size: 11px; }
  .movement-hint { bottom: calc(14px + env(safe-area-inset-bottom)); font-size: 10px; }
  .movement-hint span { margin: 0 3px; }
  .leave-button { top: auto; bottom: calc(279px + env(safe-area-inset-bottom)); left: 5%; font-size: 11px; }
  .scene-controls { bottom: calc(175px + env(safe-area-inset-bottom)); right: 5%; gap: 4px; }
  .view-button { font-size: 11px; padding: 9px; }
  .joystick { display: grid; position: fixed; bottom: calc(170px + env(safe-area-inset-bottom)); left: 5%; grid-template-columns: repeat(3,44px); grid-template-rows: repeat(2,44px); gap: 4px; }
  .joystick button { border: 1px solid #c6d7db38; border-radius: 12px; background: #1c3443ed; touch-action: none; font-size: 20px; color: #d5e0e2; user-select: none; }
  .joystick button:active { background: #49606b; }
  .joystick .up { grid-column: 2; }
  .joystick .left { grid-row: 2; grid-column: 1; }
  .joystick .down { grid-row: 2; grid-column: 2; }
  .joystick .right { grid-row: 2; grid-column: 3; }
  .toast { bottom: calc(280px + env(safe-area-inset-bottom)); font-size: 12px; width: max-content; }
  .sound-panel { right: 5%; top: 82px; width: 90%; max-width: 320px; max-height: calc(100dvh - 98px); }
  .sign-light { top: 70px; font-size: 9px; padding: 6px 12px; gap: 6px; }
  .sign-light svg { width: 14px; height: 14px; }
}
@media (max-height: 740px) and (min-width: 651px) {
  .boarding { top: 19%; }
  h1 { font-size: 46px; margin: 20px 0 16px; }
  .boarding-meta { display: none; }
  .intro { font-size: 13px; }
}
@media (max-height: 740px) and (max-width: 650px) {
  .boarding { top: 100px; }
  h1 { font-size: 32px; margin: 17px 0 12px; }
  .intro { font-size: 12px; }
  .boarding-note { display: none; }
  .scene-label { bottom: 7%; }
  .is-flying .announcement p { display: none; }
  .is-flying .announcement { top: 166px; }
  .is-flying .leave-button { bottom: calc(260px + env(safe-area-inset-bottom)); }
}
@media (max-height: 500px) and (min-width: 651px) {
  .topbar { height: 68px; }
  .journey-card, .announcement { top: 78px; }
  .journey-card .route, .journey-card .ticket-divider, .journey-card > .eyebrow { display: none; }
  .boarding { top: 85px; }
  h1 { font-size: 32px; margin: 10px 0; }
  .intro { font-size: 12px; }
  .boarding-note, .boarding-features, .boarding-meta { display: none; }
  .action-bar { bottom: 35px; padding: 5px; }
  .action-bar button { min-height: 60px; padding: 5px; }
  .action-hint { bottom: 116px; }
  .movement-hint { bottom: 10px; }
  .leave-button { top: 245px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Soft toy cabin: warm paper UI, lavender upholstery and mint accents. */
/* Tokens live in the :root block at the top of this file. */
body { background:linear-gradient(145deg,var(--sky-top),var(--sky-bottom)); }
.brand { color:var(--ink-brand); }.brand-sub,.flight-header{color:var(--ink-brand-sub);}
.brand-icon { background:var(--surface-brand-mark); border-color:#fffaf3; color:var(--accent-mint); box-shadow:0 5px 16px #738da51a; }
.live-dot{background:var(--state-live);}.grain{opacity:.018;}
.icon-button { color:var(--ink-control);background:var(--surface-icon);border-color:var(--surface-icon-line);box-shadow: var(--shadow-icon); }
.icon-button:hover,.view-button:hover { background:var(--accent-lavender-wash);border-color:var(--accent-lavender-line); }
.boarding { padding:25px 28px 27px;left:5.5%;top:20%;border:1px solid #fffaf566;border-radius:32px;background:linear-gradient(115deg,#fff7eacf,#fff7ea33);backdrop-filter:blur(5px); }
h1 { color:var(--ink-strong);font-weight:600; }h1 span{color:var(--accent-blossom);}
.eyebrow{color:var(--accent-sage);}.small-line{background:var(--accent-sage-line);}
.intro { color:var(--ink-soft); }.boarding-note,.boarding-features,.boarding-meta{color:var(--ink-meta);}
.primary{color:var(--ink-on-accent);background:var(--accent-action);border-color:var(--accent-action-line);border-radius:18px;box-shadow: var(--shadow-action);}
.primary:hover{background:var(--accent-action-hover);}.primary:active{transform:translateY(3px);box-shadow: var(--shadow-action-pressed);}
.scene-label{border-color:var(--line-scene-label);}.scene-label span,.scene-label p,footer{color:#58708a;}
.glass{border-color:var(--surface-panel-line);box-shadow: var(--shadow-panel);}
.cabin-tag{background:var(--tag-bg);color:var(--tag-ink);border-color:var(--tag-line);border-radius:8px;}
.connected{color:var(--state-connected);}.ticket-divider{border-color:var(--line-dashed);}
.announcement strong{color:var(--ink-title);}.announcement p{color:var(--ink-body);}.announcement-icon{color:var(--accent-lavender);}
.phase-time{color:#5a6883;}.scene-controls .view-button,.view-button{background:var(--surface-panel);color:var(--ink-control);border-color:#fffaf0;}
.action-bar{border-radius:26px;}.action-bar button{border-radius:17px;}.action-bar button:hover{background:#ece8f4;}
.action-bar button.suggested{background:var(--state-suggested);border-color:var(--state-suggested-line);}.action-bar button.available{background:var(--state-available);border-color:var(--state-available-line);}
.action-bar button>span{color:#7e8ca9;}.action-bar strong{color:var(--ink-label);}kbd{color:var(--ink-kbd);}
.action-hint{color:var(--hint-boarding-ink);text-shadow:0 1px 12px #fff; background:var(--hint-boarding-bg);padding:8px 16px;border-radius:20px;}
.movement-hint,.leave-button{color:#556c84;}.leave-button{background:#fff9efc9;border-radius:16px;padding:0 12px;}
.sound-panel label{color:var(--ink-label);}input{accent-color:#849aa3!important;}
.secondary{border-color:#c9b9a355;background:var(--surface-sunken);border-radius:13px;}
dialog{color:var(--ink-title);background:var(--surface-dialog);border-color:var(--ink-on-accent);border-radius:26px;}
dialog p,dialog li{color:var(--ink-body);}dialog::backdrop{background:#536b7d66;}
.ticket-dialog{background:var(--surface-dialog);}.big-seat{color:var(--accent-seat);}.ticket-dialog .primary{background:var(--accent-solid);border-color:var(--accent-solid);border-radius:16px;}
.toast{background:var(--surface-notice);color:var(--ink-notice);border:1px solid #fff;box-shadow: var(--shadow-toast);}
body.belt-on .announcement{background:var(--state-belt);border-color:var(--state-belt-line);}body.belt-on #phaseIcon{color:var(--state-belt-ink);}
/* 좌석벨트 표시등 (2026-11-09): '벨트 차임' 소리 종류에서만 띄운다. 차임에 맞춰 켜졌다 꺼진다.
   진짜 벨트 상태는 .announcement가 알려준다. 이건 소리를 눈으로 받는 장치라 aria-hidden으로 둔다. */
.sign-light{position:fixed;z-index:4;left:50%;top:84px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;border:1px solid var(--surface-sunken-line);background:var(--surface-sunken);color:var(--ink-muted);font-size:10px;letter-spacing:.16em;opacity:.5;transition:opacity .7s ease,color .7s ease,background .7s ease,border-color .7s ease,box-shadow .7s ease;}
.sign-light svg{width:16px;height:16px;display:block;}
.sign-light strong{font-weight:600;letter-spacing:.16em;}
.sign-light.is-on{opacity:1;background:var(--state-belt);border-color:var(--state-belt-line);color:var(--state-belt-ink);box-shadow:0 6px 22px #d9b47655;}
.view-switch{position:fixed;right:4.5%;bottom:252px;display:flex;gap:8px;}
.view-switch .view-button{background:var(--surface-sunken);border-color:var(--surface-panel-line-cabin);font-weight:600;min-width:108px;}
.view-switch .view-button[aria-pressed=true]{background:var(--state-selected);border-color:#b9d3cb;}
.look-controls{position:fixed;right:4.5%;bottom:310px;display:flex;padding:5px;gap:3px;border-radius:18px;}
.look-controls button{border:0;background:transparent;border-radius:12px;width:44px;height:44px;font-size:20px;}
.look-controls button:hover{background:#e9e4f1;}
.first-person .journey-card .route,.first-person .journey-card>.eyebrow,.first-person .journey-card .ticket-divider{display:none;}
.first-person canvas{cursor:grab;}.first-person canvas:active{cursor:grabbing;}
@media(max-width:650px){
  .boarding{left:5%;right:5%;top:98px;padding:20px 22px;max-width:350px;border-radius:26px;background:linear-gradient(115deg,#fff7eadb,#fff7ea55);}
  .boarding h1{font-size:36px;}.boarding .eyebrow{font-size:9px;letter-spacing:1px;}
  .boarding .intro{font-size:12px;}.boarding-features{font-size:10px;}.boarding-note{font-size:10px;}
  .joystick button{background:var(--surface-panel);color:#637993;border-color:#fffdf7;border-radius:15px;box-shadow:0 3px 0 #a7b9c455;}
  .joystick button:active{background:#e2e7f3;}
  .view-switch{right:5%;bottom:calc(230px + env(safe-area-inset-bottom));gap:5px;}
  .view-switch .view-button{font-size:10px;min-width:82px;padding:8px;}
  .look-controls{right:5%;bottom:calc(285px + env(safe-area-inset-bottom));}
  .look-controls button{width:40px;min-height:44px;}
  .first-person .leave-button{bottom:calc(320px + env(safe-area-inset-bottom));}
  .action-hint{font-size:10px;padding:6px 12px;}
}
@media(max-height:740px) and (max-width:650px){.boarding{top:90px;padding:16px 20px;}.boarding h1{font-size:30px;}.boarding .intro{font-size:11px;}.boarding-features{display:none;}}
@media(max-height:500px) and (min-width:651px){.boarding{top:75px;padding:14px 22px;}.view-switch{bottom:155px;}.look-controls{bottom:210px;}}

/* In the cabin, keep the space primary and the controls at its edges. */
.is-flying .topbar {height:74px; padding:0 24px;pointer-events:none;}
.is-flying .topbar a,.is-flying .topbar button{pointer-events:auto;}
.is-flying .brand,.is-flying .flight-header{display:none;}
.is-flying .top-actions{margin-left:auto;}
.is-flying .journey-card{top:16px;left:24px;width:auto;min-width:215px;padding:10px 16px;display:flex;align-items:center;gap:18px;border-radius:28px;background:#fff9efc9;}
.is-flying .journey-card>.eyebrow,.is-flying .journey-card .route,.is-flying .journey-card .ticket-divider,.is-flying .seat-detail small,.is-flying .seat-detail .muted{display:none;}
.is-flying .seat-detail{gap:10px;}.is-flying .seat-detail strong{font-size:23px;letter-spacing:-1px;}
.is-flying .cabin-tag{font-size:9px;margin:0;padding:4px 7px;}
.is-flying .ticket-bottom{border:0;margin:0;padding:0;font-size:11px;flex-direction:column;gap:3px;}
.traveller-name{display:none;}
.is-flying .traveller-name{display:block;max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--ink-traveller);}
.is-flying .announcement{top:85px;right:24px;width:300px;padding:12px 15px;border-radius:20px;background:#fff9efbc;}
.is-flying .announcement p{font-size:12px;}.is-flying .announcement strong{font-size:13px;}
.is-flying .announcement-icon svg{width:20px;height:20px;}
.is-flying .action-bar{bottom:42px;padding:6px 10px;border-radius:32px;background:#fff9efc9;box-shadow:0 5px 20px #30425415;}
.is-flying .action-bar button{min-height:60px;min-width:73px;gap:4px;padding:7px;border-radius:22px;}
.is-flying .action-bar strong{font-size:11px;}.is-flying .action-bar svg{width:21px;height:21px;}
.is-flying .action-hint{bottom:120px;font-size:11px;opacity:.9;}
.is-flying .movement-hint{bottom:15px;font-size:10px;}
.is-flying .view-switch{bottom:116px;right:24px;}
.is-flying .scene-controls{bottom:60px;right:24px;}
.is-flying .look-controls{bottom:172px;right:24px;}
.is-flying .leave-button{top:auto;bottom:54px;left:24px;font-size:11px;}
.is-flying canvas{cursor:grab;}.is-flying canvas:active{cursor:grabbing;}
.is-flying .toast{bottom:160px;}
@media(max-width:650px){
  .is-flying .topbar{padding:0 14px;}
  .is-flying .journey-card{left:12px;top:16px;min-width:0;width:auto;gap:10px;padding:10px 12px;}
  .is-flying .seat-detail{gap:6px;}.is-flying .cabin-tag{display:none;}
  /* 좁은 화면 상단엔 자리가 없다. 닉네임은 탑승권과 내 머리 위 이름표로 충분하다. */
  .is-flying .traveller-name{display:none;}
  .is-flying .announcement{top:82px;left:12px;right:12px;width:auto;padding:10px 13px;}
  .is-flying .announcement p{font-size:12px;}
  .is-flying .action-bar{bottom:calc(35px + env(safe-area-inset-bottom));width:94%;padding:5px;}
  .is-flying .action-bar button{min-width:0;min-height:58px;padding:7px 3px;}
  .is-flying .action-bar strong{font-size:10px;}
  .is-flying .action-hint{bottom:calc(110px + env(safe-area-inset-bottom));font-size:10px;}
  .is-flying .movement-hint{bottom:calc(12px + env(safe-area-inset-bottom));font-size:10px;}
  .is-flying .view-switch{bottom:calc(200px + env(safe-area-inset-bottom));right:12px;}
  .is-flying .scene-controls{bottom:calc(145px + env(safe-area-inset-bottom));right:12px;}
  .is-flying .look-controls{bottom:calc(255px + env(safe-area-inset-bottom));right:12px;}
  .is-flying .leave-button{bottom:calc(260px + env(safe-area-inset-bottom));left:12px;}
  .is-flying .joystick{bottom:calc(150px + env(safe-area-inset-bottom));left:12px;}
  .is-flying .toast{bottom:calc(310px + env(safe-area-inset-bottom));}
}

/* Browser-observed overlap fix: camera controls sit above the action dock. */
@media (min-width:651px) and (max-width:1150px) {
  .is-flying .scene-controls{bottom:166px;right:20px;}
  .is-flying .view-switch{bottom:222px;right:20px;}
  .is-flying .look-controls{bottom:278px;right:20px;}
}
.is-flying .ticket-bottom .connected{color:var(--state-connected-cabin)!important;}
.is-flying .announcement{background:var(--surface-announcement);}


/* Deeper cabin palette: readable warm panels against the shaded interior. */
.is-flying .glass{background:var(--surface-panel-cabin);border-color:var(--surface-panel-line-cabin);box-shadow: var(--shadow-panel-cabin);}
.is-flying .announcement{background:var(--surface-announcement-cabin);}
.is-flying .action-hint{background:var(--hint-cabin-bg);color:var(--ink-on-dark);text-shadow:none;}
.is-flying .movement-hint{color:var(--ink-hint-cabin);text-shadow:0 1px 4px #15242c;}
.accessory-button{position:fixed;left:24px;bottom:112px;}
.accessory-dialog{position:fixed;left:auto;right:24px;top:50%;bottom:auto;transform:translateY(-50%);margin:0;width:310px;padding:28px 22px;background:var(--surface-sheet);border:1px solid var(--surface-sheet-line);box-shadow: var(--shadow-dialog);}
.accessory-dialog::backdrop{background:#15232f18;backdrop-filter:none;}
.accessory-dialog h2{font-size:23px;margin:20px 0 8px;}.accessory-dialog p{font-size:12px;}
.accessory-list{display:grid;gap:10px;margin-top:22px;}
.accessory-list button{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 10px;min-height:78px;border:1px solid var(--surface-raised-line);border-radius:16px;background:var(--surface-raised);color:var(--ink-sheet);}
.accessory-list button[aria-pressed=true]{background:var(--state-kit-on);border-color:var(--state-kit-on-line);box-shadow:inset 0 0 0 1px var(--state-kit-on-line);}
.accessory-list strong{display:block;font-size:13px;font-weight:600;}.accessory-list small{display:block;font-size:11px;margin-top:5px;color:var(--ink-sheet-note);}
.accessory-list em{font-style:normal;font-size:11px;margin-left:auto;white-space:nowrap;color:var(--ink-sheet-state);}
.kit-icon{flex:none;width:38px;height:38px;display:grid;place-items:center;}
.pillow-icon{border:10px solid var(--kit-pillow,#c49b76);border-top:0;border-radius:8px 8px 22px 22px;height:30px;transform:rotate(180deg);box-shadow:0 2px 3px #674d3320;}
.mask-icon{background:var(--kit-mask,#8d7a9e);color:#f4e4e8;border-radius:14px;font-size:14px;letter-spacing:-2px;height:25px;}
.sheet-icon{background:#dce9d4;border:1px solid #bac9b2;color:#64816c;border-radius:45% 45% 48% 48%;font-size:24px;}
.kit-note{margin-bottom:0;font-size:11px!important;color:var(--ink-sheet-note);}
@media(max-width:650px){
  .is-flying .accessory-button{left:12px;bottom:calc(310px + env(safe-area-inset-bottom));min-height:44px;}
  .accessory-dialog{top:auto;bottom:12px;left:12px;right:12px;transform:none;width:auto;max-width:none;padding:20px;max-height:48dvh;}
  .accessory-dialog h2{font-size:19px;margin:12px 0 4px;}.accessory-dialog>p{margin:4px 0;}
  .accessory-list{gap:6px;margin-top:12px;}.accessory-list button{min-height:56px;padding:8px 12px;}
}

/* 소품 시트가 열린 동안에는 상단 띠를 캐릭터에게 내준다. 안내 카드·조작 버튼이 겹쳐 있으면
   모바일에서는 인물이 보일 자리가 남지 않는다(머리가 안내 카드 뒤로 밀려 가려졌다). */
@media(max-width:650px),(orientation:landscape) and (max-height:500px){
  body.inspecting :is(.announcement,.first-hint,.comfort-button,.accessory-button,.leave-button,
    .view-switch,.look-controls,.scene-controls,.gesture-menu,.action-bar,.meal-clear,.toast,.joystick){display:none!important;}
}

.meal-clear{position:fixed;left:24px;bottom:170px;font-size:11px;}
.is-flying .action-bar button{min-width:68px;}
.is-flying .action-bar button:disabled{cursor:default;opacity:.65;}
@media(min-width:651px) and (max-width:800px){.is-flying .action-bar button{min-width:60px;}.is-flying .action-bar strong{font-size:10px;}}
@media(max-width:650px){
  .is-flying .action-bar button{min-width:0;padding:7px 2px;}
  .is-flying .action-bar strong{font-size:10px;}
  .meal-clear{left:12px;bottom:calc(363px + env(safe-area-inset-bottom));font-size:11px;}
}

/* Sound-off state is visible without reading the label: dimmed ring and a slash. */
#soundToggle{position:relative;}
#soundToggle[aria-pressed="false"]{color:var(--state-off-ink);background:var(--state-off);border-color:var(--state-off-line);}
#soundToggle[aria-pressed="false"]::after{content:"";position:absolute;inset:0;margin:auto;width:24px;height:2px;border-radius:2px;background:var(--state-off-slash);transform:rotate(-45deg);pointer-events:none;}
#muteButton[data-muted="true"]{background:var(--state-mute);border-color:var(--state-mute-line);color:var(--state-mute-ink);}
/* Replay button shares the panel's secondary style instead of the browser default. */
#replayAnnouncement{width:100%;min-height:44px;margin-top:14px;padding:12px;border:1px solid var(--line-control);border-radius:13px;background:var(--surface-sunken);font-size:12px;color:#415869;}
#replayAnnouncement:hover{background:#e9e4f1;}

/* Personal light controls remain available before and after boarding. */
.time-control{display:flex;align-items:center;gap:10px;padding:0 14px;min-height:44px;border:1px solid #fff8e8;border-radius:24px;background:#f6efdfed;color:#526369;pointer-events:auto;font-size:11px;}
.time-control select{font:inherit;font-size:12px;color:#344b52;background:transparent;border:0;min-height:40px;cursor:pointer;}
.time-control select:focus-visible{outline:2px solid var(--accent-action);outline-offset:3px;border-radius:6px;}
body:not(.is-flying) .boarding{background:linear-gradient(120deg,var(--boarding-card-top),var(--boarding-card-bottom));border-color:var(--boarding-card-line);backdrop-filter:none;box-shadow:0 18px 60px #0a20243b;}
body:not(.is-flying) .boarding h1{color:var(--boarding-heading);}
body:not(.is-flying) .boarding .eyebrow{color:var(--boarding-eyebrow);}
body:not(.is-flying) .boarding .intro,body:not(.is-flying) .boarding-note,body:not(.is-flying) .boarding-features{color:var(--boarding-body);}
body:not(.is-flying) .scene-label{padding:12px 18px;border-radius:14px;background:#203640ba;border:1px solid #e9e5d533;}
body:not(.is-flying) .scene-label span,body:not(.is-flying) .scene-label p{color:#efe8d8;}
@media(max-width:850px){.time-control>span{display:none;}.time-control{padding:0 10px;}}
@media(max-width:650px){
  .time-control{position:fixed;right:14px;top:78px;min-height:38px;}
  .time-control>span{display:inline;font-size:10px;}.time-control select{min-height:36px;}
  .is-flying .time-control{top:170px;}
  body:not(.is-flying) .boarding{top:132px;padding:20px;}
  body:not(.is-flying) .boarding h1{font-size:32px;margin:14px 0;}
}
@media(max-height:600px){body:not(.is-flying) .boarding{top:86px;padding:16px 20px;}body:not(.is-flying) .boarding-note{display:none;}.time-control>span{display:none;}}

/* A small welcome ritual with the attendant, before entering the shared cabin. */
body:not(.is-flying) .boarding{top:17%;max-width:440px;}
body:not(.is-flying) .boarding h1{font-size:36px;line-height:1.4;letter-spacing:-1.5px;margin:20px 0 12px;}
.boarding-documents{display:flex;align-items:center;gap:0;margin:20px 0 0;height:90px;}
.passport-prop{width:62px;height:82px;border:1px solid #9bb0a8;border-radius:5px 10px 10px 5px;background:var(--surface-passport);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#debd82;font-size:25px;transform:rotate(-8deg);box-shadow: var(--shadow-prop);}
.passport-prop small{font-size:7px;letter-spacing:1px;margin-top:8px;}
.ticket-prop{display:flex;flex-direction:column;gap:6px;padding:12px 25px 12px 16px;background:var(--surface-ticket);color:#465958;border-radius:5px;transform:rotate(4deg);font-size:8px;letter-spacing:1px;box-shadow:0 5px 12px #06182230;}
.ticket-prop strong{font-size:16px;}.ticket-prop small{font-size:8px;}
body:not(.is-flying) .boarding .primary{font-size:13px;min-width:290px;}
.crew-greeting{position:fixed;left:24px;top:95px;max-width:265px;padding:16px 18px;border-radius:20px;z-index:2;}
.crew-greeting small{font-size:10px;letter-spacing:2px;color:#50624f;}.crew-greeting p{font-size:13px;line-height:1.6;margin:8px 0 12px;}.crew-greeting button{font-size:11px;padding:10px 14px;min-height:40px;}
@media(max-width:650px){
  body:not(.is-flying) .boarding{top:auto;bottom:25px;left:16px;right:16px;padding:18px 20px;border-radius:24px;max-width:none;}
  body:not(.is-flying) .boarding h1{font-size:24px;margin:8px 0;line-height:1.3;}
  body:not(.is-flying) .boarding .intro{font-size:11px;margin:8px 0;}
  body:not(.is-flying) .boarding .primary{min-width:0;width:100%;margin-top:10px;font-size:12px;}
  body:not(.is-flying) .boarding-note{display:none;}.boarding-documents{display:none;}
  body:not(.is-flying) .scene-label,body:not(.is-flying) footer{display:none;}
  .crew-greeting{top:216px;left:12px;max-width:220px;padding:12px 14px;}
}
@media(max-height:650px) and (min-width:651px){body:not(.is-flying) .boarding{top:90px;padding:16px 22px;}body:not(.is-flying) .boarding h1{font-size:27px;margin:8px 0;}.boarding-documents{display:none;}body:not(.is-flying) .boarding .primary{margin-top:10px;}body:not(.is-flying) .boarding-meta{display:none;}}

body:not(.is-flying) .brand{color:#e1e8df;}body:not(.is-flying) .brand-sub{color:#bdccc6;}body:not(.is-flying) .flight-header{color:#d0d8ce;text-shadow:0 1px 5px #273c44;}body:not(.is-flying) footer{color:#bdccc6;}
.ticket-dialog #ticketCabin{letter-spacing:.1em;}

.avatar-style{display:flex;gap:8px;margin-top:16px;}.avatar-style button{flex:1;min-height:40px;border:1px solid #b8beb5;border-radius:12px;background:#faf1df;color:#415869;font-size:12px;}.avatar-style button[aria-pressed=true]{background:#243b55;border-color:#243b55;color:#fff4e0;}.avatar-style button:disabled{opacity:.6;}
.time-control time{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;color:var(--ink-title);min-width:42px;}
.announcement-translation{flex-basis:100%;font-size:11px;color:var(--ink-body);}
.announcement-translation summary{cursor:pointer;text-align:right;}
.is-flying .announcement{flex-wrap:wrap;}
.announcement>div{flex:1;min-width:0;}
.announcement .phase-time{position:absolute;right:15px;top:12px;}
.announcement strong{padding-right:48px;display:block;}
.is-flying .announcement .announcement-translation p{display:block;font-size:11px;line-height:1.6;max-height:100px;overflow:auto;}
.accessory-list button[hidden]{display:none;}
#kitDescription{font-size:12px;line-height:1.5;margin:5px 0 12px;}
.accessory-dialog{overflow-y:auto;}
@media(min-width:651px){.accessory-dialog{max-height:calc(100vh - 32px);}}

/* Personal seat comfort and cabin service requests. */
.comfort-button{position:fixed;left:140px;bottom:112px;}
.comfort-dialog{max-width:440px;max-height:85dvh;overflow:auto;}
.comfort-actions,.crew-requests{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.comfort-actions button{min-height:44px;flex:1 1 120px;}
.comfort-actions [aria-pressed="true"]{background:var(--state-selected);border-color:var(--state-selected-line);}
.comfort-group{margin:14px 0;padding:12px 14px;border-radius:16px;background:var(--surface-group);border:1px solid var(--surface-group-line);}
.comfort-group.crew-group{background:var(--surface-group-crew);border-color:var(--surface-group-crew-line);}
.comfort-group h3{margin:0;font-size:14px;letter-spacing:.01em;display:flex;align-items:center;gap:6px;}
.comfort-group-hint{margin:4px 0 0;font-size:12px;line-height:1.6;opacity:.75;}
.comfort-group .comfort-actions{margin:10px 0 6px;}
.comfort-group small{display:block;}
.comfort-dialog small{display:block;line-height:1.7;color:#54645e;}
#serviceStatus{font-size:13px;min-height:2.8em;}
.crew-greeting{max-height:50dvh;overflow:auto;}
button:disabled{opacity:.5;cursor:default;}
@media(max-width:650px){.is-flying .comfort-button{left:120px;bottom:calc(310px + env(safe-area-inset-bottom));min-height:44px;}.comfort-dialog{width:calc(100% - 32px);}}

.rest-preference{margin:18px 0;padding:14px;border-radius:16px;background:var(--surface-rest);}
.rest-preference button{width:100%;min-height:44px;}
.rest-preference [aria-pressed="true"]{background:var(--state-pressed-rest);border-color:var(--state-pressed-rest-line);}
.rest-preference p{font-size:12px;line-height:1.7;margin:10px 0 0;}
#sleepButton[aria-pressed="true"]{background:var(--state-selected);border-radius:14px;}

/* Narrow-screen service controls: preserve readable labels and touch targets. */
@media (max-width:650px) {
  .is-flying .action-bar button { min-height:78px; min-width:44px; }
  .is-flying .action-bar strong { white-space:normal; word-break:keep-all; overflow-wrap:break-word; font-size:10px; line-height:1.25; }
  .is-flying .action-hint { bottom:calc(130px + env(safe-area-inset-bottom)); }
  .is-flying .scene-controls { bottom:calc(165px + env(safe-area-inset-bottom)); }
  .is-flying .joystick { bottom:calc(170px + env(safe-area-inset-bottom)); }
  .is-flying .view-switch { bottom:calc(220px + env(safe-area-inset-bottom)); }
  .is-flying .look-controls { bottom:calc(275px + env(safe-area-inset-bottom)); }
  .is-flying .leave-button { bottom:calc(280px + env(safe-area-inset-bottom)); }
  .is-flying .comfort-button { bottom:calc(330px + env(safe-area-inset-bottom)); }
  .is-flying .toast { pointer-events:none; }
  .comfort-dialog { padding:16px; max-height:calc(100dvh - 24px); overscroll-behavior:contain; }
  .comfort-dialog .dialog-close { position:sticky; top:0; float:right; margin:-6px -6px 0 0; background:var(--surface-dialog); border-radius:50%; z-index:1; }
  .comfort-dialog .eyebrow { font-size:9px; letter-spacing:1px; }
  .comfort-dialog h2 { clear:both; font-size:22px; margin:6px 0; }
  .comfort-dialog > p { margin:8px 0; }
  .comfort-dialog .rest-preference { margin:12px 0; padding:10px; }
  .comfort-dialog .comfort-actions { gap:8px; margin:12px 0; }
}

/* Short landscape viewports need their own vertical control layout. */
@media (orientation:landscape) and (max-height:500px) {
  .is-flying .topbar { height:68px; padding:0 12px; }
  .is-flying .journey-card { top:10px; left:12px; min-width:0; }
  .is-flying .time-control { display:none; }
  .is-flying .announcement { top:72px; left:12px; right:12px; width:auto; max-height:60px; overflow:auto; padding:8px 12px; }
  .is-flying .announcement p { display:block; margin:4px 0; }
  .is-flying .action-bar { bottom:calc(8px + env(safe-area-inset-bottom)); width:calc(100% - 24px); max-width:650px; padding:4px; }
  .is-flying .action-bar button { flex:1; min-width:44px; min-height:64px; padding:5px 2px; gap:3px; }
  .is-flying .action-bar strong { white-space:normal; font-size:10px; line-height:1.2; }
  .is-flying .action-bar kbd,.is-flying .action-hint,.is-flying .movement-hint { display:none; }
  .is-flying .comfort-button { top:auto; left:160px; bottom:calc(138px + env(safe-area-inset-bottom)); min-height:44px; }
  .is-flying .accessory-button { top:auto; left:160px; bottom:calc(88px + env(safe-area-inset-bottom)); min-height:44px; }
  .is-flying .leave-button { top:auto; left:260px; bottom:calc(88px + env(safe-area-inset-bottom)); min-height:44px; }
  .is-flying .joystick { left:12px; bottom:calc(88px + env(safe-area-inset-bottom)); }
  .is-flying .scene-controls { right:12px; bottom:calc(88px + env(safe-area-inset-bottom)); }
  .is-flying .view-switch { right:12px; bottom:calc(138px + env(safe-area-inset-bottom)); }
  .is-flying .look-controls { right:12px; bottom:calc(188px + env(safe-area-inset-bottom)); }
  .is-flying .toast { bottom:calc(82px + env(safe-area-inset-bottom)); pointer-events:none; }
  .comfort-dialog { padding:16px; max-height:calc(100dvh - 16px); overscroll-behavior:contain; }
  .comfort-dialog .dialog-close { position:sticky; top:0; float:right; margin:-6px -6px 0 0; background:var(--surface-dialog); border-radius:50%; z-index:1; }
  .comfort-dialog h2 { clear:both; margin:6px 0; font-size:22px; }
  .comfort-dialog > p { margin:8px 0; }
  .comfort-dialog .rest-preference { margin:12px 0; padding:10px; }
}

/* Shared meal menu follows the seat panel's responsive and scroll behavior. */
#mealChoices button { flex:1 1 150px; min-height:48px; white-space:normal; line-height:1.5; }
#mealFeedback { min-height:2em; }
.avatar-style { flex-wrap:wrap; }
.avatar-style button { min-height:44px; flex:1 1 100px; }

/* ---- Production readiness (2026-11-08): calm notices, a11y, safe areas ---- */
button, a, input, select, summary, .joystick button { touch-action: manipulation; }
.joystick button, canvas { touch-action: none; }
/* 비행 중 조작부 위에서 두 손가락을 대도 페이지 전체가 확대되지 않게(manipulation은 핀치 확대를 허용한다). 스크롤이 필요한 대화상자는 제외. */
.is-flying :is(button, a, summary, input, select):not(dialog *) { touch-action: pan-x pan-y; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; box-shadow: var(--shadow-focus); }
dialog button:focus-visible { outline-color: var(--focus-ring-dialog); }
.icon-button, .plain-button, .dialog-close, .leave-button, .secondary { min-width: 44px; min-height: 44px; }
.announcement-translation summary { min-height: 44px; display: inline-flex; align-items: center; }
/* landscape notch: shift edge-anchored fixed UI inward (margin works for left/right-anchored boxes) */
.journey-card, .crew-greeting, .leave-button, .joystick, .accessory-button, .comfort-button, .meal-clear { margin-left: env(safe-area-inset-left, 0px); }
.announcement, .scene-controls, .view-switch, .look-controls, .sound-panel, .scene-label, .time-control { margin-right: env(safe-area-inset-right, 0px); }
.topbar { padding-left: max(4.5%, env(safe-area-inset-left)); padding-right: max(4.5%, env(safe-area-inset-right)); }
footer { left: max(4.5%, env(safe-area-inset-left)); right: max(4.5%, env(safe-area-inset-right)); align-items: center; }
footer a, .boarding-links a, .muted a { color: inherit; text-underline-offset: 3px; }
footer a { min-height: 44px; display: inline-flex; align-items: center; }
.boarding-links { display: none; font-size: 11px; margin: 10px 0 0; text-align: center; color: #bdccc6; }
.boarding-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
@media (max-width: 650px) { body:not(.is-flying) .boarding-links { display: block; } .boarding-links { margin-top: 0; } }
.board-message { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-notice); color: var(--ink-notice); font-size: 12px; line-height: 1.7; max-width: 330px; }
.env-card, .context-overlay { position: fixed; z-index: 20; display: grid; place-items: center; inset: 0; padding: 16px; background: var(--scrim-overlay); }
.env-card { color: var(--ink-notice); }
.env-card { margin: auto; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; display: block; padding: 28px; border-radius: 20px; background: var(--surface-dialog); box-shadow: var(--shadow-env); }
noscript .env-card { position: fixed; z-index: 20; }
.env-card strong { font-size: 18px; font-weight: 600; }
.env-card p, .env-card li { font-size: 13px; line-height: 1.8; color: var(--ink-notice); }
.env-card ul { padding-left: 18px; margin: 8px 0 0; }
.context-overlay > div { background: var(--surface-dialog); color: var(--ink-notice); padding: 24px 28px; border-radius: 18px; text-align: center; max-width: 340px; }
.context-overlay p { font-size: 13px; margin: 8px 0 0; }
.notice-banner { position: fixed; z-index: 9; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: min(520px, calc(100% - 32px)); padding: 12px 18px; border-radius: 16px; font-size: 13px; line-height: 1.7; text-align: center; color: var(--ink-notice); }
.notice-banner .secondary { margin-top: 10px; background: #fff; }
.first-hint { position: fixed; z-index: 6; left: 50%; bottom: 220px; transform: translateX(-50%); width: min(360px, calc(100% - 32px)); padding: 16px 18px; border-radius: 18px; color: var(--ink-notice); }
.first-hint strong { font-size: 13px; font-weight: 600; }
.first-hint ul { margin: 8px 0 0; padding-left: 16px; }
.first-hint li { font-size: 12px; line-height: 1.8; margin: 2px 0; }
.first-hint .secondary { margin-top: 8px; min-height: 44px; }
.quality-setting { margin-top: 14px; }
.quality-setting > span { display: block; font-size: 13px; color: var(--ink-label); margin-bottom: 6px; }
.segmented { display: flex; border: 1px solid var(--line-control); border-radius: 13px; overflow: hidden; background: var(--surface-sunken); }
.segmented button { flex: 1; min-height: 44px; border: 0; background: transparent; font-size: 12px; color: #415869; }
.segmented button[aria-pressed="true"] { background: var(--accent-solid); color: #fff9ef; }
@media (max-width: 650px) { .first-hint { bottom: calc(330px + env(safe-area-inset-bottom)); } }
@media (max-height: 500px) { .first-hint { bottom: auto; top: 90px; } .env-card { padding: 16px 20px; } }
.passive-notice { transition: opacity .6s ease; }
@media (prefers-reduced-motion: reduce) { .notice-banner, .first-hint, .passive-notice { transition: none; } }

/* 표현하기 메뉴: 행동 바 바로 위에 같은 모양으로 뜬다. 열려 있는 동안 힌트는 숨긴다. */
.gesture-menu{bottom:150px;z-index:3;}
.is-flying .gesture-menu{bottom:112px;}
.gesture-open .action-hint{opacity:0;}
.action-bar button[aria-pressed="true"]{background:#a2c7b71f;border-color:#a2c7b770;}
@media(max-width:650px){.is-flying .gesture-menu{bottom:calc(103px + env(safe-area-inset-bottom));}}
@media(max-height:500px) and (min-width:651px){.is-flying .gesture-menu{bottom:104px;}}
.notice-banner { top: calc(64px + env(safe-area-inset-top)); }
@media (max-width: 650px) { .notice-banner { top: calc(150px + env(safe-area-inset-top)); } }
@media (max-height: 500px) { .notice-banner { top: calc(8px + env(safe-area-inset-top)); max-width: min(420px, 50%); } }

/* ==== 모바일 기내 레이아웃 (≤650px) — 위의 모바일 위치 규칙들을 이 한 블록이 최종 결정한다 ====
   위: [좌석 pill] ········ [시간][소리][?]  →  안내방송 한 줄 카드  →  [내 자리·요청][여행 소품] ··· [비행 마치기]
   아래: 이동 버튼(좌) / 시점 버튼(우)  →  행동 힌트  →  행동 바 */
@media (max-width:650px){
  .is-flying{--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);}

  /* 상단 한 줄 */
  .is-flying .topbar{top:calc(10px + var(--st));height:40px;padding:0 12px;align-items:center;}
  .is-flying .top-actions{gap:6px;align-items:center;}
  .is-flying .top-actions .icon-button{width:40px;height:40px;min-width:40px;min-height:40px;font-size:16px;}
  .is-flying .top-actions .icon-button svg{width:18px;height:18px;}
  .is-flying .time-control{position:static;min-height:40px;padding:0 12px;margin:0;font-size:13px;font-variant-numeric:tabular-nums;}
  .is-flying .time-control>span{display:none;}
  .is-flying .journey-card{top:calc(10px + var(--st));left:12px;min-height:40px;padding:4px 14px 4px 12px;gap:10px;border-radius:20px;}
  .is-flying .seat-detail strong{font-size:18px;line-height:1;letter-spacing:-.5px;}
  .is-flying .ticket-bottom{gap:1px;font-size:10px;line-height:1.3;}

  /* 안내방송: 제목 + 한 줄 */
  .is-flying .announcement{top:calc(60px + var(--st));left:12px;right:12px;width:auto;max-width:none;padding:8px 12px;gap:10px;border-radius:16px;align-items:center;flex-wrap:nowrap;}
  .is-flying .announcement-icon{padding:0;}
  .is-flying .announcement-icon svg{width:18px;height:18px;}
  .is-flying .announcement strong{font-size:13px;padding-right:44px;}
  .is-flying .announcement>div p{display:block;margin:2px 0 0;font-size:11px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .is-flying .announcement>div p:empty{display:none;}
  .is-flying .announcement .phase-time{top:9px;right:12px;font-size:11px;}
  .is-flying .announcement-translation{flex:0 0 auto;align-self:flex-end;}
  .is-flying .announcement-translation summary{min-height:24px;font-size:10px;color:#7b8796;}
  .is-flying .announcement-translation summary::-webkit-details-marker{display:none;}
  .is-flying .announcement-translation summary{list-style:none;}
  .is-flying .announcement-translation[open]{position:absolute;left:12px;right:12px;top:calc(100% + 4px);padding:8px 12px;border-radius:12px;background:#f0e8d9f5;box-shadow:0 6px 20px #0c192530;}
  .is-flying .announcement-translation[open] p{max-height:72px;}

  /* 보조 버튼 한 줄 */
  .is-flying .comfort-button,.is-flying .accessory-button,.is-flying .leave-button{top:calc(122px + var(--st));bottom:auto;min-height:36px;height:36px;padding:0 12px;font-size:12px;border-radius:18px;}
  .is-flying .comfort-button{left:12px;}
  .is-flying .comfort-button,.is-flying .accessory-button,.is-flying .leave-button{white-space:nowrap;}
  .is-flying .comfort-button{width:104px;}
  .is-flying .accessory-button{left:122px;}
  .is-flying .leave-button{left:auto;right:12px;}
  .is-flying .crew-greeting{top:calc(168px + var(--st));left:12px;max-width:min(280px,calc(100% - 24px));}
  .notice-banner{top:calc(168px + env(safe-area-inset-top));}

  /* 하단: 행동 바 → 힌트 → 이동/시점 */
  .is-flying .movement-hint{display:none;}
  .is-flying .action-bar{bottom:calc(10px + var(--sb));width:calc(100% - 24px);padding:4px;gap:2px;border-radius:22px;}
  .is-flying .action-bar button{min-height:60px;min-width:0;padding:6px 2px;gap:4px;border-radius:18px;}
  .is-flying .action-bar svg,.is-flying .action-bar button>span{width:20px;height:20px;}
  .is-flying .action-bar strong{font-size:10px;line-height:1.2;}
  .is-flying .action-separator{margin:10px 1px;}
  .is-flying .gesture-menu{bottom:calc(84px + var(--sb));}
  .is-flying .action-hint{bottom:calc(84px + var(--sb));font-size:11px;padding:4px 12px;max-width:calc(100% - 24px);}

  .is-flying .joystick{left:12px;bottom:calc(120px + var(--sb));grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px);gap:4px;}
  .is-flying .joystick button{font-size:17px;border-radius:13px;background:#fff9efcc;box-shadow:0 2px 0 #a7b9c444;}
  .is-flying .scene-controls{right:12px;bottom:calc(120px + var(--sb));gap:4px;}
  .is-flying .scene-controls .icon-button{width:40px;height:40px;min-width:40px;min-height:40px;font-size:18px;}
  .is-flying .scene-controls .view-button,.is-flying .view-switch .view-button{min-height:40px;padding:0 12px;font-size:11px;min-width:0;}
  .is-flying .view-switch{right:12px;bottom:calc(166px + var(--sb));gap:4px;}
  .is-flying .look-controls{right:12px;bottom:calc(212px + var(--sb));}
  .is-flying .meal-clear{left:12px;bottom:calc(212px + var(--sb));min-height:40px;}
  .is-flying .toast{bottom:calc(220px + var(--sb));}
  .is-flying .first-hint{top:calc(168px + var(--st));bottom:auto;}
  /* 1인칭: 시점 버튼이 3개라 한 줄 위로, 고개 돌리기는 그 위 */
  .is-flying.first-person .view-switch{bottom:calc(212px + var(--sb));}
  .is-flying.first-person .look-controls{bottom:calc(258px + var(--sb));}
  /* 표현하기 메뉴가 열려 있는 동안 아래쪽 조작 버튼은 잠시 숨김 */
  .is-flying.gesture-open :is(.joystick,.scene-controls,.view-switch,.look-controls,.meal-clear){visibility:hidden;}
}
@media (max-width:360px){
  .is-flying .comfort-button,.is-flying .accessory-button,.is-flying .leave-button{padding:0 9px;font-size:11px;}
  .is-flying .comfort-button{width:94px;}.is-flying .accessory-button{left:110px;}
  .is-flying .joystick{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,38px);}
  .is-flying .scene-controls .icon-button{width:36px;height:36px;min-width:36px;min-height:36px;}
  .is-flying .scene-controls .view-button{padding:0 8px;font-size:10px;}
}

/* ==== 모바일 디자인 정돈: 조작부는 객실을 가리지 않게 '한 덩어리 · 한 톤'으로 ====
   주 행동(행동 바)만 불투명하게, 나머지 떠 있는 조작부는 같은 반투명 크림 한 톤. */
@media (max-width:650px){

  /* 좌석 pill: "8D  1명 ●" 한 줄 */
  .is-flying .journey-card{gap:8px;padding:4px 14px;}
  .is-flying .ticket-bottom{flex-direction:row;align-items:center;gap:6px;font-size:12px;color:var(--ink-float);}
  .is-flying .pc-label{display:none;}
  .is-flying #connection[data-state="ok"]{font-size:0;}
  .is-flying #connection[data-state="ok"]::before{content:"●";font-size:9px;}
  .is-flying #connection{font-size:9px;}
  .is-flying #connection[data-state="retry"]{font-size:11px;}

  /* 떠 있는 조작부 공통 톤 */
  .is-flying :is(.comfort-button,.accessory-button,.leave-button,.view-switch .view-button,.meal-clear){
    background:var(--surface-float);border:1px solid var(--surface-float-line);color:var(--ink-float);box-shadow:var(--shadow-float);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:500;}
  .is-flying .leave-button.leave-button{color:#7a8592;font-weight:400;}
  .is-flying .view-switch .view-button[aria-pressed="true"]{background:#dcece7d9;}

  /* 이동: 네 버튼을 하나의 반투명 패드로 */
  .is-flying .joystick{padding:4px;gap:2px;border-radius:18px;background:var(--surface-float);border:1px solid var(--surface-float-line);box-shadow:var(--shadow-float);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .is-flying .joystick button{background:transparent;border:0;box-shadow:none;color:var(--ink-float);border-radius:12px;font-size:16px;}
  .is-flying .joystick button:active{background:#ffffff80;}

  /* 시점: [− ◎ +] 하나의 pill */
  .is-flying .scene-controls{gap:0;padding:2px;border-radius:22px;background:var(--surface-float);border:1px solid var(--surface-float-line);box-shadow:var(--shadow-float);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .is-flying .scene-controls :is(.icon-button,.view-button){background:transparent;border:0;box-shadow:none;color:var(--ink-float);}
  .is-flying .scene-controls #follow{width:40px;min-width:40px;padding:0;font-size:0;}
  .is-flying .scene-controls #follow::before{content:"◎";font-size:17px;}
  .is-flying.first-person .scene-controls :is(#zoomIn,#zoomOut){display:none;}

  /* 고개 돌리기 패드도 같은 톤 */
  .is-flying .look-controls{padding:2px;background:var(--surface-float);border-color:var(--surface-float-line);box-shadow:var(--shadow-float);}
  .is-flying .look-controls button{width:40px;height:40px;min-height:40px;font-size:16px;color:var(--ink-float);}

  /* 행동 힌트: 행동 바에 붙은 조용한 캡션 */
  .is-flying .action-hint{background:#17212cb3;color:#efe6d4;font-size:11px;letter-spacing:-.1px;}

  /* 행동 바: 꺼진 버튼은 더 물러나게, 라벨은 한 줄 우선 */
  .is-flying .action-bar button:disabled{opacity:.38;}
  .is-flying .action-bar strong{letter-spacing:-.3px;}
}
@media (max-width:360px){
  .is-flying .scene-controls #follow{width:36px;min-width:36px;}
  .is-flying .action-bar strong{font-size:9.5px;}
}

/* ==== 디자인 검수 반영 (2026-11-08) ====
   높이 40/60 두 단계, 반경 pill/16 두 단계, 히트 영역 44px, 조작부는 행동 바에 붙여 객실 가림 최소화 */
@media (max-width:650px){
  /* 높이·반경 통일 */
  .is-flying :is(.comfort-button,.accessory-button,.leave-button){height:40px;min-height:40px;border-radius:999px;}
  .is-flying :is(.journey-card,.time-control,.scene-controls,.view-switch .view-button,.meal-clear){border-radius:999px;}
  .is-flying .top-actions .icon-button{background:var(--surface-float);border-color:var(--surface-float-line);color:var(--ink-float);}
  .is-flying .announcement{border-radius:16px;}
  .is-flying .leave-button.leave-button{color:var(--ink-float);border-color:var(--surface-sunken-line);}

  /* 히트 영역 44px 이상 (보이는 크기는 유지) */
  .is-flying :is(.top-actions .icon-button,.scene-controls button,.view-switch .view-button,.joystick button,.look-controls button){position:relative;}
  .is-flying :is(.top-actions .icon-button,.comfort-button,.accessory-button,.leave-button,.scene-controls button,.view-switch .view-button,.look-controls button)::after{content:"";position:absolute;inset:-3px;}
  .is-flying .announcement-translation summary{position:relative;padding:0 6px;}
  .is-flying .announcement-translation summary::after{content:"";position:absolute;inset:-10px -6px;}

  /* 행동 힌트: 배경 없는 캡션 → 톤 레이어 하나 줄임 */
  .is-flying .action-hint{background:none;padding:2px 8px;color:#efe6d4e6;text-shadow:0 1px 4px #0c1925cc;bottom:calc(82px + var(--sb));}

  /* 조작부를 작게, 행동 바 가까이 */
  .is-flying .joystick{bottom:calc(108px + var(--sb));grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px);gap:0;padding:3px;}
  .is-flying .scene-controls{bottom:calc(108px + var(--sb));}
  .is-flying .view-switch{bottom:calc(158px + var(--sb));}
  .is-flying.first-person .view-switch{bottom:calc(204px + var(--sb));}
  .is-flying .meal-clear{bottom:calc(204px + var(--sb));}
  .is-flying .toast{bottom:calc(210px + var(--sb));}

  /* 1인칭: 고개 돌리기는 드래그로. 화살표 패드는 이동 하나만 */
  .is-flying.first-person .look-controls{display:none;}

  /* 시점 초기화 아이콘을 다른 아이콘과 같은 선 굵기 SVG로 */
  .is-flying .scene-controls #follow::before{content:"";display:inline-block;vertical-align:middle;width:18px;height:18px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E") center/contain no-repeat;}

  /* 꺼진 행동은 더 물러나게 */
  .is-flying .action-bar button:disabled{opacity:.3;}

  /* 내 자리·요청도 여행 소품처럼 하단 시트 */
  .comfort-dialog[open]{top:auto;bottom:12px;left:12px;right:12px;transform:none;width:auto;max-width:none;max-height:72dvh;margin:0;border-radius:20px;}
}
@media (max-width:360px){
  .is-flying .joystick{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,38px);}
}

/* ==== 모바일 아날로그 조이스틱 (화살표 패드 대신) ==== */
.stick{display:none;}
@media (max-width:650px){
  .is-flying .joystick{display:none;}
  .is-flying .stick{display:block;position:fixed;left:16px;bottom:calc(100px + var(--sb));width:112px;height:112px;border-radius:50%;
    margin-left:env(safe-area-inset-left,0px);touch-action:none;user-select:none;-webkit-user-select:none;
    background:radial-gradient(circle,#f3ece055 0 38%,#f3ece02e 39% 100%);border:1px solid var(--surface-float-line);box-shadow:var(--shadow-float),inset 0 0 0 10px #fffaf014;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:.85;transition:opacity .4s ease;}
  .is-flying .stick.active{opacity:1;}
  .is-flying .stick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;pointer-events:none;
    background:var(--surface-float);border:1px solid #fffaf0;box-shadow:0 3px 10px #0c192540;transition:transform .18s ease-out;}
  .is-flying .stick.active .stick-knob{transition:none;background:#f6f0e6;}
  .is-flying.gesture-open .stick{visibility:hidden;}
  .is-flying.first-person .view-switch{bottom:calc(222px + var(--sb));}
  .is-flying .meal-clear{bottom:calc(222px + var(--sb));}
  .is-flying .toast{bottom:calc(232px + var(--sb));}
}
@media (prefers-reduced-motion:reduce){.stick,.stick-knob{transition:none !important;}}

/* ==== 모바일 행동 바: 지금 할 수 있는 행동만, 내용 폭만큼 ==== 
   앉아 있을 때: 일어나기 · 벨트 · 표현하기 · 쉬어가기 (+카트가 오면 차/기내식)
   서 있을 때:   내 자리로 · 표현하기 · 쉬어가기 */
@media (max-width:650px){
  .is-flying .action-bar:not(.gesture-menu) .is-off,.is-flying .action-bar .action-separator{display:none;}
  .is-flying .action-bar{width:auto;max-width:calc(100% - 24px);gap:2px;padding:4px 6px;}
  .is-flying .action-bar button{flex:0 1 72px;min-width:0;}
  .is-flying .gesture-menu{width:calc(100% - 24px);}
  .is-flying .gesture-menu button{flex:1 1 0;}
  /* 카트 도착처럼 저절로 생기는 버튼은 갑자기 튀지 않게 천천히 나타난다 */
  .is-flying .action-bar button{animation:act-in .5s ease-out;}
}
@keyframes act-in{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.is-flying .action-bar button{animation:none;}}
@media (min-width:361px) and (max-width:650px){.is-flying .action-bar strong{white-space:nowrap;}}

/* 음료 메뉴 */
.drink-group{margin:14px 0 0;}
.drink-group>small{display:block;font-size:11px;letter-spacing:.5px;color:#6b7a86;margin-bottom:8px;}
.drink-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}
.drink-choices button{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;text-align:left;font-size:13px;}
.drink-swatch{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px #0000001a;}
#drinkFeedback{font-size:12px;min-height:1.6em;margin:10px 0 0;}
@media (max-width:650px){.drink-choices{grid-template-columns:1fr 1fr;}.drink-choices button{font-size:12px;padding:8px 12px;}}

/* Premium meal menu card: courses in order, like a printed menu on the tray table. */
.meal-courses{list-style:none;margin:12px 0 4px;padding:12px 14px;border-radius:14px;background:var(--surface-menu);border:1px solid #d9c6a566;display:grid;gap:6px;}
.meal-courses li{margin:0;display:grid;grid-template-columns:5.5em 1fr;gap:8px;align-items:baseline;font-size:var(--text-body);color:var(--ink);}
.meal-courses small{font-size:var(--text-caption);color:var(--ink-menu-label);letter-spacing:.04em;}
.meal-courses .pairing{border-top:1px dashed var(--surface-menu-line);padding-top:6px;}
#mealDialog[data-cabin="FIRST"] .meal-courses{background:var(--surface-menu-first);border-color:#c7ad7e88;}
.meal-choices button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;}
.meal-choices button small{font-size:var(--text-caption);color:var(--ink-muted);font-weight:400;}

/* ==== QA 2026-11-08 P1 수정 — 아래 가로 블록보다 앞에 둔다(가로 배치를 덮지 않도록) ==== */
@media (max-width:650px){
  /* #5 행동 바가 뷰포트 폭의 50%까지 줄어 버튼이 42×60px였다.
     left:50% + width:auto 의 shrink-to-fit 이 원인이다. 내용 폭으로 잡고 버튼 폭 하한을 터치 타깃까지 올린다. */
  .is-flying .action-bar:not(.gesture-menu){width:calc(100% - 24px);max-width:420px;}
  .is-flying .action-bar:not(.gesture-menu) button{flex:1 1 64px;min-width:46px;}

  /* #7 English 번역 팝오버가 보조 버튼 줄보다 아래 레이어라 첫 줄과 summary 가 가려져 닫을 수 없었다. */
  .is-flying .announcement{z-index:7;}
  .is-flying .announcement-translation[open]{z-index:8;}

  /* #8 도움말의 닫기 ×가 absolute 라 긴 목록을 스크롤하면 사라졌다. 모바일엔 ESC 가 없어 빠져나갈 길이 없었다. */
  #helpDialog{padding:16px;}
  #helpDialog .dialog-close{position:sticky;top:0;float:right;margin:-4px -4px 0 0;background:var(--surface-dialog);border-radius:50%;z-index:1;}
  #helpDialog h2{clear:both;margin:6px 0;}

  /* #6 모바일은 한국어 본문을 한 줄로 줄이므로 전문을 '자세히' 안에서 읽을 수 있게 한다. */
  .is-flying #announcementFull{display:block;margin:0 0 6px;color:var(--ink-title);}
  .is-flying .announcement-translation[open]{max-height:50dvh;overflow:auto;overscroll-behavior:contain;}
  .is-flying .announcement-translation[open] p{max-height:none;}

  /* #14 1인칭 시점 버튼 3개가 한 줄로 화면 가운데까지 뻗어 객실을 가렸다. 오른쪽에 모아 줄바꿈한다. */
  .is-flying.first-person .view-switch{left:auto;right:12px;max-width:200px;flex-wrap:wrap;justify-content:flex-end;}
}
@media (max-width:360px){
  .is-flying .action-bar:not(.gesture-menu) button{min-width:44px;}
  /* #11 탑승 CTA 가 2줄로 꺾여 마지막 '기' 한 글자만 남았다. */
  /* 글자(153px)+좌우 여백(34px)+화살표(12px)에 space-between 간격 50px 이 더해져 3px 가 모자랐다. */
  body:not(.is-flying) .boarding .primary{font-size:11.5px;word-break:keep-all;gap:12px;}
  /* #12 탑승권이 세로 320 에서 6px 넘쳤다. */
  /* 닉네임 줄이 생겨 320 세로에서 다시 넘치지 않도록 좌석 번호를 줄인다. */
  .ticket-dialog .big-seat{font-size:64px;letter-spacing:-4px;margin:2px 0 8px;}
  .ticket-traveller{margin-top:10px;}.ticket-traveller small{display:none;}
  .ticket-dialog h2{margin-top:16px;}
  .ticket-dialog p{margin-top:16px;}
}
/* 데스크톱은 안내 본문이 잘리지 않으므로 전문 문단은 숨긴다(모바일에서만 보인다). */
#announcementFull{display:none;}

/* #15 음료 색 견본이 버튼 배경과 1.03:1 이라 사이다·탄산수가 보이지 않았다. 테두리로 형태를 세운다. */
.drink-swatch{box-shadow:inset 0 0 0 1.5px #5a6a7a73;}

/* ==== 짧은 가로 화면 (높이 ≤500px) — 반드시 모든 모바일 블록 뒤에 둔다 ====
   위의 ≤650px 블록들이 같은 특이도로 가로 규칙을 덮어써서 조작부가 서로 겹쳤다(QA 2026-11-08 P0).
   세로 공간이 ~320px뿐이므로 가로로 펼친다.
   위: [좌석 pill] ···· [시간·소리·?]  /  안내방송(좌) ···· [내 자리][소품][마치기](우)
   아래: 조이스틱(좌) · 행동 바(가운데~우) · 시점 버튼(우, 행동 바 위) */
@media (orientation:landscape) and (max-height:500px){
  .is-flying{--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);}

  /* --- 인트로: 카드가 상단 바를 덮지 않게 위에서 아래로 --- */
  body:not(.is-flying) .boarding{top:calc(56px + env(safe-area-inset-top,0px));bottom:auto;left:16px;right:16px;max-width:none;
    max-height:calc(100dvh - 68px);overflow:auto;overscroll-behavior:contain;padding:14px 20px;border-radius:22px;}
  body:not(.is-flying) .boarding h1{font-size:21px;margin:4px 0;line-height:1.3;}
  body:not(.is-flying) .boarding .intro{font-size:11px;margin:6px 0;}
  body:not(.is-flying) .boarding .primary{margin-top:8px;}
  body:not(.is-flying) :is(.boarding-documents,.boarding-note,.boarding-features,.boarding-meta,.boarding-links,.scene-label,.time-control){display:none;}
  body:not(.is-flying) footer{display:none;}

  /* 탑승권: CTA가 화면 밖으로 나가지 않게 */
  .ticket-dialog{padding:14px 20px;max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;}
  .ticket-dialog .big-seat{font-size:52px;line-height:1;margin:2px 0;}
  .ticket-dialog :is(.ticket-stub,.ticket-flight){display:none;}
  .ticket-dialog p{margin-top:8px;}
  .ticket-traveller{margin-top:6px;}.ticket-traveller small{display:none;}.ticket-traveller strong{font-size:14px;}

  /* --- 기내 상단: 안내방송(좌) + 보조 버튼 3개(우)를 한 줄에 --- */
  .is-flying .topbar{top:calc(8px + var(--st,0px));height:40px;}
  .is-flying .journey-card{top:calc(8px + var(--st,0px));}
  .is-flying .announcement{top:calc(52px + var(--st,0px));left:12px;right:auto;
    width:calc(100% - 320px);min-width:150px;max-width:300px;max-height:46px;overflow:auto;padding:6px 12px;}
  .is-flying .announcement strong{padding-right:38px;}
  .is-flying .announcement .phase-time{top:7px;right:10px;}
  .is-flying :is(.comfort-button,.accessory-button,.leave-button){top:calc(52px + var(--st,0px));bottom:auto;left:auto;}
  .is-flying .comfort-button{right:197px;}
  .is-flying .accessory-button{right:118px;}
  .is-flying .leave-button{right:12px;}
  .is-flying .crew-greeting{top:calc(100px + var(--st,0px));left:12px;max-width:min(260px,46%);}
  .notice-banner{top:calc(100px + var(--st,0px));max-width:min(420px,56%);}
  .is-flying .toast{top:calc(100px + var(--st,0px));bottom:auto;}

  /* 첫 진입 힌트: 닫기 버튼이 화면 밖으로 나가지 않게 스크롤 가능한 카드로 */
  .is-flying .first-hint{top:calc(50px + var(--st,0px));bottom:auto;width:min(330px,calc(100% - 24px));
    max-height:calc(100dvh - 62px);overflow:auto;overscroll-behavior:contain;padding:12px 16px;}
  .is-flying .first-hint li{line-height:1.6;}

  /* --- 기내 하단: 조이스틱(좌) · 행동 바(우) · 시점 버튼(행동 바 위) --- */
  .is-flying .action-bar:not(.gesture-menu){left:auto;right:12px;transform:none;
    bottom:calc(8px + var(--sb,0px));width:calc(100% - 124px);max-width:420px;padding:4px;border-radius:20px;}
  .is-flying .action-bar button{flex:1 1 0;min-width:46px;min-height:56px;padding:5px 2px;gap:3px;}
  .is-flying .action-bar strong{font-size:10px;line-height:1.2;white-space:normal;}
  .is-flying .action-bar kbd{display:none;}
  .is-flying :is(.action-hint,.movement-hint){display:none;}
  .is-flying .gesture-menu{bottom:calc(72px + var(--sb,0px));width:min(420px,calc(100% - 24px));}

  .is-flying .stick{left:12px;bottom:calc(8px + var(--sb,0px));width:88px;height:88px;}
  .is-flying .stick-knob{width:40px;height:40px;margin:-20px 0 0 -20px;}
  .is-flying .joystick{left:12px;bottom:calc(8px + var(--sb,0px));}
  .is-flying .scene-controls{right:12px;bottom:calc(78px + var(--sb,0px));}
  .is-flying .view-switch{right:12px;left:auto;bottom:calc(124px + var(--sb,0px));
    flex-wrap:wrap;justify-content:flex-end;max-width:260px;}
  .is-flying.first-person .view-switch{bottom:calc(124px + var(--sb,0px));}
  .is-flying .look-controls{right:12px;bottom:calc(170px + var(--sb,0px));}
  .is-flying .meal-clear{left:12px;bottom:calc(104px + var(--sb,0px));}

  /* 다이얼로그: 짧은 높이에서도 닫기와 본문이 모두 닿게 */
  .comfort-dialog[open]{top:auto;bottom:8px;left:12px;right:12px;transform:none;width:auto;max-width:none;
    max-height:calc(100dvh - 16px);margin:0;border-radius:18px;padding:14px 16px;}
  .comfort-dialog .dialog-close{position:sticky;top:0;float:right;margin:-4px -4px 0 0;background:var(--surface-dialog);border-radius:50%;z-index:1;}
  .comfort-dialog h2{clear:both;margin:4px 0;font-size:20px;}
  .comfort-dialog>p{margin:6px 0;}
  .comfort-dialog .rest-preference{margin:10px 0;padding:8px 10px;}
  .comfort-dialog .comfort-actions{margin:8px 0;}
}

/* 폰 가로에서 너비가 650px를 넘으면(예: 844×390) 이동 조작이 하나도 보이지 않았다.
   화살표 패드와 조이스틱이 둘 다 세로 전용(≤650px)이라 터치로는 움직일 수 없다. 터치 기기면 조이스틱을 보인다. */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) and (min-width:651px){
  .is-flying .stick{display:block;position:fixed;left:12px;bottom:calc(8px + env(safe-area-inset-bottom,0px));
    width:88px;height:88px;border-radius:50%;margin-left:env(safe-area-inset-left,0px);
    touch-action:none;user-select:none;-webkit-user-select:none;
    background:radial-gradient(circle,#f3ece055 0 38%,#f3ece02e 39% 100%);border:1px solid var(--surface-float-line);
    box-shadow:0 4px 16px #0c19252e,inset 0 0 0 8px #fffaf014;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:.85;transition:opacity .4s ease;}
  .is-flying .stick.active{opacity:1;}
  .is-flying .stick-knob{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
    border-radius:50%;pointer-events:none;background:#f3ece0d9;border:1px solid #fffaf0;
    box-shadow:0 3px 10px #0c192540;transition:transform .18s ease-out;}
  .is-flying .stick.active .stick-knob{transition:none;background:#f6f0e6;}
  .is-flying.gesture-open .stick{visibility:hidden;}
}
@media (prefers-reduced-motion:reduce){.stick,.stick-knob{transition:none !important;}}

/* 쉬는 모드 (2026-11-09): 내 화면만 어둡게 덮고, 입력이 없으면 UI를 숨긴다. 안전 안내(.belt-on .announcement)는 숨기지 않는다. */
.rest-veil{position:fixed;inset:0;background:var(--rest-veil);opacity:0;pointer-events:none;transition:opacity 2.4s ease;}
body.rest-on :is(.journey-card,.action-bar,.action-hint,.movement-hint,.joystick,.stick,.scene-controls,.leave-button){display:none !important;}
body.rest-on:not(.belt-on) .announcement{display:none !important;}
.rest-bar{position:fixed;z-index:4;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));width:min(620px,calc(100% - 24px));padding:14px 16px;border-radius:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;}
.rest-bar-head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.rest-bar-head strong{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;}
.rest-bar-head>span{font-size:12px;color:var(--ink-muted);text-align:right;}
.rest-control{min-width:0;}
.rest-control>span{display:block;font-size:12px;color:var(--ink-label);margin-bottom:5px;}
.rest-control .segmented button{padding:0 4px;word-break:keep-all;}
#restEnd{grid-column:1/-1;min-height:44px;}
body.rest-on :is(.topbar,.comfort-button,.accessory-button,.view-switch,.look-controls,.rest-bar){transition:opacity .7s ease,visibility .7s;}
body.rest-idle :is(.topbar,.comfort-button,.accessory-button,.view-switch,.look-controls,.rest-bar){opacity:0;visibility:hidden;}
.rest-hint{position:fixed;z-index:6;left:50%;bottom:calc(32px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:var(--rest-hint-bg);color:var(--rest-ink);font-size:12px;white-space:nowrap;pointer-events:none;}
.rest-ended{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:var(--rest-veil);color:var(--rest-ended-ink);text-align:center;}
.rest-ended strong{font-size:18px;font-weight:600;}
.rest-ended p{font-size:13px;color:var(--rest-ended-body);margin:10px 0 20px;}
@media(max-width:650px){
  .rest-bar{grid-template-columns:1fr;padding:12px;gap:8px;}
  .rest-control .segmented button{min-height:40px;}
  #restEnd{min-height:40px;}
}
@media(orientation:landscape) and (max-height:500px){
  .rest-bar{grid-template-columns:1fr 1fr auto;align-items:end;padding:8px 10px;bottom:calc(6px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px);max-width:760px;}
  .rest-bar-head{display:none;}
  #restEnd{grid-column:auto;white-space:nowrap;padding:0 12px;}
}
/* .rest-ended 는 일부러 서서히 나타나지 않는다. 막이 걷히는 동안 잠든 방이 잠깐 밝아지면 안 된다. */
/* 쉬는 패널이 차지한 높이만큼 남은 버튼을 위로 올린다. */
body.rest-on .toast{bottom:calc(232px + env(safe-area-inset-bottom,0px));}
@media(max-width:650px){body.rest-on .toast{bottom:calc(292px + env(safe-area-inset-bottom,0px));}}
@media(min-width:651px) and (min-height:501px){
  body.rest-on :is(.comfort-button,.accessory-button){bottom:calc(232px + env(safe-area-inset-bottom,0px));}
  body.rest-on .view-switch,body.rest-on.first-person .view-switch{bottom:calc(232px + env(safe-area-inset-bottom,0px));}
  body.rest-on .look-controls,body.rest-on.first-person .look-controls{bottom:calc(290px + env(safe-area-inset-bottom,0px));}
}
@media(max-width:650px){
  body.rest-on .view-switch,body.rest-on.first-person .view-switch{bottom:calc(292px + env(safe-area-inset-bottom,0px));}
  body.rest-on .look-controls,body.rest-on.first-person .look-controls{bottom:calc(344px + env(safe-area-inset-bottom,0px));}
}
@media(orientation:landscape) and (max-height:500px){
  body.rest-on .comfort-button{right:207px;}
  body.rest-on .view-switch,body.rest-on.first-person .view-switch{bottom:calc(104px + env(safe-area-inset-bottom,0px));}
  body.rest-on .look-controls,body.rest-on.first-person .look-controls{bottom:calc(156px + env(safe-area-inset-bottom,0px));}
  body.rest-on .toast{bottom:calc(104px + env(safe-area-inset-bottom,0px));}
}
@media(prefers-reduced-motion:reduce){
  .rest-veil,body.rest-on :is(.topbar,.comfort-button,.accessory-button,.view-switch,.look-controls,.rest-bar){transition:none;}
}

/* 안내 문구 반영 (2026-11-09): 문구를 자르지 않는다. 지정한 줄바꿈을 살리고, 모바일 안내 카드는 필요한 줄 수만큼 늘어난다.
   카드 아래 조작부 위치는 app.js가 넘겨주는 --announce-bottom(카드 아래쪽 좌표)을 따른다. */
#announcementText,#announcementFull,#serviceStatus,#restStatus,#mealFeedback,#drinkFeedback,#servicePreferenceHint,#mealIntro,#crewMessage,#boardMessage,.toast,.action-hint{white-space:pre-line;}
.action-hint:empty{display:none;}
@media (max-width:650px),(orientation:landscape) and (max-height:500px){
  .is-flying .announcement{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:0 8px;align-items:center;}
  .is-flying .announcement>div{display:contents;}
  .is-flying .announcement-icon{grid-column:1;grid-row:1 / span 2;}
  .is-flying .announcement strong{grid-column:2;grid-row:1;padding-right:0;white-space:nowrap;}
  .is-flying .announcement-translation{grid-column:3;grid-row:1;}
  .is-flying .announcement .phase-time{position:static;grid-column:4;grid-row:1;padding:0;margin:0;}
  .is-flying .announcement>div p{grid-column:2 / -1;grid-row:2;margin:2px 0 0;font-size:11px;line-height:1.45;white-space:pre-line;overflow:visible;text-overflow:clip;}
}
@media (max-width:650px) and (min-height:501px){
  .is-flying :is(.comfort-button,.accessory-button,.leave-button){top:calc(var(--announce-bottom,114px) + 8px);}
  .is-flying .comfort-button{width:126px;}
  .is-flying .accessory-button{left:146px;}
  .is-flying .crew-greeting,.is-flying .first-hint{top:calc(var(--announce-bottom,114px) + 56px);}
  .notice-banner{top:calc(var(--announce-bottom,114px) + 56px);}
}
/* 좁은 폰: 아이콘을 빼서 폭을 벌고 글자를 한 단계 줄인다. */
@media (max-width:360px) and (min-height:501px){
  .is-flying .announcement{grid-template-columns:minmax(0,1fr) auto auto;}
  .is-flying .announcement-icon{display:none;}
  .is-flying .announcement strong{grid-column:1;font-size:12px;}
  .is-flying .announcement-translation{grid-column:2;}
  .is-flying .announcement .phase-time{grid-column:3;}
  .is-flying .announcement>div p{grid-column:1 / -1;font-size:10px;}
  .is-flying .comfort-button{width:112px;}
  .is-flying .accessory-button{left:130px;}
}
/* 가로 폰: 카드 폭이 좁아 '자세히'를 본문 아래 줄로 내린다. */
@media (orientation:landscape) and (max-height:500px){
  .is-flying .announcement{grid-template-columns:minmax(0,1fr) auto;width:calc(100% - 340px);max-width:340px;max-height:none;overflow:visible;}
  .is-flying .announcement-icon{display:none;}
  .is-flying .announcement strong{grid-column:1;}
  .is-flying .announcement .phase-time{grid-column:2;}
  .is-flying .announcement>div p{grid-column:1 / -1;font-size:10px;}
  .is-flying .announcement-translation{grid-column:1 / -1;grid-row:3;justify-self:end;}
  .is-flying .comfort-button{width:auto;}
  .is-flying .crew-greeting,.is-flying .toast{top:calc(var(--announce-bottom,98px) + 8px);}
  .notice-banner{top:calc(var(--announce-bottom,98px) + 8px);}
}