/* 暗幕：在舞台（canvas、選單）之上、面板之下，透明度由鏡頭控制 */
.veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(80% 80% at 50% 52%, rgba(7, 7, 13, 0.93) 0%, rgba(7, 7, 13, 0.85) 60%, rgba(7, 7, 13, 0.62) 100%); }

/* 還沒打開過的面板：瀏覽器先不排版裡面的內容（開場比較快）。
   第一次要打開、或開場幾秒後有空檔時，main.js 會加上 was-on，之後就跟一般一樣 */
.panel:not(.was-on) { content-visibility: hidden; }

/* hidden 屬性要贏過下面的 display 設定 */
.panel [hidden] { display: none !important; }

/* ── 內容面板 ────────────────────────────────────────
   鏡頭飛到定位後，面板從靠畫面邊的那一側用硬邊擦出來（跟印刷版換印法的擦除同一個語言），
   裡面的區塊再一段一段錯開浮上來。面板本身可以捲動，背後的 3D 舞台繼續跑。 */

.panel, .pback {
  --w: clamp(460px, 46vw, 820px);
  --gut: clamp(40px, 4.4vw, 72px);   /* 面板外側的留白 */
  --air: clamp(56px, 6vw, 104px);    /* 面板靠舞台那一側的留白（漸層發生在這裡） */
}
.panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--w);
  z-index: 3;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(96px, 13vh, 132px) var(--gut) 64px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  color: var(--bone);
  font-size: 16px;
  scrollbar-width: none;
  --fade-top: 88px;
  --fade-bot: 64px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, calc(1 - var(--fade-t, 0))) 0, rgba(0, 0, 0, calc(1 - var(--fade-t, 0))) calc(var(--fade-top) * 0.6), #000 var(--fade-top), #000 calc(100% - var(--fade-bot)), rgba(0, 0, 0, calc(1 - var(--fade-b, 0))) calc(100% - var(--fade-bot) * 0.4), rgba(0, 0, 0, calc(1 - var(--fade-b, 0))) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, calc(1 - var(--fade-t, 0))) 0, rgba(0, 0, 0, calc(1 - var(--fade-t, 0))) calc(var(--fade-top) * 0.6), #000 var(--fade-top), #000 calc(100% - var(--fade-bot)), rgba(0, 0, 0, calc(1 - var(--fade-b, 0))) calc(100% - var(--fade-bot) * 0.4), rgba(0, 0, 0, calc(1 - var(--fade-b, 0))) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease, visibility 0s linear 0.7s;
}
.panel::-webkit-scrollbar { display: none; }
/* 燈光、音響頁：文字佔畫面一半 */
:is(.panel, .pback)[data-panel="light"], :is(.panel, .pback)[data-panel="audio"] { --w: clamp(480px, 50vw, 960px); }
.panel[data-panel="light"] .panel__lead, .panel[data-panel="audio"] .panel__lead { font-size: clamp(19px, 1.6vw, 24px); }
:is(.panel[data-panel="light"], .panel[data-panel="audio"]) :is(.ticks li, .ticks li > b:first-child) { font-size: 17px; }
:is(.panel[data-panel="light"], .panel[data-panel="audio"]) .ticks li { padding-left: 140px; }
:is(.panel[data-panel="light"], .panel[data-panel="audio"]) .ticks li > b:first-child { width: 128px; }
:is(.panel[data-panel="light"], .panel[data-panel="audio"]) .spec { font-size: 16px; }
:is(.panel[data-panel="light"], .panel[data-panel="audio"]) .spec--gear th { font-size: 15px; }
:is(.panel[data-panel="light"], .panel[data-panel="audio"]) .tryit { font-size: 15px; }
:is(.panel[data-panel="light"], .panel[data-panel="audio"]) .pblock__h { font-size: 19px; }
.panel[data-side="left"] {
  left: 0;
  clip-path: inset(0 100% 0 0);
  padding-right: var(--air);
}
.panel[data-side="right"] {
  right: 0;
  padding-left: var(--air);
}
/* 側邊面板的底色：獨立一層，不跟著面板捲動時的上下緣淡出（不然一捲，後面的桁架就從上面露出來）。
   底色在文字開始之前就已經夠深，漸層只發生在靠舞台那一側的留白 */
.pback {
  position: absolute; top: 0; bottom: 0; width: var(--w); z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
}
.pback[data-side="left"] { left: 0; background: linear-gradient(90deg, rgba(8, 8, 10, 0.95) 0%, rgba(8, 8, 10, 0.9) calc(100% - var(--air)), rgba(8, 8, 10, 0) 100%); }
.pback[data-side="right"] { right: 0; background: linear-gradient(270deg, rgba(8, 8, 10, 0.95) 0%, rgba(8, 8, 10, 0.9) calc(100% - var(--air)), rgba(8, 8, 10, 0) 100%); }
.pback.is-on { opacity: 1; }
.is-narrow .pback { display: none; }
/* 置中的整頁（公告、租借）：鏡頭移到舞台正中間，內容佔滿畫面，舞台退成背後暗暗的場景 */
.panel[data-side="center"] {
  --w: 100%;
  --col: min(1560px, 92vw);
  --fade-top: 12vh;
  --fade-bot: 8vh;
  left: 0; right: 0;
  padding: 12vh calc((100% - var(--col)) / 2) 9vh;
  gap: 56px;
  clip-path: inset(0 50% 0 50%);
}
.panel.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease, visibility 0s;
}

