:root{
  --paper:#f7fbfe;
  --surface:#fff;
  --sun:#9fd4f5;
  --sun2:#cdeafb;
  --ink:#14283c;
  --mut:#5d707f;
  --magic:#6d4fc4;
  --accent:var(--magic);
  --coral:#ff8b74;
  --teal:#2bb5a0;
  --footer-fg:#eef6fc;
  --media-placeholder:#eee;
  --media-placeholder-strong:#ddd;
  --media-cool:#dfeefa;
  --media-thumb:#dfe9f2;
  --spark-gold:#ffd76e;
  --spark-blue:#8fd0f2;
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:40px;
  --radius-pill:999px;
  --radius-circle:50%;
  --hand:"LXGW WenKai TC",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html,body{overflow-x:hidden}
body{background:var(--paper);color:var(--ink);font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;line-height:1.85}
::selection{background:var(--sun);color:var(--ink)}
img{max-width:100%}

/* 圖片容器：內容用 <img> 撐滿並吃容器的有機圓角（取代舊的 CSS 背景圖做法） */
.hero-photo .ph,.hero-photo .ph-sub,.about-grid .pic .ph,.show-card .thumb,.g-ph,.cast-band .cast-ph{overflow:hidden}
.hero-photo .ph>picture,.hero-photo .ph-sub>picture,.about-grid .pic .ph>picture,.show-card .thumb>picture,.g-ph>picture,.cast-band .cast-ph>picture{display:block;width:100%;height:100%}
.hero-photo .ph>picture>img,.hero-photo .ph-sub>picture>img,.about-grid .pic .ph>picture>img,.show-card .thumb>picture>img,.g-ph>picture>img,.cast-band .cast-ph>picture>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;justify-content:space-between;align-items:center;padding:12px 30px;background:rgba(247,251,254,.93);backdrop-filter:blur(8px)}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:56px;width:auto;display:block}
.logo .mark{width:26px;height:26px;border-radius:var(--radius-circle);background:conic-gradient(var(--coral) 0 25%,var(--sun) 0 50%,var(--teal) 0 75%,var(--magic) 0 100%);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
nav .menu{display:flex;gap:28px;font-size:.92rem;color:var(--ink)}
nav .menu a{color:inherit;text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap}
nav .menu a:hover,nav .menu a:focus-visible{border-color:var(--sun)}
nav .menu a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* 近期演出 side tab */
.side-tab{position:fixed;right:0;top:44%;z-index:80;background:var(--sun);color:var(--ink);writing-mode:vertical-rl;letter-spacing:.35em;font-weight:700;padding:22px 12px;border-radius:var(--radius-sm) 0 0 var(--radius-sm);text-decoration:none;box-shadow:-4px 4px 16px rgba(20,40,60,.15)}
.side-tab:hover{background:var(--ink);color:var(--sun)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px 6vw 60px;overflow:hidden}
.hero .blob-bg{position:absolute;top:-18%;left:-12%;width:64%;height:120%;background:linear-gradient(160deg,var(--sun2),var(--sun));border-radius:42% 58% 55% 45%/55% 44% 56% 45%;z-index:0}
.hero .confetti i{position:absolute;border-radius:var(--radius-circle);opacity:.85}
.hero .confetti i:nth-child(1){width:16px;height:16px;background:var(--coral);top:18%;right:30%}
.hero .confetti i:nth-child(2){width:10px;height:10px;background:var(--teal);top:30%;right:14%}
.hero .confetti i:nth-child(3){width:13px;height:13px;background:var(--magic);bottom:24%;right:38%}
.hero .confetti i:nth-child(4){width:8px;height:8px;background:var(--ink);top:52%;right:8%}
.hero-inner{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:5vw;width:100%;max-width:1160px;margin:0 auto}
/* v1.4.7 俊豪：首頁最上面照片太小 → 文字欄不再跟著長大（grow 0），
   多出來的寬度全給照片；1440 視窗下照片由 594px 放大到約 668px。 */
/* 🚨 沒有 min-width:0 的話，flex item 縮不到 basis 以下 - 這裡是 h1 大字的 min-content
   （實測 494px）把文字欄撐住，照片就永遠只有 594px。 */
.hero-txt{flex:0 1 420px;min-width:0;container-type:inline-size}
.hero-txt .kicker{letter-spacing:.12em;font-size:.9rem;color:var(--ink);opacity:.78;margin-bottom:18px}
h1{font-family:var(--hand);font-weight:400;font-size:clamp(2.6rem,6.5vw,4.4rem);line-height:1.35}
/* hero 大標安全式：保留桌機 3.2rem 視覺，上限內讓長文案正常換行，不用 overflow 裁字。 */
.hero-txt h1{font-size:clamp(1.9rem,11.5cqw,3.2rem);line-height:1.28;text-wrap:balance}
.hero-txt h1 .l2{white-space:normal}
@supports not (font-size:1cqw){.hero-txt h1{font-size:clamp(1.9rem,10vw,3.2rem)}}
.hero-txt .sub{margin:22px 0 30px;font-size:clamp(1rem,2.1vw,1.15rem);color:var(--mut);letter-spacing:.04em}
/* hero 兩顆 CTA：用 flex+gap，換行時才不會上下貼死（原本靠 .btn.ghost 的 margin-left 排版，一換行就撞在一起） */
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
/* 特異性要贏過下面第 54 行的 .btn.ghost（同為 0,2,0 且寫在後面會贏），所以這裡寫 .btn.ghost 拉到 0,3,0 */
.hero-cta .btn.ghost{margin-left:0}
/* 文字欄在 1200px 以下會被壓到 ~370px，兩顆按鈕才塞得下同一行 */
@media(max-width:1200px){.hero-cta .btn{padding:15px 26px;letter-spacing:.12em}}
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:15px 40px;border-radius:var(--radius-pill);text-decoration:none;letter-spacing:.2em;font-size:.95rem;transition:.2s;box-shadow:0 8px 22px rgba(20,40,60,.22)}
.btn:hover{background:var(--accent);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none;margin-left:12px}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.hero-photo{flex:1 1 480px;position:relative;padding:10px 0 30px}
.hero-photo .ph{width:100%;aspect-ratio:16/10;background:var(--media-placeholder);border-radius:38% 62% 45% 55%/52% 44% 56% 48%;box-shadow:0 24px 60px rgba(20,40,60,.22)}
.hero-photo .ph>picture>img{object-position:center 32%}
.hero-photo .ph-sub{position:absolute;background:var(--media-placeholder);box-shadow:0 14px 34px rgba(20,40,60,.22);animation:floaty 8s ease-in-out infinite}
.hero-photo .ph-sub.s1{width:38%;aspect-ratio:1/1;border-radius:52% 48% 45% 55%/50% 55% 45% 50%;top:-6%;left:-8%;animation-delay:1.2s}
.hero-photo .ph-sub.s2{width:32%;aspect-ratio:1/1;border-radius:47% 53% 52% 48%/53% 47% 53% 47%;bottom:-4%;right:-5%;animation-delay:2.4s}
.hero-photo .photo-caption{margin:18px 0 0 10%;max-width:80%;font-family:var(--hand);font-size:1.05rem;color:var(--ink);transform:rotate(-2deg)}

/* wave divider */
.wave{display:block;width:100%;height:70px}
.wave path{fill:var(--sun)}
.wave.wave-paper path{fill:var(--surface)}

/* sections */
section{padding:90px 6vw}
.inner{max-width:1160px;margin:0 auto}
h2.dot-title,.dot-title{margin:0;display:flex;align-items:center;gap:12px;font-size:clamp(1.5rem,3.6vw,2.1rem);font-weight:800;letter-spacing:.08em;margin-bottom:14px}
.dot-title::before{content:"";width:14px;height:14px;border-radius:var(--radius-circle);background:var(--sun);flex:none;box-shadow:0 0 0 5px rgba(159,212,245,.45)}
.sec-sub{color:var(--mut);margin-bottom:44px}
.shows .sec-sub{color:var(--mut)}

/* about */
.about-grid{display:flex;flex-wrap:wrap;gap:5vw;align-items:center}
.about-grid .txt{flex:1 1 400px;font-size:1.04rem}
.about-grid .txt p{margin-bottom:16px}
.about-grid .pic{flex:1 1 340px}
.about-grid .pic .ph{aspect-ratio:4/3;background:var(--media-placeholder);border-radius:48% 52% 55% 45%/52% 46% 54% 48%;box-shadow:0 18px 44px rgba(20,40,60,.15)}
.stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.stat{padding:4px 0;text-align:left;flex:none;margin-right:34px}
.stat b{display:inline;font-family:var(--hand);font-size:1.75rem;color:var(--accent);margin-right:8px}
.stat span{font-size:.9rem;color:var(--mut)}

/* shows */
.shows{background:linear-gradient(180deg,var(--sun2),var(--sun));border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.show-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;align-items:stretch}
.show-card{background:var(--paper);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 14px 34px rgba(20,40,60,.14);transition:.25s;display:flex;flex-direction:column;height:100%}
.show-card:nth-child(-n+3){grid-column:span 2}
.show-card:nth-child(n+4){grid-column:span 3}
.show-card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 26px 54px rgba(20,40,60,.2)}
.show-card .thumb{aspect-ratio:16/10;background:var(--media-placeholder-strong)}
.show-card .body{padding:22px 24px 26px;display:flex;flex:1;flex-direction:column}
.show-card h3{font-size:1.2rem;letter-spacing:.08em;margin-bottom:8px}
.show-card p{font-size:.9rem;color:var(--mut);margin-bottom:14px}
.show-card .tag{display:inline-block;align-self:flex-start;margin-top:auto;font-size:.78rem;letter-spacing:.15em;background:var(--sun);border-radius:var(--radius-pill);padding:4px 14px}

/* upcoming */
.upcoming .item{display:flex;flex-wrap:wrap;align-items:center;gap:18px;background:var(--surface);border-radius:var(--radius-md);padding:22px 28px;margin-bottom:16px;box-shadow:0 8px 24px rgba(20,40,60,.08);border:1px solid rgba(20,40,60,.08)}
.upcoming .date{font-family:var(--hand);font-size:1.35rem;min-width:118px;background:var(--sun2);border-radius:var(--radius-md);padding:8px 14px;text-align:center}
.upcoming .info{flex:1}
.upcoming .info b{font-size:1.1rem;letter-spacing:.06em}
.upcoming .info span{display:block;font-size:.88rem;color:var(--mut)}
.upcoming .item .btn{padding:10px 26px;font-size:.85rem}

/* voices */
.voices{background:var(--surface)}
.voice-wrap{display:grid;grid-template-columns:1.2fr .8fr;grid-template-areas:"quote1 stats" "quote2 stats";gap:22px;align-items:stretch}
.voice{background:var(--surface);border-radius:var(--radius-lg);padding:30px 28px;box-shadow:0 10px 28px rgba(20,40,60,.09);position:relative;overflow:hidden}
.voice:nth-child(1){grid-area:quote1}
.voice:nth-child(2){grid-area:quote2}
.voice::before{content:"“";position:absolute;top:12px;right:22px;font-family:var(--hand);font-size:3rem;color:var(--sun);line-height:1;opacity:.45;pointer-events:none}
.voice p{font-family:var(--hand);font-size:1.12rem;position:relative;z-index:1;margin:0}
.voice .who{margin-top:14px;font-size:.82rem;color:var(--mut);letter-spacing:.1em}
.voice-stats{grid-area:stats;background:var(--surface);border-radius:var(--radius-lg);padding:28px;display:grid;align-content:center;gap:18px;box-shadow:0 10px 28px rgba(20,40,60,.09)}
.voice-stats span{display:block;color:var(--mut)}
.voice-stats b{display:block;font-family:var(--hand);font-size:clamp(2rem,5vw,3.2rem);line-height:1;color:var(--accent);margin-bottom:6px}


/* gallery */
.gallery{background:var(--paper);padding-bottom:40px}
.g-wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* 3/2＝相機原生比例，劇照放進來零裁切（原本 4/3 會左右各切掉 11%，把邊邊的人切掉） */
.g-ph{width:100%;aspect-ratio:3/2;background:var(--media-placeholder);box-shadow:0 14px 32px rgba(20,40,60,.14)}
/* blob 為品牌語言，刻意各不相同。 */
.g-ph:nth-child(1){border-radius:52% 48% 45% 55%/50% 55% 45% 50%;transform:rotate(-2deg)}
.g-ph:nth-child(2){border-radius:46% 54% 55% 45%/55% 46% 54% 45%;transform:rotate(1.5deg)}
.g-ph:nth-child(3){border-radius:55% 45% 48% 52%/47% 53% 47% 53%;transform:rotate(-1deg)}
.g-ph:nth-child(4){border-radius:48% 52% 52% 48%/53% 47% 53% 47%;transform:rotate(2deg)}
.g-ph:nth-child(5){border-radius:52% 48% 46% 54%/49% 54% 46% 51%;transform:rotate(-1.5deg)}
.g-ph:nth-child(6){border-radius:45% 55% 52% 48%/54% 46% 54% 46%;transform:rotate(1deg)}
.g-ph:nth-child(7){border-radius:50% 50% 46% 54%/52% 48% 52% 48%;transform:rotate(-2deg)}
.g-ph:nth-child(8){border-radius:47% 53% 50% 50%/50% 52% 48% 50%;transform:rotate(1.8deg)}

/* footer */
footer{background:var(--ink);color:var(--footer-fg);padding:60px 6vw 40px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;text-align:center}
footer .logo{justify-content:center;margin-bottom:14px}
footer .logo img{height:46px;width:auto}
footer .fine{font-size:.85rem;opacity:.7;margin-top:14px}
footer a{color:inherit}
.fine{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0}
.contact-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.contact-item+.contact-item::before{content:"";width:1px;height:1em;background:currentColor;opacity:.38;margin:0 12px}
.fine .icon{width:1em;height:1em;flex:none}
.note-badge{position:fixed;bottom:16px;left:16px;z-index:99;background:var(--surface);border:2px solid var(--sun);color:var(--ink);font-size:.72rem;letter-spacing:.2em;padding:8px 14px;border-radius:var(--radius-pill);box-shadow:0 6px 18px rgba(20,40,60,.12)}

