/* =========================================================
   畢業歌徵選 · 主頁（2026 內頁）
   完全照 Figma 主頁_web 214:2 / tablet 222:2 / app 217:2 重建
   量測全部取自 Figma get_design_context（精確 px）。
   斷點：web ≥992 / tablet 768–991 / app（手機版）≤767
   ========================================================= */

:root{
  --ink:#2D2A36; --cream:#FBF7EA; --cream2:#F0E8C1; --wh:#F3F2F3;
  --yellow:#EDD23E; --panel:#E4C53A;
  --purple:#5E5CF7; --purple-b:#7371F8; --indigo:#5654BF;
  --red:#E64C3D; --red-o:#EC6641;
  --green:#23B257; --green-btn:#32EB7F;
  --cyan:#02CCFD; --pink:#FD83DB;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--yellow);
  font-family:"Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }

.page{ position:relative; min-height:100vh; overflow-x:clip; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* ---------- 返回按鈕（右上） ---------- */
/* 返回鈕疊在 KV 頭卡：絕對定位相對 .kv，back 左緣齊 SV Logo（left 83.6%-2px） */
.topbar{ position:absolute; top:1.03cqw; left:0; right:0; z-index:6;   /* 12px@1160 → 隨 KV 等比，窄版不壓到 Logo */
  display:flex; justify-content:flex-start; padding:0 20px; margin:0; }
.back{ margin-left:83.6%; margin-top:1.379cqw; }
/* 尺寸用 cqw（相對 .kv 內容寬 ~1160px）→ 隨斷點等比縮放，各斷點都如 web 待在頭卡 */
/* 尺寸用 cqw 但加 clamp 下限：tablet 容器變小時不再縮過頭（原本 tablet 太小） */
.back{ display:inline-flex; align-items:center; white-space:nowrap; gap:clamp(3px,0.405cqw,6px); background:rgba(34,2,106,.78);
  color:#fff; border-radius:999px; padding:clamp(4px,0.405cqw,6px) clamp(10px,1.103cqw,15px); font-size:clamp(12px,1.207cqw,15px); font-weight:700;
  transition:transform .12s; }   /* web 隨 KV 等比；下限 12px＝992 窄 web 剛好不溢出 running 右緣 */
.back:hover{ transform:translateY(-2px); }
.back .chev{ font-weight:700; font-size:clamp(15px,1.897cqw,22px); line-height:1; position:relative; top:-0.19cqw; }

/* ---------- KV Hero（向量疊層，照 Figma 309:4618 座標） ---------- */
.kv{ position:relative; max-width:1200px; margin:20px auto 0; padding:12px 20px 0; container-type:inline-size; }
.kv__stage{ position:relative; width:100%; aspect-ratio:1190 / 567; }
.kv__stage .kv-l{ position:absolute; display:block; }
/* 底層框架＋頭卡 */
.kv-running{ inset:0; width:100%; height:100%; transform:translateY(-2px); }
/* 右側樂團區塊：白框剪影＋樂團照＋活動大使綠條，三層共用同一 box（同座標空間，自動對齊） */
.kv-babox{ left:47.3%; top:19.8%; width:46.4%; }
/* 樂團照：放大 1.05x（齊中下），上移 9.05% 讓底部貼齊綠標頂端（BA_Title 在 DOM 後 → 綠標壓在照片上） */
.kv-ba-img{ transform:translateY(-9.05%) scale(1.05); transform-origin:center bottom; }
/* 綠標改用獨立長條 BA_Title-2.svg，精準定位對齊原綠標位置（含 2px 描邊外擴） */
.kv-ba-title{ left:47.688%; top:86.869%; width:45.47%; height:11.22%; object-fit:fill; }
/* 主標＋Logo */
.kv-title{ left:24%; top:33%; width:52%; }
.kv-svlogo{ left:calc(83.6% - 2px); top:11%; width:14.87%; aspect-ratio:167/29; cursor:pointer;
  transition:transform .12s;
  background:url(../images/figma/main/kv-svg/sv-logo.svg) center/contain no-repeat; }
/* hover / 點擊：白字改紅字（RE），並如 Button 微微上移 2px（base transform 為群組上移 -8px） */
.kv-svlogo:hover,.kv-svlogo:active{ background-image:url(../images/figma/main/kv-svg/sv-logo-red.svg); }
.kv-svlogo:hover{ transform:translateY(-10px); }
/* 裝飾 */
.kv-ball{ left:5%; top:30%; width:8%; }
.kv-star{ left:37%; top:84%; width:6.5%; }
.kv-star2{ left:73.5%; top:80%; width:9%; }
.kv-hat{ left:16%; top:30%; width:14%; }
.kv-smile{ left:68.6%; top:30%; width:10%; }
.kv-letter1{ left:85%; top:73%; width:10%; }
.kv-letter2{ left:85%; top:85.5%; width:10%; }
.kv-ya{ left:3%; top:60%; width:12%; }
.kv-audio{ left:85%; top:27%; width:10%; }
.kv-subtitle{ left:calc(3.6% - 8px); top:calc(4.2% - 1px); width:12%; transform:translateY(-8px); }
/* 除 Running／BA_IMG／BA白框／頭卡副標外，其餘 KV 元件整體上移 8px（ba-title/title/smile 有專屬值見下） */
.kv-svlogo, .kv-ball, .kv-star, .kv-star2, .kv-hat,
.kv-letter1, .kv-letter2, .kv-kb, .kv-headphone{ transform:translateY(-8px); }
/* Start 星星再上移 2px（累計 10px） */
.kv-star{ transform:translateY(-10px); }
/* 綠標貼合 Running：位移 -7px（比 Running -2px 再上移 5px），% 定位隨 stage 縮放 */
.kv-ba-title{ transform:translateY(-7px); }
/* 主標從群組 -8px 上移 2px → -10px */
.kv-title{ transform:translateY(-10px); }
/* Smile 笑臉星：右移 2px、下移 2px（Y -12→-10） */
.kv-smile{ transform:translate(2px,-10px); }

/* ---------- KV 進場動態（橫式＋直式）：框架先在 → 元件從四周跳進(.9s) → 依序抖動縮放
   用獨立屬性 translate/scale/rotate（與既有 transform 定位互不干擾） ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes kv-in{ from{ translate:var(--dx,0) var(--dy,0); opacity:0; } to{ translate:0 0; opacity:1; } }
  /* 抖動節奏同歷年頁 title-shake：scale .82 起跳＋左右搖擺＋過衝 1.05 落回（用獨立屬性版） */
  @keyframes kv-pop{   /* 溫柔版：幅度約砍半（位移±3px、轉角±1.2°、縮放 .92→過衝1.02） */
    0%  { translate:0 0;      rotate:0deg;    scale:.92; }
    12% { translate:-3px 1px; rotate:-1.2deg; scale:.95; }
    26% { translate:3px -1px; rotate:1.2deg;  scale:.99; }
    40% { translate:-2px 1px; rotate:-.8deg;  scale:1.02; }
    54% { translate:2px 0;    rotate:.8deg;   scale:1.005; }
    70% { translate:-1px 0;   rotate:-.4deg;  scale:1; }
    85% { translate:1px 0;    rotate:.3deg;   scale:1; }
    100%{ translate:0 0;      rotate:0deg;    scale:1; }
  }
  .kv__stage .kv-l:not(.kv-running), .kv__app .kva-l{ animation:kv-in .9s cubic-bezier(.22,1.4,.36,1) .2s backwards; }
  /* 橫式：各元件從最近的邊跳進（cqw＝相對 KV 寬） */
  .kv-star, .kv-star2, .kv-hat, .kv-ya, .kv-smile, .kv-title{ --dx:-50cqw; }
  .kv-subtitle, .kv-ball{ --dy:-28cqw; }
  .kv-letter1, .kv-letter2, .kv-audio{ --dy:42cqw; }
  .kv-svlogo, .kv-babox, .kv-ba-title{ --dx:52cqw; }
  /* 直式：同理 */
  .kva-hat, .kva-star, .kva-photo, .kva-title{ --dx:-55cqw; }
  .kva-sub, .kva-kb{ --dy:-32cqw; }
  .kva-svlogo, .kva-letter1, .kva-letter2, .kva-sv, .kva-notepk, .kva-ya{ --dx:55cqw; }
  .kva-audio, .kva-notebl, .kva-smile{ --dy:45cqw; }
  /* 抖動縮放（跳進 1.1s 結束後）：Title／Subtitle／BA（直式含 SVLogo）同時 1.35s
     ⚠️ 選擇器要壓過上面的通用規則（.kv__stage .kv-l:not() 權重=3 class），否則 pop 被蓋掉不會跑 */
  .kv__stage .kv-l.kv-title, .kv__stage .kv-l.kv-subtitle, .kv__stage .kv-l.kv-babox, .kv__stage .kv-l.kv-ba-title,
  .kv__app .kva-l.kva-title, .kv__app .kva-l.kva-sub, .kv__app .kva-l.kva-svlogo{
    animation:kv-in .9s cubic-bezier(.22,1.4,.36,1) .2s backwards, kv-pop .6s ease-in-out 1.35s; }

  /* 評審卡進場：捲動靠近評審區才觸發（JS IntersectionObserver 掛 .jury--wait/.jury--in），
     卡片從外面跳入定點、左右交錯＋依序 stagger；無 JS 或 reduced-motion 時照常顯示 */
  .jury--wait .critic-box{ opacity:0; }
  .jury--in .critic-box{ animation:kv-in .7s cubic-bezier(.22,1.4,.36,1) backwards; }
  .jury--in .jury__row1 .critic-box:nth-of-type(2){ --dx:-60vw; animation-delay:0s; }   /* row1 首位是標題div，卡片從 nth 2 起 */
  .jury--in .jury__row1 .critic-box:nth-of-type(3){ --dy:45vh;  animation-delay:.1s; }
  .jury--in .jury__row1 .critic-box:nth-of-type(4){ --dx:60vw;  animation-delay:.2s; }
  .jury--in .jury__row2 .critic-box:nth-of-type(1){ --dx:-60vw; animation-delay:.3s; }
  .jury--in .jury__row2 .critic-box:nth-of-type(2){ --dx:60vw;  animation-delay:.4s; }
}

/* 直式 SVLogo hover 同 web：白轉紅＋上浮（不進動畫 media，互動與 reduced-motion 無關） */
.kva-svlogo{ cursor:pointer; transition:transform .12s; }
.kva-svlogo:hover, .kva-svlogo:active{ background-image:url(../images/figma/main/kv-svg/sv-logo-red.svg); }
.kva-svlogo:hover{ transform:translateY(-6px); }
/* ---------- 直式 KV（app）：框架(含頂帶) + bg 元件分層，% 定位 ---------- */
.kv__app{ display:none; position:relative; aspect-ratio:1/1; }   /* base 隱藏；≤767 顯示(見下方 media) */
.kva-frame{ display:block; width:100%; height:100%; }
.kva-l{ position:absolute; display:block; }
/* 座標與尺寸＝Figma KV-390x390（443:7610）真值 ÷390 → %，零猜測（原 scale 全移除） */
.kva-sub{ left:8.61%; top:7.5%; width:21.25%; }
.kva-svlogo{ left:67.96%; top:14.55%; width:22.87%; aspect-ratio:167/29;
  background:url(../images/figma/main/kv-svg/sv-logo.svg) center/contain no-repeat; }
.kva-hat{ left:8.61%; top:29.78%; width:19.09%; }
.kva-kb{ left:38.33%; top:21.09%; width:23.61%; }
.kva-letter1{ left:73.24%; top:27.42%; width:15.74%; }
.kva-letter2{ left:73.24%; top:35.56%; width:15.74%; }
.kva-star{ left:10.65%; top:47.69%; width:10.2%; }
.kva-title{ left:19.54%; top:43.08%; width:58.98%; }
.kva-sv{ left:77.31%; top:48.24%; width:9.44%; }
.kva-photo{ left:9.68%; top:61.39%; width:6.19%; }
.kva-notepk{ left:83.53%; top:60.29%; width:6.25%; }
.kva-audio{ left:11.38%; top:75.38%; width:10.88%; }
.kva-notebl{ left:29.87%; top:80.16%; width:17.06%; }
.kva-smile{ left:55%; top:79.81%; width:12.33%; }
.kva-ya{ left:75.28%; top:74.6%; width:13.43%; }

/* ---------- Slogan（滿版紫） ---------- */
.slogan{ background:var(--purple-b); margin-top:32px; padding:32px 24px;
  display:flex; flex-direction:column; align-items:center; gap:18px; }
.slogan__img{ width:auto; height:60px; max-width:100%; }
/* 等比：font-size clamp、內部 gap/padding/箭頭改 em */
.btn-check{ display:inline-flex; align-items:center; justify-content:center; gap:.333em; background:var(--red);
  color:var(--wh); border:3px solid var(--ink); border-radius:999px; box-shadow:4px 4px 0 var(--ink);
  padding:.3125em .896em .479em; font-weight:900; font-size:clamp(20px, calc(17.4px + .66vw), 24px); line-height:1; transition:transform .12s, box-shadow .12s; }
.btn-check__txt{ display:inline-block; min-width:4.71em; text-align:center; }
.btn-check:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn-check:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); background:var(--pink); color:var(--ink); }
/* arrow 用 mask 上色（預設 WH），按下時變 BK 與文字一致
   ⚠️ 內嵌 data URI（來源 element/Icon_Arrow_outline.svg）：外連檔在 file:// 下會被當跨來源擋掉、箭頭不顯示，故內嵌 */
