/* Native dialogs keep their focus boundary; the original stage is moved, never cloned. */
body.image-viewing,body.night-theater-open { overflow:hidden; }
.image-viewing *,.image-viewing *::before,.image-viewing *::after { animation-play-state:paused!important; }
.image-viewing .mobile-sticky,.night-theater-open .mobile-sticky { visibility:hidden; pointer-events:none; }
.night-theater-open .hero-section *,.night-theater-open .left-rail *,.night-theater-open .right-rail * { animation-play-state:paused!important; }
.night-theater { width:min(1080px,96vw); max-height:94dvh; padding:18px; border:1px solid #bf9c5666; border-radius:20px; color:#e3edff; background:#07172f; box-shadow:0 25px 100px #0009; overscroll-behavior:contain; }
.night-theater::backdrop,.image-viewer::backdrop { background:#030b1be8; backdrop-filter:blur(9px); }
.night-theater-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }
.night-theater-top small { color:#c4a76a; font:800 9px/1.3 var(--display); letter-spacing:2px; }
.night-theater-top h3 { color:#f1f5fc; font-size:19px; font-weight:800; margin-top:4px; }
.night-theater-top button { display:flex; align-items:center; gap:10px; flex:none; min-height:44px; border:1px solid #b2c6e355; border-radius:8px; padding:8px 13px; font-size:12px; background:#14315a; color:#eef3fe; }
.night-theater-top button>span { font:27px/1 Arial; }
.night-theater .night-stage { margin:0; width:100%; box-shadow:none; }
.night-theater [data-stage-theater-open] { display:none; }
.night-theater .stage-top-actions [data-stage-play] { padding-inline:15px; }
.night-theater .theater-note { color:#9eb4d5; font-size:11px; line-height:1.6; text-align:center; margin:12px 0 0; }
.night-theater button:focus-visible,.night-theater a:focus-visible { outline:2px solid #ffe6ac; outline-offset:3px; }
@media(min-width:900px) {
  .night-theater .night-stage { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr); }
  .night-theater .stage-topline,.night-theater .stage-toolbar,.night-theater .night-controls,.night-theater .night-progress { grid-column:1 / -1; }
  .night-theater .night-floor { grid-column:1; grid-row:4; height:clamp(320px,43vh,430px); }
  .night-theater .night-relay { grid-column:1; grid-row:5; }
  .night-theater .stage-caption { grid-column:2; grid-row:4 / 6; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-height:0; padding:27px; border-top:0; border-left:1px solid #789ad233; background:linear-gradient(145deg,#102f61,#081c3f); }
  .night-theater .stage-caption-top { width:100%; }
  .night-theater .stage-caption h3 { font-size:30px; line-height:1.55; margin:18px 0 14px; letter-spacing:-1px; }
  .night-theater .stage-caption #night-copy { font-size:15px; min-height:0; line-height:1.9; }
  .night-theater #night-feature-link { font-size:12px; margin-top:21px; }
  .night-theater .shift-person { max-width:150px; }
  .night-theater .shift-system { max-width:162px; }
  .night-theater .shift-manager { max-width:142px; }
  .night-theater .show-word { font-size:88px; }
  .night-theater .customer-memory { max-width:255px; width:52%; }
  .night-theater .memory-records strong { font-size:13px; }
}
.image-viewer { width:min(1180px,96vw); max-height:94dvh; padding:0; overflow:hidden; border:1px solid #a5b8d755; border-radius:17px; color:#18345f; background:#f4f7fb; box-shadow:0 25px 100px #0009; }
.image-viewer-header { display:flex; align-items:center; gap:16px; min-height:72px; padding:13px 20px; border-bottom:1px solid #bbcce7; background:#f9fbff; }
.image-viewer-title { display:grid; gap:4px; }
.image-viewer-title>small { color:#76869f; font:800 9px/1.2 var(--display); letter-spacing:2px; }
.image-viewer-title>strong { color:#112f5f; font-size:16px; line-height:1.4; }
.image-viewer-position { margin-left:auto; color:#496387; font:800 14px/1 var(--display); letter-spacing:2px; white-space:nowrap; }
.image-viewer .dialog-close { position:static; display:grid; place-items:center; flex:none; min-width:42px; height:42px; padding:0; border:1px solid #b6c6dd; border-radius:50%; background:#fff; color:#17365f; font:30px/1 Arial; }
.image-viewport { height:min(60vh,650px); min-height:180px; width:100%; position:relative; overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; background:#142642; scrollbar-color:#8fa8c8 #142642; outline-offset:-3px; }
.image-canvas { position:relative; min-width:100%; min-height:100%; }
.image-viewer #dialog-image { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block; max-width:none; max-height:none; width:auto; height:auto; object-fit:contain; user-select:none; -webkit-user-drag:none; background:#fff; box-shadow:0 8px 35px #0004; }
.image-viewport.is-zoomed { cursor:grab; }
.image-viewport.is-dragging { cursor:grabbing; }
.image-viewer-footer { padding:12px 20px 14px; }
.image-viewer-caption { color:#18385f; font-size:12px; line-height:1.6; font-weight:700; }
.image-viewer-controls { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:10px; }
.image-viewer-nav,.image-viewer-zoom { display:flex; align-items:center; gap:6px; }
.image-viewer-controls button { display:grid; place-items:center; min-height:40px; min-width:40px; padding:7px 12px; border:1px solid #aabcda; border-radius:7px; background:#fff; color:#153968; font-size:12px; font-weight:800; }
.image-viewer-controls button:hover { background:#e4ecf9; }
.image-viewer-controls button:disabled { opacity:.35; cursor:default; }
.image-viewer-zoom output { min-width:36px; text-align:center; color:#496387; font:800 12px/1 var(--display); }
.image-viewer-help { margin-top:9px; color:#617796; font-size:10px; line-height:1.5; }
.image-viewer-note { display:inline; color:#7788a0; font-size:9px; line-height:1.5; }
.image-original-link { display:inline-block; margin-left:12px; color:#315b94; font-size:10px; text-decoration:underline; text-underline-offset:3px; }
.image-failed #dialog-image { visibility:hidden; }
.image-viewer :focus-visible { outline:2px solid #397bd2; outline-offset:3px; }
@media(max-width:540px) {
  .night-theater { padding:10px; border-radius:14px; width:98vw; max-height:96dvh; }
  .night-theater-top { margin-bottom:10px; gap:8px; }
  .night-theater-top small { font-size:8px; letter-spacing:1px; }
  .night-theater-top h3 { font-size:15px; }
  .night-theater-top button { padding:6px 9px; min-height:40px; font-size:10px; gap:7px; }
  .night-theater .theater-note { font-size:9px; margin-top:9px; }
  .image-viewer { width:97vw; max-height:96dvh; border-radius:13px; }
  .image-viewer-header { min-height:63px; padding:10px 12px; gap:10px; }
  .image-viewer-title>strong { font-size:13px; }
  .image-viewer-title>small { font-size:8px; }
  .image-viewer-position { font-size:12px; letter-spacing:1px; }
  .image-viewer .dialog-close { min-width:36px; height:36px; font-size:27px; }
  .image-viewport { height:52vh; min-height:170px; }
  .image-viewer-footer { padding:10px 12px 12px; }
  .image-viewer-caption { font-size:10px; }
  .image-viewer-controls { gap:9px; margin-top:8px; }
  .image-viewer-nav,.image-viewer-zoom { gap:4px; }
  .image-viewer-controls button { min-width:33px; min-height:39px; padding:6px 8px; font-size:10px; }
  .image-viewer-zoom output { min-width:29px; font-size:11px; }
  .image-viewer-help { font-size:9px; margin-top:7px; }
  .image-viewer-note { font-size:8px; }
  .image-original-link { font-size:9px; margin-left:0; margin-top:4px; }
}
@media(max-width:370px) {
  .image-viewer-controls { flex-wrap:wrap; justify-content:center; gap:7px 18px; }
  .image-viewport { height:47vh; }
}
@media(prefers-reduced-motion:reduce) { .night-theater *,.image-viewer * { scroll-behavior:auto!important; } }
.image-viewer[open] { display:flex; flex-direction:column; }
.image-viewer-header,.image-viewer-footer { flex:none; }
.image-viewer .image-viewport { flex:1 1 auto; min-height:min(180px,32dvh); }
@media(max-height:480px) {
  .image-viewer-header { min-height:52px; padding-block:6px; }
  .image-viewer-title>small,.image-viewer-help,.image-viewer-note { display:none; }
  .image-viewer-footer { padding-block:7px; }
  .image-viewer-controls { margin-top:5px; }
  .image-viewer-controls button { min-height:33px; }
  .image-original-link { font-size:9px; margin-top:3px; }
}