/* magic layer */
.star{position:absolute;color:var(--spark-gold);pointer-events:none;z-index:1;text-shadow:0 0 12px rgba(255,215,110,.9);will-change:transform,opacity}
.shows .star{color:var(--surface)}
.sparkle-dust{position:fixed;pointer-events:none;z-index:95;font-size:14px;color:var(--spark-blue);text-shadow:0 0 10px rgba(109,79,196,.8);will-change:transform,opacity}
.dot-title::before{content:"✦";width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--accent);font-size:1.3em;line-height:1;animation:starspin 6s ease-in-out infinite}
@keyframes starspin{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.25)}}
.show-card{position:relative}
.show-card::after{content:"✨";position:absolute;top:10px;right:14px;font-size:1.3rem;opacity:0;transition:.3s;transform:scale(.5) rotate(-30deg)}
.show-card:hover::after{opacity:1;transform:scale(1.15) rotate(0)}
.hero-photo .ph{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.cast-band{padding:0 0 90px}
.cast-band .cast-ph{max-width:1160px;margin:0 auto;aspect-ratio:21/9;background:var(--media-cool);border-radius:var(--radius-xl);box-shadow:0 24px 60px rgba(20,40,60,.2);position:relative;overflow:hidden}
.cast-band .cast-ph>picture>img{object-position:center 40%}
.cast-band .cast-caption{max-width:1160px;margin:12px auto 0;padding:0 6vw;font-family:var(--hand);font-size:1.08rem;color:var(--ink);text-align:center}
/* 第二張＝各檔演出的演職人員全員合照（台前幕後一起完成一場魔法）；比照第一張 21/9 */
.cast-band .cast-caption+.cast-ph{margin-top:26px}
@media(max-width:600px){.cast-band .cast-caption{font-size:1rem;line-height:1.4}}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* WP 內頁 */
/* 🚨 max-width 必須含左右 padding，才會與首頁 .inner（1160px，父層 section 另有 6vw padding）切齊。
   寫死 860px 時內容區只有 860-12vw（1440 視窗下剩 687px），比首頁窄 473px。 */
.page-main{max-width:calc(1160px + 12vw);margin:0 auto;padding:150px 6vw 90px}
.page-main h1{font-family:var(--hand);font-size:clamp(2rem,4.5vw,3rem);margin-bottom:30px}
.page-main a{color:var(--accent)}
.page-main h2{color:var(--ink);margin:34px 0 12px;font-size:1.4rem}
body.admin-bar nav{top:32px}

/* ===== 行動版斷點 ===== */
.logo{white-space:nowrap}

/* 漢堡按鈕（桌機隱藏） */
.nav-toggle{display:none;background:none;border:0;padding:10px;margin:-10px;cursor:pointer;color:var(--ink);line-height:0}
.nav-toggle .bars{display:block;width:26px;height:18px;position:relative}
.nav-toggle .bars i{position:absolute;left:0;width:100%;height:2.5px;border-radius:var(--radius-pill);background:currentColor;transition:transform .28s ease,opacity .18s ease,top .28s ease}
.nav-toggle .bars i:nth-child(1){top:0}
.nav-toggle .bars i:nth-child(2){top:7.75px}
.nav-toggle .bars i:nth-child(3){top:15.5px}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){top:7.75px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){top:7.75px;transform:rotate(-45deg)}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
.nav-scrim{display:none}

@media (max-width:980px){
  /* 🚨 backdrop-filter 會讓子孫的 position:fixed 改以 nav 為容器，抽屜會被壓在導覽列高度內 → 行動版關掉 */
  nav{padding:10px 16px;gap:8px;backdrop-filter:none;background:var(--paper)}
  .logo img{height:42px}
  .nav-toggle{display:block;z-index:2}

  /* 選單抽屜：從右側滑入 */
  nav .menu{position:fixed;top:0;right:0;bottom:0;width:min(78vw,320px);z-index:1;
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    background:var(--paper);padding:80px 34px 40px;font-size:1.05rem;
    box-shadow:-18px 0 46px rgba(20,40,60,.18);
    transform:translateX(102%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    visibility:hidden;overflow-y:auto;overscroll-behavior:contain}
  nav .menu a{padding:15px 0;border-bottom:1px solid rgba(20,40,60,.1);white-space:nowrap}
  nav .menu a:hover,nav .menu a:focus-visible{border-bottom-color:var(--sun)}
  body.nav-open nav .menu{transform:translateX(0);visibility:visible}

  .nav-scrim{display:block;position:fixed;inset:0;z-index:0;background:rgba(20,40,60,.45);
    opacity:0;pointer-events:none;transition:opacity .3s ease;backdrop-filter:blur(2px)}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}

  .side-tab{padding:16px 9px;font-size:.85rem}
  body.nav-open .side-tab{opacity:0;pointer-events:none;transition:opacity .2s}
}
@media (max-width:768px){
  .hero{padding-top:96px}
  .side-tab{display:none}
}
@media (max-width:900px){
  .show-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .show-card{grid-column:auto!important}
  .g-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .voice-wrap{grid-template-columns:1fr;grid-template-areas:"quote1" "quote2" "stats"}
}
@media (max-width:600px){
  .show-cards{grid-template-columns:1fr}
  .g-ph{border-radius:var(--radius-lg)!important;transform:none!important}
  footer{padding:32px 6vw 26px}
  footer .logo{margin-bottom:8px}
  footer .logo img{height:34px}
  footer .logo+div{font-size:.95rem}
  footer .fine{margin-top:12px;font-size:.78rem;line-height:1.5}
  .fine{gap:7px 14px}
  .contact-item{max-width:100%}
  .contact-item+.contact-item::before{display:none}
}
/* 不支援動效偏好時抽屜直接切換，不做位移動畫 */
@media (prefers-reduced-motion:reduce){
  nav .menu{transition:none!important}
  .nav-scrim{transition:none!important}
}
/* a11y */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--surface);padding:10px 18px;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0;top:0}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* 內頁 h1 用手寫體但去多餘效果 */
.page-main h1{text-shadow:none}

/* ===== 商演案例頁 ===== */
.cases{margin-top:8px}
.cases .case-lead{font-family:var(--hand);font-size:1.35rem;line-height:1.7;color:var(--ink);background:linear-gradient(180deg,rgba(205,234,251,.55),rgba(205,234,251,0));border-radius:var(--radius-lg);padding:22px 26px;margin-bottom:34px}
.cases .case-stats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.cases .case-stats span{background:var(--sun);border-radius:var(--radius-pill);padding:7px 18px;font-size:.85rem;letter-spacing:.06em}
/* 🚨 .case-group 是 <section>，會吃到全域 section{padding:90px 6vw} → 內頁要歸零 */
.case-group{padding:0;margin-bottom:46px}
/* wpautop 會在區塊之間塞空段落 */
.page-main p:empty{display:none}
.case-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.case-card{background:var(--surface);border:1px solid rgba(20,40,60,.09);border-radius:var(--radius-lg);padding:24px 24px 20px;box-shadow:0 10px 26px rgba(20,40,60,.07);transition:.24s;display:flex;flex-direction:column}
.case-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(20,40,60,.13)}
.case-thumb{display:block;position:relative;aspect-ratio:16/9;margin:-24px -24px 18px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;background:var(--media-thumb)}
.case-thumb picture{display:block;width:100%;height:100%}
.case-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.case-card:hover .case-thumb img{transform:scale(1.05)}
.case-thumb::after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;display:grid;place-items:center;border-radius:var(--radius-circle);
  background:rgba(20,40,60,.62);color:var(--surface);font-size:1rem;padding-left:3px;
  opacity:0;transition:opacity .3s ease,transform .3s ease}