.btn-check__arw{ width:1em; height:1em; position:relative; top:.083em; background-color:var(--wh);
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNTY3MzggMC4wMTE3MTg4QzE0LjM3NTEgMC4yNTU0MyAxOC4xOTgyIDQuMjMxMzUgMTguMTk4MiA5LjA5OTYxTDE4LjE4NjUgOS41NjczOEMxNy45NDI4IDE0LjM3NDkgMTMuOTY3NiAxOC4xOTggOS4wOTk2MSAxOC4xOTgyTDguNjMwODYgMTguMTg2NUMzLjk3ODI2IDE3Ljk1MDcgMC4yNDc1NjggMTQuMjIgMC4wMTE3MTg4IDkuNTY3MzhMMCA5LjA5OTYxQzAgNC4wNzQzIDQuMDc0MyAwIDkuMDk5NjEgMEw5LjU2NzM4IDAuMDExNzE4OFpNOS4wOTk2MSAyLjAyMjQ2QzUuMTkxMDQgMi4wMjI0NiAyLjAyMjQ2IDUuMTkxMDQgMi4wMjI0NiA5LjA5OTYxQzIuMDIyNzIgMTMuMDA4IDUuMTkxMiAxNi4xNzU4IDkuMDk5NjEgMTYuMTc1OEMxMy4wMDc4IDE2LjE3NTUgMTYuMTc1NSAxMy4wMDc4IDE2LjE3NTggOS4wOTk2MUMxNi4xNzU4IDUuMTkxMiAxMy4wMDggMi4wMjI3MiA5LjA5OTYxIDIuMDIyNDZaTTcuMzI0MjIgNS4yNjk1M0M3LjcyNzc3IDQuODY2MTEgOC4zODE2NSA0Ljg2NjAzIDguNzg1MTYgNS4yNjk1M0wxMS44ODU3IDguMzY5MTRDMTIuMjg4OSA4Ljc3MjY3IDEyLjI4OTEgOS40Mjc2IDExLjg4NTcgOS44MzEwNUw4Ljc4NTE2IDEyLjkzMDdDOC4zODE3MSAxMy4zMzQgNy43Mjc3NSAxMy4zMzM5IDcuMzI0MjIgMTIuOTMwN0M2LjkyMDcxIDEyLjUyNzIgNi45MjA3NyAxMS44NzMzIDcuMzI0MjIgMTEuNDY5N0w5LjY5MjM4IDkuMDk5NjFMNy4zMjQyMiA2LjczMDQ3QzYuOTIwNjggNi4zMjY5MyA2LjkyMDY4IDUuNjczMDcgNy4zMjQyMiA1LjI2OTUzWiIgZmlsbD0iI0YzRjJGMyIvPgo8L3N2Zz4K") center/contain no-repeat;
  mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNTY3MzggMC4wMTE3MTg4QzE0LjM3NTEgMC4yNTU0MyAxOC4xOTgyIDQuMjMxMzUgMTguMTk4MiA5LjA5OTYxTDE4LjE4NjUgOS41NjczOEMxNy45NDI4IDE0LjM3NDkgMTMuOTY3NiAxOC4xOTggOS4wOTk2MSAxOC4xOTgyTDguNjMwODYgMTguMTg2NUMzLjk3ODI2IDE3Ljk1MDcgMC4yNDc1NjggMTQuMjIgMC4wMTE3MTg4IDkuNTY3MzhMMCA5LjA5OTYxQzAgNC4wNzQzIDQuMDc0MyAwIDkuMDk5NjEgMEw5LjU2NzM4IDAuMDExNzE4OFpNOS4wOTk2MSAyLjAyMjQ2QzUuMTkxMDQgMi4wMjI0NiAyLjAyMjQ2IDUuMTkxMDQgMi4wMjI0NiA5LjA5OTYxQzIuMDIyNzIgMTMuMDA4IDUuMTkxMiAxNi4xNzU4IDkuMDk5NjEgMTYuMTc1OEMxMy4wMDc4IDE2LjE3NTUgMTYuMTc1NSAxMy4wMDc4IDE2LjE3NTggOS4wOTk2MUMxNi4xNzU4IDUuMTkxMiAxMy4wMDggMi4wMjI3MiA5LjA5OTYxIDIuMDIyNDZaTTcuMzI0MjIgNS4yNjk1M0M3LjcyNzc3IDQuODY2MTEgOC4zODE2NSA0Ljg2NjAzIDguNzg1MTYgNS4yNjk1M0wxMS44ODU3IDguMzY5MTRDMTIuMjg4OSA4Ljc3MjY3IDEyLjI4OTEgOS40Mjc2IDExLjg4NTcgOS44MzEwNUw4Ljc4NTE2IDEyLjkzMDdDOC4zODE3MSAxMy4zMzQgNy43Mjc3NSAxMy4zMzM5IDcuMzI0MjIgMTIuOTMwN0M2LjkyMDcxIDEyLjUyNzIgNi45MjA3NyAxMS44NzMzIDcuMzI0MjIgMTEuNDY5N0w5LjY5MjM4IDkuMDk5NjFMNy4zMjQyMiA2LjczMDQ3QzYuOTIwNjggNi4zMjY5MyA2LjkyMDY4IDUuNjczMDcgNy4zMjQyMiA1LjI2OTUzWiIgZmlsbD0iI0YzRjJGMyIvPgo8L3N2Zz4K") center/contain no-repeat; }
.btn-check:active .btn-check__arw{ background-color:var(--ink); }

/* ---------- 區塊標題（深色泡泡＋星星） ---------- */
/* 等比縮放：font-size 用 clamp 隨螢幕寬平滑縮放，內部 padding/圓角/星星改 em → 整體維持比例 */
.sec-title{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--wh); border-radius:.64em; padding:.417em .556em .528em;
  font-weight:900; font-size:clamp(24px, calc(16.2px + 2vw), 36px); line-height:1; letter-spacing:.049em; white-space:nowrap; }
