/* Latest Figma: 42:1469 / 42:1256 / 46:1640 / 46:1826.
   Fixed 390 × 844. No proportional scaling. */
body.single .board { position: relative; overflow: hidden; isolation: isolate; }
body.single .sheet { position: absolute; left: 0; top: 0; }
body.single .board.is-transitioning { pointer-events: none; }
@font-face { font-family: 'Noto Serif Title'; src: url('assets/figma/noto-serif-title.ttf'); font-weight: 600; font-display: block; }
[hidden] { display: none !important; }
body.embed-preview .prototype-tools { display: none; }
body.embed-preview .preview-bar { display: none; }
body.embed-preview { overflow: hidden; }
button, [role="button"], [role="radio"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, [role="button"]:focus-visible, [role="radio"]:focus-visible { outline: 2px solid #936117; outline-offset: 2px; }
.primary:disabled { background: #d6d0c5; color: #776f64; cursor: not-allowed; }
.status { padding: 0; display: block; }
.status-time { position: absolute; left: 33px; top: 20px; width: 48px; height: 22px; font: 600 17px/22px MiSans, sans-serif; }
.dynamic-island { position: absolute; left: 133px; top: 12px; width: 125px; height: 37px; border-radius: 100px; background: #000; }
.status-icons { position: absolute; left: 294px; top: 24px; width: 85px; height: 13px; }
.status-icons img { width: 85px; height: 13px; }
#frame-details > .status { background: #071b2d; }
#frame-details > .nav { display: none; }
.detail-hero { height: 290px; }
.detail-hero .poster-image { position: absolute; top: 59px; height: 211px; object-fit: cover; }
.detail-sheet { top: 270px; height: 442px; }
.detail-hero .film-lettering, .poster-mini .mini-title, .ticket-poster .film-lettering { font-family: 'Noto Serif Title', SimSun, serif; font-weight: 600; }
.showtime { text-align: left; }
.date-option, .showtime { transition: background-color 160ms cubic-bezier(.22,1,.36,1), box-shadow 160ms cubic-bezier(.22,1,.36,1); }
.primary.is-paying { display: flex; align-items: center; justify-content: center; gap: 8px; }
.payment-spinner { width: 16px; height: 16px; border: 2px solid #827b6d; border-top-color: #fffcf6; border-radius: 10px; animation: payment-spin 700ms linear infinite; }
@keyframes payment-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .date-option, .showtime { transition: none; }
  .payment-spinner { animation: none; }
}
.showtime.selected { box-shadow: inset 0 0 0 1px #e3dccf; }
.showtime.is-chosen { box-shadow: inset 0 0 0 1px #936117; background: #f5ead8; }
.seats-movie { top: 135px; }
.screen-arc { top: 215px; height: 29px; }
.seat-map { top: 260px; }
.seat-legend { top: 576px; }
.selected-seats { top: 616px; height: 104px; padding-top: 8px; }
.seat-state, .seat-chip { box-shadow: none; }
.seat-grid { position: absolute; left: 37px; top: 260px; width: 316px; height: 300px; }
.seat-column { position: absolute; top: 0; width: 20px; height: 14px; font-size: 10px; line-height: 14px; text-align: center; color: #8b8275; }
.seat-row { position: absolute; left: 0; width: 18px; height: 18px; font-size: 12px; line-height: 18px; text-align: center; color: #625c52; }
.seat-button { position: absolute; width: 30px; height: 36px; padding: 4px 2px; transform: translateY(0); }
.seat-button[aria-pressed="true"] { transform: translateY(-2px); }
.seat-button img { width: 26px; height: 28px; pointer-events: none; }
.seat-check { position: absolute; left: 2px; top: 4px; width: 26px; height: 28px; pointer-events: none; }
.seat-check path { fill: none; stroke: #26231b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.seat-button:disabled { cursor: not-allowed; }
.seat-chips { position: relative; display: grid; grid-template-columns: 169px 169px; grid-auto-rows: 28px; column-gap: 12px; row-gap: 8px; height: 64px; margin-top: 8px; overflow: visible; padding: 0; }
.seat-chip { width: 169px; height: 28px; grid-template-columns: 131px 14px; gap: 4px; padding: 4px 10px; text-align: left; }
.seat-chip-ghost { position: absolute; z-index: 2; pointer-events: none; transform-origin: center top; }
.seat-chip .chip-close { width: 14px; height: 20px; font-size: 16px; line-height: 20px; text-align: center; }
.seat-empty { grid-column: 1 / 3; width: 350px; height: 28px; color: #8b8275; font-size: 12px; line-height: 28px; }
.ticket-success { top: 103px; }
.ticket { top: 177px; }
.ticket-stamp { top: 613px; left: 294px; }
.location-button { top: 699px; }
.ticket-reminder { top: 763px; }
#frame-ticket .home-area { top: 807px; }
.ticket-backdrop-shade { display: none; }
.projector-light { left: 237px; top: 80px; width: 148px; height: 174px; filter: blur(8px); }
.ticket-seats.single-seat { display: block; }
.ticket-seats.single-seat p { width: 266px; }
.ticket-seats.many-seats { top: 296px; height: 44px; display: grid; grid-template-columns: 128px 128px; grid-template-rows: 22px 22px; column-gap: 10px; }
.ticket-seats.many-seats p { width: 128px; height: 22px; font-size: 15px; line-height: 22px; }
.prototype-toast { position: absolute; z-index: 12; left: 35px; top: 112px; width: 320px; padding: 12px 16px; border-radius: 10px; background: #201f1c; color: #fffcf6; font-size: 13px; line-height: 20px; box-shadow: 0 4px 16px #00000020; }
.prototype-modal { position: absolute; z-index: 20; left: 0; top: 0; width: 390px; height: 844px; background: #00000066; display: flex; align-items: center; justify-content: center; }
.modal-panel { width: 350px; padding: 24px; border-radius: 16px; background: #fffcf6; }
.modal-panel h2 { width: 302px; height: 28px; font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 12px; }
.modal-panel p { width: 302px; font-size: 14px; line-height: 22px; color: #776f64; }
.modal-actions { display: flex; gap: 12px; margin-top: 24px; }
.modal-actions button { width: 145px; height: 44px; border-radius: 8px; background: #eee8de; font-size: 14px; }
.modal-actions .confirm { background: #201f1c; color: #fffcf6; }
.modal-actions .only { width: 302px; }
body.single .board { position: relative; }
.prototype-tools { width: 390px; height: 36px; padding: 8px 12px; font-size: 11px; line-height: 20px; color: #776f64; display: flex; gap: 16px; background: #eae7e1; }
.prototype-tools button, .prototype-tools a { font-size: 11px; line-height: 20px; }
.prototype-tools .demo-label { width: 190px; }