.case-card:hover .case-thumb::after{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
.case-thumb:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.case-card h3{font-size:1.1rem;letter-spacing:.05em;margin:0 0 10px;color:var(--ink)}
.case-card .case-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.case-card .case-meta span{font-size:.75rem;letter-spacing:.1em;background:var(--sun2);border-radius:var(--radius-pill);padding:3px 12px;color:var(--ink)}
.case-card .case-quote{font-family:var(--hand);font-size:1.05rem;line-height:1.75;color:var(--mut);margin:0 0 16px;flex:1}
.case-card .case-quote::before{content:"✦ ";color:var(--accent)}
.case-card .case-video{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;letter-spacing:.08em;color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start}
.case-card .case-video::before{content:"▶";font-size:.75rem}
.case-card .case-video:hover,.case-card .case-video:focus-visible{border-bottom-color:var(--accent)}
.case-card .case-video+.case-video{margin-left:16px}
.cases .case-cta{background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:34px 30px;text-align:center;margin-top:8px}
.cases .case-cta h2{color:var(--paper);border:0;margin:0 0 10px;font-size:1.5rem}
.cases .case-cta p{color:rgba(238,246,252,.85);margin-bottom:22px}
.cases .case-cta .btn{background:var(--sun);color:var(--ink)}
.cases .case-cta .btn:hover{background:var(--surface)}
@media (max-width:600px){
  .cases .case-lead{font-size:1.15rem;padding:18px 20px}
  .case-list{grid-template-columns:1fr}
}

/* 內頁排版 */
.page-main h2{font-family:var(--hand);font-size:1.7rem;margin:44px 0 18px;padding-bottom:8px;border-bottom:2px solid var(--sun)}
.page-main h3{font-size:1.08rem;margin:22px 0 6px;color:var(--ink)}
.page-main p{margin-bottom:12px}
.page-main .lead{font-size:1.1rem;color:var(--mut);margin-bottom:28px}
.page-main ul,.page-main ol{padding-left:1.4em;margin-bottom:14px}
.page-main table{border-collapse:collapse;width:100%;margin:14px 0}
.page-main td,.page-main th{border:1px solid rgba(20,40,60,.15);padding:8px 12px;text-align:left}

/* === program page (節目單) === */
body.page-id-21 .wp-block-post-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.page-id-21 .page-main{padding-top:20px}
.pg{font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;color:#12283f;max-width:760px;margin:0 auto;padding:0 20px 72px}
.pg *{box-sizing:border-box}
.pg-hd{padding:44px 0 28px;border-bottom:2px solid #12283f}
.pg-tag{font-size:13px;letter-spacing:.18em;color:#6d4fc4;font-weight:700;margin:0 0 10px}
.pg-h1{font-size:clamp(2.4rem,9vw,3.4rem);line-height:1.15;margin:0;font-weight:800;letter-spacing:.02em}
.pg-sub{font-size:15px;color:#5b6b7d;margin:12px 0 0;line-height:1.7}
.pg-meta{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:22px 0 0;list-style:none}
.pg-meta li{flex:1 1 150px;padding:10px 16px 10px 0;border-right:1px solid #e3e9f0}
.pg-meta li:last-child{border-right:0}
.pg-meta b{display:block;font-size:11px;letter-spacing:.14em;color:#5b6b7d;font-weight:600;margin-bottom:5px}
.pg-meta span{font-size:17px;font-weight:700}
.pg-sec{padding:40px 0 0}
.pg-story{margin:38px 0 0;padding:26px 0 0;border-top:1px solid #e3e9f0}
.pg-story h2{font-size:22px;font-weight:800;margin:0 0 16px;color:#12283f}
.pg-story p{margin:0 0 15px;font-size:15.5px;line-height:1.95;color:#3d5265}
.pg-story p:last-child{margin-bottom:0}
.pg-story .lead{font-size:17px;font-weight:700;color:#12283f;line-height:1.8;padding-left:16px;border-left:3px solid #6d4fc4}
.pg-sign{margin:22px 0 0;text-align:right;line-height:1.55}
.pg-sign b{display:block;font-size:11px;letter-spacing:.14em;color:#5b6b7d;font-weight:600;margin-bottom:4px}
.pg-sign span{font-size:16px;font-weight:800;color:#12283f}
.pg-h2{font-size:22px;font-weight:800;margin:0 0 6px}
.pg-note{font-size:14px;color:#5b6b7d;margin:0 0 22px}
.act{display:grid;grid-template-columns:140px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid #e3e9f0;align-items:start}
.act:last-of-type{border-bottom:0}
.act-pic{margin:0;position:relative;line-height:0}
.act-pic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px;background:#e3e9f0}
.act-n{position:absolute;left:0;bottom:0;font-size:18px;font-weight:800;color:#12283f;background:#9fd4f5;line-height:1;letter-spacing:-.02em;padding:8px 12px;border-radius:0 14px 0 16px}
.act-name{font-size:26px;font-weight:800;margin:0;line-height:1.25}
.act-en{font-size:13px;letter-spacing:.16em;color:#5b6b7d;font-weight:600;margin:6px 0 12px}
.act-cred{margin:0;font-size:15px;line-height:1.85;color:#12283f}
.act-skill{margin:12px 0 0;font-size:14px;color:#5b6b7d;padding-left:14px;border-left:3px solid #9fd4f5}
.pg-know{margin:0;padding:0;list-style:none}
.pg-know li{display:block;font-size:15px;line-height:1.75;margin:0 0 14px;padding:2px 0 2px 16px;border-left:3px solid #9fd4f5}
.pg-know li:last-child{margin-bottom:0}
.pg-know li span{display:block}
.pg-about{margin-top:44px;background:#f7fafd;border-radius:24px;padding:28px 26px}
.pg-about p{margin:0 0 14px;font-size:15px;line-height:1.9;color:#5b6b7d}
.pg-about p:last-of-type{margin-bottom:0}
.pg-about h3{margin:0 0 10px;font-size:17px;font-weight:800;color:#12283f}
.pg-cta{display:inline-block;margin-top:20px;padding:14px 28px;border-radius:999px;background:linear-gradient(135deg,#7b5ad0,#5c3fb5);color:#fff;text-decoration:none;font-size:15px;font-weight:700;box-shadow:0 6px 18px rgba(109,79,196,.28);transition:transform .18s ease,box-shadow .18s ease}
.pg-cta:hover,.pg-cta:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(109,79,196,.36)}
@media(max-width:600px){
  .pg-meta li{flex:1 1 50%;border-right:0;border-bottom:1px solid #e3e9f0}
  .act{grid-template-columns:104px 1fr;gap:16px}
  .act-n{font-size:15px;padding:6px 9px}
  .act-name{font-size:22px}
  .act-cred{font-size:14px}
}

/* ===== 內頁設計系統 v1.4.0（.ip- 前綴，勿與節目單 .pg- 混用） ===== */
.ip-lead{font-size:1.16rem;line-height:1.9;color:var(--ink);margin:0 0 34px;padding:18px 0 18px 20px;border-left:4px solid var(--sun)}
.ip-kicker{display:inline-block;font-size:.78rem;letter-spacing:.2em;font-weight:700;color:var(--magic);margin:0 0 10px}
/* 🚨 .ip-sec 是 <section>，會吃到全域 section{padding:90px 6vw} → 一定要歸零，否則內頁再被縮掉 12vw */
.page-main .ip-sec{margin:52px 0 0;padding:0}
.page-main .ip-sec>h2{font-family:var(--hand);font-size:1.7rem;margin:0 0 6px;padding:0 0 0 16px;border-bottom:0;border-left:6px solid var(--sun);line-height:1.35}
.page-main .ip-sec>.ip-note{font-size:.95rem;color:var(--mut);margin:0 0 22px;padding-left:22px}

/* 卡片格線 */
.ip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:0}
.ip-card{background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 6px 20px rgba(20,40,60,.07);display:flex;flex-direction:column}
.ip-card .ip-ph{aspect-ratio:4/3;background:var(--media-thumb);line-height:0}
.ip-card .ip-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ip-card .ip-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.page-main .ip-card h3{font-size:1.14rem;font-weight:800;margin:0 0 8px;color:var(--ink)}
.page-main .ip-card p{font-size:.97rem;line-height:1.8;color:var(--mut);margin:0 0 12px}
.ip-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.ip-tags span{font-size:.78rem;background:var(--sun2);color:var(--ink);border-radius:var(--radius-pill);padding:4px 11px;white-space:nowrap}

/* 節目大卡（圖上文下，整寬） */
.ip-show{background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 8px 26px rgba(20,40,60,.08);margin:0 0 30px}
.ip-show .ip-ph{aspect-ratio:16/9;background:var(--media-thumb);line-height:0}
.ip-show .ip-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ip-show .ip-body{padding:26px 28px 30px}
.page-main .ip-show h3{font-family:var(--hand);font-size:1.5rem;margin:0 0 4px;line-height:1.3}
.ip-show .ip-sub{font-size:.83rem;letter-spacing:.14em;color:var(--magic);font-weight:700;margin:0 0 14px}
.page-main .ip-show p{font-size:1rem;line-height:1.95;color:var(--ink);margin:0 0 12px}
.ip-show .ip-quote{font-family:var(--hand);font-size:1.12rem;color:var(--ink);border-left:4px solid var(--sun);padding:6px 0 6px 16px;margin:0 0 16px}
.ip-show .ip-edu{background:var(--paper);border-radius:var(--radius-md);padding:18px 20px;margin:16px 0 0}
.page-main .ip-show .ip-edu h4{font-size:1rem;margin:0 0 8px;color:var(--ink)}
.page-main .ip-show .ip-edu p{font-size:.95rem;color:var(--mut);margin:0}

/* 編號流程 */
.ip-steps{list-style:none;counter-reset:ipstep;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.page-main .ip-steps li{position:relative;background:var(--surface);border-radius:var(--radius-md);padding:22px 22px 22px 66px;box-shadow:0 4px 14px rgba(20,40,60,.06)}
.page-main .ip-steps li::before{counter-increment:ipstep;content:"0" counter(ipstep);position:absolute;left:20px;top:20px;font-size:1.5rem;font-weight:800;color:var(--sun);line-height:1}
.ip-steps b{display:block;font-size:1.04rem;margin-bottom:4px}
.ip-steps span{font-size:.93rem;color:var(--mut);line-height:1.7}

/* 數據帶 */
.ip-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 8px}
.ip-facts div{background:var(--surface);border-radius:var(--radius-md);padding:20px 16px;text-align:center;box-shadow:0 4px 14px rgba(20,40,60,.06)}
.ip-facts b{display:block;font-family:var(--hand);font-size:1.8rem;line-height:1.2;color:var(--ink)}
.ip-facts span{display:block;font-size:.85rem;color:var(--mut);margin-top:6px}

/* 年表 */
.ip-tl{margin:0}
.ip-tl .ip-year{display:flex;align-items:center;gap:14px;margin:38px 0 16px}
.page-main .ip-tl .ip-year h2{font-family:var(--hand);font-size:2rem;margin:0;padding:0;border:0;color:var(--magic);line-height:1}
.ip-tl .ip-year i{flex:1;height:2px;background:var(--sun2);display:block}
.ip-tl .ip-row{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid rgba(20,40,60,.08)}
.ip-tl .ip-row:last-child{border-bottom:0}
.ip-tl .ip-when{font-size:.88rem;color:var(--magic);font-weight:700;padding-top:3px}
.page-main .ip-tl h3{font-size:1.06rem;margin:0 0 4px;color:var(--ink)}
.page-main .ip-tl .ip-row p{font-size:.95rem;color:var(--mut);margin:0;line-height:1.75}

/* 聯絡資訊 */
.ip-contact{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0}
.ip-contact a.ip-ct{display:block;background:var(--surface);border-radius:var(--radius-md);padding:20px 22px;text-decoration:none;box-shadow:0 4px 14px rgba(20,40,60,.06);transition:transform .18s ease,box-shadow .18s ease}
.ip-contact a.ip-ct:hover,.ip-contact a.ip-ct:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,40,60,.12)}
.ip-contact .ip-ct b{display:block;font-size:.78rem;letter-spacing:.16em;color:var(--mut);font-weight:700;margin-bottom:6px}
.ip-contact .ip-ct span{font-size:1.05rem;font-weight:700;color:var(--ink);word-break:break-all}

/* 問答 */
.ip-qa{margin:0;padding:0;list-style:none}
.page-main .ip-qa li{background:var(--surface);border-radius:var(--radius-md);padding:18px 22px;margin:0 0 12px;box-shadow:0 4px 14px rgba(20,40,60,.06)}
.ip-qa b{display:block;font-size:1.02rem;margin-bottom:6px}
.ip-qa span{font-size:.95rem;color:var(--mut);line-height:1.8}

/* 頁尾 CTA */
.ip-cta{margin:56px 0 0;background:linear-gradient(150deg,var(--sun2),var(--sun));border-radius:var(--radius-lg);padding:34px 32px;text-align:center}
.page-main .ip-cta h2{font-family:var(--hand);font-size:1.6rem;margin:0 0 8px;padding:0;border:0}
.page-main .ip-cta p{color:var(--ink);margin:0 0 18px;font-size:1rem}
.ip-cta .btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;border-radius:var(--radius-pill);padding:14px 30px;font-weight:700;margin:0 6px 8px}
.ip-cta .btn.alt{background:var(--surface);color:var(--ink)}
.ip-cta .btn:hover,.ip-cta .btn:focus-visible{opacity:.88}

/* 大圖 */
.ip-figure{margin:34px 0;border-radius:var(--radius-lg);overflow:hidden;line-height:0;background:var(--media-thumb)}
.ip-figure img{width:100%;height:auto;display:block}
.page-main .ip-figure figcaption{font-family:var(--hand);font-size:1rem;color:var(--mut);text-align:center;padding:12px 16px;line-height:1.6;background:var(--surface)}

@media(max-width:700px){
  .ip-grid,.ip-steps,.ip-contact{grid-template-columns:1fr}
  .ip-facts{grid-template-columns:1fr}
  .ip-tl .ip-row{grid-template-columns:1fr;gap:4px}
  .ip-show .ip-body{padding:22px 20px 26px}
  .ip-cta{padding:28px 20px}
}

/* v1.4.1 內頁寬度對齊首頁：容器放到 1160，但純文字段落限制行寬（54em ≈ 47 個中文字），
   免得 1160px 一行塞太多字反而難讀。圖片、卡片格線、年表、CTA 一律吃滿寬。 */
.page-main .wp-block-post-title,
.page-main>.entry-content>p,
.page-main .ip-lead,
.page-main .ip-sec>h2,
.page-main .ip-sec>p,
.page-main .ip-sec>.ip-note,
.page-main .ip-show .ip-body>p,
.page-main .ip-show .ip-body>.ip-quote,
.page-main .ip-show .ip-edu,
.page-main .ip-tl .ip-row>div>p{max-width:54em}
.page-main .ip-cta p{max-width:none}

/* v1.4.2 防禦性規則（註解已於 v1.4.3 更正）
   ⚠️ 誤判紀錄：我用 `chrome --headless=new --window-size=390` 截圖，看到內頁文字右側被切、
   右邊沒有留白，判定「手機破版」。實測 CDP（Emulation.setDeviceMetricsOverride, mobile:true）
   後證實 html.scrollWidth == 390，全站沒有任何橫向溢出 —— 被切是因為 headless 桌面模式
   有最小視窗寬度，頁面其實以較寬渲染、截圖只裁掉左邊 390px。
   🚨 教訓：手機版驗收一律走 CDP device emulation，不要用 --window-size 當手機模擬。
   以下規則保留，是防止 grid/flex item 預設 min-width:auto 被 nowrap 內容撐開的保險，不是修復。 */
.ip-grid>*,.ip-steps>li,.ip-facts>div,.ip-contact>*,.ip-tl .ip-row>*,.ip-show .ip-body{min-width:0}
.ip-tags{max-width:100%}
@media(max-width:700px){
  .ip-tags span{white-space:normal}
  .page-main .ip-lead,.page-main .ip-sec>h2,.page-main .ip-sec>p,.page-main .ip-sec>.ip-note,
  .page-main>.entry-content>p,.page-main .ip-show .ip-body>p,.page-main .ip-show .ip-body>.ip-quote,
  .page-main .ip-show .ip-edu,.page-main .ip-tl .ip-row>div>p{max-width:100%}
}

/* ============ 節目介紹頁專用版面 v1.5.0 ============
   俊豪 2026-08-04：不喜歡原本五張全寬大圖直上直下的排法，太單調。
   改成：旗艦大卡 → 左右交錯 → 小節目卡片牆 → 選片對照表 → 演出紀錄。
   🚨 .pg-* 全部包在 .page-main 底下，避免和首頁的 .show-card 等類別打架。 */
.page-main .pg-kicker{font-size:.86rem;letter-spacing:.16em;color:var(--magic);font-weight:700;margin:0 0 14px}
.page-main .pg-tag{font-size:.88rem;letter-spacing:.06em;color:var(--mut);margin:0 0 8px}

/* 旗艦大卡：左圖右文，圖片吃滿整個高度 */
.page-main .pg-flagsec{margin-top:34px}
.page-main .pg-hero{display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 20px 48px rgba(20,40,60,.12)}
.page-main .pg-hero-ph{position:relative;min-height:340px;background:var(--media-placeholder)}
.page-main .pg-hero-ph>picture,.page-main .pg-zig-ph>picture,.page-main .pg-past-ph>picture{display:block;width:100%;height:100%}
.page-main .pg-hero-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.page-main .pg-hero-body{padding:40px 40px 36px;min-width:0}
.page-main .pg-hero-body h3{font-size:1.72rem;line-height:1.3;margin:0 0 16px}
.page-main .pg-quote{border-left:3px solid var(--sun);padding-left:16px;margin:0 0 16px;color:var(--ink);font-family:var(--hand);font-size:1.02rem;line-height:1.75}
.page-main .pg-note{font-size:.88rem;color:var(--mut);line-height:1.7;margin:14px 0 0}
.page-main .pg-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* 規格膠囊 */
.page-main .pg-spec{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:20px 0 0}
.page-main .pg-spec li{background:linear-gradient(135deg,rgba(120,190,220,.18),rgba(150,160,225,.16));border-radius:999px;padding:8px 16px;font-size:.9rem;color:var(--ink);white-space:nowrap}
.page-main .pg-spec li b{font-size:1.06rem;color:var(--magic);font-weight:700}

/* 左右交錯 */
.page-main .pg-zig{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;margin:38px 0 0}
.page-main .pg-zig.rev .pg-zig-ph{order:2}
.page-main .pg-zig-ph{border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:var(--media-placeholder);box-shadow:0 16px 38px rgba(20,40,60,.14)}
.page-main .pg-zig-ph img,.page-main .pg-past-ph img{width:100%;height:100%;object-fit:cover;display:block}
.page-main .pg-zig-body{min-width:0}
.page-main .pg-zig-body h3{font-size:1.42rem;margin:0 0 12px}
.page-main .pg-link{display:inline-block;margin-top:18px;font-weight:700;color:var(--magic);text-decoration:none;border-bottom:2px solid rgba(150,160,225,.4);padding-bottom:2px}
.page-main .pg-link:hover{border-bottom-color:var(--magic)}

/* 小節目卡片牆 */
.page-main .pg-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.page-main .pg-mini>*{min-width:0}
.page-main .pg-card{background:#fff;border-radius:18px;padding:24px 24px 22px;border-top:4px solid var(--teal);box-shadow:0 10px 26px rgba(20,40,60,.08)}
.page-main .pg-card h3{font-size:1.1rem;margin:0 0 6px}
.page-main .pg-len{font-size:.85rem;color:var(--magic);font-weight:700;margin:0 0 10px}
.page-main .pg-card p{font-size:.94rem;line-height:1.75;margin:0;color:var(--mut)}

/* 選片對照表 */
.page-main .pg-match{margin-top:24px;background:#fff;border-radius:20px;padding:8px 28px;box-shadow:0 10px 26px rgba(20,40,60,.08)}
.page-main .pg-row{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:18px 0;border-bottom:1px dashed rgba(20,40,60,.14)}
.page-main .pg-row:last-child{border-bottom:0}
.page-main .pg-row>*{min-width:0}
.page-main .pg-when{font-weight:700;color:var(--ink)}
.page-main .pg-row>div:last-child{color:var(--mut)}

/* 演出紀錄小卡（比主打節目低一階，避免搶版面） */
.page-main .pg-past{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:center;background:#fff;border-radius:20px;padding:18px;margin-top:24px;box-shadow:0 10px 26px rgba(20,40,60,.08)}
.page-main .pg-past>*{min-width:0}
.page-main .pg-past-ph{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--media-placeholder)}
.page-main .pg-past-body h3{font-size:1.18rem;margin:0 0 10px}
.page-main .pg-past-body p{font-size:.94rem;margin:0}

@media(max-width:820px){
  .page-main .pg-hero,.page-main .pg-zig,.page-main .pg-past{grid-template-columns:1fr}
  .page-main .pg-zig.rev .pg-zig-ph{order:0}
  .page-main .pg-hero-ph{min-height:0;aspect-ratio:16/10}
  .page-main .pg-hero-ph img{position:static}
  .page-main .pg-hero-body{padding:28px 24px 26px}
  .page-main .pg-hero-body h3{font-size:1.42rem}
  .page-main .pg-mini{grid-template-columns:1fr}
  .page-main .pg-row{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .page-main .pg-match{padding:6px 20px}
}

/* ============ v1.5.1 按鈕配色 ============
   俊豪 2026-08-04：「按鈕太黑了，跟整體配色都不搭」。附圖還看到字是紫色的。
   🚨 兩個問題：
   ① 深藍 var(--ink) 實色按鈕在整站粉藍/珊瑚/薄荷的調性裡太重。
   ② 字變紫 = WebKit 的 :visited 隱私限制：連結被造訪過時，**用 CSS 變數指定的 color 會被丟掉**，
      退回 UA 預設的紫色。所以按鈕文字色一定要寫死 #fff，不能寫 var(--paper)。
   改法：主按鈕 = 品牌紫→藍漸層（跟規格膠囊同一組色）；次按鈕 = 粉藍底深藍字。 */
.btn{background:linear-gradient(135deg,#5b3fb0,#3f6fbe);color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(109,79,196,.28)}
.btn:visited{color:#fff}
.btn:hover{background:linear-gradient(135deg,#6d4fc4,#4f83d2)}
.btn.alt,.ip-cta .btn.alt{background:#cdeafb;color:#14283c;box-shadow:0 6px 16px rgba(20,40,60,.12)}
.btn.alt:visited{color:#14283c}
.btn.alt:hover,.ip-cta .btn.alt:hover{background:#b9e0f8}
.ip-cta .btn{background:linear-gradient(135deg,#5b3fb0,#3f6fbe);color:#fff}
.ip-cta .btn:visited{color:#fff}
.page-main .pg-act .btn{padding:14px 32px;letter-spacing:.08em}

/* v1.5.3 🚨 按鈕文字色被 `.page-main a{color:var(--accent)}`（0,1,1）蓋過 `.btn`（0,1,0）。
   內頁所有按鈕的字其實一直都是紫色，不是白色 - 深底配紫字才會看起來「糊糊的一團黑」。
   這裡把特異性拉到 0,2,1 釘死；顏色一律寫死 hex（WebKit :visited 會丟掉 var()）。 */
.page-main a.btn,.page-main a.btn:visited,.page-main a.btn:hover{color:#fff}
.page-main a.btn.alt,.page-main a.btn.alt:visited,.page-main a.btn.alt:hover{color:#14283c}
.page-main .pg-link:visited{color:#6d4fc4}

/* ===== v1.6.0 歷年創作：劇照牆 + 燈箱 =====
   2024/2025 兩年補齊後，每一檔演出底下掛 4-6 張現場劇照。
   圖用 -760.webp 進格線、點開換 1400 版；aspect-ratio 寫死避免 CLS。 */
.page-main .ip-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px;margin:14px 0 2px}
.page-main .ip-shot{display:block;border-radius:10px;overflow:hidden;line-height:0;background:#0e1c2c;
  box-shadow:0 4px 14px rgba(20,40,60,.14);cursor:zoom-in;border:0}
.page-main .ip-shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .4s ease,filter .4s ease}
.page-main .ip-shot:hover img,.page-main .ip-shot:focus-visible img{transform:scale(1.06);filter:brightness(1.06)}
.page-main .ip-shot:focus-visible{outline:3px solid var(--magic);outline-offset:2px}
@media(max-width:640px){
  .page-main .ip-shots{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:6px}
}
/* 燈箱 */
.lb{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;background:rgba(8,16,28,.95);opacity:0;pointer-events:none;transition:opacity .22s ease}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:min(1400px,94vw);max-height:78vh;width:auto;height:auto;border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);background:#0e1c2c}
.lb-cap{color:#dbe9f6;font-size:.95rem;line-height:1.7;text-align:center;max-width:70ch;margin:0}
.lb-n{color:#8fa6bb;font-size:.85rem;letter-spacing:.06em}
.lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:999px;
  width:48px;height:48px;font-size:1.5rem;line-height:1;cursor:pointer;transition:background .2s}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb .lb-x{top:18px;right:18px;font-size:1.3rem}
.lb .lb-p{left:16px;top:50%;transform:translateY(-50%)}
.lb .lb-n2{right:16px;top:50%;transform:translateY(-50%)}
@media(max-width:640px){.lb{padding:14px}.lb img{max-height:64vh}.lb button{width:42px;height:42px}}

/* v1.6.2 L6：演出行程／歷年創作日期欄「日」字不單獨折行。keep-all 讓單一日期整段不斷（效果同 nowrap），
   但「9月5日 – 9月6日」這種區間仍可在空白處換行，不會撐出欄外；桌機欄寬 96→118px 放得下最長的「2026年12月31日」 */
.ip-tl .ip-when{word-break:keep-all;overflow-wrap:normal}
@media(min-width:701px){.ip-tl .ip-row{grid-template-columns:118px 1fr}}

/* ===== v1.7.0 演出紀錄部落格（文章版面＋總覽卡片，2026-10-15）===== */
.post-wrap{max-width:780px;margin:0 auto}
.post-crumb{font-size:.85rem;color:var(--mut);margin:0 0 18px}
.post-crumb a{color:var(--mut);text-decoration:none}
.post-crumb a:hover{color:var(--accent)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;font-size:.9rem;color:var(--mut)}
.post-cat{display:inline-block;background:var(--ink);color:var(--paper);font-size:.78rem;letter-spacing:.12em;padding:4px 12px;border-radius:var(--radius-pill)}
.page-main .post-wrap h1{margin-bottom:18px;line-height:1.35}
.post-lead{font-size:1.12rem;line-height:1.95;color:var(--ink);margin:0 0 26px}
.post-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0 0 30px;background:var(--surface);border-radius:var(--radius-md);box-shadow:0 6px 20px rgba(20,40,60,.07);overflow:hidden}
.post-facts div{padding:14px 20px;border-bottom:1px solid rgba(20,40,60,.07)}
.post-facts dt{font-size:.78rem;letter-spacing:.14em;color:var(--magic);font-weight:700;margin:0 0 4px}
.post-facts dd{margin:0;color:var(--ink);font-size:1rem}
.post-figure{margin:0 0 30px}
.post-figure img{width:100%;height:auto;border-radius:var(--radius-md);display:block}
.post-figure figcaption{font-size:.85rem;color:var(--mut);margin-top:8px}
.post-video{position:relative;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;background:#000}
.post-video{display:block}.post-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-video .play{position:absolute;left:50%;top:50%;width:76px;height:54px;margin:-27px 0 0 -38px;background:#e62117;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.post-video .play::after{content:"";position:absolute;left:31px;top:16px;border-left:20px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.post-video:hover .play{background:#ff0000}
.post-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 30px}
.post-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);display:block}
.post-gallery.g3{grid-template-columns:repeat(3,1fr)}
.post-body p{line-height:1.95;margin-bottom:16px}
.post-body ul{line-height:1.9;margin:0 0 18px 1.2em}
.post-cta{background:var(--surface);box-shadow:0 6px 20px rgba(20,40,60,.07);border-radius:var(--radius-lg);padding:28px 30px;margin:44px 0 0}
.post-cta h2{margin-top:0 !important}
.post-cta .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.post-cta .btn{color:var(--paper) !important}
.post-cta .btn.ghost{background:transparent;color:var(--ink) !important;box-shadow:inset 0 0 0 2px var(--ink)}
.post-related{margin:54px 0 0}
.post-related .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post-related a.card{display:block;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 6px 20px rgba(20,40,60,.07);text-decoration:none;color:var(--ink) !important}
.post-related a.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.post-related a.card span{display:block;padding:12px 14px 16px;font-size:.95rem;line-height:1.5}
.hub-upcoming h2,.hub-records h2{margin-top:10px !important}
.hub-soon{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border-radius:var(--radius-md);box-shadow:0 6px 20px rgba(20,40,60,.07);padding:22px 26px}
.hub-soon p{margin:4px 0 0;color:var(--mut)}
.hub-soon .btn{color:var(--paper) !important}
.hub-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.hub-filter button{font:inherit;font-size:.92rem;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:var(--radius-pill);padding:7px 16px;cursor:pointer;min-height:40px}
.hub-filter button.on{background:var(--ink);color:var(--paper)}
.hub-years{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.9rem;margin:0 0 6px}
.hub-yt{font-family:var(--hand);font-size:1.6rem !important;margin:40px 0 14px !important;display:flex;align-items:baseline;gap:10px}
.hub-yt small{font-family:inherit;font-size:.85rem;color:var(--mut);font-weight:400}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hub-card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 6px 20px rgba(20,40,60,.07);text-decoration:none;color:var(--ink) !important}
a.hub-card:hover{transform:translateY(-3px);transition:.2s}
.hub-card.has-post{outline:3px solid var(--sun)}
.hub-thumb{aspect-ratio:16/10;background:var(--media-thumb);overflow:hidden}
.hub-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hub-ph{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-family:var(--hand);font-size:1.15rem;color:var(--ink);background:var(--paper)}
.hub-body{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1}
.hub-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem;color:var(--mut);margin:0 0 6px}
.hub-cat{background:var(--paper);color:var(--ink);padding:2px 10px;border-radius:var(--radius-pill)}
.hub-card h3{font-size:1rem !important;margin:0 0 6px !important;line-height:1.5}
.hub-card p{font-size:.88rem;color:var(--mut);margin:0 0 8px !important;line-height:1.7}
.hub-more{margin-top:auto;font-weight:700;color:var(--accent);font-size:.9rem}
@media (max-width:900px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .hub-grid{grid-template-columns:1fr;gap:12px}
  .hub-card:not(.has-post){display:grid;grid-template-columns:96px 1fr;align-items:stretch}
  .hub-card:not(.has-post) .hub-thumb{aspect-ratio:auto;min-height:96px}
  .hub-card:not(.has-post) .hub-ph{font-size:.8rem;padding:6px}
  .hub-card:not(.has-post) .hub-body{padding:10px 12px}
  .hub-card:not(.has-post) p{display:none}
}
@media (max-width:700px){
  .post-gallery,.post-gallery.g3{grid-template-columns:1fr}
  .post-facts div{padding:12px 14px}
  .post-facts dd{font-size:.92rem}
  .post-related .grid{grid-template-columns:1fr}
  .post-cta{padding:22px 20px}
}
.hub-year{scroll-margin-top:110px}
.hub-records{scroll-margin-top:110px}
.hub-filter button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hub-empty{color:var(--mut);font-size:.95rem}
.case-lead+.case-stats+.hub-records,.case-stats+.hub-records{margin-top:10px}

/* ===== v1.7.1 文章照片：點開放大（沿用 .lb 燈箱）＋文末「現場照片」相簿 ===== */
.post-shot{display:block;line-height:0;border-radius:var(--radius-md);overflow:hidden;cursor:zoom-in}
.post-shot img{transition:transform .35s ease}
.post-shot:hover img,.post-shot:focus-visible img{transform:scale(1.03)}
.post-shot:focus-visible{outline:3px solid var(--magic);outline-offset:2px}
.post-album{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 30px}
.post-album img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--radius-md)}
@media (max-width:700px){.post-album{grid-template-columns:repeat(2,1fr);gap:8px}}
.hub-records+.cases{margin-top:44px}

/* ===== v1.8.0 首頁 SEO 改版（2026-10-16） ===== */
:root{--line-green:#06c755}
/* H1 改成 kicker 那行（團名＋桃園親子魔術劇團），口號大字改用 p.hero-title，畫面跟以前一樣 */
.hero-txt h1.kicker{font-family:inherit;font-weight:400;font-size:.9rem;line-height:1.6;letter-spacing:.12em;text-wrap:wrap}
.hero-txt .hero-title{font-family:var(--hand);font-weight:400;font-size:clamp(1.9rem,11.5cqw,3.2rem);line-height:1.28;text-wrap:balance;margin:0}
.hero-txt .hero-title .l2{white-space:normal}
@supports not (font-size:1cqw){.hero-txt .hero-title{font-size:clamp(1.9rem,10vw,3.2rem)}}
/* 原創節目卡片改成整張可點 */
a.show-card{color:inherit;text-decoration:none}
a.show-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.show-card .more{margin-top:12px;font-size:.85rem;font-weight:700;color:var(--accent);letter-spacing:.06em}
/* 我們可以為你演什麼 */
.services{background:var(--surface)}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.svc{background:var(--paper);border:1px solid rgba(20,40,60,.08);border-radius:var(--radius-lg);padding:30px 30px 28px;display:flex;flex-direction:column}
.svc h3{font-size:1.2rem;letter-spacing:.08em;margin-bottom:10px}
.svc p{font-size:.98rem;margin-bottom:20px}
.svc p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.svc p a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.svc-cta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.svc-cta .btn{padding:11px 22px;font-size:.88rem;letter-spacing:.08em}
.svc-cta .btn.ghost{margin-left:0}
.svc-link{color:var(--accent);font-size:.9rem;font-weight:700;text-decoration:none}
.svc-link:hover{text-decoration:underline}
@media(max-width:800px){.svc-grid{grid-template-columns:1fr}.svc{padding:24px 20px}}
/* 籌備中：主按鈕改加 LINE 好友 */
.upcoming .item-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
/* 觀眾回饋 4 則＋樣本說明 */
.voice-wrap{grid-template-columns:1fr 1fr .8fr;grid-template-areas:"q1 q2 stats" "q3 q4 stats" "note note note"}
.voice:nth-child(1){grid-area:q1}.voice:nth-child(2){grid-area:q2}.voice:nth-child(3){grid-area:q3}.voice:nth-child(4){grid-area:q4}
.voice-note{grid-area:note;font-size:.82rem;color:var(--mut);margin:0}
@media(max-width:900px){.voice-wrap{grid-template-columns:1fr;grid-template-areas:"q1" "q2" "q3" "q4" "stats" "note"}}
/* 導覽列「聯絡我們」改成實心按鈕（桌機） */
nav .menu a.nav-cta{background:var(--ink);color:var(--paper);padding:6px 18px;border-radius:var(--radius-pill);border-bottom:0}
nav .menu a.nav-cta:hover,nav .menu a.nav-cta:focus-visible{background:var(--accent);color:var(--paper)}
@media(max-width:980px){nav .menu a.nav-cta{background:none;color:inherit;padding:15px 0;border-radius:0;border-bottom:1px solid rgba(20,40,60,.1)}nav .menu a.nav-cta:hover{background:none;color:inherit}}
/* 手機底部固定 LINE／電話 */
.m-bar{display:none}
@media(max-width:768px){
  .m-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--surface);padding:8px 10px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(20,40,60,.12)}
  .m-bar a{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:var(--radius-pill);font-weight:700;font-size:.95rem;letter-spacing:.08em;text-decoration:none}
  .m-bar .m-line{background:var(--line-green);color:#fff}
  .m-bar .m-tel{background:var(--ink);color:var(--paper)}
  body.nav-open .m-bar{display:none}
}
.hero-txt .sub .nb{display:inline-block}
@media(max-width:600px){.upcoming .info{flex:1 1 100%}}

/* ===== v1.8.2 關於劇團頁（.ab- 前綴，2026-10-16）===== */
.ab-hero{margin-top:0}
.ip-facts.ab-facts{grid-template-columns:repeat(4,1fr);margin-top:6px}
.ab-facts b{font-size:1.7rem;white-space:nowrap}
.page-main .ab-quote{font-family:var(--hand);font-size:1.45rem;line-height:1.5;color:var(--magic);margin:8px 0 14px;padding-left:22px}
.ab-grid3{grid-template-columns:repeat(3,1fr)}
.ab-grid3 .ip-ph{aspect-ratio:3/2}
.page-main a.ab-more{margin-top:auto;font-size:.9rem;font-weight:700;text-decoration:none;color:var(--accent)}
.page-main a.ab-more::after{content:" ›"}
.page-main a.ab-more:hover{text-decoration:underline}
/* 大事記 */
.ab-tl{margin:4px 0 0;border-left:3px solid var(--sun2);padding-left:0}
.ab-yr{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid rgba(20,40,60,.08);position:relative}
.ab-yr.has-ph{grid-template-columns:92px minmax(0,1fr) 300px}
.ab-yr:last-child{border-bottom:0}
.ab-yr::before{content:"";position:absolute;left:-9px;top:30px;width:15px;height:15px;border-radius:var(--radius-circle);background:var(--surface);border:3px solid var(--sun)}
.ab-y{font-family:var(--hand);font-size:1.6rem;color:var(--magic);line-height:1.2;padding:4px 0 0 22px}
.page-main .ab-tx ul{margin:0;padding-left:1.1em}
.page-main .ab-tx li{font-size:.98rem;line-height:1.8;margin:0 0 6px;color:var(--ink)}
.ab-ph{border-radius:var(--radius-md);overflow:hidden;line-height:0;background:var(--media-thumb);aspect-ratio:3/2;align-self:start}
.ab-ph img{width:100%;height:100%;object-fit:cover;display:block}
/* 成員 */
.page-main .ab-h3{font-size:1.15rem;font-weight:800;margin:30px 0 14px;color:var(--ink)}
.ab-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0}
.ab-people.ab-sm{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ab-person{background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 4px 14px rgba(20,40,60,.07);display:flex;flex-direction:column;min-width:0}
.ab-person{text-align:center;align-items:center}
.ab-person .ab-pp{width:150px;max-width:70%;aspect-ratio:1;border-radius:var(--radius-circle);overflow:hidden;background:var(--media-thumb);line-height:0;margin:22px auto 0;box-shadow:0 0 0 4px var(--sun2)}
.ab-sm .ab-person .ab-pp{width:120px}
.ab-person .ab-pp img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.page-main .ab-more-note{font-size:.93rem;color:var(--mut);margin:16px 0 0;max-width:54em}
.ab-team-fig{margin-top:6px}
.ab-crew-fig{margin:0 auto;max-width:760px}
.ab-crew-fig img{width:100%;height:auto;display:block}
.ab-person .ab-pb{padding:14px 16px 20px;width:100%}
.page-main .ab-person h4{font-size:1.06rem;font-weight:800;margin:0 0 2px;color:var(--ink)}
.ab-person .ab-role{display:block;font-size:.82rem;font-weight:700;color:var(--magic);letter-spacing:.04em;margin:0 0 8px}
.page-main .ab-person p{font-size:.92rem;line-height:1.75;color:var(--mut);margin:0}
.ab-person.no-ph{background:linear-gradient(160deg,var(--surface),var(--paper));border:1px solid rgba(20,40,60,.08);box-shadow:none}
.ab-person.no-ph .ab-pb{padding:18px 16px}
.ab-crew{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 18px}
.ab-crew>div{background:var(--surface);border-radius:var(--radius-md);padding:20px 22px;box-shadow:0 4px 14px rgba(20,40,60,.06);min-width:0}
.ab-crew b{display:block;font-size:1.06rem;margin-bottom:6px}
.ab-crew b em{font-style:normal;font-family:var(--hand);font-size:1.4rem;color:var(--magic);margin-left:6px}
.ab-crew span{font-size:.95rem;color:var(--mut);line-height:1.8}
/* 走過的舞台：可點的標籤 */
.ab-tags{gap:8px}
.ab-tags a,.ab-tags span{font-size:.86rem;border-radius:var(--radius-pill);padding:5px 13px;white-space:nowrap}
.ab-tags span{background:var(--sun2);color:var(--ink)}
.page-main .ab-tags a{background:var(--surface);color:var(--ink);border:1px solid var(--sun);text-decoration:underline;text-decoration-color:var(--sun);text-underline-offset:3px}
.page-main .ab-tags a:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:980px){
  .ab-grid3{grid-template-columns:repeat(2,1fr)}
  .ab-people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-people.ab-sm{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-yr.has-ph{grid-template-columns:92px minmax(0,1fr) 220px}
}
@media(max-width:700px){
  .ip-facts.ab-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-facts b{font-size:1.35rem;white-space:normal}
  .ab-facts span br{display:none}
  .ab-grid3{grid-template-columns:1fr}
  .ab-yr,.ab-yr.has-ph{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 0 18px 18px}
  .ab-yr::before{top:24px}
  .ab-y{padding:0}
  .ab-people,.ab-people.ab-sm{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ab-person .ab-pb{padding:12px 12px 14px}
  .page-main .ab-person p{font-size:.88rem}
  .ab-crew{grid-template-columns:1fr}
  .ab-tags a,.ab-tags span{white-space:normal}
}

/* v1.8.3 演出紀錄文章「海報與節目單」：文宣保留原比例不裁切，寬幅橫布條跨整列 */
.post-album.post-promo{align-items:start}
.post-album.post-promo img{aspect-ratio:auto;height:auto;object-fit:contain;background:var(--paper)}
.post-album.post-promo .post-shot.wide{grid-column:1/-1}

/* v1.8.4 文章照片組：img 帶 width/height 屬性時，HTML height 會蓋過 aspect-ratio 變成細長條，補 height:auto 讓 4:3 生效（promo 規則較具體，仍維持原比例） */
.post-gallery img,.post-album img{height:auto}
/* v1.8.5 燈箱改用 <picture>（WebP 優先、JPG 後備）：picture 不產生方框，沿用 .lb img 的排版 */
.lb picture{display:contents}

/* ===== v1.8.6 美編排版改版 9 項（2026-10-16 俊豪核可「全做」；提案 design-review/proposals.md） ===== */

/* 01 首頁首屏：按鈕一主一次＋第三顆改文字連結；手機劇照置頂 */
.hero-cta{align-items:center;gap:12px 14px}
.hero-cta .btn{padding:14px 30px;letter-spacing:.1em}
.hero-cta .btn.ghost+.btn.ghost{background:none;border:0;box-shadow:none;padding:8px 4px;color:var(--ink);letter-spacing:.06em;font-weight:700;text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:6px;flex-basis:100%;text-align:left}
.hero-cta .btn.ghost+.btn.ghost::after{content:"  →"}
.hero-cta .btn.ghost+.btn.ghost:hover{transform:none;color:var(--accent)}
@media(max-width:768px){
  .hero{min-height:0;padding:76px 20px 40px}
  .hero-inner{gap:18px}
  .hero-photo{order:-1;flex:1 1 100%;padding:6px 0 4px}
  .hero-photo .ph-sub.s1{width:26%;top:-2%;left:-3%}
  .hero-photo .ph-sub.s2{width:24%;bottom:2%;right:-3%}
  .hero-photo .photo-caption{display:none}
  .hero .confetti{display:none}
  .hero .blob-bg{top:-6%;height:100%;width:72%}
  .hero-txt h1.kicker{font-size:.82rem;margin-bottom:8px;letter-spacing:.08em}
  .hero-txt .hero-title{font-size:2.15rem}
  .hero-txt .sub{margin:12px 0 18px;font-size:.95rem;line-height:1.6}
  .hero-cta{gap:10px}
  .hero-cta .btn{padding:12px 20px;font-size:.92rem;letter-spacing:.06em}
  .hero-cta .btn.ghost+.btn.ghost{padding:4px 2px;font-size:.92rem}
}

/* 02 內頁頁首粉藍色帶＋頁首小標籤；尾牙頁首屏洽詢按鈕
   文章頁（body.single）與節目單（page-id-21）不上色帶：文章頁版面是全站基準，這輪不動 */
.page-main{position:relative;isolation:isolate}
.page-main::before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:100vw;transform:translateX(-50%);
  height:var(--ip-band,440px);border-radius:0 0 56px 56px;
  background:radial-gradient(60% 120% at 92% -10%,rgba(159,212,245,.95) 0,rgba(159,212,245,0) 70%),linear-gradient(180deg,#d9effc 0,var(--paper) 100%)}
body.single .page-main::before,body.page-id-21 .page-main::before{display:none}
.page-main .ip-pagekicker{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.14em;color:var(--magic);background:rgba(255,255,255,.7);border-radius:var(--radius-pill);padding:5px 14px;margin:0 0 14px}
.page-main>.wp-block-post-title{margin-bottom:18px}
.page-main .ip-lead{border-left:0;padding:0;font-size:1.12rem;color:#2c4257;margin-bottom:24px}
.ip-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:0 0 36px}
.page-main .ip-hero-cta .btn{padding:14px 28px;letter-spacing:.08em}
.ip-hero-cta .ip-hero-note{flex-basis:100%;font-size:.9rem;color:var(--mut)}
/* 商業頁主圖：降成 21:9，避免 1024px 舊照片被放大到糊 */
.page-main .ip-hero-cta+.ip-show .ip-ph{aspect-ratio:21/9}
.page-main .ip-hero-cta+.ip-show .ip-ph img{object-position:center 40%}
@media(max-width:700px){
  .page-main{padding-top:104px}
  .page-main::before{height:var(--ip-band-m,560px);border-radius:0 0 32px 32px}
  .page-main .ip-lead{font-size:1rem;line-height:1.85}
  .page-main .ip-hero-cta .btn{flex:1 1 0;text-align:center;padding:13px 10px;font-size:.92rem}
  .page-main .ip-hero-cta+.ip-show .ip-ph{aspect-ratio:16/10}
}
/* 色帶高度依頁面內容：演出行程（page-id-9）、尾牙魔術表演（page-id-404，首屏多一排洽詢按鈕） */
body.page-id-9 .page-main{--ip-band:400px;--ip-band-m:470px}
body.page-id-404 .page-main{--ip-band:520px;--ip-band-m:640px}

/* 03 演出紀錄卡片：拿掉粗外框；手機改左圖右文 */
.hub-card.has-post{outline:0}
.hub-card{border:1px solid rgba(20,40,60,.07);box-shadow:0 2px 10px rgba(20,40,60,.05);transition:transform .2s ease,box-shadow .2s ease}
a.hub-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(20,40,60,.12)}
.hub-body{padding:16px 18px 18px}
.hub-meta{font-size:.82rem}
.hub-cat{background:var(--sun2);font-weight:700;color:#24506e}
.hub-card h3{font-size:1.04rem !important;line-height:1.55;font-weight:800}
.hub-card p{color:#4f6273}
.hub-more{font-size:.88rem}
.hub-grid{gap:22px}
@media (max-width:560px){
  .hub-grid{gap:10px}
  .hub-card,.hub-card.has-post{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:stretch;border-radius:14px}
  .hub-card .hub-thumb,.hub-card.has-post .hub-thumb{aspect-ratio:auto;min-height:100%;height:100%}
  .hub-card .hub-thumb{position:relative}
  .hub-card .hub-thumb picture,.hub-card .hub-thumb img{position:absolute;inset:0;width:100%;height:100%}
  .hub-card .hub-body{padding:10px 12px 12px;min-height:96px}
  .hub-card .hub-meta{font-size:.76rem;gap:6px;margin-bottom:4px}
  .hub-card h3{font-size:.95rem !important;line-height:1.45;margin:0 !important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hub-card p,.hub-card .hub-more{display:none}
}

/* 04 首頁劇照集錦：蛋形＋旋轉 → 大小錯落的圓角格 */
.g-wrap{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.g-ph,.g-ph:nth-child(n){border-radius:18px!important;transform:none!important;aspect-ratio:3/2;grid-column:span 3;box-shadow:0 10px 26px rgba(20,40,60,.12)}
.g-ph:nth-child(1){grid-column:span 6;grid-row:span 2;aspect-ratio:auto}
.g-ph:nth-child(n+6){grid-column:span 4}
.g-ph img{transition:transform .5s ease}
.g-ph:hover img{transform:scale(1.04)}
@media (max-width:900px){
  .g-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .g-ph,.g-ph:nth-child(n){grid-column:span 1;grid-row:auto;aspect-ratio:3/2;border-radius:14px!important}
  .g-ph:nth-child(1),.g-ph:nth-child(8){grid-column:1/-1;aspect-ratio:16/9}
}

/* 05 頁尾四欄（欄位容器用 div role=navigation，不用 <nav>：全域 nav 是 position:fixed） */
footer.ft2{text-align:left;padding:64px 6vw 28px}
.ft2 .ft-grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px}
.ft2 .ft-grid>*{min-width:0}
.ft2 .logo{justify-content:flex-start;margin:0 0 14px}
.ft2 .logo img{height:58px}
.ft2 .ft-slogan{font-family:var(--hand);font-size:1.25rem;margin:0 0 10px;color:#fff}
.ft2 .ft-desc{font-size:.88rem;line-height:1.8;opacity:.72;margin:0 0 16px}
.ft2 .ft-social{display:flex;gap:10px}
.ft2 .ft-social a{font-size:.85rem;text-decoration:none;border:1px solid rgba(238,246,252,.3);border-radius:999px;padding:5px 14px}
.ft2 .ft-social a:hover{border-color:var(--sun);color:var(--sun)}
.ft2 .ft-h{font-size:.8rem;letter-spacing:.18em;color:var(--sun);margin:6px 0 14px;font-weight:700}
.ft2 .ft-col a{display:block;text-decoration:none;font-size:.95rem;padding:5px 0;opacity:.88}
.ft2 .ft-col a:hover{opacity:1;color:var(--sun)}
.ft2 .ft-contact a{overflow-wrap:anywhere}
.ft2 .ft-contact a.ft-line{display:inline-block;background:#06c755;color:#fff;opacity:1;border-radius:999px;padding:9px 18px;margin-bottom:8px;font-weight:700}
.ft2 .ft-bottom{max-width:1160px;margin:40px auto 0;padding-top:18px;border-top:1px solid rgba(238,246,252,.14);font-size:.8rem;opacity:.6}
@media(max-width:800px){
  footer.ft2{padding:40px 22px 24px}
  .ft2 .ft-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
  .ft2 .ft-brand,.ft2 .ft-contact{grid-column:1/-1}
  .ft2 .logo img{height:46px}
}

/* 06 手機段落留白收緊、小灰字加深一階 */
:root{--mut:#4f6273}
@media(max-width:700px){
  section{padding:56px 20px}
  .wave{height:44px}
  .sec-sub{margin-bottom:26px}
  h2.dot-title,.dot-title{font-size:1.45rem;margin-bottom:8px}
  .upcoming .item{padding:20px;gap:12px}
  .upcoming .date{font-size:1.1rem;min-width:0;padding:4px 14px}
  .cast-band{padding:0 0 56px}
  .gallery{padding-bottom:28px}
}

/* 07 首頁服務四卡：四個品牌色、內文連結改淡虛線、按鈕在上連結在下 */
.svc-grid{gap:22px}
.svc{background:#fff;border:0;position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(20,40,60,.08);padding:28px 30px 26px}
.svc::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--svc-c,var(--sun))}
.svc:nth-child(1){--svc-c:var(--magic)}
.svc:nth-child(2){--svc-c:var(--coral)}
.svc:nth-child(3){--svc-c:var(--teal)}
.svc:nth-child(4){--svc-c:#3f6fbe}
.svc h3{font-size:1.28rem;font-weight:800;letter-spacing:.06em;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.svc h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--svc-c);flex:none}
.svc p{font-size:.98rem;line-height:1.95;color:#3a4f63}
.svc p a{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(20,40,60,.28)}
.svc p a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.svc-cta{gap:12px 20px}
.svc-cta .btn+.btn.ghost{padding:9px 20px}
.svc-cta .svc-link{order:2}
.svc-cta .btn,.svc-cta .btn.ghost{order:1}
.svc-cta::after{content:"";order:1;flex-basis:100%;height:0}
@media(max-width:800px){.svc{padding:22px 20px 22px}.svc p{font-size:.96rem;line-height:1.85}}

/* 08 右側直排側標 → 右下角橫式「成為魔法之友」LINE 膠囊（手機本來就隱藏，手機有底部 LINE 列） */
.side-tab{writing-mode:horizontal-tb;top:auto;bottom:28px;right:28px;letter-spacing:.08em;font-size:.92rem;padding:12px 20px 12px 18px;border-radius:999px;background:#06c755;color:#fff;box-shadow:0 10px 26px rgba(6,199,85,.32);display:flex;align-items:center;gap:8px}
.side-tab::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.3)}
.side-tab:hover{background:#05b34c;color:#fff}
@media(max-width:768px){.side-tab{display:none}}

/* 09 首頁兩張全員合照拉開距離＋圖說 */
.cast-band .cast-cap{max-width:1160px;margin:12px auto 0;padding:0 6vw;font-family:var(--hand);font-size:1.05rem;color:var(--ink);text-align:center}
.cast-band .cast-cap+.cast-ph{margin-top:30px}
@media(max-width:600px){.cast-band .cast-cap{font-size:.95rem;line-height:1.5;padding:0 20px}.cast-band .cast-cap+.cast-ph{margin-top:22px}}


/* v1.8.7 2026-10-16 演出紀錄卡片一致化（美編 design-review/cards-fix/cards.css） */
/* =====================================================================
   演出紀錄卡片一致化（/演出行程/、/商演案例/ 共用 .hub-card）
   2026-10-16 美編提案，接在主題 v1.8.6 的卡片規則之後（放 main.css 最後面即可）
   不一致的來源（實測 390 寬 173 張卡）：
   1. 手機縮圖用 height:100% 跟著卡片高度走，卡片高度又由「標題 1-3 行」
      加「日期 1-3 行」決定，所以出現 98/99/121/149/172 五種卡高、縮圖被拉成直條。
   2. 舊規則 .hub-card:not(.has-post) 權重較高，沒有文章的卡縮圖是 96px，
      有文章的是 118px，左邊縮圖欄寬不一。
   3. 日期跨日期或多場次（例：2021年10月15日、11月16日、11月19日）會換到第 2、3 行。
   4. 桌機標題 1-2 行、描述 1-2 行、沒文章的卡沒有「閱讀全文」，卡高 365/417/441 三種。
   修法：縮圖固定尺寸＋object-fit:cover，文字區塊全部 line-clamp 並保留固定行高，
   卡片高度改由設計決定，不再由內容長短決定。
   ===================================================================== */

/* ---------- 共用：中繼資料列固定一行 ---------- */
.hub-meta{flex-wrap:nowrap;min-width:0;overflow:hidden;white-space:nowrap}
.hub-meta .hub-cat{flex:0 0 auto}
.hub-meta > span:not(.hub-cat){min-width:0;overflow:hidden;text-overflow:ellipsis}

/* 圖片：容器決定比例，img 不靠 width/height 屬性撐高 */
.hub-thumb picture{display:block;width:100%;height:100%}
.hub-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}

/* ---------- 桌機與平板（>560px）：同一網格全部等高 ---------- */
@media (min-width:561px){
  .hub-card{height:100%}
  .hub-thumb{aspect-ratio:16/10;flex:0 0 auto}
  .hub-card h3{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
    min-height:calc(1.04rem * 1.55 * 2);  /* 1 行標題也佔 2 行高 */
  }
  .hub-card p{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
    min-height:calc(.88rem * 1.7 * 2);
  }
  /* 沒有文章的卡沒有「閱讀全文」，補一行等高留白，讓底線對齊 */
  .hub-card:not(.has-post) .hub-body::after{content:"";display:block;height:calc(.88rem * 1.6)}
  .hub-more{line-height:1.6}
}

/* ---------- 手機（≤560px）：左方塊縮圖＋右文，卡片固定 112px 高 ---------- */
@media (max-width:560px){
  .hub-card,.hub-card.has-post,.hub-card:not(.has-post){
    display:grid;grid-template-columns:112px minmax(0,1fr);
    height:112px;min-height:0;align-items:stretch;border-radius:14px;
  }
  /* 縮圖：固定正方形，不跟卡片內容伸縮 */
  .hub-card .hub-thumb,.hub-card.has-post .hub-thumb,.hub-card:not(.has-post) .hub-thumb{
    position:static;width:112px;height:112px;min-height:0;aspect-ratio:1/1;
  }
  .hub-card .hub-thumb picture,.hub-card .hub-thumb img{position:static;inset:auto;width:112px;height:112px}
  .hub-card:not(.has-post) .hub-ph{height:112px;font-size:.8rem;padding:8px;line-height:1.4}
  .hub-card .hub-body,.hub-card:not(.has-post) .hub-body{
    padding:10px 12px;min-height:0;overflow:hidden;justify-content:flex-start;
  }
  /* 分類＋日期固定同一行：分類縮小，日期太長以 … 收尾 */
  .hub-card .hub-meta{font-size:.74rem;gap:6px;margin:0 0 5px;line-height:20px;height:20px}
  .hub-card .hub-cat{font-size:.7rem;padding:0 7px;line-height:20px}
  /* 標題最多 3 行，行高固定 */
  .hub-card h3{
    font-size:.94rem !important;line-height:1.42;margin:0 !important;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
    max-height:calc(.94rem * 1.42 * 3);
  }
  .hub-card p,.hub-card .hub-more,.hub-card:not(.has-post) .hub-body::after{display:none}
}

/* v1.8.8 2026-10-17 魔幻藝術節常設頁「節目單與文宣」：.page-main .ip-shots 的 178px 格線會把文宣縮成小格，改成兩欄（手機也是兩欄） */
.page-main .ip-shots.post-promo{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ===== v1.8.9 導覽列下拉選單＋字級（2026-10-17 俊豪核可） =====
   桌機：hover（開 .12s／關 .25s 延遲防誤觸）與鍵盤 focus-within 都會展開；Esc 收起；.sub-toggle 帶 aria-expanded（main.js 同步）。
   v1.8.11（2026-10-17 俊豪回報「點了劇團成員，選單要很久才消失」）：桌機展開改由 main.js 加 .is-open 控制，
   不再用純 :hover／:focus-within（滑鼠點子項後焦點留在連結上、游標還停在選單上，選單就一直開著）。
   開／關的延遲（.12s／.25s）改在 main.js 計時；點任一子項立刻收起。
   手機（≤980px 抽屜）：只在點 .sub-toggle 後（.open）展開，一次只開一組；大項文字照樣點進頁面。 */
nav .menu{font-size:1.04rem;align-items:center}
nav .menu .mi{position:relative;display:flex;align-items:center}
nav .menu .sub-toggle{background:none;border:0;padding:0;margin:0 0 0 3px;width:20px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mut);border-radius:var(--radius-sm)}
nav .menu .sub-toggle::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
nav .menu .sub-toggle[aria-expanded="true"]::before{transform:translateY(2px) rotate(-135deg)}
nav .menu .sub-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
nav .menu .nav-sub a{border-bottom:0;padding:0}
nav .menu a.nav-cta{padding:5px 15px;line-height:1.5;font-size:inherit}
.page-main [id]{scroll-margin-top:100px}
@media (min-width:981px){
  nav .menu .nav-sub{position:absolute;top:100%;left:50%;min-width:184px;padding-top:12px;transform:translate(-50%,6px);
    opacity:0;visibility:hidden;pointer-events:none;z-index:5;
    transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
  nav .menu .nav-sub::before{content:"";position:absolute;left:50%;top:6px;width:12px;height:12px;background:var(--surface);transform:translateX(-50%) rotate(45deg);box-shadow:-2px -2px 4px rgba(20,40,60,.05)}
  nav .menu .nav-sub>a{display:block;position:relative;background:var(--surface);padding:10px 20px;font-size:.98rem;color:var(--ink);white-space:nowrap}
  nav .menu .nav-sub>a:first-of-type{padding-top:14px;border-radius:var(--radius-md) var(--radius-md) 0 0}
  nav .menu .nav-sub>a:last-of-type{padding-bottom:14px;border-radius:0 0 var(--radius-md) var(--radius-md)}
  nav .menu .nav-sub>a:hover,nav .menu .nav-sub>a:focus-visible{background:#eef6fc;color:var(--accent);outline-offset:-2px}
  nav .menu .nav-sub{filter:drop-shadow(0 10px 22px rgba(20,40,60,.16))}
  nav .menu .has-sub.is-open>.nav-sub{
    opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
    transition:opacity .16s ease,transform .16s ease,visibility 0s}
}
@media (max-width:980px){
  nav .menu{justify-content:safe center;align-items:stretch}
  nav .menu .mi{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid rgba(20,40,60,.1)}
  nav .menu .mi>a.mi-top{border-bottom:0}
  nav .menu .sub-toggle{width:44px;height:44px;margin:0 -10px 0 0;color:var(--ink)}
  nav .menu .sub-toggle::before{width:9px;height:9px}
  nav .menu .nav-sub{display:none;grid-column:1/-1;padding:0 0 10px 14px;flex-direction:column}
  nav .menu .has-sub.open>.nav-sub{display:flex}
  nav .menu .nav-sub>a{padding:10px 0;font-size:.98rem;color:var(--mut);border-bottom:0}
  nav .menu .nav-sub>a:hover,nav .menu .nav-sub>a:focus-visible{color:var(--accent)}
  nav .menu a.nav-cta{padding:15px 0;line-height:inherit}
  .page-main [id]{scroll-margin-top:80px}
}

/* ===== v1.8.10 標籤一詞一顆（2026-10-17 俊豪：「魔術師 特技 這種標籤 都要單獨一個標籤」） =====
   首頁節目卡 .tags 包多顆 .tag；內頁頁首小標籤 .ip-pagekickers 包多顆 .ip-pagekicker（mu-plugin page-kicker-r3 輸出）。 */
.show-card .tags{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;margin-top:auto}
.show-card .tags .tag{margin-top:0}
.page-main .ip-pagekickers{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0}
.page-main .ip-pagekickers .ip-pagekicker{margin:0}

/* ===== v1.8.11 文章頁新標記（2026-10-17 近期演出預告文章） =====
   p.post-caption：.post-gallery 下方的一行圖說（主圖 figcaption、.post-body h3 已有樣式）。 */
.post-caption{font-size:.85rem;color:var(--mut);line-height:1.7;margin:-20px 0 30px}
/* v1.8.11 鍵盤從導覽列子項跳到同頁區塊時，焦點移到該區塊（tabindex=-1），不畫整區外框 */
.page-main [tabindex="-1"]:focus{outline:none}

/* =====================================================================
   v1.9.0 首頁 B 版（2026-10-17，美編）
   全部樣式限定在 .hb-* 類別下，不影響內頁；舊首頁的 .hero／.shows／.gallery／.cast-band 等規則保留未刪，
   首頁 B 版的 HTML 已不再使用它們（之後要清可另案）。
   字：標題用內文黑體（PingFang TC／Noto Sans TC）加粗，手寫體只留口號與觀眾回饋兩處。
   色：底色沿用 --paper／白色交替，主色 --ink，LINE 按鈕用加深的 LINE 綠（白字對比 4.8:1，原 #06c755 只有 2.0:1）。
   ===================================================================== */
:root{--hb-line:#068439;--hb-line-hover:#05702f;--hb-hair:rgba(20,40,60,.1);--hb-body:#33475a;--hb-ease:cubic-bezier(.16,1,.3,1);--hb-gap:clamp(20px,5vw,48px)}
.hb-wrap{max-width:1200px;margin:0 auto;padding-inline:var(--hb-gap)}
section.hb-venues,section.hb-shows,section.hb-gallery,section.hb-voices,section.hb-services,section.hb-about,section.hb-closing{padding:clamp(64px,8vw,112px) 0}
.hb-venues,.hb-gallery,.hb-services,.hb-closing{background:var(--surface)}
.hb-shows,.hb-voices,.hb-about{background:var(--paper)}
.hb-h2{font-family:inherit;font-weight:700;font-size:clamp(1.55rem,2.5vw,2.15rem);line-height:1.3;letter-spacing:.03em;color:var(--ink);margin:0 0 12px;text-wrap:balance}
.hb-h3{font-size:.85rem;font-weight:600;letter-spacing:.1em;color:var(--mut);margin:0 0 6px}
.hb-sub,.hb-lead{color:var(--mut);font-size:1rem;line-height:1.8;max-width:36em;text-wrap:pretty}
.hb-sec-head{margin-bottom:clamp(28px,4vw,44px)}
.hb-more{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;font-size:.92rem;text-decoration:none;letter-spacing:.03em;border-bottom:1.5px solid transparent;transition:border-color .2s,color .2s}
.hb-more:hover{border-bottom-color:var(--ink)}
[class*="hb-"] a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* 按鈕 */
.hb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:var(--radius-pill);font-weight:700;font-size:.92rem;letter-spacing:.05em;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s var(--hb-ease)}
.hb-btn:active{transform:scale(.98)}
.hb-btn-line{background:var(--hb-line);color:#fff}
.hb-btn-line:hover{background:var(--hb-line-hover);color:#fff}
.hb-btn-ink{background:var(--ink);color:var(--paper)}
.hb-btn-ink:hover{background:#0b1a29;color:#fff}
.hb-btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.hb-btn-ghost:hover{background:var(--ink);color:var(--paper)}
.hb-btn-ghost-light{border:1.5px solid rgba(255,255,255,.55);color:var(--paper);background:transparent}
.hb-btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

/* ---------- 1. 首屏：口號＋兩扇門 ---------- */
.hb-hero{position:relative;background:var(--paper);padding:clamp(100px,10vw,124px) 0 clamp(56px,6vw,84px)}
.hb-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);grid-template-areas:"txt media" "doors media";column-gap:clamp(32px,4.5vw,64px);row-gap:28px;align-items:start}
.hb-hero-txt{grid-area:txt;padding-top:clamp(8px,2vw,28px)}
.hb-kicker{font-family:inherit;font-weight:500;font-size:.9rem;line-height:1.6;letter-spacing:.14em;color:var(--mut);margin:0 0 14px}
.hb-slogan{font-family:var(--hand);font-weight:400;font-size:clamp(2.3rem,4.3vw,3.55rem);line-height:1.22;color:var(--ink);margin:0 0 18px;text-wrap:balance}
.hb-honor{display:flex;flex-wrap:wrap;gap:0 .5em;color:var(--mut);font-size:.95rem;line-height:1.7;margin:0}
.hb-honor .nb{white-space:nowrap}
.hb-hero-media{grid-area:media;align-self:center;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.hb-hm{margin:0;overflow:hidden;border-radius:18px;background:var(--media-cool)}
.hb-hm picture{display:block;width:100%;height:100%}
.hb-hm img{display:block;width:100%;height:100%;object-fit:cover}
.hb-hm-main{grid-column:1/-1;aspect-ratio:4/3;border-radius:24px}
.hb-hm-main img{object-position:50% 45%}
.hb-hm-s1,.hb-hm-s2{aspect-ratio:4/3}
.hb-hm-s2 img{object-position:50% 40%}
.hb-doors{grid-area:doors;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.hb-door{display:flex;flex-direction:column;gap:6px;border-radius:20px;padding:22px 22px 20px;min-width:0}
.hb-door-fam{background:#fff;border:1px solid var(--hb-hair);box-shadow:0 1px 2px rgba(20,40,60,.04),0 18px 36px -20px rgba(20,40,60,.28)}
.hb-door-biz{background:var(--ink);color:var(--paper)}
.hb-door-who{font-size:.78rem;letter-spacing:.14em;opacity:.72;margin:0}
.hb-door-h{font-family:inherit;font-size:1.28rem;font-weight:700;letter-spacing:.04em;line-height:1.35;margin:0 0 2px;color:inherit}
.hb-door-desc{font-size:.86rem;line-height:1.6;margin:0;opacity:.82}
.hb-door-state{margin:2px 0 0}
.hb-chip{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.08em;line-height:1;padding:6px 10px;border-radius:var(--radius-pill);background:var(--sun2);color:var(--ink)}
.hb-chip-on{background:var(--ink);color:var(--paper)}
.hb-door-list{list-style:none;margin:6px 0 14px;padding:0}
.hb-door-list li{border-top:1px solid var(--hb-hair)}
.hb-door-biz .hb-door-list li{border-top-color:rgba(255,255,255,.14)}
.hb-door-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:6px 0;color:inherit;text-decoration:none;font-size:.92rem;font-weight:500}
.hb-door-list a::after{content:"→";opacity:.45;transition:transform .25s var(--hb-ease),opacity .2s;flex:none}
.hb-door-list a:hover::after{transform:translateX(3px);opacity:1}
.hb-door-events a{align-items:center;padding:10px 0}
.hb-ev-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hb-ev-t b{font-weight:700;font-size:.93rem;line-height:1.45}
.hb-ev-t small{font-size:.8rem;line-height:1.6;color:var(--mut);font-weight:400}
.hb-door .hb-btn{margin-top:auto;align-self:flex-start}

/* ---------- 2. 演過的地方 ---------- */
.hb-venues{border-top:1px solid rgba(20,40,60,.06)}
.hb-venues-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.hb-venues-head .hb-lead{margin-bottom:10px}
.hb-names{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
.hb-names:last-child{margin-bottom:0}
.hb-names-corp{grid-template-columns:repeat(4,minmax(0,1fr))}
.hb-names li{border-top:1px solid var(--hb-hair)}
.hb-names a{display:flex;align-items:center;min-height:52px;padding:8px 0;color:var(--ink);font-size:.97rem;font-weight:500;line-height:1.45;text-decoration:none;transition:color .2s}
.hb-names a:hover{color:var(--accent)}

/* ---------- 3. 節目：1 大 4 小 ---------- */
.hb-show-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:32px 24px}
.hb-show{display:flex;flex-direction:column;color:var(--ink);text-decoration:none;min-width:0}
.hb-show-lead{grid-row:1/3}
.hb-show-img{overflow:hidden;border-radius:16px;aspect-ratio:3/2;background:var(--media-cool)}
.hb-show-lead .hb-show-img{aspect-ratio:auto;flex:1 1 0;min-height:320px;border-radius:22px}
.hb-show-img picture{display:block;width:100%;height:100%}
.hb-show-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--hb-ease)}
.hb-show:hover .hb-show-img img{transform:scale(1.035)}
.hb-show-body{padding-top:14px;display:flex;flex-direction:column;gap:6px}
.hb-show-body h3{font-size:1.08rem;font-weight:700;letter-spacing:.03em;line-height:1.4;margin:0}
.hb-show-lead .hb-show-body h3{font-size:1.5rem}
.hb-show-body p{font-size:.9rem;line-height:1.7;color:var(--mut);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hb-show-lead .hb-show-body p{font-size:.98rem;-webkit-line-clamp:3;max-width:34em}
.hb-tags{display:flex;flex-wrap:wrap;gap:6px}
.hb-tag{font-size:.74rem;letter-spacing:.06em;padding:3px 10px;border-radius:var(--radius-pill);border:1px solid var(--hb-hair);color:var(--mut)}
.hb-show-more{font-size:.86rem;font-weight:700;letter-spacing:.04em;margin-top:2px}
.hb-show-more{transition:transform .25s var(--hb-ease)}
.hb-show:hover .hb-show-more{transform:translateX(3px)}

/* ---------- 4. 劇照：16 格，大小交錯 ---------- */
.hb-gal{--r:clamp(110px,10.8vw,150px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:var(--r) var(--r) calc(var(--r)*1.4) var(--r) var(--r) calc(var(--r)*1.4);gap:12px}
.hg-shot{position:relative;display:block;overflow:hidden;border-radius:14px;background:var(--media-cool);cursor:zoom-in}
.hg-shot picture{display:block;width:100%;height:100%}
.hg-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--hb-ease)}
.hg-shot:hover img{transform:scale(1.04)}
.hg-shot.g1{grid-column:1/7;grid-row:1/3}
.hg-shot.g2{grid-column:7/10;grid-row:1}
.hg-shot.g3{grid-column:10/13;grid-row:1}
.hg-shot.g4{grid-column:7/10;grid-row:2}
.hg-shot.g5{grid-column:10/13;grid-row:2}
.hg-shot.g6{grid-column:1/5;grid-row:3}
.hg-shot.g7{grid-column:5/9;grid-row:3}
.hg-shot.g8{grid-column:9/13;grid-row:3}
.hg-shot.g9{grid-column:1/4;grid-row:4}
.hg-shot.g10{grid-column:4/7;grid-row:4}
.hg-shot.g11{grid-column:7/13;grid-row:4/6}
.hg-shot.g12{grid-column:1/4;grid-row:5}
.hg-shot.g13{grid-column:4/7;grid-row:5}
.hg-shot.g14{grid-column:1/5;grid-row:6}
.hg-shot.g15{grid-column:5/9;grid-row:6}
.hg-shot.g16{grid-column:9/13;grid-row:6}
.hg-shot.g2 img{object-position:50% 30%}
.hg-shot.g6 img{object-position:50% 40%}
.hg-shot.g8 img{object-position:60% 35%}
.hg-shot.g14 img{object-position:40% 45%}
.hg-shot.g16 img{object-position:45% 45%}

/* ---------- 5. 觀眾回饋 ---------- */
.hb-voices-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.hb-stats{display:flex;gap:clamp(24px,4vw,48px);margin:26px 0 12px}
.hb-stats p{margin:0;display:flex;flex-direction:column}
.hb-stats b{font-size:clamp(2.4rem,4.2vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.hb-stats span{font-size:.9rem;color:var(--mut);margin-top:8px}
.hb-note{font-size:.8rem;line-height:1.7;color:var(--mut);max-width:30em;margin:0}
.hb-quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hb-quote{margin:0;background:#fff;border:1px solid var(--hb-hair);border-radius:18px;padding:24px 24px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.hb-quote blockquote{margin:0;font-family:var(--hand);font-size:1.12rem;line-height:1.7;color:var(--ink)}
.hb-quote figcaption{font-size:.8rem;color:var(--mut);letter-spacing:.04em}

/* ---------- 6. 邀請我們演出 ---------- */
.hb-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hb-svc{display:flex;flex-direction:column;background:var(--paper);border:1px solid rgba(20,40,60,.07);border-radius:20px;padding:28px 28px 24px}
.hb-svc h3{font-size:1.2rem;font-weight:700;letter-spacing:.04em;margin:0 0 10px}
.hb-svc p{font-size:.95rem;line-height:1.85;color:var(--hb-body);margin:0 0 20px}
.hb-svc p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.hb-svc p a:hover{text-decoration-color:var(--ink)}
.hb-svc-links{display:flex;flex-wrap:wrap;gap:0 20px;margin:-8px 0 18px}
.hb-svc>.hb-btn{margin-top:auto;align-self:flex-start}
.hb-contact{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;background:var(--sun2);border-radius:20px;padding:24px 28px}
.hb-contact p{margin:0;max-width:40em;font-size:.98rem;line-height:1.8;color:var(--ink)}
.hb-contact-row{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- 7. 關於 ---------- */
.hb-about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.hb-about-img{margin:0;overflow:hidden;border-radius:24px;aspect-ratio:3/2;background:var(--media-cool)}
.hb-about-img picture{display:block;width:100%;height:100%}
.hb-about-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 30%}
.hb-about-sub{font-size:.85rem;letter-spacing:.12em;color:var(--mut);margin:0 0 10px}
.hb-about-txt>p:not(.hb-about-sub){font-size:1rem;line-height:1.9;color:var(--hb-body);margin:0 0 14px;max-width:36em}
.hb-about-txt strong{color:var(--ink)}
.hb-about-stats{display:flex;gap:40px;margin-top:22px;padding-top:20px;border-top:1px solid var(--hb-hair)}
.hb-about-stats p{margin:0;display:flex;align-items:baseline;gap:8px}
.hb-about-stats b{font-size:2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.hb-about-stats span{font-size:.9rem;color:var(--mut)}

/* ---------- 8. 收尾雙入口 ---------- */
.hb-closing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hb-pane{display:flex;flex-direction:column;gap:10px;border-radius:24px;padding:36px 36px 32px;min-height:220px}
.hb-pane-fam{background:var(--sun2);color:var(--ink)}
.hb-pane-biz{background:var(--ink);color:var(--paper)}
.hb-pane-h{font-family:inherit;font-size:1.5rem;font-weight:700;letter-spacing:.04em;margin:0;color:inherit}
.hb-pane p{margin:0 0 10px;font-size:.98rem;line-height:1.75;opacity:.88}
.hb-pane-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}

/* ---------- 進場動畫：只有 JS 在且使用者沒關動畫時才藏起來 ---------- */
@media (prefers-reduced-motion:no-preference){
  html.hb-js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--hb-ease),transform .8s var(--hb-ease);transition-delay:var(--hb-d,0s)}
  html.hb-js [data-reveal].is-in{opacity:1;transform:none}
  html.hb-js .hg-shot{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .7s var(--hb-ease),transform .7s var(--hb-ease);transition-delay:var(--hb-d,0s)}
  html.hb-js .hg-shot.is-in{opacity:1;transform:none}
  .hb-hero-txt,.hb-doors{animation:hb-rise .9s var(--hb-ease) both}
  .hb-doors{animation-delay:.12s}
  .hb-hm-s1,.hb-hm-s2{animation:hb-rise .9s var(--hb-ease) .2s both}
}
@keyframes hb-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 平板 ---------- */
@media (max-width:1100px){
  .hb-names{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-names-corp{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .hb-hero{padding-top:92px}
  .hb-hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "media" "doors";row-gap:22px}
  .hb-hero-media{grid-template-columns:minmax(0,1fr)}
  .hb-hm-main{aspect-ratio:16/10;border-radius:20px}
  .hb-hm-s1,.hb-hm-s2{display:none}
  .hb-venues-grid,.hb-voices-grid,.hb-about-grid{grid-template-columns:minmax(0,1fr)}
}
/* ---------- 手機（390 優先） ---------- */
@media (max-width:768px){
  section.hb-venues,section.hb-shows,section.hb-gallery,section.hb-voices,section.hb-services,section.hb-about,section.hb-closing{padding:44px 0}
  .hb-sec-head{margin-bottom:22px}
  .hb-slogan{font-size:clamp(2.1rem,10vw,2.6rem);margin-bottom:12px}
  .hb-honor{font-size:.9rem}
  .hb-doors{grid-template-columns:minmax(0,1fr);gap:12px}
  .hb-door{padding:20px 20px 18px}
  /* 橫滑共用：滿版出血、吸附、下一張露一角 */
  .hb-names,.hb-show-grid,.hb-quotes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--hb-gap)*-1);padding-inline:var(--hb-gap);scroll-padding-inline:var(--hb-gap)}
  .hb-names::-webkit-scrollbar,.hb-show-grid::-webkit-scrollbar,.hb-quotes::-webkit-scrollbar{display:none}
  .hb-names{gap:8px;margin-bottom:22px;padding-bottom:2px}
  .hb-names li{border:0;flex:none;scroll-snap-align:start}
  .hb-names a{min-height:44px;padding:0 16px;border:1px solid var(--hb-hair);border-radius:var(--radius-pill);background:var(--paper);white-space:nowrap;font-size:.92rem}
  .hb-show-grid{gap:16px;padding-bottom:4px}
  .hb-show,.hb-show-lead{flex:0 0 80%;scroll-snap-align:start}
  .hb-show-lead .hb-show-img{flex:none;min-height:0;aspect-ratio:3/2;border-radius:16px}
  .hb-show-lead .hb-show-body h3{font-size:1.08rem}
  .hb-show-lead .hb-show-body p{font-size:.9rem;-webkit-line-clamp:2}
  .hb-gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;grid-auto-flow:row dense;gap:8px}
  .hg-shot,.hg-shot[class*=" g"]{grid-column:auto;grid-row:auto;aspect-ratio:3/2;border-radius:10px}
  .hg-shot.g1,.hg-shot.g11{grid-column:1/-1;aspect-ratio:16/9}
  .hb-stats{margin:18px 0 8px}
  .hb-quotes{gap:12px;padding-bottom:4px;margin-top:18px}
  .hb-quote{flex:0 0 78%;scroll-snap-align:start;padding:20px}
  .hb-quote blockquote{font-size:1.05rem}
  .hb-svc-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .hb-svc{padding:22px 20px 18px}
  .hb-svc p{font-size:.93rem;margin-bottom:14px}
  .hb-svc-links{margin:-6px 0 12px}
  /* 手機版底部固定列（m-bar）已有 LINE／電話，服務區聯絡面板在手機收起，省約 220px 頁長 */
  .hb-contact{display:none}
  .hb-about-stats{gap:28px}
  .hb-closing-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .hb-pane{padding:26px 22px 22px;min-height:0}
  .hb-pane-h{font-size:1.3rem}
}
.hb-h2 .nb{display:inline-block}

/* v1.9.1 導覽列加「魔幻藝術節」變 7 項：981–1099 寬項目間距 28→16 才放得下；logo 不被 flex 壓扁 */
@media (min-width:981px){nav .logo{flex-shrink:0}}
@media (min-width:981px) and (max-width:1099px){nav .menu{gap:16px}}

/* ===== v1.9.2 手機轉換動線修正（a-gap-1，2026-10-18）===== */
/* 首頁主辦單位門的 #svc-1～4：點了之後標題停在固定導覽列下方，不再被蓋住（內頁 .page-main [id] 早就有，首頁沒有） */
.hb-svc[id]{scroll-margin-top:100px}
@media(max-width:980px){.hb-svc[id]{scroll-margin-top:78px}}
/* 選單抽屜、劇照燈箱打開時鎖住背景：html,body{overflow-x:hidden} 讓 body 的 overflow:hidden 傳不到視窗，背景照樣捲 */
html:has(body.nav-open),html:has(.lb.on){overflow:hidden}
/* 燈箱上一張／下一張：原本 10% 白底疊在照片上幾乎看不見 */
.lb .lb-p,.lb .lb-n2{background:rgba(8,16,28,.62);box-shadow:0 0 0 2px rgba(255,255,255,.75)}
.lb .lb-p:hover,.lb .lb-n2:hover{background:rgba(8,16,28,.85)}

/* ===== v1.9.2 主題組（2026-10-18 健檢 D11／X2／X3／X4／Q7）===== */
/* D11 LINE 綠改加深的 #068439（白字對比約 4.8:1，原 #06c755 只有約 2.2:1）：手機底部列、頁尾、桌機右下側標；首頁 B 版按鈕本來就是這個色 */
:root{--line-green:#068439}
.ft2 .ft-contact a.ft-line{background:#068439}
.side-tab{background:#068439;box-shadow:0 10px 26px rgba(6,132,57,.3)}
.side-tab:hover{background:#05702f;color:#fff}
/* X4 演出紀錄卡片鍵盤焦點：.hub-card.has-post{outline:0} 蓋掉了全站 a:focus-visible 外框 */
.hub-card.has-post:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Q7 首頁換圖後的取景 */
.hb-show-lead .hb-show-img img{object-position:62% 50%}
.hg-shot.g8 img{object-position:60% 30%}
.hg-shot.g16 img{object-position:50% 50%}
/* X2 頁尾隱私權政策連結 */
.ft2 .ft-bottom .ft-sep{margin:0 6px;opacity:.6}
.ft2 .ft-bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* X2 追蹤告知列：不擋內容（不是彈窗、不鎖捲動），按「知道了」後記住，之後不再出現；沒有 JS 時不顯示（沒有 JS 也不會跑追蹤碼） */
.trk-note{position:fixed;left:16px;bottom:16px;z-index:84;max-width:min(440px,calc(100vw - 32px));display:flex;gap:12px;align-items:center;background:var(--surface,#fff);color:var(--ink);font-size:.86rem;line-height:1.65;padding:12px 12px 12px 16px;border-radius:14px;border:1px solid rgba(20,40,60,.08);box-shadow:0 8px 28px rgba(20,40,60,.18)}
.trk-note[hidden]{display:none}
.trk-note p{margin:0}
.trk-note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.trk-note button{flex:none;min-height:40px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:700;padding:8px 16px;cursor:pointer}
.trk-note button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:768px){.trk-note{left:10px;right:10px;max-width:none;font-size:.8rem;padding:10px 10px 10px 14px;bottom:calc(10px + env(safe-area-inset-bottom))}}
body.nav-open .trk-note{display:none}
/* X3 404 頁 */
.nf{max-width:760px;margin:0 auto;padding:clamp(120px,15vw,170px) 6vw clamp(64px,9vw,110px);text-align:center}
.nf-k{margin:0 0 6px;font-size:.85rem;letter-spacing:.3em;color:var(--accent);font-weight:700}
.nf-h{margin:0 0 14px;font-family:var(--hand),inherit;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.3;color:var(--ink)}
.nf-p{margin:0 auto 28px;max-width:30em;font-size:1rem;line-height:1.9;color:var(--hb-body,#33475a)}
.nf-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.nf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:150px;padding:10px 22px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none;letter-spacing:.06em}
.nf-btn:hover{opacity:.88}
.nf-btn.nf-line{background:#068439}
.nf-home{margin:26px 0 0}
.nf-home a{color:var(--accent)}
@media(max-width:600px){.nf-row{flex-direction:column;align-items:stretch}.nf-btn{width:100%}}

/* ============================================================
   v1.9.3（2026-10-18，俊豪 Q8 核可）主色改劇團 logo 彩鴿左翼的玫瑰紅 #b8365a
   白底對比 5.66:1、粉藍底 4.51:1（WCAG AA）。按鈕收成三種：主色實心／LINE 綠／外框。
   設計與對照圖：deploy-20261018/mockup/（graphic-designer）
   ============================================================ */
:root{--magic:#b8365a;--brand:#b8365a;--brand-hover:#982b4b}
.btn{background:var(--magic);box-shadow:0 8px 20px rgba(184,54,90,.22)}
.btn:hover{background:var(--brand-hover)}
.ip-cta .btn{background:var(--magic)}
.pg-cta{background:var(--magic)}
.pg-cta:hover,.pg-cta:focus-visible{background:var(--brand-hover);box-shadow:0 10px 24px rgba(184,54,90,.3)}
.page-main .pg-link:visited{color:var(--magic)}
.pg-tag{color:var(--magic)}
.pg-story .lead{border-left-color:var(--magic)}
a.btn[href*="lin.ee"],a.btn[href*="line.me"]{background:#068439;box-shadow:none}
.hb-btn-ink{background:var(--magic)}
.hb-btn-ink:hover{background:var(--brand-hover)}
.hb-chip-on{background:var(--magic)}
nav .menu a.nav-cta{background:var(--magic)}
nav .menu a.nav-cta:hover,nav .menu a.nav-cta:focus-visible{background:var(--brand-hover)}
@media(max-width:980px){nav .menu a.nav-cta,nav .menu a.nav-cta:hover{background:none}}
.hb-stats b,.hb-about-stats b{color:var(--magic)}
.hb-btn-ink~.hb-btn-line{background:transparent;color:#05702f;box-shadow:inset 0 0 0 1.5px #05702f}
.hb-btn-ink~.hb-btn-line:hover{background:#05702f;color:#fff}

/* ============================================================
   v1.9.4（2026-10-19）官網主辦單位版：俊豪 2026-10-19 核可示意 v4
   來源：organizer-mockup-20261018/tools/v4_shell.py、build_invite.py、home_mock.py（示意的 <style> 併進來）
   範圍：全部是新 class（iv-*、hb-upnext*、hb-invite、hb-v4），或掛在新 class 底下；
         首頁版面規則只掛在新首頁模板才有的 .hb-v4 底下，舊首頁模板（段 A 上線到段 B 之間）不會命中任何一條。
   !important：只有一條（.post-cta 的 Email 鈕字色），因為舊規則 .post-cta .btn{color:var(--paper) !important} 只能用 !important 蓋。
   ============================================================ */
/* ---- 1. 內文兩顆按鈕：LINE 詢問演出邀約（a.btn[href*="lin.ee"] 本來就是 LINE 綠）＋ Email 詢問（外框深藍字） */
.iv-btns{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0}
.page-main .iv-btns .btn,.post-cta .iv-btns .btn,.ip-cta .iv-btns .btn{margin:0;padding:14px 30px;letter-spacing:.08em}
a.btn.iv-mail{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);margin-left:0}
a.btn.iv-mail:hover,a.btn.iv-mail:focus-visible{background:rgba(20,40,60,.06);color:var(--ink)}
.page-main a.btn.iv-mail,.page-main a.btn.iv-mail:visited,.page-main a.btn.iv-mail:hover{color:var(--ink)}
.post-cta a.btn.iv-mail,.post-cta a.btn.iv-mail:visited,.post-cta a.btn.iv-mail:hover{color:var(--ink) !important}
.ip-cta .iv-btns{justify-content:center}
/* 小卡用小一號（/節目介紹/ 其他節目卡、校園卡 class="iv-btns iv-sm"；數值照 pages/NEEDS-CSS.md） */
.page-main .iv-btns.iv-sm{gap:8px;margin-top:16px}
.page-main .iv-btns.iv-sm .btn{padding:10px 16px;font-size:.88rem;letter-spacing:.04em}
@media(max-width:700px){.iv-btns .btn{flex:1 1 100%;text-align:center}}

/* ---- 1b. 各頁按鈕位置（pages/NEEDS-CSS.md 第二節；class 名稱照 pages 組，不用 !important） */
.page-main p.iv-tel{margin:12px 0 0;font-size:.95rem;color:var(--mut)}
.pg-mini .pg-card-links .iv-btns{flex:1 1 100%}
.pg-mini .pg-card-links .iv-btns+.pg-link{margin-top:12px}
.page-main .pg-act.iv-btns{margin-top:24px}
.page-main a.pg-link.iv-sched{display:inline-block;margin-top:14px}
.ip-hero-cta .iv-btns{margin:0}
/* 手機：舊規則 .page-main .ip-hero-cta .btn{flex:1 1 0;padding:13px 10px}（0,3,0）會把 /尾牙魔術表演/ 頁首兩顆擠成並排、LINE 鈕斷 2～3 行；
   這裡用 0,4,0 讓 .iv-btns 佔滿一列、兩顆各自滿寬上下排列（總體審查必修，不用 !important） */
@media(max-width:700px){.page-main .ip-hero-cta .iv-btns{flex:1 1 100%}.page-main .ip-hero-cta .iv-btns .btn{flex:1 1 100%;padding:13px 10px}}
.page-main .ip-lead+.iv-btns{margin:0 0 36px}
.page-main .ip-cta p.iv-links{margin:14px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px}
.page-main .iv-links a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--sun);text-underline-offset:4px}
.page-main a.iv-kit-n{text-decoration:underline;text-decoration-color:var(--sun);text-underline-offset:4px}
.page-main a.iv-kit-n:hover{color:var(--accent)}
/* /商演案例/ 深底收尾 .case-cta：舊規則 .cases .case-cta .btn{background:var(--sun)}（0,3,0）會把兩顆都蓋成天藍，這裡用 0,4,1 蓋回；Email 鈕比照首頁深底 hb-btn-ghost-light */
.cases .case-cta .iv-btns{justify-content:center}
.cases .case-cta a.btn[href*="lin.ee"]{background:#068439;color:#fff}
.cases .case-cta a.btn[href*="lin.ee"]:hover{background:#05702f;color:#fff}
.page-main .case-cta a.btn.iv-mail,.page-main .case-cta a.btn.iv-mail:visited,.page-main .case-cta a.btn.iv-mail:hover{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.page-main .case-cta a.btn.iv-mail:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px #fff}

/* ---- 2. 全站殼：頁尾電話改一般文字（樣式跟同欄連結一致，只是不能點） */
.ft2 .ft-contact .iv-ft-tel{display:block;font-size:.95rem;padding:5px 0;opacity:.88;overflow-wrap:anywhere}
/* 手機底部列右鍵〔Email 詢問〕：class 保留 m-tel（沿用原本深色鈕樣式），另加 m-mail 標記，不需要新規則 */

/* ---- 3. 聯絡我們頁（page 11）：.iv-top 頂部（開場句＋兩顆按鈕，示意沒有額外樣式）、.iv-ask 詢問清單、節目表、技術需求、合作單位、資料索取 */
.page-main .iv-table-wrap{background:var(--surface);border-radius:var(--radius-md);box-shadow:0 6px 20px rgba(20,40,60,.07);overflow:hidden}
.page-main table.iv-table{margin:0;border-collapse:collapse;width:100%;font-size:.97rem}
.page-main .iv-table th,.page-main .iv-table td{border:0;border-bottom:1px solid rgba(20,40,60,.08);padding:13px 18px;text-align:left;vertical-align:top;line-height:1.6}
.page-main .iv-table th{background:var(--sun2);color:var(--ink);font-weight:700;font-size:.9rem;letter-spacing:.06em}
.page-main .iv-table tbody tr:last-child td{border-bottom:0}
.page-main .iv-table td:first-child{font-weight:700;color:var(--ink)}
.page-main .iv-table td{color:var(--mut)}
.page-main .iv-table td:nth-child(2),.page-main .iv-table td:nth-child(3){white-space:nowrap}
.page-main .ip-card .iv-k,.page-main .iv-k{font-size:.86rem;font-weight:700;letter-spacing:.1em;color:var(--magic);margin:10px 0 6px}
.page-main .iv-list{margin:0 0 12px;padding-left:1.2em}
.page-main .iv-list li{font-size:.95rem;line-height:1.8;color:var(--mut);margin:0 0 6px}
.page-main .ip-qa li>.iv-list{margin-top:8px}
.page-main .ip-qa li>.iv-list li{background:none;box-shadow:none;padding:0;margin:0 0 6px;border-radius:0}
.page-main .iv-facts{margin:12px 0 14px}
.page-main .iv-facts b{font-size:1.6rem}
/* 示意原寫 .page-main .ip-tl .ip-when，會連 /歷年創作/（page 7）一起改；限定在聯絡我們頁頂部 .iv-top 之後的區塊 */
.page-main .iv-top~.ip-sec .ip-tl .ip-when{font-size:.92rem}
.ip-contact.iv-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ip-contact.iv-one{grid-template-columns:minmax(0,1fr);max-width:460px}
/* 聯絡方式卡片的電話：一般文字（div，不是連結），外觀跟其他卡片一致 */
.ip-contact div.ip-ct{display:block;background:var(--surface);border-radius:var(--radius-md);padding:20px 22px;box-shadow:0 4px 14px rgba(20,40,60,.06)}
.page-main .iv-ask{background:var(--surface);border-radius:var(--radius-md);padding:18px 22px 6px;margin:16px 0 0;box-shadow:0 4px 14px rgba(20,40,60,.06)}
.page-main .iv-ask .iv-k{margin-top:0}
.ip-hero-cta.iv-end{margin:24px 0 0}
.page-main .iv-hero{aspect-ratio:21/9}
.page-main .iv-hero img{height:100%;object-fit:cover;object-position:center 45%}
.page-main .iv-wide{margin:0 0 22px}
.page-main .iv-wide .ip-ph{aspect-ratio:21/8}
.page-main .iv-wide .ip-ph img{object-position:center 35%}
.page-main .iv-wide .iv-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.page-main .iv-wide .iv-list li{font-size:.97rem;color:var(--mut)}
.page-main .iv-wide .iv-k{margin-top:4px}
.ip-grid.iv-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-main .ip-note.iv-adj{margin:12px 2px 0}
.page-main ul.iv-kit{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.page-main ul.iv-kit li{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface);border-radius:var(--radius-md);box-shadow:0 4px 14px rgba(20,40,60,.06);padding:14px 18px;margin:0}
.page-main .iv-kit-n{font-weight:700;color:var(--ink)}
.page-main .iv-kit-t{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--mut);border:1px solid rgba(20,40,60,.18);border-radius:4px;padding:2px 8px}
@media(min-width:701px) and (max-width:1100px){.ip-grid.iv-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .page-main .iv-table thead{display:none}
 .page-main .iv-table,.page-main .iv-table tbody,.page-main .iv-table tr,.page-main .iv-table td{display:block;width:100%}
 .page-main .iv-table tr{padding:12px 16px;border-bottom:1px solid rgba(20,40,60,.08)}
 .page-main .iv-table tbody tr:last-child{border-bottom:0}
 .page-main .iv-table td,.page-main .iv-table td:nth-child(2),.page-main .iv-table td:nth-child(3){border:0;padding:2px 0;white-space:normal}
 .page-main .iv-table td:first-child{font-size:1.02rem;margin-bottom:2px}
 .page-main .iv-table td:not(:first-child)::before{content:attr(data-l)"　";color:var(--ink);font-weight:600;font-size:.86rem}
 .ip-contact.iv-three{grid-template-columns:minmax(0,1fr)}
 .page-main .iv-wide .iv-cols,.ip-grid.iv-3{grid-template-columns:minmax(0,1fr)}
 .page-main .iv-wide .ip-ph{aspect-ratio:4/3}
 .page-main .iv-hero{aspect-ratio:4/3}
 .page-main .ip-hero-cta.iv-end .btn{flex:1 1 100%}
 .page-main .iv-facts{grid-template-columns:minmax(0,1fr)}
 .page-main ul.iv-kit{grid-template-columns:minmax(0,1fr)}
}

/* ---- 4. 首頁 v1.9.4 模板（段 B）：近期演出、演出邀約連結、收尾單欄。只在新模板的 .hb-v4 底下 */
.hb-upnext{grid-area:doors;align-self:start;max-width:500px;min-width:0}
.hb-upnext-h{margin:0 0 4px}
.hb-upnext-list{margin:0 0 2px;border-bottom:1px solid var(--hb-hair)}
.hb-upnext-list .hb-ev-t b{font-size:.95rem}
.hb-invite{margin-top:14px}
@media(min-width:901px){
 .hb-hero-grid.hb-v4>.hb-hero-txt{align-self:end}
 /* 沒有預告（近期演出整塊不輸出）：口號區跨兩列置中，首屏不留空洞 */
 .hb-hero-grid.hb-v4:not(:has(>.hb-upnext))>.hb-hero-txt{grid-row:1/span 2;align-self:center}
}
@media(max-width:900px){.hb-upnext{max-width:none;padding-top:6px}.hb-hero-grid.hb-v4:not(:has(>.hb-upnext)){grid-template-areas:"txt" "media"}}
@media(prefers-reduced-motion:no-preference){.hb-upnext{animation:hb-rise .9s var(--hb-ease) .12s both}}
.hb-closing-grid.hb-v4{grid-template-columns:minmax(0,1fr);max-width:760px;margin-left:auto;margin-right:auto}
.hb-closing-grid.hb-v4 .hb-pane-biz{align-items:center;text-align:center}
.hb-closing-grid.hb-v4 .hb-pane-row{justify-content:center}