/* 裡面的區塊錯開浮上來 */
.panel > * { opacity: 0; translate: 0 14px; transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.panel.is-on > * { opacity: 1; translate: 0 0; }
.panel.is-on > *:nth-child(2) { transition-delay: 0.12s; }
.panel.is-on > *:nth-child(3) { transition-delay: 0.2s; }
.panel.is-on > *:nth-child(4) { transition-delay: 0.28s; }
.panel.is-on > *:nth-child(5) { transition-delay: 0.36s; }
.panel.is-on > *:nth-child(n + 6) { transition-delay: 0.44s; }

.panel__head { display: grid; gap: 12px; }
.panel [tabindex="-1"]:focus { outline: none; }
/* 返回全景：就在每一頁標題的上方，跟著內容在同一側 */
.panel__top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.panel__back {
  font: 500 14px/1 var(--sans); letter-spacing: 0.12em; color: var(--bone);
  background: none; border: 1px solid var(--line-4); padding: 11px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.panel__back span { transition: translate 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.panel__back:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.panel__back:hover span { translate: -4px 0; }
.panel__top kbd { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--text-6); border: 1px solid var(--line-3); padding: 5px 7px; }
.is-narrow .panel__top kbd { display: none; }
.panel__code { font: 500 13px/1 var(--mono); letter-spacing: 0.2em; color: var(--dim); }
.panel__title { font-size: clamp(52px, 5.8vw, 96px); font-weight: 700; letter-spacing: 0.06em; line-height: 1.02; }
.panel__en {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 125;
  font-size: 14px; line-height: 1.6; letter-spacing: 0.28em; color: var(--dim);
}
.panel__en--zh { font-family: var(--sans); font-weight: 500; font-variation-settings: normal; font-size: 15px; letter-spacing: 0.12em; }
.panel__lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.9; color: var(--text-1); }
/* 置中整頁：標題縮成一行（返回｜頁碼｜標題｜英文），把高度留給內容 */
.panel[data-side="center"] .panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.panel[data-side="center"] .panel__top { margin: 0; }
.panel[data-side="center"] .panel__title { font-size: clamp(34px, 3.2vw, 48px); }
.panel[data-side="center"] .panel__en { align-self: flex-end; padding-bottom: 6px; }

.pblock { display: grid; gap: 18px; }
.pblock__h {
  font-size: 17px; font-weight: 700; letter-spacing: 0.14em;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: baseline; gap: 12px;
}
.pblock__h small { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; color: var(--dim); }
.ptext { font-size: 16px; line-height: 1.9; color: var(--text-2); }
.note { font-size: 14px; line-height: 1.8; color: var(--text-6); }
.note a, .ptext a, .ticks a, .opt a, .panel__lead a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-5); }
.note a:hover, .ptext a:hover, .ticks a:hover { text-decoration-color: var(--bone); }

/* 三件事：像控台上三顆編號鍵 */
.trio { list-style: none; padding: 0; display: grid; gap: 18px; counter-reset: trio; }
.trio li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; counter-increment: trio; }
.trio li::before {
  content: counter(trio, decimal-leading-zero); grid-row: span 2;
  font: 500 13px/1 var(--mono); color: var(--ink); background: var(--bone);
  display: grid; place-items: center; height: 32px;
}
.trio b { font-size: 18px; letter-spacing: 0.08em; }
.trio span { font-size: 15px; line-height: 1.8; color: var(--text-4); }

.roles { display: grid; gap: 20px; }
.roles dt { font-size: 18px; font-weight: 700; letter-spacing: 0.08em; display: flex; gap: 10px; align-items: baseline; }
.roles dt i { font: normal 500 12px/1 var(--mono); letter-spacing: 0.14em; color: var(--dim); }
.roles dd { margin: 6px 0 0; font-size: 15px; line-height: 1.8; color: var(--text-4); }

.ticks { list-style: none; padding: 0; display: grid; gap: 16px; }
/* 左邊一欄是粗體的標籤，右邊是一般內文（內文裡可以有粗體、連結，不會被拆開） */
.ticks li { position: relative; padding-left: 128px; font-size: 15px; line-height: 1.8; color: var(--text-3); }
.ticks li > b:first-child { position: absolute; left: 0; top: 0; width: 116px; color: var(--bone); font-size: 15px; letter-spacing: 0.06em; }
.ticks li i { display: block; font: normal 500 12px/1.6 var(--mono); letter-spacing: 0.14em; color: var(--dim); }
.ticks li strong { color: var(--bone); }
.ticks--tight { gap: 12px; }

.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--line-1); line-height: 1.7; }
.spec th { word-break: keep-all; width: 34%; padding-right: 14px; font-weight: 500; color: var(--dim); letter-spacing: 0.04em; }
.spec td { color: var(--text-1); }
.spec--gear th { font-family: var(--mono); font-size: 14px; color: var(--bone); width: 46%; }
.spec--gear td { color: var(--text-5); }

.tryit {
  font-size: 14px; line-height: 1.8; color: var(--text-4);
  border: 1px dashed var(--line-3); padding: 14px 18px;
}
.tryit :is(b, strong) { color: var(--bone); font-family: var(--mono); }
/* 箭頭指向旁邊的控台：燈光頁的控台在右邊、音響頁的在左邊（箭頭是樣式畫的，後台改文字不會弄丟） */
.panel[data-panel="light"] .tryit, .panel[data-panel="audio"] .tryit { position: relative; }
.panel[data-panel="light"] .tryit { padding-right: 56px; }
.panel[data-panel="audio"] .tryit { padding-left: 56px; }
.panel[data-panel="light"] .tryit::after, .panel[data-panel="audio"] .tryit::before {
  position: absolute; top: 50%; translate: 0 -50%;
  font: 500 26px/1 var(--mono); color: var(--bone);
  animation: tryit-nudge 1.4s ease-in-out infinite;
}
.panel[data-panel="light"] .tryit::after { content: '→'; right: 18px; --nudge: 5px; }
.panel[data-panel="audio"] .tryit::before { content: '←'; left: 18px; --nudge: -5px; }
@keyframes tryit-nudge { 50% { transform: translateX(var(--nudge)); } }
@media (prefers-reduced-motion: reduce) { .tryit::before, .tryit::after { animation: none; } }

.faq { display: grid; }
.faq details { border-bottom: 1px solid var(--line-1); }
.faq summary {
  list-style: none; cursor: pointer; padding: 16px 0; font-size: 16px; letter-spacing: 0.04em;
  display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--dim); transition: rotate 0.25s ease; }
.faq details[open] summary::after { rotate: 45deg; }
.faq p { font-size: 15px; line-height: 1.85; color: var(--text-4); padding: 0 0 14px; }

/* 聯絡 */
.channels { list-style: none; padding: 0; display: grid; gap: 12px; }
.channels a {
  display: grid; grid-template-columns: 60px 1fr; gap: 4px 18px; padding: 20px 22px;
  border: 1px solid var(--line-2); text-decoration: none; color: var(--bone);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.channels a:hover { border-color: var(--bone); background: var(--tint-1); }
.channels i { grid-row: span 2; font: normal 500 13px/1 var(--mono); letter-spacing: 0.14em; color: var(--dim); align-self: center; }
.channels b { font-size: 18px; font-weight: 500; }
.channels span { font-size: 14px; color: var(--dim); }

/* 按鈕 */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  font: 500 15px/1 var(--sans); letter-spacing: 0.12em; color: var(--bone);
  background: none; border: 1px solid var(--line-4); padding: 15px 24px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { border-color: var(--bone); }
.btn--solid { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--solid:hover { background: var(--paper); }
.btn--big { padding: 19px 28px; font-size: 17px; }
.btn:focus-visible, .panel__back:focus-visible, .panel__cta:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }

.panel__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.panel__cta {
  font: 500 14px/1 var(--sans); letter-spacing: 0.12em; color: var(--ink);
  background: var(--bone); border: 1px solid var(--bone); padding: 13px 18px; cursor: pointer;
  transition: background-color 0.15s ease;
}
.panel__cta:hover { background: var(--paper); }

/* ── 租借表單 ── */
.cuebar { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--cues, 6), 1fr); gap: 4px; counter-reset: cue; }
.cuebar li { counter-increment: cue; font: 500 15px/1 var(--sans); letter-spacing: 0.08em; }

