@charset "UTF-8";
/* ============================================================
   臺灣之東 23.5°N — 首頁樣式
   設計稿 1920 × 5740
   原則：字級固定不隨螢幕縮放，容器與背景流動延伸
   ============================================================ */

/* ── 變數 ───────────────────────────────────────── */
:root{
  /* 色彩（取樣自設計稿）
     ★ 2026-09-06 髒代碼清理：移除全站零使用的變數
     （--c-black-2/--c-header/--c-gold-deep/--c-brown/--c-blue/--g-gold/
       --f-serif/--fs-sec/--fs-card/--lh-card/--w-container/--fs-hero-*，
       含各斷點的重新定義——定義了沒人吃，改它沒反應反而誤導）。 */
  --c-black:#151515;
  --c-cream:#FFFFFF;          /* 2026-09-04 使用者指定，原為 #FFF0D1 */
  --c-gold-lt:#FBF1C9;
  --c-gold:#E3D19C;
  --c-gold-mid:#D3BD7D;
  --c-gold-dk:#A8935C;
  --c-text:#EFEAE0;
  --c-text-dim:#BFB8A9;

  /* 按鈕金漸層 */
  --g-gold-btn:linear-gradient(180deg,#FBEFC6 0%,#E7D091 50%,#C9A85E 100%);

  /* 字型 */
  --f-zh:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --f-geo:"Jost","Noto Sans TC",sans-serif;          /* 替代 Century Gothic */

  /* 字級 — 固定值，不隨視窗縮放 */
  --fs-body:19px;      --lh-body:28px;
  --fs-sm:16px;
  --fs-xs:14px;

  /* 容器 */
  --pad-x:40px;
  /* 全站內容對齊線（原稿 x120 = 6.25%）。原本各處寫死 max(20px, 6.25vw)，
     2026-09-06 抽成變數：≤1920 數值完全相同，唯一目的為讓 ≥1921 能一次鎖住格線。 */
  --inset:max(20px, 6.25vw);
  --h-header:clamp(80px, 6.25vw, 120px);   /* 原稿 120/1920 = 6.25% —— 每個螢幕都是原稿比例 */

  /* ── 字級縮放係數 ─────────────────────────────────
     原稿是 1920 的一張圖，但字級不能跟著版面等比縮 ——
     1440 等比縮下去內文只剩 14.3px、圖說 11.3px，讀不動。
     所以改成「大字縮得多、內文縮一點、小字幾乎不縮」：

              1920   1600   1440   1280
       大      1.00   .92    .88    .85     22px 以上
       中      1.00   .96    .93    .90     17–21px
       小      1.00   1.00   .97    .94     15–16px
       極小    1.00   1.00   1.00   1.00    14px 以下（不掛係數）

     ★ 1920 時四條全部 = 1，所以逐像素對好的版面完全不會動。
     ★ 1199 以下改用既有的手機／平板字級，係數在那裡歸 1。 */
  --k-lg:1;
  --k-md:1;
  --k-sm:1;
  --c-gold-line:#AD842B;      /* 2026-09-04 使用者指定，原為 #D0A33E */
}

/* ── Reset ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--h-header);overflow-x:hidden}

body{
  margin:0;
  background:var(--c-black);
  color:var(--c-text);
  font-family:var(--f-zh);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
}
img{max-width:100%;height:auto;display:block;border:0}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--c-cream);color:#000;padding:10px 18px;
}
.skip-link:focus{left:8px;top:8px}

/* 設計稿上七個區塊的標題左緣一律在 x120（1920 稿寬 → 6.25%）。
   內縮改以 6.25vw 為統一基準，各區才會對齊同一條垂直線；
   原本「置中容器 + 固定內距」的算法會隨螢幕寬度與 6.25vw 分岔。
   單一區塊若需要較窄的內容寬度，在該區自行加 max-width。 */
.container{
  width:100%;
  padding-inline:var(--inset);
}

/* ── 通用元件 ───────────────────────────────────── */
.btn{
  display:inline-block;text-align:center;
  font-family:var(--f-zh);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.08em;line-height:1;
  padding:14px 34px;border-radius:999px;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn-gold{background:var(--g-gold-btn);color:#3A2C08;box-shadow:0 3px 12px rgba(0,0,0,.45)}
/* .btn-cream 已移除：09「前往報名」原本用它，現與倒數卡「立即報名」統一為 .btn-gold。
   留著會是陷阱 —— 它吃 --c-cream，而那個變數已改成純白。 */
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 6px 18px rgba(0,0,0,.55)}
.btn:active{transform:translateY(0)}

/* ── 共用元件：區塊小標題 ─────────────────────────
   金色山形記號（含上方弧形英文）+ 標題文字。
   由 index.php 的 sec_title() 產生，七個區塊共用。
   記號依設計師匯出的實際比例 71×53（原先量到的 94 寬多框到旁邊的裝飾線）。
   標題字級 26px，記號略高於文字。 */
.sec-title{
  display:flex;align-items:center;gap:10px;
  font-size:calc(26px * var(--k-lg));font-weight:700;line-height:1.3;
  color:var(--c-gold-line);letter-spacing:.06em;   /* 2026-09-04 使用者指定 #AD842B，與山形記號同色；原為 --c-gold-lt #FBF1C9 */
  margin-bottom:50px;   /* 2026-09-05 使用者指定：全站副標題下邊距統一 50 */
}
.sec-mark{
  flex:none;display:block;width:71px;height:53px;
  background:url("../images/ui/sec-mark.webp") center / contain no-repeat;
  margin-bottom:11px;      /* 設計稿上記號比文字高一些 */
}

/* ══════════ 01 Header ══════════ */
/* 原稿（1920 寬）實測：導覽列佔 y 0–119，總高 120px，
   上下各一條金線 —— 匯出檔量到 3px，但使用者確認 PSD 的筆畫是 1px，
   以 PSD 為準（匯出時被放大了）。

   ★ 高度寫成 clamp(80px, 6.25vw, 120px)。
     120 ÷ 1920 = 6.25%，所以 6.25vw 在任何寬度都等於原稿的比例：
       1920 → 120（與原稿完全一致）　1600 → 100　1440 → 90　1280 → 80
     一開始寫死 80，1920 上會比原稿矮 40px；寫死 120，1440 的筆電上
     又會比原稿的比例厚 33%（列高是固定像素、不縮，畫布卻縮了）。
     clamp 兩邊都成立。下限 80 是為了不讓小筆電的列高塌掉。

   所以底下 Logo、金線、剪影全部改用「佔導覽列高度的比例」來寫，
   比例值一律取自原稿的 120px 版本。日後只要改 --h-header 一個數字，
   整條導覽列就會整組等比縮放，內部比例永遠跟原稿一致。

   底色為垂直漸層，中央最亮 —— 下列各站是沿 x=460 的空白處逐列取樣的實測值。 */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:200;
  height:var(--h-header);
  background:linear-gradient(180deg,
    #030303 0%,  #090909 7%,  #131313 14%, #1E1E1E 21%, #292929 28%,
    #333333 35%, #3A3A3A 42%, #3C3C3C 49%, #3A3A3A 56%, #343434 63%,
    #2B2B2B 70%, #202020 77%, #151515 84%, #0A0A0A 91%, #020202 100%);
  transition:box-shadow .25s ease;
}
/* 上下金線。原稿的金線本身是橫向漸層 —— 兩端 #AF832C、正中 #FFC855，
   所以不能用 border-color（只吃單色），改用兩條絕對定位的細條。 */
.site-header::before,
.site-header::after{
  content:"";position:absolute;left:0;right:0;height:1px;   /* 使用者指定 1px（匯出檔量到 3px，以 PSD 的筆畫為準）*/
  background:linear-gradient(90deg,
    #AF832C 0%,  #BD8E32 10%, #D1A041 20%, #E8B349 30%, #FAC251 40%,
    #FFC855 50%, #FAC251 60%, #EAB148 70%, #D09F40 80%, #BE8F33 90%, #AF832C 100%);
}
.site-header::before{top:0}
.site-header::after{bottom:0}
.site-header.is-scrolled{box-shadow:0 6px 22px rgba(0,0,0,.55)}

.header-inner{
  position:relative;height:100%;
  width:min(1680px,calc(100% - 64px));margin-inline:auto;
  display:flex;align-items:center;
}

.brand{flex:0 0 auto;line-height:0}
.brand img{width:calc(var(--h-header) * .7125);height:auto}  /* 原稿 85.5/120，跟著列高等比 */

/* 主選單：絕對置中對齊頁面中線（設計稿選單中心 = 960，正好是頁寬中點） */
.nav-wrap{flex:1;display:flex;align-items:center;height:100%}
.nav-main{
  position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);
  display:flex;align-items:center;
}
.nav-list{display:flex;align-items:center;gap:67px}
.nav-list a{
  font-size:calc(17px * var(--k-md));font-weight:500;color:#E8E4DA;
  letter-spacing:.06em;white-space:nowrap;
  transition:color .2s ease;
}
.nav-list a:hover{color:var(--c-gold-lt)}
.nav-list a.is-current{color:var(--c-gold-line);font-weight:700}

/* 金色攝影師剪影：滑到目前所在區塊的左側。
   原稿實測（1920 寬、導覽列 120 的版本）：含地上影子的完整範圍 36.5x40，
   位於 y 39–78.5 —— 亦即與選單文字的墨色中心對齊（皆為 y 59）。
   圖檔 75x81 的比例是 .926，故取 37x40 讓 contain 剛好填滿。
   ★ 尺寸維持原稿的 37x40，不隨 --h-header 縮 ——
     剪影是配著選單文字的，而文字 17px 各斷點固定，
     一起縮會讓剪影相對文字變小（縮到 80 時只剩 26 高，明顯偏小）。
     垂直位置改成對齊選單文字的中線（原稿上兩者中心都在 y59，
     比列高中心高 1px），這樣列高怎麼變都對得住文字。
   與文字的間距是原稿的 7px，由 js 依剪影實際寬度算（×7/37）。 */
.nav-marker{
  position:absolute;left:0;
  top:calc((var(--h-header) - 40px) / 2 - 1px);            /* 原稿 120 高時 = 39 */
  width:37px;height:40px;
  background:url("../images/ui/nav-marker.webp") left bottom / contain no-repeat;
  opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .3s ease;
}
.nav-marker.is-on{opacity:1}
/* 拉窗期間關掉過場，避免剪影從舊位置「滑」到新位置（見 js/main.js 的 resize） */
.nav-marker.is-resizing{transition:none}

/* 語系切換：項目之間以金色細線分隔 */
.lang-list{margin-left:auto;display:flex;align-items:center}
.lang-list li{display:flex;align-items:center}
.lang-list li:not(:last-child)::after{
  content:"";width:1px;height:15px;margin:0 15px;
  background:rgba(208,163,62,.5);
}
.lang-list a{
  /* 2026-09-06 使用者指正＋設計稿實量：非當前語系是純白（最亮 5% = 255,255,255），
     不是原本的 #9A948A 暖灰。當前語系維持金色＋底線。 */
  font-family:var(--f-geo);font-size:14px;color:#FFF;
  letter-spacing:.04em;transition:color .2s ease;
}
.lang-list a:hover{color:var(--c-gold-lt)}
.lang-list a.is-active{
  color:var(--c-gold-line);font-weight:700;
  border-bottom:1px solid var(--c-gold-line);padding-bottom:3px;
}

.nav-toggle{display:none;width:44px;height:44px;margin-left:auto;position:relative}
.nav-toggle span{
  position:absolute;left:10px;right:10px;height:2px;background:var(--c-gold-lt);
  transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:28px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 選單間距隨可用寬度收斂，字級維持 17px 不變 */

/* ══════════ 02 Hero ══════════ */
.hero{
  position:relative;margin-top:var(--h-header);
  /* 依設計稿比例（Hero 895 / 稿寬 1920 = 46.6%）。
     不再受視窗高度壓縮 —— 視窗矮時讓頁面自然捲動，
     否則倒數卡會往上擠、壓到書法標題。 */
  /* ★ 2026-09-04 再修：47.55vw 讓底緣落在 y1033，原稿是 y1030。
     量法：取 y950-1100 的橫向平均亮度，找最大跌幅那一列 ——
     原稿 1029→1030 掉 137.2，實作 1032→1033 掉 136.8，剛好差 3px。
     導覽列 120 + Hero 910 = 1030 與原稿吻合。910/1920 = 47.396%。 */
  min-height:clamp(560px, 47.4vw, 930px);
  display:flex;align-items:flex-start;
  overflow:hidden;
}
/* 主視覺：單純以底部對齊。
   ★ 2026-09-04 修正：原本寫 calc(100% + 2.8vw)，說法是「原稿中主視覺低於
     Hero 底部 54px」，但那讓整片稻浪比原稿低了 57px。
     驗證方法：取實作 y560-1030 的垂直亮度剖面，在原稿中搜尋最佳位移，
     亮度與綠色度兩個通道都得到 57px，相關係數 0.9997 / 0.9994。
     圖高 1030（3840x2060 在 1920 寬時）、Hero 高 913，圖比容器高 117px，
     多出來的部分被 overflow:hidden 裁掉，上方由 background-color 的白色續接，
     所以貼齊底部不會露縫。 */
.hero-bg,.hero-figure{
  position:absolute;inset:0;
  background-position:center 100%;
  background-size:100% auto;
  background-repeat:no-repeat;
  /* ★ 2026-09-09 視差改走 CSS 變數（--par-x / --par-y 由 main.js 寫），
     transform 本身不再由 JS inline 寫入。原因見下方 heroSettle 的註解。 */
  transform:translate3d(var(--par-x, 0px), var(--par-y, 0px), 0);
}
.hero-bg{
  background-color:#FEFDFB;
  background-image:url("../images/sections/hero-bg.webp");
}
/* 人物圖層：背景為 data-depth="0.20"，人物略小於此值，
   捲動時產生景深。差距刻意壓在 20px 以內，超過人會像浮起來。 */
.hero-figure{pointer-events:none;will-change:transform}
/* ★ 2026-09-04 修正：原本是「置中容器 max-width:1600 + 固定內距 40」，
   內容落在 200–1720；但原稿的內容跨距是 120–1800（＝各區格線註解裡的
   「1680 = 1920-240」）。全站其他區都走 .container 的 6.25vw 規則，
   只有 Hero 還用舊算法 —— 正是本檔第 90 行註解警告過的「兩種算法會分岔」。
   改成同一條規則後，文案左緣與各區小標題對齊同一條垂直線。 */
.hero-inner{
  position:relative;z-index:2;
  width:100%;
  /* PSD：topic（書法）top=196、film（文案）top=208 —— 兩者不齊頭，差 12px。
     Hero 的 margin-top 是 --h-header = 120，所以內距 = 196 - 120 = 76。
     （PSD 的導覽列「矩形」高 122，比 --h-header 多 2px，那是另一件事，
       不能拿來算這裡的內距。） */
  padding:76px var(--inset) 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:40px;
}
/* 文案區為切圖（設計稿轉外框，字型不明），依「字級固定」原則使用 1x 固定寬度 */
/* PSD：film top=208，比 topic 的 196 低 12px */
.hero-copy{flex:0 0 auto;margin:12px 0 0;line-height:0}
.hero-copy img{width:468px;max-width:100%;height:auto}   /* 2026-09-05 縮到 80%（原 585） */
/* 書法圖 1x 為 600×293，依「字級固定」原則用固定寬度，不隨容器縮放 */
.hero-logo{flex:0 0 auto;width:480px;max-width:100%}   /* 2026-09-05 縮到 80%（原 600） */
.hero-logo{position:relative}
.hero-logo .title-main{width:100%}
/* 印章位置依原圖比例定位，換圖後只要比例不變就不用改 */
.hero-logo .title-seal{position:absolute;left:86.83%;top:74.4%;width:13.17%;height:auto}

/* ── 首屏進場編排 ─────────────────────────────────
   文案 → 書法揭開 → 印章蓋下 → 倒數卡浮起 → 數字翻牌
   全部寫在 no-preference 內，動畫未執行時各元素皆為完成狀態。 */
@media (prefers-reduced-motion:no-preference){

  /* 書法：軟邊遮罩由左掃到右，邊緣帶漸層，像墨暈開而非硬線擦過 */
  @keyframes brushReveal{
    from{-webkit-mask-position:100% 0; mask-position:100% 0}
    to  {-webkit-mask-position:0% 0;   mask-position:0% 0}
  }
  .hero-logo .title-main{
    -webkit-mask-image:linear-gradient(90deg,#000 0 33.33%,transparent 36.5%);
    mask-image:linear-gradient(90deg,#000 0 33.33%,transparent 36.5%);
    -webkit-mask-size:300% 100%; mask-size:300% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    animation:brushReveal .85s cubic-bezier(.3,.7,.25,1) .15s both;
  }

  /* 印章：書法寫完才蓋下，帶一點回彈與角度 */
  @keyframes sealStamp{
    from{opacity:0;transform:scale(1.5) rotate(-9deg)}
    62% {opacity:1;transform:scale(.94) rotate(2deg)}
    to  {opacity:1;transform:scale(1)   rotate(0)}
  }
  .hero-logo .title-seal{
    transform-origin:center center;
    animation:sealStamp .42s cubic-bezier(.3,1.5,.5,1) .95s both;
  }

  /* 文案：淡入並輕微上浮 */
  @keyframes riseIn{
    from{opacity:0;transform:translateY(16px)}
    to  {opacity:1;transform:none}
  }
  .hero-copy{animation:riseIn .6s cubic-bezier(.22,.8,.3,1) .05s both}

  /* 倒數卡：稍晚浮起。
     ★ fill 用 backwards 不用 both：both 在動畫結束後永遠鎖住 transform:none，
     會把下面 hover 微浮的 transform 蓋死；backwards 只負責開始前藏住，
     結束後把 transform 還給一般規則。
     ★ 2026-09-09：卡片本身「捲到才顯示」試過一輪又改回來——業主要的是
       「一開始畫面就能看到一點點卡片，捲到倒數數字那排，數字才開始翻」。
       卡片整體的顯示／進場動畫改回無條件（跟桌機、跟改動之前一樣，一律
       load 時就播），不再綁 .is-in；只有下面的 .cd-digit 翻牌與 JS 的
       拉霸滾動繼續綁 .is-in（IntersectionObserver 觀察 .cd-row，見 main.js），
       這樣「卡片先露出、數字捲到才跑」才會同時成立。
       ★ 這裡不會有「跳一下不見」的問題：這條動畫是無條件的、從第一次繪製
       就在跑，不是像數字那樣中途被 JS 加class 觸發。 */
  .countdown-card{animation:riseIn .58s cubic-bezier(.22,.8,.3,1) .45s backwards}
  /* 卡片跨斷點的位置補間（2026-09-06 使用者指定「位置變動時要有動畫」）。
     所有 ≥1200 的垂直錨已改成數值 top（auto 不能補間），跨 1439/1680/1920
     三條線時卡片會平滑滑到新位置而不是瞬移。只補位置，不補尺寸。 */
  .countdown-card{transition:top .45s ease, right .45s ease,
                  transform .25s ease, box-shadow .25s ease}
  /* 桌機 hover 微浮（2026-09-06 使用者拍板，提案 2）：
     暗示卡片可互動、把視線導回立即報名。觸控裝置（hover:none）不觸發。 */
  @media (hover:hover){
    .countdown-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 44px rgba(0,0,0,.62);
    }
  }

  /* 稻浪鏡頭落地（2026-09-06 使用者拍板，提案 3）：
     背景從 1.035 倍緩緩收到 1 倍，像空拍鏡頭落定。
     ★ 只縮不放（scale 恆 ≥1）→ 永遠不會露底；.hero 有 overflow:hidden 兜底。
     ★ 2026-09-09 三修才修對：這條動畫跟 JS 視差原本搶同一個 transform，
       動畫進行的 2.2s 內 CSS 動畫獨占、視差被凍結；動畫一結束 inline 的
       位移整個接上就是「抖一下」。前兩版都在 JS 端調接手的時序（結束後緩升／
       結束前預先爬升），錄影量測證明畫面上都還是一格內跳 60px——
       只要兩邊搶同一個屬性，怎麼排時序都有感。
       正解是不搶：keyframe 自己把視差位移包進來（var(--par-x/--par-y)，
       由 main.js 即時寫變數），動畫進行中視差就是活的，沒有凍結也沒有接縫。
       fill 仍用 backwards：結束後 transform 回到上方基底規則，同樣讀變數，
       所以接手那一格值完全相同。
     transform-origin 錨在底部：圖是貼底對齊的，往上長才不動地平線。 */
  @keyframes heroSettle{
    from{transform:translate3d(var(--par-x, 0px), var(--par-y, 0px), 0) scale(1.035)}
    to  {transform:translate3d(var(--par-x, 0px), var(--par-y, 0px), 0) scale(1)}
  }
  .hero-bg{transform-origin:center bottom;animation:heroSettle 2.2s cubic-bezier(.25,.6,.3,1) backwards}

  /* 攝影師剪影：稻浪落定後錯開淡入（2026-09-06 提案 b）。
     ★ 只動 opacity；transform 由 heroSettle 連同視差變數一起處理（見上）。
       剪影是 .hero 的第 2/3/4 個 div（第 1 個是 .hero-bg）。 */
  @keyframes figureIn{from{opacity:0}to{opacity:1}}
  /* ★ 剪影要跟稻浪一起做 heroSettle 縮放（同秒數同曲線同 origin）——
     只縮背景的話，落地那 2.2s 人物腳下的地面會滑動、像浮離地面（踩坑筆記有前科）。
     動畫清單兩條：淡入（各自延遲）＋落地（一律 0s，跟背景同步），
     animation-delay 用逗號分開對應。 */
  .hero-figure{
    transform-origin:center bottom;
    animation:figureIn .8s ease-out both,
              heroSettle 2.2s cubic-bezier(.25,.6,.3,1) backwards;
  }
  .hero-figure:nth-of-type(2){animation-delay:.35s, 0s}
  .hero-figure:nth-of-type(3){animation-delay:.5s, 0s}
  .hero-figure:nth-of-type(4){animation-delay:.65s, 0s}
}
/* ★ 2026-09-06 節奏收緊（提案 d）：整段開場從 ~2.0s 收到 ~1.75s ——
   文案 .05-.65、剪影 .35-1.45、書法 .15-1.0、卡片 .45-1.03、
   印章 .95-1.37、翻牌 .78-1.76、數字滾動（JS）.9-~2.0。 */

/* 倒數卡 */
/* 依 1x 原稿 index.jpg 量測（2x 的 index@2x.png 匯出時把這層關掉了）：
     卡片 x1540–1799（寬 260）、y678–995（高 317）
     右緣停在 1800 ＝ 距畫布右 120，與全站 6.25vw 同一條線
     卡底距 Hero 下緣（1030）35px
   ★ 精度：1x + JPEG，比其他區的 2x PNG 低一級，約 ±2px */
.countdown-card{
  position:absolute;z-index:3;right:var(--inset);
  bottom:35px;width:260px;min-height:320px;   /* 2026-09-06 使用者實量設計稿：260×320 */
  background:linear-gradient(180deg,rgba(24,24,22,.94),rgba(14,14,13,.96));
  border:1px solid rgba(212,189,125,.4);border-radius:14px;
  padding:20px 20px 22px;text-align:center;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
}
/* 原稿：四個字的墨水寬 24、字距 pitch 30.7、整串 117 寬 → 字級 26 ＋ 字距 .18em */
/* 原稿按鈕 160x48 */
.countdown-card .cd-btn{
  width:160px;height:48px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;   /* 2026-09-06 使用者實量設計稿，全斷點原值（.btn 基準是 16） */
}
/* 2026-09-06 使用者指定：報名 A 的立即報名 hover 不要位移
   （全站 .btn:hover 有 translateY(-2px)，這顆關掉；亮度與陰影照舊）。 */
.countdown-card .cd-btn:hover{transform:none}
/* 2026-09-06 使用者實量設計稿定字級：截止日期 28 粗、日期 24 粗、
   倒數/天 20、立即報名 22。★ 同日拍板「不縮放、全斷點用原值」——
   ×k 係數已拿掉，1200-1499 不再縮一階（en 版的 15/14 是版式特例，保留）。 */
.cd-label{font-size:28px;font-weight:700;letter-spacing:.18em;color:var(--c-cream)}
/* ★ 2026-09-11：業主翻譯是「Application Deadline」（21 字元含空格），使用者
   指定不刪字。原字級 28px + .18em 字距量出來 374px，卡片內距後只剩 220px
   可用，逐字放大到卡外。維持用字不變，只縮字級與字距（20px + .04em 量出
   211px，剛好塞進一行）——這是排版調整，不是譯文改動。中日韓不受影響，
   中文「截止日期」與日韓譯文本來就在一行內。 */
html[lang="en"] .cd-label{font-size:20px;letter-spacing:.04em}
.cd-date{font-family:var(--f-geo);font-size:24px;font-weight:700;color:var(--c-gold-line);margin-top:6px}   /* 不加字距：.04em 在 10 字上多撐 8.8px，寬度就對不上原稿的 115 */
/* ★ 2026-09-04：原本上下各一條淡褐線，但原稿卡片內只有「一條」線，
   在「倒數 119 天」那一列的下方，而且是實色 rgb(173,132,43) = #AD842B。
   量法：逐列統計「亮度高於上下三列」的像素占該列寬度的比例 ——
   橫跨整寬的才是線，文字只會局部命中。
   原稿命中 y892（100% 寬）一條；實作原本命中 y777、y879 兩條。 */
.cd-row{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:16px 0 18px;
  border-bottom:1px solid var(--c-gold-line);
  padding:14px 0;
}
.cd-side{font-size:20px;font-weight:700;color:var(--c-gold-line);writing-mode:vertical-rl}   /* 原稿『倒數』直排 28x40 → 字級 20 */
/* ── en 版：Countdown 九個字母直排會變一根柱子，改橫排重排 ──
   Countdown 獨占一行在數字上方；days 橫排跟在數字後、對齊數字底部。
   ja「残り」ko「남은」都是 2 字直排沒問題，只動 en。 */
html[lang="en"] .cd-side{writing-mode:horizontal-tb}
html[lang="en"] .cd-row{flex-wrap:wrap}
html[lang="en"] .cd-row .cd-side:first-child{flex-basis:100%;font-size:calc(15px * var(--k-md));letter-spacing:.14em;text-transform:uppercase}
html[lang="en"] .cd-row .cd-side:last-child{flex-basis:100%;font-size:calc(14px * var(--k-md));text-align:center;letter-spacing:.14em;text-transform:uppercase}
/* ★ 2026-09-11：這裡曾短暫試過把 days 移到數字右側同一行（省一行高度），
   但 days 三行式（Countdown／數字／days 各自一行）是 2026-09-06 上線至今
   的既有版面，使用者確認過就是要 days 在數字下面，不是同一行——上面那條
   註解「days 橫排跟在數字後」從第一個 commit 起就沒有真的被實作過，
   是註解寫錯，不是後來改掉的。這裡改回 flex-basis:100%，維持三行式。
   卡片高度的問題改從 .cd-label 的字級／字距下手（見下方），不動這裡。 */
/* 設計師提供的 num_X 本身就是完整翻牌格（深灰格＋白數字＋中線＋兩側轉軸），
   所以這裡不能再加底色或外框，直接顯示圖片即可 */
.cd-digits{display:flex;gap:5px;perspective:420px}   /* 原稿三格 x1589–1758：53 寬、間距 5 */
.cd-digit{display:block;width:53px}
.cd-digit img{width:100%;height:auto;display:block}

/* ① 載入時翻牌進場
   寫成漸進增強：預設就是完成狀態，動畫沒跑也看得到內容 */
@media (prefers-reduced-motion:no-preference){
  @keyframes cdFlipIn{
    from{transform:rotateX(-92deg);opacity:0}
    60% {transform:rotateX(12deg); opacity:1}
    to  {transform:rotateX(0);     opacity:1}
  }
  .cd-digit{transform-origin:center center}
  /* 同上一條卡片浮起的道理：both 在 .is-in 剛掛上時會立刻把數字跳回
     rotateX(-92deg)/opacity:0，若數字先前是正常顯示的（捲到之前），
     就會出現「數字先消失再翻回來」。改用 js-anim 預藏＋forwards。 */
  html.js-anim .cd-digit{opacity:0}
  .countdown-card.is-in .cd-digit{animation:cdFlipIn .62s cubic-bezier(.34,1.4,.5,1) forwards}
  /* ★ 2026-09-09 修正：這四條原本是 .cd-digit:nth-child(N){...}（2 個選擇器層級），
     優先級比上面 .countdown-card.is-in .cd-digit（3 個層級）低，animation 簡寫
     會把 animation-delay 隱性重設成 0，四條延遲全部被蓋掉、三格數字同時翻——
     使用者形容「同時翻出來、僵硬」就是這個。原本能生效是因為舊版動畫規則
     只掛在單一 class .cd-digit 上（1 層），比 nth-child（2 層）優先級低，
     這次加了 .countdown-card.is-in 前綴才讓關係反過來。
     修法：延遲規則補上同樣的前綴，優先級跟上面對齊，靠後（在檔案中寫在後面）
     決勝，不再被蓋掉。 */
  /* ★ 2026-09-09：起跑延遲抽成 --cd-lead。預設 .78s 是桌機「一載入就播」的
     開場節奏（文案 .05 → 卡片 .45 → 數字 .78）；手機是捲到才觸發、眼睛已經在
     那排上等，同樣空 .78s 就變成「先看到一排空的、再突然跳出來」（使用者實機回報）。
     JS 在捲到觸發那條路徑把它改成 .1s（見 main.js 02b），四格仍各錯開 .12s。 */
  .countdown-card.is-in .cd-digit:nth-child(1){animation-delay:var(--cd-lead, .78s)}
  .countdown-card.is-in .cd-digit:nth-child(2){animation-delay:calc(var(--cd-lead, .78s) + .12s)}
  .countdown-card.is-in .cd-digit:nth-child(3){animation-delay:calc(var(--cd-lead, .78s) + .24s)}
  .countdown-card.is-in .cd-digit:nth-child(n+4){animation-delay:calc(var(--cd-lead, .78s) + .36s)}
}
.cd-btn{display:block;width:100%;padding:12px 0}
/* （2026-09-06 曾在此加過「金光掃過」按鈕動畫，使用者實看後定調「有點醜」
    → 整段移除。不要再提案掃光類的按鈕特效。） */

/* ── 跨區裝飾：金色弧線 ───────────────────────────
   這張弧線在設計稿上橫跨活動消息、競賽理念、競賽流程三區（y930-2460），
   是一條連續曲線，切開後區塊高度一變接縫就會錯開，
   所以包成同一層當背景。圖本身即為 #151515 黑底，與區塊底色相同，銜接無縫。
   起點比活動消息上緣再高 35px（設計稿 1920 寬 → 1.82vw）。 */
.arc-band{
  position:relative;
  background:var(--c-black) url("../images/sections/arc-lines.webp")
             center -1.82vw / 100% auto no-repeat;
}
/* 註：弧線依寬度等比縮放，但三區高度由內容決定，兩者脫鉤 ——
   1920 時覆蓋 97%（同設計稿），1440 約 74%，螢幕越窄蓋得越少。
   曾試過撐滿整層（background-size:100% 100%），但變形程度會隨內容多寡改變，
   等於沒人能預測它長什麼樣，故不採用。
   維持等比：形狀永遠正確，且圖的下緣 250px 本就是空黑底，
   蓋不到底時只是弧線自然結束，不會出現斷線。 */
.arc-band > section{background:transparent}
/* ★ 2026-09-06 使用者定案：桌機弧線的 background-attachment:fixed 移除。
   手機已改 A 案（不依賴 fixed）、iPad 本來就會退化成 scroll ——
   留著只剩 Mac/Windows 一種平台有釘住效果，三平台三種樣。
   拿掉後弧線全平台一致：跟著內容捲、形狀永遠正確。 */

/* 07 規則辦法 + 08 創作主題 的金色細線 —— 同樣是一條跨兩區的連續曲線，
   拆開貼會在接縫處錯位，故一樣包成一層當背景。
   圖同為 #151515 黑底，與區塊底色相同。
   匯出時已請設計者把畫布上緣切齊 07 的上緣，所以這裡不必偏移。 */
.arc-band-2{
  /* z-index:1 —— 波浪往下超出 band 14px，而 09 是 DOM 上較後面的定位元素，
     不提高層級的話那 14px 會被 09 的底色蓋掉。 */
  position:relative;z-index:1;
  /* 2026-09-05 使用者指定：多重背景 —— 金色弧線在上、火車照片在下、最底是純黑
     背景色分開寫；多重背景 shorthand 只有最後一層可以帶 color，
     像 `..., var(--c-black)` 當獨立一層是非法值會被整段忽略。 */
  background-color:var(--c-black);
  background-image:url("../images/sections/arc-lines-2.webp");
  background-position:center top;
  background-size:100% auto;
  background-repeat:no-repeat;
}
/* 2026-09-05 視差提案：火車從 band 的背景層抽成 ::before 獨立圖層，
   JS 依捲動設定 --train-par（px），火車比頁面慢半拍、像進站。
   幾何同原本的背景寫法：contain → 高 = 100vw × 2214/3840 = 57.66vw、bottom -100px。
   z-index:0 在 section（z:1）之下、band 背景（弧線）之上 —— 疊序與原多重背景一致。
   overflow:hidden 讓位移後的火車不會戳出 band（原本 bottom -100 的裁切也靠它）。 */
.arc-band-2{overflow:hidden}
.arc-band-2::before{
  content:"";position:absolute;left:0;right:0;bottom:-100px;
  /* ★ 盒高不可用 vw 算！vw 含捲軸寬、背景圖卻照元素寬縮放，兩者差一個捲軸
     （實測 1440 視窗差 15px）→ 圖比盒矮、錨在盒底後圖頂縮進盒內，
     位置還隨捲軸有無浮動。改用 aspect-ratio 讓盒高跟圖同基準（元素寬）。
     舊的 height:57.66vw 留著當 aspect-ratio 不支援時的退路。 */
  height:57.66vw;
  aspect-ratio:3840/2214;height:auto;
  z-index:0;pointer-events:none;
  /* ★ 2026-09-06 拿掉原本疊在上緣的 160px 黑→透明漸層：
     火車圖自帶 alpha 淡出（頂部全透明、往下 1500px 漸變到不透明），
     多疊的黑漸層反而把底下的金色弧線沿水平線切斷（視差移動時切線還會跟著跑）。
     當初漸層要遮的「圖頂硬切邊」其實是圖檔第 0 列的 alpha 異常亮線 ——
     改把圖上移 8px、讓含亮線的圖頂被盒頂裁掉（top -8px；圖底那 8px 空隙
     落在 bottom:-100px 的 overflow 裁切區內，看不到）。 */
  background:url("../images/sections/arc-band-2-train.webp") center top -8px / 100% auto no-repeat;
  transform:translateY(var(--train-par, 0px));
  will-change:transform;
}
.arc-band-2 > section{background:transparent;position:relative;z-index:1}

/* 08 底的金色分隔線與青綠波浪 —— 2026-09-05 使用者指定：
   09 一併包進 .arc-band-2 之後，這兩個裝飾要跟著 08 底，不是 arc-band-2 底。
   故改掛在 .theme 上（section 08）。堆疊脈絡：::before(wave) 先畫、::after(line) 後畫，
   DOM 順序讓線畫在波浪之上。 */
.theme::before{
  content:"";position:absolute;left:0;bottom:-20px;z-index:0;
  width:48.96vw;height:13.49vw;          /* 940/1920、259/1920 */
  background:url("../images/sections/theme-wave.webp") 0 0 / 100% 100% no-repeat;
  pointer-events:none;
}
.theme::after{
  /* 2026-09-05 使用者指定：跟 .concept-rule 一樣的左內縮 6.25vw，
     右邊也用 6.25vw（原稿：金線右緣對齊圖框，不延伸到視窗邊）。 */
  content:"";position:absolute;left:var(--inset);right:var(--inset);bottom:0;
  height:1px;background:#AD842B;z-index:-1;
}

/* ══════════ 03 活動消息 ══════════ */
/* 依設計稿量測：卡片 696×84、水平間距 24、垂直間距 48、
   內文 15px/行高 24、日期與內文之間有分隔線、右側 40px 圓形箭頭鈕 */
.news{position:relative;padding:30px 0}   /* 上下內距統一 30（使用者 2026-09-05 指定）。
      原本上緣 96/112/70/32/33/47/38、下緣 104/42/90/33/52/61/59 各不相同 */
.news-viewport{position:relative;padding-inline:64px}
.news-track{
  display:grid;grid-template-columns:repeat(2,1fr);gap:48px 24px;
  max-width:1416px;margin-inline:auto;   /* 696×2 + 24 */
}
/* 只有一則時，卡片單獨待在左欄會整片偏一邊 —— 讓它跨兩欄再置中。
   刻意不用 justify-content：那個屬性會殘留到手機的 flex 捲動容器，
   造成「第一張捲不回去」的老毛病。 */
.news-track.is-single > .news-card{grid-column:1 / -1;max-width:696px;margin-inline:auto}
/* ★ 2026-09-09 業主改指定：3 則時第三張不要置中，改靠左排（留在自然的
   grid 位置），右下角空著沒關係。原本這裡有一條「奇數尾卡置中」規則
   （2026-09-06 定案），現在效果整個相反，直接移除，不留著兩者互相矛盾。
   is-odd-tail 這個 class 是專為那條規則存在的，JS 端也一併拿掉。 */
.news-card{
  position:relative;display:flex;align-items:center;
  min-height:84px;padding:0 68px 0 18px;
  background:#FFF0D0;color:#141412;   /* 2026-09-04 使用者指定。不沿用 --c-cream —— 那個變數已改成純白，作用在別處 */
  border:2px solid #C29434;border-radius:6px;
  cursor:pointer;text-align:left;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.news-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  border-color:#E5BC55;
}
.news-date{
  flex:none;width:96px;
  font-family:var(--f-geo);font-size:14px;font-weight:500;
  color:#141412;letter-spacing:.01em;
}
.news-text{
  flex:1;min-width:0;
  padding-left:20px;border-left:1px solid rgba(174,135,42,.45);
  /* 2026-09-05 使用者指定：所有寬度統一 14px（原本 1920 是 15、其餘 14.1） */
  font-size:14px;line-height:24px;font-weight:400;color:#2A2416;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-go{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#B8892A 0%,#986F13 55%,#7E5504 100%);
  color:#FFFDF6;
  display:grid;place-items:center;font-size:calc(17px * var(--k-md));line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.news-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;
  display:grid;place-items:center;
  color:var(--c-gold-mid);font-size:calc(38px * var(--k-lg));font-weight:300;line-height:1;
  transition:color .18s ease,transform .18s ease;
}
.news-arrow:hover{color:var(--c-gold-lt)}
.news-arrow.prev{left:0}
.news-arrow.next{right:0}
.news-arrow[disabled]{opacity:.25;cursor:default}
.news-dots{display:flex;justify-content:center;gap:10px;margin-top:34px}
.news-dots button{
  width:9px;height:9px;border-radius:50%;background:rgba(212,189,125,.35);
  transition:background .2s ease,transform .2s ease;
}
.news-dots button.is-active{background:var(--c-gold);transform:scale(1.25)}
/* 空狀態：沿用卡片的高度 84、圓角 6、金色框，改成虛線表示「這裡還沒有內容」。
   原本只有一行小字浮在整片黑底上，看起來像沒做完。 */
.news-empty{
  display:flex;align-items:center;justify-content:center;
  max-width:696px;margin-inline:auto;
  min-height:84px;padding:20px 24px;
  border:2px dashed rgba(194,148,52,.5);border-radius:6px;
  color:var(--c-text-dim);text-align:center;
  font-size:14px;line-height:1.7;
}

/* ══════════ 04 競賽理念 ══════════ */
/* 設計稿量測（1920 稿寬）：
   內容左右各留 120px（6.25%），比其他區更接近滿版
   文案 x120-763（643 寬）／照片 x840-1800（960×540，16:9）
   照片右緣停在 1800，右側 120px 留給浮動 CTA，不做滿版
   底部 2px 金色分隔線 #AD842C */
.concept{padding:0 0 30px}   /* 下內距統一 30；上緣由 .concept-grid 的 28 + .concept-copy 的 2 組成 */
/* 金色波浪：設計稿 x1076-1922（貼齊右緣、佔寬 44.1%）、
   y1962-2143（底部溢出區塊 23px ＝ 1.2vw）。
   以右下角定位，寬高皆隨視窗等比，任何寬度都與設計稿一致。
   疊在金色橫線與照片之上（橫線是 CSS 畫的，會被波浪蓋住，與設計稿相同）。 */
.concept-wave{
  position:absolute;right:0;
  /* 掛在 .concept-grid 的下緣（＝照片下緣），不是區塊底部。
     這樣照片、波浪、橫線三者的相對關係在任何斷點都鎖住。
     設計稿：波浪下緣在照片下緣再往下 93px，佔波浪高的 51.4%
     → bottom = -0.514 × 波浪高 = -0.514 × (44.1vw ÷ 4.67) = -4.85vw */
  bottom:-4.85vw;
  width:44.1vw;height:auto;
  z-index:2;pointer-events:none;
}
.concept-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,38.3fr) minmax(0,57.1fr);
  gap:clamp(24px,4.6vw,77px);
  align-items:start;
  /* 上內距 28 + .concept-copy 的 2 = 30，與其他六區一致（使用者 2026-09-05 指定）。
     照片也吃這個內距，所以標題與照片仍然貼齊。 */
  padding:28px var(--inset) 0;
}
/* ★ 2026-09-05：原本 padding-top:70，讓小標題比照片低 70px。
   PSD 實測：img_960x540px top=1508、mt（山形記號）top=1510 —— 原稿是齊的（差 2px）。
   同時 PSD 的首段（全球北回歸線…）top=1684，比記號低 174；
   實作原本只低 108，所以標題與內文太近。
   兩者一起修：內距 70→2 讓記號貼齊照片，
   小標題的下距 44→110 把首段留在原位（1840，與原稿相符）。
   ★ margin-bottom 寫在 .concept 之下而不是改 .sec-title 本身 ——
     那是七區共用元件，改它會動到另外六區。 */
.concept-copy{padding:2px 0 0}
/* 2026-09-05 使用者：副標題下邊距統一改由 .sec-title 基準 50 處理，這裡的 clamp 移除 */
.concept-copy p{color:#FFFFFF;margin-top:26px}   /* 2026-09-05 使用者指定：內文改成白色 */
.concept-copy p:first-of-type{margin-top:0}
.concept-photo{aspect-ratio:16/9;overflow:hidden}
/* 04 競賽理念 輕量進場（2026-09-06 使用者拍板「輕量版」）：
   照片是主角 —— 淡入＋上浮 20px；文字整塊輕淡入、不位移（給人讀的字不要動）。
   隱藏初始態只掛在 html.js-anim 下：JS 沒跑／關動效直接是完成狀態。
   translateY 不影響版面流，concept-wave 以格線下緣定位不受影響。 */
html.js-anim .concept-photo{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1);
}
html.js-anim .concept-photo.is-in{opacity:1;transform:none}
html.js-anim .concept-copy{opacity:0;transition:opacity .8s ease .12s}
html.js-anim .concept-copy.is-in{opacity:1}
/* 04 金色波浪＋08 青綠波浪：遮罩流入進場（2026-09-06 使用者提案）。
   同 hero 書法的 brushReveal 軟邊遮罩，波浪像「從左流進畫面」約 1.2s。
   隱藏初始態＝遮罩停在 100%（全遮），只在 html.js-anim 下；
   is-in 後跑 brushReveal（keyframes 定義在 hero 的 no-preference 區塊內——
   reduced-motion 時 js-anim 根本不會加上，所以取用不到也無妨）。
   08 的波浪是 .theme::before 偽元素，觀察對象是 .theme 本體（main.js ⑤）。 */
html.js-anim .concept-wave,
html.js-anim .theme::before{
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* 08 青綠波浪：由左往右流入（同書法方向） */
html.js-anim .theme::before{
  -webkit-mask-image:linear-gradient(105deg,#000 0 33.33%,transparent 36.5%);
  mask-image:linear-gradient(105deg,#000 0 33.33%,transparent 36.5%);
  -webkit-mask-position:100% 0;mask-position:100% 0;
}
html.js-anim .theme.is-in::before{
  animation:brushReveal 1.2s cubic-bezier(.3,.6,.25,1) .15s both;
}
/* ★ 04 金色波浪：方向相反 —— 由右往左流入（2026-09-06 使用者指正，
   原本跟青綠同向是錯的）。漸層鏡像（-105deg，黑端在右）、
   位置從 0%（透明端蓋住＝隱藏）掃到 100%（黑端蓋住＝現身）。 */
@keyframes brushRevealRTL{
  from{-webkit-mask-position:0% 0;   mask-position:0% 0}
  to  {-webkit-mask-position:100% 0; mask-position:100% 0}
}
html.js-anim .concept-wave{
  -webkit-mask-image:linear-gradient(-105deg,#000 0 33.33%,transparent 36.5%);
  mask-image:linear-gradient(-105deg,#000 0 33.33%,transparent 36.5%);
  -webkit-mask-position:0% 0;mask-position:0% 0;
}
html.js-anim .concept-wave.is-in{
  animation:brushRevealRTL 1.2s cubic-bezier(.3,.6,.25,1) .15s both;
}
.concept-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* 底部金色分隔線：自左側內縮處延伸到畫面右緣 */
.concept-rule{
  height:1px;background:#AD842C;   /* 2026-09-05 使用者指定：改回 1px */
  /* 設計稿為照片下緣再 30px（1920 稿寬 → 1.56%）。
     用等比值，橫線才會落在波浪內、被波浪穿過；
     固定 30px 的話窄螢幕會掉到波浪下方。 */
  margin:max(6px, 1.56vw) 0 0 var(--inset);
}

/* ══════════ 05 競賽流程 ══════════ */
/* 設計稿量測：圓形直徑 134、圓心間距 175、整列 x455-1464（寬 1009）
   連接線 2px #F6D98D 穿過圓心；圓下 26px 開始文字
   名稱與日期同為 13px，行距 24，名稱到第一行日期 30px */
.process{padding:30px 0}   /* 上下內距統一 30（使用者 2026-09-05 指定）。
      原本上緣 96/112/70/32/33/47/38、下緣 104/42/90/33/52/61/59 各不相同 */
.process-list{
  max-width:1010px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:41px;
  position:relative;text-align:center;
}
/* 連接線：位於圓心高度（圓直徑 134 → 半徑 67） */
.process-list::before{
  content:"";position:absolute;top:67px;left:67px;right:67px;height:2px;
  background:#F6D98D;
}
/* 圖檔本身就是完整的金圓（含球面光澤、外圈亮邊、背後的淡數字），
   所以這裡不再用 CSS 畫底色或加陰影 —— 疊上去會跟圖內的立體感打架。 */
.step-icon{
  display:block;width:134px;height:134px;margin:0 auto 26px;
  position:relative;z-index:1;
}
.step-icon img{display:block;width:100%;height:100%}
.process-step{position:relative;z-index:1}
/* ── 05 進場效果（2026-09-06，機制同 07 規則卡）──
   六步依序點亮（120ms 階梯）；桌機貫穿線在整列進場時從左伸到右。
   隱藏初始態只掛在 html.js-anim 下，JS 沒跑／關動效直接是完成狀態。 */
html.js-anim .process-step{
  opacity:0;transform:translateY(18px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.8,.3,1);
}
html.js-anim .process-step.is-in{opacity:1;transform:none}
html.js-anim .process-step:nth-child(2){transition-delay:.12s}
html.js-anim .process-step:nth-child(3){transition-delay:.24s}
html.js-anim .process-step:nth-child(4){transition-delay:.36s}
html.js-anim .process-step:nth-child(5){transition-delay:.48s}
html.js-anim .process-step:nth-child(6){transition-delay:.6s}
html.js-anim .process-list::before{
  transform:scaleX(0);transform-origin:left center;
  transition:transform 2s cubic-bezier(.25,.6,.35,1) .15s;   /* 2026-09-06 使用者：線要慢一點（原 1.1s） */
}
html.js-anim .process-list.is-in::before{transform:scaleX(1)}
.process-step h3{
  /* 2026-09-05 使用者指定 14px（原 13） */
  /* 2026-09-06 使用者指正：六個步驟標題（線上報名…頒獎盛典）
     整批用 --c-gold-line（#AD842B），原本錯套 --c-gold-lt 淺金 */
  font-size:14px;font-weight:700;color:var(--c-gold-line);
  letter-spacing:.06em;line-height:1.4;
}
.process-step p{
  /* 2026-09-05 使用者指定 14px（原 13） */
  /* 2026-09-05 使用者指定：內文改成白色 */
  font-size:14px;line-height:24px;color:#FFFFFF;
  margin-top:12px;
}
/* ★ 2026-09-11：英韓文把日期整句放進第一個 t() 欄位（語序與中文不同，無法沿用
   中文的三段斷法），第二、三段欄位改填一個半形空格（不能留空字串——index.php
   的 t() 把空字串視同「沒翻譯」，會整段退回中文，這正是使用者發現「時間軸出現
   中文日期」的根因）。這裡把 .process-step p 裡的 <br> 對英、韓文隱藏，
   那個半形空格才不會被 <br> 推成一行看得見的空白列。日文的三段式translation
   跟中文一樣是真的三段內容，不受影響。 */
html[lang="en"] .process-step p br,
html[lang="ko"] .process-step p br{display:none}

/* ══════════ 06 影片區 ══════════ */
/* 設計稿量測：影片帶 y2560-2876（高 316 ＝ 16.46vw）、四張照片等分
   播放鍵為 94px 白色圓環、線寬 6px，圓心位於帶高的 42%
   下方文字約 35px（原本做 20px，差距明顯） */
.video{position:relative;background:#0C0C0C}
.video-strip{display:grid;grid-template-columns:repeat(4,1fr)}
.video-strip img{
  width:100%;height:clamp(210px, 16.67vw, 340px);   /* 原稿實測帶高 320（320/1920 = 16.67%），原本寫 316 */
  object-fit:cover;opacity:.82;display:block;
}
.video-play{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:rgba(0,0,0,.18);transition:background .25s ease;
}
.video-play:hover{background:rgba(0,0,0,.32)}
.play-icon{
  width:94px;height:94px;border-radius:50%;
  border:6px solid rgba(255,255,255,.95);background:rgba(255,255,255,.1);
  display:grid;place-items:center;position:relative;
  transition:transform .22s ease,background .22s ease;
}
.play-icon::before{
  content:"";border-left:26px solid #fff;
  border-top:16px solid transparent;border-bottom:16px solid transparent;
  margin-left:7px;
}
.video-play:hover .play-icon{transform:scale(1.08);background:rgba(255,255,255,.26)}
.play-text{
  /* 2026-09-06 使用者實量：1920 時 22px（原誤植 34）。維持 ×k 隨筆電帶縮 */
  font-size:calc(22px * var(--k-lg));font-weight:500;color:#fff;letter-spacing:.12em;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}

/* ══════════ 07 規則辦法 ══════════ */
/* 設計稿量測：卡片 239 寬、間距 21、整列 x319-1598（寬 1279）
   卡面由 #EFC861 往下漸淡，約 70% 轉為全白
   標題 22px、說明 13px／行高 24；下載鈕 184×39 */
/* 間距鏈全部取自原稿整頁匯出檔（原始素材/index@2x.png）的逐像素量測，
   以「06 影片帶下緣 = 本 band 上緣」為基準（設計稿 1x y2880）：
     小標題金山上緣 +32   卡片上緣 +158.5   卡片下緣 +444
     下載鈕 +487〜+526    08 小標題 +592    band 下緣（金色分隔線）+1222 */
.rules{padding:30px 0}   /* 上下內距統一 30（使用者 2026-09-05 指定）。
      原本上緣 96/112/70/32/33/47/38、下緣 104/42/90/33/52/61/59 各不相同 */
.rule-cards{
  max-width:1280px;margin-inline:auto;
  /* 2026-09-05 使用者指定：改用 flex 排版（grid 的 gap 難調）。
     ≥1200：五張卡一列。calc((100% - 80px)/5) —— 80 = 4 gap × 20 */
  display:flex;flex-wrap:wrap;gap:20px;
}
.rule-cards > li{flex:1 1 calc((100% - 80px) / 5);min-width:0}
/* 卡片上緣要在 band+158.5，小標題佔 32+64、故其下距離為 62.5。
   ★ 不可改寫成 .rule-cards{margin-top:18.5px} —— 會與 .sec-title 的
     margin-bottom:44 發生外距塌陷，只取大的那個，18.5 會被無聲吃掉。 */
/* 2026-09-05 使用者：副標題下邊距統一改由 .sec-title 基準 50 處理，這裡的 62.5 移除 */
/* 以下數值全部取自設計稿卡片 2x 匯出檔（原始素材/rule_card_01@2x.png）
   的逐像素量測，沒有目測估計的成分。量測結論：
   ・金色是 125deg 的斜向光帶（左上與右下都是金、中間一條淺色帶斜穿）
     角度以殘差最小化求得：125deg 殘差 1.33/255，135deg 是 6.01，明顯不對
   ・金→白是硬邊，不是漸層，位置在距卡片上緣 195.5px
   ・卡片 240x285.5、圓角 30、描邊 2px #FFCA58 */
/* ★ 2026-09-05 重切：卡片切成上下兩個獨立盒子。
   - .rule-top：金色漸層 + 標題 + icon（高度固定，五張卡整齊）
   - .rule-bot：白底 + 內文（用 flex 撐滿列高剩下的空間）
   舊做法（單一卡片＋::before 蓋金色漸層）在文字長度差時金白比例會亂跑，
   多語系下更難維持一致，故改為結構性分開。 */
.rule-card{
  position:relative;width:100%;height:100%;
  display:flex;flex-direction:column;gap:0;
  text-align:center;color:#2A2109;
}
/* 此區不可點擊（業主確認不需要彈窗），故不做 hover 位移 ——
   有懸停回饋會讓人以為卡片點得下去。 */
/* 圓標直徑 50、圓心正好壓在卡片上緣（實測差 0.9px）。
   內部是放射漸層不是純色，數字是白色不是金色。 */
/* 2026-09-05 使用者指定重切：號碼圓圈改用 .rule-top::before + CSS counter，
   HTML 端移除 <span class="rule-no">，號碼由 counter 自動生成。
   宽高寫死 50、位置絕對定位（top:-25 讓圓中心切在 rule-top 頂緣、水平置中）。 */
.rule-cards{counter-reset:rulenum}
/* ── 07 進場效果（2026-09-06）────────────────────────
   只動 opacity/transform，不佔版面 —— 三種排版（5 欄／3+2／2×2+1）皆不受影響。
   隱藏初始態只在 html.js-anim 下生效：JS 沒跑或使用者關動效 → 直接是完成狀態。
   階梯延遲用 nth-child：DOM 順序在所有斷點都是視覺順序，同一組延遲通吃。 */
html.js-anim .rule-cards > li{
  opacity:0;transform:translateY(18px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.8,.3,1);
}
html.js-anim .rule-cards > li.is-in{opacity:1;transform:none}
html.js-anim .rule-cards > li:nth-child(2){transition-delay:.08s}
html.js-anim .rule-cards > li:nth-child(3){transition-delay:.16s}
html.js-anim .rule-cards > li:nth-child(4){transition-delay:.24s}
html.js-anim .rule-cards > li:nth-child(5){transition-delay:.32s}
/* 號碼圓圈：卡片落定後 300ms「蓋章」彈入（呼應 Hero 印章） */
html.js-anim .rule-cards > li .rule-top::before{
  opacity:0;transform:translateX(-50%) scale(1.6);
}
html.js-anim .rule-cards > li.is-in .rule-top::before{
  opacity:1;transform:translateX(-50%) scale(1);
  transition:opacity .3s ease .3s, transform .34s cubic-bezier(.3,1.5,.5,1) .3s;
}
html.js-anim .rule-cards > li:nth-child(2).is-in .rule-top::before{transition-delay:.38s,.38s}
html.js-anim .rule-cards > li:nth-child(3).is-in .rule-top::before{transition-delay:.46s,.46s}
html.js-anim .rule-cards > li:nth-child(4).is-in .rule-top::before{transition-delay:.54s,.54s}
html.js-anim .rule-cards > li:nth-child(5).is-in .rule-top::before{transition-delay:.62s,.62s}

/* ── 03 消息卡進場（機制同 07）─────────────────
   桌機 80ms 階梯；手機橫向滑動時，卡片被 scroll 到 viewport 外會失去 intersect，
   滑進畫面時自然觸發 is-in ——不需要為手機另外分支。 */
html.js-anim .theme-photos > li{
  opacity:0;transform:translateY(18px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.8,.3,1);
}
html.js-anim .theme-photos > li.is-in{opacity:1;transform:none}
/* ★ 消息卡不做進場動畫（2026-09-06 使用者定調，整個拿掉）：
   手機橫滑輪播會被浮入動畫弄得上下晃；桌機翻頁＋display 切換
   再疊動畫，狀態太多容易出怪事。消息區一律直接是完成狀態。 */

/* ── 08 四格照片對角階梯（1 → 4 → 2 → 3）──
   對角先起、平行後起，比 1→2→3→4 順序讀有節奏感。 */
html.js-anim .theme-photos > li:nth-child(2){transition-delay:.28s}
html.js-anim .theme-photos > li:nth-child(3){transition-delay:.42s}
html.js-anim .theme-photos > li:nth-child(4){transition-delay:.14s}
.rule-cards > li{counter-increment:rulenum}
.rule-top{position:relative}
.rule-top::before{
  content:counter(rulenum);
  position:absolute;top:-25px;left:50%;transform:translateX(-50%);
  width:50px;height:50px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 50% 50%,#3A3A3A 0%,#333 55%,#151515 100%);
  color:#FFFFFF;
  /* Jost 500 是替代 Century Gothic 30pt 的最佳搭配（見底下 .btn 註解） */
  font-family:var(--f-geo);font-size:calc(29.5px * var(--k-lg));font-weight:500;line-height:1;
  display:grid;place-items:center;
  border:2px solid #FFCA58;
}
.rule-top h3{font-size:calc(24px * var(--k-lg));font-weight:700;letter-spacing:.05em;line-height:1.35}
.rule-top{
  display:flex;flex-direction:column;align-items:center;
  padding:32px 16px 20px;
  border-radius:24px 24px 0 0;
  /* 2026-09-05：上下盒子黏在一起變一張長卡，中間那條分界線拿掉、
     所以上盒不畫下框、下盒不畫上框；兩塊的圓角只留在外側。 */
  border:2px solid #FFCA58;border-bottom:0;
  background:linear-gradient(125deg,
    #F4C556 0%, #F0CC6C 12%, #F7E19F 25%, #FDF4CF 38%, #FFFCE1 50%,
    #FDF4CE 62%, #F7E19F 75%, #F1CC6C 88%, #EEC253 100%);
}
.rule-bot{
  flex:1;                          /* 撐滿卡片列高剩下的空間，讓五張卡的下盒也齊高 */
  display:flex;align-items:center;justify-content:center;
  padding:18px 16px;min-height:140px;
  border-radius:0 0 24px 24px;
  border:2px solid #FFCA58;border-top:0;
  background:#FFFFFF;
}

/* 圖示高度固定 86，寬度隨圖 —— 原稿的圖示不是正方形（第 1 張是 110x86） */
/* 2026-09-05：第 2 顆 icon（紙筆）視覺重心偏左，微調往右讓水平置中看起來更對 */
.rule-cards li:nth-child(2) .rule-icon{transform:translateX(9px)}
.rule-icon{display:block;height:86px;margin:28px 0 0}
.rule-icon img{display:block;height:100%;width:auto}
/* 2026-09-05 使用者指定：14px、不強制斷行（原 16 × k-sm，且 markup 有 <br>） */
.rule-card p{font-size:14px;line-height:24px;color:#453A1C}
.rule-card p br{display:none}
/* ★ 2026-09-09 業主指定兩處要斷行（卡 1「等」之後、卡 4 逗號之後），
   只放行帶 br-keep 的 <br>，其餘維持 09-05 的不強制斷行。 */
.rule-card p br.br-keep{display:inline}
/* br-narrow：卡片寬度隨 vw 縮（(87.5vw − 80) / 5），第一行放不下時才放行第二個斷點。
   卡 1 需 13 字 182px、卡 4 第二行需 14 字 196px；文字寬 = 卡寬 − 4 邊框 − 32 內距，
   反推 196 → 卡 232 → 視窗 ≥ 1417。1417 以上兩行、以下三行（與原稿的三段斷法相同）。
   ≤767 的卡片同樣吃這條。 */
@media (max-width:1416px){ .rule-card p br.br-narrow{display:inline} }
/* ★ 2026-09-11：卡 1（rules.02-04）與卡 4（rules.12-14）在英日韓三個語系都是
   整句塞進第一個欄位，第二、三欄改填半形空格（原因同上，避免 t() 空字串
   退回中文）。這裡把這兩張卡專屬的 br-keep／br-narrow 對三個語系隱藏——
   選擇器只挑這兩個 class，不動卡 2/3/5 用的無 class 一般 <br>（那三張卡
   三語系都是真的兩段內容，要保留斷行）。用 [lang] 屬性選擇器，
   特異度比上面兩條規則高，不受宣告順序影響，中文（zh-Hant）不受影響。 */
html[lang="en"] .rule-card p br.br-keep, html[lang="en"] .rule-card p br.br-narrow,
html[lang="ja"] .rule-card p br.br-keep, html[lang="ja"] .rule-card p br.br-narrow,
html[lang="ko"] .rule-card p br.br-keep, html[lang="ko"] .rule-card p br.br-narrow{display:none}
.rules-download{text-align:center;margin-top:43px}
/* ★ 2026-09-05 修正：原本沿用 .btn-gold（淺金底＋深咖啡字），
   設計稿其實是「深金漸層底＋白字」，而且下載符號是實心箭頭加底線，
   不是原本用的 emoji ⬇（各系統長相不一，Windows 還會變成彩色）。
   設計稿量測（1x）：184x39、全圓角、底色由上而下 #AE852C → #855B02、字白色。 */
.rules-download .btn{
  min-width:184px;height:39px;padding:0 26px;      /* 實測 184x39 */
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,#AE852C 0%,#9A741C 52%,#855B02 100%);
  color:#FFFFFF;
  box-shadow:0 3px 12px rgba(0,0,0,.5);
}
/* 用 mask + currentColor，圖示就跟著文字顏色走，不必另外準備反白版 */
.dl-ico{
  flex:none;width:16px;height:19px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M7.6 0h4.8v9.8h4.3L10 17.6 3.3 9.8h4.3z'/%3E%3Crect x='1.4' y='20.4' width='17.2' height='3.1' rx='1.55'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M7.6 0h4.8v9.8h4.3L10 17.6 3.3 9.8h4.3z'/%3E%3Crect x='1.4' y='20.4' width='17.2' height='3.1' rx='1.55'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ══════════ 08 創作主題 ══════════ */
/* 全部取自原稿整頁匯出檔的逐像素量測（座標為設計稿 1x，band 上緣 = y2880）：
     小標題金山上緣 3472   照片格上緣 3476   導言 3595   清單首行 3639
     照片格下緣 4050       金色分隔線（本區下緣）4102
   照片：640 x 278.5，欄間隙 6、列間隙 17，整格 x513-1800（寬 1287）
   左欄文字：x120 起，導言字身 19（→22px）、清單字身 17（→20px）、行高 44
   圓標：直徑 39、距角 13.5、底色 #AD842C
   說明：標題字身 17.5（→20px）、子行字身 13（→15px/行高 24），左內縮 34、末行距底 19
   文字顏色實測皆為純白（看似偏灰是小字抗鋸齒） */
.theme{background:var(--c-black);padding:30px 0}   /* 上下內距統一 30（使用者 2026-09-05 指定）。
      原本上緣 96/112/70/32/33/47/38、下緣 104/42/90/33/52/61/59 各不相同 */
.theme-grid{
  width:100%;padding-inline:var(--inset);
  display:grid;
  grid-template-columns:minmax(0,393fr) minmax(0,1287fr);   /* 393+1287 = 1680 = 1920-240 */
  gap:0;align-items:start;
}
/* 2026-09-05 使用者：副標題下邊距統一改由 .sec-title 基準 50 處理，這裡的 54 移除 */
/* 左欄要替青綠波浪留位子。
   ★ 這一區的高度是右邊照片撐出來的，而照片用 aspect-ratio，高度跟著視窗寬等比縮；
     左欄文字的字級各斷點固定、不縮。視窗一窄，照片變矮、文字沒變，
     文字的下緣就一路壓進波浪裡 —— 攝影師剪影會直接騎到「4.多元族群生活文化」上面。
     實測 1600/1440/1280 三個寬度都會撞到，1920 反而看不出來。
   所以左欄自己把「波浪高度 13.49vw，扣掉區塊本來就有的 52px 下內距，
   再留 31px 淨空」要的空間補成 padding，照片不夠高時就換左欄來撐高這一列。
   1920 時 331+236 = 567 ≒ 照片列的 569，剛好不改變原稿已對好的版面。 */
.theme-copy{padding-bottom:calc(13.49vw - 26px)}   /* 26 = 區塊下內距 52 − 原稿淨空 28 */
/* 08 與 09 之間的金色分隔線見 .arc-band-2::before —— 它必須畫在 band 上，
   不能畫在 .theme 上，否則沒辦法讓青綠波浪蓋過它。原因寫在那裡。 */
.theme-lead{font-size:calc(22px * var(--k-lg));line-height:1.3;font-weight:700;color:#FFFFFF;margin-bottom:7px}
.theme-list{counter-reset:t}
.theme-list li{
  counter-increment:t;color:#FFFFFF;
  font-size:calc(20px * var(--k-md));line-height:44px;
}
/* 數字與文字同一行、同起點（設計稿上整行都從 x120 開始），故不用絕對定位 */
.theme-list li::before{
  content:counter(t) ".";
  font-family:var(--f-geo);font-weight:500;
}

.theme-photos{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:5px;margin-top:4px;           /* 四張照片幾乎貼齊、留 5px 縫作為視覺分隔（2026-09-05 使用者指定，對齊原稿） */
}
.theme-photos figure{
  position:relative;overflow:hidden;
  aspect-ratio:1280/557;            /* 640 x 278.5 */
}
/* 只有 2×2 的外圍四角保留 26 圓角，四張圖之間全部直角 */
.theme-photos li:nth-child(1) figure{border-radius:26px 0 0 0}
.theme-photos li:nth-child(2) figure{border-radius:0 26px 0 0}
.theme-photos li:nth-child(3) figure{border-radius:0 0 0 26px}
.theme-photos li:nth-child(4) figure{border-radius:0 0 26px 0}
.theme-photos img{width:100%;height:100%;object-fit:cover}

/* 編號圓標：奇數張在左上、偶數張在右上（設計稿上一律靠外側） */
.theme-no{
  position:absolute;top:13.5px;z-index:2;
  width:39px;height:39px;border-radius:50%;
  background:#AD842C;color:#FFFFFF;
  font-family:var(--f-geo);font-size:calc(23px * var(--k-lg));font-weight:500;line-height:1;
  display:grid;place-items:center;
}
.theme-photos li:nth-child(odd)  .theme-no{left:13.5px}
.theme-photos li:nth-child(even) .theme-no{right:13.5px}

.theme-photos figcaption{
  position:absolute;inset:auto 0 13px 0;padding:0 20px 0 34px;
  z-index:2;
}
.theme-photos figure::after{        /* 說明文字後方的暗漸層 */
  content:"";position:absolute;inset:auto 0 0 0;height:58%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.86));
  z-index:1;
}
.theme-photos figcaption b{
  display:block;font-size:18px;line-height:1.4;color:#FFFFFF;letter-spacing:.04em;
}
.theme-photos figcaption span{
  display:block;font-size:14px;line-height:18px;color:#FFFFFF;margin-top:4px;
}

/* 08 左欄在 1600 以下降一級。
   ★ 原因不是「窄螢幕字要小」，是原稿比例在這一區被打破了。
     實測 1440：卡片下緣 467（等比應為 458 ✓）、波浪頂 323（應為 303 ✓）、
     左欄文字下緣 397（應為 282 ✗，低了 115）。
     版面與裝飾都用 vw、跟著縮；只有文字用 px、不縮，
     在 1440 相對放大了 33%，於是文字沉進波浪、剪影騎到最後一行字上。
     降這一級之後文字塊 364 → 約 248，比例回到原稿。
   斷點取 1700：文字塊不降是 369、降了是 302，原稿等比在 1713 處剛好落在
   兩者中間，所以在這裡切換，兩邊的誤差最小（各約 ±35）。
   1700 以上完全不受影響，1920 與原稿逐像素一致（區塊高 663、卡片下緣 611）。 */
/* ★ 2026-09-05：原本是 1699，跟著字級變化點一起移到 1499。
   這三條全都乘 var(--k-*)，存在目的就是「字級縮了行高與間距跟著收」，
   必須與 --k 的變化點同步，否則 1500–1699 會變成
   「字沒縮、但行高用縮過的值」。 */
@media (max-width:1499px) and (min-width:1200px){
  /* 字級已改由全站的 --k-* 曲線處理，這裡只留跟版面有關的兩項：
     行高（清單的 44 是原稿在 1920 的值，字縮了行高也要跟著收）
     與小標下方間距。 */
  .theme-list li{line-height:calc(44px * var(--k-md))}
  .theme-copy{padding-bottom:calc(13.49vw - 24px)}
}

/* ══════════ 09 臺灣之東地圖 ══════════ */
/* 全部取自原稿整頁匯出檔的逐像素量測（設計稿 1x 座標）：
     區塊 y4102（金色分隔線）–4890，高 788
     小標題金山 +47   文案首行字身 +180／行距 28   藥丸格首列 +165
     台灣地圖 438x676，左上角 (606, +51)  ← 以圖上藍色花蓮區與原稿比對，比例 1.0000
     背景照片 1920x1103，貼齊左緣，上緣在設計稿 y3888（比本區上緣高 214）
       ← 以整條垂直亮度剖面搜尋最佳位移求得，相關 0.667
     藥丸 202x43，欄距 48、列距 31.5，格線左緣 x1160
   欄位：120–606（文案）│606–1044（地圖）│1160–1612（藥丸），
   右側到 1800 之間的 188 是原稿就有的留白。 */
.map{
  position:relative;
  /* 2026-09-05 使用者指定：原本的火車背景圖拿掉（已整併到 .arc-band-2 的多重背景） */
  background:var(--c-black);
  padding:30px 0;   /* 上下內距統一 30（使用者 2026-09-05 指定） */
}
/* 2026-09-05 使用者重新規劃：
   ≥992 三等分一列 [copy | map | 8 buttons]
   <992 兩列：[copy + map] 100% ／ [8 buttons] 100%
   全部改用 flex，方便後續用視覺語言描述調整 */
.map-inner{
  position:relative;z-index:1;
  width:100%;padding-inline:var(--inset);
  display:flex;flex-wrap:wrap;
  gap:0;
  align-items:center;   /* 2026-09-05 使用者指定：三塊內容一律垂直置中對齊
                           ★ 2026-09-09 業主要求左欄往上 → 桌機的 .map-copy 改 align-self:flex-start
                             （見下方 ≥1200 區塊），藥丸維持置中，與原稿一致 */
}
.map-copy{flex:1 1 0;min-width:0}
.map-figure{flex:1 1 0}
.map-links{flex:1 1 0}

/* 2026-09-05 使用者：副標題下邊距統一改由 .sec-title 基準 50 處理，這裡的 0 移除 */
.map-copy p{font-size:calc(19px * var(--k-md));line-height:28px;color:#FFFFFF;margin:0 0 49px}
.map-copy .btn{
  /* 2026-09-06 P2-2：與倒數卡「立即報名」統一為 160×48（使用者指定取大的那組） */
  min-width:160px;height:48px;padding:0 34px;
  display:inline-flex;align-items:center;justify-content:center;
}

/* 地圖已是去背 PNG，不再需要先前那個橢圓遮罩。
   ★ 設計師換稿後的新地圖比原稿那張窄長（0.560 vs 0.648）。
     原稿裡沒有新地圖，所以沒有可依據的擺法。
     09-04 選擇「維持原稿的地圖高度 676」—— 這是錯的（2026-09-09 業主抓到地圖切到火車）：
     676 是 PSD 圖層框的高，舊圖層框下方有一大段透明留白，島嶼本身只有約 520 高；
     新圖是緊貼去背的，撐到 676 等於把島放大 1.34 倍，尾端就壓進火車車頂 180px。
     依據：原稿 1x 圖與現況截圖比「花蓮＋臺東」綠色區高度，327 vs 437 → 0.748。
     高度用 vw 不用 px：欄寬會跟著視窗縮，高度寫死的話窄視窗就會撐爆欄位。 */
.map-figure{display:flex;justify-content:center}
/* ★ 2026-09-06 P1-3：改用寬度基準做 1199/1200 的尺寸收斂。
   原式 calc(330px + 2.53vw)：1200 → 360（= 1199 那側的 30vw）；1920 → 378.5（= 圖層框高 676 等值）。
   ★ 2026-09-09 方法 B（業主選定）：整式 ×0.748 縮回原稿的島嶼大小 —— 1920 → 283 寬／506 高，
     綠色區高度與原稿一致。代價：1200 那側變 269，跨 1199/1200 會縮 25%（09-06 的無縫收斂失效，
     使用者知情）。min(100%, …) 防欄位比公式窄時變形（height:auto 保比例）。 */
.map-figure img{display:block;width:min(100%, calc((330px + 2.53vw) * .748));height:auto}

/* ★ 2026-09-09 方法 B 的另一半：區塊高度回到原稿的 788。
   火車是 .arc-band-2::before、錨在 band 底，車頂在「band 底 − (15.78vw − 100px)」處
   （火車圖高 57.66vw，車頂在圖高 72.6% 處，圖底再往下藏 100px）。
   地圖縮小後區塊若跟著縮，火車會等量上浮、又壓回來，所以要給最低高度：
     需要高度 = 30 + 地圖高 + 呼吸放大 13 + 留白 15 + (15.78vw − 100)
   整理成一次式 calc(335px + 23.6vw)：1920 → 788（＝原稿）、1440 → 675、1280 → 637。
   實測尾端離車頂：1920 約 40px、1440 約 15px、1280 約 8px。
   內距仍是 30（09-05 的統一值不動），多出來的高度落在地圖下方、火車上方，與原稿相同。
   只鎖 ≥1200：<1200 地圖是裝飾、區塊高度另有 .map-copy／.map-inner 的 min-height 在管。 */
@media (min-width:1200px){
  .map{min-height:calc(335px + 23.6vw)}
  /* 業主 2026-09-09：左欄整塊往上。原稿標題在區塊 +47、地圖 +51，本來就齊頂；
     置中時標題會落在亮田上幾乎看不見，靠上後回到深色山區。 */
  .map-copy{align-self:flex-start}
}

/* 台灣地圖呼吸動畫：4.5s 一循環、scale 只有 2%、微弱光暈。
   包在 prefers-reduced-motion:no-preference 內——省電／減少動效模式下完全靜止。 */
@media (prefers-reduced-motion:no-preference){
  @keyframes mapBreath{
    0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,252,226,0))}
    50%{transform:scale(1.04);filter:drop-shadow(0 0 18px rgba(255,252,226,.16))}
  }
  .map-figure img{
    animation:mapBreath 4.5s ease-in-out infinite;
    will-change:transform,filter;
    transform-origin:center center;
  }
}

.map-links{display:flex;flex-wrap:wrap;gap:31.5px 48px}
/* ★ flex-basis 用 calc(50% - 24px) 讓兩顆一列（gap 48 → 每顆讓 24）；
   min-width:0 沿用原本用途：Firefox 下項目最小尺寸預設是 min-content，
   「台東縣政府觀光旅遊網」十字整串會撐爆欄位，min-width:0 解除這個下限。 */
.map-links li{flex:1 1 calc(50% - 24px);min-width:0}
.map-links a{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:43px;padding:0 12px 0 52px;   /* 左側 52 讓給水滴（設計稿水滴距藥丸左緣 20，等比換算 16.5） */
  /* 2026-09-05 使用者指定：改為設計稿的深金漸層 + 白字（樣本 btn_01.png 逐像素量測：頂 #AD842B → 底 #503700） */
  background:linear-gradient(180deg,#AD842B 0%,#503700 100%);color:#FFFFFF;
  /* 字級統一 16px、最多兩行 —— 原稿是逐顆縮字級硬塞的，
     但那個做法換成英日韓一定會再壞一次。統一規則對任何語言都成立。 */
  font-size:calc(16px * var(--k-sm));font-weight:700;line-height:1.2;text-align:center;
  /* 中文預設可在任意字之間斷行，瀏覽器會貪心塞滿再斷 ——
     「台東縣政府觀光旅遊網」會變成 9+1，最後一行只剩一個「網」字。
     keep-all 關掉任意斷點，再由 markup 裡的 <wbr> 指定唯一斷點，
     就能穩定斷成 5+5（原稿即為此）。舊瀏覽器一樣成立，
     不像 text-wrap:balance 要看支援度。 */
  word-break:keep-all;
  border-radius:999px;   /* 藥丸／膠囊形狀（2026-09-05 使用者指定，對齊設計稿） */
  box-shadow:0 3px 10px rgba(0,0,0,.45);
  transition:transform .18s ease,filter .18s ease;
}
.map-links a:hover{transform:translateY(-2px);filter:brightness(1.06)}
/* 09 八顆藥丸逐顆進場（2026-09-06 使用者拍板）：淡入＋上浮 12px、錯開 60ms，
   八顆約 0.9s 進完（配菜節奏，比 05/07 快）。
   ★ 進場掛在 li 上，不掛 a —— a 的 transform 是 hover 微浮在用的，疊上會互相蓋。
   隱藏初始態只在 html.js-anim 下：JS 沒跑／關動效直接完成態。地圖不參與（已有呼吸）。 */
html.js-anim .map-links li{
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.8,.3,1);
}
html.js-anim .map-links li.is-in{opacity:1;transform:none}
html.js-anim .map-links li:nth-child(2){transition-delay:.06s}
html.js-anim .map-links li:nth-child(3){transition-delay:.12s}
html.js-anim .map-links li:nth-child(4){transition-delay:.18s}
html.js-anim .map-links li:nth-child(5){transition-delay:.24s}
html.js-anim .map-links li:nth-child(6){transition-delay:.3s}
html.js-anim .map-links li:nth-child(7){transition-delay:.36s}
html.js-anim .map-links li:nth-child(8){transition-delay:.42s}
/* ★ 2026-09-05 修正：原本是 15x20 的深色小水滴、中間點一顆亮點，
   跟設計稿差很多。設計稿量測（1x）：
     水滴 37x51、淺米色 #DBD696、中央是「挖空」的圓（看得到藥丸的金色漸層）
     藥丸高 52，水滴比藥丸還高、往上凸出約 8.5px，尖端停在藥丸下緣上方 9px
   做法：內嵌 SVG 當背景圖，fill-rule:evenodd 讓中央圓真的透空，
   金色漸層才會從洞裡透出來（用 CSS 疊色塊做不到，藥丸是漸層不是純色）。 */
.map-links i{
  /* 2026-09-05 依 btn_01.png 樣本量測重對：ref 208×56 藥丸中的水滴 36×50，
     頂 y=0（凸出 8）、左 x=25（距藥丸左緣 21）。等比換算到 43-tall 藥丸：
     37.5% 高 → 21×43/56=16.1 (left 16)、8×43/56=6.14 (top -6)、
     50×43/56=38.4 (h 38)、36×43/56=27.6 (w 28) */
  position:absolute;left:11px;top:-23px;
  width:30px;height:70px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='%23DBD696' fill-rule='evenodd' d='M12 0C5.373 0 0 5.373 0 12c0 8.4 12 20 12 20s12-11.6 12-20C24 5.373 18.627 0 12 0Zm0 6.7a5.3 5.3 0 1 0 0 10.6 5.3 5.3 0 0 0 0-10.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
}

/* ═══════ 09 map RWD（2026-09-05 內容分級重規劃）═══════
   階級：copy+CTA 主角 ／ 八藥丸 工具 ／ 台灣地圖 <1200 一律是「裝飾」不是欄位。

   ≥1200   基準三欄（copy | map | buttons）——唯一地圖當正式欄位的版面
   <1200   單一機制：.map-inner 走 display:block 文字流，
           地圖 absolute 疊右側 z:-1（只給寬度、永不變形、不參與版面運算），
           藥丸固定 150 寬 + flex-wrap + 置中 —— 容器夠寬自然 4×2、不夠自然 2×4，
           不寫「幾欄」規則，斷點自己浮現。
   可調旋鈕只有三個：地圖寬、地圖位置（top/left）、copy 的 padding-right。 */

/* <1200 共用：文字流 + 裝飾地圖 + 固定寬藥丸 */
@media (max-width:1199px){
  .map-inner{display:block}
  .map-copy{
    padding-right:calc(18vw + 12px);
    /* 保留地圖高度：地圖只有寬度，高 = 寬 × 1050/588 ≈ 1.786，top:-18 → 底緣 = 高-18。
       copy 至少撐到地圖底，藥丸永遠從地圖下方開始，不會蓋到路線資訊。 */
    min-height:calc(170px * 1.786 - 18px);
  }
  .map-copy > .sec-title{margin-bottom:15px}
  .map-figure{position:absolute;top:-18px;left:calc(49vw + 12px);width:170px;z-index:-1}
  .map-figure img{width:100%;height:auto;display:block}
  .map-links{gap:15px;justify-content:center;margin:60px auto 0}
  .map-links li{flex:0 0 150px}
  .map-links a{font-size:12px;padding:10px 8px 10px 40px}
}

/* ≤599：容器最窄，藥丸群鎖 2 欄（150×2 + gap15 = 315） */
@media (max-width:599px){
  .map-links{max-width:315px}
}

/* 600-767：地圖放大一點；藥丸群 4×2／2×4 自然切換 */
@media (min-width:600px) and (max-width:767px){
  .map-figure{width:clamp(200px, 24vw, 280px)}
  .map-copy{
    padding-right:calc(24vw + 24px);
    min-height:calc(clamp(200px, 24vw, 280px) * 1.786 - 18px);   /* 同上：撐到地圖底緣 */
  }
}

/* 768-1199：藥丸收進左欄 3×3（1 2 3 / 4 5 6 / 7 8）、排在前往報名下面，
   右側整條高度讓給地圖、地圖順勢變大。
   地圖寬 = min(30vw, 內容寬 - 藥丸 480 - 間距 30)：永遠不會壓到藥丸。
   87.5vw = 100vw - 2×6.25vw（此範圍 6.25vw 一定 > 20px）。 */
@media (min-width:768px) and (max-width:1199px){
  .map-figure{
    left:auto;right:6.25vw;top:0;
    width:min(30vw, calc(87.5vw - 510px));
  }
  .map-copy{
    padding-right:calc(min(30vw, 87.5vw - 510px) + 24px);
    min-height:0;
  }
  .map-links{max-width:480px;margin:24px 0 0;justify-content:flex-start}   /* 150×3 + 15×2 = 480 → 3 欄 */
  /* 區塊高度至少包住地圖（地圖高 = 寬 × 1050/588 ≈ 1.786） */
  .map-inner{min-height:calc(min(30vw, 87.5vw - 510px) * 1.786 + 30px)}
}

/* 768-880：藥丸暫回 2 欄（315），地圖從 162 拿回 230px+（P1-2 選 a）。
   保留量從 510（3 欄 480+30）降到 345（2 欄 315+30），公式同一套。 */
@media (min-width:768px) and (max-width:880px){
  .map-links{max-width:315px}
  .map-figure{width:min(30vw, calc(87.5vw - 345px))}
  .map-copy{padding-right:calc(min(30vw, 87.5vw - 345px) + 24px)}
  .map-inner{min-height:calc(min(30vw, 87.5vw - 345px) * 1.786 + 30px)}
}

/* ══════════ 10 評審介紹 ══════════ */
/* 逐像素量自原稿整頁匯出檔（設計稿 1x）：
     區塊 4890–5490（高 600）  小標題金山 +38   卡片首列 +143
     卡片 271x398.5、間距 9、整列 120–1800
     照片 271x189.5   卡身底 #F1F1F1
     姓名／國名 #B28D3E、字身 17（→20px）、兩行間距 21.5
     國旗 32x21，貼右緣、與國名同一列
     分隔線 2px #BC9C56，左右與卡身內距切齊
     內文 字身 11.5（→13px）／行高 22 */
.judges{background:var(--c-black);padding:30px 0}   /* 上下內距統一 30（使用者 2026-09-05 指定）。
      原本上緣 96/112/70/32/33/47/38、下緣 104/42/90/33/52/61/59 各不相同 */
/* 2026-09-05 使用者：副標題下邊距統一改由 .sec-title 基準 50 處理，這裡的 41 移除 */
/* grid-auto-rows:1fr —— 換成三欄／兩欄後會排成兩列，
   格線的每一列各自算高，兩列會不等高（950 時 413 vs 435）。 */
/* 2026-10-14：評審 6 → 5 位，原本 repeat(6,1fr) 會在最右邊空一格 */
.judge-list{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;grid-auto-rows:1fr}
.judge{
  background:#F1F1F1;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;
}
.judge img{width:100%;aspect-ratio:271/189.5;object-fit:cover;object-position:center 22%}
/* 間距鏈（皆為原稿實測，卡身上緣 = 照片下緣 5222.5）：
     姓名字身 +18.5   姓名／國名行距 21.5   分隔線 5296.5（2px）
     內文首行字身 5313、行高 22、最多 5 行（卡 6）  卡片下緣 5431 */
.judge-body{padding:16.25px 20px 10px 22px}
.judge-body h3{
  /* 原稿的英文姓名是 Century Gothic，以 Jost 替代、字重 500：
       Christopher Nolan 154（原稿 155）、Kristopher King Caldera 202（原稿 204）
     若照原本寫成 Noto Sans TC 20px/700，最長的那個會變成 234px、
     超過 230 的內容寬而折行，整列卡片就跟著高出一個行高。 */
  font-family:var(--f-geo);font-size:calc(19px * var(--k-md));font-weight:500;
  color:#B28D3E;line-height:21.5px;
  position:relative;
  padding-bottom:14.75px;border-bottom:2px solid #BC9C56;
}
/* 2026-10-16 Ivy 指定：國籍比姓名小一級（原稿兩者同為 19），改用 --fs-xs 14px */
.judge-country{display:block;font-size:var(--fs-xs);font-weight:500;color:#B28D3E;line-height:21.5px}
/* 國旗是原稿裡的實圖（32x21），直接從整頁匯出檔切出來，
   不再用 CSS 拼色塊 —— 英國與馬來西亞的旗面拼不出來。
   ★ 選擇器要壓過 .judge img{width:100%}，只寫 .flag 權重不夠。 */
.judge-body img.flag{
  position:absolute;right:0;bottom:14.75px;
  width:32px;height:21px;display:block;
}
.judge-body p{font-size:13px;line-height:22px;color:#6E6E6E;margin-top:9.25px}
.judge-role{font-weight:700}   /* 2026-10-21 Ivy 指定：頭銜加粗 */

/* ══════════ 11 Footer ══════════ */
/* 逐像素量自原稿整頁匯出檔（設計稿 1x）：
     頁尾 5490–5740；上半深色漸層 #5A461A → #151515（5490–5690），
     金色版權列 5690–5740（高 50、#94701E）
     三欄文字左緣 439／746／1077，分隔線在 x706、x1037（1px 淺灰）
     整塊 439–1480（寬 1041）置中，頁面中線 960、區塊中線 959.5
     欄1/欄2/欄3 寬 267／331／443，第 2、3 欄左內距 40
     正文字身 13.5（→16px）／行高 18，段距 12
     英文行字身 10.5（→12px）
     社群圖示 41x41、間距 14.5，y5572 —— 五個圖示皆自原稿切出，
     兩個品牌標與 IG 的漸層框用 CSS 畫不出來 */
/* 漸層是純垂直的（橫向實測完全均勻），色階逐點量自原稿。
   ★ background-size 必須是 calc(100% - 50px)：漸層只覆蓋金色版權列「以上」那 200px。
     原本套在整個 .site-footer 上，等於把 200px 的漸層拉成 250px，
     越往下越偏亮 —— 底部量到 (35,30,21)，原稿是 (16,17,21)。 */
.site-footer{
  color:#FFFFFF;   /* 2026-09-05 使用者指定：頁尾文字改成白色 */
  background:
    linear-gradient(180deg,
      #5A461A 0%, #4A3B19 15%, #3E3318 30%, #322A17 45%,
      #282217 60%, #1C1A16 80%, #101115 100%) top / 100% calc(100% - 50px) no-repeat,
    #151515;
}
.footer-main{
  /* 寬度用 min()：桌機定在 1041 置中（左緣落在 439、與原稿一致），
     窄螢幕才自動留邊。原本寫成 max-width + 左右 20px 內距，
     會把整塊往內縮 20，三欄左緣全部偏掉 21/11/1。 */
  /* ★ 2026-09-09 業主要主辦單位名稱獨立一行：18 字 × 16px = 288，原第一欄 267 放不下、
     會折成「…管／理處」。第二欄 331 只剩 11 的餘裕（E-mail 那行 277 + 內距 40）、
     第三欄 443 剛好被英文行吃滿（見下方註解），都擠不出來，
     所以整塊加寬、第一欄跟著加寬。
     ★ 同日使用者再指正：分隔線兩側要平衡。1066 版實測分隔線左 4／右 41、第二條左 11／右 41，
       文字幾乎貼線。改成兩側各 32：
         第一欄 288 + 32 = 320、第二欄 32 + 279 + 32 = 343、第三欄 32 + 399(英文行) + 4 = 435，
       合計 1098，左緣 411（原稿 439）。三欄用 fr 是讓 1138 以下等比縮，行為與原本相同。
     ≤1199 另有 1fr 1fr／1fr 的規則蓋掉，不受影響。 */
  width:min(1098px, 100% - 40px);margin-inline:auto;
  padding:37.75px 0 66px;
  display:grid;grid-template-columns:320fr 343fr 435fr;
  font-size:calc(16px * var(--k-sm));line-height:18px;
}
/* 不加右內距 —— 原稿第 3 欄的英文行剛好用滿 403 的欄內寬（Jost 11/500 = 399），
   多留 20 就會折行、社群圖示整排往下掉。線左側的 32 已算進第一、二欄的欄寬裡。 */
.footer-col{padding-right:0}
.footer-col + .footer-col{
  border-left:1px solid rgba(233,229,218,.55);
  padding-left:32px;   /* 2026-09-09：原 40，與線左側的 32 對稱（見 .footer-main 註解） */
}
.footer-col p{margin:0}
.footer-col p + p{margin-top:12px}
.footer-col b{font-weight:400;color:#FFFFFF}
.footer-col a{text-decoration:underline;text-underline-offset:3px}
.footer-en{
  font-family:var(--f-geo);font-weight:500;
  /* 11px 而非 12 —— 原稿這行寬 403，Jost 11/500 是 399、12/500 會到 435，
     在 443 的欄寬裡會折成兩行，社群圖示整排跟著往下掉 28px。 */
  font-size:11px;line-height:16px;color:#FFFFFF;
  margin-top:0 !important;      /* 原稿英文行緊貼上一行，不另加間距 */
}
.social{display:flex;gap:14.5px;margin-top:10.25px}
.social a{
  display:block;width:41px;height:41px;cursor:pointer;
  transition:transform .18s ease,filter .18s ease;
}
.social img{display:block;width:100%;height:100%}
.social a:hover{transform:translateY(-2px);filter:brightness(1.08)}
.copyright{
  /* ★ 文字是接近白色的淺色，不是深色 —— 實測底色亮度 113、文字亮度 204。
     原本寫成 #2A2109（深咖啡）是反的。
     字級由寬度反推：原稿 544.5，Jost 14px/500 為 546。 */
  background:#94701E;color:#FAFAFD;
  font-family:var(--f-geo);font-weight:500;
  font-size:14px;line-height:14px;   /* 不加 letter-spacing：0.02em 會多撐 24px（84 字元），寬度就對不上 544.5 */
  text-align:center;padding:18px 20px;margin:0;
}

/* ══════════ 浮動 CTA ══════════ */
/* ★ 這一組原稿一直都有，只是我先前找錯地方。
     index.psd 裡是兩個群組：報名_b（膠囊）與 gototop（回頂圓鈕），兩者一組。
     它們在 index.jpg / index-1x.png 的 y1510–1816 完整畫出來了；
     index@2x.png 匯出時這兩組被關掉，所以我第一次掃 2x 檔沒找到，
     只好去量彈窗那張稿 —— 而那張的 FAB 被遮罩壓到只剩兩成亮度
     （米色圓在檔案裡只有 51,50,45，實際是 255,252,226），
     顏色乘回去誤差極大，尺寸也因為畫布 1080 而看不到 gototop。
     以下數值全部改用 index-1x.png 實測，未經遮罩。

   膠囊（外緣 x1809–1908、y1510–1734）
     100 x 225，右緣距畫布 11，2px 框 #EBBA4D，底 #151515，全圓角
     截止／日期  白 #FFFFFF，字身 20（→23px）、行距 26，ink 起於 +17
     2026／12.31 金 #AD842B，字身 17（→24px）、行距 27，ink 起於 +75
     立即報名圓  直徑 86，起於 +131，底部留白 6；暗字 #151515
   gototop（x1827–1890、y1753–1816）
     直徑 62、4px 框 #FFFCE2、底透明；箭頭 29x36、線寬 5、同色
     與膠囊的間距 19

   立即報名圓的漸層是直向的：上下金、中央近白。
   （中線那一列從左到右幾乎是同一個值 #FFFCE2，只有圓周的反鋸齒在變，
     所以不是放射狀。以下各站是沿圓心垂直線逐列取樣的實測值。） */
.float-cta{
  position:fixed;right:11px;top:50%;transform:translateY(-50%);z-index:150;
  display:flex;flex-direction:column;align-items:center;gap:19px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.float-cta.is-visible{opacity:1;pointer-events:auto}

.fc-card{
  width:100px;height:225px;
  display:flex;flex-direction:column;align-items:center;
  /* 12 + 52(截止日期) + 5 + 54(日期) + 6 + 86(圓) + 6 + 4(上下框) = 225 */
  padding:12px 5px 6px;
  /* 2026-09-05 依 報名_b 拷貝.png 逐像素量測：邊框改成金色漸層（頂 #B2882E → 中 #FEC854 → 底 #B68B2F） */
  border:2px solid transparent;border-radius:50px;
  background:
    linear-gradient(#151515,#151515) padding-box,
    linear-gradient(180deg,#B2882E 0%,#FEC854 50%,#B68B2F 100%) border-box;
  box-shadow:0 6px 24px rgba(0,0,0,.55);
}

.fc-date{text-align:center}
.fc-label{display:block;font-size:calc(23px * var(--k-lg));font-weight:700;line-height:26px;color:#FFFFFF}
/* <b> 預設 700，而 Jost 700 替代 Century Gothic 會粗 24%（見 .rule-no 註解） */
.fc-day{
  display:block;margin-top:5px;
  font-family:var(--f-geo);font-weight:500;
  font-size:calc(24px * var(--k-lg));line-height:27px;color:#AD842B;
}
.fc-day i{display:block;font-style:normal}

.fc-signup{
  display:grid;place-items:center;margin-top:6px;
  width:86px;height:86px;border-radius:50%;
  background:linear-gradient(180deg,
    #AE8E42 0%,  #DCB961 10%, #F5DA8D 20%, #F9E9B3 29%,
    #FDF6D2 39%, #FFFCE2 48%, #FEF9DA 57%, #FBEEBF 66%,
    #F6DF9A 76%, #F1CF74 85%, #EDC763 90%, #D0A544 100%);
  color:#151515;
  font-size:calc(23px * var(--k-lg));font-weight:700;line-height:27px;text-align:center;
  transition:filter .18s ease,transform .18s ease;
}
.fc-signup:hover{filter:brightness(1.04);transform:translateY(-2px)}

.fc-top{
  flex:0 0 auto;display:grid;place-items:center;
  position:relative;
  width:60px;height:60px;border-radius:50%;
  border:none;background:#151515;
  color:#FFFCE2;cursor:pointer;
  transition:background-color .18s ease,transform .18s ease;
}
/* 2026-09-05 依 報名_b 拷貝.png：外圈金色漸層 4px（頂 #F0CA68 → 中 #FEF8D9 → 底 #F8E4A6），內部維持透明 */
.fc-top::before{
  content:"";position:absolute;inset:0;
  border-radius:inherit;padding:1px;
  background:linear-gradient(180deg,#F0CA68 0%,#FEF8D9 50%,#F8E4A6 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.fc-top svg{
  width:29px;height:36px;display:block;
  fill:none;stroke:currentColor;stroke-width:5;
  stroke-linecap:butt;stroke-linejoin:miter;
}
/* 2026-09-06 使用者指定：hover 背景不要變半透明 ——
   rgba(255,252,226,.14) 疊在 #151515 上的實色等值 = #363532，改用不透明色 */
.fc-top:hover{background:#363532;transform:translateY(-2px)}
.fc-top:focus-visible,.fc-signup:focus-visible{outline:2px solid #FFFCE2;outline-offset:3px}

/* ── 報名 B 縮小版（2026-09-06 使用者指定）─────────────
   ≥768：整顆等比縮到 0.6 倍，寬 60 = gototop 同寬。
   用實際尺寸而非 transform —— 收合動畫（≥1200）要動 max-height，
   跟 scale 的負邊距補償會打架。≤767 維持既有的 scale(0.5) 版，不受影響。 */
@media (min-width:768px){
  .fc-card{width:60px;height:auto;padding:7px 3px 4px;border-radius:30px}   /* height 放掉，否則收合後框還是 225 長條 */
  .fc-label{font-size:14px;line-height:16px}
  .fc-day{font-size:14px;line-height:16px;margin-top:3px}
  .fc-signup{width:52px;height:52px;font-size:14px;line-height:16px;margin-top:4px}
}

/* ≥1200：預設收合 —— 整顆是 60×60 的圓（外框貼著立即報名圓鈕）；
   hover 外框向上展開露出截止日期；圓鈕忽明忽暗呼吸，引誘點擊。
   「向上」的關鍵：.float-cta 改成下緣錨定（bottom 固定），
   卡片長高時增加的高度全部往上長，gototop 動也不動。
   bottom = 50vh - 收合叢集高的一半（60+19+60=139 → 70），
   收合狀態的視覺位置跟原本的垂直置中一樣。 */
@media (min-width:1200px){
  .float-cta{top:auto;bottom:calc(50vh - 70px);transform:none}
  .fc-card{padding:2px;border-radius:999px}          /* 2+52+2+邊框4 = 60，正圓一顆 */
  .fc-signup{margin-top:0}
  .fc-date{
    max-height:0;opacity:0;margin:0;overflow:hidden;
    transform:translateY(6px);
    transition:max-height .35s ease, opacity .3s ease, transform .35s ease, margin .35s ease;
  }
  .fc-card:hover .fc-date,
  .fc-card:focus-within .fc-date{
    max-height:80px;opacity:1;transform:none;margin:8px 0 4px;
  }
}
@media (min-width:1200px) and (prefers-reduced-motion:no-preference){
  @keyframes fcPulse{
    0%,100%{filter:brightness(.9)}
    50%{filter:brightness(1.22)}
  }
  .fc-signup{animation:fcPulse 2.2s ease-in-out infinite}
  .fc-card:hover .fc-signup,
  .fc-card:focus-within .fc-signup{animation:none;filter:none}
}

/* ── 767 以下：直立藥丸沿用桌機樣式，用 transform 等比縮到與 gototop 同寬 ────
   桌機藥丸 100W → scale(0.5) 視覺 50W，剛好等於 gototop 的 50。
   transform-origin:top right 讓縮小後的藥丸貼齊容器右邊（跟 gototop 右緣對齊）。
   margin-bottom 補 -50%*原始高 讓 flex 不會留下 scale 造成的下半空間。 */
@media (max-width:767px){
  .float-cta{
    align-items:flex-end;   /* 藥丸與 gototop 都右對齊 */
    gap:12px;
  }
  .fc-card{
    transform:scale(0.5);transform-origin:top right;
    margin-bottom:-112.5px;   /* 225(原高)/2 */
  }
  .fc-top{width:50px;height:50px}
  .fc-top svg{width:22px;height:28px;stroke-width:5}
}

/* ══════════ Modal ══════════ */
.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
/* ★ 2026-09-06 使用者定調：所有彈窗共用同一組外殼視覺（底色／圓角／關閉鈕），
   對齊立刻報名（.su-box）與消息彈窗（.is-news）。基本款只在寬度上較窄
   （880，適合短訊息：敬請期待、報名結果、待補提示）。 */
.modal-box{
  position:relative;width:min(880px,100%);max-height:86vh;overflow:auto;
  background:#EEEBE4;color:#1F1E1A;border-radius:14px;
  padding:52px 54px 46px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
/* ★ 進場動畫必須包在 no-preference 內，而且「不跑動畫」時的預設狀態
   就要是完成的樣子。原本寫成無條件的 animation:...both，
   fill-mode 會讓元素在動畫啟動前停在 opacity:0；只要動畫沒被推進
   （使用者關閉動效、瀏覽器省電模式、內嵌預覽面板），彈窗就永遠是透明的，
   而且不會有任何錯誤訊息。 */
@media (prefers-reduced-motion:no-preference){
  @keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
  .modal-box{animation:modalIn .24s ease}
}
.modal-close{
  position:absolute;top:22px;right:26px;
  width:44px;height:44px;border-radius:50%;
  background:#1B1B19;color:#fff;font-size:calc(19px * var(--k-md));line-height:1;
  display:grid;place-items:center;cursor:pointer;
  transition:background .18s ease;
}
.modal-close:hover{background:#332F26}
/* ── 消息彈窗：左照片、右文字的兩欄版面 ──────────────
   依 index_news/index_news_popup.jpg 量測（1x）：
     卡片 1400x512、完全置中、底色 #EEEBE4
     內距 上下 96、左右 80  →  內容區 1240x320
     照片 550x320（貼齊內容區左上）；文字欄自卡片 +701 起，寬 619
     日期 18px、標題 19px、內文 15px／行高 24.5，段距 25
     日期與標題 #A67F24、內文 #1B1811
   news.json 的 image 留空時退回單欄（.is-noimg），不會破版。 */
/* ★ 2026-09-05：外框與關閉鈕對齊立刻報名（.su-box / .su-close），
   兩個彈窗共用同一組視覺。 */
.modal-box.is-news{
  width:min(1400px,100%);max-width:1400px;max-height:90vh;
  background:#EEEBE4;color:#1F1E1A;
  padding:40px 100px 46px;
  border-radius:14px;
}
/* 關閉鈕已統一在基本款 .modal-close，is-news 不再另定義 */
.modal-box.is-news .modal-content{
  display:grid;grid-template-columns:550fr 71fr 619fr;   /* 合計 1240 */
  align-items:start;
}
.modal-box.is-news.is-noimg .modal-content{grid-template-columns:1fr}
/* 一張照片時就是原稿的 550x320；兩三張時主圖不變，下方多一列縮圖。
   卡片只長高約 90，原稿的版面比例保住。 */
.nm-photo{grid-column:1;display:flex;flex-direction:column;gap:10px}
.nm-main{
  width:100%;aspect-ratio:550/320;object-fit:cover;display:block;border-radius:4px;
}
.nm-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nm-thumb{
  padding:0;border-radius:3px;overflow:hidden;line-height:0;
  border:2px solid transparent;cursor:pointer;
  transition:border-color .18s ease,opacity .18s ease;
  opacity:.72;
}
.nm-thumb img{width:100%;aspect-ratio:550/320;object-fit:cover;display:block}
.nm-thumb:hover{opacity:1}
.nm-thumb.is-on{border-color:#A67F24;opacity:1}
.nm-thumb:focus-visible{outline:2px solid #A67F24;outline-offset:2px}
.nm-body{grid-column:3;min-width:0}
.modal-box.is-news.is-noimg .nm-body{grid-column:1}

.modal-box.is-news .modal-date{
  font-family:var(--f-geo);font-weight:500;font-size:calc(18px * var(--k-md));line-height:1;
  color:#A67F24;margin-bottom:0;display:block;
}
.modal-box.is-news .modal-content h3{
  font-size:calc(19px * var(--k-md));line-height:1.45;color:#A67F24;
  border:0;padding:0;margin:12px 0 0;
}
.modal-box.is-news .modal-content p{
  font-size:calc(15px * var(--k-sm));line-height:24.5px;color:#1B1811;margin-top:25px;
}
.modal-box.is-news .modal-content p.nm-sub{font-weight:700}

/* 窄螢幕：兩欄改為堆疊，照片滿寬。
   ★ .modal-box.is-news 的權重比後面斷點裡的 .modal-box 高，
     所以這裡必須同樣用 .is-news 覆寫，不能只改 .modal-box。 */
@media (max-width:1199px){   /* 原 900，併入主斷點（消息彈窗提早在 1199 就改單欄） */
  .modal-box.is-news{padding:36px 40px 40px;border-radius:12px}
  .modal-box.is-news .modal-content{grid-template-columns:1fr;gap:24px}
  .modal-box.is-news .nm-photo,
  .modal-box.is-news .nm-body{grid-column:1}
  .modal-box.is-news .modal-content h3{font-size:18px}
}
@media (max-width:767px){
  .modal{padding:12px}
  .modal-box.is-news{padding:30px 18px 28px;max-height:92vh}
  /* 手機關閉鈕的縮小版統一寫在頁尾後面的 ≤767 區塊（.modal-close），所有彈窗共用 */
}
@media (max-width:430px){   /* 原 480，併入小手機斷點 */
  .modal-box.is-news .modal-content{gap:18px}
  .modal-box.is-news .modal-content p{margin-top:18px}
}


.modal-content h3{
  font-size:calc(26px * var(--k-lg));font-weight:700;line-height:1.45;color:#3A2C08;
  padding-bottom:16px;margin-bottom:20px;
  border-bottom:2px solid var(--c-gold-mid);
}
.modal-date{font-family:var(--f-geo);font-size:var(--fs-sm);color:#8A7C5C;margin-bottom:10px;display:block}
.modal-content p{font-size:var(--fs-body);line-height:1.9;color:#3E3728}
.modal-content p + p{margin-top:16px}
.modal-more{display:inline-block;margin-top:26px}
.modal-todo{
  margin-top:24px;padding:14px 18px;border-radius:8px;
  background:#FBF3DA;border:1px dashed var(--c-gold-dk);
  font-size:var(--fs-xs);line-height:1.8;color:#6E5A22;
}
/* 舊版 Safari（15 以前）不支援 aspect-ratio，先用 padding 撐出 16:9 */
.modal-video{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden}
@supports (aspect-ratio:16/9){
  .modal-video{padding-top:0;aspect-ratio:16/9}
}
.modal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── 影片彈窗：手機撐滿整個畫面 ────────────────────
   ★ 2026-09-09 使用者實機回報：requestFullscreen() 這個瀏覽器 API 不可靠
   （iframe 級別的全螢幕支援視 iOS 版本而定，舊版根本沒有這支 API，
   呼叫了就是安靜失敗——JS 那邊仍保留嘗試，這裡是不依賴它也能成立的退路）。
   改用 CSS 讓「彈窗本身」在手機上就是整個視窗大小，不管直放橫放都撐滿——
   100dvh 而非 100vh，橫放時網址列/工具列的高度才不會被算進去而露出空隙。
   這個做法 100% 不看瀏覽器版本，只要 CSS 支援 dvh（現代瀏覽器都有）就成立。
   桌機不受影響：這條只在 ≤767 生效，desktop 維持原本 16:9 內嵌小視窗。 */
/* ★ 2026-09-09 修正：只看 max-width:767px 判斷手機，手機轉橫放時寬高互換
   （iPhone 13 直放 390 寬，橫放後變成 844 寬），767 這個門檻直接被撐破，
   撐滿樣式整組失效、退回小彈窗——使用者實機回報「打橫也沒有全版」就是這個。
   改成「不管兩邊哪個是寬、比較短的那一邊是手機尺寸」都算手機：
   直放看寬（≤767），橫放看高（≤480，數值是目前最大手機的橫放高度上限，
   iPhone 16 Pro Max 直放 430 寬，橫放後高度就是這個 430；小於桌機正常視窗
   矮到 480 以下還同時是橫向的機率極低，不會誤判成桌機矮視窗）。 */
@media (max-width:767px), (orientation:landscape) and (max-height:480px){
  .modal-box.is-video{
    width:100vw;height:100dvh;max-width:none;max-height:none;
    border-radius:0;padding:0;background:#000;
  }
  .modal-box.is-video .modal-content{
    height:100%;display:flex;flex-direction:column;
  }
  /* 標題在全螢幕影片體驗裡沒有意義，藏起來把空間全讓給影片 */
  .modal-box.is-video .modal-content h3{display:none}
  .modal-box.is-video .modal-video{
    flex:1;width:100%;height:100%;
    padding-top:0;aspect-ratio:auto;border-radius:0;
  }
  /* 關閉鈕改疊在影片左上角，半透明底才看得清楚（原本是淺色底配深字，
     直接疊在黑色影片上會看不見）。
     ★ 2026-09-09 修正：使用者實機回報關閉不了。根因是 HTML 結構裡
     .modal-close 寫在 .modal-content 前面（見 sections/_modal.php），
     這裡把 .modal-content／iframe 撐滿整個彈窗之後，兩者的範圍重疊了——
     沒有 z-index 時後面的元素（.modal-content，包著 iframe）疊在上面，
     而 iframe 是獨立的瀏覽環境，會整塊攔截點擊，關閉鈕的位置其實點到
     的是 YouTube 的內容。加 z-index 蓋過 iframe，關閉鈕才拿得到點擊。 */
  .modal-box.is-video .modal-close{
    top:calc(env(safe-area-inset-top, 0px) + 12px);
    left:12px;right:auto;
    background:rgba(0,0,0,.55);
    z-index:2;
  }
}
body.is-locked{overflow:hidden}

/* ============================================================
   RWD
   字級在每個斷點內固定，不隨視窗連續縮放。
   Desktop ≥1200 / Tablet 768-1199 / Mobile ≤767 / Small 375-430
   ============================================================ */

/* ── 1440-1199：筆電。容器縮窄，字級不變 ───────────── */
@media (max-width:1499px){   /* 原 1500；2026-09-06 P3-1 兩個同斷點區塊合併（字級係數併入） */
  :root{--pad-x:32px;--k-lg:.85;--k-md:.90;--k-sm:.94}
  .nav-list{gap:46px}
  .step-icon{width:92px;height:92px}
  .process-list::before{top:45px}
  .rule-cards{gap:20px}
  .judge-list{gap:14px}
  .judge img{height:196px}
}

/* 文案 585px + 書法 600px + 間距 + 留白 需要 1289px。
   低於此寬度時讓兩塊等比一起縮，避免其中一塊被 overflow 裁掉
   （1200px 時原本會切掉書法右側 89px，連印章都不見）。 */
@media (max-width:1299px){   /* 原 1300；2026-09-06 P3-1 兩個同斷點區塊合併 */
  .nav-list{gap:32px}
  .hero-inner{gap:26px;padding-inline:24px;padding-top:52px}
  .hero-copy{flex:0 1 468px;min-width:0}   /* 縮到 80% */
  .hero-copy img{width:100%}
  .hero-logo{flex:0 1 480px;min-width:0;width:auto}   /* 縮到 80% */
  .news-viewport{padding-inline:52px}
  .theme-photos img{height:250px}
}

/* ── Tablet 768-1199 ─────────────────────────────── */
/* 字級縮放（--k-*）已併入上面的 (max-width:1499px) 區塊：
   原本 1699 / 1499 / 1319 三個級距，2026-09-05 依使用者要求併成一段、取最窄一級的值。 */

/* Hero 卡片對齊書法右緣（使用者硬規則）+ 兩張圖 80% 後 center 集中。
   分兩段：1300-1439 用基準 padding+gap 40；1200-1299 用 ≤1299 覆寫的 padding:24 gap:26。
   1440+ 沿用基準 space-between（logo 靠右）＋卡片基準 right:max(20, 6.25vw)（自然對齊）。 */
@media (min-width:1300px) and (max-width:1439px){
  .hero-inner{justify-content:center}
  /* top = hero 高(max(47.4vw,672)) - 35 - 卡高320 —— 與原 bottom:35 等值，
     改數值 top 錨是為了跨斷點時位置能補間（auto 不能動畫）。2026-09-06 */
  .countdown-card{right:calc(50vw - 494px);bottom:auto;top:calc(max(47.4vw, 672px) - 355px)}
  /* 防卡片遮書法：書法底 76+234=310，卡片 317+bottom 35，再留 10 → 至少 672 */
  .hero{min-height:max(47.4vw, 672px)}
}

/* ≥1440：兩張圖間距固定在 312（= 1440 時 space-between 的自然值），不再隨視窗拉開。
   佈局跟著改成 center。
   ★ 卡片改「貼書法右緣＋收在 logo 正下方」（2026-09-06 路線 B，使用者拍板）：
   來龍去脈 —— 設計稿的「卡片右下貼 logo 右緣」是原尺寸 logo（右緣 x1800）
   的產物；桌機 Hero 縮 80% 後 logo 右緣只到 1590，卡片若錨容器底部又貼書法
   右緣，1920 時會壓住 x1330-1415 的拿耙子剪影；若照設計稿座標放右下，
   又會脫離縮小後的 logo 飄在右邊。兩者在 80% 世界不可兼得，使用者裁定：
   卡片一律收在 logo 正下方 ——
   水平 right:calc(50vw - 630px)（書法右緣，置中錨定）；
   垂直 top:338（logo 底 76+234≈310 + 28 呼吸），不再錨容器底部，
   Hero 隨視窗長高也拖不動它（根治 bottom 錨定的老病）。
   1440 與改動前只差 8px（原 bottom:35 → top 330）；1920 剪影完整露出。 */
@media (min-width:1440px){
  .hero-inner{justify-content:center;gap:312px}
  .countdown-card{right:calc(50vw - 630px);bottom:auto;top:338px}
}

/* ≥1680：Hero 回設計稿原尺寸（2026-09-06 路線 A，使用者定案）。
   ★ 理由：1920 過稿必須跟設計稿一致，否則會被打槍。
   設計稿構圖（卡片右下貼 logo 右緣、拿耙子剪影在卡片左邊）只在
   原尺寸 logo（右緣 x1800）下成立；縮 80% 的世界怎麼喬都顧此失彼。
   故分兩個世界：1440-1679 維持縮 80%＋卡片收 logo 下（上面那段），
   ≥1680 回原尺寸、卡片回設計稿的右下角。
   門檻 1680：原尺寸內容較寬，1680 時卡片頂（hero 796-352=444）離
   書法底（76+293=369）仍有 75px；再窄會開始擠。
   1920 實測與設計稿 index.png 構圖一致（2026-09-06 疊圖驗證）。 */
@media (min-width:1680px){
  .hero-copy img{width:585px}     /* 回原尺寸（80% 版是 468） */
  .hero-logo{width:600px}         /* 回原尺寸（80% 版是 480） */
  .hero-inner{justify-content:space-between;gap:40px}   /* 回設計稿：文案靠左、logo 靠右 */
  /* 設計稿右下 x1540-1800、y678-995。top = hero 高(min(47.4vw,930)) - 355，
     與 bottom:35＋卡高 320 等值（1920 實算 555.08 = 910.08-355），
     數值 top 錨讓跨斷點可補間。2026-09-06 */
  .countdown-card{right:var(--inset);bottom:auto;top:calc(min(47.4vw, 930px) - 355px)}
}
@media (min-width:1200px) and (max-width:1299px){
  .hero-inner{justify-content:center}
  /* 同 1300-1439 的數值 top 錨（hero 下限 648），為了斷點補間。2026-09-06 */
  .countdown-card{right:calc(50vw - 487px);bottom:auto;top:calc(max(47.4vw, 648px) - 355px)}   /* padding:24 gap:26 → 494 - 7 */
  /* 防卡片遮書法：書法底 52+234=286，卡片 317+35，留 10 → 至少 648 */
  .hero{min-height:max(47.4vw, 648px)}
}

@media (max-width:1199px){

  /* ── 觸控裝置的點擊區 ───────────────────────────────
     iOS 與 Android 的無障礙規範都建議點擊區至少 44x44。
     以下一律用透明的 ::after 撐開熱區，不改變任何視覺與版面 ——
     圓點看起來還是 9px、語系文字還是原來的位置。 */

  /* 最新消息的圓點：視覺 9px、熱區 35x44。
     間距同時放大到 26，否則相鄰兩顆的熱區會重疊，
     後面的兄弟元素蓋在前面上，反而更難點到左邊那顆。 */
  .news-dots{gap:26px}
  .news-dots button{position:relative}
  .news-dots button::after{
    content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:35px;height:44px;
  }

  /* 語系切換：原本高度只有 26–30。左右各外擴 10，
     項目之間的分隔線左右各留 15，外擴後仍有 10 的淨空、不會互相重疊。 */
  .lang-list a{position:relative}
  .lang-list a::after{
    content:"";position:absolute;left:-10px;right:-10px;top:50%;
    transform:translateY(-50%);height:44px;
  }

  /* 頁尾的 E-mail：原本高度只有 23，是頁尾唯一真的會被點的連結。 */
  .footer-col a{position:relative;display:inline-block}
  .footer-col a::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
  :root{
    --pad-x:28px;
    --fs-body:17px;     --lh-body:27px;
    --h-header:72px;
  }

  /* 導覽改抽屜 */
  .nav-toggle{display:block}
  .nav-wrap{
    position:fixed;inset:var(--h-header) 0 auto 0;
    flex:none;height:auto;
    flex-direction:column;align-items:stretch;
    background:rgba(16,16,16,.985);
    border-bottom:1px solid var(--c-gold-line);
    padding:8px 0 18px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .24s ease,opacity .24s ease;
    /* LINE 內建瀏覽器與 iOS Safari 的 100vh 不含工具列，會讓抽屜超出可視範圍；
       dvh 為實際可視高度，不支援的舊瀏覽器自動退回上一行的 vh */
    max-height:calc(100vh - var(--h-header));
    max-height:calc(100dvh - var(--h-header));
    overflow:auto;
  }
  .nav-wrap.is-open{transform:none;opacity:1;pointer-events:auto}
  /* ★ 2026-09-04：抽屜也要有金色攝影師剪影標示目前所在區塊。
     桌機是橫向排列、剪影用 translateX；抽屜是直式，改用 translateY。
     position:relative 是必要的 —— 剪影是 absolute，而 JS 用
     link.offsetTop 定位，兩者必須以同一個元素為基準才對得上。 */
  /* left:0 不可省 —— 桌機的 .nav-main 用 left:50% + translateX(-50%) 置中，
     原本這裡寫 position:static 讓 left 失效；改成 relative 之後 left:50%
     會復活，整個選單往右推 50%（360 寬時 = 180px）。 */
  .nav-main{position:relative;left:0;transform:none;display:block}
  .nav-marker{
    display:block;
    top:0;left:28px;                 /* 28 = 抽屜左內距 */
    transform:translateY(0);
  }
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  /* 左內距 72 = 28（原內距）+ 37（剪影寬）+ 7（剪影與文字的間距，同桌機）。
     所有項目一律內縮，文字才不會因為剪影移過來就跳動。 */
  .nav-list a{display:block;padding:15px 28px 15px 72px;border-bottom:1px solid rgba(255,255,255,.06)}
  .lang-list{margin-left:0;justify-content:center;padding:18px 28px 4px}
  .lang-list a{font-size:15px}
  .header-inner{width:calc(100% - 40px)}

  /* Hero 改為直向堆疊：logo → 文案 → 倒數卡，稻浪留在最底。
     ★ 2026-09-09 業主看實機後要求「主視覺露出來多一點」：
       原本卡片緊接文案（margin 30）、整個壓在彩色波浪上；改成文案與卡片之間
       留 250px 讓波浪整段露出，卡片只壓浪的下緣 60px、其餘落在黑底上。
       做法是把背景框的底縮短（見下方 .hero-bg），不是把卡片推出 hero ——
       卡片仍在 overflow:hidden 裡，稻浪落地、視差都不受影響。
       hero 補黑底：背景框下方露出的部分要跟下一區同色，接縫才看不見。 */
  .hero{display:block;min-height:auto;padding-bottom:36px;background:var(--c-black)}
  .hero-inner{flex-direction:column;align-items:center;text-align:center;padding-top:44px;gap:20px}
  .hero-copy{order:2;flex:none}
  .hero-logo{order:1;flex:none;width:min(78vw,540px);max-width:none}
  .countdown-card{
    /* 必須保留 relative + z-index，否則會被 .hero-bg 這層絕對定位背景蓋住 */
    position:relative;inset:auto;z-index:3;
    /* 寬 75%（業主指定）。360 時 75% 只有 270、倒數那排 232 塞不進 228 的內寬，
       故下限 280（＝78%，肉眼分不出）；上限 320 維持原值，600-767 平板才不會被撐到 575。
       ★ 2026-09-09：margin-top 250→170（業主指定「浪與攝影師整塊上移」）。
       浪的視覺位置是靠 hero 總高反推的（hero-bg 用 bottom:235px 錨在 hero 底），
       所以縮小這個 margin，卡片跟浪會同步一起往上移，「卡片壓浪 60px」的關係不變。
       ★ 170 是實測出來的安全下限，不要再往下壓：
         90 → 攝影師的頭直接壓在「2027 03.13」上（使用者實機確認）
         140 → 還是壓到（使用者實機確認）
         170 → 頭在日期線下方、有明顯縫隙 ✓，且「立即報名」鈕在 390 寬幾乎完整露出
         190 → 安全但卡片被切掉較多
       想讓下一區（活動消息）在第一屏露出一截，光靠這個值做不到——會撞到壓字的下限。
       真要那樣得縮 hero 文案本身的高度，是另一件事、要先問過。 */
    width:clamp(280px, 75vw, 320px);margin:170px auto 0;
  }
  /* 窄螢幕時主視覺整體高度會被壓扁，稻浪只剩一條。
     放大並改為齊底，讓稻浪有份量、倒數卡壓在浪上（與桌機構圖一致）。
     放大倍率上限受限於最左與最右人物的位置，超過 135% 會把人物裁掉。 */
  /* ★ 背景框不再撐滿 hero：bottom = padding-bottom 36 + 卡高 259 - 壓浪 60 = 235。
     波浪貼在框底，所以「卡片頂往下 60px」就是浪的下緣，卡片坐在浪上；
     框下方露出 .hero 的黑底。卡高 259 是中文版實測，語系版較高時只是多壓一點。 */
  .hero-bg,.hero-figure{inset:0;bottom:235px;background-size:118% auto;background-position:center bottom}
  /* ★ 浪底淡入黑（2026-09-09 提案①，待使用者實機確認）：
     橫幅原圖的浪帶只有 ~250px 高，蓋不到卡片後面，浪的下緣會是一條硬邊、
     卡片下半截落在整片黑上（使用者回報「背景高度不夠」）。
     先用遮罩把最下 110px 淡成透明露出黑底，讀起來像浪沒入夜色。
     用 mask 而不是疊一層漸層：捲動視差會把背景往下推（translateY），
     遮罩跟著元素走、邊緣永遠對得上；疊層不會動，就會露出硬邊。
     正解是請設計師出直式主視覺（浪帶要 ≥ 露出 250 + 卡高 259），素材到位再拿掉。 */
  .hero-bg,.hero-figure{
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 110px),transparent);
            mask-image:linear-gradient(to bottom,#000 calc(100% - 110px),transparent);
  }

  .news{padding:72px 0 80px}
  /* ★ 2026-09-05 使用者指定：768 以上一律 2 欄 2 列（超過 4 則才翻頁），
     所以這裡不再把 .news-track 壓成單欄 —— 單欄只留給 ≤767 的橫滑。
     （04 .concept-grid 最終在 768-1199 也是「單欄」——見下方 768-1199 區塊，
       這裡舊寫的「改回左右分欄」是中途版本，已不成立。2026-09-06 更正） */
  /* 不可再設 min-height：與 aspect-ratio 併用時會反推寬度
     （230px 高 × 16/9 = 409px 寬），直接撐破欄位 */
  .process-list{grid-template-columns:repeat(3,1fr);gap:34px 16px}
  .process-list::before{display:none}
  /* 2026-09-05 使用者要求：768-1199 與 ≤767 都把日期段的強制斷行拿掉 */
  .process-step p br{display:none}
  .video-strip img{height:250px}
  /* 評審卡在三欄排版時會被擠窄（768 時卡片只剩 207、內容寬 165），
     19px 的「Kristopher King Caldera」需要 202，必定折行、整列卡片跟著長高。
     縮字級並收窄卡身左右內距，兩邊一起讓出空間。 */
  .judge-body{padding-left:14px;padding-right:14px}
  .judge-body h3{font-size:16px}
  .judge-country{font-size:var(--fs-xs)}   /* 2026-10-16：國籍比姓名小一級 */

  .theme-grid{grid-template-columns:1fr;gap:34px}
  .theme-copy{padding-bottom:0}      /* 單欄排版，文字在照片上方，不會撞到波浪 */
  /* 2026-09-05 使用者指定改回直列（單欄）排版，全站一致 */
  /* 2026-09-05 使用者指定：768-1199 的圖片高度改成跟 ≤767 一樣的成長曲線
     （原本是固定 230，caption 佔比太大、照片被壓扁） */
  .theme-photos figure{aspect-ratio:auto;height:calc(160px + 11vw)}
  .theme-photos img{height:100%}
  .map-copy p{margin-bottom:22px}
  /* 2026-10-14：評審 5 位排成 3+2，最後一排置中。格線拆成 6 欄、每張佔 2 欄，
     第 4、5 張改放 2–3、4–5 欄，就落在中間；卡片寬度與 grid-auto-rows 等高都不變。 */
  .judge-list{grid-template-columns:repeat(6,1fr);gap:18px}
  .judge{grid-column:span 2}
  .judge:nth-child(4){grid-column:2 / 4}
  .judge:nth-child(5){grid-column:4 / 6}
  .judge img{height:230px}
  /* 換行後第 3 欄會落在第 2 列的最左邊，此時左邊那條分隔線變成一條
     莫名其妙的直線，故一併移除。 */
  .footer-main{grid-template-columns:1fr 1fr;gap:26px}
  .footer-col + .footer-col{border-left:0;padding-left:0}
  /* 2026-09-05 使用者指定：全 viewport 統一使用 desktop 的「報名 B」（垂直膠囊）樣式，
     原本 ≤1199 的底部橫條覆寫全數移除。body padding-bottom 也不再需要。 */
  .modal-box{padding:44px 34px 36px}
  .modal-content h3{font-size:22px}
}

/* ══════════════════════════════════════════════════════
   768–1199：各區的排版規則（★ 與下方「Hero 定稿」區塊分開，不要合併）
   2026-09-05 使用者逐項指定：
     03 最新消息  2 欄 2 列，超過 4 則出現左右箭頭翻頁
     04 競賽理念  左右分欄
     05 競賽流程  3 欄 2 列（沿用 ≤1199 的設定）
     07 規則辦法  依設計稿單列五欄
     10 評審介紹  3 欄 2 列（沿用 ≤1199 的設定）
   ══════════════════════════════════════════════════════ */
@media (min-width:768px) and (max-width:1199px){

  /* ── 03 最新消息：兩邊拉齊到小標題那條線 ──────────
     2026-09-05 使用者指定「把列表寬度增加、兩邊都拉出去」。
     .news-viewport 原本兩側各留 44 給左右箭頭鈕，此區塊把箭頭移到卡片
     內側之後就不再需要 —— 直接撐滿 .container，兩邊自然對齊小標題的左右緣。
     ★ 順帶解掉「日期文字壓到分隔線」：日期欄放寬到 96，78px 的日期
     文字有 18px 淨空，不再壓線。 */
  .news-viewport{padding-inline:0}
  .news-track{max-width:none}
  .news-card{padding:0 56px 0 18px}
  .news-date{width:96px}
  .news-text{padding-left:16px}
  .news-go{right:14px;width:34px;height:34px;font-size:calc(15px * var(--k-md))}
  /* ★ 2026-09-06 使用者指定（第二版）：箭頭維持 ≥1200 那種
     「左右兩側、垂直置中」的樣子，但釘在【瀏覽器視窗邊緣】留 12px 內距 ——
     不是釘卡片邊緣（先前 -6px 貼卡片外緣的版本，位置看起來像貼錯）。
     幾何：viewport 左緣離視窗 = .container 的 var(--inset)（此帶 6.25vw，
     768 時 48px），所以視窗邊 +12px = viewport 座標的 12px - var(--inset)。
     箭頭 34 寬 + 12 內距 = 46 ≤ 48px 空白邊 → 全帶寬都不會壓到卡片。
     垂直沿用基準的 top:50% 置中（落在兩列中間，跟 1200 同語彙）。 */
  .news-arrow{width:34px;font-size:calc(26px * var(--k-lg))}
  .news-arrow.prev{left:calc(12px - var(--inset))}
  .news-arrow.next{right:calc(12px - var(--inset))}

  /* ── 04 競賽理念：改成單欄（文字上、照片下）───────────────
     2026-09-05 使用者指定：768–1199 也跟 360–767 一樣採單欄，
     不再左右分欄 —— 原因是字級固定、欄變窄折行變多，兩邊高度反向跑，
     中間怎麼調都對不齊（1024 時文案 367 vs 照片 285，差 82）。
     單欄就沒有「兩邊要對齊」的問題。 */
  .concept-grid{
    grid-template-columns:1fr;
    gap:0;
    padding:28px var(--inset) 0;
  }
  .concept-copy{padding:2px 0 30px}
  .concept-copy p{margin-top:18px}
  /* 全寬照片在 1199 會太大，設一個上限 —— 上限貼近桌機 640 寬時的觀感 */
  .concept-photo{max-width:800px;margin-inline:auto}

  /* ── 07 規則辦法：依設計稿排成單列五欄 ─────────────────
     ★ 卡片內部全部改用 vw，讓五張卡等比縮小 ——
       固定 px 在 768 會讓標題折行，把 icon 往下推、
       被 ::before 的金色漸層攔腰切開（手機版踩過同一個坑）。
     換算基準：設計稿卡片 240 寬、整列 1280；
     本帶可用寬 ≈ 100vw - 56，五卡四隙（隙:卡 = 20:240）
     → 卡寬 ≈ 17.6vw，故每個設計稿像素 ≈ 0.0733vw。 */
  /* 2026-09-05 使用者發現：把 gap 拿掉，五張卡各多分到約 12px 寬度，
     「初步審察規格」不再折行，也就不需要動字級了。 */
  .rule-cards{gap:0;max-width:none}
  .rule-cards > li{flex:1 1 20%}
  .rule-card{
    min-height:20.97vw;
    padding:2.35vw 1.17vw 0.6vw;
    border-radius:2.2vw;
  }
  .rule-card::before{height:14.19vw;border-radius:2.05vw 2.05vw 0 0}
  /* 2026-09-05：rule-no 拿掉 vw、用桌機的固定 50px，避免 1199→1200 的一瞬跳大 */
  .rule-card h3{font-size:1.76vw;letter-spacing:.02em;line-height:1.35}
  /* 2026-09-05：英文版把字距歸零，字母之間就不會擠出多餘寬度 */
  html[lang="en"] .rule-card h3{letter-spacing:0}
  .rule-icon{height:6.3vw;margin:2.05vw 0 0}
  /* 2026-09-05 使用者指定：14px、不強制斷行（原 max(11px,1.17vw)） */
  .rule-card p{font-size:14px;line-height:1.6;margin-top:1.6vw}
}

/* ── 07 規則辦法 768–992：3 欄 2 列 ─────────────────
   2026-09-05 使用者指定。993–1199 仍是單列五欄（吃上面那條規則）。
   3 欄的卡片比 5 欄寬很多，vw 比例不適用，改回設計稿的固定尺寸。 */
@media (min-width:768px) and (max-width:992px){
  /* 2026-09-05：3 欄 2 列，第 2 列 2 張卡自動置中。
     flex-wrap + justify-content:center：row 1 三張卡剛好填滿；
     row 2 只有兩張卡，剩下寬度被 justify-content:center 分到兩側，第二列自動置中。 */
  .rule-cards{gap:20px;max-width:780px;margin-inline:auto;justify-content:center}
  .rule-cards > li{flex:0 0 calc((100% - 40px) / 3)}
  .rule-card{min-height:auto}
  .rule-top{padding:32px 16px 20px;border-radius:24px 24px 0 0}
  .rule-top h3{font-size:calc(24px * var(--k-lg));letter-spacing:.05em;padding:0}
  .rule-icon{height:86px;margin:28px 0 0}
  .rule-bot{padding:18px 16px;min-height:86px;border-radius:0 0 24px 24px}
  .rule-card p{font-size:14px;line-height:24px}
}

/* ── Mobile ≤767 ─────────────────────────────────── */
/* ══════════════════════════════════════════════════════
   平板帶（768–1199）的 Hero：改回左右分欄
   ★★★ 2026-09-05 使用者宣告「這段定稿，不要再亂動」。★★★
   要改請先問過她。以下每個數字都是她逐項確認過的：
     左右分欄各 46%／倒數卡 258x227 絕對定位／書法底→卡片頂 51px
     ／卡片與書法中心對齊／稻浪 cover／Hero 高 512–599
   ══════════════════════════════════════════════════════
   ≤1199 把 Hero 改成直向堆疊（書法在上、文案在下、置中）。
   但在 768 以上寬度還夠，堆疊會讓 Hero 高度衝到 1241
   （比 600 寬時的 966 還多 275），畫面空洞。
   這一段把 768–1199 拉回桌機的「文案左、書法右」。
   ★ 用 min-width 夾住下限，767 以下完全不受影響。 */
@media (min-width:768px) and (max-width:1199px){
  :root{
    --hero-pad:max(28px,5vw);
    /* 書法圖 1200x586，兩欄各佔內容寬的 46% */
    --logo-h:calc((100vw - 2 * max(28px,5vw)) * 0.46 * 0.48833);
    --cd-gap:70px;          /* 書法底 → 卡片頂 */
  }

  /* ★ .hero 必須維持 display:block（沿用 ≤1199）。
     寫成 flex 會出事：倒數卡在 ≤1199 是 position:relative（在文件流裡），
     .hero 一變 flex，卡片就成了 .hero-inner 的並排兄弟、佔走 285px，
     .hero-inner 只剩 435，兩欄各 47% 就縮成 204，右邊空一大片。 */
  /* 卡片抽離文件流後 Hero 不再被它撐高，改用 min-height 精確給高：
     34（內距）+ 書法高 + 間距 + 卡片高 258x227 + 下方留白 26。
     這樣 Hero 高度剛好包住卡片，不會像 padding-bottom:47vw 那樣在寬處暴衝。 */
  .hero{
    padding-bottom:0;
    /* ★ 這裡維持 34，不跟著卡片的 top（15）走 —— 使用者要 Hero 高度不變動。
       代價是卡片底到 Hero 底從 26 變成 45，下方多一段留白，這是刻意的。 */
    min-height:calc(34px + var(--logo-h) + var(--cd-gap) + 227px + 26px);
  }
  /* ★ 內距與倒數卡的 margin-right 必須是同一個值（--hero-pad），
     卡片右緣才會切齊書法右緣。
     ≤1300 把 .hero-inner 的 padding-inline 壓成 24，這裡拉回來。 */
  .hero-inner{
    flex-direction:row;align-items:flex-start;text-align:left;
    justify-content:space-between;gap:3vw;
    padding-top:34px;padding-inline:var(--hero-pad);
  }
  /* order 要顯式寫回 —— ≤1199 把文案排到第 2、書法排到第 1 */
  .hero-copy{order:1;flex:0 1 46%;margin-top:12px}
  .hero-copy img{width:100%}
  .hero-logo{order:2;flex:0 1 46%;width:auto;max-width:46%;min-width:0}
  /* 倒數卡：縮小並靠右，落在書法（臺灣之東）正下方。
     .hero 在此仍是 display:block，卡片是區塊元素，
     用 margin-left:auto 靠右，右邊距與 .hero-inner 的內距對齊，
     卡片右緣就會切齊書法右緣。 */
  /* 卡片中心要與書法中心對齊（使用者要求「垂直置中」＝共用同一條中軸）。
     卡片比書法窄，靠右對齊會讓中心偏右，所以直接算：
       書法中心 = 右內距 + 書法寬/2
       書法寬   = (100% - 2×內距) × 0.46   ← 兩欄的 flex-basis
       卡片右邊距 = 書法中心 - 卡片寬/2
     calc 裡的 % 相對 .hero 寬度，剛好就是我們要的基準。 */
  /* ★ 卡片改為絕對定位，貼著 Hero 下緣往上放（使用者要「往下但 Hero 不要變高」）。
     留在文件流時，卡片往下移多少 Hero 就長高多少 —— 因為它是最後一個子元素。
     抽離文件流後 Hero 不再被它撐高，但也就少了它原本貢獻的高度，
     所以 padding-bottom 要補回來（16vw -> 47vw），否則 Hero 會整個塌掉。
     bottom 定位讓卡片永遠貼在稻浪下方固定距離，不隨寬度飄移。
     ★ .hero 是 overflow:hidden，卡片不能超出下緣，否則會被裁掉。 */
  /* 卡片以「書法底緣」為基準往下 --cd-gap，橫向與書法同中心。
     ★ 為什麼不用 bottom 定位：那樣間距會隨寬度飄
       （768 時書法底到卡片頂 108，1199 時變成 310）。
     ★ 為什麼 top 裡用 vw 而不是 %：top 的百分比是相對「容器高度」，
       但我們要的基準是寬度算出來的書法高度，只能用 vw。
       書法高 = 書法寬 × 586/1200，書法寬 = (100vw - 2×內距) × 0.46。 */
  .countdown-card{
    position:absolute;
    top:calc(15px + var(--logo-h) + var(--cd-gap));   /* 使用者 2026-09-05 在 DevTools 調成 15 */
    bottom:auto;
    width:258px;
    margin:0;
    right:var(--hero-pad);   /* 2026-09-05 使用者硬規則：卡片右緣貼書法右緣（＝hero-inner padding） */
    padding:14px 14px 16px;
    min-height:0;
  }
  /* ★ 2026-09-06 使用者定案：卡片文字全站固定 28/24/20/22（實量設計稿值），
     平板帶原本的縮小字級（20/17/15，還被 ≤1499 的 ×.85 再誤乘一次變 17/14/13.5）
     整組移除，改吃基準值。卡片高度由內容自然決定（min-height:0 本來就在）。 */
  .cd-digit{width:38px}
  .cd-row{margin:10px 0 12px;padding:10px 0}
  /* 2026-10-13：韓文「바로 신청하기」在 136 裡折成兩行、溢出按鈕 → 寬度改隨文字、136 當下限（卡片內寬 230 夠放）。
     中英日的字都短於 136，照舊不變。 */
  .countdown-card .cd-btn{width:auto;min-width:136px;padding:0 6px;white-space:nowrap;height:40px}

  /* 稻浪：auto 100%（B 方案，使用者 2026-09-05 選定）。
     ★ 為什麼不用百分比寬度：background-size:140% 是相對「容器寬度」，
       視窗越寬圖被放得越大 —— 768 時圖高 577、1199 時 900（+56%），
       但 Hero 高只從 512 長到 599（+17%）。圖長得比容器快三倍，
       稻浪在寬螢幕越來越粗，綠色上緣從 Hero 的 49% 一路爬到 31%。
       bottom 對齊只鎖住下緣，上緣就飄了。
     改成 auto 100% 由「高度」決定縮放：圖高永遠等於 Hero 高，
     稻浪粗細與綠色上緣（固定在圖的 54.4%）在四個寬度完全一致。

     ★ 2026-09-05 追加：auto 100% 在 1199 會左右露白邊（圖比容器窄約 7%），
       使用者實看確認後改為 cover —— 圖同時滿足寬高，永遠不露底。
       容器比例 1.5（768）到 2.0（1199），圖是 1.864：
         窄處由高度接管，結果與 auto 100% 完全相同；
         寬處由寬度接管，正好補掉白邊。
     ★ 第三個剪影（拿桿子）在四個寬度都落在倒數卡後面：
       589 / 666 / 738 / 839，卡片右緣一路跟著往右。 */
  .hero-bg,.hero-figure{background-size:cover;background-position:center bottom}
  /* ★ 2026-09-10 修平板跑版（業主在 iPad 10 / 11 / Air 上看到浪被截、卡片落在黑底）：
       09-09 手機首屏改版把 bottom:235px 與浪底淡黑遮罩寫在 ≤1199 區塊，
       這裡（768-1199 平板定稿）沒有還原，平板的背景框也被削掉 235px。
       平板的卡片是絕對定位、Hero 高度由 min-height 精算，本來就不需要那套
       「縮短背景框」的做法 —— 直接還原成 09-09 以前的狀態：框撐滿 hero、不遮罩。
       ★ 只動 bottom 與 mask 兩個屬性，transform / heroSettle / 視差變數一概不碰，
         手機（≤767）與桌機（≥1200）的區塊也都不在這條的作用範圍內。 */
  .hero-bg,.hero-figure{bottom:0;-webkit-mask-image:none;mask-image:none}
}

/* ★★★ 這個區塊同時決定 360 / 390 的樣式，而那兩個尺寸已於
   2026-09-05 定稿。改這裡之前先確認不會動到它們 ——
   只想調 431–767 的話，請另開 (min-width:431px) and (max-width:767px)。 */
@media (max-width:767px){
  :root{
    --pad-x:20px;
    --fs-body:16px;     --lh-body:26px;
    --fs-sm:15px;
    --fs-xs:13px;
    --h-header:64px;
  }

  /* ★ 2026-09-09：原本這裡 .hero{padding-bottom:18vw} 會蓋掉第一個 ≤767 區塊的 36px
     （主視覺露出用，浪底位置靠它算），已移除 —— hero 的底部內距只在那一處定義。 */
  .hero-inner{padding-top:28px}
  /* ★ 2026-09-09：改回 170%（原 280%，見下方移除的重複宣告）。
     280% 是舊版「卡片壓在浪上」構圖時，為了讓浪頭衝到卡片位置而放大，
     代價是裁掉左右兩個人物。卡片邏輯已改（現在只壓浪底 60px，見上方
     hero-bg 的 bottom:235px 那條），不再需要放大浪頭，改回三人全露出，
     也更接近設計師的手機版範例圖（工作資料/新圖收件匣/index_m_01.jpg）。
     391-767 原本已經是 170%（見該區塊），兩處數值統一，此區塊不再單獨宣告，
     避免又出現一個屬性兩個出處的狀況。 */
  /* ★ 2026-09-10 業主要求「hero copy 與 hero logo 整體縮小 80%」（手機瀏覽情境）：
       書法 88vw → 70.4vw（×0.8）；文案原本沒有自己的寬度、被 .hero-inner 的內距
       撐滿（390 時 342 = 100vw − 2×inset），現在明確給 80%（column flex 裡 % 相對
       容器內容寬，390 → 274）。兩者仍由 .hero-inner 的 align-items:center 置中，
       水平位置不動；縮小後左右露出的是 .hero-bg 的白底（#FEFDFB），這是預期效果。
       ★ 不影響浪與攝影師：浪底錨在卡片頂 +60（見上方 bottom:235 的算式），
         文案底到卡片頂固定 170，標題縮小只會讓 hero 整體變矮、浪整段跟著上移，
         「攝影師的頭不壓到 2027 03.13」的關係與 170 的安全下限都不變。
       實測 390：書法 343→275、文案 342→274；428（13 Pro Max）：書法 301、文案 315。
       391-767 的上限那組（下方區塊）同步 ×0.8：380→304、407→326。 */
  .hero-logo{width:70.4vw;min-width:0}
  .hero-copy{flex:none;width:80%}
  /* ★ 2026-09-04：min-height:317 是照原稿 1920 訂的，但窄斷點字級變小、
     內容自然高只剩 260，被硬撐出 57px 的空白（使用者指出「報名_a 下方太高」）。
     手機不需要固定高度，放掉讓它貼合內容。
     ★ 2026-09-09：這裡原本還有 margin-top:28，寫在後面會蓋掉第一個 ≤767 區塊的
       margin:250px（主視覺露出用），故拿掉 —— 卡片的垂直間距只在那一處定義。 */
  .countdown-card{padding:18px 18px 20px;min-height:0}
  .cd-digit{width:40px}

  .sec-title{gap:8px}   /* 2026-09-05 副標題下邊距統一 50，這裡不再單獨改 30 */
  .sec-mark{width:52px;height:39px;margin-bottom:8px}

  /* 活動消息：橫向滑動 */
  /* 區塊間距：原本 64（消息下）+ 48（理念上）= 112px，
     在 390 寬螢幕上偏大（設計稿此處換算約 37px）。收為 40+40 = 80。 */
  .news{padding:58px 0 40px}
  /* ★ 2026-09-04 使用者指定：小尺寸下弧線背景改為 170% + 垂直重複。
     桌機是 100% auto no-repeat —— 圖 3840x3060 在 360 寬時只有 287px 高，
     而這條 band 橫跨 03/04/05，手機上高達兩千多 px，往下就整片變純黑。
     170% 讓弧線的曲率在窄螢幕仍看得出來。
     ★ 2026-09-06 定案（A 案）：拿掉 fixed 視差。使用者 iPhone Chrome 實測，
     iOS 把 fixed 當 scroll 處理 → 波紋跟著內容捲、repeat-y 又讓它重複出現，
     整個亂掉。改成「一段一次、自然淡出」：no-repeat 只畫在 band 開頭，
     圖下緣本就是空黑底（同桌機那條的理由），蓋不到底只是弧線自然結束。
     零 JS、iPhone / Android 完全一致。 */
  .arc-band{
    background-size:170% auto;
    background-repeat:no-repeat;
    background-position:center top;
  }
  /* ≤767 的分層策略（2026-09-06 第三版 = A 案）：
     火車留在 band（跨 07-09 無縫、不會在 09 上緣出現切線——當初搬出來就是為了這個）；
     金線波紋畫在 07（.rules）與 08（.theme）自己身上，各畫一次、跟著內容捲。
     ★ 前一版靠 fixed 讓兩段自動無縫接續，但 iOS 把 fixed 回退成 scroll，
     結果每段都從自己頂端重畫、波紋跟著捲又重複，iPhone 上整個怪（使用者實測）。
     改 scroll 後兩段各自從頂端起畫是「設計上的重複」而非 bug：
     圖的線只畫在上 60%、下 40% 是黑底，每段波紋自然淡出後才進下一段。
     09（.map）沒有這層背景 → 捲到地圖，波紋自然退場。不用 JS。
     ★ 選擇器 .arc-band-2 > .rules/.theme 蓋過 .arc-band-2 > section 的 transparent。 */
  /* 火車上緣是硬邊，會在 09 上方切一刀 —— 疊一層黑→透明漸層蓋住上緣，
     讓火車「從黑裡浮出來」。位置用火車幾何推：
     圖 3840×2214、200% 寬 → 高 115.31vw；bottom -50px → 上緣在 band 底上方 115.31vw - 50px。
     漸層高 160px、底緣壓在上緣下方 160px 處 → bottom(115.31vw - 210px)。 */
  .arc-band-2::before{display:none}   /* 桌機的火車視差圖層；手機用下面的多重背景 */
  .arc-band-2{
    background-image:
      linear-gradient(180deg, var(--c-black) 0%, rgba(21,21,21,0) 100%),
      url("../images/sections/arc-band-2-train.webp");
    background-attachment:scroll, scroll;
    background-size:100% 160px, 200% auto;
    background-position:center bottom calc(115.31vw - 210px), center bottom -50px;
    background-repeat:no-repeat, no-repeat;
  }
  .arc-band-2 > .rules,
  .arc-band-2 > .theme{
    background:url("../images/sections/arc-lines-2.webp") center top / 170% auto no-repeat;
  }

  .news-viewport{padding-inline:0;margin-inline:calc(var(--pad-x) * -1)}
  .news-track{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    /* ★ overflow-y 必須明寫 hidden：iOS 對「可捲動容器」兩個軸都會回彈，
       就算垂直零溢出，手勢微微往下整條列表也會往下彈再彈回（2026-09-06 實機回報）。
       垂直軸 hidden 就不參與回彈；overflow-x 非 visible 時垂直本來就被裁切，
       這行零視覺差異。 */
    overflow-y:hidden;
    padding:4px var(--pad-x) 12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .news-track::-webkit-scrollbar{display:none}
  .news-card{
    flex:0 0 82%;scroll-snap-align:center;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;
    padding:18px 18px 56px;min-height:0;
  }
  .news-date{width:auto}
  .news-text{padding-left:0;border-left:0}
  .news-go{right:auto;left:18px;top:auto;bottom:14px;transform:none;width:34px;height:34px;font-size:15px}

  /* 小畫面不用左右箭頭：卡片本身已有一個「開啟消息」的圓形箭頭，
     再加兩個導覽箭頭會變成三個意義不同的箭頭，畫面很吵。
     改用圓點 —— 不搶視覺、可點、還能看出目前第幾張與總共幾張。 */
  .news-arrow{display:none}
  .news-dots{margin-top:18px}

  /* 桌機的 110px 上內距若原封不動套到手機，比例會過大：
     設計稿此處為 180px（1920 寬），換算 390 寬約 37px。
     留白節奏統一為 標題→文案 28、文案→照片 36。 */
  /* 列距歸零，文案與照片之間的留白只由 .concept-copy 的下內距決定，
     否則兩處相加會變成 60px（36 + 24 列距） */
  /* ★ 2026-09-05 使用者指定：360–767 文字在上、圖片在下 */
  .concept-grid{grid-template-columns:1fr;padding-top:40px;gap:0}
  .concept-copy{padding:0 0 36px}
  /* 波浪是寬扁形狀（4.67:1），窄螢幕上依比例縮會小到看不清人物剪影，
     略為放大讓它讀得出來。
     略為放大讓它讀得出來。波浪加寬後高度也變高，
     下緣位移要跟著換算：-0.514 × (68vw ÷ 4.67) = -7.48vw */
  .concept-wave{width:68vw;bottom:-7.48vw}
  /* 不可設 min-height：與 aspect-ratio 併用會反推寬度並撐破欄位 */

  .process{padding:58px 0 62px}
  .process-list{grid-template-columns:repeat(2,1fr);gap:30px 14px}
  .step-icon{width:80px;height:80px;margin-bottom:12px}

  .video-strip{grid-template-columns:repeat(2,1fr)}
  .video-strip img{height:150px}
  .play-icon{width:58px;height:58px;border-width:4px}
  .play-icon::before{border-left-width:16px;border-top-width:10px;border-bottom-width:10px;margin-left:5px}
  .play-text{font-size:19px;letter-spacing:.08em;text-align:center;padding-inline:24px}

  /* 規則辦法：橫向滑動 */
  .rules{padding:58px 0 62px}
  /* ★ 2026-09-04 使用者指定：手機不用橫向輪播，改成兩欄往下排（5 張 → 2+2+1）。
     原本是 overflow-x:auto 的捲動容器，順帶解掉一個 bug ——
     CSS 規範下 overflow-x:auto 會強制 overflow-y 也變成 auto，
     不能一軸裁一軸不裁，所以編號圓圈往上凸出的 25px 會被切掉。
     改成格線（overflow 預設 visible）之後就不會裁了。
     上內距 30 仍保留：給編號圓圈的 25px 凸出量留位置。 */
  .rule-cards{
    /* ★ 2026-09-09 使用者回報卡片緊貼、間距不見了：這裡跟下面 li 的寬度公式
       是同一次 commit（3125d7f）一起寫的，14px 本來就是留給欄距用的，
       但 gap 的欄距值當時寫成 0，兩者沒對上——14px 只從寬度裡扣掉，
       卻沒有真的被塞進兩張卡片中間，於是兩卡直接貼在一起，那 14px
       變成置中造成的左右外距。改成 gap:38px 14px 讓欄距真的生效。 */
    display:flex;flex-wrap:wrap;gap:38px 14px;justify-content:center;
    padding:30px 0 0;margin-inline:0;
    overflow:visible;
  }
  .rule-cards > li{flex:0 0 calc((100% - 14px) / 2);display:flex}
  /* ★ 2026-09-04：icon 原本寫死 86px 高、不隨斷點縮。
     1920 時卡片 240 寬、icon 佔 36%；360 時卡片只剩 151 寬，
     icon 還是 86 → 佔到 57%，整張卡被圖示壓住。縮到 54px。

     ★★ 只動 icon，不要動卡片本身。踩過的坑：
       .rule-card::before 是「寫死 193.5px 高」的金色漸層蓋在上半、下半留白，
       且圓角 28px 28px 0 0 是另外寫的。
       一旦改 min-height（卡片變矮）漸層與白底的比例就跑掉；
       一旦改 border-radius（改成 22）就與 ::before 的 28 對不齊，
       四角會露出一道亮邊，看起來像多加了反光。 */
  .rule-icon{height:54px;margin:18px 0 0}
  /* icon 變矮 32px 之後，文字整體上移：1920 時文字起於 204、漸層止於 193.5，
     留 10.5px；手機文字起於 158，漸層若仍是 193.5 就會切進文字中間。
     依同一個關係改為 148（158 - 10）。
     ★ 這個值與 .rule-icon 的高度綁在一起，改 icon 就要一起改這裡。 */
  .rule-card::before{height:148px}
  /* 卡片 3「初步審察規格」六個字單行需要 129px，但兩欄排版下只有 115px 可用，
     斷成兩行後把 icon 往下推 27px，膠卷（橫長條）正好被金白分界橫切成兩半。
     不縮小五個標題的字級（那會讓整區變小家子氣），改為：
       左右內距 16 → 10（多 12px）、字距 .05em → .02em（多 3.7px）
     兩者合計多出約 16px，六字標題就能單行，五張卡的 icon 也回到同一高度。
     ★ 只動水平方向，不碰 min-height 與 border-radius —— 那兩個會和
       ::before 的固定高度與圓角打架（2026-09-04 踩過）。 */
  .rule-card{padding-inline:5px}
  .rule-card h3{letter-spacing:.02em;min-height:2lh}   /* 2026-09-05：標題強制 2 行高，一行標題也留兩行空間，icon 與內文齊高 */
  .rule-top h3{font-size:14px;font-weight:700}   /* 2026-09-05 使用者指定：≤767 標題 14px 粗體 */
  .rules-download{margin-top:30px}

  .theme{padding:58px 0 62px}
  .theme::before{width:65vw;height:17.91vw}   /* 2026-09-05：波浪佔 65vw；高度用同比例 259/940 → 17.91vw */
  .theme-list li{font-size:14px}   /* 2026-09-05 使用者指定：≤767 主題清單 14px */
  /* ★ 2026-09-05 使用者指定：文字在上、四格圖在下，四格維持設計稿的 2x2。
     照片比例從設計稿的 1280:557（很扁）改成 4:5（直式）——
     2 欄時每格只有約 157 寬，扁的比例只剩 68px 高，
     連標題一行都放不下。改直式讓照片本身仍看得清楚，
     同時空出下半給說明文字。 */
  .theme-photos{grid-template-columns:repeat(2,1fr);gap:5px}
  /* ★ 不用 aspect-ratio：固定比例會讓 767 的格子變成 333x416 的長條，
     照片上半一大片空著。改成「基準高 + 比寬度慢的成長量」——
       360 → 161x199（直式，字要空間）
       767 → 333x244（接近橫式，照片重新變成主角）
     不新增斷點。 */
  .theme-photos figure{aspect-ratio:auto;height:calc(160px + 11vw)}
  /* 手機版外圈圓角收成 16（與桌機的 26 一致邏輯，只是半徑略小） */
  .theme-photos li:nth-child(1) figure{border-radius:16px 0 0 0}
  .theme-photos li:nth-child(2) figure{border-radius:0 16px 0 0}
  .theme-photos li:nth-child(3) figure{border-radius:0 0 0 16px}
  .theme-photos li:nth-child(4) figure{border-radius:0 0 16px 0}
  .theme-photos img{height:100%}
  /* 暗漸層拉高到 78%，且中段就開始加深 ——
     使用者要求「文字要清楚，但照片要露出比較多」：
     上半仍是原圖，下半才漸漸壓黑，字放在最黑的地方。 */
  .theme-photos figure::after{
    height:82%;
    background:linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.38) 26%, rgba(0,0,0,.74) 56%, rgba(0,0,0,.94) 100%);
  }
  .theme-photos figcaption{inset:auto 0 9px 0;padding:0 10px}
  .theme-photos figcaption b{font-size:clamp(12px,2.55vw,17px);line-height:1.35;letter-spacing:.01em}
  .theme-photos figcaption span{font-size:clamp(10.5px,1.95vw,13.5px);line-height:1.5;margin-top:3px}
  /* 編號圓標跟著縮，否則 39px 的圓在 157 寬的格子裡佔掉四分之一 */
  .theme-no{width:24px;height:24px;top:8px;font-size:14px}
  .theme-photos li:nth-child(odd)  .theme-no{left:8px}
  .theme-photos li:nth-child(even) .theme-no{right:8px}

  /* ★ 2026-09-09 使用者回報：八顆藥丸最後一排壓到火車。
     火車是 .arc-band-2::before/背景圖，錨在整個 band（07+08+09）的底部，
     不是錨在 09 自己——所以「拉開按鈕跟火車的距離」不能動按鈕位置，
     要靠加高 09 區塊自己的下內距，把 band 的底部（＝火車的錨點）往下推，
     按鈕位置不變、跟火車自然拉開。62 → 220，多出來的 158px 純粹是留白。 */
  .map{padding:56px 0 220px}
  /* 09 map 的字級／icon／版面全部整合到 (max-width:991px) 那條，這裡只留區塊上下內距 */

  /* ★ 2026-09-05 使用者指定：360–767 改成 2 欄 3 列（原本是橫向滑動）。
     六位評審剛好排滿，不必再滑，也不會有「看不出後面還有人」的問題。 */
  .judges{padding:58px 0 62px}
  .judge-list{
    display:grid;grid-template-columns:repeat(4,1fr);gap:12px;   /* 2026-10-14：4 欄、每張佔 2 欄，最後一張放中間 2–3 欄 */
    grid-auto-rows:1fr;
    overflow:visible;margin-inline:0;padding:0;
  }
  .judge,.judge:nth-child(4){flex:none;grid-column:span 2}   /* 蓋掉 ≤1199 那條第 4 張的 2 / 4 */
  .judge:nth-child(5){grid-column:2 / 4}
  /* 照片回到設計稿比例；固定 210px 高在 158 寬的卡上會變成大頭照 */
  .judge img{height:auto;aspect-ratio:271/189.5}
  /* 卡片只剩約 158 寬，內容寬 138：
     姓名 16px 時「Kristopher King Caldera」要 170px 必折行，降到 13px 才收得住。 */
  .judge-body{padding:12px 10px 8px 12px}
  .judge-body h3,.judge-country{font-size:clamp(13px,2.5vw,17px);line-height:1.35}
  .judge-country{font-size:clamp(11px,2.05vw,14px)}   /* 2026-10-16：國籍比姓名小一級，最大 14 跟桌機一致 */
  .judge-body h3{padding-bottom:10px}
  .judge-body img.flag{width:24px;height:16px;bottom:10px}
  .judge-body p{font-size:clamp(12px,2.05vw,15px);line-height:1.62;margin-top:8px}

  .footer-main{grid-template-columns:1fr;gap:22px;padding-top:28px}
  .footer-col + .footer-col{border-left:0;padding-left:0}
  .copyright{font-size:11px;line-height:1.6;padding:10px 16px}


  .modal{padding:14px}
  .modal-box{padding:44px 22px 30px;max-height:88vh}
  .modal-close{top:12px;right:12px;width:40px;height:40px}
  .modal-content h3{font-size:19px;padding-bottom:12px;margin-bottom:16px}
  .modal-content p{font-size:15px;line-height:1.85}
}

/* ── Small Mobile 375-430 ────────────────────────── */
/* ★★★ 2026-09-05 使用者宣告「360、390 定稿，不要亂動」。★★★
   360 與 390 的樣式由這個 ≤430 區塊 + 下方的 ≤767 區塊共同決定。
   ★ 要改 431–767（例如 600）時務必用 min-width 夾住下限，
     直接改 ≤767 的規則會連 360/390 一起動到。 */
/* ══════════════════════════════════════════════════════
   391–767：標題成長上限
   ══════════════════════════════════════════════════════
   ★ 2026-09-09：這裡原本還說明「稻浪 391-767 縮到 170% 避免壓字，
     ≤390 維持 280%」的分裂邏輯——這條規則已經不存在了。170% 現在是
     ≤767 全寬統一值（見上方新的 ≤767 區塊），跟 391 這個門檻無關，
     是照設計師的手機版範例圖（新圖收件匣/index_m_01.jpg）改的。
     這一區塊留下來只因為還有標題寬度上限（下面 hero-logo / hero-copy
     這兩行）要夾住 431-767，不影響定稿的 360/390。
   ══════════════════════════════════════════════════════ */
@media (max-width:767px){
  /* ★ 2026-09-09：170% 從 391-767 這區搬到上面統一的 ≤767 區塊，
     ≤390 與 391-767 現在共用同一條規則，不再分裂成兩個縮放值。 */
  .hero-bg,.hero-figure{background-size:170% auto;background-position:46% bottom}
}
@media (min-width:391px) and (max-width:767px){
  /* 主標題的成長上限。原本書法與文案跟著螢幕一路長大沒有上限，
     767 時書法衝到 675、文案 719，整個首屏被標題塞滿。
     min() 讓它長到上限就停，不新增斷點。
       360 → 317   390 → 343   （上限用不到，定稿的兩個尺寸不受影響）
       767 → 380（原本 675）
     ★ 先前一度移除此段，是我誤讀了使用者「都很不舒服」的意思 ——
       那句是指整體觀感（主要是剪影壓字），不是否定加上限。已裝回。 */
  /* ★ 2026-09-10 整組 ×0.8（業主要求手機標題縮小 80%，見上方 ≤767 區塊的說明）：
       88vw/380 → 70.4vw/304、92vw/407 → 73.6vw/326。 */
  .hero-logo{width:min(70.4vw, 304px)}
  .hero-copy{flex:none;width:min(73.6vw, 326px)}
  .hero-copy img{width:100%}
}


@media (max-width:430px){
  :root{--pad-x:16px}
  .cd-digit{width:36px}
  .news-card{flex:0 0 86%}
  /* 09 map 的字級與 icon 全部整合到 (max-width:991px) 那條，這裡不再另寫 */
  .video-strip img{height:120px}
  /* ★ 2026-09-09 業主補標點後，07 卡 4 第一行「總獎金新台幣十萬元，」10 字 = 140px；
     兩欄卡在 390 的文字寬只有 118（卡 164 − 邊框 4 − 卡內距 10 − 下盒內距 32），
     「元，」會掉成孤行變四行。把兩層水平內距收到 0 + 2：實測 390 → 154、360 → 143（卡 151），
     360 只剩 3px 餘裕，那一行幾乎貼到白盒兩側。字級維持 14（09-05 使用者指定），只動內距；
     若要更從容，≤430 把內文降到 13px 是另一條路，需使用者決定。 */
  .rule-card{padding-inline:0}
  .rule-bot{padding-inline:2px}
}

/* ── 減少動態偏好 ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── 列印 ────────────────────────────────────────── */
@media print{
  .site-header,.float-cta,.news-arrow,.modal{display:none !important}
  body{background:#fff;color:#000}
}

/* ══════════ 報名流程彈窗 ══════════ */
/* 依 index_signup/index_signup_01.jpg 量測（1x）：
     卡片 1400x951、完全置中、底色 #EDEAE3、左右內距 100
     表格格線 #A4A4A3；欄寬 標籤221｜值379｜標籤221｜值378（合計 1199）
     每列高 46；表一 6 列（+200–476）、表二 3 列（+644–782）
     第一步 +49、下載鈕 100x40 @+69、標題一 +144、註解 +488
     標題二 +560、成員1 +592、問句 +844、按鈕 180x40 @+866（間距 31）
   ★ 精度：報名頁只有 1x JPG，約 ±2px，比首頁低一級。 */
.su-modal{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:24px}
.su-modal[hidden]{display:none}
.su-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
/* ★ 2026-09-04：與消息彈窗（.modal-box.is-news）統一外框。
   兩者原本各自照自己的設計稿量，差在背景 #EDEAE3 vs #EEEBE4、圓角 16 vs 14。
   統一為消息彈窗那組（站上已在用的）。
   內距不統一 —— 消息是左圖右文、報名是表單，硬套同一組會把表單擠掉。 */
.su-box{
  position:relative;
  width:min(1400px,100%);max-height:90vh;overflow:auto;
  background:#EEEBE4;color:#1F1E1A;border-radius:14px;
  padding:40px 100px 46px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.su-close{
  position:absolute;top:22px;right:26px;
  width:44px;height:44px;border-radius:50%;
  background:#1B1B19;color:#fff;font-size:calc(19px * var(--k-md));line-height:1;
  display:grid;place-items:center;cursor:pointer;
  transition:background .18s ease;
}
.su-close:hover{background:#332F26}

.su-eyebrow{font-size:13px;font-weight:700;color:#AF8428;line-height:1.6;margin:0}
.su-lead{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:calc(16px * var(--k-sm));font-weight:700;color:#AF8428;margin:4px 0 0;
}
.su-dl{
  flex:none;display:grid;place-items:center;
  width:100px;height:40px;border-radius:999px;
  background:var(--g-gold-btn);color:#3A2C08;
  font-size:calc(15px * var(--k-sm));font-weight:700;
  transition:filter .18s ease,transform .18s ease;
}
.su-dl:hover{filter:brightness(1.06);transform:translateY(-1px)}

.su-h{font-size:calc(18px * var(--k-md));font-weight:700;color:#1F1E1A;margin:46px 0 0;letter-spacing:.01em}

/* ── 表格 ──
   用 grid 而非 <table>：欄寬固定、窄螢幕才好改成上下堆疊。 */
.su-table{margin-top:24px;border:1px solid #A4A4A3;border-bottom:0}
.su-row{
  display:grid;grid-template-columns:221fr 978fr;   /* 合計 1199 */
  border-bottom:1px solid #A4A4A3;
}
.su-row-4{grid-template-columns:221fr 379fr 221fr 378fr}
.su-th,.su-td{min-height:46px;display:flex;align-items:center;padding:6px 22px}
.su-th{
  font-size:calc(16px * var(--k-sm));color:#535353;background:#E7E4DC;
  border-right:1px solid #A4A4A3;
}
.su-row-4 .su-td:not(:last-child){border-right:1px solid #A4A4A3}
.su-td{padding:0}
/* ★ 只給文字類輸入框 —— 原本沒有排除 checkbox，
   核取方塊被 min-height:44px 拉成 15x44 的細長條，
   焦點框跟著框出那個形狀，非常難看。 */
.su-td input:not([type="checkbox"]){
  width:100%;min-height:44px;padding:0 20px;
  border:0;background:transparent;
  /* ★ 2026-09-09：下限 16px。iOS Safari 對 <16px 的輸入框在取得焦點時會把整頁放大，
     ≤1499 的 --k-sm .94 會算成 15.04；現在彈窗一開就自動 focus 第一格，
     沒有這個下限 iPhone 每次打開都會跳一次縮放。桌機 1500 以上仍是 16，不受影響。 */
  font:inherit;font-size:max(16px, calc(16px * var(--k-sm)));color:#1F1E1A;
}
.su-td input:not([type="checkbox"])::placeholder{color:#9B978C}
.su-td input:not([type="checkbox"]):focus{outline:2px solid #AF8428;outline-offset:-2px}

.su-checks{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:8px 20px}
.su-checks label{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.5;cursor:pointer}
/* 核取方塊：尺寸固定 15x15，焦點框緊貼方塊本身。
   全站的 :focus-visible 是 2px 金線 offset 3px —— 那個間距對 15px 的
   小方塊來說太鬆，而且 --c-gold 在米色卡面上對比不足。 */
.su-checks input,
.su-themes input,
.su-consent input{
  flex:none;width:15px;height:15px;min-height:0;padding:0;
  accent-color:#AF8428;cursor:pointer;
}
.su-checks input{margin-top:3px}
.su-checks input:focus-visible,
.su-themes input:focus-visible,
.su-consent input:focus-visible{
  outline:2px solid #AF8428;outline-offset:2px;border-radius:2px;
}

.su-note{font-size:12px;line-height:1.7;color:#6C6964;margin:12px 0 0;padding-left:22px}

.su-member + .su-member{margin-top:28px}
.su-member-h{font-size:14px;font-weight:700;color:#1F1E1A;margin:16px 0 0}

.su-ask{font-size:14px;color:#4A4A46;text-align:center;margin:44px 0 0}
.su-full{font-size:14px;color:#8A5A2A;text-align:center;margin:44px 0 0}

.su-actions{display:flex;justify-content:center;gap:31px;margin-top:12px}
.su-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  /* 2026-10-13：寬度改隨文字、180 當下限 —— 英文「No, Continue to the Next Step」在 180 裡折成兩行、
     撐破 40 高；中日韓文案都短於 180，照舊不變。 */
  width:auto;min-width:180px;padding:0 24px;white-space:nowrap;
  height:40px;border-radius:999px;
  font-size:calc(15px * var(--k-sm));font-weight:700;cursor:pointer;
  transition:filter .18s ease,transform .18s ease;
}
.su-btn i{font-style:normal;font-size:calc(15px * var(--k-sm))}
.su-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.su-btn-add{background:#1E4832;color:#F2EFE6}
.su-btn-next{background:var(--g-gold-btn);color:#3A2C08}
.su-btn[disabled]{opacity:.4;pointer-events:none}

@media (max-width:1199px){
  .su-box{padding:36px 40px 40px;border-radius:12px}
  .su-h{font-size:17px;margin-top:36px}
}
@media (max-width:767px){
  .su-modal{padding:12px}
  .su-box{padding:30px 18px 28px;max-height:92vh}
  .su-close{top:12px;right:12px;width:40px;height:40px}
  /* 窄螢幕表格改為上下堆疊：標籤一行、輸入一行 */
  .su-row,.su-row-4{grid-template-columns:1fr}
  .su-th{border-right:0;border-bottom:1px solid #CFCCC4;min-height:0;padding:8px 14px;font-size:14px}
  .su-row-4 .su-td:not(:last-child){border-right:0;border-bottom:1px solid #CFCCC4}
  .su-td input:not([type="checkbox"]){padding:0 14px}
  /* ★ 手機上所有輸入控制項字級鎖 16px（2026-09-06 使用者選定方案 A）：
     iOS 對字級 <16px 的輸入框聚焦時會自動放大整頁，而且離開後常不縮回，
     頁面就停在放大狀態、可以左右滑。16px 是 iOS 不放大的門檻。
     只鎖輸入框，不動版面任何文字。 */
  .su-box input:not([type="checkbox"]),
  .su-box textarea,
  .su-box select{font-size:16px}
  .su-actions{flex-direction:column;align-items:center;gap:12px}
  .su-btn{width:100%;max-width:300px}   /* 2026-10-13：原 280，英文「No, Continue…」含內距需 283 */
  .su-note{padding-left:0}
}

/* 未填必填欄位時的提示 */
.su-td input.is-bad{outline:2px solid #B3452F;outline-offset:-2px;background:#FBEEEA}

/* ── 報名 Step 2 ──
   依 index_signup_02.jpg 量測：卡片 1400x1198（同寬、較高）
     大文字框 1199x275 @+229、金色分隔線 #AA852A @+535 與 +802
     主題複選四項、行距 30
     器材表 3 列各 61 高（比 Step 1 的 46 高）
     下一步鈕 120x40 置中 */
.su-desc{font-size:13px;line-height:1.85;color:#4A4844;margin:10px 0 0}
.su-h + .su-desc{margin-top:12px}

.su-area{
  display:block;width:100%;height:275px;margin-top:26px;
  padding:16px 20px;border:1px solid #A4A4A3;border-radius:0;
  background:#FFF;font:inherit;font-size:calc(15px * var(--k-sm));line-height:1.8;color:#1F1E1A;
  resize:vertical;
}
.su-area:focus{outline:2px solid #AF8428;outline-offset:-2px}

.su-hr{border:0;border-top:1px solid #AA852A;margin:32px 0 0}

.su-themes{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.su-themes label{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.7;cursor:pointer}
.su-themes input{margin-top:4px}
.su-warn{font-size:13px;color:#B3452F;margin:12px 0 0}

/* Step 2 的器材表列高 61，比 Step 1 的 46 高 */
.su-table-tall .su-th,
.su-table-tall .su-td{min-height:61px}
.su-table-tall .su-td input:not([type="checkbox"]){min-height:59px}

.su-btn-sm{min-width:120px}   /* 2026-10-13：.su-btn 改 min-width 180 後，這裡跟著改成下限 120 */

.su-step[hidden]{display:none}

@media (max-width:767px){
  .su-area{height:200px;padding:12px 14px;margin-top:18px}
  .su-hr{margin-top:24px}
  .su-table-tall .su-th,.su-table-tall .su-td{min-height:0}
  .su-table-tall .su-td input:not([type="checkbox"]){min-height:46px}
  .su-btn-sm{width:100%;max-width:300px}      /* 2026-10-13：跟 .su-btn 的 300 齊 */
}

/* Step 3：分隔線之後直接接說明文字（Step 2 是接標題） */
.su-hr + .su-desc{margin-top:24px}

/* ── 報名 Step 4：同意書上傳 ──
   依 index_signup_04-1／04-2 量測：卡片 1400x512
     勾選列 +217、上傳鈕 150x40 @+260、僅限 PDF 說明 +310
     提醒文字 +344、下一步 120x40 @+427
   已選檔時：上傳鈕變淡、右側出現 PDF 圖示與檔名（04-2 的狀態） */
.su-consent{margin-top:26px}
.su-consent label{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.7;cursor:pointer}
.su-consent input{margin-top:4px}

.su-upload{display:flex;align-items:center;gap:22px;margin-top:26px}
/* 上傳鈕原本漏了背景色，只剩一行無底的文字。
   ★ 原稿（index_signup_04-1.jpg）這兩顆按鈕是扁平深金 #AD842C＋白字，
     但站上已定稿的金色按鈕是淺金漸層＋深褐字。淺金底配白字對比極低、
     幾乎看不見，故此處採站上既有樣式與「下一步」一致，不照原稿的白字。
     若日後要整體回歸原稿，兩顆按鈕必須一起改。 */
.su-btn-upload{min-width:150px;cursor:pointer;background:var(--g-gold-btn);color:#3A2C08}
.su-upload.is-picked .su-btn-upload{opacity:.55}
.su-file{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:#1F1E1A}
/* ★ 自訂 display 會蓋掉 [hidden] 的 display:none —— 沒有這一行，
   還沒選檔案就會看到紅色 PDF 圖示。站上 .modal / .su-modal / .su-step
   都各自寫了同樣的防線，這裡原本漏了。 */
.su-file[hidden]{display:none}
.su-pdf{
  flex:none;width:26px;height:30px;border-radius:3px;
  background:#D93025;color:#fff;
  font-family:var(--f-geo);font-size:9px;font-weight:700;font-style:normal;
  display:grid;place-items:center;letter-spacing:.02em;
}
.su-hint{font-size:12px;color:#6C6964;margin:8px 0 0;padding-left:25px}
.su-desc-tip{margin-top:22px}

/* Step 5 沒有按鈕，卡片下緣的留白比其他步驟大：
   原稿 311 高，內文三行落在 +143／+175／+207（行距 32），
   末行結束後還有一段空白才到卡底。 */
.su-done{margin-top:50px;margin-bottom:29px}
.su-done p{font-size:calc(15px * var(--k-sm));line-height:32px;color:#1F1E1A;margin:0}

@media (max-width:767px){
  .su-upload{flex-direction:column;align-items:flex-start;gap:12px}
  .su-btn-upload{width:100%;max-width:300px}  /* 2026-10-13：跟 .su-btn 的 300 齊 */
  .su-hint{padding-left:0}
}

/* ══════════════════════════════════════════════════════
   語系覆寫
   ══════════════════════════════════════════════════════
   四個語系共用同一份版面，這裡只放「該語系必須不同」的值。

   分三層，由重到輕：
     ① 字型堆疊 —— 不同語系必須用不同的 CJK 字型（見下方說明）
     ② 數值 token —— 字距、斷行規則等，元件規則維持單一份
     ③ 規則覆寫 —— 結構性差異才用（例如英文標題必須兩行）

   ★ 為什麼放在同一個檔案而不拆檔：
     ・語系頁少一個 HTTP 請求（LINE 內建瀏覽器連線常不穩）
     ・改版面時一眼看得到所有語系例外，不會漏改
     超過 200 行再考慮拆成 css/lang.css。
   ══════════════════════════════════════════════════════ */

/* ── ① 字型堆疊 ────────────────────────────────────
   實測（畫布逐像素比對）Noto Sans TC 涵蓋中文、日文假名與漢字，
   但「沒有韓文諺文」—— 不覆寫的話韓文版會用訪客的系統字型，
   Mac / Windows / Android 各不相同，版面在別人機器上會跑掉。
   日文雖然 TC 有字，但共用漢字是繁體字形（直／骨／今／海…），
   日本讀者看得出來，所以也換成 JP。
   字型檔由 index.php 依語系只載該語系那一套。 */
html[lang="ja"]{
  --f-zh:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --f-geo:"Jost","Noto Sans JP",sans-serif;
}
html[lang="ko"]{
  --f-zh:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-geo:"Jost","Noto Sans KR",sans-serif;
}
html[lang="en"]{
  /* 英文不需要 CJK 字型，也就不載 —— 首屏更快。 */
  --f-zh:"Jost",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-geo:"Jost",system-ui,sans-serif;
}

/* ═══ 檔案尾端：≥1921 超寬螢幕覆寫 ═══
   ★ 必須放在整份樣式的最後 —— 它要蓋掉前面同權重的基準值
   （bottom:35、min-height:317、.hero 的 clamp）。放前面會被蓋回去，
   卡片會同時被 top 與 bottom 錨住、拉成 537 高（2026-09-06 踩過）。 */
/* ── ≥1921：超寬螢幕（2026-09-06 使用者定案 B 案，不留黑邊）──
   1920 是逐像素定稿基準，超過之後「內容」不再跟著長大：
   ① --inset 改為 (100vw-1920)/2 + 120px → 全站內容格線鎖成
      「1920 版面置中」，但元素本身仍滿版 → 背景照樣 bleed 到螢幕邊，
      沒有黑邊（這就是不用 max-width 置中、改用內距鎖格線的原因）。
   ② Hero 高度鎖在 1920 的值（47.4vw@1920 = 910）。
   vw 尺寸的裝飾（弧線、波浪、稻浪）容許繼續微幅放大（2033 約 +6%），
   它們是有機形狀、看不出來，換來的是滿版無黑邊。
   1919 以下在 min-width 之外，天生碰不到。 */
@media (min-width:1921px){
  :root{--inset:calc(50vw - 840px)}
  .hero{min-height:910px}
  /* 報名 A 卡片貼在臺灣之東 logo 正下方 ——
     2026-09-06 使用者指定，範圍「1921 以上、不含 1920」：1920 定稿的
     bottom:35 錨定原封不動，只有超寬螢幕把卡片收到 logo 下方。
     水平：沿用 ≥1440 的 right:calc(50vw - 630px)（貼書法右緣，置中錨定，
     超寬螢幕自動跟著置中的 logo）。
     垂直：從 bottom:35 改 top 錨 —— logo 底 = 內距 76 + 書法高
     480×586/1200 ≈ 310，加 28px 呼吸 → top:338。底緣遠小於 Hero 910。
     高度：使用者嫌 317 太高（2026-09-06），超寬版取消 min-height、
     內距與行距收緊，讓內容自然決定高度（約 265）。 */
  /* 卡片收到 logo 正下方（2026-09-06 使用者指定，僅超寬螢幕；
     1920 過稿維持設計稿的右下 bottom:35 不動）。
     水平不用寫 —— ≥1680 的 right:var(--inset) 在格線鎖定後
     就是「貼 logo 右緣」（logo 靠格線右、卡片也靠格線右）。
     垂直：原尺寸 logo 底 = 76 + 600×586/1200 = 369，加 28 呼吸 → top:397。
     卡片高 320 → 底緣 717 < Hero 910，不壓到剪影（y574-690 在卡片左邊欄）。 */
  .countdown-card{bottom:auto;top:397px}
}

/* ═══════════════════════════════════════════════════════════
   英文版專屬修正（2026-09-11 使用者定調：中文已定稿不動；
   英文因為字串變長，各區塊要另外調。全部用 html[lang="en"] 圈住，
   特異度比原規則高一級，不看宣告順序；中文／日／韓完全不受影響。
   ★ 同日補一個例外：日文「まち・里めぐり」這一顆藥丸在 1200–1349 這個窄段
   （藥丸三欄均分擠到 163–169px 寬）會斷成兩行，其餘七顆與其他寬度都是一行，
   見下方 html[lang="ja"] 那一小段，跟英文版修正分開放，不混在同一個區塊。） */

/* ── 02 Hero 倒數卡 ──
   英文卡 338px（中文 320，同日再收緊 .cd-row 上下距後由 366 降到 338）：Countdown 三行式多了 18px。原本各斷點的 top 都是
   「Hero 高 − 355」（355 = 底邊留 35 + 卡高 320），卡片變高後底邊被 Hero 的
   overflow:hidden 切掉 27–37px（1200–1920 實測）。
   處理原則：卡片頂端相對書法的位置不動（1200–1439 卡頂離書法只剩 23–44px，
   不能再往上），改把 Hero 撐高 18；≥1680 卡頂離書法 88–202px 有餘裕，改把卡片
   上移 18（top 355→373），Hero 不動。 */
@media (min-width:1200px) and (max-width:1299px){
  html[lang="en"] .hero{min-height:max(47.4vw, 666px)}                       /* 648+18 */
  html[lang="en"] .countdown-card{top:calc(max(47.4vw, 666px) - 373px)}      /* 卡頂位置不變 */
}
@media (min-width:1300px) and (max-width:1439px){
  html[lang="en"] .hero{min-height:max(47.4vw, 690px)}                       /* 672+18 */
  html[lang="en"] .countdown-card{top:calc(max(47.4vw, 690px) - 373px)}
}
@media (min-width:1440px) and (max-width:1679px){
  /* 這段卡片是固定 top:338；1440 時 Hero 683、卡底 338+338=676 → Hero 至少 711 */
  html[lang="en"] .hero{min-height:max(47.4vw, 711px)}
}
@media (min-width:1680px){
  html[lang="en"] .countdown-card{top:calc(min(47.4vw, 930px) - 373px)}      /* 底邊留 35 不變 */
}
@media (min-width:768px) and (max-width:1199px){
  /* 平板卡片是絕對定位、Hero 高度由 min-height 精算（中文卡 227）；英文卡 293 */
  html[lang="en"] .hero{min-height:calc(34px + var(--logo-h) + var(--cd-gap) + 293px + 26px)}
}

/* ── 02 Hero 倒數卡內部：英文多了 COUNTDOWN 這一行，日期與倒數之間原本的
   margin 16 + padding 14 在英文版看起來空太多（使用者 2026-09-11 指正）。
   上下都收：margin 16/18 → 6/12、padding 14/14 → 6/10。 */
html[lang="en"] .cd-row{margin:6px 0 12px;padding:6px 0 10px}

/* ── 09 藥丸 <1200：原本固定 150 寬讓容器自然排 3 欄（768–1199）；英文 150 寬
   會擠成三行。改成固定 2 欄（每顆 50% − 半個 gap），長字最多兩行。 */
@media (min-width:881px) and (max-width:1199px){
  /* 容器仍鎖 480（再寬會壓到右側的地圖），兩欄各 232；長字兩行 */
  html[lang="en"] .map-links li{flex:0 0 calc(50% - 7.5px)}
}
@media (min-width:768px) and (max-width:880px){
  /* 原本鎖 315（2×150）；英文放寬到 copy 欄的可用寬（同 .map-copy 的 padding-right 算式），
     820 時約 448 → 兩欄各 220 */
  html[lang="en"] .map-links{max-width:calc(100% - min(30vw, 87.5vw - 345px) - 24px)}
  html[lang="en"] .map-links li{flex:0 0 calc(50% - 7.5px)}
}
@media (max-width:767px){
  /* 手機：150 寬兩欄時英文最長三行。改單欄、最寬 360 置中，八顆全部一行或兩行 */
  html[lang="en"] .map-links{max-width:min(100%, 360px)}
  html[lang="en"] .map-links li{flex:0 0 100%}
}
@media (max-width:1199px){
  /* <1200 藥丸是固定 43 高；英文兩行會溢出 4px，改 min-height 讓它自己長高 */
  html[lang="en"] .map-links a{height:auto;min-height:43px}
}

/* ── 全站按鈕（.btn）：英文字距 .08em 看起來鬆散，使用者 2026-09-11 看比較圖後
   決定英文版拿掉字距。只動英文，中文的 .08em 是照原稿量的，不動。 */
html[lang="en"] .btn{letter-spacing:0}

/* ── 04 About：1200–1679 英文段落比 16:9 照片高（1440 高 109px），照片改撐滿列高，
   object-fit:cover 多裁一點兩側。1920 英文文字比照片矮，不動。<1200 是單欄不適用。 */
@media (min-width:1200px) and (max-width:1679px){
  html[lang="en"] .concept-grid{align-items:stretch}
  html[lang="en"] .concept-photo{aspect-ratio:auto;height:100%}
}

/* ── 07 規則卡：Preliminary Review／Awards & Benefits 標題兩行，金色區比其他三張
   高 33px、白色區起點不齊。標題一律預留兩行高，單行的垂直置中。
   2026-10-13：日文版「賞金および参加特典」改稿後也變兩行，同一條規則套上。 */
html[lang="en"] .rule-top h3,
html[lang="ja"] .rule-top h3{
  min-height:2.7em;                 /* 2 行 × line-height 1.35，跟著 --k-lg 縮 */
  display:flex;align-items:center;justify-content:center;
}

/* ── 08 創作主題 ──
   左欄：英文四項各兩行，中文的 line-height 44 太鬆，1440 時左欄比照片組高 55px。
   右欄：說明文字是中文的 2–3 倍長，遮掉六成照片。借手機版的做法：暗漸層拉高、
   中段就開始加深，字級降一級，露出的照片就多了。 */
@media (min-width:768px){
  html[lang="en"] .theme-lead{font-size:calc(20px * var(--k-lg));margin-bottom:10px}
  html[lang="en"] .theme-list li{font-size:calc(17px * var(--k-md));line-height:1.5;margin-bottom:8px}
  html[lang="en"] .theme-photos figure::after{
    height:82%;
    background:linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.38) 26%, rgba(0,0,0,.74) 56%, rgba(0,0,0,.94) 100%);
  }
  html[lang="en"] .theme-photos figcaption{inset:auto 0 11px 0;padding:0 16px 0 28px}
  html[lang="en"] .theme-photos figcaption b{font-size:15px;line-height:1.35;letter-spacing:.02em}
  html[lang="en"] .theme-photos figcaption span{font-size:12.5px;line-height:1.45;margin-top:3px}
}

/* ── 08 手機（≤767）：英文說明文字 4–5 行，203px 高的格子被字吃掉一半以上
   （使用者 2026-09-11 看 390/690 實機截圖指正「露出的圖片不夠多」）。
   格子加高 70（160+11vw → 230+11vw），暗漸層跟著拉到 90%、字再降一級，
   照片露出的部分才夠。中文格子高度不動。 */
@media (max-width:767px){
  /* 兩欄時每格只有 ~170px 寬，英文說明要 8 行，格子再高也被字吃掉；改單欄，
     每張整寬（390 時 350），說明 3–4 行，照片上半整片露出。
     外圍圓角原本是 2×2 的四角，單欄改成第 1 張上兩角、第 4 張下兩角；
     編號圓標一律靠左。 */
  /* 維持 2×2（使用者 2026-09-11 定調，不要改單欄）。只加高黑色遮罩那塊，
     格子本身也加高一點給遮罩空間，字級不變。 */
  html[lang="en"] .theme-photos figure{height:calc(230px + 11vw)}   /* 390 → 273，原 203 */
  html[lang="en"] .theme-photos figure::after{
    height:92%;
    background:linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.35) 20%, rgba(0,0,0,.80) 45%, rgba(0,0,0,.96) 100%);
  }
}

/* ── 09 八顆藥丸：英文改單欄一列八顆，長字串才有一整欄的寬度（2 顆會換行的
   「Eastern Taiwan Tourism Network」「Taitung County Government Tourism Website」
   在 1440 以上能回到一行）。<1200 藥丸是另一套機制（固定 150 寬置中）不適用。 */
@media (min-width:1200px){
  html[lang="en"] .map-links{gap:14px 0}
  html[lang="en"] .map-links li{flex:1 1 100%}
}

/* ── 韓文版 09 八顆藥丸（2026-09-11）：韓文字串比中文長，1200–1366 右欄兩欄
   會把第 7、8 顆擠成 2–4 行，文字掉出 43px 膠囊。桌機跟英文版一樣改單欄；
   <1200 保留既有欄數，只讓兩行文字自然撐高。 */
@media (min-width:1200px){
  html[lang="ko"] .map-links{gap:14px 0}
  html[lang="ko"] .map-links li{flex:1 1 100%}
  html[lang="ko"] .map-links a{height:auto;min-height:43px;padding-block:8px;line-height:1.25}
}
@media (max-width:1199px){
  html[lang="ko"] .map-links a{height:auto;min-height:43px;line-height:1.25}
}

/* ── 09 日文版八顆藥丸：第 1／7／8 顆在 1200–1440 右欄兩欄時會超出膠囊，
   手機第 8 顆也會超出 150px。日文允許自然斷行，並讓兩行時自行長高。 */
html[lang="ja"] .map-links a{
  height:auto;min-height:43px;line-height:1.25;
  word-break:normal;overflow-wrap:anywhere;
}

/* ── 日文版「まち・里めぐり」：≥1200 的三欄藥丸實測 1350px 寬一行（170px）、
   1310px 寬就斷成兩行（165px），中間找不到通用寬度可以兩邊兼顧，字級夾住下限。
   只縮這一顆，其餘七顆與其他語系不受影響；1200–1349 之外字級照舊。 */
@media (min-width:1200px) and (max-width:1349px){
  html[lang="ja"] .map-links li:nth-child(3) a{font-size:12px;letter-spacing:0}
}
@media (min-width:1200px) and (max-width:1279px){
  html[lang="ja"] .map-links li:nth-child(8) a{font-size:12px;letter-spacing:0}
}

/* ── 報名表：韓文版「英文姓名」提示字（2026-10-14 業主新文案，約 346px）
   在 16px 下放不下輸入框（桌機內寬 335、手機 300），結尾被切掉。只縮提示字到 13px（約 281px），
   輸入的字照舊 16px —— iOS 只看輸入框本身的字級決定要不要放大，提示字縮小不影響。
   成員 2～4 由 JS 照成員 1 的結構產生，同一條規則套得到。 */
html[lang="ko"] .su-member .su-row-4:first-child .su-td:nth-child(4) input::placeholder{font-size:13px}