/* 星星（em 相對泡泡字級，隨之等比）：字36px→泡泡≈192寬/70高、星≈46px、壓在泡泡左上角 */
.sec-title::before{ content:""; position:absolute; left:-.5em; top:-.556em; width:1.306em; height:1.361em;
  background:url(../images/figma/element/Start_Title.svg) center/contain no-repeat; }
.sec-title--bl::before{ background-image:url(../images/figma/element/Start_Title_BL.svg); }   /* 得獎名單 BL */
.sec-title--pur::before{ background-image:url(../images/figma/element/Start_Title_PUR.svg); } /* 評語 PUR */
.sec-title--pk::before{ background-image:url(../images/figma/element/Start_Title_PK.svg); }   /* 得獎名單·大專組 PK */

/* ---------- 評審陣容 ---------- */
/* 評審區點陣（模仿舊 2026 站 kv-jurybg）：渲染範圍＝panel 往外 12px（.jury__mat 包 12px＋點陣；下移 20px） */
.jury{ padding:56px 20px 20px; }
.jury__mat{ max-width:1208px; margin:0 auto; padding:24px;   /* panel 外 24px 點陣邊（四邊含底部）；範圍直角不導圓 */
  background-image:radial-gradient(var(--ink) 1.5px, transparent 1.6px); background-size:22px 22px; background-position:0 20px; }