.rform { display: grid; gap: 28px; }
.rstep { border: 0; padding: 0; margin: 0; display: grid; gap: 26px; min-width: 0; }
.rstep:not(.is-now) { display: none; }
.rstep.is-now { animation: step-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
/* 只動透明度和位移：clip-path 會在動畫期間擋住點擊 */
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.rstep legend { font: 700 clamp(24px, 2.2vw, 32px)/1.3 var(--sans); letter-spacing: 0.08em; padding: 0; margin-bottom: 4px; }

.field { position: relative; display: grid; gap: 10px; min-width: 0; }
.field__label { font-size: 16px; font-weight: 500; letter-spacing: 0.06em; color: var(--text-1); }
.field__label em { font-style: normal; color: var(--dim); margin-left: 4px; }
.field small { font-size: 13px; line-height: 1.7; color: var(--dim); }
.field small.is-bad { color: var(--err); }
.rform input:not([type="radio"]):not([type="checkbox"]), .rform textarea {
  font: 400 18px/1.5 var(--sans); color: var(--bone); background: var(--field);
  border: 0; border-bottom: 1px solid var(--control); padding: 12px 4px; width: 100%; min-width: 0;
  border-radius: 0; color-scheme: dark; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rform textarea { border: 1px solid var(--control); padding: 12px 14px; resize: vertical; }
/* 焦點：底線變白、加粗成 2px（選擇器要跟上面一樣長，不然權重不夠、蓋不過上面那條） */
.rform input:not([type="radio"]):not([type="checkbox"]):focus { outline: none; border-color: var(--bone); box-shadow: 0 1px 0 var(--bone); }
.rform textarea:focus { outline: none; border-color: var(--bone); box-shadow: inset 0 0 0 1px var(--bone); }
.rform .is-invalid input:not([type="radio"]):not([type="checkbox"]), .rform .is-invalid textarea, .rform input.is-invalid, .rform textarea.is-invalid { border-color: var(--err); }
.field.is-invalid .field__label { color: var(--err); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 28px; align-items: start; }

/* 選項：方形的控台按鍵 */
.opt { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 16px; line-height: 1.6; }
.opt input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 4px 0 0; border: 1px solid var(--control); display: grid; place-items: center; cursor: pointer; }
.opt input[type="radio"] { border-radius: 50%; }
.opt input:checked { background: var(--bone); border-color: var(--bone); box-shadow: inset 0 0 0 3px var(--ink); }
.opt input:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }
.seg { display: flex; flex-wrap: wrap; gap: 10px; }
.seg .opt, .chips .opt { border: 1px solid var(--line-3); padding: 11px 18px; align-items: center; transition: border-color 0.15s ease, background-color 0.15s ease; }
.seg .opt:has(input:checked), .chips .opt:has(input:checked) { border-color: var(--bone); background: var(--tint-2); }
.seg .opt input, .chips .opt input { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.opt--card { border: 1px solid var(--line-3); padding: 20px 22px; transition: border-color 0.15s ease; }
.opt--card:has(input:checked) { border-color: var(--bone); background: var(--tint-2); }
.opt--card span { font-size: 15px; line-height: 1.8; color: var(--text-4); }
.opt--card b { display: block; font-size: 18px; color: var(--bone); letter-spacing: 0.06em; margin-bottom: 2px; }

.review { display: grid; grid-template-columns: minmax(130px, 30%) 1fr; font-size: 15px; }
.review dt, .review dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line-1); line-height: 1.7; }
.review dt { color: var(--dim); padding-right: 12px; }
.review dd { color: var(--text-hi); white-space: pre-wrap; word-break: break-word; }
.review dl { display: contents; }
.review .review__sec { grid-column: 1 / -1; font: 500 13px/1 var(--mono); letter-spacing: 0.16em; color: var(--bone); padding: 22px 0 8px; border: 0; }

.rform__error { font-size: 15px; color: var(--err); }
.rform__nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.rform__nav [data-act="prev"] { margin-right: auto; }
.rform__draft { font-size: 13px; color: var(--dim); text-align: right; }
.rform__restored { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border: 1px solid var(--line-4); background: var(--card); font-size: 14px; line-height: 1.7; color: var(--text-2); }
.rform__restored button { font: 500 14px/1 var(--sans); letter-spacing: 0.06em; color: var(--bone); background: none; border: 0; padding: 8px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-5); }
.rform__restored button:hover { text-decoration-color: var(--bone); }
.rdone__msg { width: min(100%, 560px); display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--line-3); background: var(--card); }
.rdone__msg pre { margin: 0; font: 400 15px/1.8 var(--sans); color: var(--text-1); white-space: pre-wrap; word-break: break-word; -webkit-user-select: text; user-select: text; }
.rdone__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.rform.is-sending [data-act="submit"] { opacity: 0.5; pointer-events: none; }
.rform [data-act="submit"][aria-disabled="true"] { opacity: 0.5; cursor: default; }

.rdone { display: grid; gap: 24px; justify-items: start; }
.rdone__cue { font: 500 13px/1 var(--mono); letter-spacing: 0.24em; color: var(--dim); }
.rdone__title { font-size: clamp(36px, 3.6vw, 52px); font-weight: 700; letter-spacing: 0.08em; animation: gate-wipe 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ── 聯絡我們：貼在舞台後方的 LED 大螢幕上 ──
   面板本身是 1280 寬的平面（高度照螢幕比例），main.js 每一格把它透視變換到螢幕的位置。
   打開時像螢幕通電一樣由上往下掃亮 */
.panel[data-side="wall"] {
  --w: auto;
  left: 0; top: 0; bottom: auto;
  transform-origin: 0 0;
  overflow: hidden;
  -webkit-mask-image: none; mask-image: none;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: center;
  padding: 44px 64px;
  background:
    radial-gradient(rgba(214, 220, 230, 0.06) 1px, transparent 1.6px) 0 0 / 6px 6px,
    linear-gradient(180deg, rgba(10, 10, 16, 0.96), rgba(6, 6, 10, 0.98));
  box-shadow: inset 0 0 0 1px var(--line-3);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease, visibility 0s linear 0.9s;
}
.panel[data-side="wall"].is-on { clip-path: inset(0 0 0 0); transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease, visibility 0s; }
.panel[data-side="wall"] .panel__head { gap: 18px; }
.panel[data-side="wall"] .panel__title { font-size: 96px; }
.panel[data-side="wall"] .panel__code { font-size: 15px; }
.wall__lead { font-size: 26px; line-height: 1.7; color: var(--text-1); font-weight: 500; }
.wall__lead b { color: var(--bone); }
.panel[data-side="wall"] .btns { margin-top: 10px; }
.wall__side { display: grid; gap: 26px; }
.panel[data-side="wall"] .pblock { gap: 12px; }
.panel[data-side="wall"] .channels { gap: 8px; }
.panel[data-side="wall"] .channels a { padding: 13px 18px; }
.panel[data-side="wall"] .channels b { font-size: 19px; }
.panel[data-side="wall"] .channels span { font-size: 14px; }
.panel[data-side="wall"] .spec { font-size: 16px; }
.panel[data-side="wall"] .spec th, .panel[data-side="wall"] .spec td { padding: 8px 0; }
.panel[data-side="wall"] .pblock__h { font-size: 17px; padding-bottom: 8px; }
/* 螢幕上的內容一次放得下，不用捲動條 */
.hero:not(.is-narrow):not(.wall-flat)[data-shot="contact"] .srail { display: none; }
/* 視窗太小（平板、小筆電、矮視窗）：不貼在牆上，改成右側面板（main.js 的 sizeWall 決定） */
:is(.panel, .pback)[data-panel="contact"] { --w: clamp(460px, 52vw, 760px); }
.wall-flat .panel[data-side="wall"] {
  left: auto; right: 0; top: 0; bottom: 0; width: var(--w); height: auto; transform: none;
  display: flex; flex-direction: column; align-items: stretch; gap: 40px;
  padding: clamp(96px, 13vh, 132px) var(--gut) 64px var(--air);
  overflow-y: auto; background: none; box-shadow: none;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease, visibility 0s linear 0.7s;
}
.wall-flat .panel[data-side="wall"].is-on { clip-path: inset(0 0 0 0); transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease, visibility 0s; }
.wall-flat .panel[data-side="wall"] .panel__title { font-size: clamp(52px, 5.8vw, 96px); }
.wall-flat .wall__lead { font-size: clamp(18px, 1.7vw, 22px); }

/* ── 公告：分頁（最新公告／租借須知／費用試算），像部落格一樣一則一則 ── */
.ntabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-2); }
.ntabs button {
  flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 12px;
  padding: 18px 12px 16px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: 500 clamp(16px, 1.4vw, 20px)/1 var(--sans); letter-spacing: 0.12em; color: var(--text-6); cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.ntabs button i { font: normal 500 11px/1 var(--mono); letter-spacing: 0.14em; }
.ntabs button:hover { color: var(--text-2); }
.ntabs button[aria-selected="true"] { color: var(--bone); border-bottom-color: var(--bone); }
.ntabs button:focus-visible { outline: 1px solid var(--bone); outline-offset: -4px; }

.nbody { min-height: 40vh; }
.nview { display: grid; gap: 0; }
.nview[hidden] { display: none; }
.nview > * { opacity: 0; translate: 0 18px; transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nview.is-in > * { opacity: 1; translate: 0 0; }
.nview.is-in > :nth-child(2) { transition-delay: 0.05s; }
.nview.is-in > :nth-child(3) { transition-delay: 0.1s; }
.nview.is-in > :nth-child(4) { transition-delay: 0.15s; }
.nview.is-in > :nth-child(n + 5) { transition-delay: 0.2s; }
.nempty { padding: 48px 0; color: var(--dim); font-size: 16px; text-align: center; }

/* 貼文列表：最新公告一列一列（日期｜標題＋摘要｜→） */
.pitem { color: var(--bone); text-decoration: none; }
.nlist--rows .pitem {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 28px; align-items: start;
  padding: 30px 8px; border-bottom: 1px solid var(--line-1); transition: background-color 0.25s ease;
}
.nlist--rows .pitem:hover { background: var(--tint-1); }
.pitem__no { font: 500 14px/1.6 var(--mono); letter-spacing: 0.1em; color: var(--dim); padding-top: 6px; }
.pitem__main { display: grid; gap: 10px; }
.pitem__title { font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: 0.05em; line-height: 1.35; }
.pitem__sum { font-size: 16px; line-height: 1.8; color: var(--text-4); }
/* 過了截止時間的公告：標題、摘要變淡（標題後面會加「（已截止）」） */
.pitem.is-closed .pitem__title, .pitem.is-closed .pitem__sum { color: var(--dim); }
.pitem__pin { justify-self: start; font: 500 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--ink); background: var(--bone); padding: 5px 8px; }
.pitem__go { font: 500 22px/1 var(--mono); color: var(--line-4); padding-top: 8px; transition: color 0.2s ease, translate 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pitem:hover .pitem__go { color: var(--bone); translate: 6px 0; }
/* 租借須知：卡片 */
.nlist--cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding-top: 28px; }
.nlist--cards .pitem {
  display: grid; grid-template-rows: auto 1fr auto; gap: 16px; min-height: 220px;
  padding: 26px 26px 22px; border: 1px solid var(--line-2); background: var(--card);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.nlist--cards .pitem:hover { border-color: var(--bone); background: var(--tint-1); }
.nlist--cards .pitem__no { padding: 0; font-size: 13px; }
.nlist--cards .pitem__title { font-size: clamp(22px, 1.8vw, 26px); }
.nlist--cards .pitem__sum { font-size: 15px; }
.nlist--cards .pitem__go { justify-self: end; padding: 0; }

/* 單一則貼文 */
.npost { max-width: 860px; margin: 0 auto; padding-top: 34px; gap: 18px; }
.nback {
  justify-self: start; display: inline-flex; gap: 10px; align-items: center;
  font: 500 14px/1 var(--sans); letter-spacing: 0.1em; color: var(--dim); background: none; border: 0; padding: 6px 0; cursor: pointer;
}
.nback:hover { color: var(--bone); }
.npost__meta { font: 500 13px/1 var(--mono); letter-spacing: 0.14em; color: var(--dim); margin-top: 18px; }
.npost__title { font-size: clamp(32px, 3.4vw, 50px); font-weight: 700; letter-spacing: 0.05em; line-height: 1.25; }
.npost__lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.7; color: var(--text-hi); font-weight: 500; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.npost__body { display: grid; gap: 22px; padding-top: 10px; }
.npost__body .ptext { font-size: 17px; line-height: 1.95; }
.npost__body .ticks li { font-size: 16px; }
.npost__body .spec { font-size: 16px; }
.npost__body .spec thead th { color: var(--bone); font-weight: 700; border-bottom-color: var(--line-4); }
.npost__body a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-5); }
.npost__body a:hover { text-decoration-color: var(--bone); }
.md-h { font-size: 20px; font-weight: 700; letter-spacing: 0.08em; margin-top: 10px; }
.md-list { padding-left: 1.2em; display: grid; gap: 10px; font-size: 16px; line-height: 1.85; color: var(--text-2); }
.md-list a { display: inline-block; padding: 2px 0; }
.md-ol { padding-left: 2.2em; display: grid; gap: 14px; font-size: 16px; line-height: 1.9; color: var(--text-3); }
.md-ol li::marker { font-family: var(--mono); color: var(--dim); }
/* 公告裡的照片（後台編輯器放的）：不超過內文的寬度，說明在下面 */
.md-img img { display: block; max-width: 100%; height: auto; }
.md-img figcaption { margin-top: 8px; font: 500 13px/1.6 var(--mono); letter-spacing: 0.06em; color: var(--dim); }
.npost__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.npost__nav a { display: grid; gap: 8px; color: var(--bone); text-decoration: none; padding: 6px 0; }
.npost__nav a:last-child { text-align: right; }
.npost__nav small { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; color: var(--dim); }
.npost__nav b { font-size: 17px; font-weight: 500; }
.npost__nav a:hover b { text-decoration: underline; text-underline-offset: 4px; }