.jury__panel{ background:var(--panel);
  background-image:radial-gradient(var(--ink) 1.5px, transparent 1.6px); background-size:22px 22px; background-position:0 20px;  /* panel 內也鋪、同步下移 */
  border:3px solid var(--ink); border-radius:24px;
  box-shadow:inset 0 0 0 6px var(--cream), 4px 4px 0 var(--ink);  /* inset 6px 奶白＝panel 內側白框 */
  padding:50px 6px; display:flex; flex-direction:column; gap:26px;   /* 側 padding 20→6：卡到白框＝卡間（space-evenly 邊距落在白框內緣）*/
  container-type:inline-size; }  /* 當 container：卡片與間距用 cqw → 整區隨 RWD 等比縮放 */
.jury__row{ display:flex; align-items:flex-start; justify-content:space-evenly; }
.jury__title{ display:contents; }  /* web/tablet：sec-title 直接參與 row 排列 */
.jury__panel .sec-title{ flex:0 0 auto; }  /* 標題維持全站一致尺寸（同其他區塊），不隨評審區另縮 */
.jury__row2{ justify-content:center; column-gap:5cqw; }

/* 評審卡等比：寬度用 cqw（相對 panel）→ 卡片與間距整區隨 RWD 等比縮放，間距不會被壓到黏在一起。
   critic 內部再用自身 cqw（相對 critic-box）等比，各斷點不變形 */
.critic-box{ container-type:inline-size; flex:0 0 21cqw; min-width:0; }
.critic{ position:relative; width:100%; aspect-ratio:250/315;
  background:var(--cream); border:3px solid var(--ink);
  border-radius:18px; box-shadow:4px 4px 0 var(--ink); padding:7.6cqw 10.8cqw;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2cqw; }
.critic__photo{ width:76cqw; height:76cqw; border-radius:50%; border:2px solid var(--ink); flex:0 0 auto;
  object-fit:cover; box-shadow:0 0 0 2.8cqw var(--pink),0 0 0 3.6cqw var(--ink); margin:3.6cqw 0 2.4cqw; }