/* 費用試算：左邊輸入、右邊結果（像一張報價單） */
.calc { flex: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr); gap: clamp(28px, 3.5vw, 64px); align-items: start; padding: 0 8px 24px 0; }
.calc__in { display: grid; gap: 20px; }
.calc__group { display: grid; gap: 16px; }
.calc__group[hidden] { display: none; }
.calc__h { font: 500 12px/1 var(--mono); letter-spacing: 0.18em; color: var(--dim); padding-top: 4px; }
.steps { display: grid; gap: 10px; }
.stepper { display: grid; grid-template-columns: 1fr 48px 64px 48px 52px; align-items: center; border: 1px solid var(--line-2); padding: 6px 6px 6px 18px; }
.stepper__label { font-size: 17px; letter-spacing: 0.06em; }
.stepper button { height: 44px; background: none; border: 1px solid var(--line-3); color: var(--bone); font: 500 20px/1 var(--mono); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.stepper button:hover { border-color: var(--bone); }
.stepper button:active { background: var(--bone); color: var(--ink); }
.stepper output { text-align: center; font: 500 22px/1 var(--mono); color: var(--bone); }
.stepper__unit { font-size: 14px; color: var(--dim); padding-left: 10px; }
.calc__out { position: sticky; top: 8px; display: grid; gap: 12px; padding: 22px 24px; border: 1px solid var(--line-4); background: var(--card-solid); }
.calc__cue { font: 500 12px/1 var(--mono); letter-spacing: 0.24em; color: var(--dim); }
.calc__total { display: flex; align-items: baseline; gap: 10px; }
.calc__total small { font: 500 16px/1 var(--mono); color: var(--dim); }
.calc__total b { font: 700 clamp(48px, 5vw, 72px)/1 var(--mono); letter-spacing: -0.02em; color: var(--bone); }
.calc__people { font-size: 14px; line-height: 1.7; color: var(--text-2); padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.calc__rows { display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; margin: 0; }
.calc__rows dt { display: grid; gap: 4px; }
.calc__rows dt b { font-size: 15px; font-weight: 500; }
.calc__rows dt small { font-size: 12px; color: var(--dim); }
.calc__rows dd { margin: 0; font: 500 17px/1.4 var(--mono); color: var(--bone); text-align: right; }
.calc__out .btn { justify-self: start; margin-top: 6px; }

/* ── 租借：左邊是控台的 cue list ──
   每一列：Q 編號、步驟名稱、狀態。目前這一步反白（跟 grandMA2 的 cue 清單一樣），做完的可以點回去 */
.panel[data-panel="rental"] { overflow: hidden; gap: 26px; -webkit-mask-image: none; mask-image: none; padding-bottom: 6vh; }
.rwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: stretch; }
.rmain, .calc {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  --fade-top: 40px; --fade-bot: 48px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, calc(1 - var(--fade-t, 0))) 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bot)), rgba(0, 0, 0, calc(1 - var(--fade-b, 0))) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, calc(1 - var(--fade-t, 0))) 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bot)), rgba(0, 0, 0, calc(1 - var(--fade-b, 0))) 100%);
}
.rmain::-webkit-scrollbar, .calc::-webkit-scrollbar { display: none; }
.rmain { padding: 4px 8px 24px 0; }
.rwrap:has(.rdone:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
.cues { display: grid; gap: 10px; align-content: start; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.cues::-webkit-scrollbar { display: none; }
.cues__head { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: 0.18em; color: var(--dim); padding-bottom: 10px; border-bottom: 1px solid var(--line-3); }
.cues__count { color: var(--bone); }
.cues__hint { font-size: 12px; line-height: 1.7; color: var(--dim); }
.rwrap .cuebar { grid-template-columns: 1fr; gap: 2px; }
.rwrap .cuebar button {
  width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px;
  padding: 12px 10px; background: none; border: 0; color: var(--text-6); font: inherit; letter-spacing: 0.06em; text-align: left;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.rwrap .cuebar button::before { content: 'Q' counter(cue); font: 500 12px/1 var(--mono); letter-spacing: 0.06em; }
.rwrap .cuebar b { font-weight: 500; }
.rwrap .cuebar i { font: normal 500 11px/1 var(--mono); letter-spacing: 0.14em; }
.rwrap .cuebar li.is-done button { color: var(--text-3); cursor: pointer; }
.rwrap .cuebar li.is-done button:hover { background: var(--tint-2); color: var(--bone); }
.rwrap .cuebar li.is-done i { color: var(--text-6); }
.rwrap .cuebar li.is-now button { background: var(--bone); color: var(--ink); }
.rwrap .cuebar li.is-now b { font-weight: 700; }
.rwrap > .rform, .rwrap > .rdone { min-width: 0; }

/* ── 捲動條：一條細細的推桿溝貼在畫面邊緣，推桿頭可以拖 ── */
.srail {
  position: absolute; top: 50%; height: 46vh; translate: 0 -50%; width: 14px; z-index: 4;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.srail::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.srail[data-side="left"] { left: 10px; }
.srail[data-side="right"] { right: 10px; }
.srail.is-on { opacity: 1; pointer-events: auto; }
.srail i {
  position: absolute; left: 2px; top: 0; width: 9px; min-height: 28px;
  background: var(--control); cursor: grab; transition: background-color 0.2s ease;
}
.srail i::after { content: ''; position: absolute; left: 1px; right: 1px; top: 50%; height: 1px; background: var(--ink); }
.srail:hover i, .srail.is-drag i { background: var(--bone); }
.srail.is-drag i { cursor: grabbing; }

/* ── 離開租借表單的詢問 ── */
.leave {
  position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 20px;
  background: var(--backdrop); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.25s ease;
}
.leave[hidden] { display: none; }
.leave.is-on { opacity: 1; }
.leave__box {
  width: min(520px, 100%); display: grid; gap: 16px; padding: 34px 34px 30px;
  background: var(--surface); border: 1px solid var(--line-3); color: var(--bone);
  translate: 0 12px; transition: translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.leave.is-on .leave__box { translate: 0 0; }
.leave__code { font: 500 11px/1 var(--mono); letter-spacing: 0.2em; color: var(--dim); }
.leave__title { font-size: 26px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.35; }
.leave__text { font-size: 15px; line-height: 1.8; color: var(--text-4); }
.leave__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.btn--quiet { border-color: transparent; color: var(--dim); }
.btn--quiet:hover { color: var(--bone); border-color: var(--line-4); }

/* 不在全景時，舞台上的器材不能點（避免點控台時點到後面的燈、喇叭） */
.hero:not([data-shot="wide"]) .world .zone, .hero:not([data-shot="wide"]) .world .zone.is-ready { pointer-events: none; }

/* ── 手機：每一頁都是整頁，正常往下捲；最上面是固定的返回列（.mbar）。
   鏡頭飛到定位後，內容由下往上蓋滿畫面，後面的舞台就停止重畫（省電） ── */
.is-narrow .panel,
.is-narrow .panel[data-side="left"],
.is-narrow .panel[data-side="right"],
.is-narrow .panel[data-side="center"] {
  --w: auto;
  left: 0; right: 0; width: auto;
  top: 0; bottom: 0;
  padding: calc(84px + env(safe-area-inset-top)) 20px calc(48px + env(safe-area-inset-bottom));
  gap: 30px;
  font-size: 15px;
  background: var(--scrim);
  -webkit-mask-image: none; mask-image: none;
  clip-path: inset(100% 0 0 0);
}
.is-narrow .panel[data-side="wall"] {
  display: flex; flex-direction: column; gap: 30px; align-items: stretch;
  top: 0; bottom: 0; right: 0; height: auto !important; width: auto !important; transform: none !important;
  padding: calc(84px + env(safe-area-inset-top)) 20px calc(48px + env(safe-area-inset-bottom)); overflow-y: auto;
  background: var(--scrim);
  box-shadow: none;
}
/* 返回按鈕在最上面的返回列，頁面裡的就不用了 */
.is-narrow .panel__top { display: none; }
.is-narrow .panel[data-side="wall"] .panel__title { font-size: 40px; }
.is-narrow .wall__lead { font-size: 18px; }
/* 置中整頁在手機上跟其他頁一樣 */
.is-narrow .panel[data-side="center"] { --col: 100%; gap: 32px; }
.is-narrow .ntabs button { font-size: 14px; letter-spacing: 0.04em; padding: 14px 4px 12px; gap: 6px; }
.is-narrow .ntabs button i { display: none; }
.is-narrow .nlist--rows .pitem { grid-template-columns: minmax(0, 1fr) 24px; gap: 10px 14px; padding: 22px 4px; }
.is-narrow .nlist--rows .pitem__no { grid-column: 1 / -1; padding: 0; font-size: 12px; }
.is-narrow .pitem__title { font-size: 20px; }
.is-narrow .pitem__sum { font-size: 14px; }
.is-narrow .nlist--cards { grid-template-columns: minmax(0, 1fr); }
.is-narrow .nlist--cards .pitem { min-height: 0; padding: 20px; }
.is-narrow .npost__title { font-size: 28px; }
.is-narrow .npost__lead { font-size: 17px; }
.is-narrow .npost__body .ptext { font-size: 15px; }
.is-narrow .calc { grid-template-columns: minmax(0, 1fr); }
.is-narrow .calc__out { position: static; }
.is-narrow .panel[data-panel="rental"] { overflow-y: auto; }
.is-narrow .rmain, .is-narrow .calc { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.is-narrow .stepper { grid-template-columns: 1fr 40px 48px 40px 40px; padding-left: 12px; }
.is-narrow .stepper__label { font-size: 15px; }
.is-narrow .srail { display: none; }
.is-narrow .panel.is-on { clip-path: inset(0 0 0 0); }
.is-narrow .panel__title, .is-narrow .panel[data-side="center"] .panel__title { font-size: 40px; }
.is-narrow .panel__lead { font-size: 16px; }
/* 手機：清單的標籤（例如「活動前 14 天」）放在內文上面，不擠在左邊一欄 */
.is-narrow .ticks li { padding-left: 0; font-size: 14px; }
.is-narrow .ticks li > b:first-child { position: static; display: block; width: auto; font-size: 14px; margin-bottom: 2px; }
.is-narrow .spec { font-size: 14px; }
.is-narrow .rwrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.is-narrow .cues { position: static; overflow: visible; min-height: auto; } /* 手機整頁一起捲：cue list 不能被壓扁（矮視窗用的 min-height: 0 在這裡要改回來） */
.is-narrow .cues__hint { display: none; }
.is-narrow .rwrap .cuebar { grid-template-columns: repeat(var(--cues, 6), 1fr); gap: 3px; }
.is-narrow .rwrap .cuebar[data-many] { grid-template-columns: repeat(var(--cues), minmax(52px, 1fr)); overflow-x: auto; scrollbar-width: none; } /* 後台新增步驟、超過 6 步：可以左右滑 */
.is-narrow .rwrap .cuebar button { grid-template-columns: 1fr; gap: 6px; padding: 8px 2px; min-height: 48px; font-size: 12px; letter-spacing: 0; text-align: center; }
.is-narrow .rwrap .cuebar button::before { font-size: 11px; }
.is-narrow .rwrap .cuebar i { display: none; }
.is-narrow .rstep legend { font-size: 22px; }
.is-narrow .rstep, .is-narrow .rdone { scroll-margin-top: calc(76px + env(safe-area-inset-top)); }
.is-narrow .field > .opt:not(.opt--card) { padding: 10px 0; }
.is-narrow .rform input:not([type="radio"]):not([type="checkbox"]), .is-narrow .rform textarea { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .panel, .panel > *, .rstep.is-now { transition: none !important; animation: none !important; }
  .nview > *, .leave__box, .pick { translate: none !important; }
  .rdone__title { animation: none; }
  .faq summary::after { transition: none; }
}

/* 手機：燈光、音響頁的清單標籤欄縮回來 */
.is-narrow :is(.panel[data-panel="light"], .panel[data-panel="audio"]) .ticks li { padding-left: 0; font-size: 15px; }
.is-narrow :is(.panel[data-panel="light"], .panel[data-panel="audio"]) .ticks li > b:first-child { position: static; display: block; width: auto; font-size: 15px; }
.is-narrow :is(.panel[data-panel="light"], .panel[data-panel="audio"]) .panel__lead { font-size: 17px; }


/* ── 日期、時間：點欄位就跳出選擇器（跟網站同一套樣子）── */
.dt__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: auto; min-width: min(100%, 320px); justify-self: start;
  font: 500 18px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--bone); text-align: left;
  background: var(--field); border: 0; border-bottom: 1px solid var(--control); padding: 12px 4px; cursor: pointer;
  transition: border-color 0.15s ease;
}
.dt.is-empty { color: var(--text-6); font-family: var(--sans); font-size: 17px; }
.dt i { width: 18px; height: 16px; border: 1px solid currentColor; border-top-width: 4px; opacity: 0.6; flex: none; }
.dt[data-kind="time"] i { border-radius: 50%; border-top-width: 1px; height: 18px; }
.dt:hover, .dt[aria-expanded="true"] { border-color: var(--bone); }
.dt:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }
.field.is-invalid .dt { border-color: var(--err); }

.pick {
  position: absolute; z-index: 8; display: grid; grid-template-columns: auto auto; gap: 0;
  background: var(--surface); border: 1px solid var(--line-4); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  color: var(--bone); opacity: 0; translate: 0 -6px; transition: opacity 0.2s ease, translate 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pick.is-on { opacity: 1; translate: 0 0; }
.pick[hidden] { display: none; }
.pick[data-kind="time"] { grid-template-columns: auto; }
.pick[data-kind="time"] .pick__cal { display: none; }
.pick__cal { padding: 18px 18px 14px; border-right: 1px solid var(--line); width: 316px; }
.pick[data-kind="time"] .pick__time { border: 0; }
.pick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pick__head b { font: 700 16px/1 var(--sans); letter-spacing: 0.08em; }
.pick__head button { width: 36px; height: 36px; background: none; border: 1px solid var(--line-3); color: var(--bone); font: 500 18px/1 var(--mono); cursor: pointer; }
.pick__head button:hover { border-color: var(--bone); }
.pick__dow, .pick__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pick__dow span { font: 500 11px/28px var(--sans); color: var(--dim); text-align: center; }
.pick__days button {
  height: 38px; background: none; border: 1px solid transparent; color: var(--bone);
  font: 500 14px/1 var(--mono); cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease;
}
.pick__days button:hover:not(:disabled) { border-color: var(--control); }
.pick__days .is-today { border-color: var(--line-4); }
.pick__days .is-past { color: var(--line-3); cursor: default; }
.pick__days .is-sel, .pick__days .is-sel:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.pick__time { padding: 18px 16px 14px; display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.pick__label { font: 500 11px/1 var(--mono); letter-spacing: 0.18em; color: var(--dim); }
.pick__cols { display: grid; grid-template-columns: 64px 64px; gap: 8px; height: 286px; }
.pick__col { position: relative; overflow-y: auto; scrollbar-width: none; display: grid; gap: 2px; align-content: start; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pick__col::-webkit-scrollbar { display: none; }
.pick__col button { height: 34px; flex: none; background: none; border: 0; color: var(--text-3); font: 500 15px/1 var(--mono); cursor: pointer; }
.pick__col button:hover { background: var(--tint-2); color: var(--bone); }
.pick__col button.is-sel { background: var(--bone); color: var(--ink); }
.pick__col button.is-late { color: var(--err); }
.pick__col button.is-late.is-sel { background: var(--err); color: var(--ink); }
.pick__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.pick__sum { margin-right: auto; font: 500 15px/1 var(--mono); letter-spacing: 0.04em; color: var(--bone); }
.pick__foot .btn { padding: 11px 18px; font-size: 14px; }
.pick__foot .btn:disabled { opacity: 0.35; pointer-events: none; }
/* 手機：貼在畫面底部的抽屜 */
.is-narrow .pick { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; grid-template-columns: 1fr; translate: 0 20px; max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.is-narrow .pick.is-on { translate: 0 0; }
.is-narrow .pick__cal { width: auto; border-right: 0; border-bottom: 1px solid var(--line); }
.is-narrow .pick__cols { height: 150px; grid-template-columns: 1fr 1fr; }
.is-narrow .pick__time { grid-template-rows: auto auto; }

/* ── 關於：文字區往中間擴大到六成，上面一排標題＋導言，下面兩欄，Q&A 也排成兩欄 ── */
:is(.panel, .pback)[data-panel="about"] { --w: clamp(560px, 60vw, 1180px); }
.panel[data-panel="about"] .panel__head { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(32px, 4vw, 72px); align-items: end; }
.panel[data-panel="about"] .panel__head > :not(.panel__lead) { grid-column: 1; }
.panel[data-panel="about"] .panel__lead { grid-column: 2; grid-row: 1 / span 4; align-self: end; padding-bottom: 4px; }
.agrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px clamp(32px, 4vw, 64px); align-items: start; }
.acol { display: grid; gap: 44px; }
/* Q&A 兩欄：用「欄」排（像報紙），每一題各自展開，不會把旁邊那一題一起撐高 */
.panel[data-panel="about"] .faq { display: block; columns: 2; column-gap: clamp(32px, 4vw, 64px); }
.panel[data-panel="about"] .faq details { break-inside: avoid; }
.is-narrow .panel[data-panel="about"] .panel__head { grid-template-columns: minmax(0, 1fr); }
.is-narrow .panel[data-panel="about"] .panel__lead { grid-column: 1; grid-row: auto; }
.is-narrow .agrid { grid-template-columns: minmax(0, 1fr); }
.is-narrow .panel[data-panel="about"] .faq { columns: 1; }
/* 課程與招生：報名中的「填寫報名表」按鈕（後台「收費與連結」設了報名表網址才出現；沒設定的時候整塊藏起來，版面跟以前一樣） */
.signup:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.signup .panel__cta { display: inline-block; text-decoration: none; }
.signup small { font-size: 13px; color: var(--text-6); }
.signup .note { margin: 0; }
/* 手機（跟 main.js 的 mobileMQ 一樣）：從 IG 點進來的學生最想看課程 → 「課程與招生」排到「三種角色」前面（電腦版不變） */
@media (max-width: 719px), (pointer: coarse) and (max-height: 520px) {
  .agrid { display: flex; flex-direction: column; gap: 44px; }
  .acol { display: contents; }
  .agrid .pblock:has(.trio) { order: 1; }
  .agrid .pblock:has(.spec) { order: 2; }
  .agrid .pblock:has(.roles) { order: 3; }
  .agrid .pblock:has(.ticks) { order: 4; }
}

/* ── 關於 → 器材清單（#about/gear）：原本的關於內容藏起來，換成清單 ── */
.panel[data-panel="about"][data-aview="gear"] > :not(.gearv) { display: none; }
.gearv { display: grid; gap: 40px; }
.gearv__head { display: grid; gap: 12px; }
.gearv__head .nback { margin-bottom: 4px; }
.gearv__head .panel__top { margin-bottom: 6px; }
.gearv__head .panel__lead { max-width: 46em; }
/* 類別一組一組，桌機排成兩欄（像報紙，每一組不會被拆到兩欄） */
.gearlist { columns: 2; column-gap: clamp(32px, 4vw, 64px); }
.gear__group { break-inside: avoid; display: grid; gap: 4px; margin-bottom: 40px; }
.gear { list-style: none; padding: 0; }
.gear > li { border-bottom: 1px solid var(--line-1); }
.gear summary, .gear__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 4px 14px; align-items: baseline; padding: 13px 0; }
.gear summary { list-style: none; cursor: pointer; }
.gear summary::-webkit-details-marker { display: none; }
.gear summary::after { content: '+'; grid-column: 3; grid-row: 1; font-family: var(--mono); color: var(--dim); transition: rotate 0.25s ease; }
.gear details[open] summary::after { rotate: 45deg; }
.gear summary:hover .gear__name, .gear details[open] .gear__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-5); }
.gear summary:focus-visible { outline: 1px solid var(--bone); outline-offset: 2px; }
.gear__name { grid-column: 1; font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: var(--bone); }
.gear__qty { grid-column: 2; grid-row: 1; font: 500 13px/1.4 var(--mono); color: var(--text-4); white-space: nowrap; }
.gear__model { grid-column: 1 / 3; font: 400 13px/1.6 var(--mono); color: var(--dim); }
.gear__model:empty { display: none; }
.gear__info { padding: 0 30px 16px 0; font-size: 15px; line-height: 1.85; color: var(--text-4); }
.is-narrow .gearlist { columns: 1; }
@media (prefers-reduced-motion: reduce) { .gear summary::after { transition: none; } }
/* 燈光組、音響組頁的「完整器材清單」：次要按鈕（空心） */
.panel__cta--ghost { background: none; color: var(--bone); border-color: var(--line-4); }
.panel__cta--ghost:hover { background: none; border-color: var(--bone); }

/* 租借：左邊的「費用試算」按鈕；按下去右邊那一欄換成試算 */
.rmain[hidden], .calc[hidden] { display: none; }
.cues__calc {
  margin-top: 18px; display: grid; gap: 6px; text-align: left; cursor: pointer;
  padding: 16px 16px 14px; background: none; border: 1px dashed var(--line-4); color: var(--bone);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.cues__calc b { font-size: 16px; letter-spacing: 0.1em; }
.cues__calc span { font-size: 13px; color: var(--dim); }
.cues__calc:hover { border-color: var(--bone); }
.panel[data-rview="calc"] .cues__calc { border-style: solid; border-color: var(--bone); background: var(--tint-2); }
.panel[data-rview="calc"] .cuebar { opacity: 0.7; }
.calc__top { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.calc__title { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: 0.08em; }
.is-narrow .cues__calc { margin-top: 10px; }

/* 公告：最下面多留一段空白，「上一則／下一則」可以捲到畫面中間來看，不會貼在畫面底部 */
.panel[data-panel="notice"] { padding-bottom: 34vh; }
.is-narrow .panel[data-panel="notice"] { padding-bottom: 14vh; }

/* ── 文字選取：大部分的字（標題、按鈕、選單、說明）都不能選；
   只有使用者可能會想複製的內容可以選：公告內文、聯絡資訊、填表的內容與確認頁、器材型號 ── */
.hero { -webkit-user-select: none; user-select: none; }
.hero :is(input, textarea),
.npost__title, .npost__lead, .npost__body,
.panel[data-panel="contact"] :is(.channels b, .spec td),
.review dd,
.spec--gear th,
.gear__name, .gear__model, .gear__qty, .gear__info,
.rfee, .spec td, .ticks li, .faq p, .faq summary, .ptext, .panel__lead, .note, .trio span, .roles dd,
.steps, .calc__out :is(.calc__total, .calc__people, .calc__rows) { -webkit-user-select: text; user-select: text; }
/* 面板是直的 flex：裡面的區塊不能被壓扁（壓扁時內容會溢出，下面的留白就失效了） */
.panel:not([data-panel="rental"]) > * { flex-shrink: 0; }

/* 費用試算：人力、時間左右並排，整頁一次放得下，不用捲動 */
.calc__group--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; }
.calc__col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.calc__group--2 .stepper { grid-template-columns: 1fr 40px 54px 40px 36px; padding-left: 14px; }
.calc__group--2 .stepper__label { font-size: 15px; }
.calc__group--2 .stepper button { height: 38px; }
.calc__group--2 .stepper__unit { padding-left: 6px; font-size: 13px; }
.is-narrow .calc__group--2 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1279px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc__out { position: static; }
}
@media (max-width: 899px) { .calc__group--2 { grid-template-columns: minmax(0, 1fr); } }
.stepper__label { white-space: nowrap; }
/* 內容放得下（或只多一點留白）：不捲動、上下也不淡出 */
.panel.is-fit, [data-scroll].is-fit { overflow-y: hidden; --fade-t: 0 !important; --fade-b: 0 !important; }

/* 兩組時間（彩排開始～結束、進場／開始）：兩組時、分並排 */
.pick__time--2 { display: none; }
.pick[data-kind="pair"] { grid-template-columns: auto auto; }
.pick[data-kind="pair"] .pick__cal { display: none; }
.pick[data-kind="pair"] .pick__time--2 { display: grid; border-left: 1px solid var(--line); }
/* 時間欄排在同一列時：按鈕撐滿 */
.row .dt { width: 100%; min-width: 0; }
.is-narrow .pick[data-kind="pair"] { grid-template-columns: 1fr 1fr; }
.is-narrow .pick[data-kind="pair"] .pick__time--2 { border-left: 1px solid var(--line); }

/* 租借申請最上面的收費摘要（數字跟著後台「收費與連結」） */
.rfee {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
  font-size: 15px; line-height: 1.6; color: var(--text-2);
  padding: 12px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.rfee > b { font: 500 12px/1 var(--mono); letter-spacing: 0.18em; color: var(--dim); }
.rfee [data-set] { color: var(--bone); font-family: var(--mono); font-weight: 500; }
.rfee a { margin-left: auto; color: var(--bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-5); }
.rfee a:hover { text-decoration-color: var(--bone); }
.is-narrow .rfee { flex-direction: column; gap: 4px; font-size: 14px; }
.is-narrow .rfee a { margin: 6px 0 0; }
.is-narrow .tryit { display: none; } /* 手機上看不到控台，不用叫人去拖 */