.critic__role{ font-size:5.6cqw; font-weight:500; text-align:center; line-height:1.4; min-height:8cqw; margin-top:.4cqw; position:relative; top:2cqw; }
.critic__name{ font-size:9.6cqw; font-weight:900; color:var(--purple); text-align:center; }
.critic__star{ position:absolute; top:2.8cqw; right:4.8cqw; width:18.4cqw; height:18.4cqw;
  background:url(../images/figma/element/Start_Jury.svg) center/contain no-repeat;
  transform:scale(1.1); transform-origin:left bottom; }

/* ---------- 得獎名單 + 分組 ---------- */
.contest__head{ max-width:1200px; margin:0 auto; padding:clamp(44px, calc(38px + 1.53vw), 60px) 20px 24px;   /* 上方留白隨視窗平滑縮放 390→44 ~ 1440→60 */
  display:flex; align-items:center; gap:clamp(8px, 1.21vw, 12px); }  /* 標題↔高中組：web 12，隨 RWD 縮到最小 8（統一控制各斷點） */
.tabs{ display:flex; gap:clamp(8px, 1.41vw, 14px); }  /* 高中↔大專：web 14，隨 RWD 縮到最小 8 */
.tab{ font-family:inherit; cursor:pointer; background:var(--cream2); color:var(--ink); white-space:nowrap;
  border:2.5px solid var(--ink); border-radius:999px; box-shadow:3.3px 3.3px 0 var(--ink);
  padding:.25em 1.313em .375em; font-weight:700; font-size:clamp(26px, calc(22px + 1vw), 32px); line-height:1.2;
  transition:transform .12s, box-shadow .12s; }
/* 選中：高中組＝BL、大專組＝PK；未選＝Cream(cream2) */
.tab.is-active[data-group="high"]{ background:var(--cyan); }
.tab.is-active[data-group="college"]{ background:var(--pink); }
.tab:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }

/* 前三名 */
.winners{ max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.winner{ min-width:0; background:var(--red-o); border:3px solid var(--ink); border-radius:18px;
  box-shadow:4px 4px 0 var(--ink); padding:25px 23px; display:flex; gap:30px; align-items:flex-start;
  transform:scale(.95); }
/* 縮 0.95 但左右緣齊容器：左卡靠左、右卡靠右、中卡置中 */
.winner--1{ transform-origin:left center; }
.winner--2{ background:var(--purple); transform-origin:center; }
.winner--3{ background:var(--green); transform-origin:right center; }
.winner__medal{ flex:0 0 72px; margin-top:-14px; margin-left:-6px; }
.winner__medal img{ width:72px; height:auto; }
.winner__body{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.winner__cover{ width:100%; aspect-ratio:1/1; border:2px solid var(--ink); border-radius:10px; object-fit:cover; }
.winner__title{ color:var(--wh); font-weight:900; font-size:22px; text-align:left; line-height:1.3;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; left:2px; margin-top:2px; }
.winner__author{ color:var(--wh); font-weight:500; font-size:18px; text-align:left;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; left:2px; }
.winner__school{ color:#fff; font-size:12.8px; border:1px solid var(--wh); border-radius:999px;
  padding:2px 11px 4px; margin-top:4px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 名次卡 Contest_4 */
.ranks{ max-width:1200px; margin:0 auto; padding:24px 20px 0;   /* 前三名↔名次距離＝卡間 24 */
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }  /* 名次卡間 20→24（全站統一 24）*/
/* 對齊參考圖 Card_Contest_4：卡 aspect≈5.09、印章73／cover 87、印章→cover 17、cover→文字 13 */
.rank{ min-width:0; background:var(--cream); border:3px solid var(--ink); border-radius:16px;
  box-shadow:4px 4px 0 var(--ink); padding:13px 23px 13px 19px; display:flex; align-items:center; gap:0; }
.rank__seal{ flex:0 0 73px; width:73px; margin-right:13px; }  /* cover＋文字整體左移（累計 -4px），印章不動 */
.rank__seal img{ width:100%; height:auto; }
.rank__cover{ flex:0 0 83px; width:83px; height:83px; border:2px solid var(--ink); border-radius:10px; object-fit:cover; margin-right:13px; }
.rank__meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.rank__title{ font-weight:900; font-size:22px; line-height:1.3; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; position:relative; left:2px; }
.rank__author{ font-size:16px; line-height:1; font-weight:500; color:var(--ink); position:relative; left:2px; }
.rank__school{ font-size:13px; line-height:1; border:1px solid var(--ink); border-radius:999px; padding:4px 11px 6px; margin-top:2px;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }  /* 長校名窄機不爆版 */

/* ---------- 評語 ---------- */
.comments{ padding:70px 0 90px; }
.comments__head{ max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:clamp(8px,1.21vw,12px); }   /* 標題＋高中/大專 tab 同得獎名單規格 */
.comments__note{ max-width:1200px; margin:20px auto 0; padding:0 20px; font-size:18px; font-weight:600; }
.comments__grid{ max-width:1200px; margin:20px auto 0; padding:0 20px;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; }  /* 評語卡間 27→24（全站統一 24）*/
.comment{ background:var(--cream); border:3.115px solid var(--ink); border-radius:18.7px;
  box-shadow:4.15px 4.15px 0 var(--ink); padding:12.46px 17.65px;
  display:flex; flex-direction:column; align-items:center; }
.comment__cover{ width:100%; aspect-ratio:1/1; border:2px solid var(--ink); border-radius:10.4px; object-fit:cover; }
.comment__title{ font-weight:900; font-size:18.7px; color:var(--ink); text-align:center; line-height:1.4;
  margin-top:11px; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comment__author{ font-weight:700; font-size:16.6px; color:var(--indigo); text-align:center; margin-top:2px;
  width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }  /* 太長不換行→…（卡高一致）*/
/* 評語區專屬配色：高中 tab 紫 #8171FF、大專 tab 橘 #EC6641；切大專時卡片紫字改橘 */
.comments__head .tab.is-active[data-group="high"]{ background:#8171FF; }
.comments__head .tab.is-active[data-group="college"]{ background:#EC6641; }
.comments--college .comment__author{ color:#EC6641; }
.comments--college .comments__head .sec-title--pur::before{ background-image:url(../images/figma/element/Start_Title_OR.svg); }   /* 大專組：評語標題星星改橘 */
.comment__btn{ margin-top:10px; width:100%; background:var(--green-btn); border:2px solid var(--ink);
  border-radius:999px; box-shadow:2px 2px 0 var(--ink); padding:5px 10px;
  font-family:inherit; font-weight:700; font-size:14.5px; color:var(--ink); cursor:pointer;
  transition:background .15s ease, transform .1s ease, box-shadow .1s ease; }
.comment__btn:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.comment__btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }

/* ---------- 按鈕 hover 疊色（一般按鈕疊 BK 10%、.back 疊 WH 10%） ---------- */
.btn-check,.tab,.comment__btn,.back{ position:relative; overflow:hidden; }
.btn-check::after,.tab::after,.comment__btn::after,.back::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .12s; }
.btn-check::after,.tab::after,.comment__btn::after{ background:var(--ink); }   /* BK */
.back::after{ background:var(--wh); }                                          /* WH */
.btn-check:hover::after,.tab:hover::after,.comment__btn:hover::after{ opacity:.20; }  /* BK 20% */
.back:hover::after{ opacity:.10; }                                                    /* WH 10% */

/* ---------- 紙紋 ---------- */
.texture{ position:absolute; inset:0; z-index:5; pointer-events:none;
  background:url(../images/figma/texture.png) top left; background-size:100px 100px;
  mix-blend-mode:soft-light; opacity:.7; }

/* ---------- Footer（黑底白字，參考 2025 頁） ---------- */
.site-footer{ background:var(--ink); }   /* BK */
.site-footer__inner{ max-width:1200px; margin:0 auto; padding:32px 20px; text-align:center;
  color:var(--wh); font-size:16px; font-weight:500; letter-spacing:.02em; }   /* WH */

/* ---------- 查看評語 Modal（燈箱；視覺照 Figma 437-3078、動態參考 2025） ---------- */
/* 用 visibility（非 display）才能讓開/關的滑入淡出動畫確實播放；關閉時延遲隱藏 .32s 等淡出跑完 */
.cmodal{ position:fixed; inset:0; z-index:100; visibility:hidden; transition:visibility 0s linear .32s; }
.cmodal.is-open{ visibility:visible; transition:visibility 0s; }
.cmodal__backdrop{ position:absolute; inset:0; background:rgba(45,42,54,.86);
  opacity:0; transition:opacity .2s ease; }
.cmodal.is-open .cmodal__backdrop{ opacity:1; }
/* 卡片：置中；開場由上方 -40px 滑落＋淡入（參考 2025 modal .3s ease-out） */
.cmodal__card{ position:absolute; top:50%; left:50%; width:min(92vw, 470px); max-height:88vh; overflow:auto;
  transform:translate(-50%, calc(-50% - 40px)); opacity:0;
  transition:transform .3s ease-out, opacity .2s ease-out;
  background:var(--cream); border:3px solid var(--ink); border-radius:22px; box-shadow:6px 6px 0 var(--ink); padding:22px; }  /* 卡內 padding 14→22（+8） */
.cmodal.is-open .cmodal__card{ transform:translate(-50%, -50%); opacity:1; }
.cmodal__slide{ transition:transform .3s ease, opacity .3s ease; }
/* 彩色歌曲頭卡（--hc 由 JS 依卡片輪播 5 色）；整塊是外部連結，hover 疊 10% WH */
.cmodal__header{ display:block; background:var(--hc, #7371F8); border:3px solid var(--ink); border-radius:16px; padding:12px 14px; color:var(--wh);
  position:relative; overflow:hidden; }
.cmodal__header::after{ content:""; position:absolute; inset:0; background:var(--wh); opacity:0; transition:opacity .12s; pointer-events:none; }
.cmodal__header:hover::after{ opacity:.1; }
/* 得獎卡（前三名＋名次）hover：如按鈕位移抬起（不疊色、不變色）
   用獨立屬性 translate 抬起 → 不干擾 .winner 的 transform:scale(.95) */
.winner, .rank{ transition:translate .12s, box-shadow .12s; }
.winner:hover, .rank:hover{ translate:-2px -2px; box-shadow:6px 6px 0 var(--ink); }
.cmodal__label{ font-size:13px; font-weight:700; margin-bottom:9px; }
.cmodal__song{ display:flex; gap:13px; align-items:center; }
.cmodal__cover{ width:88px; height:88px; flex:0 0 auto; border-radius:12px; border:2px solid var(--ink); object-fit:cover; }
.cmodal__info{ flex:1; min-width:0; }
.cmodal__title{ font-size:24px; font-weight:900; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmodal__artist{ font-size:15px; font-weight:500; margin-top:5px; }
.cmodal__play{ display:flex; align-items:center; gap:9px; margin-top:11px; }
.cmodal__playbtn{ font-size:15px; line-height:1; }
.cmodal__wave{ display:flex; align-items:center; gap:2px; height:20px; flex:1; overflow:hidden; }
.cmodal__wave span{ width:2px; flex:0 0 auto; background:var(--wh); border-radius:2px; opacity:.9; }
/* 對話泡泡列（照 Figma 355:11191~）：頭像齊泡泡下緣、泡泡隨文字縮、硬陰影 0 2px */
.cmodal__chat{ display:flex; flex-direction:column; gap:18px; padding:20px 2px 6px; }
.cmsg{ display:flex; gap:10px; align-items:flex-end; }   /* items-end → 頭像齊泡泡下緣 */
.cmsg__avatar{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; border:2.4px solid var(--ink);
  box-shadow:0 1.2px 0 var(--ink); object-fit:cover; }
.cmsg__bubble{ min-width:0; max-width:calc(100% - 42px);   /* hug 內容、上限留頭像+間距 → 隨文字長度縮減 */
  background:var(--wh); border:2px solid var(--ink); box-shadow:0 2px 0 var(--ink);   /* Figma drop-shadow 0 2px 0 */
  border-radius:16px 16px 16px 0; padding:10px 19px;   /* 左下尖角對齊底部頭像；padding 照 Figma */
  font-size:14px; font-weight:500; line-height:1.6; color:var(--ink); }
.cmodal__logo{ text-align:right; padding:2px 4px; }
.cmodal__logo img{ display:inline-block; height:15px; opacity:.5; }
/* 關閉 X ＋ 左右箭頭（卡外、深底白字圓鈕、WH stroke） */
.cmodal__x, .cmodal__arrow{ position:absolute; z-index:2; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--wh); border:2px solid var(--wh); border-radius:50%; cursor:pointer; transition:transform .12s; font-family:inherit;
  overflow:hidden; }
/* hover：10% WH 疊色 */
.cmodal__x::after, .cmodal__arrow::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--wh); opacity:0; transition:opacity .12s; pointer-events:none; }
.cmodal__x:hover::after, .cmodal__arrow:hover::after{ opacity:.1; }
.cmodal__x{ top:20px; right:24px; width:44px; height:44px; font-size:20px; }
.cmodal__x:hover{ transform:scale(1.08); }
.cmodal__arrow{ top:50%; transform:translateY(-50%); width:44px; height:44px; }   /* 40→44（×1.1） */
.cmodal__arrow:hover{ transform:translateY(-50%) scale(1.08); }
.cmodal__x .close {position: relative; top: -1px;}
/* 靠近卡片：距卡緣 24px（卡半寬 = min(46vw,235px)） */
.cmodal__arrow--prev{ left:auto; right:calc(50% + min(46vw, 235px) + 24px); }
.cmodal__arrow--next{ left:calc(50% + min(46vw, 235px) + 24px); right:auto; }
.cmodal__arrow .chev{ font-size:31.5px; line-height:1; position:relative; top:-5px; }  /* 放大1.05x(30→31.5)、上移2px(-2→-4) */
@media (prefers-reduced-motion:reduce){
  .cmodal__backdrop, .cmodal__card, .cmodal__slide{ transition:none; }
}
/* 窄螢幕：卡片幾乎滿寬 → 箭頭放不進兩側，改置於卡片下方置中；X 移到卡片上方角落 */
@media (max-width:600px){
  .cmodal__card{ width:92vw; max-height:min(80vh, calc(100vh - 132px)); }  /* 讓出底部箭頭空間（橫向手機） */
  .cmodal__x{ top:12px; right:12px; width:44px; height:44px; }  /* 觸控目標 ≥44 */
  .cmodal__arrow{ top:auto; bottom:12px; transform:none; width:44px; height:44px; }
  .cmodal__arrow:hover{ transform:scale(1.08); }
  .cmodal__arrow--prev{ left:calc(50% - 50px); right:auto; }
  .cmodal__arrow--next{ left:calc(50% + 6px); right:auto; }
}

/* =========================================================
   Tablet 768–991（≤767 由下方 App 手機版接管）
   ========================================================= */
@media (max-width:991px){
  .topbar,.kv,.jury,.contest__head,.winners,.ranks,.comments__head,.comments__note,.comments__grid{ padding-left:34px; padding-right:34px; }
  .slogan{ margin-top:32px; padding:44px 24px; }
  /* tablet：返回鈕移到 KV 上方（不疊在 KV 上）、靠右齊 running 右邊；尺寸固定 15px＝手機版一致 */
  .topbar{ position:static; justify-content:flex-end; padding:0 0 6px; }
  .back{ margin-left:0; margin-top:0; font-size:15px; gap:5px; padding:5px 13px; }
  .back .chev{ font-size:18px; top:-1px; }
  .kv-ba-title{ transform:translateY(-6px); }  /* 接近手機版：綠標下移 1px 貼回 Running */
  /* tablet：標題（評審陣容）改置於評審卡上方、自成一行；卡片 3 欄置中，第 4/5 張自動成第二排置中 */
  .jury__panel{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start;
    --jg:clamp(16px, 3vw, 30px); gap:var(--jg); padding:calc(var(--jg) + 6px); }  /* padding=卡間距(＋白框6px)→ 卡到白框＝卡到卡，四邊一致 */
  .jury__row{ display:contents; }              /* 拆掉 row 容器，標題與 5 張卡直接成為 panel 的 flex 子項 */
  .jury__title{ display:flex; flex-basis:100%; justify-content:center; }  /* 標題佔滿整行 → 落在卡片上方、置中 */
  .critic-box{ flex:0 0 calc((100% - 2*var(--jg))/3); }  /* 精準 3 欄 */
  .contest__head{ flex-wrap:wrap; }
  .kv{ margin-top:8px; }  /* tablet 橫式：.back＋KV 一起上移 12px（20→8）*/
  .comments__head{ flex-wrap:wrap; }
  /* 前三名 3 欄變窄：縮獎牌與間距，把空間留給封面（否則封面被擠扁） */
  .winner{ padding:18px 16px; gap:14px; }
  .winner__medal{ flex:0 0 56px; margin-top:-10px; margin-left:-4px; }
  .winner__medal img{ width:56px; }
  .ranks{ grid-template-columns:1fr; }
  .comments__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }  /* gap 繼承 base 24（修 tablet 31 > web 的反直覺）*/
}

/* 接近 app 切點前（窄 tablet）：綠標再下移 1px → -5px，補償更小的 stage */
@media (max-width:680px){
  .kv-ba-title{ transform:translateY(-5px); }
}

/* ≤767（窄 tablet～app）：前三名改排行榜橫式列，欄位對齊名次卡
   （medal 欄 73＋13 間距＝seal；cover 83＋13；padding 19/23；卡高 116） */
@media (max-width:767px){
  .winners{ grid-template-columns:1fr; gap:16px; }
  .ranks{ gap:16px; padding-top:16px; }  /* 名次卡間距＋與前三名的距離＝前三名卡間距 16px（上下一致）*/
  .winner{ transform:none; padding:13.5px 23px 13.5px 19px; gap:0; align-items:center; }
  .winner__medal{ position:static; flex:0 0 73px; margin:0 13px 0 0; }
  .winner__medal img{ width:73px; }
  .winner__body{ display:grid; grid-template-columns:83px 1fr; column-gap:13px; row-gap:3px;
    align-items:start; align-content:center; width:100%; }
  .winner__cover{ grid-row:1 / span 3; width:83px; height:83px; }
  .winner__title{ font-size:19px; line-height:1; margin-top:0; left:2px; }   /* +2px 同名次卡文字 */
  .winner__author{ font-size:15px; line-height:1; left:2px; }
  .winner__school{ font-size:13px; line-height:1; margin-top:2px; padding:4px 11px 6px;
    justify-self:start; max-width:100%; }
}

/* =========================================================
   App（手機版）≤767  ← 原 ≤575，改為 768 以下直接吃手機版型（直式 KV、評語 2 欄）
   tablet 橫式版型只服務 768–991（＝Figma 768 完稿寬）
   ========================================================= */
@media (max-width:767px){
  .topbar,.kv,.jury{ padding-left:14px; padding-right:14px; }
  .contest__head,.winners,.ranks,.comments__head,.comments__note,.comments__grid{ padding-left:24px; padding-right:24px; }
  /* app：返回鈕回正常流、置中顯示在 KV 圖上方（改回固定尺寸，不隨 cqw 縮） */
  .topbar{ position:static; justify-content:center; padding-top:4px; }
  .back{ font-size:15px; margin-left:0; margin-top:0; gap:5px; padding:5px 13px; }   /* 直式切點放大一些 */
  .back .chev{ font-size:18px; top:-1px; }
  .kv{ margin-top:20px; }  /* 直式還原（上移只作用 tablet 橫式）*/
  .kv__stage{ display:none; }
  .kv__app{ display:block; width:100%; max-width:560px; margin:0 auto; }  /* 577–767 較寬手機可放大到 560 填滿；真手機（內容寬<560）仍 100% */
  .slogan__img{ height:auto; }

  .jury{ padding-top:20px; }
  /* 統一 24px 間隔（原16＋8）：卡間 24＝卡到白框 24（padding=24+白框6）、卡寬 = (內容寬-24)/2 */
  .jury__panel{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start;
    padding:30px; gap:24px; }
  .jury__row{ display:contents; }
  /* app：wrapper 佔滿一行並置中，泡泡維持自然寬（不被拉長） */
  .jury__title{ display:flex; flex-basis:100%; justify-content:center; }  /* 與卡片距離＝gap 24px */
  .jury__panel .sec-title{ text-align:center; }
  .critic-box{ flex:0 1 auto; width:calc(50% - 12px); }  /* (內容寬-24px 卡間)/2 */

  /* 標題＋兩個分組 tab 同一行置左；上限對齊切換前(768)尺寸 → 切到手機不縮小，較窄手機才等比縮小 */
  .contest__head{ justify-content:flex-start; flex-wrap:nowrap; padding-bottom:16px; }  /* 標題列到卡 16（同卡間）；padding-top 由 base clamp */
  .comments__head{ justify-content:flex-start; flex-wrap:nowrap; }   /* 評語 head 同得獎名單：標題＋tab 一行置左 */
  .contest__head .sec-title, .comments__head .sec-title{ font-size:clamp(16px, calc(6.78vw - 4.88px), 31.56px); }
  .tab{ font-size:clamp(14px, calc(6.02vw - 4.34px), 29.68px); padding:.25em 1.1em .375em; }  /* .tabs gap 由 base clamp 統一 RWD */
  /* 前三名排行榜列樣式統一由 ≤767 區塊接管（欄位對齊名次卡） */
  .comments__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; }  /* 兩卡欄距 12→20（+8px） */
  .comment__title{ font-size:15px; }
  .comment__author{ font-size:13px; }
  .rank__title{ font-size:19px; }
  .rank__author{ font-size:15px; }
}
@media (max-width:479px){
  .critic-box{ flex:0 1 auto; width:calc(90% - 12px); }
}
/* 極窄手機 ≤360：名次卡縮印章/封面，保住文字空間 */
@media (max-width:360px){
  .rank__seal{ flex-basis:56px; width:56px; margin-right:10px; }
  .rank__cover{ flex-basis:70px; width:70px; height:70px; margin-right:10px; }
  .rank__title{ font-size:18px; }
  /* 前三名同款橫式列一起縮，保住 320 文字空間 */
  .winner__medal{ flex-basis:56px; margin-right:10px; }
  .winner__medal img{ width:56px; }
  .winner__body{ grid-template-columns:70px 1fr; column-gap:10px; }
  .winner__cover{ width:70px; height:70px; }
  .winner__title{ font-size:18px; }
}

/* ---------- 進場動態 ---------- */
@media (prefers-reduced-motion:no-preference){
  .critic,.winner,.rank,.comment{ animation:pop .5s cubic-bezier(.2,1.1,.35,1) backwards; }
  /* to 不寫 transform → 結尾回元素自身值（.winner 的 scale(.95) 不被蓋掉） */
  @keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; } }
}