/* ═══════════════════════════════════════════════════════════════════════
   悠人 Yuto 官方網站 — yuto-site.css
   ───────────────────────────────────────────────────────────────────────
   【檔案結構】BATCH-C-4 分層重排

     第 1 區　基礎層     :root 變數總表、reset、@font-face、@keyframes
     第 2 區　元件層     按鈕、卡片、燈箱、日曆、表單…（不綁頁面）
     第 3 區　頁面層     body.yuto-xxx-page（各頁專屬覆蓋）

   ⚠️【@media 不是獨立的一層】
      它只是「條件包裝」，裡面的規則各自屬於元件層或頁面層。
      → @media 就近放在它所屬的那一層。
      → 若一個 @media 內部混合多層，歸到【最高的那一層】（排最後），
        以免它意外跑到前面而輸掉該贏的競爭。
      ⚠️ 不可把所有 @media 集中到檔尾 → 實測手機版 380 個樣式翻轉。

   ⚠️【核心原則】「後面的贏」是【設計】，不是巧合。
      · 頁面層排在元件層之後 → 頁面覆蓋元件
      · 同一層【內部】的相對順序【完全沒有改變】（保序搬移）

   🧱【承重牆】檔案中有 33 條規則帶著「承重牆」警告註解 —
      它們靠位置壓過其他規則，【相對順序不可改變】。

   ✏️ 新增樣式時：找到對應的區，加在那一區裡面。不要另外開新區。

   ───────────────────────────────────────────────────────────────────────
   📐【註解規範】RULE-34 — 只有 4 種註解，一律引用 DECISIONS.md 的編號
        WHAT ▸ 這是什麼      WHY  為什麼這樣寫
        WARN  動了會怎樣      TODO 還沒做完
      · 編號只有 DECISIONS.md 能發（PRIN-nn / WALL-nn / TRAP-nn / FIX-nn）
      · 禁止：行號、批次版本號、結尾橫幅、改動歷史
      · 開場請跑：python3 lint_comments.py（違規必須是 0）
   ═══════════════════════════════════════════════════════════════════════ */

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 1 區　基礎層                                                   ║
   ║  :root 變數總表 ｜ reset ｜ @font-face ｜ @keyframes ｜ html/body/* ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
@charset "UTF-8";
/* build: yuto-site-20260728-196 | ASCII version probe: search this line to verify deployed build */

/* 手機：edge 仍維持深色；main 保留 B 版視覺，未來可只調手機變數。 */

/* 平板：獨立保留調整入口，目前視覺與 B 版一致。 */

/* 超寬 / 電視：獨立保留調整入口，目前視覺與 B 版一致。 */

/* WARN 只處理最底層版面，不改 hero-card / section-card / button / field / booking 流程。 */

/* 超寬桌機 / 電視：不把 header 撐滿整個視野，維持內容寬度上限與置中。 */

/* 平板與小筆電：仍維持單列，但縮小 gap，避免太早擠壓。 */

/* 手機橫向 / 小高度裝置：單列壓低高度，支援 iPhone landscape、摺疊機橫向、小型平板橫向。 */

/* 手機直向：正式承接目前已確認的 header row 平衡結果。
   重點：不是兩列式，也不做 logo 收合；左大 Logo + 右大字導覽同列。 */

/* 窄手機：保留同列，不改成兩列；只縮 logo 與字距，避免 320～380px 寬度爆版。 */

/* 超窄裝置：最後保護。仍不回兩列，但允許導覽微縮與 logo 微縮。 */

/* WARN 不要再用 header::before / footer::after 120vh 延伸，避免頁尾被撐出超長空白。 */

/* 手機效能保護：提示瀏覽器預備動畫圖層，不改動畫時間、幅度、陰影、blur、排版或互動邏輯。 */

/* WHAT ▸ Yuto Mobile Double-Tap Zoom Guard Module v2 */

/* Mobile: keep the mobile close button's original box, but fill that box with the shuriken. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: #0f0f14;
  line-height: 1.7;
}

/* WHAT ▸ Yuto Page Background Standard v2：Edge / Main 分層版 */
/* ═══════════════════════════════════════════════════════════════
   【變數總表】:root — CSS 自訂屬性的單一真相來源（BATCH-C-1）

   ⚠️ 合併前，:root 被寫在【14 個不同的地方】，106 個變數散落全檔 →
      想找一個變數的定義，得在 21,000 行裡搜尋 14 個區塊。

   ※ 新增變數請加在本表內，不要另外開新的 :root 區塊。
   ※ 響應式覆寫的 :root（@media 內）刻意保持原位，不併入本表：
        · @media (min-width: 1600px)            → --yuto-public-container
        · @media (hover: hover) and (pointer: fine) → --yuto-knife-cursor 等 5 個
   ═══════════════════════════════════════════════════════════════ */
:root {
  --yuto-page-edge-bg: var(--yuto-edge-bg, #070911);

  --yuto-public-content-start-gap-desktop: 88px;
  --yuto-public-content-end-gap-desktop: 54px;
  --yuto-public-content-start-gap-tablet: 72px;
  --yuto-public-content-end-gap-tablet: 48px;
  --yuto-public-content-start-gap-mobile: 54px;
  --yuto-public-content-end-gap-mobile: 38px;
  --yuto-public-content-start-gap-landscape: 40px;
  --yuto-public-content-end-gap-landscape: 32px;

  --yuto-edge-bg: #070911;
  --yuto-header-height: 78px;
  --yuto-header-bg: rgba(8, 10, 16, 0.72);
  --yuto-header-border: rgba(255, 255, 255, 0.08);
  --yuto-footer-border: rgba(255, 255, 255, 0.08);
  --yuto-public-container: var(--container, 1200px);

  --yuto-surface-shadow-rest: none;
  --yuto-surface-hover-border-soft: rgba(159, 124, 255, 0.1);
  --yuto-surface-hover-border: rgba(159, 124, 255, 0.12);
  --yuto-surface-hover-shadow-soft:
  0 6px 14px rgba(0, 0, 0, 0.06),
  0 0 8px rgba(159, 124, 255, 0.025);
  --yuto-surface-hover-shadow:
  0 8px 18px rgba(0, 0, 0, 0.1),
  0 0 8px rgba(159, 124, 255, 0.03);

  /* WHAT ▸ 卡片表面基態：底色與邊框色。
     WARN 與下方 hover 三要素同為全站卡片外觀的唯一調整入口。 */
  --yuto-card-bg: rgba(255, 255, 255, 0.04);
  --yuto-card-border: rgba(255, 255, 255, 0.1);

  /* WHAT ▸ 卡片表面 hover 三要素：紫邊、陰影、微反白。
     WARN 這三行是全站卡片外觀的唯一調整入口（見 .yuto-surface-card）。
          要調濃淡改這裡，不要回頭改各頁規則，否則兩邊互相打架。 */
  --yuto-card-hover-border: rgba(159, 124, 255, 0.28);
  --yuto-card-hover-shadow:
  0 12px 30px rgba(0, 0, 0, 0.18),
  0 0 8px rgba(159, 124, 255, 0.03);
  --yuto-card-hover-bg: rgba(255, 255, 255, 0.05);

  /* WHAT ▸ 可點卡片的「被選中」狀態（見 .yuto-surface-card--button）。
     WARN 只有可點卡片會用到 —— 一般卡片沒有選中概念，不要拿去別處。 */
  --yuto-card-selected-border: rgba(159, 124, 255, 0.28);
  --yuto-card-selected-bg:
  linear-gradient(180deg, rgba(141, 120, 255, 0.14), rgba(255, 255, 255, 0.04));
  --yuto-card-selected-shadow: 0 10px 24px rgba(109, 88, 255, 0.12);

  /* WHAT ▸ 浮層面板的版面：寬度上限與內距。
     WHY  兩個取消確認對話框（互動頁、付款頁）是同一個東西，版面在此定義一次。
     WARN 改這裡兩邊一起變 —— 不要回頭在各頁自己寫 width 或 padding，
          頁面前綴的特異度會壓過元件，寫了就等於把元件架空。 */
  --yuto-overlay-max-width: 560px;
  --yuto-overlay-padding: clamp(24px, 3vw, 28px);

  --card: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.12);
  --text: #f6f7fb;
  --text-soft: #c8cbda;
  --primary: #9f7cff;
  --primary-hover: #b59cff;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --container: 1200px;

  --yuto-loading-kamon-image: url("../images/kamon_goldengreen_middle.png");
  /* ═══ 【資產登記表】v1（FIX-05）═══
  圖片路徑的單一真相來源。要換圖，只改這裡一處。
  ⚠️ 其他地方一律用 var()，不要再寫死 url()，也不要加 url() 當 fallback
  （fallback 會在變數失效時偷偷用舊圖，而且你找不到原因）。 */
  --yuto-lightbox-arrow-prev-image: url("../images/Wakizashi_leftbutton.png");
  --yuto-lightbox-arrow-next-image: url("../images/Katana_rightbutton.png");
  --yuto-cloud-image: url("../images/japanese_cloud.png");
  --yuto-loading-kamon-size-xs: 14px;
  --yuto-loading-kamon-size-sm: 16px;
  --yuto-loading-kamon-size-lg: 34px;
  --yuto-loading-kamon-liquid-a: rgba(77, 226, 197, 0.88);
  --yuto-loading-kamon-liquid-b: rgba(219, 207, 178, 0.84);
  --yuto-loading-sword-hilt-width: 38px;
  --yuto-loading-sword-tip-width: 30px;

  --yuto-ui-text: var(--text, #f6f7fb);
  --yuto-ui-primary-hover: var(--primary-hover, #b59cff);
  /* ═══════════════════════════════════════════════════════════════
  【緩動曲線登記表】v1（BATCH-B2）— 動畫曲線的單一真相來源
  ⚠️ 曲線【只寫在這裡】。其他地方一律用 var()，不要再寫死 cubic-bezier()。
  原因：同一條曲線先前有 3 種寫法（.22 / 0.22 / 加空格），
  grep 根本抓不全 → 想調整全站動畫手感時必定漏改。
  ※ 曲線與「時間」分開：時間由各處自行指定（.22s / .3s / .6s…），
  曲線統一引用本表。（舊的 --yuto-ui-transition 把兩者綁在一起，
  導致要用不同時間時只能重新寫死曲線 —— 這正是散落的根因。）
  ═══════════════════════════════════════════════════════════════ */
  --yuto-ease-out: cubic-bezier(.22, 1, .36, 1);          /* 主要緩出：燈箱、卡片、多數過場（17 處）*/
  --yuto-ease-in-out-strong: cubic-bezier(.36, .07, .19, .97); /* 人設頁面板切換（6 處）*/
  --yuto-ease-slash: cubic-bezier(.12, .86, .18, 1);      /* 刀光特效（3 處）*/
  --yuto-ease-soft: cubic-bezier(.2, .8, .2, 1);          /* 人設頁柔和過場（2 處）*/
  --yuto-ease-sheen: cubic-bezier(.16, 1, .3, 1);         /* 按鈕光澤掃過（1 處）*/

  --yuto-field-bg: rgba(255, 255, 255, 0.04);
  --yuto-field-bg-hover: rgba(255, 255, 255, 0.05);
  --yuto-field-border: rgba(255, 255, 255, 0.1);
  --yuto-field-border-focus: rgba(159, 124, 255, 0.34);
  --yuto-field-text: #f6f7fb;
  --yuto-field-muted: rgba(200, 203, 218, 0.64);
  --yuto-field-disabled-opacity: .56;
  --yuto-field-disabled-filter: brightness(.72) grayscale(.15);
  --yuto-field-disabled-bg: rgba(255, 255, 255, 0.035);
  --yuto-field-disabled-border: rgba(255, 255, 255, 0.08);
  --yuto-field-disabled-text: rgba(246, 247, 251, 0.58);

  --yuto-ui-primary: #9f7cff;

  --yuto-public-last-visible-ui-buffer-desktop: 22px;
  --yuto-public-last-visible-ui-buffer-tablet: 22px;
  --yuto-public-last-visible-ui-buffer-mobile: 16px;
  --yuto-public-last-visible-ui-buffer-landscape: 16px;

  --yuto-lab-bg-edge: #050711;
  --yuto-lab-bg-top: #070f20;
  --yuto-lab-bg-mid: #09091a;
  --yuto-lab-bg-bottom: #050712;
  --yuto-lab-bg-violet: rgba(132, 71, 255, 0.22);
  --yuto-lab-bg-mint: rgba(77, 226, 197, 0.052);

  --yuto-bg-texture-image: none;
  --yuto-bg-texture-opacity: .75;
  --yuto-bg-texture-size: 520px 520px;
  --yuto-bg-texture-blend: multiply;
  --yuto-bg-texture-position: top left;

  --yuto-payment-lab-modal-layer-v722: 9000;
  --yuto-payment-lab-cursor-layer-v722: 100000;
  --yuto-payment-lab-slash-layer-v722: 99999;
}

/* WHAT ▸ 全站禁止文字選取 / 圖片拖曳 */
html,
body,
body * {
  user-select: none;
  -webkit-user-select: none;
}

@keyframes yutoKamonLiquidPulse {
  from { filter: drop-shadow(0 0 3px rgba(77, 226, 197, 0.18)); }
  to { filter: drop-shadow(0 0 8px rgba(219, 207, 178, 0.28)); }
}

@keyframes yutoKamonLiquidShift {
  0% { background-position: 0 72%, 0 0; }
  50% { background-position: 18px 46%, 0 0; }
  100% { background-position: 36px 18%, 0 0; }
}

/* WHAT ▸ 全站共用進場動畫（首頁／連結／預約／人設都指向這一個） */
@keyframes yutoFadeUpSmooth {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

html {
  color-scheme: dark;
  background: #070911;
  min-height: 100%;
  background-color: var(--yuto-page-edge-bg);

  scroll-behavior: smooth;
}

@keyframes fieldBubbleIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes yutoBookingKamonWaveMask {
  0% {
    clip-path: polygon(
      0 26%, 7% 14%, 15% 28%, 23% 12%, 31% 25%, 39% 15%,
      47% 30%, 55% 13%, 63% 26%, 71% 10%, 79% 24%, 87% 14%, 100% 27%,
      100% 100%, 0 100%
    );
  }
  50% {
    clip-path: polygon(
      0 16%, 7% 27%, 15% 13%, 23% 29%, 31% 12%, 39% 26%,
      47% 15%, 55% 30%, 63% 12%, 71% 25%, 79% 14%, 87% 28%, 100% 13%,
      100% 100%, 0 100%
    );
  }
  100% {
    clip-path: polygon(
      0 28%, 7% 12%, 15% 25%, 23% 15%, 31% 30%, 39% 13%,
      47% 27%, 55% 11%, 63% 24%, 71% 16%, 79% 29%, 87% 12%, 100% 24%,
      100% 100%, 0 100%
    );
  }
}

@keyframes yutoBookingKamonFillIdle {
  0%, 100% { transform: translateY(.9px); }
  50% { transform: translateY(-.9px); }
}

@keyframes submitPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* WARN [TRAP-16] 唯一使用者是 .yuto-bg-cloud，而那個 class 由 JS 執行期產生。
     若 .yuto-bg-cloud 被誤刪，本動畫會跟著被判成孤兒 —— 兩者要一起看。 */
@keyframes yutoCloudDrift {
  from {
    transform: translate3d(calc(-50% - var(--motif-drift, 12px)), -50%, 0) rotate(var(--motif-rotate, 0deg)) scale(var(--motif-scale, 1));
  }
  to {
    transform: translate3d(calc(-50% + var(--motif-drift, 12px)), -50%, 0) rotate(var(--motif-rotate, 0deg)) scale(var(--motif-scale, 1));
  }
}

@keyframes yutoKnifeSlashHoldStill {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--slash-x), var(--slash-y), 0)
      rotate(var(--slash-rotate, -42deg));
  }
  10% {
    opacity: .98;
  }
  68% {
    opacity: .88;
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--slash-x), var(--slash-y), 0)
      rotate(var(--slash-rotate, -42deg));
  }
}

@keyframes yutoKnifeSlashBaseStill {
  0% {
    opacity: 0;
  }
  12% {
    opacity: .86;
  }
  56% {
    opacity: .72;
  }
  100% {
    opacity: 0;
  }
}

@keyframes yutoKnifeSlashBaseSoftStill {
  0% {
    opacity: 0;
  }
  14% {
    opacity: .50;
  }
  56% {
    opacity: .36;
  }
  100% {
    opacity: 0;
  }
}

@keyframes yutoKnifeSlashSweepInPlace {
  0% {
    opacity: 0;
    transform: translate3d(-130%, 0, 0) scaleX(.62);
  }
  12% {
    opacity: .96;
  }
  62% {
    opacity: .98;
    transform: translate3d(215%, 0, 0) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(250%, 0, 0) scaleX(.82);
  }
}

@keyframes yutoKnifeSlashSweepInPlaceReverse {
  0% {
    opacity: 0;
    transform: translate3d(250%, 0, 0) scaleX(.62);
  }
  12% {
    opacity: .96;
  }
  62% {
    opacity: .98;
    transform: translate3d(-130%, 0, 0) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-150%, 0, 0) scaleX(.82);
  }
}

/* 【掃光行程旋鈕】預設=原曲線精確等價(60%幀=線性內插0.17)。
   ★鐵律:調 streak 必同步重算 to ≈ 138% ÷ streak(24%→560%,34%→405%),
   單位=光條寬倍數,脫鉤會變成閃光或斷尾。 */
@keyframes yutoKnifeHoverLightStraight {
  0% {
    opacity: 0;
    transform: translateX(var(--yuto-sheen-from, -45%));
  }
  20% {
    opacity: var(--yuto-sheen-peak, .34);
  }
  60% {
    opacity: var(--yuto-sheen-mid, .17);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--yuto-sheen-to, 560%));
  }
}

@keyframes yutoMiddleScrollPulse {
  0%, 100% {
    transform: scale(.94);
    opacity: .32;
  }
  50% {
    transform: scale(1.08);
    opacity: .78;
  }
}

@font-face {
  font-family: 'Yuto GenSenRounded JP Final';
  src: url('../fonts/JP/GenSenRounded2JP-M.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Yuto GenSenRounded JP Final';
  src: url('../fonts/JP/GenSenRounded2JP-B.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Yuto GenSenRounded JP Final';
  src: url('../fonts/JP/GenSenRounded2JP-H.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* 家紋進場:淡入(0→.72)+上滑(18px→0),對齊卡片但收在家紋自己的 .72 opacity。 */
@keyframes yutoKamonFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: .72;
    transform: translateY(0);
  }
}

@keyframes personaIntroScreamShake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  10% { transform: translate3d(-1.2px, .2px, 0) rotate(-.38deg); }
  20% { transform: translate3d(1.4px, -.3px, 0) rotate(.34deg); }
  32% { transform: translate3d(-1.6px, .3px, 0) rotate(-.28deg); }
  44% { transform: translate3d(1.2px, -.2px, 0) rotate(.24deg); }
  56% { transform: translate3d(-.9px, .2px, 0) rotate(-.18deg); }
  68% { transform: translate3d(.7px, -.1px, 0) rotate(.14deg); }
  80% { transform: translate3d(-.35px, .1px, 0) rotate(-.08deg); }
}

@keyframes personaScreamGlowSync {
  0%, 100% {
    text-shadow:
      0 2px 9px rgba(0, 0, 0, 0.58),
      0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(121, 232, 255, 0);
  }

  12%, 72% {
    text-shadow:
      0 2px 9px rgba(0, 0, 0, 0.68),
      0 0 10px rgba(255, 255, 255, 0.26),
      0 0 18px rgba(121, 232, 255, 0.28);
  }
}

/* [YUTO-CSS-VERIFY v671] Booking Lab kamon loop loading for selects and submit card
   Owner: P-Booking / Booking Lab kamon loading only.
   Target:
   1) booking-lab date/time select loading:
      .select-trigger.yuto-field-select-trigger.is-loading
   2) booking-lab submit progress card:
      .submit-spinner
   Behavior:
   - Fake loop loading.
   - Kamon image stays fixed.
   - The visible waterline rises from bottom to top.
   - Uses PNG transparency, no CSS mask, no square gradient layer.
   Guard:
   - Payment kamon v670 untouched.
   - booking-lab layout, fields, buttons, sword progress, API, JS, HTML untouched.
   - Persona / News Lab / Home / Links / Privacy untouched.
*/
@keyframes yutoKamonWaveFill {
  0% {
    clip-path: polygon(
      0 100%, 8% 100%, 16% 100%, 24% 100%, 32% 100%, 40% 100%,
      48% 100%, 56% 100%, 64% 100%, 72% 100%, 80% 100%, 88% 100%, 100% 100%,
      100% 100%, 0 100%
    );
    opacity: 0;
  }

  8% {
    opacity: .96;
  }

  30% {
    clip-path: polygon(
      0 78%, 8% 72%, 16% 77%, 24% 70%, 32% 76%, 40% 72%,
      48% 79%, 56% 71%, 64% 76%, 72% 68%, 80% 75%, 88% 70%, 100% 77%,
      100% 100%, 0 100%
    );
    opacity: .96;
  }

  58% {
    clip-path: polygon(
      0 52%, 8% 46%, 16% 51%, 24% 44%, 32% 50%, 40% 46%,
      48% 53%, 56% 45%, 64% 50%, 72% 42%, 80% 49%, 88% 44%, 100% 51%,
      100% 100%, 0 100%
    );
    opacity: .96;
  }

  86% {
    clip-path: polygon(
      0 20%, 8% 14%, 16% 19%, 24% 12%, 32% 18%, 40% 14%,
      48% 21%, 56% 13%, 64% 18%, 72% 10%, 80% 17%, 88% 12%, 100% 19%,
      100% 100%, 0 100%
    );
    opacity: .96;
  }

  100% {
    clip-path: inset(0);
    opacity: .96;
  }
}

/* [YUTO-CSS-VERIFY v674] Booking Lab submit sword demo loop loading
   Owner: P-Booking / Booking Lab submit sword progress demo only.
   Type:
   - Visual diagnostic test.
   Target:
   - booking-lab submit progress sword only:
     .submit-progress.show .submit-progress-bar > .yuto-sword-progress-meter
   Purpose:
   - Force a fake percent loop so the sword length visibly changes.
   - Confirm the 3-part sword structure is working:
     fixed hilt + stretched blade + fixed tip.
   Guard:
   - Submit kamon loading v672 untouched.
   - Date/time select loading v671 untouched.
   - Payment kamon v670 untouched.
   - Booking layout, fields, buttons, HTML, JS, API untouched.
   - Persona / News Lab / Home / Links / Privacy untouched.
*/
@keyframes yutoBookingSwordDemoLoopWidth {
  0% {
    width: clamp(126px, 22%, 100%);
  }

  28% {
    width: clamp(160px, 38%, 100%);
  }

  54% {
    width: clamp(210px, 62%, 100%);
  }

  78% {
    width: clamp(260px, 86%, 100%);
  }

  100% {
    width: 100%;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 2 區　元件層                                                   ║
   ║  按鈕、卡片、燈箱、日曆、表單…（不綁定特定頁面的元件）              ║
   ║  ※ @media 就近放在本區（@media 不是獨立的層，只是條件包裝）        ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* WHY 消息縮圖框統一高度，不因 wide / square / portrait 改成不同高度 */

/* 舊 v3 使用 ::before 做不同比例，v1 統一縮圖框後不再需要 pseudo 撐比例。 */

/* 平板 / 窄桌機：改成上圖下文，縮圖框放寬。 */

/* 手機直向：保持統一框，但降低高度避免列表過長。 */

/* 手機橫向 / 小高度裝置：避免縮圖過高壓縮內容。 */

/* 超寬桌機：仍沿用活動頁消息縮圖框，不放大到破壞列表節奏。 */

/* Runtime modal standard: used by booking pending payment and payment cancel confirmation.
   v7 viewport-center + confirm-modal focus standard:
   - Modal layer is centered in the viewport on desktop and mobile.
   - Modal layer owns its own vertical scroll, so wheel / touch can still reach buttons on short screens.
   - Background page is visually dimmed but not hard body-locked; this avoids trapped mobile/desktop scroll.
   - JS may scroll the pending card into view only when returning from the payment page. When booking cancel is clicked on desktop, the confirmation modal opens directly in viewport center; visual placement stays in CSS. */

/* Booking helper utility: replaces legacy inline style="margin-top:0" in booking.html. */

/* v6: do not hard-lock body scroll. The fixed modal owns scroll instead. */

/* v105 cleanup: removed earlier duplicate copy of B Plan Payment UI Lab Sync v1; later identical active copy retained before Payment Result Scoped Spacing Standard. */

/* v105 cleanup: removed earlier duplicate copy of B Plan Payment Result Unified Panel v3 final mobile guard; later identical active copy retained. */

/* WARN 這段只定義 UI；Apps Script logout / session revoke 屬 JS 與後端流程，不由 CSS 完成。 */

/* WARN 這仍是 page-fit residual bridge，不是 Page Shell 完全重構完成；未來若建立正式 Admin Hero/Grid Spacing Standard，再評估回收。 */

/* News Card / Gallery unified media frame is sourced from css/style.css. Admin HTML keeps only preview modal/lightbox shell and data logic. */

/* WARN 這段是 Admin 手機 touch residual guard，不可直接刪；要回收需先建立正式的 Admin Touch Residual Guard 模組並實測 */

/* WHAT ▸ News Mobile UI Tuning Module v1 */
/* News 手機 UI 微調：只調手機排版，不改輪播或燈箱邏輯。 */

/* WHAT ▸ ▸ 基礎元素 / 容器 */

.container {
  margin: 0 auto;
}

/* WHAT ▸ Yuto Site Header / Footer Standard v36：公開頁共用 CSS 定調版 */
.yuto-container {
  width: min(calc(100% - 32px), var(--yuto-public-container));
  margin-inline: auto;
}

@media (max-width: 700px) {
  .yuto-container {
    width: min(calc(100% - 24px), var(--yuto-public-container));
  }
}

@media (max-width: 380px) {
  .yuto-container {
    width: min(calc(100% - 18px), var(--yuto-public-container));
  }
}

/* WHAT ▸ 左上角 Logo 回首頁按鈕 */

.hero {
  padding: 72px 0 56px;
}

.tag {
  margin-bottom: 12px;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.tag:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.page-hero {
  padding: 72px 0 32px;
}

/* WHAT ▸ Yuto Public Surface Interaction Source Contract v2 */
.section-card,
.hero-card {
  box-shadow: var(--yuto-surface-shadow-rest);
  transition:
    transform 0.26s ease,
    box-shadow 0.26s ease,
    border-color 0.26s ease,
    background 0.26s ease;
}

/* WHAT ▸ 後台區塊卡的 hover：走 soft 版（比一般卡片淡一階）。
   WARN 後台自成一套視覺（--admin-card-* 系列），與 .yuto-surface-card 的值不同，
        刻意未納入卡片元件。要統一需先決定是否接受後台外觀改變。 */
.section-card:hover {
  border-color: var(--yuto-surface-hover-border-soft);
  box-shadow: var(--yuto-surface-hover-shadow-soft);
}

/* WHAT ▸ 全裝置顯示穩定性補強 */

.yuto-admin-container {
  min-width: 0;
}

@media (max-width: 700px) {
  .section-head { align-items: flex-start; gap: 10px; margin-bottom: 14px; }

  .section-head h2 { font-size: 1.45rem; }
}

/* WHAT ▸ ▸ 頁首 / 導覽 */

.yuto-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--yuto-header-bg);
  border-bottom: 1px solid var(--yuto-header-border);
  backdrop-filter: blur(var(--payment-lab-glass-blur));
  -webkit-backdrop-filter: blur(var(--payment-lab-glass-blur));
  overflow: visible;
}

/* 【頁首去動畫 v68】頁首是固定框架，logo 與導覽不需要進場 fade-up 動畫。
   這裡覆蓋掉 header 內 fade-up 元素的初始隱藏與動畫，讓它們直接顯示、不從下往上淡入。 */
.yuto-site-header .yuto-site-logo.fade-up,
.yuto-site-header .yuto-site-menu.fade-up {
  opacity: 1;
  transform: none;
  animation: none;
}

.yuto-site-nav {
  min-height: var(--yuto-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.yuto-site-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 112px;
  min-height: 44px;
  padding: 0 14px;
  margin-left: -14px;
  border-radius: 999px;
  color: #f6f7fb;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  overflow: hidden;
  white-space: nowrap;
  transition:
    color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease,
    backdrop-filter 0.22s ease,
    -webkit-backdrop-filter 0.22s ease;
}

.yuto-site-logo:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(var(--payment-lab-modal-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--payment-lab-modal-backdrop-blur));
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 0 8px rgba(159, 124, 255, 0.04);
  transform: translateY(-1px);
}

.yuto-site-logo:active {
  transform: scale(0.98);
}

.yuto-site-logo:focus-visible {
  outline: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(159, 124, 255, 0.2);
  backdrop-filter: blur(var(--payment-lab-modal-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--payment-lab-modal-backdrop-blur));
  box-shadow: 0 0 0 3px rgba(159, 124, 255, 0.08);
}

.yuto-site-logo-image {
  display: block;
  width: auto;
  height: 44px;
  max-width: none;
  object-fit: contain;
  transform: scale(1.12);
  transform-origin: center center;
  border-radius: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.yuto-site-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.yuto-site-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-soft, #c8cbda);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.9;
  transition:
    color 0.22s ease,
    text-shadow 0.22s ease,
    transform 0.22s ease,
    opacity 0.22s ease;
}

.yuto-site-menu a:hover,
.yuto-site-menu a[aria-current="page"] {
  color: var(--text, #f6f7fb);
  opacity: 1;
}

.yuto-site-menu a:hover {
  text-shadow: 0 0 6px rgba(159, 124, 255, 0.12);
  transform: translateY(-1px);
}

.yuto-site-menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: calc(100% + 20px);
  min-width: 62px;
  height: 6px;
  border-radius: 999px;
  background: url("../images/bamboo.png") center / 100% 100% no-repeat;
  opacity: .95;
  transform: translateX(-50%);
  transform-origin: center;
}

@media (min-width: 1600px) {
  .yuto-site-nav {
    min-height: 80px;
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .yuto-site-nav {
    gap: 16px;
  }

  .yuto-site-logo {
    width: 106px;
    min-height: 42px;
    padding-inline: 10px;
    margin-left: -12px;
  }

  .yuto-site-logo-image {
    height: 42px;
    transform: scale(1.1);
  }

  .yuto-site-menu {
    gap: clamp(13px, 2vw, 17px);
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .yuto-site-header {
    top: 0;
  }

  .yuto-site-nav {
    min-height: 56px;
    padding-top: max(7px, env(safe-area-inset-top));
    padding-bottom: 7px;
    gap: 10px;
  }

  .yuto-site-logo {
    width: 96px;
    height: 36px;
    min-height: 36px;
    padding-inline: 7px;
    margin-left: -7px;
  }

  .yuto-site-logo-image {
    height: 34px;
    transform: scale(1.07);
  }

  .yuto-site-menu {
    gap: clamp(10px, 2.2vw, 15px);
  }

  .yuto-site-menu a {
    font-size: .98rem;
    min-height: 32px;
  }
}

@media (max-width: 700px) {
  .yuto-site-header,
  .yuto-site-footer {
    background: var(--yuto-edge-bg);
    background-image: none;
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: none;
  }

  .yuto-site-header {
    overflow: visible;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .yuto-site-header::before,
  .yuto-site-header::after,
  .yuto-site-footer::before,
  .yuto-site-footer::after {
    content: none;
    display: none;
  }

  .yuto-site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: auto;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 9px;
    overflow: visible;
    transition: none;
    will-change: auto;
  }

  .yuto-site-logo {
    flex: 0 0 auto;
    width: 76px;
    height: 41px;
    min-height: 41px;
    max-height: 41px;
    padding: 0 8px;
    margin-left: 0;
    overflow: visible;
    filter: none;
    transition: none;
    will-change: auto;
  }

  .yuto-site-logo-image {
    width: auto;
    height: 39px;
    max-width: none;
    max-height: 39px;
    transform: scale(1.13);
    transform-origin: center center;
    border-radius: 0;
  }

  .yuto-site-menu {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(15px, 3.7vw, 21px);
    row-gap: 0;
    margin: 0;
    overflow: visible;
    transition: none;
    will-change: auto;
  }

  .yuto-site-menu a {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: clamp(1.03rem, 4.28vw, 1.10rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
    opacity: .92;
  }

  .yuto-site-menu a:hover {
    transform: none;
    text-shadow: none;
  }

  .yuto-site-menu a[aria-current="page"]::after {
    bottom: -8px;
    width: calc(100% + 16px);
    min-width: 54px;
    height: 6px;
    transform: translateX(-50%);
  }
}

@media (max-width: 380px) {
  .yuto-site-nav {
    gap: 7px;
  }

  .yuto-site-logo {
    width: 92px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 6px;
    margin-left: 0;
  }

  .yuto-site-logo-image {
    height: 36px;
    max-height: 36px;
    transform: scale(1.10);
  }

  .yuto-site-menu {
    gap: clamp(10px, 2.75vw, 13px);
  }

  .yuto-site-menu a {
    font-size: .98rem;
    min-height: 35px;
    letter-spacing: 0;
  }
}

@media (max-width: 340px) {
  .yuto-site-logo {
    width: 84px;
    height: 35px;
    min-height: 35px;
    padding-inline: 5px;
  }

  .yuto-site-logo-image {
    height: 32px;
    max-height: 32px;
    transform: scale(1.06);
  }

  .yuto-site-menu {
    gap: 6px;
  }

  .yuto-site-menu a {
    font-size: .86rem;
  }
}

/* WHAT ▸ ▸ 頁尾 */

.yuto-site-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 28px 0 36px;
  border-top: 1px solid var(--yuto-footer-border);
}

.yuto-footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.yuto-footer-grid p {
  margin: 0;
  color: var(--text-soft, #c8cbda);
}

.yuto-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.yuto-footer-links a {
  color: var(--text-soft, #c8cbda);
  transition:
    color 0.22s ease,
    opacity 0.22s ease,
    text-shadow 0.22s ease;
}

.yuto-footer-links a:hover {
  color: #ffffff;
  text-shadow: 0 0 5px rgba(159, 124, 255, 0.07);
}

@media (max-width: 700px) {
  .yuto-site-footer {
    padding-top: 0;
    padding-bottom: max(3px, calc(env(safe-area-inset-bottom) * .38));
  }

  .yuto-footer-grid {
    min-height: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    gap: 4px;
    padding-top: 11px;
    padding-bottom: 4px;
  }

  .yuto-footer-grid p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.22;
  }

  .yuto-footer-links {
    justify-content: flex-start;
    gap: 10px;
    row-gap: 2px;
    font-size: .94rem;
    line-height: 1.34;
  }
}

.yuto-site-footer .yuto-footer-copyright[data-yuto-random-copyright="true"] {
  margin: 0;
  white-space: normal;
}

/* WHAT ▸ ▸ 按鈕 / 分頁器 */

.yuto-bamboo-link:hover {
  filter: brightness(1.015);
}

/* WHAT ▸ Yuto UI Components Standard v1：狀態提示 / 按鈕 / 卡片 / motion 共用標準 */

.yuto-btn--ui {
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
}

.yuto-btn--ui:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(159, 124, 255, 0.16);
}

.yuto-btn--ui.is-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--yuto-ui-primary), #7b5cff);
  box-shadow: 0 10px 28px rgba(123, 92, 255, 0.24);
}

.yuto-btn--ui.is-primary:hover {
  background: linear-gradient(135deg, var(--yuto-ui-primary-hover), #8f74ff);
}

.yuto-btn--ui.is-secondary {
  color: var(--yuto-ui-text);
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.13);
}

.yuto-btn--ui.is-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.yuto-btn--ui.is-danger {
  color: #ffe5ec;
  background: rgba(255, 126, 159, 0.13);
  border-color: rgba(255, 126, 159, 0.28);
}

.yuto-btn--ui.is-danger:hover {
  background: rgba(255, 126, 159, 0.18);
  border-color: rgba(255, 126, 159, 0.38);
}

.yuto-btn--ui.is-loading {
  cursor: wait;
  opacity: 0.82;
  pointer-events: none;
}

/* WHAT ▸ 家徽載入元件・單層版【全站唯一定義處】：一層家徽＋液體晃動。
   WHY  漸層＋家徽遮罩＋兩個動畫是同一份配方，只在這裡定義一次。
        使用點只宣告 --yuto-kamon-size（家徽大小）與 --yuto-kamon-wave（液面寬高），外觀一律由這裡供應。
   WARN 要新增使用點請把選擇器加進下面的群組，不要再複製一份配方。 */
.yuto-btn--ui.is-loading::before,
.yuto-admin-session-button.is-loading::before,
.yuto-field-select-trigger.is-loading::before,
.yuto-lightbox-panel.is-loading .yuto-lightbox-status::before {
  content: "";
  width: var(--yuto-kamon-size);
  height: var(--yuto-kamon-size);
  background:
    radial-gradient(ellipse at 50% 92%, var(--yuto-loading-kamon-liquid-a) 0 34%, transparent 36%),
    linear-gradient(180deg, var(--yuto-loading-kamon-liquid-b), var(--yuto-loading-kamon-liquid-a));
  background-size: var(--yuto-kamon-wave), 100% 100%;
  -webkit-mask: var(--yuto-loading-kamon-image) center / contain no-repeat;
  mask: var(--yuto-loading-kamon-image) center / contain no-repeat;
  animation: yutoKamonLiquidShift 1.4s ease-in-out infinite, yutoKamonLiquidPulse 1.1s ease-in-out infinite alternate;
}

/* WHAT ▸ 家徽載入元件・雙層版【全站唯一定義處】：底層淡家徽 ＋ 上層液體由下往上注滿。
          消息頁／首頁／預約頁的「讀取中」用的是同一款，就是這個。
   WHY  外觀只在這個 class 定義一次；新頁面直接套用即可，不必各自實作一份。
   用法 ▸ 放 <span class="yuto-kamon-loader" aria-hidden="true"></span>，
          大小由容器（或自身）宣告 --yuto-kamon-loader-size，未宣告時預設 lg(34px)。
   WARN 不要再複製這段配方到別處；要調大小只調變數，要調位置調容器。 */
.yuto-kamon-loader,
body.yuto-payment-lab-page .payment-loading .payment-spinner,
body.yuto-booking-page.yuto-booking-lab-page .submit-spinner {
  position: relative;
  display: block;
  width: var(--yuto-kamon-loader-size, var(--yuto-loading-kamon-size-lg));
  height: var(--yuto-kamon-loader-size, var(--yuto-loading-kamon-size-lg));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
  transform: none;
  animation: yutoKamonLiquidPulse 1.1s ease-in-out infinite alternate;
}

/* WHY 只有排在 flex 容器裡的用法需要固定尺寸不被壓縮；其他使用點各自決定。 */
.yuto-kamon-loader {
  flex: 0 0 var(--yuto-kamon-loader-size, var(--yuto-loading-kamon-size-lg));
  min-width: var(--yuto-kamon-loader-size, var(--yuto-loading-kamon-size-lg));
}

.yuto-kamon-loader::before,
.yuto-kamon-loader::after,
body.yuto-payment-lab-page .payment-loading .payment-spinner::before,
body.yuto-payment-lab-page .payment-loading .payment-spinner::after,
body.yuto-booking-page.yuto-booking-lab-page .submit-spinner::before,
body.yuto-booking-page.yuto-booking-lab-page .submit-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  width: var(--yuto-kamon-loader-size, var(--yuto-loading-kamon-size-lg));
  height: var(--yuto-kamon-loader-size, var(--yuto-loading-kamon-size-lg));
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-image: var(--yuto-loading-kamon-image);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
  pointer-events: none;
  transform: none;
}

/* WHY 底層＝固定的淡家徽，不動畫，當作「還沒注滿」的底 */
.yuto-kamon-loader::before,
body.yuto-payment-lab-page .payment-loading .payment-spinner::before,
body.yuto-booking-page.yuto-booking-lab-page .submit-spinner::before {
  z-index: 1;
  opacity: .18;
  filter:
    grayscale(.14)
    saturate(.86)
    brightness(.72)
    drop-shadow(0 0 8px rgba(77, 226, 197, 0.1));
  animation: none;
}

/* WHY 上層＝同一張家徽，用 clip-path 波浪由下往上注滿 */
.yuto-kamon-loader::after,
body.yuto-payment-lab-page .payment-loading .payment-spinner::after,
body.yuto-booking-page.yuto-booking-lab-page .submit-spinner::after {
  z-index: 2;
  opacity: .96;
  filter:
    saturate(1.22)
    brightness(1.1)
    drop-shadow(0 0 5px rgba(77, 226, 197, 0.18));
  animation:
    yutoKamonWaveFill 2.8s ease-in-out infinite,
    yutoKamonLiquidPulse 1.1s ease-in-out infinite alternate;
  will-change: clip-path;
}

.yuto-btn--ui.is-loading::before {
  --yuto-kamon-size: var(--yuto-loading-kamon-size-sm);
  --yuto-kamon-wave: 22px 12px;
  flex: 0 0 var(--yuto-kamon-size);
  border: 0;
  border-radius: 999px;
}

.yuto-btn--ui.is-disabled,
.yuto-btn--ui:disabled,
.yuto-btn--ui[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.46;
  filter: grayscale(0.35);
  transform: none;
  pointer-events: none;
  box-shadow: none;
}

@media (max-width: 700px) {
  .yuto-btn--ui {
    padding-inline: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .yuto-btn--ui.is-loading::before {
    animation: none;
  }
}

/* 【遷移 v37・首頁】原 .yuto-slice-button--home-news-all 變體已隨查看活動頁遷移至 .yuto-btn 而移除（零引用）。 */

/* 【遷移 v40・互動頁】原 .yuto-slice-button--booking-action 變體（三明治尺寸+掃光配平）
   已隨送出/重選遷移至 .yuto-btn 而移除（全站零引用）。刀光配平現由 yuto-btn 標準統一提供。 */

.yuto-slice-pager {
  --yuto-slice-pager-font-size: var(--yuto-type-pager-size);
  --yuto-slice-pager-cap: var(--yuto-object-pager-cap);
  --yuto-slice-pager-height: var(--yuto-object-pager-height);
  --yuto-slice-pager-padding-x: var(--yuto-object-pager-padding-x);
  --yuto-slice-pager-label-offset-y: .18em;
  --yuto-slice-pager-state-offset-y: .18em;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .54em;
  min-height: var(--yuto-slice-pager-height);
  max-width: min(100%, 640px);
  padding: 0 var(--yuto-slice-pager-padding-x);
  border-style: solid;
  border-width: 0 var(--yuto-slice-pager-cap);
  border-image-source: var(--yuto-slice-button-image);
  border-image-slice: 0 112 0 112 fill;
  border-image-width: 0 var(--yuto-slice-pager-cap);
  border-image-repeat: stretch;
  color: rgba(246, 248, 255, 0.88);
  font-size: var(--yuto-slice-pager-font-size);
  font-weight: var(--yuto-type-pager-weight);
  line-height: 1;
  white-space: nowrap;
}

.yuto-slice-pager-pages {
  display: inline-flex;
  align-items: center;
  gap: .34em;
}

.yuto-slice-pager .pager-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65em;
  min-height: 1.65em;
  padding: 0 .24em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, opacity .18s ease;
}

.yuto-slice-pager .pager-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.65em;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transform: translateY(calc(-50% + var(--yuto-slice-pager-state-offset-y)));
  transition: background .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.yuto-slice-pager .yuto-slice-pager-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: translateY(var(--yuto-slice-pager-label-offset-y));
  pointer-events: none;
}

.yuto-slice-pager .pager-btn:hover,
.yuto-slice-pager .pager-btn:focus-visible {
  color: #fff;
}

.yuto-slice-pager .pager-btn:hover::before,
.yuto-slice-pager .pager-btn:focus-visible::before {
  background: rgba(255, 255, 255, 0.08);
}

.yuto-slice-pager .pager-btn.active,
.yuto-slice-pager .pager-btn[aria-current="page"] {
  color: #fff;
}

.yuto-slice-pager .pager-btn.active::before,
.yuto-slice-pager .pager-btn[aria-current="page"]::before {
  background: rgba(77, 226, 197, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.yuto-slice-pager .pager-btn:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.yuto-slice-pager .pager-btn:disabled::before {
  background: transparent;
  box-shadow: none;
}

.yuto-slice-pager-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--yuto-object-pager-bamboo-width);
  height: var(--yuto-object-pager-bamboo-height);
  margin: 0 .16em;
  flex: 0 0 auto;
  opacity: .95;
  pointer-events: none;
  transform: translateY(.02em);
}

.yuto-slice-pager-separator img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

@media (max-width: 700px) {
  .yuto-slice-pager {
    --yuto-slice-pager-font-size: var(--yuto-type-pager-size);
    gap: .36em;
  }
}

@media (max-width: 480px) {
  .yuto-slice-pager .pager-btn {
    min-width: 1.46em;
  }

  .yuto-slice-pager-separator {
    width: var(--yuto-object-pager-bamboo-width);
    height: 1.35em;
    margin: 0 .08em;
  }
}

/* WHAT ▸ Yuto Common Interaction Guard v1：全站連結 / 按鈕 / 圖片防拖曳與手機長按選單保護 */
a[href],
button,
[role="button"],
.yuto-bamboo-link,
.yuto-btn--ui,
.news-action-link,
.yuto-site-logo,
.yuto-site-menu a,
.yuto-footer-links a,
.link-card,
.link-card *,
.news-gallery,
.news-gallery *,
.yuto-lightbox,
.yuto-lightbox *,
.service-card,
.admin-button,
.small-action,
.filter-btn,
.pager-btn,
.yuto-btn--ui,
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.yuto-admin-session-button {
  flex: 0 0 auto;
}

.yuto-admin-session-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.yuto-admin-session-button:focus-visible {
  outline: none;
  border-color: rgba(159, 124, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(159, 124, 255, 0.14);
}

.yuto-admin-session-button:active {
  transform: translateY(0) scale(.99);
}

.yuto-admin-session-button[disabled],
.yuto-admin-session-button.is-disabled,
.yuto-admin-session-button.is-loading {
  cursor: not-allowed;
  opacity: .52;
  transform: none;
  filter: grayscale(.25);
  pointer-events: none;
}

.yuto-admin-session-button.is-loading::before {
  --yuto-kamon-size: var(--yuto-loading-kamon-size-xs);
  --yuto-kamon-wave: 20px 10px;
  border: 0;
  border-radius: 50%;
}

@media (max-width: 700px) {
  .yuto-admin-session-button {
    width: 100%;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .yuto-admin-session-button {
    padding-inline: 14px;
  }
}

@media (max-width: 700px) {
  .pager {
    overflow-x: auto;
    margin: 12px 0;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pager::-webkit-scrollbar { display: none; }

  .pager:not(.yuto-slice-pager-host) .pager-btn { flex: 0 0 auto; min-height: 38px; padding: 0 12px; font-size: .88rem; }

  .pager:not(.yuto-slice-pager-host) .pager-btn:first-child,
  .pager:not(.yuto-slice-pager-host) .pager-btn:nth-last-of-type(1) { display: none; }

  .pager-info { flex: 0 0 auto; font-size: .86rem; }
}

@media (hover: hover) and (pointer: fine) {
  html[data-yuto-web-lab="homepage"],
  html[data-yuto-web-lab="homepage"] body,
  html[data-yuto-web-lab="homepage"] a,
  html[data-yuto-web-lab="homepage"] button,
  html[data-yuto-web-lab="homepage"] [role="button"],
  html[data-yuto-web-lab="homepage"] .yuto-bamboo-link,
  html[data-yuto-web-lab="homepage"] .copy-mail-btn {
    cursor: url("../images/knife_cursor_48.png") 2 3, auto;
  }
}

.yuto-slice-pager-pages .pager-btn {
  width: 1.68em;
  min-width: 1.68em;
  height: 1.68em;
  min-height: 1.68em;
  padding: 0;
  flex: 0 0 1.68em;
  aspect-ratio: 1 / 1;
}

.yuto-slice-pager-pages .pager-btn::before {
  left: 50%;
  right: auto;
  width: 1.68em;
  height: 1.68em;
  transform: translate(-50%, calc(-50% + var(--yuto-slice-pager-state-offset-y)));
}

   一般 cursor 由其他 .yuto-btn--payment 規則涵蓋。 */

/* WHAT ▸ yuto-booking-pending-recovery-copy-format-v737 Scope: Booking page pending-payment recovery copy only. Purpose: change the dynamic recovery copy to the approved structured format: 您有一筆未完成的預約 / 您預約的時段 / 委託項目 Guard: card UI, PNG buttons, cancel modal, fake cursor containment, payment/cancel flows unchanged. */
body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-lines--structured {
  gap: 13px;
}

/* WHAT ▸ ▸ 竹子 / 文字控制列 */

@media (max-width: 700px) {
  .news-filter-row {
    width: 100%;
    margin-top: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .news-filter-row::-webkit-scrollbar { display: none; }
}

/* WHAT ▸ ▸ 卡片
   WHY  本節的排序規則：【表面元件在前，個別卡片在後】。
        .yuto-surface-card 是卡片【表面語彙】（底色／邊框色／陰影／hover）的單一真相，
        排在本節最前面；其後才是各卡片自己的版面（圓角、內距、格線、內部元素）。
   WARN 新增卡片時：表面交給 .yuto-surface-card，不要在第 3 區用頁面前綴另寫底色與邊框 ——
        頁面前綴的特異度天生壓過元件層，寫了就等於把元件架空。 */

/* WHAT ▸【全站統一卡片・表面標準 v1】(yuto-surface-card) 單一真相來源。
        所有卡片都套 .yuto-surface-card；底色、邊框、hover 全由本元件決定。
        誠實 class：沒有 :not() 開關、沒有頁面前綴，看 class 就知道是卡片表面。
   WHY  五個變數是全站唯一的調整入口，改變數 → 所有卡片一起變。
        要調濃淡不要回頭改各頁規則，否則兩邊互相打架。
   WARN hover 包在 @media (hover: hover) 裡 —— 觸控裝置沒有真正的 hover，
        殘留樣式會黏在剛點過的卡片上。
   WARN 卡片一律【不上移】：hover 只改邊框／陰影／底色，不要加 transform。
        要上浮的是按鈕（見 .yuto-btn），兩者語彙不可混用。
   WARN 新增修飾詞前先確認有實際使用者 —— 無人使用的修飾詞即死碼。 */
.yuto-surface-card {
  background: var(--yuto-card-bg);
  border: 1px solid var(--yuto-card-border);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease;
}

/* WHAT ▸【全站統一浮層・面板標準 v1】(yuto-surface-overlay) 單一真相來源。
        浮在遮罩上的對話框面板都套 .yuto-surface-overlay。
   WHY  表面語彙【完全沿用卡片的變數】，包含陰影與 hover —— 浮層不另立一套數值。
        與遮罩的分離感由遮罩自己的模糊負責，不需要靠更重的陰影再強調一次。
   WARN 遮罩層（模糊、暗化）不屬於本元件，由各自的容器負責 —— 不要把模糊搬進來，
        那是刻意讓使用者知道只能選面板上的選項。
   WARN hover 只改紫邊與反白，【陰影不變】：浮層平時已在用卡片的 hover 陰影，
        平時與 hover 同一個值是刻意的，不是漏寫。
   WARN 要調浮層外觀就是調卡片變數，兩者一起變。若日後真需要獨立數值，
        必須先確認是設計需求，不要把某一頁的既有寫死值直接升格成標準。 */
.yuto-surface-overlay {
  border-radius: var(--radius-lg);
  background: var(--yuto-card-bg);
  border: 1px solid var(--yuto-card-border);
  box-shadow: var(--yuto-card-hover-shadow);
  width: min(calc(100vw - 40px), var(--yuto-overlay-max-width));
  margin: auto;
  padding: var(--yuto-overlay-padding);
}

@media (hover: hover) and (pointer: fine) {
  .yuto-surface-overlay:hover {
    border-color: var(--yuto-card-hover-border);
    background: var(--yuto-card-hover-bg);
  }
}

/* WHAT ▸ 取消確認對話框的文字排版：標題與說明。
   WHY  互動頁與付款頁的取消對話框是同一個東西，文字排版在此定義一次、兩頁共用。
   WARN 不要加頁面前綴 —— 前綴的特異度會壓過本規則，等於各頁又各寫一套。 */
.payment-cancel-title {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 1.38rem;
  line-height: 1.22;
  letter-spacing: -.025em;
  font-weight: 900;
}

.payment-cancel-desc {
  margin: 0;
  color: rgba(215, 220, 244, 0.88);
  font-size: .96rem;
  line-height: 1.68;
}

@media (hover: hover) and (pointer: fine) {
  .yuto-surface-card:hover {
    border-color: var(--yuto-card-hover-border);
    box-shadow: var(--yuto-card-hover-shadow);
    background: var(--yuto-card-hover-bg);
  }
}

/* WHAT ▸【可點卡片】(yuto-surface-card--button) —— 卡片表面 ＋ 可按下的控制項。
        表面完全走 .yuto-surface-card，本修飾詞只多一個「被選中」狀態。
   WHY  卡片與按鈕是兩種語彙：表面負責底色／邊框／hover，選中負責「這張被選了」。
        兩者分開，選中狀態才能獨立調整而不動到全站卡片。
   WARN 依卡片規矩【不上移】—— 它同時是卡片，hover 只改邊框／陰影／底色。 */
.yuto-surface-card--button.selected {
  border-color: var(--yuto-card-selected-border);
  background: var(--yuto-card-selected-bg);
  box-shadow: var(--yuto-card-selected-shadow);
}

/* WHAT ▸【安靜卡片】(yuto-surface-card--quiet) —— 大面板專用。與一般卡片的兩點差異：
        ① 基態較有份量（底色較濃、邊框較明顯、平時就帶陰影）
        ② hover【不反白】—— 面積太大，整面亮起會很搶眼
   WHY  基態值用【變數覆寫】而非另寫規則：底色與邊框仍由 .yuto-surface-card 輸出，
        本修飾詞只換掉它讀取的變數值。這樣元件才是唯一輸出點，hover 也才蓋得過基態。
   WARN 絕對不要在頁面層（body.yuto-xxx-page）寫這三塊的 background / border /
        box-shadow —— 頁面前綴特異度 (0,2,1) 高於元件 (0,2,0)，會把 hover 整個壓死。
        這是實測踩過的坑：紫邊與陰影完全不出現。
   使用者：預約表單、活動參加表單、陪玩陪聊規則（皆為 booking 頁大面板）。 */
.yuto-surface-card--quiet {
  --yuto-card-bg: var(--card);
  --yuto-card-border: var(--card-border);
  box-shadow: var(--shadow);
}

@media (hover: hover) and (pointer: fine) {
  /* WHY 只覆寫 background 一項；紫邊與陰影沿用 .yuto-surface-card 的 hover。
        值取 var(--yuto-card-bg)，也就是本修飾詞剛覆寫過的大面板基態 —— 隨基態自動同步。 */
  .yuto-surface-card--quiet:hover {
    background: var(--yuto-card-bg);
  }
}


.news-card {
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease;
}

.news-card:hover {
  transform: translateY(-3px);
  border-color: var(--yuto-surface-hover-border);
  box-shadow: var(--yuto-surface-hover-shadow);
  background: rgba(255, 255, 255, 0.05);
}

.news-card.yuto-news-card.has-gallery,
.news-card.has-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, var(--yuto-news-card-media-width));
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .news-card.yuto-news-card.has-gallery,
  .news-card.has-gallery,
  .yuto-news-card--portrait-poster.has-gallery {
    --yuto-news-card-media-height: 220px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .news-card.yuto-news-card.has-gallery,
  .news-card.has-gallery,
  .yuto-news-card--portrait-poster.has-gallery {
    --yuto-news-card-media-height: 210px;
    gap: 13px;
  }
}

/* 手機橫向 / 小高度裝置：避免縮圖過高壓縮內容。 */
@media (max-width: 932px) and (orientation: landscape) {
  .news-card.yuto-news-card.has-gallery,
  .news-card.has-gallery {
    --yuto-news-card-media-height: 156px;
  }
}

.ypr-card {
  flex-direction: column;
  gap: 0;
}

@media (max-width: 700px) {
  .news-card:hover { transform: none; }

  .news-card h3 { font-size: 1.08rem; line-height: 1.45; margin-bottom: 8px; }
}

/* WHAT ▸ Yuto Field UI Module v1：欄位外觀空殼公版 */

.yuto-field-group {
  gap: 10px;
}

.yuto-field-label {
  align-items: center;
  gap: 6px;
  color: #fff;
}

.yuto-field,
.yuto-field-select-trigger {
  min-height: 64px;
  font-weight: 700;
  outline: none;
}

.yuto-field::placeholder {
  color: var(--yuto-field-muted);
}

.yuto-field.is-error {
  border-color: rgba(255, 107, 140, 0.44);
  box-shadow: 0 0 0 4px rgba(255, 107, 140, 0.08);
}

.yuto-field.is-success {
  border-color: rgba(77, 226, 197, 0.38);
  box-shadow: 0 0 0 4px rgba(77, 226, 197, 0.07);
}

.yuto-field:disabled,
.yuto-field.is-disabled,
.yuto-field-select-trigger:disabled,
.yuto-field-select-trigger.is-disabled {
  opacity: var(--yuto-field-disabled-opacity);
  filter: var(--yuto-field-disabled-filter);
  background: var(--yuto-field-disabled-bg);
  border-color: var(--yuto-field-disabled-border);
  color: var(--yuto-field-disabled-text);
  pointer-events: none;
}

.yuto-field-select-trigger.is-loading {
  opacity: .86;
}

.yuto-field-select-trigger.is-loading::before {
  --yuto-kamon-size: var(--yuto-loading-kamon-size-xs);
  --yuto-kamon-wave: 20px 10px;
  margin-right: 10px;
  border: 0;
  border-radius: 999px;
  flex: 0 0 var(--yuto-kamon-size);
}

.yuto-field.is-textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.7;
}

.yuto-field-select-trigger {
  text-align: left;
}

.yuto-field-select-trigger::after {
  font-size: 1.1rem;
  color: rgba(246, 247, 251, 0.72);
  margin-left: auto;
}

.yuto-field-select-trigger.is-loading::after {
  content: "";
}

@media (max-width: 700px) {
  .yuto-field,
  .yuto-field-select-trigger {
    min-height: 60px;
  }
}

/* WHAT ▸ Yuto Calendar Picker UI Module v1：自製日曆外觀空殼公版 */

.yuto-calendar-month {
  line-height: 1.1;
}

.yuto-calendar-month::after {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgba(246, 247, 251, 0.82);
  transform: translateY(2px);
}

.yuto-calendar-weekdays {
  color: rgba(246, 247, 251, 0.86);
  font-weight: 900;
  text-align: center;
}

.yuto-time-picker {
  display: grid;
  gap: 10px;
}

.yuto-time-picker h3 {
  margin: 0 0 4px;
  font-size: 1.08rem;
}

/* WHAT ▸ 【區域:燈箱】自基底半部歸位 */
.yuto-lightbox-trigger:active{cursor:zoom-in;}
/* 【區域:燈箱】覆蓋半部原有規則 ↓ */
.yuto-lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,3vw,36px);
  background:rgba(3, 4, 8, 0.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.yuto-lightbox.is-visible{display:flex;}
.yuto-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease, visibility 0s;}
.yuto-lightbox.is-closing{opacity:0;visibility:visible;pointer-events:none;}
.yuto-lightbox-panel{
  --yuto-switch-x:0px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  max-width:calc(100vw - 72px);
  max-height:calc(100dvh - 72px);
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
  opacity:.5;
  transform:scale(.985);
  transform-origin:center center;
  transition:opacity .22s ease, transform .22s var(--yuto-ease-out);
}
.yuto-lightbox.is-open .yuto-lightbox-panel{opacity:1;transform:scale(1);}
.yuto-lightbox.is-closing .yuto-lightbox-panel{opacity:.5;transform:scale(.985);}
.yuto-lightbox-panel.is-ratio-locked{
  width:var(--yuto-lightbox-width, auto);
  height:var(--yuto-lightbox-height, auto);
}
.yuto-lightbox-panel.is-ratio-locked .yuto-lightbox-image{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
}.yuto-lightbox-image.is-loaded{opacity:1;transform:translateX(0) scale(1);}
.yuto-lightbox-panel.is-switching .yuto-lightbox-image.is-loaded{opacity:0;transform:translateX(calc(var(--yuto-switch-x) * -1)) scale(.992);}
.yuto-lightbox [hidden]{display:none;}
.yuto-lightbox-panel:not(.is-ready):not(.is-error) .yuto-lightbox-close,
.yuto-lightbox-panel:not(.is-ready) .yuto-lightbox-arrow{
  display:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.yuto-lightbox-close{
  position:absolute;
  z-index:3;
  border:1px solid rgba(255, 255, 255, 0.18);
  background:rgba(12, 14, 22, 0.86);
  cursor:pointer;
  font-weight:900;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility 0s linear .18s, filter .2s ease, transform .2s ease;
}

/* WHAT ▸ 箭頭的顯隱基礎：與關閉鈕共用機制，但外觀各自負責。
   WARN 不要把 border / background / cursor 加回來 —— 箭頭是刀圖按鈕，
        外觀由下方【全站統一燈箱箭頭・外觀】提供；加回來會蓋出一個深色方塊。 */
.yuto-lightbox-arrow {
  position:absolute;
  z-index:3;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility 0s linear .18s, filter .2s ease, transform .2s ease;
}
.yuto-lightbox-panel.is-ready .yuto-lightbox-close,
.yuto-lightbox-panel.is-ready .yuto-lightbox-arrow,
.yuto-lightbox-panel.is-error .yuto-lightbox-close{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .18s ease, visibility 0s, filter .2s ease, transform .2s ease;
}
.yuto-lightbox-panel.is-error .yuto-lightbox-arrow{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.yuto-lightbox-close{
  top:-18px;
  right:-18px;
  width:42px;
  height:42px;
  border-radius:999px;
}
.yuto-lightbox-arrow{
  top:50%;
  transform:translateY(-50%);
  display:none;
}

.yuto-lightbox.has-multiple .yuto-lightbox-arrow{display:block;}

/* WHAT ▸【全站統一燈箱箭頭・外觀】(yuto-lightbox-arrow) 單一真相來源。
        消息頁與人設頁的燈箱是同一個元件，箭頭外觀在此定義一次、兩頁共用。
   WHY  刀圖由 --yuto-lightbox-arrow-prev/next-image 提供；尺寸用 clamp 隨視窗縮放；
        按鈕文字以 text-indent 移出視野，只呈現刀的圖片。
   WARN 不要在頁面層（body.yuto-xxx-lab-page）另寫箭頭外觀 —— 頁面前綴的特異度會
        壓過本規則，兩頁就會再次走散。顯隱機制在上方，本區只管外觀。 */
.yuto-lightbox-arrow {
  width: clamp(50px, 5vw, 72px);
  height: clamp(118px, 21dvh, 186px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: visible;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.42));
}

.yuto-lightbox-arrow.prev {
  left: clamp(-86px, -5.8vw, -58px);
  background-image: var(--yuto-lightbox-arrow-prev-image);
}

.yuto-lightbox-arrow.next {
  right: clamp(-86px, -5.8vw, -58px);
  background-image: var(--yuto-lightbox-arrow-next-image);
}

.yuto-lightbox-arrow:hover,
.yuto-lightbox-arrow:focus-visible {
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.48)) brightness(1.08);
}

.yuto-lightbox-arrow:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 8px;
  border-radius: 999px;
}
.yuto-lightbox-close:hover{filter:brightness(1.12);}
.yuto-lightbox-status{
  position:absolute;
  left:50%;
  bottom:-46px;
  z-index:2;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0, 0, 0, 0.58);
  border:1px solid rgba(255, 255, 255, 0.14);
  color:#fff;
  font-size:.9rem;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  white-space:nowrap;
}
.yuto-lightbox-panel.is-loading .yuto-lightbox-status,
.yuto-lightbox-panel.is-error .yuto-lightbox-status{opacity:1;}
.yuto-lightbox-panel.is-loading .yuto-lightbox-image,
.yuto-lightbox-panel.is-error .yuto-lightbox-image{opacity:0;}

.yuto-lightbox-panel.is-loading .yuto-lightbox-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.yuto-lightbox-panel.is-loading .yuto-lightbox-status::before {
  --yuto-kamon-size: var(--yuto-loading-kamon-size-sm);
  --yuto-kamon-wave: 22px 12px;
  flex: 0 0 var(--yuto-kamon-size);
  border-radius: 999px;
}
.yuto-lightbox-trigger{
  /* 自基底歸位(整併保留的活屬性) */
  cursor: zoom-in;
  pointer-events:auto;
  touch-action:manipulation;
}
.yuto-lightbox-image{
  display:block;
  width:auto;
  height:auto;
  max-width:min(92vw,1480px);
  max-height:min(84dvh,900px);
  object-fit:contain;
  border:0;
  border-radius:22px;
  overflow:hidden;
  background:transparent;
  box-shadow:0 18px 56px rgba(0, 0, 0, 0.42);
  opacity:0;
  transform:translateX(var(--yuto-switch-x)) scale(.992);
  transform-origin:center center;
  transition:opacity .22s var(--yuto-ease-out), transform .22s var(--yuto-ease-out);
  will-change:opacity,transform;
  -webkit-user-drag:none;
pointer-events:auto;
}
@media (max-width: 900px) {
  .yuto-lightbox{
    padding:18px;
  }

  .yuto-lightbox-panel{
    max-width:calc(100vw - 36px);
    max-height:calc(100dvh - 36px);
  }

  .yuto-lightbox-image{
    max-width:calc(100vw - 36px);
    max-height:calc(100dvh - 120px);
    border-radius:20px;
  }

  .yuto-lightbox-close{top:-14px;right:-10px;width:40px;height:40px;}
}

@media (max-width: 700px) {
  .yuto-lightbox{
    padding:max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  }

  .yuto-lightbox-panel{
    max-width:calc(100vw - 28px);
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .yuto-lightbox-image{
    max-width:calc(100vw - 28px);
    max-height:calc(100dvh - 118px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius:18px;
  }

  .yuto-lightbox-close{top:-12px;right:-8px;width:40px;height:40px;}

  /* WHY 這裡【刻意不設 background】。曾經有一行 background:rgba(12,14,22,.82)，
         但 background 是簡寫，會把上方【全站統一燈箱箭頭・外觀】設的
         background-size:contain / background-position:center / background-repeat:no-repeat
         一起重設回初始值（兩者特異度都是 0,1,0，本區在後面所以贏）
         → 刀圖變成用原始尺寸從左上角平鋪，在 46x112 的按鈕裡只露出圖片左上角的透明區，
         手機上看起來就是【刀不見了】。電腦看不出來，因為本區只在 max-width:700px 生效。
         對比已由全域的 filter: drop-shadow 負責，不需要底色。
    WARN 要在手機加強箭頭對比，只能用 background-color 長寫或加深 drop-shadow，
         絕對不要用 background 簡寫。 */

  .yuto-lightbox-status{bottom:-42px;font-size:.84rem;}
}
@media (prefers-reduced-motion: reduce) {
  .yuto-lightbox,
  .yuto-lightbox-panel,
  .yuto-lightbox-image{transition:none;transform:none;}
}

/* News Card / Gallery unified media frame is sourced from css/style.css. Admin HTML keeps only preview modal/lightbox shell and data logic. */
/* WHAT ▸ News Preview v11：縮圖輪播對齊正式 news.html source of truth */
.news-preview-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 34px);
  background: rgba(2, 4, 10, 0.82);
  backdrop-filter: blur(18px);
}
.news-preview-lightbox.is-visible { display: flex; }
.news-preview-lightbox-shell {
  position: relative;
  width: min(1120px, 94vw);
  height: min(780px, 86vh);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 12, 22, 0.78);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.news-preview-lightbox-stage {
  position: absolute;
  inset: 48px 66px 52px;
  display: grid;
  place-items: center;
}
.news-preview-lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 0;
  outline: 0;
}
.news-preview-lightbox-close,
.news-preview-lightbox-nav {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 10, 18, 0.72);
  color: #fff;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  font-weight: 900;
}
.news-preview-lightbox-close {
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  font-size: 1.45rem;
}
.news-preview-lightbox-nav {
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  font-size: 1.8rem;
}
.news-preview-lightbox-nav.prev { left: 14px; }
.news-preview-lightbox-nav.next { right: 14px; }
.news-preview-lightbox-count {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: .86rem;
  font-weight: 900;
}
@media (max-width: 700px) {
  .news-preview-lightbox { padding: 10px; }

  .news-preview-lightbox-shell { width: 96vw; height: 82vh; border-radius: 18px; }

  .news-preview-lightbox-stage { inset: 52px 12px 56px; }

  .news-preview-lightbox-nav { top: auto; bottom: 12px; transform: none; width: 42px; height: 42px; }

  .news-preview-lightbox-nav.prev { left: 14px; }

  .news-preview-lightbox-nav.next { right: 14px; }
}

/* WHAT ▸ ▸ 刀光 / 游標 */

html:not(.is-yuto-fake-cursor) .yuto-lightbox-trigger,
html:not(.is-yuto-fake-cursor) .yuto-lightbox-trigger:active{
  cursor:zoom-in;
}

.yuto-knife-fake-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--yuto-knife-cursor-layer, 100000);
  width: 42px;
  height: 42px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-999px, -999px, 0);
  transition:
    opacity 72ms ease,
    filter 110ms ease;
  will-change: transform, opacity;
  mix-blend-mode: normal;
}

.yuto-knife-fake-cursor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/knife_cursor_48.png") center / contain no-repeat;
  filter:
    brightness(0.96)
    contrast(1.10)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72))
    drop-shadow(0 3px 7px rgba(0, 0, 0, 0.42));
}

.yuto-knife-fake-cursor::after {
  content: none;
}

html.is-yuto-fake-cursor .yuto-knife-fake-cursor {
  opacity: 0.98;
}

html.is-yuto-fake-cursor .yuto-knife-fake-cursor.is-hovering {
  filter: contrast(1.04);
}

html.is-yuto-fake-cursor .yuto-knife-fake-cursor.is-pressing {
  filter: brightness(0.90) contrast(1.14);
}

html.is-yuto-fake-cursor .yuto-knife-fake-cursor.is-cutting {
  opacity: 0.98;
  transition-duration: 72ms;
}

.yuto-knife-slash {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--yuto-knife-slash-layer, 99999);
  width: 188px;
  height: 96px;
  pointer-events: none;
  transform:
    translate3d(var(--slash-x), var(--slash-y), 0)
    rotate(var(--slash-rotate, -42deg));
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: opacity, transform;
  animation: yutoKnifeSlashHoldStill 520ms var(--yuto-ease-slash) both;
}

.yuto-knife-slash.is-reverse {
  animation-name: yutoKnifeSlashHoldStill;
}

/* v038：外層斬痕固定，只讓亮線在斬痕內掃過；不讓整條光漂移。 */
.yuto-knife-slash-light,
.yuto-knife-slash-light-soft {
  position: absolute;
  left: 10px;
  top: 46px;
  width: 164px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(230, 248, 252, 0.1) 18%,
      rgba(255, 255, 255, 0.26) 50%,
      rgba(230, 248, 252, 0.1) 82%,
      transparent 100%);
  box-shadow: none;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: opacity;
  animation: yutoKnifeSlashBaseStill 520ms var(--yuto-ease-slash) both;
}

.yuto-knife-slash-light::before,
.yuto-knife-slash-light-soft::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 46%;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(235, 250, 255, 0.18) 22%,
      rgba(255, 255, 255, 1) 50%,
      rgba(235, 250, 255, 0.18) 78%,
      transparent 100%);
  transform: translate3d(-125%, 0, 0);
  animation: yutoKnifeSlashSweepInPlace 520ms var(--yuto-ease-slash) both;
  will-change: transform, opacity;
}

.yuto-knife-slash-light-soft {
  top: 52px;
  left: 30px;
  width: 126px;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.16),
      rgba(231, 244, 248, 0.08),
      transparent);
  animation-name: yutoKnifeSlashBaseSoftStill;
}

.yuto-knife-slash-light-soft::before {
  width: 38%;
  opacity: .62;
}

.yuto-knife-slash.is-reverse .yuto-knife-slash-light::before,
.yuto-knife-slash.is-reverse .yuto-knife-slash-light-soft::before {
  animation-name: yutoKnifeSlashSweepInPlaceReverse;
}

.yuto-knife-hover-light {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* WHAT ▸ 【標準按鈕動效 v1・規格】全站唯一動效實作+一顆幾何旋鈕: hover = 上浮3px + 亮度1.08 active = 縮0.98 + 亮度1.12 掃光 = 光窗預設貼盒(--yuto-sheen-ext: 0); 真九宮格按鈕(尖角=邊框)在自身變數面板設 --yuto-sheen-ext: var(--yuto-slice-cap) 讓光蓋到尖角。 新按鈕接入:登記板子 →(若有尖角)設 ext,動效自動到位,禁止另寫動效層。 */
.yuto-knife-hover-sheen {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;

  left: calc(-1 * var(--yuto-sheen-ext, 0px));
  right: calc(-1 * var(--yuto-sheen-ext, 0px));
  /* 【體質補強】強制獨立合成層:光條不再與毛玻璃(backdrop-filter)共用圖層快取,
     根治「光條殘影被烙進玻璃卡」的白色鬼影(間歇性,游標掃過卡片時發生)。 */
  transform: translateZ(0);
  isolation: isolate;
}
.yuto-knife-hover-sheen::before {
  /* WHY 常駐 will-change 已搬進 .is-yuto-hover-sheen-playing 播放態：待機不佔合成層，播放期保護不變 → PRIN-01 */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -38%;
  width: var(--yuto-sheen-streak, 24%);
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(124, 241, 255, 0) 5%,
      rgba(124, 241, 255, 0.08) 38%,
      rgba(255, 255, 255, 0.22) 50%,
      rgba(255, 115, 210, 0.05) 68%,
      transparent 100%);
  transform: translateX(-40%);
  opacity: 0;
}

.yuto-knife-hover-light.is-yuto-hover-sheen-playing > .yuto-knife-hover-sheen::before {
  will-change: transform, opacity; /* 【圖層普查 v31】自基態搬入：僅播放期持層 */
  animation: yutoKnifeHoverLightStraight var(--yuto-sheen-dur, 500ms) var(--yuto-ease-sheen) both;
}

/* Desktop homepage contact title-to-body only. */

/* Mobile homepage contact vertical rhythm. */

@media (hover: none), (pointer: coarse) {
  .yuto-knife-fake-cursor,
  .yuto-knife-slash {
    display: none;
  }
}

/* [YUTO-CSS-VERIFY v745] News Lab desktop pager blue_button_80 source
   Owner: P-News / News Lab pager row only / Desktop only.
   Target:
   - Use the provided blue_button_80.png source for the desktop pager frame.
   - Keep the current accepted blue UI feeling without the overly long click-frame.
   - Preserve enough inner safe area for 首頁 / 上一頁 / 1 / 2 / 下一頁 / 末頁.
   Guard:
   - Mobile stays exactly as v641/v642.
   - Text size, green active circle, bamboo scale from v642 stay.
   - Pager HTML / JS stay untouched.
   - Card CTA / other pages stay untouched.
*/

/* [YUTO-CSS-VERIFY v651] News Lab desktop filter match home hero actions scale
   Owner: P-News / News Lab desktop filter row only.
   Target:
   - Desktop only:
     Enlarge News Lab filter labels (ALL / V圈消息 / 活動消息 / IRL)
     to match the Home hero action label size.
   - Enlarge the real bamboo separators by using the same large bamboo scale
     as Home .hero-actions.
   Source reference:
   - Home .hero-actions .yuto-bamboo-link font-size: clamp(1rem, 1.12vw, 1.08rem)
   - Home .hero-actions bamboo scale: --yuto-bamboo-scale-large
   Guard:
   - Mobile untouched.
   - Pager row / pager-info / green active circle / bamboo inside pager untouched.
   - Card CTA / Home / other pages / HTML / JS untouched.
*/

/* Knife cursor layer test: keep the fake knife above payment button/modal layers without changing JS logic. */
html.is-yuto-fake-cursor body.yuto-payment-lab-page .yuto-knife-fake-cursor {
  z-index: var(--yuto-payment-lab-cursor-layer-v722);
}

html.is-yuto-fake-cursor body.yuto-payment-lab-page .yuto-knife-slash {
  z-index: var(--yuto-payment-lab-slash-layer-v722);
}

/* WHAT ▸ Yuto Public Content Safe Spacing Standard v1 */ .yuto-public-content-end,
body.yuto-booking-page .booking-section.yuto-booking-content-end,
body.yuto-index-page .home-contact-section.yuto-public-content-end,
body.yuto-links-page .links-section.yuto-public-content-end,
body.yuto-page-bg .news-section.yuto-news-content-frame {
  padding-bottom: var(--yuto-public-content-end-gap-desktop);
}

@media (min-width: 701px) and (max-width: 1100px) {
  .yuto-public-content-end,
  body.yuto-booking-page .booking-section.yuto-booking-content-end,
  body.yuto-index-page .home-contact-section.yuto-public-content-end,
  body.yuto-links-page .links-section.yuto-public-content-end,
  body.yuto-page-bg .news-section.yuto-news-content-frame {
    padding-bottom: var(--yuto-public-content-end-gap-tablet);
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .yuto-public-content-end,
  body.yuto-booking-page .booking-section.yuto-booking-content-end,
  body.yuto-index-page .home-contact-section.yuto-public-content-end,
  body.yuto-links-page .links-section.yuto-public-content-end,
  body.yuto-page-bg .news-section.yuto-news-content-frame {
    padding-bottom: var(--yuto-public-content-end-gap-landscape);
  }
}

.yuto-bg-motif {
  position: absolute;
  left: var(--motif-x, 50%);
  top: var(--motif-y, 50%);
  width: var(--motif-size, 180px);
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.55s ease;
  transform: translate3d(-50%, -50%, 0) rotate(var(--motif-rotate, 0deg)) scale(var(--motif-scale, 1));
}

/* WHAT ▸ 背景裝飾主體：家徽浮水印（銀／金）與飄動的雲，由 JS 在執行期掛到頁面上。
   WARN [TRAP-16] .yuto-bg-crest / .yuto-bg-cloud 這兩個名字【只存在於 JS 執行期】——
     搜尋 HTML 原始碼找不到它們，孤兒掃描會把這幾條列成「全站找不到名字」。
     ⚠️ 不可據此判定為死碼。判定前必須查 runtime-evidence.json（yuto-probe.js 採集），
     該證據顯示 booking / index / links / news 四頁都會用到。
     連帶：@keyframes yutoCloudDrift 只被 .yuto-bg-cloud 引用，刪這裡會讓它跟著變成假孤兒。 */
.yuto-bg-crest {
  background-image: url("../images/kamon_silver.png");
}

.yuto-bg-crest.is-gold {
  background-image: url("../images/kamon_gold.png");
}

.yuto-bg-cloud {
  aspect-ratio: 2.72 / 1;
  background-image: var(--yuto-cloud-image);
  animation: yutoCloudDrift var(--motif-duration, 32s) ease-in-out var(--motif-delay, 0s) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .yuto-bg-cloud {
    animation: none !important;
  }

  .yuto-bg-motif {
    transition: none !important;
  }
}

/* WHAT ▸ yuto-booking-four-button-hover-disabled-v742 Scope: desktop Booking page only. Purpose: remove visible hover motion/brightness from the four booking action buttons the user identified: - pending payment recovery: 前往付款 / 取消付款 - booking form actions: 送出預約 / 重選日期時間 Guard: - Desktop media only; mobile layout and mobile UI are untouched. - No inline CSS; no JS / payment / modal / cursor logic changes. - Active / disabled / focus-visible behavior stays governed by existing source rules unless explicitly needed later. */

body.yuto-page-bg {
  position: relative;
  min-height: 100dvh;
  background-image: none;
  background-attachment: scroll;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--text);
}

/* WHAT ▸ ▸ 消息 */

/* WARN --*-gap-* 變數是【活的】（.yuto-news-content-frame 借用中），不可刪 */

.news-badge,
.chip {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.news-badge:hover,
.chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* WHAT ▸ Yuto News Gallery / News Card Unified Media Frame v1 */
.yuto-news-card,
.news-card.has-gallery {
  --yuto-news-card-media-width: 360px;
  --yuto-news-card-media-height: 176px;
  --yuto-news-card-media-bg: rgba(0, 0, 0, 0.14);
  --yuto-news-card-radius: 18px;
}

/* WHY 消息縮圖框統一高度，不因 wide / square / portrait 改成不同高度 */
.yuto-news-card--landscape,
.yuto-news-card--square,
.yuto-news-card--portrait,
.yuto-news-card--portrait-poster {
  --yuto-news-card-media-width: 360px;
  --yuto-news-card-media-height: 176px;
}

.yuto-news-card--text-only {
  display: block;
}

.yuto-news-card-body,
.news-card-main,
.news-card-main.yuto-news-card-body {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}

.yuto-news-card-media,
.news-gallery,
.news-gallery.yuto-news-card-media,
.yuto-news-card--portrait-poster .yuto-news-card-media,
.yuto-news-card--portrait-poster .news-gallery {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: var(--yuto-news-card-media-width);
  justify-self: end;
  align-self: start;
  grid-column: 2;
  grid-row: 1;
  border-radius: var(--yuto-news-card-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  isolation: isolate;
}

.yuto-news-card-media.is-hidden,
.news-gallery.is-hidden {
  display: none;
}

.yuto-news-card-media-frame,
.news-gallery-frame,
.news-gallery-frame.yuto-news-card-media-frame,
.yuto-news-card-media-frame[data-ratio],
.news-gallery-frame[data-ratio],
.news-gallery-frame.yuto-news-card-media-frame[data-ratio] {
  position: relative;
  width: 100%;
  height: var(--yuto-news-card-media-height);
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--yuto-news-card-radius);
  background: var(--yuto-news-card-media-bg);
  margin-left: 0;
}

/* 舊 v3 使用 ::before 做不同比例，v1 統一縮圖框後不再需要 pseudo 撐比例。 */
.yuto-news-card-media-frame::before,
.news-gallery-frame.yuto-news-card-media-frame::before {
  content: none;
  display: none;
}

.yuto-news-card-media-frame img,
.news-gallery-frame img,
.news-gallery-frame.yuto-news-card-media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.006);
  filter: blur(.8px);
  transition:
    opacity .26s var(--yuto-ease-out),
    transform .26s var(--yuto-ease-out),
    filter .26s var(--yuto-ease-out);
  will-change: opacity, transform, filter;
  border: 0;
  outline: 0;
  border-radius: 0;
}

.yuto-news-card-media-frame img.is-active,
.news-gallery-frame img.is-active,
.news-gallery-frame.yuto-news-card-media-frame img.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.yuto-news-card-image-count,
.news-gallery-count,
.news-gallery-count.yuto-news-card-image-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  pointer-events: none;
}

.yuto-news-card-title,
.yuto-news-card-summary,
.yuto-news-card-content {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .yuto-news-card-media,
  .news-gallery,
  .news-gallery.yuto-news-card-media,
  .yuto-news-card--portrait-poster .yuto-news-card-media,
  .yuto-news-card--portrait-poster .news-gallery {
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    max-width: none;
    margin-bottom: 14px;
  }

  .yuto-news-card-body,
  .news-card-main,
  .news-card-main.yuto-news-card-body,
  .yuto-news-card--portrait-poster .yuto-news-card-body,
  .yuto-news-card--portrait-poster .news-card-main {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 700px) {
  .yuto-news-card-media,
  .news-gallery,
  .news-gallery.yuto-news-card-media {
    border-radius: 16px;
  }

  .yuto-news-card-media-frame,
  .news-gallery-frame,
  .news-gallery-frame.yuto-news-card-media-frame,
  .yuto-news-card-media-frame[data-ratio],
  .news-gallery-frame[data-ratio],
  .news-gallery-frame.yuto-news-card-media-frame[data-ratio] {
    border-radius: 16px;
  }

  .yuto-news-card-date { font-size: .86rem; }

  .yuto-news-card-badge,
  .yuto-news-card-pinned { font-size: .78rem; padding: 4px 9px; }

  .yuto-news-card-title { font-size: 1.08rem; line-height: 1.45; margin-bottom: 8px; }

  .yuto-news-card-summary,
  .yuto-news-card-content { font-size: .94rem; line-height: 1.68; }
}

/* 超寬桌機：仍沿用活動頁消息縮圖框，不放大到破壞列表節奏。 */
@media (min-width: 1600px) {
  .yuto-news-card,
  .news-card.has-gallery {
    --yuto-news-card-media-width: 380px;
    --yuto-news-card-media-height: 186px;
  }
}

@media (max-width: 700px) {
  /* News gallery responsive rules moved to css/style.css. */

  .news-meta { gap: 8px; margin-bottom: 8px; }

  .news-date { font-size: .86rem; }

  .news-badge { font-size: .78rem; padding: 4px 9px; }

  .news-content { margin-top: 10px; }
}

/* WHAT ▸ ▸ 預約 */

.booking-section {
  padding: 24px 0 56px;
}

/* WHAT ▸ Yuto Booking Field Cleanup Bridge v1：booking 欄位接公版後的外觀橋接 */
.booking-section .field.yuto-field-group {
  position: relative;
  min-width: 0;
  display: block;
}

.booking-section .field.yuto-field-group.full,
.booking-section .field.yuto-field-group.is-full {
  grid-column: 1 / -1;
}

.booking-section .field-label.yuto-field-label {
  display: block;
  margin-bottom: 10px;
}

.booking-section .select-trigger.yuto-field-select-trigger::after {
  content: none;
  display: none;
}

.booking-section .select-trigger.yuto-field-select-trigger.open {
  border-color: var(--yuto-field-border-focus);
  box-shadow: 0 0 0 4px rgba(159, 124, 255, 0.08);
  background: var(--yuto-field-bg-hover);
}

.booking-section .text-input.yuto-field,
.booking-section .text-area.yuto-field,
.booking-section .select-trigger.yuto-field-select-trigger {
  min-height: 64px;
}

.booking-section .text-area.yuto-field.is-textarea {
  min-height: 138px;
}

.booking-section .popup.yuto-calendar-picker,
.booking-section .popup.yuto-time-picker {
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--popup-bg, rgba(14, 18, 32, 0.96));
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(var(--payment-lab-glass-blur));
  -webkit-backdrop-filter: blur(var(--payment-lab-glass-blur));
  overflow: visible;
}

.booking-section .calendar-head.yuto-calendar-head {
  margin-bottom: 14px;
}

.booking-section .calendar-month-button.yuto-calendar-month {
  margin: 0;
  font-size: 1.12rem;
}

.booking-section .calendar-month-button.yuto-calendar-month::after {
  content: none;
  display: none;
}

.booking-section .calendar-nav.yuto-calendar-nav button {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.booking-section .calendar-weekdays.yuto-calendar-weekdays,
.booking-section .calendar-days.yuto-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.booking-section .calendar-weekdays.yuto-calendar-weekdays {
  margin-bottom: 10px;
}

.booking-section .calendar-weekdays.yuto-calendar-weekdays div {
  min-height: auto;
  display: block;
  text-align: center;
  color: #d4d9ef;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  padding: 4px 0;
}

.booking-section .calendar-days.yuto-calendar-days .calendar-day {
  height: 46px;
  aspect-ratio: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(6, 10, 20, 0.72);
  color: #fff;
  font: inherit;
  font-weight: 800;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease, opacity .22s ease, filter .22s ease;
}

.booking-section .calendar-days.yuto-calendar-days .calendar-day.empty {
  background: transparent;
  border-color: transparent;
  color: transparent;
  pointer-events: none;
}

.booking-section .calendar-days.yuto-calendar-days .calendar-day.unavailable {
  color: rgba(255, 255, 255, 0.26);
  pointer-events: none;
  background: rgba(7, 11, 22, 0.42);
}

.booking-section .calendar-days.yuto-calendar-days .calendar-day.available:hover {
  transform: translateY(-2px);
  border-color: rgba(159, 124, 255, 0.2);
  background: rgba(18, 24, 44, 0.9);
}

.booking-section .calendar-days.yuto-calendar-days .calendar-day.selected {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--selected, linear-gradient(180deg, rgba(49, 75, 173, 0.88), rgba(34, 54, 151, 0.82)), var(--yuto-bg-texture-image));
  background-color: #314bad;
  background-size: var(--selected-background-size, auto, var(--yuto-bg-texture-size, 520px 520px));
  background-position: var(--selected-background-position, center center, var(--yuto-bg-texture-position, top left));
  background-repeat: var(--selected-background-repeat, no-repeat, repeat);
  background-blend-mode: var(--selected-background-blend, normal, var(--yuto-bg-texture-blend, multiply));
  background-clip: padding-box;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--selected-shadow, 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 18px rgba(0, 0, 0, 0.18));
  -webkit-backdrop-filter: var(--selected-filter, none);
  backdrop-filter: var(--selected-filter, none);
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.booking-section .calendar-days.yuto-calendar-days .calendar-day.today:not(.selected) {
  border-color: rgba(77, 226, 197, 0.26);
}

.booking-section .time-list.yuto-time-list {
  display: grid;
  gap: 10px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.booking-section .time-list.yuto-time-list .time-option {
  min-height: 56px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid var(--yuto-field-border);
  background: var(--yuto-field-bg);
  color: var(--yuto-field-text);
  font: inherit;
  font-weight: 900;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, opacity .22s ease, filter .22s ease;
}

.booking-section .time-list.yuto-time-list .time-option:hover {
  transform: translateY(-2px);
  border-color: rgba(159, 124, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
}

.booking-section .time-list.yuto-time-list .time-option.selected {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--selected, linear-gradient(180deg, rgba(49, 75, 173, 0.88), rgba(34, 54, 151, 0.82)), var(--yuto-bg-texture-image));
  background-color: #314bad;
  background-size: var(--selected-background-size, auto, var(--yuto-bg-texture-size, 520px 520px));
  background-position: var(--selected-background-position, center center, var(--yuto-bg-texture-position, top left));
  background-repeat: var(--selected-background-repeat, no-repeat, repeat);
  background-blend-mode: var(--selected-background-blend, normal, var(--yuto-bg-texture-blend, multiply));
  background-clip: padding-box;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--selected-shadow, 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 18px rgba(0, 0, 0, 0.16));
  -webkit-backdrop-filter: var(--selected-filter, none);
  backdrop-filter: var(--selected-filter, none);
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.booking-section .select-trigger:disabled,
.booking-section .select-trigger.is-locked,
.booking-section .text-input:disabled,
.booking-section .text-area:disabled,
.booking-section .text-input.is-locked,
.booking-section .text-area.is-locked,
.booking-section .service-card.is-disabled,
.booking-section .calendar-nav button:disabled {
  opacity: var(--booking-lock-opacity, var(--yuto-field-disabled-opacity));
  filter: var(--booking-lock-filter, var(--yuto-field-disabled-filter));
  transform: none;
  pointer-events: none;
  box-shadow: none;
}
@media (max-width: 700px) {
  .booking-section .text-input.yuto-field,
  .booking-section .text-area.yuto-field,
  .booking-section .select-trigger.yuto-field-select-trigger {
    min-height: 60px;
    padding-inline: 18px;
  }

  .booking-section .calendar-weekdays.yuto-calendar-weekdays,
  .booking-section .calendar-days.yuto-calendar-days {
    gap: 7px;
  }

  .booking-section .calendar-weekdays.yuto-calendar-weekdays div {
    font-size: .82rem;
  }

  .booking-section .calendar-days.yuto-calendar-days .calendar-day {
    height: 42px;
    border-radius: 13px;
  }

  .booking-section .time-list.yuto-time-list {
    max-height: calc(100dvh - 180px);
  }
}

@media (max-width: 380px) {
  .booking-section .calendar-weekdays.yuto-calendar-weekdays,
  .booking-section .calendar-days.yuto-calendar-days {
    gap: 5px;
  }

  .booking-section .calendar-days.yuto-calendar-days .calendar-day {
    height: 38px;
    border-radius: 12px;
    font-size: .92rem;
  }
}

/* Booking helper utility: replaces legacy inline style="margin-top:0" in booking.html. */
.booking-section .helper-note.is-flush,
.helper-note.is-flush {
  margin-top: 0 !important;
}

/* WHAT ▸ ▸ 連結頁 */

/* News gallery responsive rules moved to css/style.css. */

.yuto-links-page .container {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}

.yuto-links-page .hero-card {
  position: relative;
  overflow: hidden;
  padding: 42px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(159, 124, 255, 0.16), rgba(77, 226, 197, 0.08)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow);
}

.yuto-links-page .hero-card::before {
  content: "";
  position: absolute;
  inset: auto -120px -120px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(159, 124, 255, 0.24), transparent 68%);
  pointer-events: none;
}

.yuto-links-page .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #f5f2ff;
  background: rgba(159, 124, 255, 0.16);
  border: 1px solid rgba(159, 124, 255, 0.28);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.yuto-links-page .links-section {
  padding: 0 0 26px;
}

/* WHAT ▸ 區塊卡片 .section-card 的共同外觀【單一定義處】：連結頁／消息頁／首頁三處外觀一致。
   WARN 各頁的專屬調整（手機 padding、人設頁的去框、後台的變體）仍在各自區塊，靠更高權重或位置在後生效。 */
.yuto-links-page .section-card,
body.yuto-page-bg .news-section .section-card,
body.yuto-index-page .section-card {
  padding: 30px;
  margin-bottom: 22px;
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}

.yuto-links-page .section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.yuto-links-page .section-head h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
}

.yuto-links-page .section-head p {
  margin: 8px 0 0;
  color: var(--text-soft);
}

.yuto-links-page .links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yuto-links-page .link-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}

.yuto-links-page .link-card h3 {
  margin: 0;
  font-size: 1.18rem;
}

.yuto-links-page .link-card p {
  margin: 0;
  color: var(--text-soft);
}

.yuto-links-page .link-url {
  word-break: break-all;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.yuto-links-page .note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* [YUTO-CSS-VERIFY v751] Links card motion owner clean.
   Owner: P-Links / link-card motion only.
   Purpose: prevent link-card entrance animation and hover state from fighting over transform.
   Contract: entry button hover-sheen V749 remains off; button PNG/material/size/text, card content, Booking V748, News, Payment, and production style.css untouched.
*/

@media (max-width: 980px){
  /* WARN 連結頁 ≤900 一律 2 欄。不可再對 .links-grid 加單欄覆蓋（.note-grid 是首頁 contact，仍需 ≤980 單欄）→ PRIN-21 */
  .yuto-links-page .note-grid {
    grid-template-columns: 1fr;
  }
}

/* WHAT ▸ ▸ 付款 */

.yuto-payment-recovery {
  --ypr-text: #f7f8ff;
  scroll-margin-block: calc(var(--yuto-header-height, 78px) + 28px);
}

.yuto-payment-recovery.is-cancel-focus-anchor .ypr-card {
  border-color: rgba(159, 124, 255, 0.22);
}

.yuto-payment-recovery[hidden],
.yuto-payment-recovery.is-hidden {
  display: none !important;
}

.yuto-payment-recovery,
.yuto-payment-recovery *,
.yuto-payment-recovery *::before,
.yuto-payment-recovery *::after {
  box-sizing: border-box;
}

.ypr-actions {
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 0;
}

.ypr-modal-panel {
  margin-inline: auto;
}

/* Runtime modal standard: used by booking pending payment and payment cancel confirmation.
   v7 viewport-center + confirm-modal focus standard:
   - Modal layer is centered in the viewport on desktop and mobile.
   - Modal layer owns its own vertical scroll, so wheel / touch can still reach buttons on short screens.
   - Background page is visually dimmed but not hard body-locked; this avoids trapped mobile/desktop scroll.
   - JS may scroll the pending card into view only when returning from the payment page. When booking cancel is clicked on desktop, the confirmation modal opens directly in viewport center; visual placement stays in CSS. */
.ypr-modal {
  --ypr-modal-x-pad: max(20px, env(safe-area-inset-left));
  --ypr-modal-y-pad: max(20px, env(safe-area-inset-top));
  --ypr-modal-y-bottom: max(20px, env(safe-area-inset-bottom));
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--ypr-modal-y-pad) var(--ypr-modal-x-pad) var(--ypr-modal-y-bottom);
  color: var(--ypr-text, #f7f8ff);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ypr-modal[hidden],
.ypr-modal.is-hidden {
  display: none !important;
}

.ypr-modal .ypr-modal-panel {
  max-width: 100%;
}

.ypr-modal-actions {
  margin-top: 18px;
}
@media (max-width: 760px) {
  .yuto-payment-recovery {
    margin-bottom: 18px;
  }

  .ypr-modal {
    --ypr-modal-x-pad: max(14px, env(safe-area-inset-left));
    --ypr-modal-y-pad: max(16px, env(safe-area-inset-top));
    --ypr-modal-y-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .ypr-modal-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .ypr-modal {
    --ypr-modal-x-pad: max(18px, env(safe-area-inset-left));
    --ypr-modal-y-pad: max(12px, env(safe-area-inset-top));
    --ypr-modal-y-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* WHAT ▸ Admin Session UI Module v1：Logout Button / Session Status Standard */
/* WARN 這段只定義 UI；Apps Script logout / session revoke 屬 JS 與後端流程，不由 CSS 完成。 */
.yuto-admin-hero-standard {
  padding: clamp(22px, 3.2vw, 36px);
}

.yuto-admin-hero-toolbar {
  justify-content: space-between;
  margin-bottom: 18px;
}

.yuto-admin-hero-copy {
  min-width: 0;
}

.yuto-admin-hero-desc {
  margin: 0;
  max-width: 760px;
}

.yuto-admin-session-notice {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--admin-soft, var(--lab-soft, #c8cbda));
}

.yuto-admin-session-notice.is-ok {
  color: #dcfff6;
  border-color: rgba(77, 226, 197, 0.28);
  background: rgba(77, 226, 197, 0.08);
}

.yuto-admin-session-notice.is-expired,
.yuto-admin-session-notice.is-error {
  color: #ffe1ea;
  border-color: rgba(255, 107, 140, 0.28);
  background: rgba(255, 107, 140, 0.08);
}

@media (max-width: 700px) {
  .yuto-admin-hero-toolbar {
    flex-direction: column;
    margin-bottom: 16px;
  }

  .yuto-admin-hero-desc,
  .yuto-admin-session-notice {
    font-size: .92rem;
    line-height: 1.65;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .yuto-admin-hero-toolbar {
    margin-bottom: 12px;
  }
}

/* WHAT ▸ Admin Layout / Page Shell Module v1 */
.yuto-admin-page {
  padding: clamp(34px, 5vw, 72px) 0 clamp(44px, 6vw, 88px);
}

.yuto-admin-login-wrap,
.yuto-admin-shell {
  width: 100%;
  min-width: 0;
}

.yuto-admin-login-card,
.yuto-admin-card,
.yuto-admin-side-card,
.yuto-admin-list-card {
  overflow: hidden;
}

.yuto-admin-shell {
  display: grid;
}

.yuto-admin-layout-grid {
  width: 100%;
}

.yuto-admin-card > :first-child,
.yuto-admin-side-card > :first-child,
.yuto-admin-list-card > :first-child,
.yuto-admin-login-card > :first-child {
  margin-top: 0;
}

.yuto-admin-card > :last-child,
.yuto-admin-side-card > :last-child,
.yuto-admin-list-card > :last-child,
.yuto-admin-login-card > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .yuto-admin-side-card {
    order: 2;
  }
}

/* WHAT ▸ Admin Page Standard Header/Footer Spacing Module v1 */
[data-yuto-admin-header="true"] + .yuto-admin-page,
[data-yuto-admin-header="true"] + .admin-page {
  padding-top: 72px;
}

/* WHAT ▸ Admin Session Page Fit Bridge Module v1 */
/* WARN 這仍是 page-fit residual bridge，不是 Page Shell 完全重構完成；未來若建立正式 Admin Hero/Grid Spacing Standard，再評估回收。 */
.yuto-admin-page .admin-shell > .yuto-admin-hero-standard,
.yuto-admin-page .yuto-admin-shell > .yuto-admin-hero-standard {
  margin: 0 0 30px;
}

.yuto-admin-page .admin-shell > .yuto-admin-hero-standard + .admin-grid,
.yuto-admin-page .yuto-admin-shell > .yuto-admin-hero-standard + .yuto-admin-layout-grid {
  margin-top: 0;
}

@media (max-width: 700px) {
  .yuto-admin-page .admin-shell > .yuto-admin-hero-standard,
  .yuto-admin-page .yuto-admin-shell > .yuto-admin-hero-standard {
    margin-bottom: 18px;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .yuto-admin-page .admin-shell > .yuto-admin-hero-standard,
  .yuto-admin-page .yuto-admin-shell > .yuto-admin-hero-standard {
    margin-bottom: 18px;
  }
}

/* WHAT ▸ Admin Login Typography Module v1 */

.yuto-admin-login-card > p {
  margin: 0;
  max-width: 760px;
}

@media (max-width: 700px) {
  .yuto-admin-login-card > p {
    font-size: .92rem;
    line-height: 1.65;
  }
}

/* WHAT ▸ Admin Form Layout / Visibility Module v1 */
.yuto-admin-page .admin-shell.is-hidden,
.yuto-admin-page .login-wrap.is-hidden,
.yuto-admin-page .field.is-hidden,
.yuto-admin-shell.is-hidden,
.yuto-admin-login-wrap.is-hidden {
  display: none !important;
}

.yuto-admin-page .form-grid,
.yuto-admin-form-grid {
  display: grid;
  gap: 16px;
  width: 100%;
}

/* WHAT ▸ Admin Fields Module v1 */
.yuto-admin-page .field {
  display: grid;
}

.yuto-admin-page input,
.yuto-admin-page select,
.yuto-admin-page textarea {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 12px 14px;
  font: inherit;
  outline: none;
  min-width: 0;
}

.yuto-admin-page input:focus,
.yuto-admin-page select:focus,
.yuto-admin-page textarea:focus {
  border-color: rgba(159, 124, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(159, 124, 255, 0.12);
}

.yuto-admin-page select option {
  background: #11131c;
  color: #fff;
}

/* WHAT ▸ Admin Touch Fields Module v1 */
.yuto-admin-page input[type="date"],
.yuto-admin-page input[type="datetime-local"] {
  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(135deg, rgba(159, 124, 255, 0.1), rgba(77, 226, 197, 0.045)),
    rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.yuto-admin-page input[type="date"]::-webkit-calendar-picker-indicator,
.yuto-admin-page input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 7px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  filter: invert(1) opacity(.82);
}

.yuto-admin-page input[type="date"]::-webkit-calendar-picker-indicator:hover,
.yuto-admin-page input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(159, 124, 255, 0.24);
  filter: invert(1) opacity(1);
}

.yuto-admin-page input::placeholder,
.yuto-admin-page textarea::placeholder {
  color: rgba(200, 203, 218, 0.55);
}

.yuto-admin-page .admin-card h2,
.yuto-admin-page .login-card h1 {
  letter-spacing: -.02em;
}

/* WHAT ▸ Admin Controls Module v1 */
.yuto-admin-page .admin-actions,
.yuto-admin-page .filter-row,
.yuto-admin-page .pager {
  min-width: 0;
}

.yuto-admin-page .admin-actions {
  margin-top: 20px;
}

.yuto-admin-page .admin-button,
.yuto-admin-page .small-action,
.yuto-admin-page .filter-btn,
.yuto-admin-page .pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, var(--admin-primary, #9f7cff), #7b5cff);
  box-shadow: 0 10px 28px rgba(123, 92, 255, 0.22);
  transition: .22s ease;
  user-select: none;
}

/* WHAT ▸ Admin Status / Switch Module v1 */
.yuto-admin-page .notice {
  margin-top: 16px;
  white-space: pre-wrap;
}

.yuto-admin-page .notice.ok {
  color: #dcfff6;
  border-color: rgba(77, 226, 197, 0.28);
  background: rgba(77, 226, 197, 0.08);
}

.yuto-admin-page .notice.error {
  color: #ffe1ea;
  border-color: rgba(255, 107, 140, 0.28);
  background: rgba(255, 107, 140, 0.08);
}

.yuto-admin-page .side-list {
  margin: 0;
  padding-left: 1.2em;
}

.yuto-admin-page .side-list li {
  margin: 8px 0;
}

.yuto-admin-page .switch-note {
  margin-top: 4px;
}

.yuto-admin-page .switch {
  position: relative;
  width: 58px;
  height: 32px;
  flex: 0 0 auto;
}

.yuto-admin-page .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.yuto-admin-page .slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: .22s;
  border-radius: 999px;
}

.yuto-admin-page .slider:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  background: #d7d9e7;
  transition: .22s;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.yuto-admin-page .switch input:checked + .slider {
  background: linear-gradient(135deg, rgba(159, 124, 255, 0.75), rgba(77, 226, 197, 0.45));
}

.yuto-admin-page .switch input:checked + .slider:before {
  transform: translateX(26px);
  background: #fff;
}

/* WHAT ▸ Admin List Module v1 */
.yuto-admin-page .list-card {
  margin-top: 22px;
}

.yuto-admin-page .list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.yuto-admin-page .list-head h2 {
  margin: 0 0 6px;
}

.yuto-admin-page .list-head p {
  margin: 0;
  color: var(--admin-soft, #c8cbda);
}

.yuto-admin-page .news-admin-list {
  margin-top: 14px;
}

.yuto-admin-page .admin-news-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.yuto-admin-page .row-title {
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
}

.yuto-admin-page .row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--admin-soft, #c8cbda);
  font-size: .92rem;
}

.yuto-admin-page .status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: .82rem;
  font-weight: 900;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.yuto-admin-page .status-pill.publish {
  background: rgba(77, 226, 197, 0.22);
  color: #dffff7;
}

.yuto-admin-page .status-pill.draft {
  background: rgba(255, 255, 255, 0.14);
}

.yuto-admin-page .status-pill.off {
  background: rgba(255, 126, 159, 0.2);
  color: #ffe0e8;
}

.yuto-admin-page .status-pill.pinned {
  background: linear-gradient(135deg, rgba(159, 124, 255, 0.38), rgba(77, 226, 197, 0.18));
  border: 1px solid rgba(159, 124, 255, 0.35);
  color: #fff;
}

.yuto-admin-page .row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.yuto-admin-page .pager {
  margin: 14px 0;
  justify-content: center;
}

.yuto-admin-page .pager-info {
  color: var(--admin-soft, #c8cbda);
  font-weight: 800;
  padding: 0 4px;
}

.yuto-admin-page .admin-button:hover,
.yuto-admin-page .small-action:hover,
.yuto-admin-page .filter-btn:hover,
.yuto-admin-page .pager-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.yuto-admin-page .admin-button.secondary,
.yuto-admin-page .small-action,
.yuto-admin-page .filter-btn,
.yuto-admin-page .pager-btn {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.yuto-admin-page .filter-btn.active,
.yuto-admin-page .pager-btn.active {
  background: linear-gradient(135deg, rgba(159, 124, 255, 0.45), rgba(77, 226, 197, 0.18));
  border-color: rgba(159, 124, 255, 0.38);
  color: #fff;
}

.yuto-admin-page .small-action {
  font-size: .88rem;
}

.yuto-admin-page .small-action.danger {
  border-color: rgba(255, 126, 159, 0.35);
  background: rgba(255, 126, 159, 0.14);
}

.yuto-admin-page .admin-button:disabled,
.yuto-admin-page .small-action:disabled,
.yuto-admin-page .pager-btn:disabled {
  cursor: not-allowed;
  opacity: .38;
  filter: grayscale(.45);
  transform: none;
  pointer-events: none;
  user-select: none;
}

/* WHAT ▸ Admin Image Tools Module v2 */
.yuto-admin-page .image-mode-row {
  margin-top: 10px;
}

.yuto-admin-page .image-mode-option {
  user-select: none;
}

.yuto-admin-page .image-mode-option input {
  width: auto;
  min-height: auto;
  accent-color: #9f7cff;
}

.yuto-admin-page .image-mode-option:has(input:checked) {
  color: #fff;
  border-color: rgba(159, 124, 255, 0.36);
  background: linear-gradient(135deg,rgba(159, 124, 255, 0.28),rgba(77, 226, 197, 0.11));
}

.yuto-admin-page .image-help {
  font-size: .92rem;
  line-height: 1.65;
}

.yuto-admin-page .image-tools {
  margin-top: 10px;
}

.yuto-admin-page .image-upload-input {
  min-height: 54px;
  padding: 10px;
  cursor: pointer;
}

.yuto-admin-page .image-upload-input::file-selector-button {
  margin-right: 12px;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(159, 124, 255, 0.85), rgba(123, 92, 255, 0.85));
  cursor: pointer;
}

.yuto-admin-page .image-preview-grid {
  margin-top: 12px;
}

.yuto-admin-page .image-preview-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  padding: 10px;
  display: grid;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.yuto-admin-page .image-preview-card img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.yuto-admin-page .image-preview-meta {
  font-size: .78rem;
  color: var(--admin-soft, #c8cbda);
  line-height: 1.45;
  word-break: break-all;
}

.yuto-admin-page .image-preview-meta strong {
  color: #fff;
}

.yuto-admin-page .image-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 18, 0.78);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.yuto-admin-page .image-remove-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
@media (min-width: 901px) {
  .yuto-admin-page .image-mode-row {
    overflow: visible;
  }

  .yuto-admin-page .image-mode-option {
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: visible;
  }

  .yuto-admin-page .image-mode-option input[type="radio"] {
    width: 16px !important;
    height: 16px;
    min-width: 16px !important;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    flex: 0 0 16px;
    appearance: auto;
    -webkit-appearance: radio;
  }
}

@media (max-width: 700px) {
  .yuto-admin-page .image-mode-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .yuto-admin-page .image-mode-option {
    width: 100%;
    max-width: 100%;
    min-height: 46px !important;
    display: flex !important;
    justify-content: flex-start;
    gap: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .96rem;
    line-height: 1.2;
  }

  .yuto-admin-page .image-mode-option input[type="radio"] {
    width: 17px !important;
    height: 17px;
    min-width: 17px !important;
    min-height: 17px;
    max-width: 17px !important;
    max-height: 17px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    flex: 0 0 17px;
    appearance: auto;
    -webkit-appearance: radio;
    accent-color: #9f7cff;
  }

  .yuto-admin-page .image-tools {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow: visible;
  }

  .yuto-admin-page .image-upload-input {
    min-height: 52px;
    height: auto;
    white-space: normal;
    overflow: hidden;
  }

  .yuto-admin-page .image-upload-input::file-selector-button {
    max-width: 46%;
    margin-right: 10px;
    padding: 9px 12px;
  }

  .yuto-admin-page .image-preview-meta {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .yuto-admin-page .image-preview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
  }
}

/* WHAT ▸ Admin Hard Split Base Guard Module v1 */
.yuto-admin-page,
.yuto-admin-page * {
  box-sizing: border-box;
}

.yuto-admin-page input,
.yuto-admin-page select,
.yuto-admin-page textarea,
.yuto-admin-page button,
.yuto-admin-page a {
  max-width: 100%;
}

.yuto-admin-page .field,
.yuto-admin-page .field > *,
.yuto-admin-page .form-grid,
.yuto-admin-page .admin-grid,
.yuto-admin-page .admin-card,
.yuto-admin-page .login-card,
.yuto-admin-page .list-card {
  min-width: 0;
}

.yuto-admin-page #loginPassword,
.yuto-admin-page input[type="password"] {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  font-size: 16px;
  line-height: 1.4;
}
@media (min-width: 901px) {
  .yuto-admin-page {
    max-width: 100%;
    padding: 72px 0 80px !important;
    overflow-x: hidden;
  }

  .yuto-admin-page > .yuto-admin-container {
    width: min(1100px, calc(100% - 48px)) !important;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    transform: none;
  }

  .yuto-admin-page .login-wrap {
    width: 100%;
    min-height: 55vh !important;
    padding: 0;
    overflow: visible;
  }

  .yuto-admin-page .login-card {
    max-width: 620px;
    margin: 0 auto;
    padding: 28px !important;
    border-radius: 28px !important;
    transform: none;
    overflow: hidden;
  }

  .yuto-admin-page .login-card h1 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: 1.15 !important;
  }

  .yuto-admin-page .admin-grid {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 22px !important;
    width: 100%;
    max-width: 100%;
  }

  .yuto-admin-page .admin-card,
  .yuto-admin-page .list-card {
    width: 100%;
    max-width: 100%;
    padding: 28px !important;
    border-radius: 28px !important;
    overflow: hidden;
  }

  .yuto-admin-page .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
  }

  .yuto-admin-page .field input,
  .yuto-admin-page .field select,
  .yuto-admin-page .field textarea {
    width: 100%;
    min-width: 0;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .yuto-admin-page > .yuto-admin-container {
    width: min(100% - 40px, 980px) !important;
  }

  .yuto-admin-page .admin-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 700px) {
  .yuto-admin-page {
    padding: 24px 0 52px !important;
    transform: none;
  }

  .yuto-admin-page .login-wrap {
    width: 100%;
    display: block !important;
    padding: 16px 0 24px;
    overflow: visible;
    transform: none;
  }

  .yuto-admin-page .login-card,
.yuto-admin-page .admin-card,
.yuto-admin-page .list-card {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 20px !important;
    border-radius: 22px !important;
    overflow: hidden;
    transform: none;
  }

  .yuto-admin-page .login-card h1 {
    font-size: clamp(1.95rem, 9vw, 2.55rem) !important;
    line-height: 1.12 !important;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .yuto-admin-page .login-card p,
.yuto-admin-page .notice,
.yuto-admin-page .image-help,
.yuto-admin-page .switch-note {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .yuto-admin-page .admin-grid,
  .yuto-admin-page .form-grid {
    display: grid;
    gap: 16px !important;
    width: 100%;
    max-width: 100%;
  }

  .yuto-admin-page .field,
  .yuto-admin-page .field.full,
  .yuto-admin-page .field input,
  .yuto-admin-page .field select,
  .yuto-admin-page .field textarea {
    grid-column: auto !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .yuto-admin-page input,
  .yuto-admin-page select,
  .yuto-admin-page textarea {
    font-size: 16px;
  }

  .yuto-admin-page textarea {
    min-height: 124px !important;
  }

  .yuto-admin-page .switch-line {
    width: 100%;
    max-width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px !important;
    padding: 14px !important;
  }

  .yuto-admin-page .admin-actions,
  .yuto-admin-page .row-actions,
  .yuto-admin-page .filter-row,
  .yuto-admin-page .pager {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    overflow: visible;
  }

  .yuto-admin-page .admin-actions .admin-button,
  .yuto-admin-page .admin-actions a.admin-button {
    min-width: 0;
  }

  .yuto-admin-page .filter-btn,
  .yuto-admin-page .pager-btn,
  .yuto-admin-page .small-action {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 0 14px !important;
    font-size: .92rem;
  }

  .yuto-admin-page .list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .yuto-admin-page .list-head .admin-button {
    width: 100%;
  }

  .yuto-admin-page .admin-news-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 14px;
    overflow: hidden;
  }

  .yuto-admin-page .row-title,
  .yuto-admin-page .row-meta,
  .yuto-admin-page .row-meta span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* WHAT ▸ Admin Hard Split Small Mobile 390 Module v1 */
@media (max-width: 390px) {
  .yuto-admin-page .login-card,
.yuto-admin-page .admin-card,
.yuto-admin-page .list-card {
    padding: 18px !important;
  }
}
@media (max-width: 932px) and (orientation: landscape) {
  .yuto-admin-page .login-wrap {
    padding-top: 8px;
  }

  .yuto-admin-page .login-card,
.yuto-admin-page .admin-card,
.yuto-admin-page .list-card {
    padding: 18px !important;
  }

  .yuto-admin-page .login-card h1 {
    font-size: clamp(1.75rem, 5.2vw, 2.35rem) !important;
  }
}

/* WHAT ▸ Admin Maintenance Tools Module v1 */
.yuto-admin-tools {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.yuto-admin-tool-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text, #f6f7fb);
  font-size: 0.84rem;
  font-weight: var(--yuto-type-pager-weight);
  line-height: 1;
  white-space: nowrap;
}

.yuto-admin-tool-pill.is-safe {
  border-color: rgba(77, 226, 197, 0.26);
  background: rgba(77, 226, 197, 0.1);
  color: #dcfff6;
}

.yuto-admin-tool-pill.is-disabled {
  border-color: rgba(255, 203, 107, 0.26);
  background: rgba(255, 203, 107, 0.09);
  color: #fff1cc;
}

.yuto-admin-tool-pill.is-danger {
  border-color: rgba(255, 107, 140, 0.28);
  background: rgba(255, 107, 140, 0.09);
  color: #ffe1ea;
}

.yuto-admin-tools-level-grid {
  min-width: 0;
}

.yuto-admin-tools-level {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

.yuto-admin-tools-level-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.yuto-admin-tools-level-title {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.35;
}

.yuto-admin-tools-level-desc {
  font-size: 0.9rem;
  line-height: 1.6;
}

.yuto-admin-tools-checklist {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.yuto-admin-tools-check {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-soft, #c8cbda);
  font-size: 0.9rem;
  line-height: 1.6;
}

.yuto-admin-tools-check strong {
  display: block;
  color: var(--text, #fff);
  margin-bottom: 5px;
}
@media (max-width: 960px) {
  .yuto-admin-tools-level-grid,
  .yuto-admin-tools-checklist {
    grid-template-columns: 1fr;
  }

  .yuto-admin-tools-level-head {
    display: grid;
    gap: 8px;
  }
}

@media (max-width: 700px) {
  .yuto-admin-tools {
    gap: 14px;
  }

  .yuto-admin-tools-level {
    padding: 14px;
    border-radius: 20px;
  }
}

@media (max-width: 900px) {
  .yuto-admin-page .form-grid {
    grid-template-columns: 1fr;
  }

  .yuto-admin-page .admin-news-row {
    grid-template-columns: 1fr;
  }

  .yuto-admin-page .row-actions {
    justify-content: flex-start;
  }
}

    .admin-tools-shell {
      margin: 0 auto;
    }

    .admin-tools-header {
      margin-bottom: 22px;
    }

    .admin-tools-eyebrow {
      margin-bottom: 12px;
    }

    .admin-tools-header p,
    .admin-tools-section p {
      margin: 0;
    }

    .admin-tools-mode {
      justify-content: flex-end;
    }

    .admin-tools-section {
      margin: 22px 0;
    }

    .admin-tools-section h2 {
      margin: 0 0 10px;
      font-size: clamp(1.35rem, 3vw, 2rem);
      line-height: 1.25;
    }

    .admin-tools-nav {
      margin-top: 18px;
    }

    .admin-tools-link:hover,
    .admin-tools-button:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .admin-tools-status-box {
      margin-top: 18px;
      padding: 18px;
      background: rgba(9, 10, 15, 0.42);
    }

    .admin-tools-status-box.is-missing,
    .admin-tools-status-box.is-error {
      border-color: rgba(255, 203, 107, 0.28);
      background: rgba(255, 203, 107, 0.075);
    }

    .admin-tools-status-box.is-found,
    .admin-tools-status-box.is-ok {
      border-color: rgba(77, 226, 197, 0.28);
      background: rgba(77, 226, 197, 0.075);
    }

    .admin-tools-status-box.is-loading {
      border-color: rgba(159, 124, 255, 0.28);
      background: rgba(159, 124, 255, 0.075);
    }

    .admin-tools-status-box.is-expired {
      border-color: rgba(255, 107, 140, 0.28);
      background: rgba(255, 107, 140, 0.075);
    }

    .admin-tools-status-title,
    .admin-tools-registry-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 0;
    }

    .admin-tools-status-title span,
    .admin-tools-registry-head span {
      flex: 0 0 auto;
    }

    .admin-tools-registry-card {
      display: grid;
      gap: 9px;
      min-width: 0;
      padding: 14px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.04);
    }

    .admin-tools-registry-card h4 {
      margin: 0;
      font-size: 1rem;
      line-height: 1.4;
    }

    .admin-tools-registry-card p {
      margin: 0;
      color: #c8cbda;
      font-size: .9rem;
    }

    .admin-tools-registry-empty {
      padding: 14px;
      border-radius: 16px;
      border: 1px dashed rgba(255, 255, 255, 0.16);
      color: #c8cbda;
    }

    .admin-tools-run-confirm {
      display: grid;
      padding: 14px;
    }

    .admin-tools-run-confirm[hidden] {
      display: none !important;
    }

    .admin-tools-confirm-line {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.6;
    }

    .admin-tools-confirm-line input {
      margin-top: .38em;
      accent-color: #9f7cff;
    }

    .admin-tools-button:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none;
    }

    .admin-tools-footer {
      margin-top: 30px;
      font-size: .92rem;
      text-align: center;
    }

@media (max-width: 760px) {
      .admin-tools-mode {
        justify-content: flex-start;
      }

      .admin-tools-status-title,
      .admin-tools-registry-head {
        display: grid;
      }
}

/* v038 source replacement: booking submit spinner is a true liquid mask.
   The kamon image exists only inside the rising fill layer; there is no
   always-visible full kamon layer above the waterline. */

/* v038 sword source: each part uses SVG viewBox cropping against the measured
   visible bbox of the original transparent PNG. The blade SVG stretches the
   cropped blade area only, so progress growth extends the blade rather than
   repeating or scaling the 1500px transparent canvas. */

/* Admin CSS Query / Inline Low-Risk Cleanup Module v1
   Source: ADMIN-CSS-QUERY-AND-INLINE-LOW-RISK-CLEANUP-001
   Scope: admin-news.html / admin-tools.html only.
   Purpose: replace small inline style="" spacing residuals with scoped CSS rules.
   Do not use this module for public pages. */

/* Fake cursor is enabled by JS only when pointer is fine.
     Native cursor remains the fallback if JS fails.
     v043 cleanup: broad v041/v042 suppression is removed from steady state.
     During same-tab Lab navigation only, JS enters a short route handoff state so
     the old page hides the native cursor before the browser leaves the document. */

/* v038：外層斬痕固定，只讓亮線在斬痕內掃過；不讓整條光漂移。 */

/* Desktop homepage contact title-to-body only. */

/* Mobile homepage contact vertical rhythm. */

/* Keep mail→copy button gap from v019 unchanged; this repeats only its active owner value for clarity. */

/* Mobile social icon strip: extend horizontally and share the same fade logic as the news carousel. */

/* Mobile latest news title and CTA should sit on the same row. */

/* Booking mobile mode switch: keep v020 spacing fix, but apply 130% text + bamboo in the real bamboo owner cascade. */

/* Home contact desktop: only title→body, keep body→mail and right-side copy button layout unchanged. */

/* Home contact mobile: tighten title→body and body→mail; preserve mail→copy Mail gap from v019. */

/* v037 final override: carousel thumbnail bottom must finish black, not white.
   Placed late on purpose so normal / hover / active border declarations cannot re-open a white subpixel line. */

/* Homepage Hero logo remains an image, not text. Keep approved UI Lab size. */

/* ---------- Paper / grain / grid texture module ---------- */

/* ---------- Middle-click scroll grab image visual ---------- */

/* Keep middle-scroll cursor hiding targeted. Do not use body * here. */

/* The character uses the shared soft-crop viewport instead of its old private
   bottom-only mask, so it matches logo/text/buttons at the same crop band. */

/* Keep footer policy links calm; no card/button sheen on small footer text. */

/* The activity title should visually match the Links Lab plain hero title. */

/* Keep footer policy links calm; no card/button sheen on small footer text. */

/* Group outer corners only. */

/* Shared kamon ornaments live on the grid, not inside a single card. */

/* Home Lab hero CTA links: text-only + bamboo separators */

/* Booking Lab mode switch: keep active logic, remove pill UI */

/* Persona Lab top/side visual switches: text-only + bamboo separators */

/* Persona Lab tag chips: plain text tags + bamboo separators */

/* News card meta: remove pill skin from category / pinned, but leave action buttons unchanged. */

/* WHAT ▸ Persona Lab v031 — Other Details Layout Source */

/* Mobile Hero: remove the glass frame/blur/mask only on homepage mobile. */
/* Mobile Hero logo: move to bottom-right and reduce to 50% of the mobile size. */
/* Mobile only: hide the intro sentence without deleting it from desktop/HTML. */
/* Mobile Hero CTA row: keep HTML/content, but hide and disable it on mobile only. */
/* Mobile white-line source guard:
     The remaining white line is treated as mobile interaction residue from the carousel / knife layers,
     not as Home contact layout. Keep contact layout values untouched. */

/* Mobile Hero cloud cue: make the intended scroll cloud visible and centered,
     instead of leaving a tiny gray sliver at the left edge. */
/* Mobile contact white-line artifact:
     On mobile scroll, thin top borders/glass edges can flicker as a white line.
     Remove only the top-edge highlight; keep layout, spacing, widths/heights, and desktop unchanged. */

/* Hero media bottom fade is applied to the object element, not the source bitmap.
     Future replacement with <video> can keep the same class and still fade out at the bottom. */
/* Mobile cloud cue: show the real Japanese-cloud asset and keep the touch area contained. */
/* Contact white-line final guard:
     Mobile scroll compositing can flicker the glass top edge. Keep layout untouched,
     but remove only the bright upper edge and internal highlight layers. */

/* Remove the cloud itself and its click/touch area on mobile. */
/* Mobile homepage hero should be a normal static block:
     no scroll-crop height animation and no upward closing feeling while swiping. */

/* Hero media object-only bottom fade.
     This applies to the character image/video element itself, so replacing the PNG
     with a future video keeps the same bottom fade. The logo h1 layer is not targeted. */
/* The persistent white line is the footer top border entering the viewport after contact.
     Remove it only on the mobile homepage. Do not touch desktop footer or contact layout. */

/* Hide the native/mobile scroll indicator only on this homepage.
     This targets the line that flickers at the viewport edge while dragging. */
/* Reliable visual fade for the character media object only.
     It sits above the character image/video layer and below the logo layer. */

/* Disable v030 color overlay. This prevents the dark rectangle over the head. */
/* Real object fade: apply the alpha mask to the media element only.
     Logo h1 is not selected, so it will not be faded. */
/* Diagnostic isolation for the stubborn white line:
     remove ONLY mobile visual borders/highlights that can create 1px flicker.
     Layout values remain the same. */
/* Prevent hover/active card transforms from causing compositor shimmer on mobile only. */

/* Restore Contact/Footer from the v031 diagnostic if any previous test cache still affected it. */
/* Real media-object fade, stronger and earlier for visual verification.
     It targets only the character media object, never the logo h1 image. */
/* Wrapper/native-line isolation:
     Since Contact/Footer hiding did not remove the line, remove mobile-only page-level
     edges/background pseudo layers and native scrollbar indicators next. */

/* Mobile hero: remove the scroll-crop image geometry and make the media object tight. */
/* Mobile background/end seam test:
     Extend the approved texture/motif stage and reduce only the empty end-gap before footer.
     This does not change Contact card internal spacing/width/height. */

/* Move the hero group upward and keep the media object tight. */
/* Logo layer stays separate and moves upward with the character, without taking the media mask. */
/* Give the shortcut icons a little breathing room below the hero media. */
/* Keep v034 seam fix locked. */

/* Base: the new mobile-only media layer is invisible by default, so desktop cannot be affected. */

/* Hide the old mobile hero media object only on mobile.
     It remains in HTML for desktop and fallback safety. */
/* Keep the mobile hero container as a clean holder, not as the image geometry owner. */
/* New independent mobile media object. */
/* Logo remains a separate layer and does not receive the media mask. */
/* Mobile-only unused hero items stay hidden and cannot be tapped. */
/* Keep confirmed v034/v035 seam solution locked. */

/* Shared mobile footer seam fix for Lab pages where the texture layer ended
     before the footer, leaving a brighter blue unfiltered strip above footer. */

/* Preserve normal typing/select behavior inside real form fields only. */
/* Mobile should not play the desktop knife slash / hover sheen over controls.
     This removes temporary visual feedback only; desktop knife behavior stays intact. */

/* Root edge color: this is what mobile browsers reveal during top/bottom rubber-band bounce. */
/* Do not lock the native bounce. Earlier diagnostic guards may have disabled overscroll on index; release it. */
/* Header/footer extension colors only. This does not repaint the middle content stage. */
/* The active page body remains the blue Lab stage; only the outer bounce edge is black. */
/* All mobile texture pages: keep the wallpaper/motif/texture stage long enough to reach the footer/end. */
/* Payment/result pages previously used a shorter 4200px stage; sync them to the mobile seam guard. */
/* Mobile footer seam guard for every page with the shared footer. */
/* Keep short / result pages from revealing blue or unfiltered wallpaper at the very end. */

a {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 1600px) {
  :root {
    --yuto-public-container: min(var(--container, 1200px), 1320px);
  }
}

h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

/* WARN 下方 grouped 規則含【活的】.hero-card / .booking-main —— 只能 trim 掉 notice-box 那一行，不可整條刪 */

img {
  max-width: 100%;
  display: block;
  border-radius: 16px;

  -webkit-user-drag: none;
}

/* WHAT ▸ Yuto Link Button Formal Standard v1：links 頁按鈕接公版 */
.yuto-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.yuto-button-row.is-link-entry-row {
  margin-top: auto;
}

/* 可選變體：未來若某頁需要手機滿版，HTML 可加 is-mobile-wide，由 CSS 統一控制。 */

/* WHAT ▸ Yuto Booking Action Button Standard v1：booking 送出 / 重選按鈕公版 */
.yuto-button-row.is-booking-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

@media (max-width: 700px) {
  .yuto-button-row.is-booking-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.reference-image-angle,
.yuto-lightbox,
.yuto-lightbox *{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.reference-image-angle{
  -webkit-user-drag:none;
}

/* WARN [FIX-12b] 這一組【必須】保有堆疊上下文 —— 頁首的 LOGO / 選單 / 3 個導覽連結
     被 v68 關掉了進場動畫 → 沒有 transform → 堆疊上下文【只靠這一條】撐著。
     用 isolation 不用 will-change：建立堆疊上下文【但不佔 GPU 合成層】→ 不生鬼影 → PRIN-01 / TRAP-28。
     🔴 整條刪掉 → 縮圖點不到、頁首出現 hover、按鈕外觀跑掉（2026-07-13 實測炸過）*/
@media (max-width: 700px){.fade-up,
.yuto-bamboo-link,
.yuto-btn--ui,
.tag,
.news-card,
.news-gallery-frame img,
.yuto-lightbox-image,
.link-card,
.service-card,
.calendar-day,
.select-text,
.custom-required-mark,
.admin-button,
.small-action,
.filter-btn,
.pager-btn{
    isolation: isolate;
  }
}

input,
textarea,
select,
[contenteditable="true"],
.text-input,
.text-area {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
}
/* WHAT ▸ Yuto Payment Recovery / Cancel Action Standard v6 Scope: payment interruption / continue payment / cancel pending booking UI. Source status: UI Lab approved 2026-05-06, formalized 2026-05-07; v6 pending-card anchor focus / centered scroll-safe modal. Safety: - Visual UI only. No Worker / Apps Script / Sheet / Calendar logic. - All selectors are scoped under .yuto-payment-recovery or .ypr-*. - Do not use global body/img/button/card/container selectors here. - v3 keeps UI Lab as source of truth and also standardizes viewport position, modal height rhythm, and phone layouts. */

/* ═══════════════════════════════════════════════════════════════
   【內容區塊錨點】— 深連結（網址 #id）跳轉時避開固定頁首

   頁首是 position:sticky; top:0（高度 --yuto-header-height = 78px）。
   若不設 scroll-margin-top，瀏覽器會把區塊捲到「視窗最上緣」，
   結果標題被頁首蓋住。

   ⚠️ 目前是靠各區塊自己的 padding-top「碰巧」墊開的，並不可靠：
      · persona 桌機 padding-top: clamp(70px, 9vh, 118px) → 矮螢幕趨近 70px < 78px
      · persona 手機 padding-top: 54px                    → 54px < 78px（已被蓋住）

   用法：新增可被錨點跳轉的內容區塊時，把它的 id 加進這個清單。
   ※ 只列「內容區塊」。狀態視圖（#loadingView / #resultView）、
      彈窗（#cancelModal）、容器（#adminShell）不要加 —— 它們不是錨點目標。

   ※ 不影響消息頁的深連結置中：那套用 window.scrollTo({top}) 直接指定座標，
      且自己會扣掉頁首高度；scroll-margin-top 只作用於原生 #錨點跳轉與
      scrollIntoView()，兩者互不干涉（已實測：news.html 使用 scrollIntoView 0 次）。
   ═══════════════════════════════════════════════════════════════ */
#persona-profile,
#persona-role-data,
#latest-news-lab,
#homeLatestNewsLab {
  scroll-margin-top: calc(var(--yuto-header-height, 78px) + 28px);
}

[data-yuto-admin-footer="true"] {
  margin-top: 40px;
}

/* WHAT ▸ Public Last Visible UI Buffer Module v1 */
.yuto-public-last-visible-ui {
  margin-bottom: var(--yuto-public-last-visible-ui-buffer-desktop);
}

@media (min-width: 701px) and (max-width: 1100px) {
  .yuto-public-last-visible-ui {
    margin-bottom: var(--yuto-public-last-visible-ui-buffer-tablet);
  }
}

@media (max-width: 700px) {
  .yuto-public-last-visible-ui {
    margin-bottom: var(--yuto-public-last-visible-ui-buffer-mobile);
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .yuto-public-last-visible-ui {
    margin-bottom: var(--yuto-public-last-visible-ui-buffer-landscape);
  }
}

.yuto-home-bg-scene {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0);
  contain: layout style paint;
}

.yuto-home-bg-scene.is-ready .yuto-bg-motif {
  opacity: var(--motif-opacity, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  html[data-yuto-web-lab="homepage"] input,
  html[data-yuto-web-lab="homepage"] textarea,
  html[data-yuto-web-lab="homepage"] select,
  html[data-yuto-web-lab="homepage"] [contenteditable="true"] {
    cursor: auto;
  }
}

html.is-yuto-middle-scroll-active,
html.is-yuto-middle-scroll-active body {
  scroll-behavior: auto;
}

html.is-yuto-middle-scroll-active body.yuto-web-lab-page,
html.is-yuto-middle-scroll-active body.yuto-web-lab-page :is(a, button, [role="button"], main, section, div, img, h1, h2, h3, h4, p, span) {
  cursor: none;
}

html.is-yuto-middle-scroll-active .yuto-knife-fake-cursor,
html.is-yuto-middle-scroll-active .yuto-knife-slash {
  opacity: 0;
  visibility: hidden;
}

/* ---------- Paper / grain / grid texture module ---------- */
/* ═══════════════════════════════════════════════════════════════
   【材質登記表】v1 — 背景紙紋的唯一真相來源

   使用方式：在 <body> 上設定 data-yuto-bg-texture="材質名"
       <body class="..." data-yuto-bg-texture="paper-grid-04">

   ▸ 換材質（全站）：11 頁的 <body> 各改一個字
   ▸ 換材質（單頁）：只改那一頁的 <body>
   ▸ 新增材質：在下方登記表加一行即可（圖檔放 images/textures/）

   ⚠️ 圖片路徑只寫在這裡。其他地方一律用 var(--yuto-bg-texture-image)，
      不要再寫死 url()（否則換材質會漏改，這正是本次重構要根除的問題）。
   ═══════════════════════════════════════════════════════════════ */
[data-yuto-bg-texture="paper-grid-04"] {
  --yuto-bg-texture-image: url("../images/textures/yuto-paper-grid-04.webp");
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3 區　頁面層                                                   ║
   ║  body.yuto-xxx-page … 各頁專屬的樣式與覆蓋                         ║
   ║  ※ 排在元件層之後 → 頁面覆蓋元件。這是【設計】，不是巧合。         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-A 區　共用基礎（所有頁面都吃；被頁面層覆蓋）               ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
body.yuto-page-bg::before,
body.yuto-page-bg::after {
  content: none;
  display: none;
}

@media (max-width: 700px) {
  body.yuto-page-bg {
    min-height: 100dvh;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* WHAT ▸ Yuto Page Base Layout Standard v1：全站貼底與主內容伸展 */
/* WARN 只處理最底層版面，不改 hero-card / section-card / button / field / booking 流程。 */

body.yuto-page-bg main {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: scroll;

  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
}

@media (max-width: 932px) and (orientation: landscape) {
  body.yuto-page-bg .container,
  body.yuto-page-bg .yuto-container {
    width: min(
      calc(100% - max(32px, env(safe-area-inset-left) + env(safe-area-inset-right) + 28px)),
      var(--container, var(--yuto-public-container, 1200px))
    );
  }

  body.yuto-page-bg main {
    min-width: 0;
  }
}

/* WHAT ▸ Yuto Header / Footer Edge Standard v2：深色邊界，不製造 scroll overflow */
/* WARN 不要再用 header::before / footer::after 120vh 延伸，避免頁尾被撐出超長空白。 */
body.yuto-page-bg .yuto-site-header,
body.yuto-page-bg .yuto-site-footer {
  background-color: var(--yuto-edge-bg, #070911);
}

body.yuto-page-bg .yuto-site-header::before,
body.yuto-page-bg .yuto-site-footer::after {
  content: none;
  display: none;
}

body.yuto-page-bg .yuto-site-footer {
  position: relative;
  isolation: auto;
}

/* WHAT ▸ 【標準小按鈕・共用材料庫】四胞胎(隱私回首頁/首頁聯絡/首頁消息CTA/消息卡CTA) 統一材料源:改這一行,四顆按鈕同步換裝。各按鈕的尺寸仍由各自系統控制。 */

/* WHAT ▸ 【標準小按鈕・共用材料庫】四胞胎(隱私回首頁/首頁聯絡/首頁消息CTA/消息卡CTA) 統一材料源:改這一行,四顆按鈕同步換裝。各按鈕的尺寸仍由各自系統控制。 */
/* WARN [WALL-01] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
/* TODO 本輪掃描發現 --yuto-btn-small-src 目前全站 0 引用（四胞胎按鈕並未實際讀它）。
        但本規則掛著 WALL-01，承重牆不得擅動 → 保留原狀，變數去留待 Kai 於 DECISIONS 決議。 */
body.yuto-web-lab-page {
  --yuto-btn-small-src: url("../images/blue_button_30_mobile_trim.png");
}

/* WHAT ▸ 【全站統一按鈕・整張圖標準 v1】(yuto-btn) 單一真相來源。所有新遷移的按鈕都套 .yuto-btn ＋ 尺寸修飾。 誠實 class：沒有 slice、沒有 :not() 開關，看 class 就知道是整張圖。 規格（定版）： - 整張圖 center center / auto 100%（高度鎖死：圖填滿盒高，寬度隨比例）真置中 - 高度分級制：標準 44px / 小版 --sm 38px。高度是老大先鎖死，圖只換寬度不改高度， 太寬就換短圖號。全站同級按鈕高度一致（字桌機 16.5px / 手機縮） - 換圖只換寬度(圖號)，高度不變 - position:relative + overflow:hidden → 讓 JS 自動掛的刀光 sheen 正確裁切 - 刀光 sheen：JS(setupHoverBladeLight) 對所有 a/button 自動掛；用按鈕圖當 mask， 光只出現在按鈕形狀內（不掃到 PNG 透明區）； 不要刀光的按鈕在 HTML 加 data-yuto-no-hover-sheen="true" opt-out - 動效 v1：hover=亮1.08+上浮3px；active=亮1.12+scale.98；disabled=灰+禁點 尺寸修飾對照(素材幾何表)： --30t 295/56 · --35 325/56 · --50 418/56 · --75 570/56 高度修飾：--sm（38px/14.5px，通用小尺寸；改小按鈕大小＝只改此修飾定義） */
body.yuto-web-lab-page .yuto-btn {
  --yuto-btn-h: 44px;
  --yuto-sheen-streak: 34%;
  --yuto-sheen-from: -45%;
  --yuto-sheen-to: 405%;
  --yuto-sheen-peak: .38;
  --yuto-sheen-mid: .30;
  box-sizing: border-box;
  position: relative;
  display: inline-grid;
  place-items: center;
  height: var(--yuto-btn-h);
  min-height: 0;
  aspect-ratio: var(--yuto-btn-ratio);
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  /* 【高度鎖死邏輯 v40b】background-size: auto 100% ＝ 圖高度永遠等於按鈕盒高度，寬度隨比例。
     高度是老大：不管換哪張圖，視覺按鈕高度一致；圖太扁只會變寬(換短圖號解決)，絕不改高度。
     （舊 contain 會讓圖依自身內距縮進盒內，造成不同圖視覺高度不一——即呼吸不一致的根因） */
  background: transparent var(--yuto-btn-src) center center / auto 100% no-repeat;
  color: rgba(246, 248, 255, 0.96);
  font-family: var(--yuto-type-font-family);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .015em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
  box-shadow: none;
  white-space: nowrap;
  cursor: var(--yuto-knife-cursor-pointer, pointer);
  appearance: none;
  -webkit-appearance: none;
  transform-origin: center center;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

/* WHY 掃光用按鈕圖自己當遮罩 → 只在圖不透明處發光。PNG 按鈕四周透明，滿版掃光會讓「沒按鈕的地方」也發光 → PRIN-19 */
body.yuto-web-lab-page .yuto-btn > .yuto-knife-hover-sheen {
  -webkit-mask: var(--yuto-btn-src) center center / auto 100% no-repeat;
  mask: var(--yuto-btn-src) center center / auto 100% no-repeat;
}

/* 【全站統一按鈕 v1・刀光行程配平】(值已併入上方 .yuto-btn 主定義)
   掃光鐵律：to = 138 ÷ streak（保證光條掃滿整顆按鈕、不斷尾）。
   定案：streak 34% → to 405%（138÷.34≈406）。百分比相對按鈕自身寬度，
   故 30t/35/50 各寬度自動貼合，無需每尺寸另配。
   特寬按鈕(75/click)若覺光速過快，僅在該尺寸修飾單獨加 --yuto-sheen-dur，不動配平。 */

/* 寬度修飾（換圖號，只改寬度，高度不變） */
body.yuto-web-lab-page .yuto-btn--30t { --yuto-btn-src: url("../images/blue_button_30_mobile_trim.png"); --yuto-btn-ratio: 295 / 56; }

body.yuto-web-lab-page .yuto-btn--35  { --yuto-btn-src: url("../images/blue_button_35.png");            --yuto-btn-ratio: 325 / 56; }

body.yuto-web-lab-page .yuto-btn--40  { --yuto-btn-src: url("../images/blue_button_40.png");       --yuto-btn-ratio: 356 / 56; }

body.yuto-web-lab-page .yuto-btn--50  { --yuto-btn-src: url("../images/blue_button_50.png");            --yuto-btn-ratio: 418 / 56; }

body.yuto-web-lab-page .yuto-btn--75  { --yuto-btn-src: url("../images/blue_button_75.png");            --yuto-btn-ratio: 570 / 56; }

body.yuto-web-lab-page .yuto-btn:hover,
body.yuto-web-lab-page .yuto-btn:focus-visible {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-3px);
}

body.yuto-web-lab-page .yuto-btn:active,
body.yuto-web-lab-page .yuto-btn.copied {
  filter: brightness(1.12);
  transform: translateY(0) scale(.98);
}

body.yuto-web-lab-page .yuto-btn:disabled,
body.yuto-web-lab-page .yuto-btn.is-locked,
body.yuto-web-lab-page .yuto-btn.is-submitting,
body.yuto-web-lab-page .yuto-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .62;
  filter: grayscale(.35) brightness(.76);
  transform: none;
  pointer-events: none;
}

@media (max-width: 700px) {
  /* WARN 通用手機高度 38px 必須排除 --link（:not(.yuto-btn--link)），否則 link 按鈕被撐成 38px → 寬 200px 超出容器 157px → 圖被裁切 → PRIN-14 */
  body.yuto-web-lab-page .yuto-btn:not(.yuto-btn--link) { --yuto-btn-h: 38px; font-size: 14px; }
}
/* WARN [WALL-02] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-web-lab-page {
  --yuto-slice-button-image: url("../images/blue_button_click.png");
}

@media (hover: none) and (pointer: coarse) {
  body.yuto-page-bg .yuto-site-logo,
  body.yuto-page-bg .yuto-site-menu a,
  body.yuto-page-bg .yuto-footer-links a,
  body.yuto-page-bg .yuto-btn--ui,
  body.yuto-page-bg button,
  body.yuto-page-bg [role="button"],
  body.yuto-page-bg .pager-btn {
    touch-action: manipulation;
  }

  body.yuto-page-bg .section-head,
  body.yuto-page-bg .section-head h2,
  body.yuto-page-bg .news-meta,
  body.yuto-page-bg .news-date,
  body.yuto-page-bg .news-badge,
  body.yuto-page-bg .news-content,
  body.yuto-page-bg .payment-title,
  body.yuto-page-bg .payment-desc,
  body.yuto-page-bg .payment-badge,
  body.yuto-page-bg .payment-status-chip,
  body.yuto-index-page .hero-card > .tag {
    touch-action: manipulation;
  }

  /* Explicit exclusions and future reserved areas. */
  /* WHAT ▸ 觸控裝置上恢復預設手勢的元件：輸入、媒體、可捲清單、燈箱。
     WHY  這些需要縮放或雙指捲動，不能套 manipulation。
     WARN video 目前全站沒有對應元素，是為了之後換成影片而預留，不是死碼 → KEEP-23。 */
  body.yuto-page-bg input,
  body.yuto-page-bg textarea,
  body.yuto-page-bg .news-gallery-frame img,
  body.yuto-page-bg .reference-image-angle,
  body.yuto-page-bg video,
  body.yuto-page-bg .news-filter-row,
  body.yuto-page-bg select,
  body.yuto-page-bg .text-input,
  body.yuto-page-bg .text-area,
  body.yuto-page-bg .time-list,
  body.yuto-page-bg .yuto-lightbox-image,
  body.yuto-page-bg .yuto-lightbox,
  body.yuto-page-bg .yuto-lightbox-panel {
    touch-action: auto;
  }
}
/* WHAT ▸ B Plan Payment Result Unified Panel v3：outer panel + order info card standard */

/* v105 cleanup: removed earlier duplicate copy of B Plan Payment UI Lab Sync v1; later identical active copy retained before Payment Result Scoped Spacing Standard. */

/* v105 cleanup: removed earlier duplicate copy of B Plan Payment Result Unified Panel v3 final mobile guard; later identical active copy retained. */

/* WARN [WALL-03] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-payment-lab-page {
  color: var(--text);
  line-height: 1.7;
}

body.yuto-payment-lab-page *,
body.yuto-payment-lab-page *::before,
body.yuto-payment-lab-page *::after {
  box-sizing: border-box;
}

body.yuto-payment-lab-page .is-hidden,
body.yuto-payment-lab-page [hidden] {
  display: none;
}

/* WARN [WALL-04] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-payment-lab-page {
  --payment-lab-wrap: 1040px;
  /* WHAT ▸ 付款系 Logo 的佔位高度與其到卡片的間距。
     WARN 這兩個值同時被【brand 自身】與【panel 的下方補償】使用，
          是卡片置中的計算基準 —— 改這裡兩邊會自動同步，不要各自寫死。 */
  --payment-lab-brand-height: 58px;
  --payment-lab-brand-gap: 18px;

  /* WHAT ▸ 訂單資訊列的高度基準。
     WHY  row-pad 決定每列上下內距（預設高度）；row-min 是每列最小高度，
          用來把卡片撐到合理高度，備註長時該列再自行往上撐。
     WARN 三頁共用 —— 調這裡三頁一起變，不要在各頁另寫。 */
  --payment-lab-row-pad: 18px;
  --payment-lab-row-min: 62px;
  --payment-lab-message-width: 660px;
  --payment-lab-brand-logo-width: 156px;
  --payment-lab-emotion-size: 118px;
  --payment-lab-result-emotion-size: clamp(252px, 22.5vw, 345px);
  --payment-lab-result-emotion-size-mobile: clamp(198px, 52vw, 264px);
  --payment-lab-surface-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  --payment-lab-glass-blur: 0px;
  --payment-lab-modal-backdrop-blur: 0px;
}

/* WHAT ▸ 付款系頁面的 main：撐滿 body 的剩餘空間並成為 flex 容器。
   WHY  .payment-wrap 的 flex 與其子元素的 margin: auto 置中，需要父層是 flex 容器
        且高度被撐開才會生效；main 若維持 block，wrap 拿不到高度，置中等於空轉。
   WARN 這是整條置中鏈的中間環節 —— body(flex column) → main(本條) → wrap(flex:1)
        → 首尾子元素 margin: auto。四層缺一都不會置中，不要改成 position 硬推。 */
body.yuto-payment-lab-page > main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.yuto-payment-lab-page .payment-wrap {
  width: min(var(--payment-lab-wrap), calc(100% - 48px));
  margin: 0 auto;
  /* WHY flex: 1 只填 header 與 footer 之間的剩餘空間；用 min-height: 100dvh 會連同
        頁首頁尾一起超過視窗高，把頁尾推出視窗外。 */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* WHAT ▸ 付款系版面的垂直定位：【以卡片組為中心】置中，Logo 掛在其上方固定間距。
   WHY  置中基準是 .payment-panel 本身，不是「Logo ＋ 卡片」整組 ——
        整組置中會讓卡片在內容矮時偏下（偏差 ＝ Logo 高 ＋ 間距 的一半）。
        做法：wrap 用 justify-content: center，再由 panel 的 margin-bottom
        補回「Logo 高 ＋ 間距」，使 Logo 佔的高度在上下兩側對稱抵銷。
   WHY  卡片因備註長短變高時，panel 往上下同時擴張、Logo 隨之上移，
        但 Logo 到卡片的距離恆為 --payment-lab-brand-gap。
   WARN Logo 不吃 margin-top: auto —— 給它 auto 會變回「整組置中」，
        卡片就會偏下，那正是本規則要修掉的行為。
   WARN 補償值必須等於 .payment-brand 的實際佔位（min-height ＋ margin-bottom）。
        改動 Logo 高度或間距時，兩處都要一起改，否則置中會歪。
   WARN 內容超高時 justify-content: center 會切頂 —— 由 wrap 的 padding 與
        本組的 margin 收合共同保護；不要改用絕對定位，那會脫離流、無法自動保護。 */
body.yuto-payment-lab-page .payment-wrap > .payment-panel {
  margin-bottom: calc(var(--payment-lab-brand-height) + var(--payment-lab-brand-gap));
}

body.yuto-payment-lab-page .payment-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--payment-lab-brand-height);
  margin-bottom: var(--payment-lab-brand-gap);
}

body.yuto-payment-lab-page .payment-brand-logo-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.yuto-payment-lab-page .payment-brand-logo {
  display: block;
  width: var(--payment-lab-brand-logo-width);
  max-width: min(42vw, var(--payment-lab-brand-logo-width));
  height: auto;
  border-radius: 0;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.28));
  -webkit-user-drag: none;
  user-select: none;
}

body.yuto-payment-lab-page .payment-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .78fr);
  gap: 18px;
  align-items: stretch;
  margin: 0;
  overflow: visible;
}

/* WHAT ▸ 付款左卡：內容由上往下排，多出來的空間【平均分配到各區之間】。
   WHY  左右兩卡由 .payment-panel 的 align-items: stretch 保持等高；
        右卡（訂單資訊）會因備註長短而變高，左卡跟著變高後多出來的空間
        若不分配，內容會全部擠在上方、下半留白。
   WARN 子元素一律只用 margin-top（.payment-title 為 margin: 0），
        沒有 margin-bottom —— 改動子元素邊距前要先確認，否則 flex 下不會合併。 */
body.yuto-payment-lab-page .payment-left {
  justify-content: space-between;
}

body.yuto-payment-lab-page .payment-right {
  min-width: 0;
  display: grid;
  align-self: stretch;
}

/* WHAT ▸ 付款系卡片：表面交給 .yuto-surface-card，這裡只留版面與過場。 */
body.yuto-payment-lab-page .payment-left,
body.yuto-payment-lab-page .payment-right-card,
body.yuto-payment-lab-page .payment-card,
body.yuto-payment-lab-page .payment-loading-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--payment-lab-surface-shadow);
  position: relative;
  min-width: 0;
  padding: 24px;
  color: var(--text);
  transition:
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease;
}

/* WHAT ▸ 付款頁取消對話框：表面交給 .yuto-surface-overlay，這裡只留版面。 */
body.yuto-payment-lab-page .payment-cancel-dialog {
  position: relative;
  min-width: 0;
  color: var(--text);
  transition:
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease;
}

/* WARN 這組 background / border-color / box-shadow 看似被 :not(.is-hidden) 蓋掉，但它是 .payment-card 與 .payment-loading-card【共用】的 —— 那兩個框沒被蓋，需要這些屬性。不可刪 → RULE-33 */

body.yuto-payment-lab-page .payment-left,
body.yuto-payment-lab-page .payment-right-card {
  height: 100%;
  /* WHY 改 flex 直欄，讓 .payment-rows 用 flex:1 吃到標題以外的剩餘高度。 */
  display: flex;
  flex-direction: column;
}

body.yuto-payment-lab-page .payment-title {
  margin: 0;
  color: var(--text);
  font-size: var(--yuto-type-page-title-size);
  font-weight: var(--yuto-type-page-title-weight);
  line-height: var(--yuto-type-page-title-line);
  letter-spacing: -.04em;
  text-wrap: balance;
}

body.yuto-payment-lab-page .payment-desc {
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: var(--yuto-type-body-size);
  font-weight: var(--yuto-type-body-weight);
  line-height: var(--yuto-type-body-line);
  white-space: pre-line;
}

body.yuto-payment-lab-page .payment-minor,
body.yuto-payment-lab-page .payment-error-box {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.14);
  color: var(--text-soft);
  font-size: var(--yuto-type-meta-size);
  line-height: 1.7;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background / color）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-payment-lab-page .payment-error-box {
  border-color: rgba(255, 172, 192, 0.26);
  color: #ffe0e6;
  background: rgba(90, 20, 42, 0.2);
}

body.yuto-payment-lab-page .payment-left > .payment-actions,
body.yuto-payment-lab-page .payment-left > .payment-action-area {
  align-items: stretch;
}

body.yuto-payment-lab-page .yuto-btn--payment.is-secondary {
  opacity: .95;
}

body.yuto-payment-lab-page .payment-card-title {
  margin: 0 0 14px;
  color: var(--text);
  font-size: var(--yuto-type-section-title-size-sm);
  font-weight: var(--yuto-type-section-title-weight);
  line-height: var(--yuto-type-section-title-line);
}

/* WHAT ▸ 訂單資訊列容器：撐滿右卡並讓各列平均分配剩餘空間。
   WHY  右卡靠 align-self: stretch 與左卡等高，但列本身不會撐開，
        內容少時全部靠上、下方留一大片空白。
        grid-auto-rows 給最小高度並允許 auto 增長：列數固定時高度平均，
        備註變長時該列以內容為準往上撐，卡片整體跟著變高。
   WARN 三頁（payment / payment-result / booking-result）共用本規則。 */
body.yuto-payment-lab-page .payment-rows {
  display: grid;
  gap: 0;
  flex: 1 1 auto;
  align-content: stretch;
  grid-auto-rows: minmax(var(--payment-lab-row-min), auto);
}

body.yuto-payment-lab-page .payment-row {
  display: grid;
  grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: var(--payment-lab-row-pad) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.yuto-payment-lab-page .payment-row:first-child {
  border-top: 0;
}

body.yuto-payment-lab-page .payment-label,
body.yuto-payment-lab-page .payment-row > span {
  color: rgba(200, 203, 218, 0.86);
  font-size: var(--yuto-type-meta-size);
  line-height: 1.6;
}

body.yuto-payment-lab-page .payment-value,
body.yuto-payment-lab-page .payment-row > strong {
  color: var(--text);
  font-size: var(--yuto-type-body-size-sm);
  font-weight: 800;
  line-height: 1.62;
  text-align: right;
  /* WHY 備註等自由輸入欄位可能是無空格長字串（例如連打 sdadsdads…），
        瀏覽器找不到斷點就會整行溢出卡片。anywhere 允許在任意字元換行。
     WARN 格線已用 minmax(0, 1fr) 允許欄位縮小，但那只解決「欄位不被撐爆」，
          不會讓沒有斷點的字串自己換行 —— 兩者都要有。 */
  overflow-wrap: anywhere;
}

body.yuto-payment-lab-page .payment-visual {
  display: grid;
  place-items: center;
  width: var(--payment-lab-emotion-size);
  min-height: var(--payment-lab-emotion-size);
  margin: 0 auto 18px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 2.2rem;
  font-weight: 950;
}

body.yuto-payment-lab-page.is-result .payment-actions {
  margin-top: 22px;
}

body.yuto-payment-lab-page .payment-card {
  width: min(var(--payment-lab-message-width), calc(100% - 40px));
  margin: max(120px, env(safe-area-inset-top)) auto max(56px, env(safe-area-inset-bottom));
  text-align: center;
}

body.yuto-payment-lab-page .payment-card .payment-actions,
body.yuto-payment-lab-page .payment-card .payment-action-area {
  justify-content: center;
}

body.yuto-payment-lab-page .payment-card .yuto-btn--payment,
body.yuto-booking-lab-page .payment-card .yuto-btn--payment {
  flex-basis: 320px;
}

body.yuto-payment-lab-page .payment-loading {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 48px 24px;
  text-align: center;
}

body.yuto-payment-lab-page .payment-loading-card {
  width: min(560px, 100%);
  margin: 0 auto;
}

/* WHY  ::before 上的 overflow 與 isolation 只有這裡宣告，共用元件不帶這兩個屬性。
   WARN 這兩個屬性會影響裁切與堆疊脈絡，要動必須實機驗證，不能只看回歸零差異。 */
body.yuto-payment-lab-page .payment-spinner::before{
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 760px) {
  body.yuto-payment-lab-page {
    --payment-lab-brand-logo-width: 132px;
    --payment-lab-emotion-size: 92px;
  }

  body.yuto-payment-lab-page .payment-wrap {
    width: min(100% - 24px, var(--payment-lab-wrap));
  }

  body.yuto-payment-lab-page .payment-brand {
    min-height: 44px;
    margin-bottom: 12px;
  }

  body.yuto-payment-lab-page .payment-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.yuto-payment-lab-page .payment-right {
    display: block;
  }

  body.yuto-payment-lab-page .payment-left,
  body.yuto-payment-lab-page .payment-right-card {
    height: auto;
  }

  body.yuto-payment-lab-page .payment-left,
  body.yuto-payment-lab-page .payment-right-card,
  body.yuto-payment-lab-page .payment-card,
  body.yuto-payment-lab-page .payment-loading-card,
  body.yuto-payment-lab-page .payment-cancel-dialog {
    padding: 18px;
    border-radius: 20px;
  }

  body.yuto-payment-lab-page .yuto-btn--payment,
  body.yuto-payment-lab-page .payment-card .yuto-btn--payment {
    margin-inline: auto;
  }

  /* 【遷移 v47・付款】手機偏寬：付款按鈕在手機把 --40 提升到 50 號圖，
     讓按鈕天生偏寬、接近滿版但等比不變形（--50/--75 維持）。單一出處。 */
  body.yuto-payment-lab-page .yuto-btn--payment.yuto-btn--40,
  body.yuto-booking-lab-page .yuto-btn--payment.yuto-btn--40 {
    --yuto-btn-src: url("../images/blue_button_50.png");
    --yuto-btn-ratio: 418 / 56;
  }

  body.yuto-payment-lab-page .payment-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }

  body.yuto-payment-lab-page .payment-value,
  body.yuto-payment-lab-page .payment-row > strong {
    text-align: left;
  }

  /* WARN 靠【位置在後】壓過同選擇器的前一份（padding）。
       合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
  body.yuto-payment-lab-page .payment-card {
    width: min(100% - 24px, 560px);
    margin-top: max(42px, env(safe-area-inset-top));
    margin-bottom: max(28px, env(safe-area-inset-bottom));
    padding: 22px;
  }

  body.yuto-payment-lab-page .payment-title {
    font-size: clamp(2.05rem, 10vw, 2.7rem);
  }

  body.yuto-payment-lab-page .payment-loading-card .payment-title {
    font-size: clamp(1.7rem, 8vw, 2.06rem);
    line-height: 1.14;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  body.yuto-payment-lab-page .payment-wrap {
    width: min(980px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }

  body.yuto-payment-lab-page .payment-panel {
    grid-template-columns: minmax(0, 1.5fr) minmax(250px, .7fr);
  }

  body.yuto-payment-lab-page .payment-left,
  body.yuto-payment-lab-page .payment-right-card {
    padding: 16px;
  }

  body.yuto-payment-lab-page .payment-title {
    font-size: clamp(1.65rem, 4vw, 2.25rem);
  }

  .yuto-admin-page {
  padding: 20px 0 34px;

    padding-top: 28px !important;
  }
}

@media (max-width: 700px) {
  body.yuto-index-page .section-card { padding: 20px; border-radius: 22px; margin-bottom: 16px; }

  body.yuto-index-page .section-head h2 { line-height: 1.35; }

  body.yuto-index-page .section-head p { font-size: .94rem; line-height: 1.65; }
}

@media (max-width: 420px) {
  body.yuto-index-page .section-card { padding: 18px; }
}
body.yuto-index-page .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #f5f2ff;
  background: rgba(159, 124, 255, 0.16);
  border: 1px solid rgba(159, 124, 255, 0.28);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.yuto-index-page .section-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

body.yuto-index-page .section-head p {
  margin: 8px 0 0;
  color: var(--text-soft);
}

/* WHAT ▸ 共用 .fade-up（全站唯一來源，不要各頁再寫一份） */
body.yuto-web-lab-page .fade-up {
  opacity: 0;
  transform: translateY(18px);
  animation: yutoFadeUpSmooth 0.7s var(--yuto-ease-out) forwards;
}

/* WHAT ▸ 共用 .delay-N 階梯延遲（全站唯一來源） */
body.yuto-web-lab-page .delay-1 { animation-delay: 0.06s; }

body.yuto-web-lab-page .delay-2 { animation-delay: 0.12s; }

body.yuto-web-lab-page .delay-3 { animation-delay: 0.18s; }

body.yuto-web-lab-page .delay-4 { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  /* WHY 減少動態效果時停用 fade-up 進場動畫（全站共用，不要各頁再寫一份） */
  body.yuto-web-lab-page .fade-up {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* WHAT ▸ Index Profile / Reference / Contact Content Module v1 */
body.yuto-index-page * {
  box-sizing: border-box;
}

body.yuto-index-page {
  --card: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.12);
  --text: #f6f7fb;
  --text-soft: #c8cbda;
  --primary: #9f7cff;
  --primary-hover: #b59cff;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --container: 1200px;

  color: var(--text);
}

body.yuto-index-page a {
  color: inherit;
  text-decoration: none;
}

body.yuto-index-page .container {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}

body.yuto-index-page .reference-image-angle {
  margin-top: 12px;
  max-height: 360px;
}

/* WHAT ▸ Homepage Web Lab 004: Long Page Motif Background Scene Module */
/* WARN [WALL-06] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-web-lab-page {
  background-color: var(--yuto-lab-bg-edge);
}

body.yuto-web-lab-page main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.yuto-web-lab-page main::before,
body.yuto-web-lab-page main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.yuto-web-lab-page main::before {
  z-index: 0;
}

body.yuto-web-lab-page main::after {
  z-index: 2;
  mix-blend-mode: normal;
}

body.yuto-web-lab-page main > section,
body.yuto-web-lab-page main > .container {
  position: relative;
  z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
  :root {
    --yuto-knife-cursor: url("../images/knife_cursor_48.png") 6 6, auto;
    --yuto-knife-cursor-pointer: url("../images/knife_cursor_48.png") 6 6, pointer;
    --yuto-knife-cursor-layer: 100000;
    --yuto-knife-slash-layer: 99999;
    --yuto-middle-scroll-layer: 100001;
  }

  body.yuto-web-lab-page,
  body.yuto-web-lab-page main,
  body.yuto-web-lab-page .yuto-home-bg-scene {
    cursor: var(--yuto-knife-cursor);
  }

  body.yuto-web-lab-page a,
  body.yuto-web-lab-page button,
  body.yuto-web-lab-page [role="button"],
  body.yuto-web-lab-page summary,
  body.yuto-web-lab-page .yuto-btn--ui,
  body.yuto-web-lab-page .yuto-bg-motif {
    cursor: var(--yuto-knife-cursor-pointer);
  }

  body.yuto-web-lab-page button:disabled,
  body.yuto-web-lab-page [aria-disabled="true"],
  body.yuto-web-lab-page .is-disabled {
    cursor: not-allowed;
  }

  /* Fake cursor is enabled by JS only when pointer is fine.
     Native cursor remains the fallback if JS fails.
     V754/V756 owns native cursor suppression at one all-Web-Lab source instead of
     page-specific payment/booking force rules. During same-tab Lab navigation,
     route handoff still hides the native cursor before the browser leaves. */
  html.is-yuto-fake-cursor body.yuto-web-lab-page,
  html.is-yuto-fake-cursor body.yuto-web-lab-page *,
  html.is-yuto-fake-cursor[data-yuto-knife-cursor="enabled"] body.yuto-web-lab-page,
  html.is-yuto-fake-cursor[data-yuto-knife-cursor="enabled"] body.yuto-web-lab-page *,
  html.is-yuto-route-cursor-handoff[data-yuto-knife-cursor="enabled"],
  html.is-yuto-route-cursor-handoff[data-yuto-knife-cursor="enabled"] body.yuto-web-lab-page,
  html.is-yuto-route-cursor-handoff[data-yuto-knife-cursor="enabled"] body.yuto-web-lab-page *,
  html.is-yuto-middle-scroll-active body.yuto-web-lab-page,
  html.is-yuto-middle-scroll-active body.yuto-web-lab-page * {
    cursor: none;
  }
}
body.yuto-web-lab-page .yuto-home-news-no-image {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: var(--yuto-news-card-media-height);
  background:
    radial-gradient(circle at 18% 20%, rgba(77, 226, 197, 0.14), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(159, 124, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

body.yuto-web-lab-page .yuto-home-news-no-image::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 24% 18%, rgba(77, 226, 197, 0.13), transparent 32%),
    radial-gradient(circle at 78% 78%, rgba(159, 124, 255, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  opacity: .9;
}

body.yuto-web-lab-page .yuto-home-news-no-image span {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .yuto-knife-slash,
  .yuto-knife-hover-sheen::before,
  .yuto-knife-fake-cursor {
    animation: none;
    transition: none;
  }

  .yuto-knife-slash {
    display: none;
  }

  html.is-yuto-fake-cursor .yuto-knife-fake-cursor {
    display: none;
  }

  /* 🛡️ 【BUGFIX 2026-07-12】把原生游標【還回來】—— 這條是安全網，不可移除。
     ───────────────────────────────────────────────────────────────────────
     災情：兩位使用者回報「看不到小刀」與「無法點擊超連結」。
     根因：上面那條把假刀 display:none，但 `cursor: none` 掛在
           @media (hover: hover) and (pointer: fine) 裡、【不受本區影響】→
           原生游標被藏起來、假刀也被藏起來 → 螢幕上【完全沒有游標】。
     修法：源頭已在 index-web-lab.js 的 canUseKnifeCursor() 擋掉
           （reduced-motion 不啟動假刀）。本條是【第二道防線】，
           處理「使用者開著網頁才改系統設定」的情況（JS 不會重跑）。
     結果：這些使用者仍然【看得到刀】—— 只是換成 CSS 圖片游標，沒有動畫與刀光。
     ─────────────────────────────────────────────────────────────────────── */
  html.is-yuto-fake-cursor body.yuto-web-lab-page,
  html.is-yuto-fake-cursor body.yuto-web-lab-page *,
  html.is-yuto-fake-cursor[data-yuto-knife-cursor="enabled"] body.yuto-web-lab-page,
  html.is-yuto-fake-cursor[data-yuto-knife-cursor="enabled"] body.yuto-web-lab-page * {
    cursor: var(--yuto-knife-cursor, auto);
  }

  html.is-yuto-fake-cursor body.yuto-web-lab-page a,
  html.is-yuto-fake-cursor body.yuto-web-lab-page button,
  html.is-yuto-fake-cursor body.yuto-web-lab-page [role="button"],
  html.is-yuto-fake-cursor body.yuto-web-lab-page summary,
  html.is-yuto-fake-cursor body.yuto-web-lab-page .yuto-btn,
  html.is-yuto-fake-cursor[data-yuto-knife-cursor="enabled"] body.yuto-web-lab-page a,
  html.is-yuto-fake-cursor[data-yuto-knife-cursor="enabled"] body.yuto-web-lab-page button,
  html.is-yuto-fake-cursor[data-yuto-knife-cursor="enabled"] body.yuto-web-lab-page [role="button"],
  html.is-yuto-fake-cursor[data-yuto-knife-cursor="enabled"] body.yuto-web-lab-page .yuto-btn {
    cursor: var(--yuto-knife-cursor-pointer, pointer);
  }

  html.is-yuto-fake-cursor body.yuto-web-lab-page input,
  html.is-yuto-fake-cursor body.yuto-web-lab-page textarea,
  html.is-yuto-fake-cursor body.yuto-web-lab-page [contenteditable="true"] {
    cursor: text;
  }
}

@media (min-width: 901px) {
  html:has(body.yuto-web-lab-page),
  body.yuto-web-lab-page {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html:has(body.yuto-web-lab-page)::-webkit-scrollbar,
  body.yuto-web-lab-page::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  body.yuto-web-lab-page {
    --yuto-hero-scroll-height: clamp(650px, 61vw, 940px);
    --yuto-hero-scroll-image-size: min(84vw, 980px);
    --yuto-hero-cue-opacity: 1;
    --yuto-hero-cue-y: 0px;
  }

  @keyframes yutoHeroCloudCueFloat {
    0%, 100% {
      transform: translateY(-3px);
      opacity: .38;
    }
    50% {
      transform: translateY(7px);
      opacity: .74;
    }
  }
}
/* WARN [WALL-10] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-web-lab-page {
  --yuto-gensen-jp-final-font: 'Yuto GenSenRounded JP Final', 'Noto Sans TC', 'Microsoft JhengHei', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* WHAT ▸【全站字級體系】命名：--yuto-type-<角色>-<size|line|weight>
        角色由大到小：page-title → section-title → card-title → body → meta → 元件專屬。
   WHY  每個角色是【三件套】(size / line / weight)，成套才能讓新元件直接取用，
        不必回頭寫死數字。
   WARN 本區成員【即使目前 0 引用也不得刪除】—— 體系的完整性本身就是價值。
        BATCH-01 曾以「三方 0 引用」刪掉 button-size / -size-sm / -weight，
        導致 button-size-xs 變成無定義引用、消息頁分頁鈕字級失控回瀏覽器預設。
        判定孤兒前請先確認該變數是否屬於本體系（見 DECISIONS §4 KEEP 表）。 */
  --yuto-type-font-family: var(--yuto-gensen-jp-final-font);

  /* 頁面主標 */
  --yuto-type-page-title-size: clamp(2rem, 4vw, 3.4rem);
  --yuto-type-page-title-line: 1.12;
  --yuto-type-page-title-weight: 900;

  /* 區塊標題 */
  --yuto-type-section-title-size-sm: 1.38rem;
  --yuto-type-section-title-line: 1.22;
  --yuto-type-section-title-weight: 900;

  /* 卡片標題 */
  --yuto-type-card-title-weight: 700;

  /* 內文 */
  --yuto-type-body-size: .96rem;
  --yuto-type-body-size-sm: .9rem;
  --yuto-type-body-line: 1.68;
  --yuto-type-body-weight: 500;

  /* 次要資訊 */
  --yuto-type-meta-size: .82rem;
  --yuto-type-meta-line: 1.6;
  --yuto-type-meta-weight: 500;

  /* 元件專屬 */
  --yuto-type-ui-weight: 700;
  --yuto-type-pager-size: 13px;
  --yuto-type-pager-weight: 900;
  /* WHY 分頁鈕字級跟著 pager 走，兩者同步才不會走散 */
  --yuto-type-button-size-xs: var(--yuto-type-pager-size);
  --yuto-type-persona-body-size: clamp(1.04rem, 1.18vw, 1.20rem);
  --yuto-type-persona-body-line: 1.86;
  --yuto-type-persona-body-weight: 760;

  --yuto-object-pager-cap: 5.25em;
  --yuto-object-pager-height: 3.15em;
  --yuto-object-pager-padding-x: .7em;
  --yuto-object-pager-bamboo-width: .9em;
  --yuto-object-pager-bamboo-height: 1.55em;
  font-family: var(--yuto-type-font-family);
  font-weight: var(--yuto-type-body-weight);
}

/* WHAT ▸ 全站字體：這些元件直接指定站上字型，不靠繼承。
   WHY  表單控制項與按鈕不繼承 font-family，必須逐個指定；其餘一併掛在這裡，
        字型系統本身定義在上方 body.yuto-web-lab-page。 */
body.yuto-web-lab-page .yuto-site-menu a,
body.yuto-web-lab-page .yuto-site-footer,
body.yuto-web-lab-page .yuto-footer-links a,
body.yuto-web-lab-page .yuto-btn--ui,
body.yuto-web-lab-page .yuto-news-card-title,
body.yuto-web-lab-page .yuto-news-card-summary,
body.yuto-web-lab-page .news-status-message,
body.yuto-web-lab-page .tag,
body.yuto-web-lab-page .service-card,
body.yuto-web-lab-page .field-label,
body.yuto-web-lab-page .yuto-bamboo-link,
body.yuto-web-lab-page .news-action-link,
body.yuto-web-lab-page .link-card,
body.yuto-web-lab-page .link-url,
body.yuto-web-lab-page .pager-btn,
body.yuto-web-lab-page .news-filter-btn,
body.yuto-web-lab-page .yuto-news-card-content,
body.yuto-web-lab-page .persona-typewriter,
body.yuto-web-lab-page .persona-role-static-copy-panel,
body.yuto-web-lab-page .yuto-policy-lead {
  font-family: var(--yuto-type-font-family);
}

body.yuto-index-page.yuto-web-lab-page .section-head h2 {
  font-weight: var(--yuto-type-section-title-weight);
}

body.yuto-web-lab-page .yuto-site-menu a,
body.yuto-web-lab-page .yuto-btn--ui {
  font-weight: var(--yuto-type-ui-weight);
}

body.yuto-web-lab-page .yuto-site-footer {
  font-weight: var(--yuto-type-body-weight);
}

@media (max-width: 700px) {
  body.yuto-web-lab-page {
    --yuto-type-pager-size: 11.5px;
    --yuto-object-pager-cap: 4.75em;
    --yuto-object-pager-height: 2.95em;
    --yuto-object-pager-padding-x: .34em;
    --yuto-object-pager-bamboo-width: .72em;
  }
}
/* 未來新增材質範例（把圖放進 images/textures/ 後，取消註解並改名）：
[data-yuto-bg-texture="washi-05"] {
  --yuto-bg-texture-image: url("../images/textures/yuto-washi-05.webp");
}
*/

body.yuto-web-lab-page.yuto-has-bg-texture {
  /* 【材質登記表 v1】圖片來源改由 <body data-yuto-bg-texture> 提供，此處不再寫死 url() */
  --yuto-bg-texture-opacity: .75;
  --yuto-bg-texture-size: 520px 520px;
  --yuto-bg-texture-blend: multiply;
  --yuto-bg-texture-position: top left;
}

body.yuto-web-lab-page main > .yuto-bg-texture-layer {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background-image: var(--yuto-bg-texture-image);
  background-size: var(--yuto-bg-texture-size);
  background-repeat: repeat;
  background-position: var(--yuto-bg-texture-position);
  opacity: var(--yuto-bg-texture-opacity);
  mix-blend-mode: var(--yuto-bg-texture-blend);
  transform: translateZ(0);
}

body.yuto-web-lab-page.yuto-has-bg-texture main > .yuto-bg-texture-layer {
  display: block;
}

body.yuto-index-page.yuto-web-lab-page {
  --yuto-home-lab-bg-stage-height: 3600px;
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-bg-scene,
body.yuto-index-page.yuto-web-lab-page main > .yuto-bg-texture-layer {
  inset: 0 auto auto 0;
  width: 100%;
  min-height: 100%;
  height: max(100%, var(--yuto-home-lab-bg-stage-height, 3600px));
}

/* ---------- Middle-click scroll grab image visual ---------- */
/* WARN [WALL-11] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-web-lab-page {
  --yuto-middle-scroll-image: url("../images/yuto-middle-scroll-grab.png");
  --yuto-middle-scroll-size: clamp(43px, 3.4vw, 52px);
}

body.yuto-web-lab-page .yuto-middle-scroll-ui {
  position: fixed;
  z-index: var(--yuto-middle-scroll-layer, 100001);
  place-items: center;
  transform: translate(-50%, -50%);

  width: var(--yuto-middle-scroll-size);
  height: var(--yuto-middle-scroll-size);
  display: none;
  pointer-events: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: transparent;
  filter:
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 10px rgba(255, 188, 141, 0.1));
}

body.yuto-web-lab-page .yuto-middle-scroll-ui::before {
  font-size: 1.7rem;
  font-weight: 900;

  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--yuto-middle-scroll-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateZ(0);
}

body.yuto-web-lab-page .yuto-middle-scroll-ui::after {
  animation: yutoMiddleScrollPulse 1.1s ease-in-out infinite;

  content: "";
  position: absolute;
  inset: 14%;
  z-index: -1;
  border-radius: 42%;
  border: 1px solid rgba(255, 212, 181, 0.26);
  box-shadow:
    0 0 18px rgba(255, 190, 150, 0.08),
    0 0 28px rgba(124, 241, 255, 0.045);
}

body.yuto-web-lab-page .yuto-middle-scroll-ui.is-active {
  display: block;
}

/* V754: middle-scroll cursor ownership is handled once in the unified cursor layer above. */

/* WARN [WALL-12] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-web-lab-page {
  --yuto-hero-soft-crop-top: clamp(104px, 10vh, 148px);
  --yuto-hero-soft-crop-bottom: clamp(132px, 15vh, 210px);
  --yuto-hero-soft-crop-top-alpha: 1;
  --yuto-hero-soft-crop-bottom-alpha: 0;
  --yuto-hero-soft-crop-y: 0px;
}

body.yuto-index-page.yuto-web-lab-page,
body.yuto-payment-lab-page.yuto-web-lab-page {
  --yuto-lab-bg-314bad-deep-vivid: #0B1A4C;
  background-color: var(--yuto-lab-bg-314bad-deep-vivid);
}

body.yuto-index-page.yuto-web-lab-page main,
body.yuto-payment-lab-page.yuto-web-lab-page main {
  background-color: var(--yuto-lab-bg-314bad-deep-vivid);
  background-image: none;
}

body.yuto-index-page.yuto-web-lab-page main::before,
body.yuto-index-page.yuto-web-lab-page main::after,
body.yuto-payment-lab-page.yuto-web-lab-page main::before,
body.yuto-payment-lab-page.yuto-web-lab-page main::after {
  background-image: none;
  opacity: 0;
}

body.yuto-payment-lab-page.yuto-web-lab-page {
  --yuto-payment-lab-bg-stage-height: 4200px;
}

body.yuto-payment-lab-page.yuto-has-bg-texture .yuto-home-bg-scene,
body.yuto-payment-lab-page.yuto-has-bg-texture main > .yuto-bg-texture-layer {
  inset: 0 auto auto 0;
  width: 100%;
  min-height: 100%;
  height: max(100%, var(--yuto-payment-lab-bg-stage-height, 4200px));
}

body.yuto-payment-lab-page.yuto-web-lab-page main > section {
  position: relative;
  z-index: 3;
}

@media (min-width: 901px) {
  @supports ((mask-image: radial-gradient(circle at 50% 50%, transparent 0 10px, #000 11px)) or (-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 10px, #000 11px))) {
  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card {
    --cut-tl: radial-gradient(circle at calc(0% - var(--yuto-links-joint-gap-half)) calc(0% - var(--yuto-links-joint-gap-half)), transparent 0 var(--yuto-links-joint-cut-radius), #000 calc(var(--yuto-links-joint-cut-radius) + 1px));
    --cut-tr: radial-gradient(circle at calc(100% + var(--yuto-links-joint-gap-half)) calc(0% - var(--yuto-links-joint-gap-half)), transparent 0 var(--yuto-links-joint-cut-radius), #000 calc(var(--yuto-links-joint-cut-radius) + 1px));
    --cut-bl: radial-gradient(circle at calc(0% - var(--yuto-links-joint-gap-half)) calc(100% + var(--yuto-links-joint-gap-half)), transparent 0 var(--yuto-links-joint-cut-radius), #000 calc(var(--yuto-links-joint-cut-radius) + 1px));
    --cut-br: radial-gradient(circle at calc(100% + var(--yuto-links-joint-gap-half)) calc(100% + var(--yuto-links-joint-gap-half)), transparent 0 var(--yuto-links-joint-cut-radius), #000 calc(var(--yuto-links-joint-cut-radius) + 1px));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /* WHAT ▸ 拼接組的切角指派：依【總卡數的奇偶】自動判定，不寫死第幾張。
     WHY  原本寫死 nth-of-type(1)~(9)。卡片一增減，第 7/8 該不該保留外角、哪一張是落單卡，
          全部都要回來重算 —— 那是每次新增卡片都會踩的坑（2026-07-30 新增第 10 張時確認）。
     WHAT ▸ 版面規則：2 欄格線，奇數位＝左欄、偶數位＝右欄。
          · 總卡數【偶數】→ 全部進拼接組，沒有落單卡
          · 總卡數【奇數】→ 前 N-1 張進拼接組，最後一張落單（四角全圓、不參與拼接）
     WHY  奇偶偵測靠 :first-of-type:nth-last-of-type(even) —— 第一張同時是「倒數第 N 張」，
          所以它命中 even 就代表總數是偶數。再用 ~ 把判定傳給後面的兄弟。
     WARN 家徽（.links-grid-kamon）的【數量】無法用這招自動化：每個接縫要自己的 grid-row
          與延遲值，而延遲間距不規則（0.18→0.27→0.33→0.39），公式算不出來。
          【新增一排就要手動加一個 span ＋ 一條 is-joint-N 規則。】
     WARN .links-grid-kamon 是 <span>，nth-of-type 依元素型別計數，所以它們不會干擾
          .link-card（<article>）的序號 —— 家徽放在卡片之間也不影響。 */

  /* 欄位基準：左欄（奇數位）切右側兩角、右欄（偶數位）切左側兩角 */
  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:nth-of-type(odd) {
    -webkit-mask-image: var(--cut-tr), var(--cut-br);
    mask-image: var(--cut-tr), var(--cut-br);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:nth-of-type(even) {
    -webkit-mask-image: var(--cut-tl), var(--cut-bl);
    mask-image: var(--cut-tl), var(--cut-bl);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  /* 第一排：上緣是拼接組外緣，不切 */
  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:nth-of-type(1) {
    -webkit-mask-image: var(--cut-br);
    mask-image: var(--cut-br);
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:nth-of-type(2) {
    -webkit-mask-image: var(--cut-bl);
    mask-image: var(--cut-bl);
  }

  /* 最後一排（下緣是外緣，不切）── 總數偶數：倒數第 2、倒數第 1 */
  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(even) ~ .link-card:nth-last-of-type(2) {
    -webkit-mask-image: var(--cut-tr);
    mask-image: var(--cut-tr);
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(even) ~ .link-card:nth-last-of-type(1) {
    -webkit-mask-image: var(--cut-tl);
    mask-image: var(--cut-tl);
  }

  /* 最後一排 ── 總數奇數：倒數第 3、倒數第 2（最後一張是落單卡，不算在拼接組裡） */
  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(odd) ~ .link-card:nth-last-of-type(3) {
    -webkit-mask-image: var(--cut-tr);
    mask-image: var(--cut-tr);
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(odd) ~ .link-card:nth-last-of-type(2) {
    -webkit-mask-image: var(--cut-tl);
    mask-image: var(--cut-tl);
  }

  /* 落單卡（只在總數奇數時存在）：不參與拼接，四角全圓 22px */
  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(odd) ~ .link-card:last-of-type {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 22px;
  }
  }
}
body.yuto-persona-lab-page.yuto-web-lab-page
  .profile-section:not(.persona-intro-lab-section):not(.persona-role-lab-section)
  > .container
  > :is(.persona-section-shell, .section-card) {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background / box-shadow）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-persona-lab-page.yuto-web-lab-page
  .profile-section:not(.persona-intro-lab-section):not(.persona-role-lab-section)
  > .container
  > :is(.persona-section-shell, .section-card):hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* WARN [WALL-26] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-web-lab-page {
  --yuto-bamboo-gap-base: clamp(3px, .42vw, 5px);
  --yuto-bamboo-inline-base: clamp(15px, 1.78vw, 24px);
  --yuto-bamboo-block-base: clamp(41px, 4.05vw, 56px);
  --yuto-bamboo-scale-large: 1.08;
  --yuto-bamboo-scale-standard: 1;
  --yuto-bamboo-scale-small: .9;
  --yuto-bamboo-scale-mini: .82;
}

@media (max-width: 900px) {
  body.yuto-web-lab-page {
    --yuto-bamboo-gap-base: 4px;
    --yuto-bamboo-inline-base: 12px;
    --yuto-bamboo-block-base: 36px;
    --yuto-bamboo-scale-large: 1;
    --yuto-bamboo-scale-standard: .95;
    --yuto-bamboo-scale-small: .86;
    --yuto-bamboo-scale-mini: .78;
  }
}

@media (max-width: 700px) {
  body.yuto-index-page.yuto-web-lab-page .home-contact-section,
  body.yuto-index-page.yuto-web-lab-page .home-contact-unframed,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-grid.contact-grid,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-card.contact-card,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail,
  body.yuto-index-page.yuto-web-lab-page .yuto-site-footer {
    outline: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
    background-clip: padding-box;
  }

  body.yuto-index-page.yuto-web-lab-page .home-contact-section::before,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section::after,
  body.yuto-index-page.yuto-web-lab-page .home-contact-unframed::before,
  body.yuto-index-page.yuto-web-lab-page .home-contact-unframed::after,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-card.contact-card::before,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-card.contact-card::after,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail::before,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail::after,
  body.yuto-index-page.yuto-web-lab-page .yuto-site-footer::before,
  body.yuto-index-page.yuto-web-lab-page .yuto-site-footer::after {
    content: none;
    display: none;
    background: none;
    box-shadow: none;
  }

  /* Restore Contact/Footer from the v031 diagnostic if any previous test cache still affected it. */
  body.yuto-index-page.yuto-web-lab-page .home-contact-section,
  body.yuto-index-page.yuto-web-lab-page .home-contact-unframed,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-grid.contact-grid,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-card.contact-card,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .copy-mail-btn,
  body.yuto-index-page.yuto-web-lab-page .yuto-site-footer {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  body.yuto-index-page.yuto-web-lab-page::before,
  body.yuto-index-page.yuto-web-lab-page::after,
  body.yuto-index-page.yuto-web-lab-page main::before,
  body.yuto-index-page.yuto-web-lab-page main::after,
  body.yuto-index-page.yuto-web-lab-page .yuto-home-bg-scene::before,
  body.yuto-index-page.yuto-web-lab-page .yuto-home-bg-scene::after,
  body.yuto-index-page.yuto-web-lab-page .yuto-bg-texture-layer::before,
  body.yuto-index-page.yuto-web-lab-page .yuto-bg-texture-layer::after {
    content: none;
    display: none;
    border: 0;
    box-shadow: none;
    background: none;
  }

  body.yuto-index-page.yuto-web-lab-page main,
  body.yuto-index-page.yuto-web-lab-page .yuto-page-bg,
  body.yuto-index-page.yuto-web-lab-page .yuto-home-bg-scene,
  body.yuto-index-page.yuto-web-lab-page .yuto-bg-texture-layer {
    border: 0;
    outline: 0;
    box-shadow: none;
  }

  /* Mobile background/end seam test:
     Extend the approved texture/motif stage and reduce only the empty end-gap before footer.
     This does not change Contact card internal spacing/width/height. */

  /* WHAT ▸ 可點元素清單：手機上關掉點擊高亮、長按選單與文字選取。
     WHY  前三項 a / button / [role="button"] 是通則，接住絕大多數元素；
          其餘具名 class 只補通則接不到的（自己掛 click 的 div、JS 產生的元件）。
     WARN 這份清單在本檔出現兩次（本條與下一條的後代選擇器），兩份必須同步。
     WARN 全站共 8 份同性質清單，散在 4 個檔案 —— 主表在
          DECISIONS.md〈可點元素清單主表〉。要新增元件請先看主表。 */
  body.yuto-web-lab-page :is(
    a,
    button,
    [role="button"],
    summary,
    .yuto-bamboo-link,
    .yuto-btn--ui,
    .yuto-slice-pager-btn,
    .news-filter-btn,
    .pager-btn,
    .news-action-link,
    .yuto-news-card,
    .yuto-news-card-button,
    .link-card,
    .copy-mail-btn,
    .booking-lab-mode-button,
    .service-card,
    .select-trigger,
    .calendar-nav button,
    .calendar-day,
    .time-option,
    .slot-item
  ) {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }

  body.yuto-web-lab-page :is(
    a,
    button,
    [role="button"],
    summary,
    .yuto-bamboo-link,
    .yuto-btn--ui,
    .yuto-slice-pager-btn,
    .news-filter-btn,
    .pager-btn,
    .news-action-link,
    .yuto-news-card,
    .yuto-news-card-button,
    .link-card,
    .copy-mail-btn,
    .booking-lab-mode-button,
    .service-card,
    .select-trigger,
    .calendar-nav button,
    .calendar-day,
    .time-option,
    .slot-item
  ) * {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Preserve normal typing/select behavior inside real form fields only. */
  body.yuto-web-lab-page :is(input, textarea, select, [contenteditable="true"]) {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
    touch-action: auto;
  }

  /* Mobile should not play the desktop knife slash / hover sheen over controls.
     This removes temporary visual feedback only; desktop knife behavior stays intact. */
  body.yuto-web-lab-page .yuto-knife-slash,
  body.yuto-web-lab-page .yuto-knife-fake-cursor,
  body.yuto-web-lab-page .yuto-knife-hover-sheen {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.yuto-web-lab-page .yuto-knife-hover-light {
    overflow: visible;
  }

  /* Header/footer extension colors only. This does not repaint the middle content stage. */
  body.yuto-web-lab-page.yuto-page-bg .yuto-site-header,
  body.yuto-web-lab-page.yuto-page-bg .yuto-site-footer {
    background-color: #070911;
  }

  /* Mobile footer seam guard for every page with the shared footer. */
  body.yuto-web-lab-page.yuto-page-bg .yuto-site-footer {
    margin-top: -1px;
    border-top: 0;
    box-shadow: none;
  }

  /* Keep short / result pages from revealing blue or unfiltered wallpaper at the very end. */
  body.yuto-payment-lab-page.yuto-web-lab-page main,
  body.yuto-policy-page.yuto-web-lab-page main {
    min-height: 100dvh;
  }

  /* [YUTO-CSS-VERIFY v629] Mobile background motif stage separation
   Owner: 01-Background / Mobile motif scene only.
   Target:
   - Fix mobile-only issue where clouds / crests appear diluted because .yuto-home-bg-scene
     was grouped with the long footer seam texture stage.
   Contract:
   - Desktop untouched.
   - HTML untouched.
   - JS untouched.
   - Buttons untouched.
   - Layout untouched.
   - Keep .yuto-bg-texture-layer long for mobile footer seam / overscroll safety.
   - Decouple .yuto-home-bg-scene from the 7600px seam stage so motif distribution stays visible on mobile.
  */
  body.yuto-web-lab-page.yuto-has-bg-texture main > .yuto-home-bg-scene,
  body.yuto-web-lab-page.yuto-has-bg-texture main > #yutoHomeBgScene {
    min-height: max(1000px, 145vh);
    height: max(1000px, 145vh);
  }
}
/* WHAT ▸ 付款頁載入家徽：外觀來自共用元件，這裡只宣告本頁的尺寸與版面位置。 */
body.yuto-payment-lab-page .payment-loading .payment-spinner {
  --yuto-kamon-loader-size: 46px;
  min-width: 0;
  margin: 0 auto 18px;
  padding: 0;
}

@media (max-width: 700px) {
  body.yuto-payment-lab-page .payment-loading .payment-spinner {
    --yuto-kamon-loader-size: 40px;
  }
}
/* [YUTO-CSS-VERIFY v707] Payment Lab clean owner block
   Owner: P-Payment / payment-related pages only.
   Target pages:
   - payment.html
   - payment-result.html
   - booking-result.html

   Purpose:
   - Replace the stacked V691-V702 payment test overrides with one clean source.
   - Keep payment loading hidden state working.
   - Keep simplified header/footer aligned to public page header/footer color source.
   - Keep footer as random copyright only.
   - Keep all payment-page buttons on true-ratio 50 / 30 PNG source.
   - Separate desktop and mobile button tuning so they do not affect each other.

   Guards:
   - Scoped only by body.yuto-payment-lab-page.
   - No HTML / JS / Worker / Apps Script / ECPay / Sheet / email / trigger / API changes.
   - No !important in this block.
*/

/* 0) Public-page color source for simplified payment header/footer. */
/* WARN [WALL-33] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-payment-lab-page {
  --yuto-edge-bg: #070911;
  --yuto-header-bg: rgba(8, 10, 16, 0.72);
  --yuto-header-border: rgba(255, 255, 255, 0.08);
  --yuto-footer-border: rgba(255, 255, 255, 0.08);
}

/* 1) Hidden state. Keep this explicit so loading/result panels can actually switch. */
body.yuto-payment-lab-page .payment-loading.is-hidden,
body.yuto-payment-lab-page .payment-card.is-hidden,
body.yuto-payment-lab-page .payment-wrap.is-hidden,
body.yuto-payment-lab-page .payment-cancel-modal.is-hidden {
  display: none;
}

/* 2) Simplified payment header/footer shell. No logo, no nav, no English title. */
body.yuto-payment-lab-page .payment-lite-header,
body.yuto-payment-lab-page .payment-lite-footer {
  position: relative;
  z-index: 8;
  width: 100%;
  flex: 0 0 auto;
  background: var(--yuto-header-bg);
  background-color: var(--yuto-edge-bg, #070911);
  box-shadow: none;
  pointer-events: none;
}

body.yuto-payment-lab-page .payment-lite-footer {
  margin-top: auto;
  padding-top: 28px;
  padding-bottom: max(36px, env(safe-area-inset-bottom));
  border-top: 0;
}

body.yuto-payment-lab-page .payment-lite-header {
  min-height: 78px;
  padding-top: max(0px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--yuto-header-border);
}

body.yuto-payment-lab-page .payment-lite-header-inner,
body.yuto-payment-lab-page .payment-lite-footer-inner {
  width: min(1120px, calc(100% - 48px));
  min-height: inherit;
  margin: 0 auto;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
}

body.yuto-payment-lab-page .payment-lite-copyright {
  margin: 0;
  color: rgba(226, 230, 244, 0.72);
  font-family: var(--yuto-type-font-family);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .035em;
}

/* 3) Shared payment button row reset. Keep the containers, but do not let them stretch buttons. */
body.yuto-payment-lab-page .payment-actions,
body.yuto-payment-lab-page .payment-action-area,
body.yuto-payment-lab-page .payment-cancel-actions {
  margin-top: 22px;

  display: flex;
  justify-content: center;
  inline-size: max-content;
  max-inline-size: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1081px) {
  /* 4) Shared button framework isolation.
      Rebuild only payment-page buttons so old yuto-slice-button frame rules cannot squeeze them. */
  /* 【雙生子A】付款頁按鈕本體。與【雙生子B】(預約頁付款救援彈窗)為同款複本。
   v34：原規則 scope 僅 body.yuto-payment-lab-page，導致 booking 頁的雙生子B 吃不到、
   退回基礎 slice 被壓縮。已於每行 selector 併入 body.yuto-booking-lab-page，兩頁共用同一條源頭規則，
   不加 !important、不另疊覆蓋。日後改此規則兩頁自動同步。 */

  /* 5) Desktop tuning only.
      Keep this separate from mobile so desktop edits do not affect phones. */
  body.yuto-payment-lab-page .payment-actions,
  body.yuto-payment-lab-page .payment-action-area,
  body.yuto-payment-lab-page .payment-cancel-actions,
  body.yuto-payment-lab-page.is-result .payment-left > .payment-actions,
  body.yuto-payment-lab-page.is-result .payment-left > .payment-action-area {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-columns: none;
    justify-content: center;
    align-items: center;
    justify-items: center;
    column-gap: 4px;
    row-gap: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 760px) {
  body.yuto-payment-lab-page .payment-lite-header {
    min-height: 59px;
  }

  body.yuto-payment-lab-page .payment-lite-footer {
    min-height: 56px;
    margin-top: 18px;
    padding-top: 0;
    padding-bottom: max(3px, calc(env(safe-area-inset-bottom) * .38));
  }

  body.yuto-payment-lab-page .payment-lite-header-inner,
  body.yuto-payment-lab-page .payment-lite-footer-inner {
    width: min(100% - 28px, 720px);
  }

  body.yuto-payment-lab-page .payment-lite-copyright {
    font-size: .92rem;
    line-height: 1.22;
  }
}

/* WHY 兩顆 --40 並排需 563.4px；左卡在視窗 1080px 以下給不到這個寬度，
      按鈕會突出卡片外。門檻與【雙生子B】(預約頁救援彈窗) 相同，改任一處請同步另一處。 */
@media (max-width: 1080px) {
  body.yuto-payment-lab-page .payment-actions,
  body.yuto-payment-lab-page .payment-action-area,
  body.yuto-payment-lab-page .payment-cancel-actions {
    /* WHY 並排時每顆只分到約半寬(162px)，但按鈕圖依原比例(50號圖)畫成約284px、置中，
       圖左右各被裁掉約61px＝金框被切。
       窄視窗一顆一行(column)才能顯示完整的圖。payment / result / 彈窗統一堆疊。 */
    gap: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  /* WHY column-flex 對 grid+aspect-ratio 按鈕做主軸尺寸解析時，flex-basis:auto 讀到一個
       fallback 出的 320px（grid 內容量不出高＋唯一子元素 absolute 不佔位）→ 按鈕高 320px，
       且 flex-basis 優先於 height，連 height:38px !important 都壓不動（TRAP-32／TRAP-33）。
       flex:0 0 auto 讓按鈕【完全退出】flex 主軸尺寸計算 → 退回用自己的 height（38px）→ 正常。
       （console 逐屬性受控實驗證實：唯一有效的是動 flex；height／block-size／aspect-ratio 皆無效）
     WARN 只作用於 result 頁 .payment-actions 內的按鈕；桌機 row 佈局與其他頁不受影響 */
  body.yuto-payment-lab-page .payment-actions > .yuto-btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 360px) {
  /* WHY 超窄手機：已在堆疊狀態，這裡只把上下間距再收緊一格。 */
  body.yuto-payment-lab-page .payment-actions,
  body.yuto-payment-lab-page .payment-action-area,
  body.yuto-payment-lab-page .payment-cancel-actions {
    gap: 6px;
  }
}
/* Native cursor suppression on the exact payment action/modal owner surfaces. */

body.yuto-payment-lab-page .yuto-btn--payment,
body.yuto-booking-lab-page .yuto-btn--payment {
  touch-action: manipulation;
}

body.yuto-payment-lab-page .yuto-btn--payment::selection,
body.yuto-payment-lab-page .yuto-btn--payment *::selection {
  background: transparent;
  color: inherit;
}

/* Payment-page button select/tap guard: applies to every payment Lab page that uses .yuto-btn--payment. */
/* WARN 靠【位置在後】壓過同選擇器的前一份（-webkit-tap-highlight-color / -webkit-touch-callout / -webkit-user-drag / -webkit-user-select / user-select）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-payment-lab-page .yuto-btn--payment,
body.yuto-payment-lab-page .yuto-btn--payment *,
body.yuto-payment-lab-page .payment-actions,
body.yuto-payment-lab-page .payment-actions * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

/* Desktop cursor leak test: the payment button source has cursor:pointer; override it at payment-owner scope. */
body.yuto-payment-lab-page .yuto-btn--payment,
body.yuto-payment-lab-page a.yuto-btn--payment,
body.yuto-payment-lab-page .payment-actions .yuto-btn--payment,
body.yuto-payment-lab-page .yuto-btn--payment:hover,
body.yuto-payment-lab-page .yuto-btn--payment:focus-visible,
body.yuto-payment-lab-page .yuto-btn--payment:active {
  cursor: none;
}

body.yuto-admin-lab-bg-source.yuto-has-bg-texture {
  /* 【材質登記表 v1】圖片來源改由 <body data-yuto-bg-texture> 提供，此處不再寫死 url() */
  --yuto-bg-texture-opacity: .75;
  --yuto-bg-texture-size: 520px 520px;
  --yuto-bg-texture-blend: multiply;
  --yuto-bg-texture-position: top left;
  --yuto-admin-lab-bg-stage-height: 4200px;
}

body.yuto-admin-lab-clean-ui main.yuto-admin-clean-page,
body.yuto-admin-lab-clean-ui.yuto-page-bg main.yuto-admin-clean-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--admin-bg-source, #0B1A4C);
  background-image: none;
}

body.yuto-admin-lab-bg-source main.yuto-admin-clean-page > .yuto-bg-texture-layer {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: 100%;
  min-height: 100%;
  height: max(100%, var(--yuto-admin-lab-bg-stage-height, 4200px));
  pointer-events: none;
  display: block;
  background-image: var(--yuto-bg-texture-image);
  background-size: var(--yuto-bg-texture-size);
  background-repeat: repeat;
  background-position: var(--yuto-bg-texture-position);
  opacity: var(--yuto-bg-texture-opacity);
  mix-blend-mode: var(--yuto-bg-texture-blend);
  transform: translateZ(0);
}

body.yuto-admin-lab-bg-source main.yuto-admin-clean-page > :not(.yuto-bg-texture-layer) {
  position: relative;
  z-index: 3;
}

@media (max-width: 700px) {
  body.yuto-admin-lab-bg-source.yuto-has-bg-texture {
    --yuto-admin-lab-bg-stage-height: max(7600px, 520vh);
  }

  /* WARN 靠【位置在後】壓過同選擇器的前一份（background-color）。
       合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
  html,
  body.yuto-admin-lab-bg-source.yuto-page-bg {
    background-color: #070911;
  }

  body.yuto-admin-lab-bg-source.yuto-page-bg .yuto-site-header,
  body.yuto-admin-lab-bg-source.yuto-page-bg .yuto-site-footer {
    background-color: #070911;
  }

  body.yuto-admin-lab-bg-source.yuto-page-bg .yuto-site-footer {
    margin-top: -1px;
    border-top: 0;
    box-shadow: none;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-B 區　admin-news 專屬                                      ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@media (hover: none) and (pointer: coarse) {
  /* Safe non-media UI surfaces: text/card shells that should not need pinch or swipe gestures. */
  body.yuto-page-bg .tag {
    touch-action: manipulation;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  body.yuto-page-bg .yuto-admin-container {
    width: min(calc(100% - 44px), var(--container)) !important;
  }

  .yuto-admin-page .admin-card,
  .yuto-admin-page .login-card {
    max-width: 100% !important;
  }
}
/* WHAT ▸ Yuto Global UI Token Alias Module v1 */

@media (max-width: 700px) {
  body.admin-news-page label { font-size: .96rem; }

  body.admin-news-page input,
      body.admin-news-page select,
      body.admin-news-page textarea {
        min-height: 52px;
        font-size: 16px;
      }

  body.admin-news-page .switch { width: 62px; height: 36px; }

  body.admin-news-page .slider:before { width: 28px; height: 28px; }

  body.admin-news-page .switch input:checked + .slider:before { transform: translateX(26px); }

  body.admin-news-page .image-preview-card { padding: 12px; border-radius: 16px; }

  body.admin-news-page .image-preview-card img { height: 164px; }

  body.admin-news-page .image-remove-btn {
        top: 10px;
        right: 10px;
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
        background: rgba(10, 12, 18, 0.86);
      }
}

@media (max-width: 420px) {
  body.admin-news-page .image-preview-card img { height: 148px; }
}
/* Admin CSS Query / Inline Low-Risk Cleanup Module v1
   Source: ADMIN-CSS-QUERY-AND-INLINE-LOW-RISK-CLEANUP-001
   Scope: admin-news.html / admin-tools.html only.
   Purpose: replace small inline style="" spacing residuals with scoped CSS rules.
   Do not use this module for public pages. */
body.admin-news-page .admin-login-form {
  margin-top: 22px;
}

body.admin-news-page .admin-upload-field-label {
  display: block;
  margin-top: 12px;
}

body.admin-news-page .admin-filter-row-secondary {
  margin-top: 10px;
}

body.yuto-admin-lab-clean-ui .tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(77, 226, 197, 0.22);
  background: rgba(77, 226, 197, 0.08);
  color: #dcfff6;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1;
}

body.admin-news-lab-page .yuto-admin-page {
  width: 100%;
  min-width: 0;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（width）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.admin-news-lab-page .yuto-admin-container {
  margin-inline: auto;
}

body.admin-news-lab-page .yuto-admin-page {
  padding: clamp(36px, 5vw, 74px) 0 clamp(50px, 6vw, 88px);
}

body.admin-news-lab-page .yuto-admin-login-wrap {
  display: grid;
  place-items: center;
  min-height: min(62vh, 680px);
  padding-block: clamp(28px, 6vw, 70px);
}

body.admin-news-lab-page .yuto-admin-login-card,
body.admin-news-lab-page .yuto-admin-card,
body.admin-news-lab-page .yuto-admin-side-card,
body.admin-news-lab-page .yuto-admin-list-card,
body.admin-news-lab-page .yuto-admin-hero-standard {
  min-width: 0;
  border: 1px solid var(--admin-card-border);
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius-xl);
  box-shadow: var(--admin-card-shadow-soft);
  backdrop-filter: blur(var(--payment-lab-glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--payment-lab-glass-blur, 0px));
}

body.admin-news-lab-page .yuto-admin-login-card,
body.admin-news-lab-page .yuto-admin-card,
body.admin-news-lab-page .yuto-admin-side-card,
body.admin-news-lab-page .yuto-admin-list-card {
  padding: clamp(20px, 3vw, 32px);
}

body.admin-news-lab-page .yuto-admin-login-card {
  width: min(100%, 620px);
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.admin-news-lab-page .yuto-admin-hero-standard {
  background:
    linear-gradient(135deg, rgba(49, 75, 173, 0.16), rgba(11, 26, 76, 0.18)),
    var(--admin-card-bg);
}

body.admin-news-lab-page .yuto-admin-hero-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

body.admin-news-lab-page .yuto-admin-hero-title,
body.admin-news-lab-page .yuto-admin-login-card h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

body.admin-news-lab-page .yuto-admin-hero-desc,
body.admin-news-lab-page .yuto-admin-login-card p {
  color: var(--admin-soft);
}

body.admin-news-lab-page .yuto-admin-shell {
  display: grid;
  gap: clamp(18px, 2.8vw, 28px);
}

body.admin-news-lab-page .yuto-admin-layout-grid {
  display: grid;
  align-items: start;
  gap: clamp(16px, 2.4vw, 24px);
}

body.admin-news-lab-page .yuto-admin-list-card,
body.admin-news-lab-page .news-admin-list {
  display: grid;
  gap: 14px;
}

body.admin-news-lab-page .field,
body.admin-news-lab-page .admin-login-form,
body.admin-news-lab-page .form-grid {
  min-width: 0;
}

body.admin-news-lab-page .field {
  display: grid;
  gap: 8px;
}

body.admin-news-lab-page .field.full {
  grid-column: 1 / -1;
}

body.admin-news-lab-page label {
  color: var(--admin-text);
  font-weight: 900;
}

body.admin-news-lab-page input,
body.admin-news-lab-page select,
body.admin-news-lab-page textarea {
  width: 100%;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 16, 0.45);
  color: var(--admin-text);
  padding: 11px 13px;
  font: inherit;
  outline: none;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

body.admin-news-lab-page textarea {
  min-height: 140px;
  resize: vertical;
}

body.admin-news-lab-page input:focus,
body.admin-news-lab-page select:focus,
body.admin-news-lab-page textarea:focus {
  border-color: rgba(159, 124, 255, 0.45);
  background: rgba(8, 10, 16, 0.58);
  box-shadow: 0 0 0 3px rgba(159, 124, 255, 0.12);
}

body.admin-news-lab-page .admin-actions,
body.admin-news-lab-page .filter-row,
body.admin-news-lab-page .pager,
body.admin-news-lab-page .row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

body.admin-news-lab-page .admin-button,
body.admin-news-lab-page .small-action,
body.admin-news-lab-page .filter-btn,
body.admin-news-lab-page .pager-btn,
body.admin-news-lab-page .yuto-admin-session-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.075);
  color: var(--admin-text);
  font: inherit;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .22s var(--yuto-ease-out), background .22s ease, border-color .22s ease, filter .22s ease, opacity .22s ease;
}

/* WARN [WALL-41] 承重牆：靠【位置在後】壓過 body.admin-news-lab-page .admin-button 的 background。
     上移、合併或跨區搬動 → 生效樣式翻轉 */
body.admin-news-lab-page .admin-button:not(.secondary),
body.admin-news-lab-page .yuto-admin-session-button,
body.admin-tools-lab-page .admin-tools-button:not(:disabled) {
  background: linear-gradient(135deg, rgba(159, 124, 255, 0.82), rgba(123, 92, 255, 0.72));
  border-color: rgba(159, 124, 255, 0.38);
}

body.admin-news-lab-page .admin-button:hover,
body.admin-news-lab-page .small-action:hover,
body.admin-news-lab-page .filter-btn:hover,
body.admin-news-lab-page .pager-btn:hover,
body.admin-news-lab-page .yuto-admin-session-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  border-color: var(--admin-card-hover-border);
}

body.admin-news-lab-page .filter-btn.active,
body.admin-news-lab-page .pager-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(159, 124, 255, 0.42), rgba(77, 226, 197, 0.18));
  border-color: rgba(159, 124, 255, 0.35);
}

body.admin-news-lab-page .admin-button:disabled,
body.admin-news-lab-page .small-action:disabled,
body.admin-news-lab-page .pager-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(.3);
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background / border / border-radius）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.admin-news-lab-page .notice,
body.admin-news-lab-page .yuto-admin-session-notice {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: var(--admin-soft);
}

body.admin-news-lab-page .notice,
body.admin-news-lab-page .yuto-admin-session-notice {
  padding: 14px 16px;
  line-height: 1.65;
}

body.admin-news-lab-page .notice.ok,
body.admin-news-lab-page .yuto-admin-session-notice.is-ok,
body.admin-tools-lab-page .admin-tools-status-box.is-found,
body.admin-tools-lab-page .admin-tools-status-box.is-ok {
  color: #dcfff6;
  border-color: rgba(77, 226, 197, 0.28);
  background: rgba(77, 226, 197, 0.08);
}

body.admin-news-lab-page .notice.error,
body.admin-news-lab-page .yuto-admin-session-notice.is-error {
  color: #ffe1ea;
  border-color: rgba(255, 107, 140, 0.28);
  background: rgba(255, 107, 140, 0.08);
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background / border / border-radius）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.admin-news-lab-page .switch-line {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

body.admin-news-lab-page .switch-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
}

body.admin-news-lab-page .switch-note {
  color: var(--admin-soft);
  font-size: .92rem;
  line-height: 1.6;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background / border / border-radius）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.admin-news-lab-page .admin-news-row,
body.admin-news-lab-page .image-preview-card {
  border-radius: 18px;
  border: 1px solid var(--admin-card-border-soft);
  background: rgba(255, 255, 255, 0.042);
}

body.admin-news-lab-page .admin-news-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

body.admin-news-lab-page .row-title {
  color: #fff;
  font-weight: 900;
}

body.admin-news-lab-page .row-meta,
body.admin-news-lab-page .pager-info,
body.admin-news-lab-page .image-help,
body.admin-news-lab-page .image-preview-meta,
body.admin-news-lab-page .side-list {
  color: var(--admin-soft);
}

body.admin-news-lab-page .image-mode-row,
body.admin-news-lab-page .image-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body.admin-news-lab-page .image-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: var(--admin-soft);
  font-weight: 900;
  cursor: pointer;
}

body.admin-news-lab-page .image-mode-option:has(input:checked) {
  color: #fff;
  border-color: rgba(159, 124, 255, 0.36);
  background: linear-gradient(135deg, rgba(159, 124, 255, 0.28), rgba(77, 226, 197, 0.11));
}

body.admin-news-lab-page .image-preview-grid {
  display: grid;
  gap: 12px;
}

body.admin-news-lab-page .image-preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

body.admin-news-lab-page .image-preview-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 10px;
}

body.admin-news-lab-page .image-preview-card img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}

body.admin-news-lab-page .image-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 18, 0.78);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

/* Admin preview overlays: moved out of admin-news-lab inline style in V758. */
body.admin-news-lab-page .news-preview-overlay,
body.admin-news-lab-page .news-activity-preview-overlay {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(5, 7, 12, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.admin-news-lab-page .news-preview-overlay {
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

body.admin-news-lab-page .news-activity-preview-overlay {
  z-index: 920;
  overflow-y: auto;
  padding: 18px;
}

body.admin-news-lab-page .news-preview-overlay.is-visible {
  display: flex;
}

body.admin-news-lab-page .news-activity-preview-overlay.is-visible {
  display: block;
}

body.admin-news-lab-page .news-preview-dialog,
body.admin-news-lab-page .news-activity-preview-shell {
  position: relative;
  width: min(calc(100vw - 48px), var(--admin-container));
  margin-inline: auto;
}

body.admin-news-lab-page .news-preview-dialog {
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  border-radius: 26px;
  border: 1px solid var(--admin-card-border);
  background: rgba(10, 12, 18, 0.92);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
  padding: 18px;
}

body.admin-news-lab-page .news-activity-preview-shell {
  padding: 0 0 46px;
}

body.admin-news-lab-page .news-preview-toolbar,
body.admin-news-lab-page .news-activity-preview-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 12, 18, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.admin-news-lab-page .news-preview-toolbar-text,
body.admin-news-lab-page .news-activity-preview-toolbar-text {
  min-width: 0;
  color: var(--admin-soft);
  font-size: .9rem;
  line-height: 1.55;
}

body.admin-news-lab-page .news-preview-toolbar-text strong,
body.admin-news-lab-page .news-activity-preview-toolbar-text strong {
  display: block;
  color: #fff;
  font-size: .98rem;
}

body.admin-news-lab-page .news-preview-close,
body.admin-news-lab-page .news-activity-preview-close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

body.admin-news-lab-page .news-preview-card-stage,
body.admin-news-lab-page .news-preview-card-stage .news-card,
body.admin-news-lab-page .news-activity-preview-list .news-card {
  width: 100%;
  margin: 0;
}

body.admin-news-lab-page .news-activity-preview-status {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: var(--admin-soft);
}

body.admin-news-lab-page .news-activity-preview-card.section-card {
  padding: clamp(20px, 3vw, 30px);
  margin-bottom: 0;
  border-radius: var(--admin-radius-xl);
  background: var(--admin-card-bg);
  border-color: var(--admin-card-border);
}

body.admin-news-lab-page .news-activity-preview-head.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

body.admin-news-lab-page .news-activity-preview-list.news-list {
  display: grid;
  gap: 18px;
  margin-top: 16px;
}

body.admin-news-lab-page .news-activity-preview-filters.news-filter-row,
body.admin-news-lab-page .news-activity-preview-pager.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body.admin-news-lab-page .news-activity-preview-filters.news-filter-row {
  justify-content: flex-end;
}

body.news-preview-open,
body.news-activity-preview-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  body.admin-news-lab-page .yuto-admin-layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  body.admin-news-lab-page .yuto-admin-container {
    width: min(calc(100% - 24px), 620px);
  }

  body.admin-news-lab-page .yuto-admin-page {
    padding-top: 24px;
    padding-bottom: 44px;
  }

  body.admin-news-lab-page .yuto-admin-login-wrap {
    min-height: auto;
    padding-block: 24px;
  }

  body.admin-news-lab-page .yuto-admin-login-card,
  body.admin-news-lab-page .yuto-admin-card,
  body.admin-news-lab-page .yuto-admin-side-card,
  body.admin-news-lab-page .yuto-admin-list-card,
  body.admin-news-lab-page .yuto-admin-hero-standard {
    border-radius: 22px;
    padding: 18px;
  }

  body.admin-news-lab-page .yuto-admin-hero-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-news-lab-page .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-news-lab-page .admin-news-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-news-lab-page .admin-actions .admin-button,
  body.admin-news-lab-page .admin-actions a.admin-button {
    flex: 1 1 140px;
  }

  body.admin-news-lab-page .news-preview-overlay,
  body.admin-news-lab-page .news-activity-preview-overlay {
    padding: 12px;
  }

  body.admin-news-lab-page .news-preview-dialog,
  body.admin-news-lab-page .news-activity-preview-shell {
    width: min(calc(100vw - 24px), var(--admin-container));
  }

  body.admin-news-lab-page .news-preview-dialog {
    max-height: calc(100dvh - 24px);
    border-radius: 22px;
    padding: 12px;
  }

  body.admin-news-lab-page .news-preview-toolbar,
  body.admin-news-lab-page .news-activity-preview-toolbar {
    border-radius: 16px;
    padding: 10px;
  }

  body.admin-news-lab-page .news-activity-preview-filters,
  body.admin-news-lab-page .news-activity-preview-pager {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  body.admin-news-lab-page .news-activity-preview-filters::-webkit-scrollbar,
  body.admin-news-lab-page .news-activity-preview-pager::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 380px) {
  body.admin-news-lab-page .yuto-admin-container {
    width: min(calc(100% - 18px), 620px);
  }

  body.admin-news-lab-page .yuto-admin-login-card,
  body.admin-news-lab-page .yuto-admin-card,
  body.admin-news-lab-page .yuto-admin-side-card,
  body.admin-news-lab-page .yuto-admin-list-card,
  body.admin-news-lab-page .yuto-admin-hero-standard {
    padding: 16px;
    border-radius: 20px;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  body.admin-news-lab-page .yuto-admin-page {
    padding-bottom: 34px;
  }

  body.admin-news-lab-page .yuto-admin-login-card,
  body.admin-news-lab-page .yuto-admin-card,
  body.admin-news-lab-page .yuto-admin-side-card,
  body.admin-news-lab-page .yuto-admin-list-card,
  body.admin-news-lab-page .yuto-admin-hero-standard {
    padding: 18px;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-B 區　admin-tools 專屬                                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
/* WHAT ▸ Admin Tools Page Shell v1 */
    body.admin-tools-page {
      min-height: 100dvh;
      margin: 0;
      font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      background:
        radial-gradient(circle at top right, rgba(159, 124, 255, 0.18), transparent 30%),
        radial-gradient(circle at top left, rgba(77, 226, 197, 0.12), transparent 26%),
        linear-gradient(180deg, #090a0f 0%, #0d0f17 100%);
    }

body.admin-tools-page code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      word-break: break-word;
    }

body.admin-tools-page .yuto-admin-tools-spaced {
  margin-top: 18px;
}

body.yuto-admin-lab-clean-ui .admin-tools-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(77, 226, 197, 0.22);
  background: rgba(77, 226, 197, 0.08);
  color: #dcfff6;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1;
}

body.admin-tools-lab-page .admin-tools-shell {
  min-width: 0;
}

body.admin-tools-lab-page .admin-tools-shell {
  width: min(calc(100% - 32px), var(--admin-container));
  margin-inline: auto;
}

body.admin-tools-lab-page .admin-tools-shell {
  padding: clamp(32px, 5vw, 58px) 0 clamp(54px, 7vw, 92px);
}

body.admin-tools-lab-page .yuto-admin-tools-page-main {
  width: 100%;
  min-width: 0;
}

body.admin-tools-lab-page .admin-tools-header,
body.admin-tools-lab-page .admin-tools-section,
body.admin-tools-lab-page .admin-tools-status-box,
body.admin-tools-lab-page .admin-tools-registry-card,
body.admin-tools-lab-page .admin-tools-run-confirm {
  min-width: 0;
  border: 1px solid var(--admin-card-border);
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius-xl);
  box-shadow: var(--admin-card-shadow-soft);
  backdrop-filter: blur(var(--payment-lab-glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--payment-lab-glass-blur, 0px));
}

body.admin-tools-lab-page .admin-tools-header,
body.admin-tools-lab-page .admin-tools-section {
  padding: clamp(20px, 3vw, 32px);
}

body.admin-tools-lab-page .admin-tools-header {
  background:
    linear-gradient(135deg, rgba(49, 75, 173, 0.16), rgba(11, 26, 76, 0.18)),
    var(--admin-card-bg);
}

body.admin-tools-lab-page .admin-tools-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

body.admin-tools-lab-page .admin-tools-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

body.admin-tools-lab-page .admin-tools-header p,
body.admin-tools-lab-page .admin-tools-section p,
body.admin-tools-lab-page .admin-tools-status-copy,
body.admin-tools-lab-page .admin-tools-registry-copy,
body.admin-tools-lab-page .admin-tools-registry-card p,
body.admin-tools-lab-page .admin-tools-footer {
  color: var(--admin-soft);
}

body.admin-tools-lab-page .admin-tools-section,
body.admin-tools-lab-page .admin-tools-status-box,
body.admin-tools-lab-page .admin-tools-registry-card,
body.admin-tools-lab-page .admin-tools-run-confirm {
  display: grid;
  gap: 14px;
}

body.admin-tools-lab-page .admin-tools-confirm-line {
  color: var(--admin-text);
  font-weight: 900;
}

body.admin-tools-lab-page .admin-tools-actions,
body.admin-tools-lab-page .admin-tools-mode,
body.admin-tools-lab-page .admin-tools-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

body.admin-tools-lab-page .admin-tools-button,
body.admin-tools-lab-page .admin-tools-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.075);
  color: var(--admin-text);
  font: inherit;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .22s var(--yuto-ease-out), background .22s ease, border-color .22s ease, filter .22s ease, opacity .22s ease;
}

body.admin-tools-lab-page .admin-tools-button:hover,
body.admin-tools-lab-page .admin-tools-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  border-color: var(--admin-card-hover-border);
}

body.admin-tools-lab-page .admin-tools-button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(.3);
}

body.admin-tools-lab-page .admin-tools-status-box {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: var(--admin-soft);
}

body.admin-tools-lab-page .admin-tools-status-box.is-error,
body.admin-tools-lab-page .admin-tools-status-box.is-expired {
  color: #ffe1ea;
  border-color: rgba(255, 107, 140, 0.28);
  background: rgba(255, 107, 140, 0.08);
}

body.admin-tools-lab-page .admin-tools-status-box.is-missing {
  color: #fff2d3;
  border-color: rgba(255, 203, 107, 0.28);
  background: rgba(255, 203, 107, 0.075);
}

body.admin-tools-lab-page .admin-tools-run-confirm {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

body.admin-tools-lab-page .admin-tools-registry-card {
  border-radius: 18px;
  border: 1px solid var(--admin-card-border-soft);
  background: rgba(255, 255, 255, 0.042);
}

body.admin-tools-lab-page .admin-tools-registry-card h4 {
  color: #fff;
  font-weight: 900;
}

body.admin-tools-lab-page code {
  color: var(--admin-soft);
}

body.admin-tools-lab-page .admin-tools-registry-grid,
body.admin-tools-lab-page .yuto-admin-tools-level-grid,
body.admin-tools-lab-page .yuto-admin-tools-checklist {
  display: grid;
  gap: 12px;
}

body.admin-tools-lab-page .admin-tools-registry-grid,
body.admin-tools-lab-page .yuto-admin-tools-level-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.admin-tools-lab-page .admin-tools-mode span,
body.admin-news-lab-page .status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .82rem;
  font-weight: 900;
  color: #fff;
  background: rgba(255, 255, 255, 0.11);
}

@media (max-width: 1024px) {
  body.admin-tools-lab-page .admin-tools-registry-grid,
  body.admin-tools-lab-page .yuto-admin-tools-level-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  body.admin-tools-lab-page .admin-tools-shell {
    width: min(calc(100% - 24px), 620px);
  }

  body.admin-tools-lab-page .admin-tools-shell {
    padding-top: 24px;
    padding-bottom: 44px;
  }

  body.admin-tools-lab-page .admin-tools-header,
  body.admin-tools-lab-page .admin-tools-section {
    border-radius: 22px;
    padding: 18px;
  }

  body.admin-tools-lab-page .admin-tools-header {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 380px) {
  body.admin-tools-lab-page .admin-tools-shell {
    width: min(calc(100% - 18px), 620px);
  }

  body.admin-tools-lab-page .admin-tools-header,
  body.admin-tools-lab-page .admin-tools-section {
    padding: 16px;
    border-radius: 20px;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  body.admin-tools-lab-page .admin-tools-shell {
    padding-top: 20px;
    padding-bottom: 34px;
  }

  body.admin-tools-lab-page .admin-tools-header,
  body.admin-tools-lab-page .admin-tools-section {
    padding: 18px;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-B 區　booking 專屬                                         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
body.yuto-booking-lab-page.yuto-web-lab-page .yuto-button-row.is-booking-actions {
  justify-content: center;
}

@media (hover: none) and (pointer: coarse) {
  body.yuto-booking-page .select-trigger,
  body.yuto-booking-page .calendar-nav button,
  body.yuto-booking-page .calendar-day,
  body.yuto-booking-page .time-option,
  body.yuto-booking-page .service-card {
    touch-action: manipulation;
  }

  body.yuto-page-bg .page-title,
  body.yuto-page-bg .page-desc,
  body.yuto-booking-page .booking-side-card,
  body.yuto-booking-page .status-title,
  body.yuto-booking-page .status-desc,
  body.yuto-booking-page .status-list,
  body.yuto-booking-page .slot-item,
  body.yuto-booking-page .helper-note {
    touch-action: manipulation;
  }
}
/* v6: do not hard-lock body scroll. The fixed modal owns scroll instead. */
body.is-ypr-modal-open {
  overflow: auto;
}

body.yuto-booking-lab-page .yuto-btn--payment.is-checkout-secondary,
body.yuto-booking-lab-page .yuto-btn--payment.is-cancel-danger {
  opacity: .95;
}

@media (max-width: 760px) {
  body.yuto-booking-lab-page .yuto-btn--payment,
  body.yuto-booking-lab-page .payment-card .yuto-btn--payment,
  body.yuto-booking-lab-page .payment-cancel-actions .yuto-btn--payment {
    margin-inline: auto;
  }
}

/* WHAT ▸ Booking Base Shell / Hero / Card Module v1 */
body.yuto-booking-page {
  --card: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.1);
  --text: #f6f7fb;
  --text-soft: #c8cbda;
  --primary: #9f7cff;
  --primary-hover: #b59cff;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --container: 1200px;

  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.1);
  --popup-bg: rgba(14, 18, 32, 0.96);
  --selected: linear-gradient(180deg, rgba(49, 75, 173, 0.88), rgba(34, 54, 151, 0.82)), var(--yuto-bg-texture-image);
  --selected-background-size: auto, var(--yuto-bg-texture-size, 520px 520px);
  --selected-background-position: center center, var(--yuto-bg-texture-position, top left);
  --selected-background-repeat: no-repeat, repeat;
  --selected-background-blend: normal, var(--yuto-bg-texture-blend, multiply);
  --selected-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 18px rgba(0, 0, 0, 0.18);
  --selected-filter: none;
  --booking-lock-opacity: 0.72;
  --booking-lock-filter: none;
  --booking-lock-bg: rgba(255, 255, 255, 0.04);
  --booking-lock-border: rgba(255, 255, 255, 0.1);
  --booking-lock-text: rgba(246, 247, 251, 0.68);

  color: var(--text);
}

body.yuto-booking-page * {
  box-sizing: border-box;
}

body.yuto-booking-page a {
  color: inherit;
  text-decoration: none;
}

body.yuto-booking-page .container {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}

body.yuto-booking-page .hero-card {
  position: relative;
  overflow: hidden;
  padding: 42px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(159, 124, 255, 0.16), rgba(77, 226, 197, 0.08)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow);
}

body.yuto-booking-page .hero-card::before {
  content: "";
  position: absolute;
  inset: auto -120px -120px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(159, 124, 255, 0.24), transparent 68%);
  pointer-events: none;
}

body.yuto-booking-page .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #f5f2ff;
  background: rgba(159, 124, 255, 0.16);
  border: 1px solid rgba(159, 124, 255, 0.28);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.yuto-booking-page .booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.82fr);
  gap: 22px;
  align-items: start;
}

/* WHAT ▸ 互動頁大面板：表面（底色／邊框／陰影）全由 .yuto-surface-card--quiet 提供，
        這裡只留圓角這項版面。
   WARN 不要把 background / border / box-shadow 加回來 —— 本選擇器特異度 (0,2,1)
        高於元件的 (0,2,0)，加回來會把元件的 hover 整個壓死（實測：紫邊與陰影完全不出現）。 */
body.yuto-booking-page .booking-main,
body.yuto-booking-page .booking-side-card {
  border-radius: var(--radius-xl);
}

body.yuto-booking-page .booking-main {
  padding: 30px;
  overflow: visible;
}

body.yuto-booking-page .booking-side {
  display: grid;
  gap: 22px;
}

body.yuto-booking-page .booking-side-card {
  padding: 30px;
  position: relative;
  isolation: isolate;
}

body.yuto-booking-page .booking-section,
body.yuto-booking-page .booking-section button,
body.yuto-booking-page .booking-section label,
body.yuto-booking-page .booking-section .field-label,
body.yuto-booking-page .booking-section .select-text,
body.yuto-booking-page .booking-section .calendar-head,
body.yuto-booking-page .booking-section .calendar-weekdays,
body.yuto-booking-page .booking-section .calendar-days,
body.yuto-booking-page .booking-section .service-card,
body.yuto-booking-page .booking-section .status-list {
  user-select: none;
  -webkit-user-select: none;
}

body.yuto-booking-page .booking-section .text-input,
body.yuto-booking-page .booking-section .text-area {
  user-select: text;
  -webkit-user-select: text;
}

body.yuto-booking-page .page-title {
  margin: 0 0 8px;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.08;
}

/* WHAT ▸ Booking Form Fields / Inputs Module v1 */
body.yuto-booking-page .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 16px;
  align-items: start;
}

body.yuto-booking-page .field-label {
  font-size: 1rem;
}

body.yuto-booking-page .required {
  color: #ff90a4;
  margin-right: 4px;
}

body.yuto-booking-page .custom-required-mark {
  display: inline-block;
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(3px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    max-width 0.18s ease,
    margin-right 0.18s ease;
}

body.yuto-booking-page .custom-required-mark.is-visible {
  max-width: 1.2em;
  margin-right: 4px;
  opacity: 1;
  transform: translateY(0);
}

body.yuto-booking-page .select-trigger,
body.yuto-booking-page .text-input,
body.yuto-booking-page .text-area {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  transition: 0.24s ease;
}

body.yuto-booking-page .select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px;
  font-weight: 700;
}

body.yuto-booking-page .select-text {
  display: inline-block;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

body.yuto-booking-page .select-text.is-switching {
  opacity: 0.45;
  transform: translateY(2px);
}

body.yuto-booking-page .select-trigger.is-loading {
  opacity: 0.86;
}

body.yuto-booking-page .select-trigger:hover,
body.yuto-booking-page .text-input:hover,
body.yuto-booking-page .text-area:hover {
  border-color: rgba(159, 124, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

body.yuto-booking-page .select-trigger.open,
body.yuto-booking-page .text-input:focus,
body.yuto-booking-page .text-area:focus {
  outline: none;
  border-color: rgba(159, 124, 255, 0.34);
  box-shadow: 0 0 0 4px rgba(159, 124, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}

body.yuto-booking-page .text-input {
  padding: 0 20px;
}

body.yuto-booking-page .text-input:disabled,
body.yuto-booking-page .text-area:disabled,
body.yuto-booking-page .text-input.is-locked,
body.yuto-booking-page .text-area.is-locked {
  color: rgba(246, 247, 251, 0.46);
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  opacity: 1;
  filter: brightness(0.72) grayscale(0.15);
}

body.yuto-booking-page .text-area {
  padding: 18px 20px;
  resize: vertical;
}

body.yuto-booking-page .select-chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(235, 238, 255, 0.92);
  border-bottom: 2px solid rgba(235, 238, 255, 0.92);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.22s ease;
  flex: 0 0 auto;
}

body.yuto-booking-page .select-trigger.open .select-chevron {
  transform: rotate(225deg);
  margin-top: 4px;
}

/* WHAT ▸ Booking Service Card / Disabled State Module v1 */
body.yuto-booking-page .service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 4px;
}

body.yuto-booking-page .service-card {
  min-height: 118px;
  border-radius: 20px;
  color: var(--text);
  text-align: left;
  padding: 18px;
}

body.yuto-booking-page .service-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.35;
}

body.yuto-booking-page .service-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
  font-size: 0.92rem;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（box-shadow / filter / opacity）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-booking-page .select-trigger:disabled,
body.yuto-booking-page .select-trigger.is-locked,
body.yuto-booking-page .text-input:disabled,
body.yuto-booking-page .text-area:disabled,
body.yuto-booking-page .text-input.is-locked,
body.yuto-booking-page .text-area.is-locked,
body.yuto-booking-page .service-card.is-disabled,
body.yuto-booking-page .calendar-nav button:disabled {
  opacity: var(--booking-lock-opacity);
  filter: var(--booking-lock-filter);
  transform: none;
  pointer-events: none;
  box-shadow: none;
  transition:
    opacity 0.22s ease,
    filter 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background / border-color / color）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-booking-page .select-trigger:disabled,
body.yuto-booking-page .select-trigger.is-locked,
body.yuto-booking-page .text-input:disabled,
body.yuto-booking-page .text-area:disabled,
body.yuto-booking-page .text-input.is-locked,
body.yuto-booking-page .text-area.is-locked {
  background: var(--booking-lock-bg);
  border-color: var(--booking-lock-border);
  color: var(--booking-lock-text);
}

body.yuto-booking-page .text-input:disabled::placeholder,
body.yuto-booking-page .text-area:disabled::placeholder {
  color: rgba(246, 247, 251, 0.44);
}

body.yuto-booking-page .calendar-nav button:disabled:hover,
body.yuto-booking-page .select-trigger:disabled:hover,
body.yuto-booking-page .select-trigger.is-locked:hover,
body.yuto-booking-page .text-input:disabled:hover,
body.yuto-booking-page .text-area:disabled:hover,
body.yuto-booking-page .text-input.is-locked:hover,
body.yuto-booking-page .text-area.is-locked:hover,
body.yuto-booking-page .service-card.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（box-shadow）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-booking-page .service-card.is-disabled,
body.yuto-booking-page .service-card.is-disabled.selected {
  background: var(--booking-lock-bg);
  border-color: var(--booking-lock-border);
  box-shadow: none;
}

body.yuto-booking-page .service-card.is-disabled h3,
body.yuto-booking-page .service-card.is-disabled p {
  color: var(--booking-lock-text);
}

/* WHAT ▸ Booking Status / Slot List Module v1 */
body.yuto-booking-page .status-title {
  margin: 0 0 10px;
  font-size: 1.25rem;
}

body.yuto-booking-page .status-desc {
  margin: 0 0 16px;
  color: var(--text-soft);
  font-size: 0.98rem;
}

body.yuto-booking-page .status-list {
  display: grid;
  gap: 0;
}

body.yuto-booking-page .status-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.yuto-booking-page .status-item span {
  color: #d6dbef;
}

body.yuto-booking-page .status-item strong {
  text-align: right;
}

body.yuto-booking-page .slot-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 62px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
}

body.yuto-booking-page .slot-item strong {
  font-size: 1rem;
}

body.yuto-booking-page .slot-item span {
  color: #eef6ff;
  font-weight: 800;
}

body.yuto-booking-page .helper-note {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.95rem;
}

/* WHAT ▸ Booking Validation Bubble / Field Error Module v1 */
body.yuto-booking-page .field.has-validation-error .text-input,
body.yuto-booking-page .field.has-validation-error .text-area,
body.yuto-booking-page .field.has-validation-error .select-trigger {
  border-color: rgba(255, 150, 112, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 150, 112, 0.12);
}

body.yuto-booking-page .field-error-bubble {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 15;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100vw - 64px));
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 176, 81, 0.32);
  background: rgba(44, 34, 22, 0.96);
  color: #fff5e8;
  font-size: 0.92rem;
  line-height: 1.45;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  pointer-events: none;
}

body.yuto-booking-page .field-error-bubble::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 100%;
  border-width: 0 7px 8px 7px;
  border-style: solid;
  border-color: transparent transparent rgba(44, 34, 22, 0.96) transparent;
}

body.yuto-booking-page .field-error-bubble.show {
  display: inline-flex;
  animation: fieldBubbleIn 0.18s ease;
}

body.yuto-booking-page .field-error-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffbe66, #ff9d45);
  color: #3d2500;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
}

body.yuto-booking-page .field-error-text {
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* WHAT ▸ Booking Submit Progress / System Alert Module v1 */
body.yuto-booking-page .system-alert {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  line-height: 1.7;
}

body.yuto-booking-page .system-alert.show {
  display: block;
}

body.yuto-booking-page .system-alert.success {
  background: rgba(77, 226, 197, 0.1);
  border: 1px solid rgba(77, 226, 197, 0.18);
  color: #ebfff8;
}

/* v719 source relationship fix:
   Keep the submit progress card (#submitProgress) visible, including kamon + sword loading.
   Hide only the lower green success summary (#successAlert) when it is shown after submitProgress.
   DOM source: submitProgress sits before successAlert inside the booking form. */
body.yuto-booking-page.yuto-booking-lab-page #submitProgress.show ~ #successAlert.system-alert.success.show {
  display: none;
}

body.yuto-booking-page .system-alert.error {
  background: rgba(255, 130, 130, 0.1);
  border: 1px solid rgba(255, 130, 130, 0.18);
  color: #ffe8e8;
}

body.yuto-booking-page .submit-progress {
  display: none;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(159, 124, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(159, 124, 255, 0.12), rgba(77, 226, 197, 0.06)),
    rgba(255, 255, 255, 0.035);
  color: #f4f1ff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

body.yuto-booking-page .submit-progress.show {
  display: grid;
  gap: 10px;
  animation: submitPanelIn 0.24s ease forwards;
}

body.yuto-booking-page .submit-progress-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}

/* v038 source replacement: booking submit spinner is a true liquid mask.
   The kamon image exists only inside the rising fill layer; there is no
   always-visible full kamon layer above the waterline. */
body.yuto-booking-page .submit-spinner::before {
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(
    0 16%, 8% 8%, 16% 14%, 24% 6%, 32% 13%, 40% 9%,
    48% 16%, 56% 8%, 64% 13%, 72% 5%, 80% 12%, 88% 7%, 100% 14%,
    100% 100%, 0 100%
  );
  transition: height 0.28s ease;
  will-change: clip-path, transform;
}

body.yuto-booking-page .submit-progress-title {
  margin: 0;
  font-weight: 900;
  line-height: 1.35;
}

body.yuto-booking-page .submit-progress-desc {
  margin: 2px 0 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

body.yuto-booking-page .submit-progress-bar {
  position: relative;
  height: 30px;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

body.yuto-booking-page .submit-progress-bar > .yuto-sword-progress-meter {
  position: absolute;
  left: 0;
  top: 50%;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

/* v038 sword source: each part uses SVG viewBox cropping against the measured
   visible bbox of the original transparent PNG. The blade SVG stretches the
   cropped blade area only, so progress growth extends the blade rather than
   repeating or scaling the 1500px transparent canvas. */
body.yuto-booking-page .yuto-sword-progress-meter {
  --yuto-loading-sword-hilt-width: 48px;
  --yuto-loading-sword-hilt-height: 24px;
  --yuto-loading-sword-tip-width: 40px;
  --yuto-loading-sword-tip-height: 10px;
  display: flex;
}

body.yuto-booking-page .yuto-sword-progress-hilt,
body.yuto-booking-page .yuto-sword-progress-blade,
body.yuto-booking-page .yuto-sword-progress-tip {
  position: relative;
  display: block;
  pointer-events: none;
  overflow: visible;
  background: transparent;
}

body.yuto-booking-page .yuto-sword-progress-hilt svg,
body.yuto-booking-page .yuto-sword-progress-blade svg,
body.yuto-booking-page .yuto-sword-progress-tip svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

body.yuto-booking-page .yuto-sword-progress-hilt {
  z-index: 3;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

body.yuto-booking-page .yuto-sword-progress-blade {
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

body.yuto-booking-page .yuto-sword-progress-tip {
  z-index: 2;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.24));
}

/* WHAT ▸ Booking Popup / Calendar / Time Options Module v1 */
body.yuto-booking-page .popup {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 100%;
  z-index: 20;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

body.yuto-booking-page .popup.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

body.yuto-booking-page .popup-inner { padding: 18px; }

body.yuto-booking-page .calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.yuto-booking-page .calendar-month-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 900;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body.yuto-booking-page .calendar-month-caret {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(255, 255, 255, 0.9);
  margin-top: 4px;
}

body.yuto-booking-page .calendar-nav {
  display: flex;
  gap: 10px;
}

body.yuto-booking-page .calendar-nav button {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  transition: 0.22s ease;
}

body.yuto-booking-page .calendar-nav button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
}

body.yuto-booking-page .calendar-weekdays div {
  text-align: center;
  color: #d4d9ef;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  padding: 4px 0;
}

body.yuto-booking-page .calendar-day {
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(6, 10, 20, 0.72);
  color: #fff;
  font: inherit;
  font-weight: 800;
  transition: 0.22s ease;
}

body.yuto-booking-page .calendar-day.empty {
  background: transparent;
  border-color: transparent;
  color: transparent;
  pointer-events: none;
}

body.yuto-booking-page .calendar-day.unavailable {
  color: rgba(255, 255, 255, 0.26);
  pointer-events: none;
  background: rgba(7, 11, 22, 0.42);
}

body.yuto-booking-page .calendar-day.available:hover {
  transform: translateY(-2px);
  border-color: rgba(159, 124, 255, 0.2);
  background: rgba(18, 24, 44, 0.9);
}

body.yuto-booking-page .calendar-day.selected {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--selected, linear-gradient(180deg, rgba(49, 75, 173, 0.88), rgba(34, 54, 151, 0.82)), var(--yuto-bg-texture-image));
  background-color: #314bad;
  background-size: var(--selected-background-size, auto, var(--yuto-bg-texture-size, 520px 520px));
  background-position: var(--selected-background-position, center center, var(--yuto-bg-texture-position, top left));
  background-repeat: var(--selected-background-repeat, no-repeat, repeat);
  background-blend-mode: var(--selected-background-blend, normal, var(--yuto-bg-texture-blend, multiply));
  background-clip: padding-box;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--selected-shadow, 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 18px rgba(0, 0, 0, 0.18));
  -webkit-backdrop-filter: var(--selected-filter, none);
  backdrop-filter: var(--selected-filter, none);
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

body.yuto-booking-page .calendar-day.today:not(.selected) {
  border-color: rgba(77, 226, 197, 0.26);
}

body.yuto-booking-page .time-list {
  padding: 4px 0 2px;
}

body.yuto-booking-page .time-option {
  min-height: 54px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-align: left;
  transition: 0.22s ease;
}

body.yuto-booking-page .time-option:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
}

body.yuto-booking-page .time-option.selected {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--selected, linear-gradient(180deg, rgba(49, 75, 173, 0.88), rgba(34, 54, 151, 0.82)), var(--yuto-bg-texture-image));
  background-color: #314bad;
  background-size: var(--selected-background-size, auto, var(--yuto-bg-texture-size, 520px 520px));
  background-position: var(--selected-background-position, center center, var(--yuto-bg-texture-position, top left));
  background-repeat: var(--selected-background-repeat, no-repeat, repeat);
  background-blend-mode: var(--selected-background-blend, normal, var(--yuto-bg-texture-blend, multiply));
  background-clip: padding-box;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--selected-shadow, 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 18px rgba(0, 0, 0, 0.16));
  -webkit-backdrop-filter: var(--selected-filter, none);
  backdrop-filter: var(--selected-filter, none);
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

@media (max-width: 1100px) {
  body.yuto-booking-page .booking-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.yuto-booking-page .booking-main,
  body.yuto-booking-page .booking-side,
  body.yuto-booking-page .booking-side-card {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  body.yuto-booking-page .page-hero {
    padding: 48px 0 24px;
  }

  body.yuto-booking-page .hero-card {
    padding: 26px;
    border-radius: 24px;
  }

  body.yuto-booking-page .booking-layout {
    gap: 16px;
  }

  body.yuto-booking-page .booking-main,
  body.yuto-booking-page .booking-side-card {
    padding: 24px;
    border-radius: 24px;
  }

  body.yuto-booking-page .page-title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  body.yuto-booking-page .page-desc {
    margin-bottom: 20px;
  }

  body.yuto-booking-page .form-grid {
    gap: 16px;
  }

  body.yuto-booking-page .select-trigger,
  body.yuto-booking-page .text-input,
  body.yuto-booking-page .text-area {
    border-radius: 17px;
    padding-left: 16px;
    padding-right: 16px;
  }

  body.yuto-booking-page .text-area {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  body.yuto-booking-page .service-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.yuto-booking-page .service-card {
    min-height: 104px;
    padding: 16px;
    border-radius: 18px;
  }

  body.yuto-booking-page .booking-side {
    gap: 16px;
  }

  body.yuto-booking-page .status-item,
  body.yuto-booking-page .slot-item {
    gap: 10px;
  }
}

@media (max-width: 860px) {
  body.yuto-booking-page .form-grid,
  body.yuto-booking-page .service-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  body.yuto-booking-page .container {
    width: min(calc(100% - 24px), var(--container));
  }

  body.yuto-booking-page .page-hero {
    padding: 38px 0 20px;
  }

  body.yuto-booking-page .hero-card,
  body.yuto-booking-page .booking-main,
  body.yuto-booking-page .booking-side-card {
    padding: 20px;
  }

  body.yuto-booking-page .tag {
    padding: 7px 12px;
    font-size: .84rem;
  }

  body.yuto-booking-page .booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    min-width: 0;
  }

  body.yuto-booking-page .booking-main,
  body.yuto-booking-page .booking-side,
  body.yuto-booking-page .booking-side-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.yuto-booking-page .form-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  body.yuto-booking-page .field-label {
    font-size: .96rem;
  }

  body.yuto-booking-page .select-trigger,
  body.yuto-booking-page .text-input {
    border-radius: 16px;
  }

  body.yuto-booking-page .popup {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 88px;
    z-index: 300;
    width: auto;
    max-height: calc(100dvh - 112px);
  }

  body.yuto-booking-page .popup-inner {
    padding: 16px;
  }

  body.yuto-booking-page .calendar-head {
    gap: 10px;
  }

  body.yuto-booking-page .calendar-weekdays div {
    font-size: .82rem;
  }

  body.yuto-booking-page .calendar-day {
    height: 40px;
    border-radius: 12px;
    font-size: .92rem;
  }

  body.yuto-booking-page .time-option {
    min-height: 52px;
    border-radius: 15px;
  }

  body.yuto-booking-page .service-card h3 {
    font-size: .98rem;
  }

  body.yuto-booking-page .service-card p {
    font-size: .88rem;
  }

  body.yuto-booking-page .status-item {
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
  }

  body.yuto-booking-page .status-item strong {
    text-align: left;
  }

  body.yuto-booking-page .slot-item {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 14px 16px;
  }

  body.yuto-booking-page .submit-progress {
    padding: 14px;
    border-radius: 16px;
  }
}

@media (max-width: 430px) {
  body.yuto-booking-page .container {
    width: min(calc(100% - 18px), var(--container));
  }

  body.yuto-booking-page .hero-card,
  body.yuto-booking-page .booking-main,
  body.yuto-booking-page .booking-side-card {
    padding: 18px;
    border-radius: 20px;
  }

  body.yuto-booking-page .calendar-day {
    height: 37px;
    border-radius: 11px;
    font-size: .86rem;
  }

  body.yuto-booking-page .popup {
    left: 9px;
    right: 9px;
    top: 78px;
    max-height: calc(100dvh - 96px);
  }
}

@media (hover: hover) and (pointer: fine) {
  body.yuto-booking-page .select-trigger,
  body.yuto-booking-page .service-card,
  body.yuto-booking-page .calendar-nav button,
  body.yuto-booking-page .calendar-day,
  body.yuto-booking-page .time-option {
    cursor: var(--yuto-knife-cursor-pointer);
  }

  body.yuto-web-lab-page input,
  body.yuto-web-lab-page textarea,
  body.yuto-web-lab-page select,
  body.yuto-web-lab-page [contenteditable="true"] {
    cursor: var(--yuto-knife-cursor);
  }
}
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-plain-hero-copy h1 {
  font-weight: var(--yuto-type-section-title-weight);
}

body.yuto-booking-lab-page.yuto-web-lab-page .service-card h3,
body.yuto-booking-lab-page.yuto-web-lab-page .field-label,
body.yuto-booking-lab-page.yuto-web-lab-page .tag {
  font-weight: var(--yuto-type-card-title-weight);
}

body.yuto-booking-lab-page.yuto-web-lab-page .page-desc,
body.yuto-booking-lab-page.yuto-web-lab-page .service-card p,
body.yuto-booking-lab-page.yuto-web-lab-page .helper-note {
  font-weight: var(--yuto-type-body-weight);
}

body.yuto-booking-lab-page.yuto-web-lab-page {
  --yuto-lab-bg-314bad-deep-vivid: #0B1A4C;
  background-color: var(--yuto-lab-bg-314bad-deep-vivid);
}

body.yuto-booking-lab-page.yuto-web-lab-page main {
  background-color: var(--yuto-lab-bg-314bad-deep-vivid);
  background-image: none;
}

body.yuto-booking-lab-page.yuto-web-lab-page main::before,
body.yuto-booking-lab-page.yuto-web-lab-page main::after {
  background-image: none;
  opacity: 0;
}

body.yuto-booking-lab-page.yuto-web-lab-page {
  --yuto-booking-lab-bg-stage-height: 4200px;
}

body.yuto-booking-lab-page.yuto-has-bg-texture .yuto-home-bg-scene,
body.yuto-booking-lab-page.yuto-has-bg-texture main > .yuto-bg-texture-layer {
  inset: 0 auto auto 0;
  width: 100%;
  min-height: 100%;
  height: max(100%, var(--yuto-booking-lab-bg-stage-height, 4200px));
}

body.yuto-booking-lab-page.yuto-web-lab-page :is(.page-hero,.booking-section) {
  position: relative;
  z-index: 3;
}

/* Keep footer policy links calm; no card/button sheen on small footer text. */
body.yuto-booking-lab-page.yuto-web-lab-page .yuto-site-footer[data-yuto-no-hover-sheen="true"] .yuto-footer-links a {
  transform: none;
}

body.yuto-booking-lab-page.yuto-web-lab-page .page-hero.yuto-booking-lab-plain-hero {
  padding-top: clamp(64px, 7.2vw, 96px);
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-plain-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 920px;
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-plain-hero-copy h1 {
  margin: 0;
  font-size: clamp(2.28rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-main > .page-title {
  margin-bottom: 22px;
}

body.yuto-booking-lab-page.yuto-web-lab-page .yuto-booking-submit-note {
  margin: 12px 0 0;
  color: var(--text-soft, #c8cbda);
  font-size: .98rem;
  line-height: 1.72;
}

body.yuto-booking-lab-page.yuto-web-lab-page #noteInput.text-area,
body.yuto-booking-lab-page.yuto-web-lab-page textarea#noteInput.yuto-field.is-textarea.is-booking {
  resize: none;
}

@media (max-width: 700px) {
  body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-plain-hero-copy h1 {
    font-size: clamp(2.05rem, 9.2vw, 3rem);
  }

  body.yuto-booking-lab-page.yuto-web-lab-page .booking-main > .page-title {
    margin-bottom: 18px;
  }

  body.yuto-booking-lab-page.yuto-web-lab-page .yuto-booking-submit-note {
    margin-top: 10px;
    font-size: .92rem;
    line-height: 1.65;
  }
}
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button {
  font: inherit;
  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    opacity .22s ease;
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button.is-active,
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button[aria-selected="true"] {
  border-color: rgba(159, 124, 255, 0.28);
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(77, 226, 197, 0.18),
    0 0 0 6px rgba(159, 124, 255, 0.1);
}

body.yuto-booking-lab-page.yuto-web-lab-page [data-booking-lab-panel][hidden] {
  display: none;
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-activity-panel {
  grid-column: 1 / -1;
  width: min(100%, 900px);
  margin-inline: auto;
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-empty-shell {
  display: grid;
  gap: 10px;
  max-width: 760px;
  color: var(--text-soft, #c8cbda);
  font-size: 1rem;
  line-height: 1.75;
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-empty-shell p {
  margin: 0;
}

body.yuto-booking-lab-page.yuto-web-lab-page[data-booking-lab-mode="activity"] .booking-layout {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 700px) {
  /* WARN [WALL-14] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
  body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch {
    display: flex;
    margin-top: 16px;
  }
}
/* Booking Lab mode switch: keep active logic, remove pill UI */
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch {
  margin-top: clamp(18px, 2.4vw, 28px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button {
  appearance: none;
  border: 0;
  min-height: auto;
  padding: 4px 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgba(236, 240, 255, 0.74);
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.34);
  transform: none;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background / box-shadow / outline）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button:hover,
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button:focus-visible {
  color: #fff;
  background: none;
  border: 0;
  box-shadow: none;
  transform: translateY(-1px);
  outline: none;
}

body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button.is-active,
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button[aria-selected="true"] {
  color: #fff;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
  text-shadow:
    0 0 12px rgba(123, 92, 255, 0.18),
    0 1px 10px rgba(0, 0, 0, 0.34);
}

@media (max-width: 900px) {
  body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button {
    font-size: .92rem;
  }
}

@media (max-width: 700px) {
  /* WARN [WALL-25] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
  body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch {
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
  }

  body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-button {
    flex: 0 0 auto;
    padding: 4px 0;
    font-size: 1.196rem;
    line-height: 1.12;
  }
}
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch {
  --yuto-bamboo-gap-now: calc(var(--yuto-bamboo-gap-base) * var(--yuto-bamboo-scale, 1));
  --yuto-bamboo-inline-now: calc(var(--yuto-bamboo-inline-base) * var(--yuto-bamboo-scale, 1));
  --yuto-bamboo-block-now: calc(var(--yuto-bamboo-block-base) * var(--yuto-bamboo-scale, 1));
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（--yuto-bamboo-scale）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch { --yuto-bamboo-scale: var(--yuto-bamboo-scale-standard); }

/* WARN 靠【位置在後】壓過同選擇器的前一份（flex-wrap / gap）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--yuto-bamboo-gap-now);
}

/* WHAT ▸ 竹子分隔線【全站唯一定義處】：四個使用點（預約模式切換／首頁 hero／消息篩選與卡片 meta／人設切換與標籤）外觀完全一致。
   WARN 尺寸由 --yuto-bamboo-inline-now / --yuto-bamboo-block-now 兩個變數決定，各使用點自行宣告。 */
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch .yuto-bamboo-separator,
body.yuto-index-page.yuto-web-lab-page .hero-actions .yuto-bamboo-separator,
body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-separator,
body.yuto-news-lab-page .news-meta .news-meta-bamboo,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch .yuto-bamboo-separator,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch .yuto-bamboo-separator,
body.yuto-persona-lab-page.yuto-web-lab-page .tag-list .yuto-bamboo-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--yuto-bamboo-inline-now);
  height: var(--yuto-bamboo-block-now);
  margin: 0;
  padding: 0;
  opacity: .86;
  pointer-events: none;
  transform: none;
}

/* WHAT ▸ 竹子分隔線的圖片【全站唯一定義處】：填滿容器、等比不裁切、禁止拖曳。 */
body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch .yuto-bamboo-separator img,
body.yuto-index-page.yuto-web-lab-page .hero-actions .yuto-bamboo-separator img,
body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-separator img,
body.yuto-news-lab-page .news-meta .news-meta-bamboo img,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch .yuto-bamboo-separator img,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch .yuto-bamboo-separator img,
body.yuto-persona-lab-page.yuto-web-lab-page .tag-list .yuto-bamboo-separator img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

@media (max-width: 700px) {
  /* WARN [WALL-30] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
  body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch {
    --yuto-bamboo-scale: 1.24;
    --yuto-bamboo-gap-now: 4px;
    --yuto-bamboo-inline-now: calc(var(--yuto-bamboo-inline-base) * var(--yuto-bamboo-scale));
    --yuto-bamboo-block-now: calc(var(--yuto-bamboo-block-base) * var(--yuto-bamboo-scale));
    align-items: center;
    gap: var(--yuto-bamboo-gap-now);
  }

  body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch .yuto-bamboo-separator {
    width: var(--yuto-bamboo-inline-now);
    height: var(--yuto-bamboo-block-now);
    align-self: center;
    overflow: visible;
  }

  body.yuto-booking-lab-page.yuto-web-lab-page .booking-lab-mode-switch .yuto-bamboo-separator img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
body.yuto-booking-lab-page .yuto-field-select-trigger.is-loading {
  justify-content: flex-start;
  gap: 12px;
}

body.yuto-booking-lab-page .yuto-field-select-trigger.is-loading .select-text {
  flex: 1 1 auto;
}

body.yuto-booking-lab-page .yuto-field-select-trigger.is-loading::before {
  content: "";
  display: inline-block;
  align-self: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin-right: 2px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 92%, var(--yuto-loading-kamon-liquid-a) 0 34%, transparent 36%),
    linear-gradient(180deg, var(--yuto-loading-kamon-liquid-b), var(--yuto-loading-kamon-liquid-a));
  background-size: 28px 13px, 100% 100%;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask: var(--yuto-loading-kamon-image) center / contain no-repeat;
  mask: var(--yuto-loading-kamon-image) center / contain no-repeat;
  opacity: .98;
  animation: yutoKamonLiquidShift 1.4s ease-in-out infinite, yutoKamonLiquidPulse 1.1s ease-in-out infinite alternate;
}

@media (max-width: 700px) {
  body.yuto-booking-lab-page .yuto-field-select-trigger.is-loading {
    gap: 10px;
  }

  body.yuto-booking-lab-page .yuto-field-select-trigger.is-loading::before {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    background-size: 25px 12px, 100% 100%;
  }
}
body.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading .select-text {
  flex: 1 1 auto;
}

body.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading .select-chevron {
  margin-left: auto;
}

@media (max-width: 700px) {
  body.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading::before {
  background-size: 25px 12px, 100% 100%;

    width: 30px;
    height: 30px;
    min-width: 30px;
    flex: 0 0 30px;
  }
}
body.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading::before,
body.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading::after {
  position: absolute;
  left: var(--yuto-booking-loading-kamon-left);
  top: 50%;
  width: var(--yuto-booking-loading-kamon-size);
  height: var(--yuto-booking-loading-kamon-size);
  min-width: 0;
  flex: none;
  margin: 0;
  transform: translateY(-50%);
  transform-origin: center;
  pointer-events: none;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（flex / height / margin / min-width / pointer-events / transform-origin / width）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading::before {
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;
  margin: 0 2px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  opacity: .92;
  pointer-events: none;
  transform-origin: center;
  animation: yutoKamonLiquidPulse 1.1s ease-in-out infinite alternate;

  z-index: 1;
  background-image: var(--yuto-loading-kamon-image);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 700px) {
  body.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading {
  gap: 10px;

    --yuto-booking-loading-kamon-size: 30px;
    --yuto-booking-loading-kamon-left: 18px;
    --yuto-booking-loading-kamon-gap: 10px;
  }

  body.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading::after {
  left: 20px;
  width: 30px;
  height: 30px;

    background-size: 25px 12px, 100% 100%;
  }
}
body.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  --yuto-booking-loading-kamon-size: 34px;
  --yuto-booking-loading-kamon-left: 20px;
  --yuto-booking-loading-kamon-gap: 12px;
  position: relative;
  padding-left: calc(var(--yuto-booking-loading-kamon-left) + var(--yuto-booking-loading-kamon-size) + var(--yuto-booking-loading-kamon-gap));

  --yuto-booking-loading-kamon-wave-fill: 58%;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（flex / height / left / margin / min-width / pointer-events / position / top / transform / transform-origin / width）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background:
  radial-gradient(ellipse at 50% 94%, var(--yuto-loading-kamon-liquid-a, rgba(77, 226, 197, 0.88)) 0 34%, transparent 36%),
  linear-gradient(180deg, var(--yuto-loading-kamon-liquid-b, rgba(219, 207, 178, 0.84)), var(--yuto-loading-kamon-liquid-a, rgba(77, 226, 197, 0.88)));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  left: var(--yuto-booking-loading-kamon-left);
  right: auto;
  top: auto;
  bottom: calc(50% - (var(--yuto-booking-loading-kamon-size) / 2));
  width: var(--yuto-booking-loading-kamon-size);
  height: var(--yuto-booking-loading-kamon-wave-fill);
  min-width: 0;
  flex: none;
  margin: 0;
  transform: none;
  transform-origin: center bottom;
  z-index: 2;
  display: block;
  border: 0;
  border-radius: 0;
  background-image: var(--yuto-loading-kamon-image);
  background-size: 100% var(--yuto-booking-loading-kamon-size);
  background-position: center bottom;
  background-repeat: no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: polygon(
    0 16%, 8% 8%, 16% 14%, 24% 6%, 32% 13%, 40% 9%,
    48% 16%, 56% 8%, 64% 13%, 72% 5%, 80% 12%, 88% 7%, 100% 14%,
    100% 100%, 0 100%
  );
  filter: saturate(1.24) brightness(1.08) drop-shadow(0 0 4px rgba(77, 226, 197, 0.18));
  opacity: .92;
  animation:
    yutoBookingKamonWaveMask 1.05s ease-in-out infinite alternate,
    yutoBookingKamonFillIdle 1.8s ease-in-out infinite;
  will-change: clip-path, transform;
}

@media (max-width: 700px) {
  body.yuto-booking-lab-page.yuto-web-lab-page .booking-section {
    margin-bottom: 0;
    padding-bottom: clamp(8px, 2.5vw, 18px);
    border-bottom: 0;
    box-shadow: none;
  }

  body.yuto-booking-lab-page.yuto-web-lab-page .page-hero.yuto-booking-lab-plain-hero {
  padding-top: clamp(46px, 14vw, 62px);

    padding-bottom: 8px;
  }

  body.yuto-booking-lab-page.yuto-web-lab-page .booking-section.yuto-booking-content-end {
    padding-top: 8px;
  }
}

@media (min-width: 701px) {
  body.yuto-booking-lab-page.yuto-web-lab-page .page-hero.yuto-booking-lab-plain-hero {
    padding-bottom: 12px;
  }

  body.yuto-booking-lab-page.yuto-web-lab-page .booking-section.yuto-booking-content-end {
    padding-top: 12px;
  }
}
/* Booking Lab date/time select loading kamon.
   Keeps the existing coordinate variables so the icon stays in the approved field position. */
body.yuto-booking-page.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading {
  --yuto-booking-loading-kamon-size: 34px;
  --yuto-booking-loading-kamon-left: 20px;
  --yuto-booking-loading-kamon-gap: 12px;
  position: relative;
  padding-left: calc(var(--yuto-booking-loading-kamon-left) + var(--yuto-booking-loading-kamon-size) + var(--yuto-booking-loading-kamon-gap));
}

body.yuto-booking-page.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading::before,
body.yuto-booking-page.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading::after {
  content: "";
  position: absolute;
  left: var(--yuto-booking-loading-kamon-left);
  top: 50%;
  width: var(--yuto-booking-loading-kamon-size);
  height: var(--yuto-booking-loading-kamon-size);
  min-width: 0;
  flex: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-image: var(--yuto-loading-kamon-image);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
  pointer-events: none;
  transform: translateY(-50%);
}

body.yuto-booking-page.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading::before {
  z-index: 1;
  opacity: .18;
  filter:
    grayscale(.14)
    saturate(.86)
    brightness(.72)
    drop-shadow(0 0 8px rgba(77, 226, 197, 0.1));
  animation: none;
}

body.yuto-booking-page.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading::after {
  z-index: 2;
  opacity: .96;
  filter:
    saturate(1.22)
    brightness(1.1)
    drop-shadow(0 0 5px rgba(77, 226, 197, 0.18));
  animation:
    yutoKamonWaveFill 2.8s ease-in-out infinite,
    yutoKamonLiquidPulse 1.1s ease-in-out infinite alternate;
  will-change: clip-path;
}

/* Booking Lab submit progress card kamon.
   Only the kamon spinner is changed; the sword progress below remains untouched for the next step. */
/* WHAT ▸ 預約送出進度家徽：外觀來自共用元件，這裡只宣告尺寸與不被壓縮。 */
body.yuto-booking-page.yuto-booking-lab-page .submit-spinner {
  --yuto-kamon-loader-size: var(--yuto-loading-kamon-size-lg);
  flex: 0 0 var(--yuto-kamon-loader-size);
}

body.yuto-booking-page.yuto-booking-lab-page .submit-spinner::before {
  z-index: 1;
  opacity: .18;
  filter:
    grayscale(.14)
    saturate(.86)
    brightness(.72)
    drop-shadow(0 0 8px rgba(77, 226, 197, 0.1));
  animation: none;
}

@media (max-width: 700px) {
  body.yuto-booking-page.yuto-booking-lab-page .booking-section .select-trigger.yuto-field-select-trigger.is-loading {
    --yuto-booking-loading-kamon-size: 30px;
    --yuto-booking-loading-kamon-left: 18px;
    --yuto-booking-loading-kamon-gap: 10px;
  }
}
/* [YUTO-CSS-VERIFY v672] Booking Lab submit kamon frame residue fix
   Owner: P-Booking / Booking Lab submit progress kamon residue only.
   Target:
   - booking-lab submit progress card .submit-spinner only.
   Root:
   - The old .submit-spinner::after owner still had inset box-shadow.
   - v671 replaced the kamon animation but did not explicitly clear that box-shadow,
     so a square frame remained beside the submit loading text.
   Fix:
   - Clear only the residual frame/shadow/background on submit-spinner pseudo layers.
   Guard:
   - Date/time select loading from v671 untouched.
   - Payment kamon v670 untouched.
   - Sword progress untouched.
   - Booking layout / fields / buttons / HTML / JS untouched.
*/
body.yuto-booking-page.yuto-booking-lab-page .submit-spinner::before,
body.yuto-booking-page.yuto-booking-lab-page .submit-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  width: var(--yuto-kamon-loader-size);
  height: var(--yuto-kamon-loader-size);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-image: var(--yuto-loading-kamon-image);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
  pointer-events: none;
  transform: none;

  box-shadow: none;
  outline: 0;
  background-color: transparent;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（border-radius）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-booking-page.yuto-booking-lab-page .submit-spinner::after {
  z-index: 2;
  opacity: .96;
  filter:
  saturate(1.22)
  brightness(1.1)
  drop-shadow(0 0 5px rgba(77, 226, 197, 0.18));
  animation:
  yutoKamonWaveFill 2.8s ease-in-out infinite,
  yutoKamonLiquidPulse 1.1s ease-in-out infinite alternate;
  will-change: clip-path;

  border-radius: 0;
}

/* [YUTO-CSS-VERIFY v673] Booking Lab submit sword progress stage width
   Owner: P-Booking / Booking Lab submit sword progress only.
   Target:
   - booking-lab submit progress sword:
     .submit-progress-bar > .yuto-sword-progress-meter
     .yuto-sword-progress-hilt / blade / tip
   Fix:
   - Make stage progress visually clearer.
   - Keep the sword as a 3-part structure:
     hilt fixed, tip fixed, middle blade stretches.
   Guard:
   - Submit kamon loading v672 untouched.
   - Date/time select loading v671 untouched.
   - Payment kamon v670 untouched.
   - Booking layout, fields, buttons, HTML structure, API untouched.
   - Persona / News Lab / Home / Links / Privacy untouched.
*/
body.yuto-booking-page.yuto-booking-lab-page .submit-progress-bar > .yuto-sword-progress-meter {
  width: clamp(126px, var(--submit-progress-width, 22%), 100%);
  max-width: 100%;
  transition: width .32s ease;
}

body.yuto-booking-page.yuto-booking-lab-page .submit-progress.show .submit-progress-bar > .yuto-sword-progress-meter {
  animation: yutoBookingSwordDemoLoopWidth 3.2s ease-in-out infinite;
}

/* [YUTO-CSS-VERIFY v675] Booking Lab submit sword seam overlap fix
   Owner: P-Booking / Booking Lab submit sword progress seams only.
   Target:
   - booking-lab submit progress sword 3-part seams:
     Sword_hilt -> Sword_blade
     Sword_blade -> Sword_tip
   Root:
   - The PNG visible bbox leaves transparent edge space.
   - When the middle blade stretches, the blade/tip join can expose a small break.
   Fix:
   - Keep hilt and tip fixed-size.
   - Keep middle blade as the only stretchable segment.
   - Increase overlap only at the seams.
   Guard:
   - Fake loop v674 untouched.
   - Stage percent v673 untouched.
   - Submit kamon loading v672 untouched.
   - Date/time loading v671 untouched.
   - Payment kamon v670 untouched.
   - Booking layout, fields, buttons, HTML, JS, API untouched.
*/
body.yuto-booking-page.yuto-booking-lab-page .yuto-sword-progress-tip {
  flex: 0 0 var(--yuto-loading-sword-tip-width);
  width: var(--yuto-loading-sword-tip-width);
  min-width: var(--yuto-loading-sword-tip-width);
  height: var(--yuto-loading-sword-tip-height);
  align-self: center;

  margin-left: 0;
}

/* [YUTO-CSS-VERIFY v676] Booking Lab submit sword blade micro thickness and hilt seam fix
   Owner: P-Booking / Booking Lab submit sword progress blade + hilt seam only.
   Target:
   - booking-lab submit progress sword:
     1) middle blade visual thickness
     2) hilt -> blade seam overlap
   Fix:
   - Increase blade thickness by a tiny amount: 10px -> 10.8px.
   - Increase only the hilt/blade overlap slightly.
   Guard:
   - Blade/tip seam from v675 untouched.
   - Fake loop v674 untouched.
   - Stage percent v673 untouched.
   - Submit kamon loading v672 untouched.
   - Date/time loading v671 untouched.
   - Payment kamon v670 untouched.
   - Booking layout, fields, buttons, HTML, JS, API untouched.
*/
body.yuto-booking-page.yuto-booking-lab-page .submit-progress-bar > .yuto-sword-progress-meter,
body.yuto-booking-page.yuto-booking-lab-page .yuto-sword-progress-meter {
  gap: 0;
  align-items: center;

  --yuto-loading-sword-blade-height: 10.8px;
}

body.yuto-booking-page.yuto-booking-lab-page .yuto-sword-progress-hilt {
  flex: 0 0 var(--yuto-loading-sword-hilt-width);
  width: var(--yuto-loading-sword-hilt-width);
  min-width: var(--yuto-loading-sword-hilt-width);
  height: var(--yuto-loading-sword-hilt-height);
  align-self: center;

  margin-right: -9px;
}

/* [YUTO-CSS-VERIFY v677] Booking Lab submit sword blade head-tail bridge test
   Owner: P-Booking / Booking Lab submit sword blade head-tail bridge only.
   Type:
   - Visual test.
   Target:
   - Middle blade continuity underlay at both ends:
     hilt -> blade
     blade -> tip
   Fix:
   - Add a subtle continuous underlay behind the blade.
   - Extend it slightly into both seams so the blade does not look segmented.
   Guard:
   - Hilt PNG remains fixed and unscaled.
   - Tip PNG remains fixed and unscaled.
   - Fake loop v674 untouched.
   - Stage percent v673 untouched.
   - Submit kamon loading v672 untouched.
   - Date/time loading v671 untouched.
   - Payment kamon v670 untouched.
   - Booking layout, fields, buttons, HTML, JS, API untouched.
*/
body.yuto-booking-page.yuto-booking-lab-page .yuto-sword-progress-blade {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  margin-right: -12px;
  margin-left: -1px;
  height: var(--yuto-loading-sword-blade-height);

  position: relative;
  isolation: isolate;
}

body.yuto-booking-page.yuto-booking-lab-page .yuto-sword-progress-blade::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -14px;
  top: 50%;
  z-index: -1;
  height: 7.2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(32, 33, 36, 0.82) 0%,
      rgba(70, 72, 76, 0.92) 14%,
      rgba(172, 176, 181, 0.88) 47%,
      rgba(50, 52, 56, 0.96) 82%,
      rgba(24, 25, 28, 0.86) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 1px 2px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

body.yuto-booking-page.yuto-booking-lab-page .yuto-sword-progress-blade::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -12px;
  top: calc(50% - 2.2px);
  z-index: 0;
  height: 1.2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  pointer-events: none;
}

body.yuto-booking-page.yuto-booking-lab-page .yuto-sword-progress-blade svg {
  position: relative;
  z-index: 1;
}

body.yuto-booking-lab-page .yuto-btn--payment::selection,
body.yuto-booking-lab-page .yuto-btn--payment *::selection {
  background: transparent;
  color: inherit;
}

body.yuto-booking-lab-page .yuto-btn--payment,
body.yuto-booking-lab-page .yuto-btn--payment * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

body.yuto-booking-lab-page .yuto-btn--payment,
body.yuto-booking-lab-page a.yuto-btn--payment,
body.yuto-booking-lab-page button.yuto-btn--payment,
body.yuto-booking-lab-page .payment-actions .yuto-btn--payment,
body.yuto-booking-lab-page .payment-action-area .yuto-btn--payment,
body.yuto-booking-lab-page .payment-cancel-actions .yuto-btn--payment,
body.yuto-booking-lab-page .yuto-btn--payment:hover,
body.yuto-booking-lab-page .yuto-btn--payment:focus-visible,
body.yuto-booking-lab-page .yuto-btn--payment:active {
  cursor: none;
}

/* WHAT ▸ V738 Booking Lab pending payment recovery display layer Source: V737 recovery copy + desktop-only text-width / PNG-button centering cleanup. Scope: #pendingPaymentRecovery only. Preserve payment/cancel JS ids and flow. Layer relation: - Layer 0: transparent Links-card panel, no glow/kamon/sheen pseudo decoration. - Layer 1: text content. - Layer 2: PNG button interaction layer; native cursor hidden in fake-cursor mode. */
body.yuto-booking-page .yuto-payment-recovery--links {
  position: relative;
  z-index: 3;
  margin: 0 0 24px;
  color: #f7f8ff;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-card--links {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  column-gap: 20px;
  row-gap: 14px;
  align-items: center;
  padding: clamp(22px, 2.2vw, 28px) 18px clamp(22px, 2.2vw, 28px) clamp(28px, 3vw, 40px);
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  isolation: isolate;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-card--links::before,
body.yuto-booking-page .yuto-payment-recovery--links .ypr-card--links::after {
  content: none;
  pointer-events: none;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-content--links {
  min-width: 0;
  position: relative;
  z-index: 1;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-title--links {
  margin: 0 0 16px;
  font-size: clamp(1.28rem, 2.2vw, 1.64rem);
  line-height: 1.24;
  letter-spacing: -.02em;
  color: #f7f8ff;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-lines {
  min-width: 0;
  display: grid;
  gap: 8px;
  color: rgba(215, 220, 244, 0.9);
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-line {
  min-width: 0;
  font-size: clamp(.95rem, 1.7vw, 1.05rem);
  line-height: 1.56;
  letter-spacing: .01em;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-line--service {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .72em;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-nowrap {
  white-space: nowrap;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-actions--links {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: 330px;
  min-width: 330px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  justify-items: center;
  align-content: center;
  margin: 0;
  padding: 0;
}

@media (min-width: 981px) {
  body.yuto-booking-page .yuto-payment-recovery--links .ypr-title--links {
    white-space: nowrap;
  }

  body.yuto-booking-page .yuto-payment-recovery--links .ypr-actions--links {
    transform: translateX(8px);
  }
}

@media (max-width: 980px) {
  body.yuto-booking-page .yuto-payment-recovery--links .ypr-card--links {
    grid-template-columns: 1fr;
    padding-right: 24px;
  }

  body.yuto-booking-page .yuto-payment-recovery--links .ypr-actions--links {
    justify-self: start;
    width: min(370px, 100%);
    min-width: 0;
  }
}

@media (max-width: 700px) {
  body.yuto-booking-page .yuto-payment-recovery--links {
    margin-bottom: 18px;
  }

  body.yuto-booking-page .yuto-payment-recovery--links .ypr-card--links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
    padding: 17px;
    border-radius: 18px;
  }

  body.yuto-booking-page .yuto-payment-recovery--links .ypr-title--links {
    margin-bottom: 14px;
    font-size: 1.22rem;
    line-height: 1.28;
  }

  body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-line {
    font-size: .95rem;
    line-height: 1.62;
  }

  body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-nowrap {
    white-space: normal;
  }

  body.yuto-booking-page .yuto-payment-recovery--links .ypr-actions--links {
    width: 100%;
    min-width: 0;
    gap: 9px;
    justify-items: stretch;
  }
}
/* WHAT ▸ yuto-booking-pending-cancel-modal-payment-ui-v736 Scope: Booking page pending-payment cancel confirmation modal only. Source visual: payment page cancel modal / payment-button system. Logic guard: keeps Booking recovery IDs and JS flow; no ECPay/session/API change. Layer map: - Layer 0: .ypr-modal--payment-ui viewport overlay blur/backdrop - Layer 1: .payment-cancel-dialog modal panel - Layer 2: .payment-cancel-actions .yuto-btn--payment click targets */
body.yuto-booking-page .ypr-modal.ypr-modal--payment-ui.payment-cancel-modal:not(.is-hidden) {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 9000;
  display: grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-bottom));
  color: #f7f8ff;
  background: rgba(3, 8, 30, 0.74);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  isolation: isolate;
}

body.yuto-booking-page .ypr-modal.ypr-modal--payment-ui.payment-cancel-modal.is-hidden,
body.yuto-booking-page .ypr-modal.ypr-modal--payment-ui.payment-cancel-modal[hidden] {
  display: none !important;
}

body.yuto-booking-page .ypr-modal--payment-ui .payment-cancel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.yuto-booking-page .ypr-modal--payment-ui .payment-cancel-dialog {
  position: relative;
  z-index: 1;
  max-height: calc(100dvh - max(40px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 40px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  color: #f7f8ff;
}

/* WHAT ▸ 取消對話框的按鈕列：間距與排列方式與付款頁完全一致。
   WHY  兩頁的取消對話框是同一個東西，按鈕列的三段響應式（並排 4px／堆疊 10px／
        超窄手機 6px）必須同步。付款頁那份綁在三選擇器共用群組裡（含 .payment-actions
        與 .payment-action-area），不能單獨拆出，故以本規則對齊其值。
   WARN 改動時兩邊都要改 —— 付款頁在 body.yuto-payment-lab-page .payment-actions 那組。 */
body.yuto-booking-page .ypr-modal--payment-ui .payment-cancel-actions {
  display: flex;
  justify-content: center;
  inline-size: 100%;
  max-inline-size: 100%;
  /* WHY 上邊距 22px 與付款頁一致（見 body.yuto-payment-lab-page .payment-actions 那組）。
        左右 auto 是本對話框自己的置中需求，付款頁由其群組的 margin-left/right: auto 提供。 */
  margin: 22px auto 0;
}

@media (min-width: 1081px) {
  /* 【雙生子B】預約頁付款救援彈窗按鈕,複製自【雙生子A】(付款頁)。改任一處請同步另一處。 */
  body.yuto-booking-page .ypr-modal--payment-ui .payment-cancel-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-columns: none;
    justify-content: center;
    align-items: center;
    justify-items: center;
    column-gap: 4px;
    row-gap: 0;
    inline-size: 100%;
    max-inline-size: 100%;
  }
}

@media (max-width: 760px) {
  body.yuto-booking-page .ypr-modal.ypr-modal--payment-ui.payment-cancel-modal:not(.is-hidden) {
    padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-bottom));
  }

  body.yuto-booking-page .ypr-modal--payment-ui .payment-cancel-dialog {
    width: min(calc(100vw - 28px), 430px);
    max-height: calc(100dvh - max(34px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 34px));
    padding: 20px;
    border-radius: 22px;
  }
}

/* WHY 兩顆並排需 514.7px；本對話框寬度上限 560px，扣掉內距後裝不下，
      窄視窗一律堆疊。門檻與【雙生子A】(付款頁) 相同，改任一處請同步另一處。 */
@media (max-width: 1080px) {
  body.yuto-booking-page .ypr-modal--payment-ui .payment-cancel-actions {
    /* WHY 一顆一行：按鈕圖依 50 號圖比例約 284px，並排時每顆只分到約半寬，
          左右會各裁掉約 61px、金框被切。與付款頁同一套處置。 */
    gap: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }
}

@media (max-width: 360px) {
  body.yuto-booking-page .ypr-modal--payment-ui .payment-cancel-actions {
    gap: 6px;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  body.yuto-booking-page .ypr-modal.ypr-modal--payment-ui.payment-cancel-modal:not(.is-hidden) {
    padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom));
  }

  body.yuto-booking-page .ypr-modal--payment-ui .payment-cancel-dialog {
    max-height: calc(100dvh - 24px);
  }
}
body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-block {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-label {
  margin: 0;
  color: rgba(235, 239, 255, 0.88);
  font-size: clamp(.9rem, 1.55vw, 1rem);
  line-height: 1.45;
  font-weight: 850;
  letter-spacing: .01em;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-lines--structured .ypr-recovery-line {
  margin: 0;
  color: rgba(247, 248, 255, 0.96);
  font-weight: 900;
}

body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-lines--structured .ypr-recovery-line--service {
  display: block;
  color: rgba(247, 248, 255, 0.94);
  font-weight: 850;
}

@media (max-width: 700px) {
  body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-lines--structured {
    gap: 12px;
  }

  body.yuto-booking-page .yuto-payment-recovery--links .ypr-recovery-label {
    font-size: .9rem;
    line-height: 1.5;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-B 區　index 專屬                                           ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -2px;
  z-index: 4;
  height: 6px;
  background: rgba(4, 5, 12, 1);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   【尺寸修飾成長規則・務必遵守】一個「尺寸」＝一個具名修飾。永不在按鈕身上直接蓋大小。
   決策表：
   1. 改掉某尺寸、套它的按鈕全部一起變 → 改那個修飾的「定義」(例如改 --sm 這行的數字)
   2. 新增一種尺寸、舊的保留         → 「新寫」一個具名修飾 (例如 --xs 更小 / --lg 更大)
   3. 只改其中一顆、不動同修飾的其他 → 給那一顆「新寫」一個專屬修飾 (不可改共享的 --sm)
   反例(禁止)：在某按鈕上加一條 height/font-size override 蓋過 yuto-btn ——
   這會變回「基礎＋變小＋又變大」的疊層歷史，正是本次重構要根除的東西。
   ───────────────────────────────────────────────────────────── */

/* 尺寸修飾（改高度＝整體大小；通用可複用，任何想小一號的按鈕都能套）
   要改小按鈕的大小＝只改這裡，全站套 --sm 者同步，永遠單一出處不疊層。 */
body.yuto-web-lab-page .yuto-btn--sm { --yuto-btn-h: 38px; font-size: 14.5px; }

@media (hover: none) and (pointer: coarse) {
  body.yuto-page-bg .yuto-bamboo-link,
  body.yuto-page-bg .news-action-link,
  body.yuto-page-bg .copy-mail-btn {
    touch-action: manipulation;
  }

  body.yuto-page-bg .note-card,
  body.yuto-index-page .hero-card > h1,
  body.yuto-index-page .hero-card > .hero-text,
  body.yuto-index-page .contact-mail,
  body.yuto-index-page .copy-toast {
    touch-action: manipulation;
  }
}

@media (max-width: 700px) {
  body.yuto-index-page .hero-card { display: flex; flex-direction: column; justify-content: flex-end; }

  body.yuto-index-page .section { padding-bottom: 18px; }
}

@media (max-width: 420px) {
  body.yuto-index-page .hero-actions .yuto-bamboo-link { flex-basis: 100%; }
}
/* WHAT ▸ Index Contact Copy Module v1 */
body.yuto-index-page .contact-mail {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  color: rgba(246, 247, 251, 0.92);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 800;
  line-height: 1.45;
  word-break: break-all;
}

body.yuto-index-page .copy-toast {
  opacity: 0;
  transform: translateY(6px);
  margin: 20px 0 0;
  color: rgba(246, 247, 251, 0.92);
  font-weight: 800;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

body.yuto-index-page .copy-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* WHAT ▸ Index Base Layout / Button / Motion Source Contract v019 */
body.yuto-index-page .hero-card {
  /* WHY base 給「乾淨底」不給框：base 有框 → 每個尺寸都要各自去框（疊床架屋），新增尺寸還會掉回舊框。position/overflow/isolation 是結構性的，保留 → PRIN-15 */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.yuto-index-page .hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at center, transparent 60%, rgba(7, 9, 15, 0.44) 100%),
    linear-gradient(90deg, rgba(7, 9, 15, 0.23), transparent 27%, transparent 73%, rgba(7, 9, 15, 0.23));
  box-shadow: inset 0 0 40px rgba(5, 7, 12, 0.36);
  pointer-events: none;
}

body.yuto-index-page .hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  filter: saturate(0.92) contrast(1.04) brightness(0.88);
}

body.yuto-index-page .hero-card > .tag,
body.yuto-index-page .hero-card > h1,
body.yuto-index-page .hero-card > .hero-text,
body.yuto-index-page .hero-card > .hero-actions {
  position: relative;
  z-index: 3;
}

body.yuto-index-page .hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.2rem, 5vw, 4rem);
}

body.yuto-index-page .hero-text {
  margin: 0;
  max-width: 760px;
  color: var(--text-soft);
  font-size: 1.08rem;
}

body.yuto-index-page .yuto-bamboo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s ease;
  cursor: pointer;
}

body.yuto-index-page .section {
  padding: 0 0 26px;
}

@media (max-width: 700px) {
  body.yuto-index-page .hero {
    padding: 56px 0 34px;
  }

  /* WARN [WALL-34] 承重牆：靠【位置在後】壓過 body.yuto-index-page .section-card 的 padding。
       上移、合併或跨區搬動 → 生效樣式翻轉 */
  body.yuto-index-page .hero-card,
  body.yuto-index-page .section-card {
    padding: 22px;
  }
}
body.yuto-index-page .note-card {
  border-radius: var(--radius-lg);
  padding: 24px;
}

body.yuto-index-page .note-card p {
  margin: 0;
  color: var(--text-soft);
}

body.yuto-index-page .note-grid {
  display: grid;
  gap: 18px;
}

body.yuto-index-page .note-card h3 {
  font-size: 1.08rem;
}

body.yuto-index-page .contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.yuto-index-page .contact-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 250px;
  position: relative;
  overflow: hidden;
}

body.yuto-index-page .contact-card h3,
body.yuto-index-page .contact-card p,
body.yuto-index-page .contact-mail,
/* WARN z-index 保留：.yuto-btn 標準未設，無法驗證移除安全（可能防止按鈕被背景層蓋住）→ 不臆測（鐵律二） */
body.yuto-index-page .copy-mail-btn {
  z-index: 1;
}

@media (max-width: 920px) {
  body.yuto-index-page .note-grid {
    grid-template-columns: 1fr;
  }
}
/* WHAT ▸ Public Page Shell Spacing Unify Module v1 */ /* WARN [WALL-35] 承重牆：靠【位置在後】壓過 body.yuto-persona-page .profile-section.yuto-public-content-start 的 padding-top。 上移、合併或跨區搬動 → 生效樣式翻轉 */ body.yuto-index-page .hero.yuto-public-content-start,
body.yuto-links-page .page-hero.yuto-public-content-start,
body.yuto-page-bg .news-section.yuto-news-content-frame {
  padding-top: var(--yuto-public-content-start-gap-desktop);
}

@media (min-width: 701px) and (max-width: 1100px) {
  /* WARN [WALL-35] 承重牆：靠【位置在後】壓過 body.yuto-persona-page .profile-section.yuto-public-content-start 的 padding-top。 上移、合併或跨區搬動 → 生效樣式翻轉 */ body.yuto-index-page .hero.yuto-public-content-start,
  body.yuto-links-page .page-hero.yuto-public-content-start,
  body.yuto-page-bg .news-section.yuto-news-content-frame {
    padding-top: var(--yuto-public-content-start-gap-tablet);
  }
}

@media (max-width: 700px) {
  /* WARN [WALL-35] 承重牆：靠【位置在後】壓過 body.yuto-persona-page .profile-section.yuto-public-content-start 的 padding-top。 上移、合併或跨區搬動 → 生效樣式翻轉 */ body.yuto-index-page .hero.yuto-public-content-start,
  body.yuto-links-page .page-hero.yuto-public-content-start,
  body.yuto-page-bg .news-section.yuto-news-content-frame {
    padding-top: var(--yuto-public-content-start-gap-mobile);
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  /* WARN [WALL-35] 承重牆：靠【位置在後】壓過 body.yuto-persona-page .profile-section.yuto-public-content-start 的 padding-top。 上移、合併或跨區搬動 → 生效樣式翻轉 */ body.yuto-index-page .hero.yuto-public-content-start,
  body.yuto-links-page .page-hero.yuto-public-content-start,
  body.yuto-page-bg .news-section.yuto-news-content-frame {
    padding-top: var(--yuto-public-content-start-gap-landscape);
  }
}
body.yuto-web-lab-page .hero-card,
body.yuto-web-lab-page .section-card,
body.yuto-web-lab-page .note-card {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.yuto-web-lab-page .hero-bg-image {
  border-radius: 0;
}

body.yuto-web-lab-page .hero-bg-image[aria-hidden="true"] {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* WHAT ▸ Homepage Lab Social Icon Strip v003 */
body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip-section {
  position: relative;
  z-index: 3;
  padding: clamp(8px, 1.2vw, 16px) 0 clamp(34px, 5vw, 64px);
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.35vw, 28px);
  flex-wrap: nowrap;
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-social-link {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(101px, 10.92vw, 139px);
  height: clamp(101px, 10.92vw, 139px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: .96;
  -webkit-tap-highlight-color: transparent;
  /* 【社群連結 hover 修正 v73】原 transition 只列了 opacity/filter，但 hover 用 transform(translateY+scale)，
     transform 沒被過渡→hover 時瞬間跳。這裡把 transform 加進 transition，hover 才平滑。 */
  transition:
    opacity .22s ease,
    filter .22s ease,
    transform .22s ease;
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-social-link:hover {
  opacity: 1;
  transform: translateY(-3px) scale(1.035);
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.3));
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-social-link:active {
  transform: translateY(0) scale(.97);
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-social-link:focus-visible {
  outline: 2px solid rgba(124, 241, 255, 0.42);
  outline-offset: 10px;
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-social-link img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 700px) {
  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip-section {
    padding: 4px 0 36px;
  }

  /* WARN [WALL-07] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip {
    justify-content: flex-start;
    gap: clamp(12px, 3.4vw, 16px);
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 12px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip::-webkit-scrollbar {
    display: none;
  }

  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-link {
    width: clamp(80px, 21vw, 97px);
    height: clamp(80px, 21vw, 97px);
  }
}

@media (max-width: 380px) {
  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip {
    gap: 10px;
  }

  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-link {
    width: 76px;
    height: 76px;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip-section {
    padding: 2px 0 28px;
  }

  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip {
    width: min(860px, 100%);
    justify-content: center;
    gap: clamp(14px, 2.1vw, 20px);
    overflow: visible;
    padding: 0;
  }

  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-link {
    width: clamp(76px, 9.1vw, 88px);
    height: clamp(76px, 9.1vw, 88px);
  }
}
body.yuto-web-lab-page .home-news-carousel-section {
  position: relative;
  padding: 6px 0 38px;
}

body.yuto-web-lab-page .yuto-home-news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

body.yuto-web-lab-page .yuto-home-news-head h2 {
  margin: 0;
}

body.yuto-web-lab-page .yuto-home-news-all-link {
  flex: 0 0 auto; /* WARN flex / justify-self 保留：.yuto-btn 標準未設，格線定位需要 */
  justify-self: end;
}

body.yuto-web-lab-page .yuto-home-news-carousel {
  --yuto-home-news-bleed: clamp(32px, 10vw, 180px);
  --yuto-scrollbar-safe: 0px;
  position: relative;
  /* 【杯水同進 v103】輪播容器一開始藏起來(opacity:0),等資料+圖片都好、JS 加上 .is-ready 才整體(杯子+卡片一起)淡入。避免「杯子(空框)先出現、水(縮圖)後填入」的兩段跳動。min-height 已先佔位,所以藏著也不會塌、不推擠下面。 */
  opacity: 0;
  transform: translateY(18px);
  min-height: clamp(165px, calc(23.2vw + 20px), 229px);
  width: calc(100% + (var(--yuto-home-news-bleed) * 2) - var(--yuto-scrollbar-safe));
  max-width: none;
  margin-left: calc(var(--yuto-home-news-bleed) * -1);
  overflow: hidden;
  border-radius: 28px;
  padding: 16px 0 22px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* 【杯水同進 v103】資料+圖片都好後,JS 加 .is-ready → 整個輪播(杯子+卡片)一起淡入+上滑。用全站共用的進場曲線。 */
body.yuto-web-lab-page .yuto-home-news-carousel.is-ready {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s var(--yuto-ease-out), transform 0.7s var(--yuto-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  body.yuto-web-lab-page .yuto-home-news-carousel {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
body.yuto-web-lab-page .yuto-home-news-track {
  display: flex;
  align-items: center;
  gap: 22px;
  will-change: transform;
  /* 【抽動修復 v102】track 撐滿 carousel 預留高度,讓「正在讀取」訊息在預留空間裡垂直置中,不會偏上留白。卡片是 align-items:stretch 撐滿,不受影響。 */
  min-height: inherit;
}

/* WHAT ▸ 首頁最新消息的狀態訊息（載入中／沒有消息／讀取失敗）在輪播軌道裡橫向置中。
   WHY  軌道是 flex，狀態訊息是軌道裡的一個成員 → flex 預設從最左邊排，所以訊息會貼在最左。
        用左右 auto 外距讓它自己吃掉兩側空間而置中；【不動軌道本身】，卡片排列完全不受影響。
        （垂直置中早已由上面的 min-height + align-items 處理。） */
body.yuto-web-lab-page .yuto-home-news-track > .news-status-message {
  margin-inline: auto;
}

/* WHAT ▸ 首頁最新消息舞台：輪播 ＋ 載入指示器共用同一塊區域（指示器疊在輪播上）。
   WHY  輪播在資料就緒前是 opacity:0（杯水同進 → PRIN-03），任何放在它【裡面】的載入訊息都永遠看不到；
        因此載入指示器改放在輪播外面，由這個舞台提供定位基準。輪播本身的淡入行為完全不動。 */
body.yuto-web-lab-page .yuto-home-news-stage {
  position: relative;
}

/* WHAT ▸ 首頁載入指示器：家徽＋文字置中疊在輪播區域上。
   WHY  家徽外觀來自共用元件 .yuto-kamon-loader（全站唯一定義處），這裡只負責位置與尺寸。 */
body.yuto-web-lab-page .yuto-home-news-loading {
  --yuto-kamon-loader-size: var(--yuto-loading-kamon-size-lg);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  transition: opacity .45s var(--yuto-ease-out);
}

/* WHY 資料＋圖片就緒時 JS 在輪播加 .is-ready → 指示器淡出、卡片同時淡入，完成交棒 */
body.yuto-web-lab-page .yuto-home-news-carousel.is-ready ~ .yuto-home-news-loading {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--yuto-ease-out), visibility 0s linear .45s;
}

@media (max-width: 700px) {
  body.yuto-web-lab-page .yuto-home-news-loading {
    --yuto-kamon-loader-size: 30px;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.yuto-web-lab-page .yuto-home-news-loading,
  body.yuto-web-lab-page .yuto-home-news-carousel.is-ready ~ .yuto-home-news-loading {
    transition: none;
  }
}

body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card {
  background-clip: padding-box;

  --yuto-news-card-media-width: 100%;
  --yuto-news-card-media-height: clamp(158px, 14.2vw, 207px);
  position: relative;
  flex: 0 0 clamp(294px, calc(41.25vw + 35.75px), 407px);
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.028)),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  /* WHY 卡片預設就全尺寸＋全亮：全部一樣大、一樣亮，不做聚光燈暗化 → PRIN-22 */
  transform: translateZ(0) scale(1);
  opacity: 1;
  transition:
    opacity .34s ease,
    transform .34s var(--yuto-ease-out),
    border-color .34s ease,
    filter .34s ease;
}

/* WHY hover 放大只給【真的有滑鼠】的裝置：觸控裝置「按著不放」會誤觸發 hover 且會黏住不退。
     沿用站上刀游標同一套裝置分流寫法（hover:hover + pointer:fine）。
   WHY 放大而非縮小：hover 是「可以點」的提示，縮小會讓人以為已經按下去了。 */
@media (hover: hover) and (pointer: fine) {
  body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card:hover {
    transform: translateZ(0) scale(1.03);
    border-color: rgba(159, 124, 255, 0.22);
    box-shadow: none;
  }
}

/* WHAT ▸ 按壓回饋：電腦點擊與手機「按著」都會觸發 :active → 微縮小做按下去的手感，放開自動回彈。
   WARN 必須排在 hover 之後：兩者 specificity 相同，靠【位置在後】才壓得過放大。前移即失效。 */
body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card:active {
  transform: translateZ(0) scale(.97);
  border-color: rgba(159, 124, 255, 0.22);
  box-shadow: none;
  transition-duration: .12s;
}

body.yuto-web-lab-page .yuto-home-news-slide.is-active {
  opacity: 1;
  transform: translateZ(0) scale(1);
  border-color: rgba(159, 124, 255, 0.28);
}

body.yuto-web-lab-page .yuto-home-news-slide.is-dimmed {
  /* WHY 兩側卡不暗化（JS 仍 toggle is-dimmed，但視覺不變暗）→ PRIN-22 */
  opacity: 1;
}

body.yuto-web-lab-page .yuto-home-news-media.news-gallery,
body.yuto-web-lab-page .yuto-home-news-slide .yuto-news-card-media,
body.yuto-web-lab-page .yuto-home-news-slide .news-gallery {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  background: rgba(0, 0, 0, 0.18);
}

body.yuto-web-lab-page .yuto-home-news-slide .yuto-news-card-media-frame,
body.yuto-web-lab-page .yuto-home-news-slide .news-gallery-frame {
  border: 0;
  outline: 0;
  box-shadow: none;

  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border-radius: 0;
}

body.yuto-web-lab-page .yuto-home-news-slide img {
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

body.yuto-web-lab-page .yuto-home-news-caption {
  /* WARN 此 class 只用在首頁；首頁組的 specificity 較高，會永遠蓋過這裡的 bottom/padding/background */
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

body.yuto-web-lab-page .yuto-home-news-caption .yuto-news-card-meta {
  margin-bottom: 8px;
}

body.yuto-web-lab-page .yuto-home-news-caption .yuto-news-card-title {
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.yuto-web-lab-page .yuto-home-news-caption .yuto-news-card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 0;
  overflow: hidden;
}

body.yuto-web-lab-page .home-contact-unframed {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.yuto-web-lab-page .home-contact-unframed > .section-head {
  margin-bottom: 18px;
}

@media (max-width: 900px) {
  body.yuto-web-lab-page .yuto-home-news-head {
    align-items: start;
  }
}

@media (max-width: 640px) {
  body.yuto-web-lab-page .home-news-carousel-section {
    padding-bottom: 28px;
  }

  body.yuto-web-lab-page .yuto-home-news-carousel {
    --yuto-home-news-bleed: clamp(16px, 5vw, 42px);
    width: calc(100% + (var(--yuto-home-news-bleed) * 2));
    padding-block: 12px 18px;
    border-radius: 22px;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }

  body.yuto-web-lab-page .yuto-home-news-track {
    gap: 16px;
  }

  body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card {
    border-radius: 22px;
  }
}

@media (max-width: 700px) {
  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip-section {
    --yuto-home-news-bleed: clamp(16px, 5vw, 42px);
    --yuto-home-social-fade-in: 4%;
    --yuto-home-social-fade-out: 96%;
    overflow: visible;
  }

  /* WARN [WALL-08] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip {
    width: calc(100% + (var(--yuto-home-news-bleed) * 2));
    margin-left: calc(var(--yuto-home-news-bleed) * -1);
    padding-inline: var(--yuto-home-news-bleed);
    mask-image: linear-gradient(90deg, transparent, #000 var(--yuto-home-social-fade-in), #000 var(--yuto-home-social-fade-out), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--yuto-home-social-fade-in), #000 var(--yuto-home-social-fade-out), transparent);
  }
}

@media (max-width: 640px) {
  body.yuto-index-page.yuto-web-lab-page .yuto-home-news-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  body.yuto-index-page.yuto-web-lab-page .yuto-home-news-all-link {
    justify-self: auto;  }
}

@media (min-width: 701px) {
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-card h3 {
  margin-bottom: 4px;

    margin: 0 0 4px;
  }

  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-card p {
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-card {
    gap: 4px;
  }

  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-card h3 {
  margin-bottom: 2px;

    margin: 0 0 2px;
  }

  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-card p {
  margin-bottom: 2px;

    margin: 0 0 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.yuto-web-lab-page .yuto-home-news-track {
    transform: none;
  }
}
/* v037 final override: carousel thumbnail bottom must finish black, not white.
   Placed late on purpose so normal / hover / active border declarations cannot re-open a white subpixel line. */
body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card,
body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card:hover,
body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card.is-active {
  border-bottom-color: rgba(4, 5, 12, 1);
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background / bottom / content / height / left / pointer-events / position / right / z-index）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card::after,
body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card:hover::after,
body.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card.is-active::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -3px;
  z-index: 6;
  height: 10px;
  background: rgba(4, 5, 12, 1);
  pointer-events: none;
}

@media (min-width: 901px) {
  body.yuto-index-page.yuto-web-lab-page .hero.yuto-public-content-start,
  body.yuto-index-page.yuto-web-lab-page .home-news-carousel-section {
    position: relative;
  }

  body.yuto-index-page.yuto-web-lab-page .hero.yuto-public-content-start {
    padding-top: 0;
    padding-bottom: clamp(6px, 1.2vw, 18px);
  }

  body.yuto-index-page.yuto-web-lab-page .hero.yuto-public-content-start > .container {
    width: var(--content);
    max-width: var(--content);
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card {
    --yuto-hero-bleed: clamp(42px, 10vw, 190px);
    --yuto-hero-safe-left: calc(var(--yuto-hero-bleed) + clamp(36px, 5vw, 92px));
    --yuto-hero-safe-right: calc(var(--yuto-hero-bleed) + clamp(28px, 4vw, 76px));
    width: calc(100% + (var(--yuto-hero-bleed) * 2));
    height: var(--yuto-hero-scroll-height);
    min-height: 0;
    margin-left: calc(var(--yuto-hero-bleed) * -1);
    transform: none;
    overflow: hidden;
    padding:
      clamp(166px, 19vw, 266px)
      var(--yuto-hero-safe-right)
      clamp(72px, 8vw, 122px)
      var(--yuto-hero-safe-left);
    /* WARN outline: 0 保留 —— 它是【焦點外框】控制，與 PRIN-15 說的「框」無關，不可一起清掉 */
    outline: 0;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card::before,
  body.yuto-index-page.yuto-web-lab-page .hero-card::after,
  body.yuto-index-page.yuto-web-lab-page .hero.yuto-public-content-start::after,
  body.yuto-index-page.yuto-web-lab-page .home-news-carousel-section::before {
    display: none;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-bg-video.hero-bg-image {
    left: 50%;
    right: auto;
    top: 0;
    bottom: auto;
    width: var(--yuto-hero-scroll-image-size);
    height: var(--yuto-hero-scroll-image-size);
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center top;
    filter: saturate(0.94) contrast(1.04) brightness(0.89);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.82) 75%, rgba(0, 0, 0, 0.26) 81%, transparent 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.82) 75%, rgba(0, 0, 0, 0.26) 81%, transparent 85%, transparent 100%);
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card > h1,
  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-text,
  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-actions {
    max-width: min(650px, 46vw);
  }

  body.yuto-index-page.yuto-web-lab-page .hero-scroll-cue.yuto-cloud-scroll-cue {
    appearance: none;
    position: relative;
    z-index: 2;
    display: block;
    width: 184px;
    height: 74px;
    margin: clamp(-4px, -.4vw, 0px) auto clamp(8px, 1.8vw, 26px);
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: transparent;
    opacity: var(--yuto-hero-cue-opacity);
    transform: translateY(var(--yuto-hero-cue-y));
  }

  body.yuto-index-page.yuto-web-lab-page .hero-scroll-cue.yuto-cloud-scroll-cue:focus-visible {
    outline: 2px solid rgba(124, 241, 255, 0.42);
    outline-offset: 4px;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-scroll-cue.yuto-cloud-scroll-cue .yuto-cloud-cue-line {
    position: absolute;
    height: 8px;
    border-radius: 999px;
    background: rgba(68, 83, 176, 0.44);
    box-shadow: 0 0 18px rgba(124, 241, 255, 0.055);
    animation: yutoHeroCloudCueFloat 2.15s ease-in-out infinite;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-scroll-cue.yuto-cloud-scroll-cue .yuto-cloud-cue-line:nth-child(7) {
    width: 66px;
    left: 62px;
    top: 64px;
    opacity: .34;
    animation-delay: .30s;
  }

  body.yuto-web-lab-page .contact-card {
    min-height: auto;
  }

  body.yuto-web-lab-page .contact-mail-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
  }

  body.yuto-web-lab-page .contact-mail-row .contact-mail {
    min-width: min(100%, 260px);
    margin: 0;
  }

  body.yuto-web-lab-page .contact-mail-row .copy-mail-btn {
    flex: 0 0 auto; /* WARN flex 保留：.yuto-btn 標準未設，聯絡列排版需要 */
  }

  body.yuto-web-lab-page .contact-card::before {
    display: none;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  /* 1) hero-card:手機式(無框、overflow visible) */
  body.yuto-index-page.yuto-web-lab-page .hero-card {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    /* ★可調:平板(手機格式)hero 內距 */
    padding: clamp(20px, 4vw, 40px) clamp(18px, 3vw, 36px);
    transform: none;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card::before,
  body.yuto-index-page.yuto-web-lab-page .hero-card::after {
    content: none;
    display: none;
  }

  /* 【LOGO被fade真兇根治 v107d】::before(舊 v030 color overlay)會在頭部/LOGO 區蓋深色漸層。擴展的 ≤900 區塊會啟用它,平板需關掉。用更高 specificity(多一個 .yuto-has-bg-texture,此 class 固定寫在 body 上)贏過啟用規則,不需 !important。圖片 fade 由圖片自己的 mask 負責。 */
  body.yuto-index-page.yuto-web-lab-page.yuto-has-bg-texture .hero-card::before {
    content: none;
    display: none;
    background: none;
  }

  /* WARN soft-crop mask 不可套在 .hero-card 本身 —— 會連 LOGO 一起 fade。用更高 specificity 關掉（不用 !important），圖片 fade 由圖片自己的 mask 負責 → PRIN-16 */
  body.yuto-index-page.yuto-web-lab-page.yuto-has-bg-texture .hero-card,
  body.yuto-index-page.yuto-web-lab-page.yuto-has-bg-texture .hero-card[data-yuto-hero-exit="soft-crop"] {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* 2) 顯示手機人像圖(mobile-hero-media) */
  body.yuto-index-page.yuto-web-lab-page .hero-card > .yuto-mobile-hero-media {
    display: block;
    position: relative;
    z-index: 0;
    /* ★可調:平板人像圖寬度(可比手機大一點) */
    width: min(74vw, 560px);
    max-width: 100%;
    margin: -6px auto 0;
    padding: 0;
    line-height: 0;
    pointer-events: none;
    overflow: visible;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card > .yuto-mobile-hero-media > .yuto-mobile-hero-media-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    /* WHY 遮罩只套在圖片上，讓圖片下緣真的淡出成透明；LOGO 是獨立元素，不受影響 → PRIN-16 */
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 50%,
        rgba(0, 0, 0, 0.84) 62%,
        rgba(0, 0, 0, 0.52) 75%,
        rgba(0, 0, 0, 0.18) 88%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 50%,
        rgba(0, 0, 0, 0.84) 62%,
        rgba(0, 0, 0, 0.52) 75%,
        rgba(0, 0, 0, 0.18) 88%,
        transparent 100%
      );
  }

  /* 3) 隱藏桌機大圖(hero-bg-image)、文案(hero-text) */
  body.yuto-index-page.yuto-web-lab-page .hero-bg-video.hero-bg-image {
    display: none;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-text {
    display: none;
  }

  /* 【真抽出重構 v107 · 症狀③】隱藏 LOGO 下方的超連結(認識悠人/報名預約/連結清單)。跟手機(≤700)一致——手機格式不顯示這排。 */
  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-actions {
    display: none;
    pointer-events: none;
    visibility: hidden;
  }

  /* 4) LOGO:【真抽出重構 v107 · 症狀②】改用跟手機(≤700)完全相同的尺寸/定位,不要用桌機大 LOGO,也不要我之前亂設的中間值(那會錯位)。 */
  body.yuto-index-page.yuto-web-lab-page .hero-card > h1 {
    position: absolute;
    left: clamp(18px, 5vw, 30px);
    right: auto;
    bottom: clamp(22px, 6vw, 42px);
    max-width: 44vw;
    margin: 0;
    pointer-events: none;
    translate: 0 0;
  }

  /* 關掉右上角光暈(跟手機一致) */
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-card.contact-card::before,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-card.contact-card::after,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail::before,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail::after {
    content: none;
    display: none;
    background: none;
    box-shadow: none;
  }

  /* 卡片邊框/陰影比照手機(乾淨、無框光) + 留白特規(min-height 依內容,不撐 250px) */
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-card.contact-card,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail {
    border-top-color: rgba(255, 255, 255, 0);
    box-shadow: none;
    background-clip: padding-box;
    min-height: auto;
  }
}

@media (max-width: 700px) {
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail-row .contact-mail {
    min-width: min(100%, 260px);
    max-width: 100%;
    margin: 0;
  }

  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail-row .copy-mail-btn {
    flex: 0 0 auto; /* WARN flex 保留：手機斷點聯絡列排版需要 */
  }

  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;

    margin-top: 0;
    gap: 30px;
    row-gap: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.yuto-web-lab-page .hero-scroll-cue.yuto-cloud-scroll-cue .yuto-cloud-cue-line,
  body.yuto-web-lab-page .yuto-middle-scroll-ui::after {
    animation: none;
  }
}
body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-text {
  line-height: 1.72;
}

body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-text,
body.yuto-index-page.yuto-web-lab-page .contact-card h3 {
  font-weight: var(--yuto-type-card-title-weight);
}

body.yuto-web-lab-page .yuto-bamboo-link,
body.yuto-web-lab-page .news-action-link,
body.yuto-web-lab-page .yuto-news-card-button {
  font-weight: var(--yuto-type-ui-weight);
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（font-weight）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-text,
body.yuto-index-page.yuto-web-lab-page .contact-card p {
  font-weight: var(--yuto-type-body-weight);
}

/* Homepage Hero logo remains an image, not text. Keep approved UI Lab size. */
body.yuto-index-page.yuto-web-lab-page .hero-card > h1 {
  line-height: 1;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: clamp(8px, 1.2vw, 14px);
}

body.yuto-index-page.yuto-web-lab-page .hero-card > h1 .yuto-hero-title-logo {
  display: block;
  width: clamp(450px, 54vw, 810px);
  max-width: min(100%, 840px);
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.06));
}

body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] {
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, var(--yuto-hero-soft-crop-top-alpha)) 0,
      #000 var(--yuto-hero-soft-crop-top),
      #000 calc(100% - var(--yuto-hero-soft-crop-bottom)),
      rgba(0, 0, 0, var(--yuto-hero-soft-crop-bottom-alpha)) 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, var(--yuto-hero-soft-crop-top-alpha)) 0,
      #000 var(--yuto-hero-soft-crop-top),
      #000 calc(100% - var(--yuto-hero-soft-crop-bottom)),
      rgba(0, 0, 0, var(--yuto-hero-soft-crop-bottom-alpha)) 100%
    );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > h1,
body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > .hero-text,
body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > .hero-actions,
body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > .hero-bg-video.hero-bg-image {
  translate: 0 var(--yuto-hero-soft-crop-y);
  transition:
    translate .08s linear,
    width .08s linear,
    height .08s linear;
  will-change: translate;
}

/* The character uses the shared soft-crop viewport instead of its old private
   bottom-only mask, so it matches logo/text/buttons at the same crop band. */
body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > .hero-bg-video.hero-bg-image {
  -webkit-mask-image: none;
  mask-image: none;
}

body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"].is-yuto-hero-soft-crop-active > .hero-actions {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] {
    -webkit-mask-image: none;
    mask-image: none;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > h1,
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > .hero-text,
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > .hero-actions,
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > .hero-bg-video.hero-bg-image {
    translate: 0 0;
    transition: none;
  }
}
body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card::after,
body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card:hover::after,
body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card.is-active::after {
  content: none;
  display: none;
  background: none;
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card,
body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card:hover,
body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card.is-active {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  border-bottom-color: rgba(255, 255, 255, 0.052);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - 10px),
    rgba(0, 0, 0, 0.94) calc(100% - 4px),
    rgba(0, 0, 0, 0.88) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - 10px),
    rgba(0, 0, 0, 0.94) calc(100% - 4px),
    rgba(0, 0, 0, 0.88) 100%
  );
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide .yuto-news-card-media-frame,
body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide .news-gallery-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.has-gallery .yuto-news-card-media-frame::after,
body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.has-gallery .news-gallery-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(5, 9, 28, 0) 0%,
      rgba(5, 9, 28, 0.1) 42%,
      rgba(5, 9, 28, 0.2) 100%
    );
  -webkit-backdrop-filter: blur(3.5px) saturate(.96) brightness(.93);
  backdrop-filter: blur(3.5px) saturate(.96) brightness(.93);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 26%,
    rgba(0, 0, 0, 0.68) 62%,
    rgba(0, 0, 0, 0.82) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 26%,
    rgba(0, 0, 0, 0.68) 62%,
    rgba(0, 0, 0, 0.82) 100%
  );
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-news-caption {
  bottom: -2px;
  padding: 64px 16px 13px;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(5, 9, 28, 0.14) 30%,
      rgba(5, 9, 28, 0.4) 70%,
      rgba(5, 9, 28, 0.48) 100%
    );
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-news-caption .yuto-news-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  line-height: 1.12;
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-news-caption .yuto-news-card-title {
  margin: 0 0 3px;
  line-height: 1.3;
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-news-caption .yuto-news-card-summary {
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 640px) {
  body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card,
  body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card:hover,
  body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.news-card.yuto-news-card.is-active {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 calc(100% - 8px),
      rgba(0, 0, 0, 0.94) calc(100% - 3px),
      rgba(0, 0, 0, 0.88) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 calc(100% - 8px),
      rgba(0, 0, 0, 0.94) calc(100% - 3px),
      rgba(0, 0, 0, 0.88) 100%
    );
  }

  body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.has-gallery .yuto-news-card-media-frame::after,
  body.yuto-index-page.yuto-web-lab-page .yuto-home-news-slide.has-gallery .news-gallery-frame::after {
    top: 46%;
    -webkit-backdrop-filter: blur(3px) saturate(.96) brightness(.93);
    backdrop-filter: blur(3px) saturate(.96) brightness(.93);
  }

  body.yuto-index-page.yuto-web-lab-page .yuto-home-news-caption {
    bottom: -2px;
    padding: 64px 16px 13px;
  }

  body.yuto-index-page.yuto-web-lab-page .yuto-home-news-caption .yuto-news-card-meta {
    margin-bottom: 3px;
  }

  body.yuto-index-page.yuto-web-lab-page .yuto-home-news-caption .yuto-news-card-title {
    margin-bottom: 2px;
  }
}
body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip {
  /* WHY 整排一起進場（一次性 forwards）；不加常駐 will-change → PRIN-01；由 JS 統一觸發避免杯子先出來 → PRIN-03 */
  visibility: visible;
  content-visibility: visible;
  contain: layout paint style;
  opacity: 0;
  transform: translateY(18px);
  animation: yutoFadeUpSmooth 0.7s var(--yuto-ease-out) forwards;
  animation-delay: 0.18s;
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-social-link {
  visibility: visible;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body.yuto-index-page.yuto-web-lab-page .yuto-home-social-link img {
  opacity: 1;
  visibility: visible;
  animation: none;
  will-change: auto;
  transform: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Home Lab hero CTA links: text-only + bamboo separators */
body.yuto-index-page.yuto-web-lab-page .hero-actions .yuto-bamboo-link {
  flex: 0 0 auto;
  min-height: auto;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgba(245, 247, 255, 0.96);
  font-size: clamp(1rem, 1.12vw, 1.08rem);
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
}

body.yuto-index-page.yuto-web-lab-page .hero-actions .yuto-bamboo-link:hover,
body.yuto-index-page.yuto-web-lab-page .hero-actions .yuto-bamboo-link:focus-visible {
  background: none;
  border: 0;
  color: #fff;
  transform: translateY(-1px);
  outline: none;
  box-shadow: none;
}

@media (max-width: 900px) {
  body.yuto-index-page.yuto-web-lab-page .hero-actions .yuto-bamboo-link {
    font-size: .92rem;
  }
}
/* WARN [WALL-27] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-index-page.yuto-web-lab-page .hero-actions {
  --yuto-bamboo-scale: var(--yuto-bamboo-scale-standard);
  --yuto-bamboo-gap-now: calc(var(--yuto-bamboo-gap-base) * var(--yuto-bamboo-scale, 1));
  --yuto-bamboo-inline-now: calc(var(--yuto-bamboo-inline-base) * var(--yuto-bamboo-scale, 1));
  --yuto-bamboo-block-now: calc(var(--yuto-bamboo-block-base) * var(--yuto-bamboo-scale, 1));
}

/* WARN [WALL-38] 承重牆：靠【位置在後】壓過 body.yuto-index-page.yuto-web-lab-page .hero-actions 的 --yuto-bamboo-scale。
     上移、合併或跨區搬動 → 生效樣式翻轉 */
body.yuto-index-page.yuto-web-lab-page .hero-actions {
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 28px;
 --yuto-bamboo-scale: var(--yuto-bamboo-scale-large);
}

/* WARN [WALL-28] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-index-page.yuto-web-lab-page .hero-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--yuto-bamboo-gap-now);
}

@media (max-width: 700px) {
  /* Mobile Hero: remove the glass frame/blur/mask only on homepage mobile. */
  body.yuto-index-page.yuto-web-lab-page .hero-card {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] {
    -webkit-mask-image: none;
    mask-image: none;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-actions .yuto-bamboo-link,
  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-actions .yuto-bamboo-separator {
    pointer-events: none;
  }

  /* Mobile white-line source guard:
     The remaining white line is treated as mobile interaction residue from the carousel / knife layers,
     not as Home contact layout. Keep contact layout values untouched. */

  body.yuto-index-page.yuto-web-lab-page .home-news-carousel-section .yuto-home-news-slide.news-card.yuto-news-card,
  body.yuto-index-page.yuto-web-lab-page .home-news-carousel-section .yuto-home-news-slide.news-card.yuto-news-card:hover,
  body.yuto-index-page.yuto-web-lab-page .home-news-carousel-section .yuto-home-news-slide.news-card.yuto-news-card.is-active {
    box-shadow: none;
    outline: 0;
  }

  body.yuto-index-page.yuto-web-lab-page .home-news-carousel-section .yuto-home-news-slide.news-card.yuto-news-card::after,
  body.yuto-index-page.yuto-web-lab-page .home-news-carousel-section .yuto-home-news-slide.news-card.yuto-news-card:hover::after,
  body.yuto-index-page.yuto-web-lab-page .home-news-carousel-section .yuto-home-news-slide.news-card.yuto-news-card.is-active::after {
    content: none;
    display: none;
    background: none;
    box-shadow: none;
  }

  body.yuto-index-page.yuto-web-lab-page .home-contact-section {
    position: relative;
    z-index: 2;
    isolation: isolate;
  }

  /* Mobile Hero cloud cue: make the intended scroll cloud visible and centered,
     instead of leaving a tiny gray sliver at the left edge. */

  body.yuto-index-page.yuto-web-lab-page .hero-scroll-cue.yuto-cloud-scroll-cue .yuto-cloud-cue-line:nth-child(7) {
    width: 54px;
    left: 48px;
    top: 53px;
  }

  /* Hero media bottom fade is applied to the object element, not the source bitmap.
     Future replacement with <video> can keep the same class and still fade out at the bottom. */
  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-bg-video.hero-bg-image {
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 62%,
        rgba(0, 0, 0, 0.82) 72%,
        rgba(0, 0, 0, 0.28) 84%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 62%,
        rgba(0, 0, 0, 0.82) 72%,
        rgba(0, 0, 0, 0.28) 84%,
        transparent 100%
      );
  }

  /* Mobile cloud cue: show the real Japanese-cloud asset and keep the touch area contained. */
  body.yuto-index-page.yuto-web-lab-page .hero-scroll-cue.yuto-cloud-scroll-cue {
  position: relative;
  left: auto;
  right: auto;
  z-index: 6;
  border: 0;
  border-radius: 28px;
  background: transparent;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
    background-image: var(--yuto-cloud-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: saturate(.95) brightness(1.06);
    contain: layout paint;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-scroll-cue.yuto-cloud-scroll-cue .yuto-cloud-cue-line {
  background: rgba(118, 150, 255, 0.54);
  box-shadow: 0 0 16px rgba(124, 241, 255, 0.1);

    display: none;
  }

  /* Contact white-line final guard:
     Mobile scroll compositing can flicker the glass top edge. Keep layout untouched,
     but remove only the bright upper edge and internal highlight layers. */
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-card.contact-card {
    border-top-color: rgba(255, 255, 255, 0);
    border-left-color: rgba(255, 255, 255, 0.055);
    border-right-color: rgba(255, 255, 255, 0.055);
    border-bottom-color: rgba(255, 255, 255, 0.055);
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  body.yuto-index-page.yuto-web-lab-page .home-contact-section .contact-mail {
    border-top-color: rgba(255, 255, 255, 0);
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

@media (max-width: 900px) {
  /* Remove the cloud itself and its click/touch area on mobile. */
  body.yuto-index-page.yuto-web-lab-page .hero-scroll-cue.yuto-cloud-scroll-cue {
    display: none;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    touch-action: none;
  }

  /* Mobile homepage hero should be a normal static block:
     no scroll-crop height animation and no upward closing feeling while swiping. */
  body.yuto-index-page.yuto-web-lab-page .hero-card,
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"],
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"].is-yuto-hero-soft-crop-active {
    height: auto;
    min-height: clamp(430px, 96vw, 640px);
    transform: none;
    translate: 0 0;
    transition: none;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > h1,
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > .hero-text,
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > .hero-actions,
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"] > .hero-bg-video.hero-bg-image {
    translate: 0 0;
    transition: none;
    will-change: auto;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"].is-yuto-hero-soft-crop-active > .hero-actions {
    pointer-events: none;
  }

  /* Hide the native/mobile scroll indicator only on this homepage.
     This targets the line that flickers at the viewport edge while dragging. */
  html.yuto-index-mobile-scroll-clean,
  html.yuto-index-mobile-scroll-clean body.yuto-index-page.yuto-web-lab-page {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html.yuto-index-mobile-scroll-clean::-webkit-scrollbar,
  html.yuto-index-mobile-scroll-clean body.yuto-index-page.yuto-web-lab-page::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card::before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 42%;
    z-index: 1;
    pointer-events: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card > img.hero-bg-video.hero-bg-image,
  body.yuto-index-page.yuto-web-lab-page .hero-card > video.hero-bg-video.hero-bg-image,
  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-bg-video.hero-bg-image {
    z-index: 0;
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 54%,
        rgba(0, 0, 0, 0.72) 70%,
        rgba(0, 0, 0, 0.22) 88%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 54%,
        rgba(0, 0, 0, 0.72) 70%,
        rgba(0, 0, 0, 0.22) 88%,
        transparent 100%
      );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card > h1 {
    z-index: 8;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-actions {
    z-index: 9;
  }
}

@media (max-width: 700px) {
  /* Prevent hover/active card transforms from causing compositor shimmer on mobile only. */
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-card.contact-card:hover,
  body.yuto-index-page.yuto-web-lab-page .home-contact-section .note-card.contact-card:active {
    transform: none;
    border-color: rgba(255, 255, 255, 0);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
  }

  /* Wrapper/native-line isolation:
     Since Contact/Footer hiding did not remove the line, remove mobile-only page-level
     edges/background pseudo layers and native scrollbar indicators next. */
  html.yuto-index-mobile-scroll-clean,
  html.yuto-index-mobile-scroll-clean body.yuto-index-page.yuto-web-lab-page {
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-clip: padding-box;
  }

  html.yuto-index-mobile-scroll-clean::-webkit-scrollbar,
  html.yuto-index-mobile-scroll-clean body.yuto-index-page.yuto-web-lab-page::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* Mobile hero: remove the scroll-crop image geometry and make the media object tight. */
  body.yuto-index-page.yuto-web-lab-page .hero-card::before {
    background: none;
    box-shadow: none;
  }

  /* Give the shortcut icons a little breathing room below the hero media. */
  body.yuto-index-page.yuto-web-lab-page .yuto-home-social-strip-section {
    margin-top: clamp(12px, 3.5vw, 26px);
  }
}
/* Keep v034 seam fix locked. */

/* Base: the new mobile-only media layer is invisible by default, so desktop cannot be affected. */
body.yuto-index-page.yuto-web-lab-page .yuto-mobile-hero-media {
  display: none;
}

@media (max-width: 700px) {
  /* Hide the old mobile hero media object only on mobile.
     It remains in HTML for desktop and fallback safety. */
  /* WARN 靠【位置在後】壓過同選擇器的前一份（-webkit-mask-image / -webkit-mask-repeat / -webkit-mask-size / mask-image / mask-repeat / mask-size）。
       合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
  body.yuto-index-page.yuto-web-lab-page .hero-card > img.hero-bg-video.hero-bg-image,
  body.yuto-index-page.yuto-web-lab-page .hero-card > video.hero-bg-video.hero-bg-image,
  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-bg-video.hero-bg-image {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
  transform: none;
  translate: 0 0;
  object-fit: contain;
  z-index: 0;
  -webkit-mask-image:
  linear-gradient(
  to bottom,
  #000 0%,
  #000 62%,
  rgba(0, 0, 0, 0.82) 74%,
  rgba(0, 0, 0, 0.34) 88%,
  transparent 100%
  );
  mask-image:
  linear-gradient(
  to bottom,
  #000 0%,
  #000 62%,
  rgba(0, 0, 0, 0.82) 74%,
  rgba(0, 0, 0, 0.34) 88%,
  transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: min(84vw, 535px);
  margin-top: -10px;
  margin-bottom: 0;
  object-position: center bottom;
  -webkit-mask:
  linear-gradient(
  to bottom,
  #000 0%,
  #000 52%,
  rgba(0, 0, 0, 0.82) 64%,
  rgba(0, 0, 0, 0.5) 76%,
  rgba(0, 0, 0, 0.18) 89%,
  transparent 100%
  )
  0 0 / 100% 100% no-repeat;
  mask:
  linear-gradient(
  to bottom,
  #000 0%,
  #000 52%,
  rgba(0, 0, 0, 0.82) 64%,
  rgba(0, 0, 0, 0.5) 76%,
  rgba(0, 0, 0, 0.18) 89%,
  transparent 100%
  )
  0 0 / 100% 100% no-repeat;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;

    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Keep the mobile hero container as a clean holder, not as the image geometry owner. */
  /* WARN 靠【位置在後】壓過同選擇器的前一份（overflow / position）。
       合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
  body.yuto-index-page.yuto-web-lab-page .hero-card,
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"],
  body.yuto-index-page.yuto-web-lab-page .hero-card[data-yuto-hero-exit="soft-crop"].is-yuto-hero-soft-crop-active {
  padding: clamp(76px, 16vw, 132px) 0 0;

    position: relative;
    display: block;
    height: auto;
    min-height: auto;
    padding-top: clamp(40px, 9vw, 76px);
    overflow: visible;
    transform: none;
    translate: 0 0;
    transition: none;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card::before,
  body.yuto-index-page.yuto-web-lab-page .hero-card::after {
    content: none;
    display: none;
  }

  /* New independent mobile media object. */
  body.yuto-index-page.yuto-web-lab-page .hero-card > .yuto-mobile-hero-media {
    display: block;
    position: relative;
    z-index: 0;
    width: min(84vw, 535px);
    max-width: 100%;
    margin: -6px auto 0;
    padding: 0;
    line-height: 0;
    pointer-events: none;
    overflow: visible;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card > .yuto-mobile-hero-media > .yuto-mobile-hero-media-image {
    display: block;
    width: 100%;
    /* WARN 圖片容器用 aspect-ratio 預留高度，不可用 height:auto（載入前高度=0 → 頁面頂端會被往下推）。
     ★ 比例數字 = 圖片寬 ÷ 圖片高 → PRIN-18 */
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 50%,
        rgba(0, 0, 0, 0.84) 62%,
        rgba(0, 0, 0, 0.52) 75%,
        rgba(0, 0, 0, 0.18) 88%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 50%,
        rgba(0, 0, 0, 0.84) 62%,
        rgba(0, 0, 0, 0.52) 75%,
        rgba(0, 0, 0, 0.18) 88%,
        transparent 100%
      );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
  }

  /* Logo remains a separate layer and does not receive the media mask. */
  body.yuto-index-page.yuto-web-lab-page .hero-card > h1 {
  max-width: 44vw;
  translate: 0 0;
  -webkit-mask-image: none;
  mask-image: none;

    position: absolute;
    z-index: 8;
    left: clamp(18px, 5vw, 30px);
    right: auto;
    bottom: clamp(24px, 5.4vw, 42px);
    margin: 0;
    pointer-events: none;
    -webkit-mask: none;
    mask: none;
  }

  body.yuto-index-page.yuto-web-lab-page .hero-card > h1 .yuto-hero-title-logo {
  width: clamp(165px, 41vw, 255px);
  max-width: 44vw;
  height: auto;
  object-position: left bottom;

    -webkit-mask: none;
    mask: none;
  }

  /* Mobile-only unused hero items stay hidden and cannot be tapped. */
  /* WARN 靠【位置在後】壓過同選擇器的前一份（display / opacity / visibility）。
       合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-text,
  body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-actions,
  body.yuto-index-page.yuto-web-lab-page .hero-scroll-cue.yuto-cloud-scroll-cue {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body.yuto-index-page.yuto-web-lab-page .home-contact-section.yuto-public-content-end {
    padding-bottom: clamp(8px, 2.5vw, 18px);
    margin-bottom: 0;
    border-bottom: 0;
    box-shadow: none;
  }
}
body.yuto-index-page.yuto-web-lab-page .yuto-home-news-caption .news-badge {
  color: rgba(255, 255, 255, 0.95);
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-B 區　links 專屬                                           ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
/* 連結頁專屬修飾：桌機用 50 號(繼承標準 44px 高)；手機卡片窄(可到168px)，
   自動換 30t 圖 + 降到 31px 高，避免爆版。高度分級的一種情境化應用，單一出處。 */
body.yuto-web-lab-page .yuto-btn--link {
  --yuto-btn-src: url("../images/blue_button_50.png");
  --yuto-btn-ratio: 418 / 56;
}

@media (max-width: 700px) {
  body.yuto-web-lab-page .yuto-btn--link {
    --yuto-btn-src: url("../images/blue_button_30_mobile_trim.png");
    --yuto-btn-ratio: 295 / 56;
    --yuto-btn-h: 29px;
    font-size: 12px;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .link-card .yuto-button-row.is-link-entry-row {
    gap: 9px;
  }
}

@media (hover: none) and (pointer: coarse) {
  body.yuto-page-bg .link-url {
    touch-action: manipulation;
  }
}
/* WHAT ▸ Links Base Layout / Card Module v1 */
body.yuto-links-page {
  --card: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.12);
  --text: #f6f7fb;
  --text-soft: #c8cbda;
  --primary: #9f7cff;
  --primary-hover: #b59cff;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --container: 1200px;
  color: var(--text);
}

body.yuto-links-page a {
  color: inherit;
  text-decoration: none;
}

/* WARN [WALL-05] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-links-lab-page.yuto-web-lab-page {
  --yuto-links-mobile-page-x: 24px;
  --yuto-links-mobile-grid-gap: 12px;
  --yuto-links-mobile-card-padding-y: 14px;
  --yuto-links-mobile-card-padding-x: 12px;
  --yuto-links-mobile-card-radius: 18px;
}

@media (max-width: 900px) {
  body.yuto-links-lab-page.yuto-web-lab-page .container {
    width: min(calc(100% - var(--yuto-links-mobile-page-x)), var(--container));
  }

  body.yuto-links-lab-page.yuto-web-lab-page .page-hero h1 {
    word-break: keep-all;
    overflow-wrap: normal;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-section .section-card {
    padding: 18px;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.yuto-links-lab-page.yuto-web-lab-page .note-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .link-card {
    min-width: 0;
    padding: var(--yuto-links-mobile-card-padding-y) var(--yuto-links-mobile-card-padding-x);
    gap: 9px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .link-card * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .link-top {
    grid-template-columns: 1fr;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .link-card h3 {
    font-size: clamp(0.96rem, 4vw, 1.08rem);
    line-height: 1.22;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .link-card p {
    font-size: 0.82rem;
    line-height: 1.55;
  }
}

@media (max-width: 420px) {
  body.yuto-links-lab-page.yuto-web-lab-page {
    --yuto-links-mobile-card-padding-y: 13px;
    --yuto-links-mobile-card-padding-x: 10px;
    --yuto-links-mobile-grid-gap: 10px;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .link-card p {
    font-size: 0.78rem;
  }
}
body.yuto-web-lab-page .delay-5 { animation-delay: 0.30s; }

body.yuto-web-lab-page .delay-6 { animation-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  /* 家紋同步關閉:停動畫、直接回到 resting(.72 opacity、無位移)。 */
  body.yuto-links-lab-page.yuto-web-lab-page .links-grid-kamon {
    transform: none;
  }
}

body.yuto-links-lab-page.yuto-web-lab-page .page-hero.yuto-links-lab-plain-hero h1 {
  font-weight: var(--yuto-type-section-title-weight);
}

body.yuto-links-lab-page.yuto-web-lab-page .link-card h3 {
  font-weight: var(--yuto-type-card-title-weight);
}

body.yuto-links-lab-page.yuto-web-lab-page .link-card p,
body.yuto-links-lab-page.yuto-web-lab-page .link-url {
  font-weight: var(--yuto-type-body-weight);
}

/* WARN [WALL-13] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-links-lab-page.yuto-web-lab-page {
  --yuto-links-lab-bg-stage-height: 3200px;
}

body.yuto-links-lab-page.yuto-has-bg-texture .yuto-home-bg-scene,
body.yuto-links-lab-page.yuto-has-bg-texture main > .yuto-bg-texture-layer {
  inset: 0 auto auto 0;
  width: 100%;
  min-height: 100%;
  height: max(100%, var(--yuto-links-lab-bg-stage-height, 3200px));
}

body.yuto-links-lab-page.yuto-web-lab-page .page-hero,
body.yuto-links-lab-page.yuto-web-lab-page .links-section {
  position: relative;
  z-index: 3;
}

/* Keep footer policy links calm; no card/button sheen on small footer text. */
body.yuto-links-lab-page.yuto-web-lab-page .yuto-site-footer[data-yuto-no-hover-sheen="true"] .yuto-footer-links a {
  transform: none;
}

body.yuto-links-lab-page.yuto-web-lab-page .page-hero.yuto-links-lab-plain-hero {
  padding: 72px 0 30px;
}

body.yuto-links-lab-page.yuto-web-lab-page .links-lab-plain-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 900px;
}

body.yuto-links-lab-page.yuto-web-lab-page .page-hero.yuto-links-lab-plain-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: .01em;
}

@media (max-width: 700px) {
  body.yuto-links-lab-page.yuto-web-lab-page .page-hero.yuto-links-lab-plain-hero {
    padding: 52px 0 22px;
  }
}
body.yuto-links-lab-page.yuto-web-lab-page {
  --yuto-lab-bg-314bad-deep-vivid: #0B1A4C;
  background-color: var(--yuto-lab-bg-314bad-deep-vivid);
}

body.yuto-links-lab-page.yuto-web-lab-page main {
  background-color: var(--yuto-lab-bg-314bad-deep-vivid);
  background-image: none;
}

body.yuto-links-lab-page.yuto-web-lab-page main::before,
body.yuto-links-lab-page.yuto-web-lab-page main::after {
  background-image: none;
  opacity: 0;
}

body.yuto-links-lab-page.yuto-web-lab-page .link-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

body.yuto-links-lab-page.yuto-web-lab-page .link-card h3 {
  min-width: 0;
}

body.yuto-links-lab-page.yuto-web-lab-page .link-icon-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  opacity: .94;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.22));
  transition:
    opacity .22s ease,
    transform .22s ease,
    filter .22s ease;
}

body.yuto-links-lab-page.yuto-web-lab-page .link-icon-badge img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

body.yuto-links-lab-page.yuto-web-lab-page .link-card:hover .link-icon-badge {
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 7px 14px rgba(0, 0, 0, 0.26));
}

@media (max-width: 700px) {
  body.yuto-links-lab-page.yuto-web-lab-page .link-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .link-icon-badge {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 380px) {
  body.yuto-links-lab-page.yuto-web-lab-page .link-icon-badge {
    width: 28px;
    height: 28px;
  }
}
body.yuto-links-lab-page.yuto-web-lab-page .links-grid {
  --yuto-links-joint-gap: 22px;
  --yuto-links-joint-gap-half: calc(var(--yuto-links-joint-gap) / 2);
  --yuto-links-joint-kamon-size: clamp(54px, 5.1vw, 72px);
  --yuto-links-joint-cut-radius: calc(var(--yuto-links-joint-kamon-size) * .56);
  position: relative;
  overflow: visible;
  gap: var(--yuto-links-joint-gap);
}

body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card {
  position: relative;
  z-index: 2;
  overflow: visible;
  border-radius: 0;
}

/* Group outer corners only. */
body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:nth-of-type(1) {
  border-top-left-radius: 22px;
}

body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:nth-of-type(2) {
  border-top-right-radius: 22px;
}

/* WHAT ▸ 拼接組底排的外角：依總卡數奇偶自動判定（規則說明見 @media 901px 的遮罩區） */
body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(even) ~ .link-card:nth-last-of-type(2) {
  border-bottom-left-radius: 22px;
}

body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(even) ~ .link-card:nth-last-of-type(1) {
  border-bottom-right-radius: 22px;
}

body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(odd) ~ .link-card:nth-last-of-type(3) {
  border-bottom-left-radius: 22px;
}

body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(odd) ~ .link-card:nth-last-of-type(2) {
  border-bottom-right-radius: 22px;
}

/* Shared kamon ornaments live on the grid, not inside a single card. */
body.yuto-links-lab-page.yuto-web-lab-page .links-grid-kamon {
  position: absolute;
  z-index: 4;
  width: var(--yuto-links-joint-kamon-size);
  height: var(--yuto-links-joint-kamon-size);
  background-image: url("../images/kamon_silver_middle.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .72;
  filter:
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 10px rgba(219, 207, 178, 0.05));
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  /* 【動畫統一 v98】家紋跟卡片一起淡入+上滑,接縫才不會錯位。專屬 keyframe 收在 opacity .72(家紋 resting 值),不是共用的 1。delay 取接縫上下卡片的折衷值。 */
  animation: yutoKamonFadeUp 0.7s var(--yuto-ease-out) both;
}

/* 家紋 delay 折衷值:joint-1 在第1/2列間(卡 delay-2~4→取0.18s),joint-2 在2/3列間(0.27s),joint-3 在3/4列間(0.33s)。 */
body.yuto-links-lab-page.yuto-web-lab-page .links-grid-kamon.is-joint-1 { animation-delay: 0.18s; }

body.yuto-links-lab-page.yuto-web-lab-page .links-grid-kamon.is-joint-2 { animation-delay: 0.27s; }

body.yuto-links-lab-page.yuto-web-lab-page .links-grid-kamon.is-joint-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  justify-self: center;
  align-self: center;
}

body.yuto-links-lab-page.yuto-web-lab-page .links-grid-kamon.is-joint-2 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  justify-self: center;
  align-self: center;
}

body.yuto-links-lab-page.yuto-web-lab-page .links-grid-kamon.is-joint-3 {
  animation-delay: 0.33s;

  grid-column: 1 / 3;
  grid-row: 3 / 5;
  justify-self: center;
  align-self: center;
}

/* WHAT ▸ 第 4 個接縫：4/5 列之間。2026-07-30 新增第 10 張卡（拼接組變 5 排）時加入。
   WHY  延遲延續既有節奏 0.18 → 0.27 → 0.33 → 0.39（Kai 指定 +0.06）。
   WARN 家徽數量【必須手動跟著排數增減】：joint-N 的 grid-row 是 N / N+2，
        而延遲間距不規則（第一段 +0.09、之後 +0.06）→ 公式算不出來，只能一條一條寫。
        遮罩與圓角那邊已經改成奇偶自動判定，唯獨家徽數量要手動。 */
body.yuto-links-lab-page.yuto-web-lab-page .links-grid-kamon.is-joint-4 {
  animation-delay: 0.39s;

  grid-column: 1 / 3;
  grid-row: 4 / 6;
  justify-self: center;
  align-self: center;
}

@media (max-width: 900px) {
  body.yuto-links-lab-page.yuto-web-lab-page .links-grid {
    --yuto-links-joint-gap: var(--yuto-links-mobile-grid-gap, 12px);
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid-kamon {
    display: none;
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card {
    border-radius: 0;
  }

  /* 【A方案 v95】手機版比照電腦版:前8張拼一塊、只有外圈4角圓;第9張(落單)維持獨立全圓。不含家徽裝飾(links-grid-kamon 仍隱藏)。弧度沿用手機 18px。 */
  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:nth-of-type(1) {
    border-top-left-radius: var(--yuto-links-mobile-card-radius, 18px);
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:nth-of-type(2) {
    border-top-right-radius: var(--yuto-links-mobile-card-radius, 18px);
  }

  /* WHAT ▸ 底排外角與落單卡：依總卡數奇偶自動判定（規則說明見 @media 901px 的遮罩區）
     WARN 特異度必須跟全域那組【一致】。全域已改用奇偶選擇器（0,8,1），若這裡還留
          nth-of-type(N)（0,5,1），媒體查詢不加特異度 → 全域會反過來壓過手機值。 */
  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(even) ~ .link-card:nth-last-of-type(2) {
    border-bottom-left-radius: var(--yuto-links-mobile-card-radius, 18px);
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(odd) ~ .link-card:nth-last-of-type(3) {
    border-bottom-left-radius: var(--yuto-links-mobile-card-radius, 18px);
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(even) ~ .link-card:nth-last-of-type(1) {
    border-bottom-right-radius: var(--yuto-links-mobile-card-radius, 18px);
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(odd) ~ .link-card:nth-last-of-type(2) {
    border-bottom-right-radius: var(--yuto-links-mobile-card-radius, 18px);
  }

  body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card:first-of-type:nth-last-of-type(odd) ~ .link-card:last-of-type {
    border-radius: var(--yuto-links-mobile-card-radius, 18px);
  }
}

@media (max-width: 700px) {
  body.yuto-links-lab-page.yuto-web-lab-page .links-section {
    margin-bottom: 0;
    padding-bottom: clamp(8px, 2.5vw, 18px);
    border-bottom: 0;
    box-shadow: none;
  }
}
/* WHAT ▸ 【連結頁按鈕】v42 遷移註記 原 v049 whole-PNG 系統（含容器查詢自動換圖 35→50→75→click、手機 30t、死紫膠囊 fallback） 已連根移除，改用 .yuto-btn + .yuto-btn--link 具名修飾。 現行：HTML 套 yuto-btn yuto-btn--link；桌機 50/44px、手機自動 30t/31px（見標準修飾區）。 下方保留：假游標、::before/::after 重置、sheen opt-out、卡片 hover(v751)、卡片格線 RWD。 */

/* 【遷移 v42・連結頁】原 .link-card container-type/name（供容器查詢自動換圖用）已隨該機制移除。 */

body.yuto-links-lab-page.yuto-web-lab-page .link-card .yuto-button-row.is-link-entry-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

/* WHAT ▸ 【連結頁按鈕】v42 已遷移至 .yuto-btn 標準。 原「按鈕外觀 + 容器查詢自動換圖(35→50→75→click) + 手機30t」整套系統已連根移除， 改用 .yuto-btn + .yuto-btn--link 具名修飾（桌機50/44px、手機自動30t/31px），單一出處。 以下僅保留：假游標、::before/::after 重置、sheen opt-out、卡片 hover、卡片格線 RWD。 */

body.yuto-links-lab-page.yuto-web-lab-page .link-card .yuto-btn--ui.is-link-entry::before,
body.yuto-links-lab-page.yuto-web-lab-page .link-card .yuto-btn--ui.is-link-entry::after {
  content: none;
  display: none;
  background: none;
  border: 0;
  box-shadow: none;
}

body.yuto-links-lab-page.yuto-web-lab-page .link-card .yuto-btn--ui.is-link-entry[data-yuto-no-hover-sheen="true"] > .yuto-knife-hover-sheen {
  display: none;
}

/* WARN 卡片 hover 不做 transform 位移（家紋接縫層固定）—— 位移會讓接縫跑掉 */
body.yuto-links-lab-page.yuto-web-lab-page .links-grid > .link-card {
  transform: none;
}

@media (max-width: 900px) {
  /* WARN 連結卡片 2 欄必須用 repeat(2, minmax(0,1fr))；minmax 的 0 才能防長內容溢出。不可退回 repeat(2,1fr) → PRIN-17 */
  body.yuto-links-lab-page.yuto-web-lab-page .link-card .yuto-button-row.is-link-entry-row {
    justify-content: center;
    overflow: visible;
  }
}

@media (max-width: 700px) {
  /* WARN ≤360 的超窄機也吃 ≤900 的 2 欄，不可另外設成 1 欄 → PRIN-21 */

  /* [YUTO-CSS-VERIFY v058] Links mobile button trim fix.
   Owner: P-Links / F-Mobile / B-UI / Links small-card entry button only.
   Root cause:
   - The delivered mobile button rules were drawing the full 724x60 source PNG inside a much smaller box while using the trimmed 325:56 ratio logic.
   - Because the original source PNG contains large transparent side margins, the visible gold frame shrank until it looked missing.
   Fix contract:
   - Desktop stays untouched.
   - Mobile two-column layout stays untouched.
   - Only mobile Links small-card buttons are corrected.
   - Use the trimmed asset blue_button_35_mobile_trim.png so the visible frame fills the intended box.
   - Keep unified font sizing and a desktop-like text-to-frame breathing gap.
   - No text shrinking, no letter-spacing squeeze, no layout change.
  */
  body.yuto-links-lab-page.yuto-web-lab-page .link-card .yuto-button-row.is-link-entry-row {
    width: 100%;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-B 區　news 專屬                                            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
/* WHAT ▸ News Base Layout / Card Module v1 */

body.yuto-page-bg .news-section {
  padding: 88px 0 26px;
}

body.yuto-page-bg .news-section .container {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}

body.yuto-page-bg .news-section .section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

body.yuto-page-bg .news-section .section-head h2 {
  margin: 0;
}

body.yuto-page-bg .news-section .news-list {
  display: grid;
  gap: 18px;
}

body.yuto-page-bg .news-section .news-card {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: .25s ease;
}

body.yuto-page-bg .news-section .news-card:hover {
  transform: translateY(-3px);
  border-color: rgba(159, 124, 255, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

body.yuto-page-bg .news-section .news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

body.yuto-page-bg .news-section .news-date {
  color: var(--text-soft);
  font-size: .92rem;
}

body.yuto-page-bg .news-section .news-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  background: rgba(159, 124, 255, 0.16);
  border: 1px solid rgba(159, 124, 255, 0.24);
  color: #f2ecff;
}

body.yuto-page-bg .news-section .news-badge.pinned {
  background: linear-gradient(135deg,rgba(159, 124, 255, 0.36),rgba(77, 226, 197, 0.16));
  border-color: rgba(159, 124, 255, 0.34);
  color: #fff;
}

body.yuto-page-bg .news-section .news-card h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

body.yuto-page-bg .news-section .news-card p {
  margin: 0;
  color: var(--text-soft);
}

body.yuto-page-bg .news-section .news-status-message {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-soft);
  /* 【抽動修復 v102】在預留高度的輪播裡垂直置中,不被 flex stretch 拉長。 */
  align-self: center;
}

body.yuto-page-bg .news-section .news-status-message.is-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.yuto-page-bg .news-section .news-content {
  margin-top: 12px;
  white-space: pre-wrap;
}

body.yuto-news-lab-page {
  --yuto-news-lab-bg-stage-height: max(4200px, 320vh);
}

body.yuto-news-lab-page main {
  background-repeat: no-repeat;
  background-position: top center;
  background-size:
    100% var(--yuto-news-lab-bg-stage-height),
    100% var(--yuto-news-lab-bg-stage-height),
    100% var(--yuto-news-lab-bg-stage-height);
}

body.yuto-news-lab-page main::before,
body.yuto-news-lab-page main::after {
  width: 100%;
  height: 100%;
}

/* WARN 背景場景一律 absolute ＋ 延展高度，不可用 position:fixed（會釘死不隨捲動）→ PRIN-23 */
body.yuto-news-lab-page.yuto-has-bg-texture .yuto-home-bg-scene,
body.yuto-news-lab-page.yuto-has-bg-texture main > .yuto-bg-texture-layer {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  min-height: 100%;
  height: max(100%, var(--yuto-news-lab-bg-stage-height, 4200px));
}

body.yuto-news-lab-page .yuto-news-lab-shell {
  position: relative;
  z-index: 3;
}

body.yuto-news-lab-page .yuto-lightbox,

/* 【區域:游標】覆蓋半部原有規則 ↓ */
body.yuto-news-lab-page .yuto-knife-slash {
  z-index: 10070;
}

/* WARN 小刀/拳頭的 z-index 用全站統一的高值變數，不可在單頁另設 —— 否則會被該頁的 lightbox 蓋住 → PRIN-06 */
body.yuto-news-lab-page .yuto-knife-fake-cursor {
  z-index: var(--yuto-knife-cursor-layer, 100000);
}

body.yuto-news-lab-page .news-left-container {
  margin-left: max(16px, calc((100% - var(--container)) / 2));
  margin-right: auto;
}

body.yuto-news-lab-page .pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

body.yuto-news-lab-page .pager-info {
  color: var(--text-soft);
  font-weight: 800;
  white-space: nowrap;
}

body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo[data-yuto-control-role="quiet-bamboo-filter"] {
  --yuto-news-filter-hover-shadow: 0 0 8px rgba(159, 124, 255, 0.18);
}

body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo[data-yuto-no-hover-sheen="true"] .news-filter-btn {
  position: relative;
}

body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo[data-yuto-no-hover-sheen="true"] .news-filter-btn:hover,
body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo[data-yuto-no-hover-sheen="true"] .news-filter-btn:focus-visible,
body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo[data-yuto-no-hover-sheen="true"] .news-filter-btn.active {
  text-shadow: var(--yuto-news-filter-hover-shadow);
}

body.yuto-news-lab-page .pager:not(.yuto-slice-pager-host) .pager-btn:not(.yuto-slice-pager-btn),
body.yuto-news-lab-page .news-filter-row:not(.yuto-news-filter-bamboo) .news-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease, opacity .22s ease;
  user-select: none;
}

body.yuto-news-lab-page .pager:not(.yuto-slice-pager-host) .pager-btn:not(.yuto-slice-pager-btn):hover,
body.yuto-news-lab-page .pager:not(.yuto-slice-pager-host) .pager-btn:not(.yuto-slice-pager-btn).active,
body.yuto-news-lab-page .news-filter-row:not(.yuto-news-filter-bamboo) .news-filter-btn:hover,
body.yuto-news-lab-page .news-filter-row:not(.yuto-news-filter-bamboo) .news-filter-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(159, 124, 255, 0.38), rgba(77, 226, 197, 0.14));
  border-color: rgba(159, 124, 255, 0.34);
  transform: translateY(-1px);
}

body.yuto-news-lab-page .pager:not(.yuto-slice-pager-host) .pager-btn:not(.yuto-slice-pager-btn):disabled {
  cursor: not-allowed;
  opacity: .36;
  filter: grayscale(.45);
  transform: none;
  pointer-events: none;
  user-select: none;
}

body.yuto-news-lab-page.yuto-page-bg .news-section .news-badge.pinned {
  background: none;
  border: 0;
  color: inherit;
}

body.yuto-news-lab-page .news-card.is-hidden {
  display: none;
}

@media (max-width: 932px) and (orientation: landscape) {
  body.yuto-news-lab-page .news-left-container {
    margin-left: auto;
    margin-right: auto;
  }

  body.yuto-news-lab-page .news-section .section-head {
    gap: 10px;
    margin-bottom: 10px;
  }

  body.yuto-news-lab-page .pager,
  body.yuto-news-lab-page .news-filter-row {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    justify-content: flex-start;
    padding: 7px 2px 9px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.yuto-news-lab-page .pager::-webkit-scrollbar,
  body.yuto-news-lab-page .news-filter-row::-webkit-scrollbar {
    display: none;
  }

  body.yuto-news-lab-page .news-card.has-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
    gap: 16px;
    align-items: start;
  }

  body.yuto-news-lab-page .news-card.has-gallery .news-card-main {
    grid-column: 1;
    grid-row: 1;
  }

  body.yuto-news-lab-page .news-card.has-gallery .news-gallery {
    grid-column: 2;
    grid-row: 1;
    max-width: 330px;
    margin-bottom: 0;
  }

  body.yuto-news-lab-page .news-gallery-frame,
  body.yuto-news-lab-page .news-gallery-frame[data-ratio="wide"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  body.yuto-news-lab-page .news-gallery-frame[data-ratio="square"] {
    width: min(100%, 230px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: auto;
  }

  body.yuto-news-lab-page .news-gallery-frame[data-ratio="portrait"] {
    width: min(100%, 170px);
    height: auto;
    aspect-ratio: 9 / 16;
    margin-left: auto;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  body.yuto-news-lab-page .news-card.has-gallery {
    grid-template-columns: 1fr;
  }

  body.yuto-news-lab-page .news-card.has-gallery .news-gallery,
  body.yuto-news-lab-page .news-card.has-gallery .news-card-main {
    grid-column: 1;
  }

  body.yuto-news-lab-page .news-card.has-gallery .news-gallery {
    grid-row: 1;
    justify-self: stretch;
    max-width: none;
    margin-bottom: 10px;
  }

  body.yuto-news-lab-page .news-card.has-gallery .news-card-main {
    grid-row: 2;
  }
}

@media (max-width: 700px) {
  body.yuto-news-lab-page .news-section {
    padding: 54px 0 26px;
  }

  body.yuto-news-lab-page .news-card {
    padding: 22px;
    overflow: visible;
  }

  body.yuto-news-lab-page .news-list {
    overflow: visible;
  }

  body.yuto-news-lab-page .news-filter-row,
  body.yuto-news-lab-page .pager {
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 9px;
    padding-bottom: 11px;
    scroll-padding-inline: 10px;
    -webkit-overflow-scrolling: touch;
  }

  body.yuto-news-lab-page .news-filter-btn,
  body.yuto-news-lab-page .pager-btn {
    flex: 0 0 auto;
    box-sizing: border-box;
    line-height: 1;
    overflow: visible;
  }
}

/* 【標準按鈕動效 v1】hover=上浮3px+亮度1.08(全站統一,與首頁上浮一致) */

/* 【遷移 v37・首頁】原 .yuto-slice-button--copy-mail 變體已隨複製Mail 遷移至 .yuto-btn 而移除（零引用）。 */

/* 【遷移 v45】消息 CTA 間距（與摘要的距離）。原掛在 .yuto-slice-button--news-cta 變體上，
   該變體隨 CTA 遷至 .yuto-btn 而移除；間距改掛佈局 hook .yuto-news-card-button，單一出處。 */
body.yuto-news-lab-page.yuto-web-lab-page .news-card .yuto-news-card-button {
  margin-top: 16px;
}

@media (hover: none) and (pointer: coarse) {
  body.yuto-page-bg .news-filter-btn {
    touch-action: manipulation;
  }
}

body.yuto-news-lab-page.yuto-web-lab-page .news-section .section-head h2 {
  font-weight: var(--yuto-type-section-title-weight);
}

body.yuto-news-lab-page.yuto-web-lab-page .yuto-news-card-title,
body.yuto-news-lab-page.yuto-web-lab-page .news-filter-btn.active,
body.yuto-news-lab-page.yuto-web-lab-page .pager-btn.active {
  font-weight: var(--yuto-type-card-title-weight);
}

body.yuto-web-lab-page .news-filter-btn,
body.yuto-web-lab-page .pager-btn {
  font-weight: var(--yuto-type-ui-weight);
}

body.yuto-news-lab-page.yuto-web-lab-page .yuto-news-card-summary,
body.yuto-news-lab-page.yuto-web-lab-page .yuto-news-card-content,
body.yuto-news-lab-page.yuto-web-lab-page .news-status-message {
  font-weight: var(--yuto-type-body-weight);
}

/* The activity title should visually match the Links Lab plain hero title. */
body.yuto-news-lab-page.yuto-web-lab-page .news-section .section-head h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: .01em;
}

body.yuto-news-lab-page.yuto-web-lab-page {
  --yuto-lab-bg-314bad-deep-vivid: #0B1A4C;
  background-color: var(--yuto-lab-bg-314bad-deep-vivid);
}

body.yuto-news-lab-page.yuto-web-lab-page main {
  background-color: var(--yuto-lab-bg-314bad-deep-vivid);
  background-image: none;
}

body.yuto-news-lab-page.yuto-web-lab-page main::before,
body.yuto-news-lab-page.yuto-web-lab-page main::after {
  background-image: none;
  opacity: 0;
}

/* WHAT ▸ News Lab Lightbox Knife Buttons / Bamboo Text Filter v044 source-clean v013 */
body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo {
  justify-content: flex-start;
  column-gap: clamp(8px, 1.15vw, 16px);
  row-gap: 8px;
  margin-top: 18px;
}

body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-btn {
  min-height: 40px;
  padding: 0 clamp(2px, .35vw, 6px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(245, 247, 251, 0.72);
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow: none;
  transform: none;
}

body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-btn:hover,
body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-btn:focus-visible,
body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-btn.active {
  color: #ffffff;
  background: transparent;
  border-color: transparent;
  filter: none;
  text-shadow: 0 0 8px rgba(159, 124, 255, 0.18);
}

body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-btn:focus-visible {
  outline: 2px solid rgba(159, 124, 255, 0.42);
  outline-offset: 5px;
  border-radius: 8px;
}

body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-separator img {
  border-radius: 0;
}

@media (max-width: 900px) {
  body.yuto-news-lab-page .yuto-lightbox-arrow {
    width: 46px;
    height: 112px;
  }

  body.yuto-news-lab-page .yuto-lightbox-arrow.prev {
    left: 6px;
  }

  body.yuto-news-lab-page .yuto-lightbox-arrow.next {
    right: 6px;
  }
}

body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo,
body.yuto-news-lab-page .news-meta.yuto-bamboo-control-row {
  --yuto-bamboo-scale: var(--yuto-bamboo-scale-standard);
  --yuto-bamboo-gap-now: calc(var(--yuto-bamboo-gap-base) * var(--yuto-bamboo-scale, 1));
  --yuto-bamboo-inline-now: calc(var(--yuto-bamboo-inline-base) * var(--yuto-bamboo-scale, 1));
  --yuto-bamboo-block-now: calc(var(--yuto-bamboo-block-base) * var(--yuto-bamboo-scale, 1));
}

body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo,
body.yuto-news-lab-page .news-meta.yuto-bamboo-control-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--yuto-bamboo-gap-now);
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（opacity / transform / width）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */

/* News card meta: remove pill skin from category / pinned, but leave action buttons unchanged. */
body.yuto-news-lab-page .news-meta.yuto-bamboo-control-row .news-date,
body.yuto-news-lab-page .news-meta.yuto-bamboo-control-row .news-badge {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgba(239, 243, 255, 0.88);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: .025em;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（color）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-news-lab-page .news-meta.yuto-bamboo-control-row .news-date {
  font-size: .94rem;
  color: rgba(225, 232, 255, 0.82);
}

body.yuto-news-lab-page .news-meta.yuto-bamboo-control-row .news-badge {
  font-size: .86rem;
}

body.yuto-news-lab-page .news-meta.yuto-bamboo-control-row .news-badge.pinned {
  color: rgba(239, 243, 255, 0.88);
  text-shadow: none;
}

@media (max-width: 700px) {
  body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo {
  column-gap: 7px;
  row-gap: 6px;

    align-items: center;
    --yuto-bamboo-scale: 1.24;
    --yuto-bamboo-gap-now: calc(var(--yuto-bamboo-gap-base) * var(--yuto-bamboo-scale));
    --yuto-bamboo-inline-now: calc(var(--yuto-bamboo-inline-base) * var(--yuto-bamboo-scale));
    --yuto-bamboo-block-now: calc(var(--yuto-bamboo-block-base) * var(--yuto-bamboo-scale));
  }

  body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-btn {
  min-height: 36px;
  padding-inline: 1px;

    font-size: 1.196rem;
    line-height: 1.12;
  }

  /* WARN [WALL-29] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
  body.yuto-news-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-separator {
    align-self: center;
    overflow: visible;
  }
}
/* WARN [WALL-38] 承重牆：靠【位置在後】壓過 body.yuto-index-page.yuto-web-lab-page .hero-actions 的 --yuto-bamboo-scale。
     上移、合併或跨區搬動 → 生效樣式翻轉 */
body.yuto-news-lab-page .news-meta.yuto-bamboo-control-row {
  gap: calc(var(--yuto-bamboo-gap-now) * .9);
  margin-bottom: 8px;

  --yuto-bamboo-scale: .68;
}

body.yuto-news-lab-page .news-meta.yuto-bamboo-control-row .news-meta-bamboo {
  opacity: .9;
}

@media (max-width: 900px) {
  body.yuto-news-lab-page .news-meta.yuto-bamboo-control-row {
    --yuto-bamboo-scale: .72;
  }
}

@media (max-width: 700px) {
  body.yuto-news-lab-page .yuto-slice-pager-separator {
    transform: translateY(var(--yuto-slice-pager-label-offset-y, .18em));
  }

  body.yuto-news-lab-page .yuto-slice-pager-separator img {
    display: block;
  }

  body.yuto-news-lab-page.yuto-web-lab-page .news-section {
    margin-bottom: 0;
    padding-bottom: clamp(8px, 2.5vw, 18px);
    border-bottom: 0;
    box-shadow: none;
  }
}
/* 【遷移 v36・隱私頁】原 .yuto-policy-home-button 注入死 slice 變數＋320px min-width，
   會與整張圖寬度衝突（撐寬變形）。改由 .yuto-btn 標準控寬，此區塊移除。
   置中改由容器 .yuto-policy-actions 負責。 */

/* [YUTO-CSS-VERIFY v637] Privacy home button new PNG source
   Owner: P-Policy / privacy.html bottom home button only.
   Root cause:
   - v636 used the older slice-button source, so the visible frame stayed as the old long bamboo/slice style.
   - User wants the newer 30/50 PNG button style used in the recent Links button work.
   Fix:
   - Only privacy bottom home button switches to the new PNG button source.
   - Use the existing 30 trimmed PNG asset source: images/blue_button_30_mobile_trim.png.
   Contract:
   - Privacy filter fix from v636 stays.
   - No Links button changes.
   - No global button changes.
   - No JS / content / background changes.
*/

/* [YUTO-CSS-VERIFY v640] News Lab pager and card CTA PNG button sources
   Owner: P-News / News Lab buttons only.
   Targets:
   1) News Lab pager row:
      首頁 / 上一頁 / 1 / 2 / 下一頁 / 末頁
      Use the long blue_button_click.png source.
   2) News Lab card CTA:
      測試連結 / 查看測試 / buttonText generated by News Lab data
      Use the accepted 30 trimmed PNG source.
   Contract:
   - News Lab only.
   - Desktop/tablet base and mobile override are separated.
   - No HTML structure change.
   - No JS behavior change.
   - No other page changes.
   - Home / Links / Privacy / Booking / Persona / Payment buttons untouched.
*/

/* WHAT ▸ 【標準按鈕套件 v1】消息頁分頁列(智慧換板) 機制:鎖原圖比例整張顯示(contain,零變形)。 變數統一定義在 host(父容器),框與「第x/x頁」共同繼承 → 換板全家同步。 ── 材料庫(新板子在此登記,量好四個數字即可) ── 板名 圖檔 渲染寬×高 內距pad-x 尖端留白tip click(手機) blue_button_click.png 724×56比例 58px 0 80(桌機1~3顆) blue_button_80.png 724×60 86px 30px 90(桌機長板) blue_button_90.png 724×60 63px 19px ── 智慧換板:桌機數字鈕≥4顆時,host 的 :has() 自動切到長板, 變數在 host 上 → 框與「第x/x頁」全家同步,免另外調 ── */
body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host {
  --pager-src: url("../images/blue_button_click.png");
  --pager-img-w: 724px;
  --pager-gap: 14px;
  --pager-tip: 0px;
}

@media (max-width: 700px) {
  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host {
    --pager-h: min(56px, calc(100vw * 56 / 724));
    --pager-pad-x: clamp(28px, 8.2vw, 58px);
    --pager-gap: clamp(6px, 2.4vw, 14px);
  }
}

@media (min-width: 701px) {
  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host {
    --pager-src: url("../images/blue_button_80.png");
    --pager-img-w: 724px;
    --pager-h: 60px;
    --pager-pad-x: 86px;
    --pager-tip: 30px;
    align-items: center;
    column-gap: 2px;
  }
}
body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  width: min(var(--pager-img-w), 100%);
  height: var(--pager-h);
  padding: 0 var(--pager-pad-x);
  gap: var(--pager-gap);
  border: 0;
  border-image-source: none;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-repeat: initial;
  border-radius: 0;
  background: transparent var(--pager-src) center center / contain no-repeat;
  box-shadow: none;
  overflow: hidden;
}

@media (min-width: 701px) {
  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .pager-info {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-left: 0;
    transform: translate(calc(-1 * var(--pager-tip, 0px)), 1px);
  }

  /* 【智慧換板・桌機】數字鈕≥4顆 → 90板(內容空間598px vs 80板552px),
   「第x/x頁」透過 host 繼承的 --pager-tip 自動跟位,不硬蓋。 */
  body.yuto-news-lab-page.yuto-web-lab-page
    .pager.yuto-slice-pager-host:has(.yuto-slice-pager-pages .pager-btn:nth-child(4)) {
    --pager-src: url("../images/blue_button_90.png");
    --pager-img-w: 724px;
    --pager-h: 60px;
    --pager-pad-x: 63px;
    --pager-tip: 19px;
  }
}

@media (max-width: 700px) {
  /* 【智慧壓縮・手機】數字鈕≥4顆 → 只轉「字級」一顆旋鈕整組等比壓縮。
   竹子(.72em×1.35em)、綠圈(1.82em)、間距全是 em 體系,
   字級縮→全員同比例縮,比例關係不變、不會突兀。(基準字級11.5px→壓縮後約9~10px) */
  body.yuto-news-lab-page.yuto-web-lab-page
    .pager.yuto-slice-pager-host:has(.yuto-slice-pager-pages .pager-btn:nth-child(4)) .yuto-slice-pager {
    --yuto-slice-pager-font-size: clamp(9px, 2.6vw, 11px);
    --pager-gap: clamp(3px, 1.2vw, 8px);
    --pager-pad-x: clamp(22px, 6.4vw, 46px);
  }
}
body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-btn {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-image-source: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(246, 248, 255, 0.96);
  font-family: var(--yuto-type-font-family);
  font-weight: 700;
  line-height: 1;
}

body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-btn:hover,
body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-btn:focus-visible,
body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-btn:active {
  background: transparent;
  color: #ffffff;
}

body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-btn:disabled {
  opacity: .46;
}

body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-btn.active {
  color: #ffffff;
}

@media (max-width: 700px) {
  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager {
    width: 100%;
    gap: 8px;
    padding: 0 30px;
  }

  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-label {
    font-size: var(--yuto-type-button-size-xs);
  }
}

@media (min-width: 701px) {
  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager {
    --yuto-slice-pager-font-size: 14.6px;
    gap: 11px;
  }

  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-pages {
    gap: .24em;
  }

  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager .pager-btn {
    min-width: 1.82em;
    min-height: 1.82em;
    padding: 0 .18em;
  }

  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-pages .pager-btn {
    width: 1.82em;
    min-width: 1.82em;
    height: 1.82em;
    min-height: 1.82em;
    flex: 0 0 1.82em;
    padding: 0;
    aspect-ratio: 1 / 1;
  }

  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-pages .pager-btn::before {
    width: 1.82em;
    height: 1.82em;
  }

  body.yuto-news-lab-page.yuto-web-lab-page .pager.yuto-slice-pager-host .yuto-slice-pager-separator {
    width: 1.02em;
    height: 1.76em;
    margin: 0 .1em;
  }

  body.yuto-news-lab-page.yuto-web-lab-page .news-filter-row.yuto-news-filter-bamboo {
  --yuto-bamboo-scale: var(--yuto-bamboo-scale-large);
  --yuto-bamboo-gap-now: calc(var(--yuto-bamboo-gap-base) * var(--yuto-bamboo-scale));
  --yuto-bamboo-inline-now: calc(var(--yuto-bamboo-inline-base) * var(--yuto-bamboo-scale));
  --yuto-bamboo-block-now: calc(var(--yuto-bamboo-block-base) * var(--yuto-bamboo-scale));

    gap: var(--yuto-bamboo-gap-now);
  }

  body.yuto-news-lab-page.yuto-web-lab-page .news-filter-row.yuto-news-filter-bamboo .news-filter-btn {
  font-size: clamp(1rem, 1.12vw, 1.08rem);
  line-height: 1.12;

    padding: 4px 0;
  }
}
/* V754: fake knife visibility is now owned by the single Web Lab cursor layer source above.
   Payment-page modal/button layers no longer re-show the knife during middle-scroll. */

/* WHAT ▸ 消息頁初次載入訊息：只負責【容器排版＋家徽尺寸】。
          家徽本身的外觀來自共用元件 .yuto-kamon-loader（全站唯一定義處）。
   WHY  家徽外觀由共用元件供應，這裡只保留本頁真正的差異（容器排版與尺寸）。 */
body.yuto-news-lab-page .news-section .news-list > .news-status-message.is-loading {
  --yuto-kamon-loader-size: var(--yuto-loading-kamon-size-lg);
  --yuto-news-loading-kamon-gap: 12px;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--yuto-news-loading-kamon-gap);
  min-height: calc(var(--yuto-kamon-loader-size) + 24px);
}

body.yuto-news-lab-page .news-section .news-list > .news-status-message.is-loading .news-loading-text {
  display: inline-block;
  min-width: 0;
}

@media (max-width: 700px) {
  body.yuto-news-lab-page .news-section .news-list > .news-status-message.is-loading {
    --yuto-kamon-loader-size: 30px;
    --yuto-news-loading-kamon-gap: 10px;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-B 區　payment 專屬                                         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
body.yuto-payment-lab-page .payment-desc.subtle {
  margin-top: 18px;
  opacity: .78;
}

/* WHY danger/secondary 的 opacity 指向保留的狀態 class（is-cancel-danger / is-checkout-secondary / is-secondary）*/
body.yuto-payment-lab-page .yuto-btn--payment.is-checkout-secondary,
body.yuto-payment-lab-page .yuto-btn--payment.is-cancel-danger {
  opacity: .95;
}

@media (max-width: 760px) {
  body.yuto-payment-lab-page .payment-cancel-actions .yuto-btn--payment {
    margin-inline: auto;
  }
}
/* WHAT ▸ yuto-payment-lab-modal-cursor-select-v721: Lab-only diagnostic/source fix. Scope: body.yuto-payment-lab-page only. Purpose: 1) Force payment cancel modal back to viewport overlay layer on desktop/mobile. 2) Keep fake knife cursor above payment button/modal layers while native cursor stays hidden. 3) Prevent mobile long-press blue selection/highlight on payment buttons and cancel modal buttons. Guards: no Apps Script / Worker / ECPay / Mail / Booking flow changes. */

/* Modal overlay source: active cancel dialog must be a viewport layer, not a DOM-flow block below checkout cards. */
body.yuto-payment-lab-page .payment-cancel-modal:not(.is-hidden) {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: var(--yuto-payment-lab-modal-layer-v722);
  display: grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-bottom));
  background: rgba(3, 8, 30, 0.74);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  isolation: isolate;
}

@media (max-width: 760px) {
  body.yuto-payment-lab-page .payment-cancel-modal:not(.is-hidden) {
    padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-bottom));
    align-content: center;
  }

  body.yuto-payment-lab-page .payment-cancel-modal:not(.is-hidden) .payment-cancel-dialog {
    width: min(calc(100vw - 28px), 430px);
    max-height: calc(100dvh - max(34px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 34px));
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  body.yuto-payment-lab-page .payment-cancel-modal:not(.is-hidden) {
    padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom));
  }

  body.yuto-payment-lab-page .payment-cancel-modal:not(.is-hidden) .payment-cancel-dialog {
    max-height: calc(100dvh - 24px);
  }
}
body.yuto-payment-lab-page .payment-action-area,
body.yuto-payment-lab-page .payment-action-area *,
body.yuto-payment-lab-page .payment-cancel-actions,
body.yuto-payment-lab-page .payment-cancel-actions *,
body.yuto-payment-lab-page .payment-cancel-dialog,
body.yuto-payment-lab-page .payment-cancel-dialog * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

body.yuto-payment-lab-page .payment-cancel-dialog::selection,
body.yuto-payment-lab-page .payment-cancel-dialog *::selection {
  background: transparent;
  color: inherit;
}

/* WHAT ▸ yuto-payment-lab-modal-cursor-select-v722 follow-up Scope: payment-related Lab pages only. Purpose: 1) Make the cancel confirmation dialog readable over the checkout/result cards. 2) Keep long-press selection guards active on all payment-page buttons. 3) Test desktop payment-button native cursor leak: payment buttons must not restore cursor:pointer. Guards: no Apps Script / Worker / ECPay / Mail / Booking flow changes. */

/* Dialog surface blur/readability: modal stays transparent in style, but the card no longer lets the page text show through clearly. */
/* WHAT ▸ 付款頁取消對話框（開啟狀態）：只保留版面，表面交給 .yuto-surface-overlay。
   WARN 本選擇器特異度 (0,4,1)，遠高於元件的 (0,1,0) —— 若在此宣告 background /
        border-color / box-shadow，會把元件整個架空，連 hover 都壓死。
   WARN 模糊由外層遮罩負責（見 .payment-cancel-modal:not(.is-hidden)），
        面板不要再加 backdrop-filter，否則同一區域會疊兩層模糊。 */
body.yuto-payment-lab-page .payment-cancel-modal:not(.is-hidden) .payment-cancel-dialog {
  position: relative;
  z-index: 1;
  width: min(calc(100vw - 40px), var(--yuto-overlay-max-width));
  max-height: calc(100dvh - max(40px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 40px));
  margin: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.yuto-payment-lab-page .payment-action-area,
body.yuto-payment-lab-page .payment-action-area *,
body.yuto-payment-lab-page .payment-cancel-actions,
body.yuto-payment-lab-page .payment-cancel-actions * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

body.yuto-payment-lab-page button.yuto-btn--payment,
body.yuto-payment-lab-page .payment-action-area .yuto-btn--payment,
body.yuto-payment-lab-page .payment-cancel-actions .yuto-btn--payment {
  cursor: none;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-B 區　payment-result 專屬                                  ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
body.yuto-payment-lab-page .payment-visual.has-emotion {
  width: 100%;
  min-height: 0;
  justify-items: center;
}

body.yuto-payment-lab-page .payment-emotion-img {
  display: block;
  width: var(--payment-lab-result-emotion-size);
  height: var(--payment-lab-result-emotion-size);
  max-width: min(100%, var(--payment-lab-result-emotion-size));
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.26));
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 760px) {
  body.yuto-payment-lab-page .payment-emotion-img {
    width: var(--payment-lab-result-emotion-size-mobile);
    height: var(--payment-lab-result-emotion-size-mobile);
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-B 區　persona 專屬                                         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@media (hover: none) and (pointer: coarse) {
  body.yuto-page-bg .nori-reveal {
    touch-action: manipulation;
  }
}

@media (max-width: 700px) {
  body.yuto-index-page .profile-section { padding-bottom: 18px; }
}
/* WHAT ▸ Index Nori Reveal Module v1 */
body.yuto-index-page .nori-reveal {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.45em;
  vertical-align: baseline;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  appearance: none;
  -webkit-appearance: none;
  isolation: isolate;
  outline: none;
}

body.yuto-index-page .nori-reveal:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

body.yuto-index-page .nori-reveal-text {
  transition: opacity 0.18s ease;
}

body.yuto-index-page .nori-reveal:not(.is-revealed) .nori-reveal-text {
  opacity: 0.12;
}

body.yuto-index-page .nori-reveal::after {
  content: "";
  position: absolute;
  left: -0.12em;
  right: -0.12em;
  top: 0.18em;
  bottom: 0.13em;
  z-index: 2;
  border-radius: 5px 7px 4px 6px;
  background:
    linear-gradient(180deg, rgba(53, 55, 64, 0.96), rgba(39, 41, 49, 0.97)),
    repeating-linear-gradient(-8deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 11px);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transform: rotate(-0.6deg);
  transform-origin: center;
  transition:
    opacity 0.2s ease,
    transform 0.2s var(--yuto-ease-out),
    filter 0.2s ease;
}

body.yuto-index-page .nori-reveal:hover::after {
  filter: brightness(1.03);
}

body.yuto-index-page .nori-reveal.is-revealed {
  pointer-events: none;
}

body.yuto-index-page .nori-reveal.is-revealed .nori-reveal-text {
  opacity: 1;
}

body.yuto-index-page .nori-reveal.is-revealed::after {
  opacity: 0;
  transform: scaleX(0.9) translateY(-1px) rotate(-0.6deg);
  filter: blur(3px);
  pointer-events: none;
}

/* WHAT ▸ 首頁整合：角色人設 / 三視圖 / 合作聯絡 */
body.yuto-index-page .profile-section {
  padding: 0 0 26px;
}

body.yuto-index-page .detail-card,
body.yuto-index-page .story-card {
  border-radius: var(--radius-lg);
  padding: 24px;
}

body.yuto-index-page .detail-card p,
body.yuto-index-page .story-card p {
  margin: 0;
  color: var(--text-soft);
}

body.yuto-index-page .detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body.yuto-index-page .story-grid {
  display: grid;
  gap: 18px;
}

body.yuto-index-page .story-grid-single {
  grid-template-columns: 1fr;
}

body.yuto-index-page .detail-card h3,
body.yuto-index-page .story-card h3 {
  margin: 0 0 10px;
  font-size: 1.08rem;
}

body.yuto-index-page .info-list,
body.yuto-index-page .detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.yuto-index-page .info-list li,
body.yuto-index-page .detail-list li {
  color: var(--text-soft);
}

body.yuto-index-page .info-list strong,
body.yuto-index-page .detail-list strong {
  color: var(--text);
}

@media (max-width: 920px) {
  body.yuto-index-page .story-grid,
  body.yuto-index-page .detail-grid {
    grid-template-columns: 1fr;
  }
}
/* WHAT ▸ Persona Page Public Spacing Hotfix Module v1 */

@media (hover: hover) and (pointer: fine) {
  body.yuto-web-lab-page .yuto-lightbox-trigger {
    cursor: var(--yuto-knife-cursor-pointer);
  }
}
body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel .info-list {
  font-size: var(--yuto-type-persona-body-size);
  line-height: var(--yuto-type-persona-body-line);
  font-weight: var(--yuto-type-persona-body-weight);
}

body.yuto-persona-lab-page.yuto-web-lab-page {
  --yuto-lab-bg-314bad-deep-vivid: #0B1A4C;
  background-color: var(--yuto-lab-bg-314bad-deep-vivid);
}

body.yuto-persona-lab-page.yuto-web-lab-page main {
  background-color: var(--yuto-lab-bg-314bad-deep-vivid);
  background-image: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page main::before,
body.yuto-persona-lab-page.yuto-web-lab-page main::after {
  background-image: none;
  opacity: 0;
}

body.yuto-persona-lab-page.yuto-has-bg-texture .yuto-home-bg-scene,
body.yuto-persona-lab-page.yuto-has-bg-texture main > .yuto-bg-texture-layer {
  inset: 0 auto auto 0;
  width: 100%;
  min-height: 100%;
  height: max(100%, var(--yuto-persona-lab-bg-stage-height, 5200px));
}

body.yuto-persona-lab-page.yuto-web-lab-page .yuto-site-footer[data-yuto-no-hover-sheen="true"] .yuto-footer-links a {
  transform: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-section-shell {
  position: relative;
  display: block;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-section-shell > .section-head {
  margin-bottom: 18px;
}

@media (max-width: 700px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-section-shell > .section-head {
    margin-bottom: 14px;
  }
}
body.yuto-persona-lab-page.yuto-web-lab-page .persona-other-details-section .detail-grid,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-other-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  width: 100%;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-other-details-section .detail-grid > .detail-card,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-other-details-grid > .detail-card {
  width: 100%;
  min-width: 0;
  height: 100%;
}

/* WARN 靜止狀態必須本身可見（opacity:1/transform:none）＋ animation-fill-mode:both。
     否則 fade-up 卡片碰上 async 解碼的立繪 → 初始合成不穩 → 卡片永久空白 → PRIN-20 */
body.yuto-persona-lab-page.yuto-web-lab-page .detail-card.fade-up {
  opacity: 1;
  transform: none;
  animation-fill-mode: both;
  contain: layout style;
}

@media (max-width: 920px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-other-details-section .detail-grid,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-other-details-grid {
    grid-template-columns: 1fr;
  }
}
body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-lab-section {
  padding-top: clamp(70px, 9vh, 118px);
  padding-bottom: clamp(34px, 5vh, 72px);
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-stage {
  position: relative;
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: visible;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-stage::before {
  content: "";
  position: absolute;
  inset: 6% -2% 3% 24%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 46% 34%, rgba(255, 255, 255, 0.1), transparent 0 24%, transparent 52%),
    radial-gradient(circle at 58% 58%, rgba(79, 126, 255, 0.13), transparent 0 30%, transparent 64%);
  opacity: .68;
  filter: blur(10px);
}

/* WARN [WALL-15] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-height: clamp(500px, 70vh, 760px);
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-fullbody {
  border-radius: 0;
  filter:
    drop-shadow(0 34px 46px rgba(0, 0, 0, 0.24))
    drop-shadow(0 0 30px rgba(89, 136, 255, 0.12));
  transform: translateX(clamp(-12px, -1.4vw, 0px));
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-static-copy-panel {
  position: relative;
  overflow-anchor: none;
  z-index: 2;
  align-self: center;
  min-width: 0;
  width: min(100%, 760px);
  max-height: none;
  overflow-y: visible;
  overscroll-behavior: auto;
  padding: clamp(22px, 3vh, 34px) clamp(16px, 2.2vw, 30px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-static-copy-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-static-copy-panel:focus-visible {
  outline: 2px solid rgba(77, 226, 197, 0.38);
  outline-offset: 6px;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（font-size / font-weight / line-height）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter {
  --persona-type-copy-line-height: calc(var(--yuto-type-persona-body-line) + .06);
  font-weight: var(--yuto-type-persona-body-weight);
  letter-spacing: .015em;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter p {
  margin: 0;
  line-height: var(--persona-type-copy-line-height);
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-line + .persona-typewriter-line {
  margin-top: .46em;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-impression {
  margin-top: clamp(24px, 3.2vh, 38px);
}

/* WARN [WALL-36] 承重牆：靠【位置在後】壓過 body.yuto-index-page.yuto-web-lab-page .hero-card > .hero-text 的 font-weight。
     上移、合併或跨區搬動 → 生效樣式翻轉 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-impression h3 {
  margin: 0 0 .42em;
  font-size: clamp(1.36rem, 1.59vw, 1.67rem);
  line-height: 1.25;
  font-weight: 900;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-impression p {
  font-size: inherit;
  line-height: inherit;
}

/* WARN 相鄰的 .persona-typewriter.is-screaming 是【JS 動態加的、活的】，不可清 */

body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter.is-screaming {
  animation: personaIntroScreamShake .92s var(--yuto-ease-in-out-strong) both;
}

@media (prefers-reduced-motion: reduce) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter.is-screaming {
    animation: none;
  }
}

@media (max-width: 900px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-lab-section {
    padding-top: 54px;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-stage {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 18px;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-stage::before {
    inset: 18% -12% 16% -12%;
    opacity: .48;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual {
    min-height: 360px;
    justify-content: center;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-fullbody {
    transform: none;
  }

  /* WHY 人設圖底部漸層淡出：≤900 補上跟電腦完全相同的 fade，避免手機出現硬邊、與電腦不一致 */
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-layer,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-layer {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 69%,
      rgba(0, 0, 0, 0.84) 80%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 69%,
      rgba(0, 0, 0, 0.84) 80%,
      transparent 100%
    );
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-static-copy-panel {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter {
    max-width: none;
    font-size: 1rem;
    line-height: 1.86;
  }
}
/* WARN [WALL-37] 承重牆：靠【位置在後】壓過 body.yuto-index-page.yuto-web-lab-page .section-head h2 的 font-weight。
     上移、合併或跨區搬動 → 生效樣式翻轉 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-title {
  margin: 0 0 clamp(12px, 1.6vh, 20px);
  font-size: clamp(1.47rem, 1.54vw, 1.75rem);
  line-height: 1.34;
  font-weight: 950;
  letter-spacing: .01em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.98);
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.64),
    0 0 22px rgba(121, 232, 255, 0.14);
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-title + .persona-typewriter-line {
  margin-top: 0;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-scream-line {
  display: inline-block;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  isolation: isolate;   /* WARN 待機不佔 GPU 圖層；堆疊上下文只靠這一條撐著，不可刪 → PRIN-01 / TRAP-28 */
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-lab-section {
  padding-top: clamp(38px, 6vh, 78px);
  padding-bottom: clamp(34px, 5vh, 70px);
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-stage {
  display: grid;
  align-items: center;
  isolation: isolate;
}

/* WARN [WALL-16] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel {
  overflow-anchor: none;
  min-width: 0;
  max-height: clamp(330px, 48vh, 520px);
  overflow-y: auto;
  overscroll-behavior: auto;
  padding: clamp(18px, 2.6vh, 30px) clamp(10px, 1.7vw, 22px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  text-shadow:
    0 2px 9px rgba(0, 0, 0, 0.58),
    0 0 16px rgba(11, 26, 76, 0.42);
  scrollbar-width: auto;
  -ms-overflow-style: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel:focus-visible {
  outline: 2px solid rgba(77, 226, 197, 0.34);
  outline-offset: 6px;
}

/* WARN [WALL-37] 承重牆：靠【位置在後】壓過 body.yuto-index-page.yuto-web-lab-page .section-head h2 的 font-weight。
     上移、合併或跨區搬動 → 生效樣式翻轉 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel h2 {
  margin: 0 0 clamp(22px, 3vh, 34px);
  font-size: clamp(2rem, 3.2vw, 3.62rem);
  line-height: 1.02;
  font-weight: 950;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group + .persona-role-copy-group {
  margin-top: clamp(28px, 3.7vh, 46px);
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group h3 {
  margin: 0 0 .62em;
  font-size: clamp(1.18rem, 1.42vw, 1.5rem);
  line-height: 1.24;
  font-weight: 900;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group .info-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group .info-list li {
  margin: 0 0 .48em;
  color: rgba(246, 248, 255, 0.91);
  font-weight: var(--yuto-type-persona-body-weight);
}

/* WARN [WALL-17] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual {
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(420px, 58vh, 660px);
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-image {
  border-radius: 0;
  filter:
    drop-shadow(0 32px 44px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 28px rgba(89, 136, 255, 0.1));
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-scream-line.is-screaming {
    animation: none;
  }
}

@media (max-width: 900px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-title {
    font-size: clamp(1.32rem, 6vw, 1.9rem);
    line-height: 1.32;
    white-space: normal;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-stage {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 18px;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    padding: 0 clamp(16px, 4.5vw, 24px);
    -webkit-mask-image: none;
    mask-image: none;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual {
    min-height: 340px;
    order: -1;
  }
}
/* WARN 靠【位置在後】壓過同選擇器的前一份（color / text-shadow）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-static-copy-panel,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel {
  color: rgba(246, 248, 255, 0.96);
  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.58), 0 0 16px rgba(11, 26, 76, 0.42);

  overscroll-behavior-y: auto;
}

@media (min-width: 901px) {
  /* WARN [WALL-18] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter {
    max-width: 760px;
    font-size: clamp(1.17rem, 1.29vw, 1.36rem);
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-static-copy-panel::-webkit-scrollbar,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter p,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-impression p,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group .info-list li {
    font-size: inherit;
    line-height: var(--persona-panel-copy-line-height);
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-impression h3,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group h3 {
    font-size: var(--persona-panel-subtitle-size);
    line-height: 1.28;
    margin-bottom: .5em;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-line + .persona-typewriter-line,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group .info-list li + li {
    margin-top: .34em;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  /* WARN [WALL-19] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-stage {
    gap: clamp(20px, 2.8vw, 42px);
  }
}
/* WARN [WALL-20] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual {
  pointer-events: auto;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual-canvas {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  isolation: isolate;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transform: translateX(clamp(-12px, -1.4vw, 0px)) scale(.985);
  transition:
    opacity 520ms ease,
    transform 620ms var(--yuto-ease-soft),
    filter 620ms ease;
  pointer-events: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-layer.is-active {
  opacity: 1;
  transform: translateX(clamp(-12px, -1.4vw, 0px)) scale(1);
  z-index: 1;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch {
  position: absolute;
  top: clamp(10px, 1.8vh, 18px);
  left: clamp(10px, 1.3vw, 18px);
  z-index: 4;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-tab {
  color: rgba(246, 248, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.42);
  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-tab:hover,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-tab:focus-visible {
  background: rgba(139, 105, 255, 0.42);
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-tab.is-active {
  background: linear-gradient(135deg, rgba(147, 105, 255, 0.92), rgba(77, 226, 197, 0.72));
  box-shadow: 0 10px 24px rgba(101, 75, 255, 0.22);
}

@media (max-width: 900px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual-canvas {
    width: min(88vw, 560px);
    height: min(58vh, 520px);
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch {
    top: 8px;
    left: 8px;
  }
}
body.yuto-persona-lab-page.yuto-web-lab-page {
  --yuto-home-lab-bg-stage-height: 5200px;
  --yuto-persona-lab-bg-stage-height: 5200px;

  --persona-role-panel-reveal-height: clamp(315px, 38vh, 375px);
  --persona-panel-max-width: 1060px;
  --persona-panel-copy-size: clamp(1.34rem, 1.53vw, 1.66rem);
  --persona-panel-title-size: clamp(1.86rem, 1.98vw, 2.26rem);
  --persona-panel-subtitle-size: clamp(1.38rem, 1.58vw, 1.76rem);
  --persona-panel-copy-line-height: 1.82;
  --persona-panel-fade-size: clamp(28px, 3.6vh, 46px);
}

@media (min-width: 901px) {
  /* WARN 靠【位置在後】壓過同選擇器的前一份（font-size / max-width）。
       合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel {
  max-width: var(--persona-panel-max-width);

    font-size: var(--persona-panel-copy-size);
    line-height: var(--persona-panel-copy-line-height);
  }

  /* WARN [WALL-21] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter {
    --persona-type-copy-line-height: var(--persona-panel-copy-line-height);
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-title,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel h2 {
  margin-bottom: clamp(14px, 1.9vh, 24px);

    font-size: var(--persona-panel-title-size);
    line-height: 1.16;
    white-space: nowrap;
    max-width: 100%;
  }

  /* WARN 靠【位置在後】壓過同選擇器的前一份（margin-top）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter-impression,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group + .persona-role-copy-group {
    margin-top: clamp(22px, 2.9vh, 36px);
  }
}
/* WHY role 面板是固定高度 overflow-y:auto 的內捲視窗 → 只在此決策點給上下漸層遮罩（intro 仍 none），不另疊 override 層。≤900 面板不內捲，不受此桌機規則影響 */

/* WARN [WALL-22] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual {
  pointer-events: auto;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-canvas {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  isolation: isolate;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transform: scale(.985);
  transition:
    opacity 520ms ease,
    transform 620ms var(--yuto-ease-soft),
    filter 620ms ease;
  pointer-events: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-layer.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch {
  top: clamp(10px, 1.8vh, 18px);
  left: clamp(10px, 1.3vw, 18px);
  max-width: calc(100% - 20px);
  row-gap: 6px;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-tab {
  padding-inline: 11px;
}

@media (max-width: 900px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-canvas {
    width: min(88vw, 560px);
    height: min(58vh, 520px);
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch {
    top: 8px;
    left: 8px;
  }
}

@media (min-width: 901px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-lab-section > .container,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-lab-section > .container {
    width: min(1540px, 96%);
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-stage {
  min-height: clamp(560px, 70vh, 740px);

    grid-template-columns: minmax(500px, .96fr) minmax(760px, 1.04fr);
    gap: clamp(0px, 1.25vw, 24px);
    overflow: visible;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual {
    z-index: 1;
    justify-content: flex-start;
    overflow: visible;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual-canvas {
    width: min(64vw, 820px);
    height: clamp(620px, 80vh, 910px);
    transform: translateX(clamp(-44px, -2.8vw, -12px));
    overflow: visible;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-static-copy-panel {
  -webkit-mask-image: none;
  mask-image: none;
  justify-self: end;
  transform: translateX(clamp(18px, 3.8vw, 74px));
  max-width: min(1120px, 100%);

    z-index: 3;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch {
    z-index: 8;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-stage {
  min-height: clamp(540px, 68vh, 720px);

    grid-template-columns: minmax(760px, 1.02fr) minmax(500px, .98fr);
    gap: clamp(8px, 1.6vw, 30px);
    overflow: visible;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual {
    z-index: 1;
    justify-content: flex-end;
    overflow: visible;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-canvas {
    width: min(58vw, 760px);
    height: clamp(560px, 74vh, 860px);
    transform: translateX(clamp(8px, 2vw, 38px));
    overflow: visible;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-layer,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-layer {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 69%,
      rgba(0, 0, 0, 0.84) 80%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 69%,
      rgba(0, 0, 0, 0.84) 80%,
      transparent 100%
    );
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-stage {
    grid-template-columns: minmax(360px, .88fr) minmax(560px, 1.12fr);
    gap: clamp(8px, 1.8vw, 24px);
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-static-copy-panel {
    transform: translateX(clamp(8px, 1.6vw, 28px));
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual-canvas {
    width: min(58vw, 680px);
    height: clamp(540px, 72vh, 760px);
    transform: translateX(clamp(-20px, -1.6vw, -8px));
  }

  /* WARN [WALL-23] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-stage {
    grid-template-columns: minmax(560px, 1.12fr) minmax(360px, .88fr);
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-canvas {
    width: min(52vw, 650px);
    height: clamp(500px, 68vh, 740px);
    transform: translateX(clamp(0px, 1vw, 16px));
  }
}
/* WARN .persona-typewriter-static（無 -intro）是【活的】，未動 */

body.yuto-persona-lab-page.yuto-web-lab-page .persona-scream-burst {
  display: inline-block;
  transform-origin: 50% 52%;
  transform-box: fill-box;
  isolation: isolate;   /* WARN 動畫結束後 animation:none → transform 消失 → 堆疊上下文只剩這一條 → PRIN-01 / TRAP-28 */
}

/* Persona Lab top/side visual switches: text-only + bamboo separators */
/* WARN 靠【位置在後】壓過同選擇器的前一份（background / border-radius / color / font-size / letter-spacing / text-shadow）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-tab,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-tab {
  appearance: none;
  border: 0;
  border-radius: 0;
  min-height: auto;
  background: none;
  box-shadow: none;
  color: rgba(240, 244, 255, 0.74);
  font-weight: 900;
  letter-spacing: .03em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.38);
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-tab:hover,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-tab:focus-visible,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-tab:hover,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-tab:focus-visible {
  background: none;
  color: #fff;
  outline: none;
  box-shadow: none;
  transform: translateY(-1px);
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（background / box-shadow / color）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-tab.is-active,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-tab.is-active {
  color: #fff;
  background: none;
  box-shadow: none;
  text-shadow:
    0 0 12px rgba(123, 92, 255, 0.18),
    0 1px 10px rgba(0, 0, 0, 0.38);
}

/* Persona Lab tag chips: plain text tags + bamboo separators */
body.yuto-persona-lab-page.yuto-web-lab-page .tag-list .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #f4efff;
  font-size: .98rem;
  font-weight: 800;
  filter: none;
  transform: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page .tag-list .chip:hover {
  box-shadow: none;
  transform: none;
  filter: none;
}

@media (max-width: 900px) {
  /* WARN 靠【位置在後】壓過同選擇器的前一份（font-size）。
       合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-tab,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-tab,
  body.yuto-persona-lab-page.yuto-web-lab-page .tag-list .chip {
    font-size: .92rem;
  }
}

@media (max-width: 700px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch .yuto-bamboo-separator,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch .yuto-bamboo-separator {
    overflow: visible;
  }
}
body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch,
body.yuto-persona-lab-page.yuto-web-lab-page .tag-list {
  --yuto-bamboo-gap-now: calc(var(--yuto-bamboo-gap-base) * var(--yuto-bamboo-scale, 1));
  --yuto-bamboo-inline-now: calc(var(--yuto-bamboo-inline-base) * var(--yuto-bamboo-scale, 1));
  --yuto-bamboo-block-now: calc(var(--yuto-bamboo-block-base) * var(--yuto-bamboo-scale, 1));
}

/* WARN [WALL-38] 承重牆：靠【位置在後】壓過 body.yuto-index-page.yuto-web-lab-page .hero-actions 的 --yuto-bamboo-scale。
     上移、合併或跨區搬動 → 生效樣式翻轉 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
 --yuto-bamboo-scale: var(--yuto-bamboo-scale-small);
}

/* WARN [WALL-38] 承重牆：靠【位置在後】壓過 body.yuto-index-page.yuto-web-lab-page .hero-actions 的 --yuto-bamboo-scale。
     上移、合併或跨區搬動 → 生效樣式翻轉 */
body.yuto-persona-lab-page.yuto-web-lab-page .tag-list {
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 14px;
 --yuto-bamboo-scale: var(--yuto-bamboo-scale-mini);
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（display / flex-wrap / gap）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch,
body.yuto-persona-lab-page.yuto-web-lab-page .tag-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--yuto-bamboo-gap-now);
}

/* WARN [WALL-31] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel {
  box-sizing: border-box;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0.2) 87%, rgba(255, 255, 255, 0)),
    linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0.2) 87%, rgba(255, 255, 255, 0));
  background-size: 1px 100%, 1px 100%;
  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll;
}

/* WARN 靠【位置在後】壓過同選擇器的前一份（outline / outline-offset）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-static-copy-panel:focus-visible,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel:focus-visible {
  outline: 2px solid rgba(77, 226, 197, 0.22);
  outline-offset: 6px;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-detail-mega-copy {
  display: flex;
  align-items: center;
  min-height: clamp(96px, 10vw, 150px);
  margin: 0;
  max-width: 100%;
  color: #fff;
  font-size: clamp(3.2rem, 7.2vw, 7.2rem);
  line-height: .92;
  font-weight: 950;
  letter-spacing: -.06em;
  white-space: nowrap;
  overflow-wrap: normal;
  text-shadow:
    0 16px 34px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(159, 124, 255, 0.16);
}

@media (max-width: 900px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-detail-mega-copy {
    min-height: clamp(76px, 17vw, 118px);
    font-size: clamp(2.9rem, 15vw, 5.8rem);
  }
}

@media (max-width: 420px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-detail-mega-copy {
    font-size: clamp(2.6rem, 13.5vw, 4.7rem);
    letter-spacing: -.07em;
  }
}
/* WHAT ▸ Persona Lab v031 — Other Details Layout Source */
/* WARN 靠【位置在後】壓過同選擇器的前一份（align-items / display / gap / grid-template-columns / width）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */

/* WARN 靠【位置在後】壓過同選擇器的前一份（min-width / width）。
     合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */

@media (max-width: 700px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(18px, 5.4vw, 26px);
    padding-block: clamp(10px, 3.6vw, 18px);
    overflow: visible;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel .persona-role-copy-title,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel h2 {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    font-size: clamp(1.55rem, 8vw, 2.08rem);
    line-height: 1.14;
    overflow-wrap: break-word;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group .info-list,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-copy-group .info-list li {
    max-width: 100%;
    overflow-wrap: break-word;
  }
}
body.yuto-persona-lab-page.yuto-web-lab-page .persona-typewriter.is-screaming .persona-scream-line {
  text-shadow:
  0 2px 9px rgba(0, 0, 0, 0.68),
  0 0 10px rgba(255, 255, 255, 0.26),
  0 0 18px rgba(121, 232, 255, 0.28);

  animation: personaScreamGlowSync .92s var(--yuto-ease-in-out-strong) both;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-scream-line.is-screaming {
  text-shadow:
    0 2px 9px rgba(0, 0, 0, 0.58),
    0 0 0 rgba(255, 255, 255, 0),
    0 0 0 rgba(121, 232, 255, 0);
  animation:
    personaIntroScreamShake .92s var(--yuto-ease-in-out-strong) both,
    personaScreamGlowSync .92s var(--yuto-ease-in-out-strong) both;
}

body.yuto-persona-lab-page.yuto-web-lab-page .persona-scream-burst.is-screaming {
  text-shadow:
    0 2px 9px rgba(0, 0, 0, 0.58),
    0 0 0 rgba(255, 255, 255, 0),
    0 0 0 rgba(121, 232, 255, 0);
  animation:
    personaIntroScreamShake .92s var(--yuto-ease-in-out-strong) both,
    personaScreamGlowSync .92s var(--yuto-ease-in-out-strong) both;
}

@media (prefers-reduced-motion: reduce) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-scream-burst.is-screaming {
  animation: none;

    text-shadow:
      0 2px 9px rgba(0, 0, 0, 0.58),
      0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(121, 232, 255, 0);
  }
}
body.yuto-web-lab-page .yuto-lightbox-close::before,
body.yuto-web-lab-page .yuto-lightbox-close::after,
body.yuto-web-lab-page .news-preview-lightbox-close::before,
body.yuto-web-lab-page .news-preview-lightbox-close::after {
  content: none;
  display: none;
  background: none;
  box-shadow: none;
}

body.yuto-web-lab-page .yuto-lightbox-close,
body.yuto-web-lab-page .news-preview-lightbox-close {
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: 120%;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
  background-image: url("../images/shuriken_1.png");
  background-repeat: no-repeat;
  background-position: center;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  background-size: 200% 200%;
}

@media (max-width: 700px) {
  body.yuto-web-lab-page .yuto-lightbox-close,
  body.yuto-web-lab-page .news-preview-lightbox-close {
    background-size: 170% 170%;
  }
}

@media (min-width: 701px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual-canvas > .persona-visual-switch,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-canvas > .persona-role-visual-switch {
    --yuto-bamboo-scale: 1.16;
    --yuto-bamboo-gap-now: 6px;
    --yuto-bamboo-inline-now: 26px;
    --yuto-bamboo-block-now: 60px;
    gap: var(--yuto-bamboo-gap-now);
    align-items: center;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual-canvas > .persona-visual-switch > .persona-visual-tab,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-canvas > .persona-role-visual-switch > .persona-role-visual-tab {
    font-size: 1.18rem;
    padding: 5px 0;
    line-height: 1.12;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual-canvas > .persona-visual-switch > .yuto-bamboo-separator,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-canvas > .persona-role-visual-switch > .yuto-bamboo-separator {
    width: var(--yuto-bamboo-inline-now);
    height: var(--yuto-bamboo-block-now);
    align-self: center;
  }
}
/* [YUTO-CSS-VERIFY v658] Persona Lightbox knife buttons hover and z-index fix
   Owner: P-Persona / Persona Lab Lightbox only.
   Target:
   1) Remove hover-sheen ownership from Persona image preview canvas.
   2) Keep the fake knife cursor above Persona Lightbox.
   3) Replace Persona Lightbox prev/next visual buttons with Wakizashi / Katana PNGs.
   Guard:
   - Desktop v655 untouched.
   - Mobile v656 untouched.
   - Persona switch rows / other Persona UI untouched.
   - News Lab / Home / Links / Privacy / other pages untouched.
   - Original button element stays for click/keyboard accessibility, but its old visual skin/text is hidden.
*/
body.yuto-persona-lab-page.yuto-web-lab-page .persona-intro-visual-canvas[data-yuto-no-hover-sheen="true"] > .yuto-knife-hover-sheen,
body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-canvas[data-yuto-no-hover-sheen="true"] > .yuto-knife-hover-sheen {
  display: none;
}

body.yuto-persona-lab-page.yuto-web-lab-page .yuto-lightbox {
  z-index: 10000;
}

body.yuto-persona-lab-page.yuto-web-lab-page .yuto-knife-slash {
  z-index: 10070;
}

/* 【中鍵拳頭統一 v115】persona 頁小刀 cursor 同 news:改用全站統一高值,確保永遠在預覽之上。 */
body.yuto-persona-lab-page.yuto-web-lab-page .yuto-knife-fake-cursor {
  z-index: var(--yuto-knife-cursor-layer, 100000);
}

@media (max-width: 900px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .yuto-lightbox-arrow {
    width: 46px;
    height: 112px;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .yuto-lightbox-arrow.prev {
    left: 6px;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .yuto-lightbox-arrow.next {
    right: 6px;
  }
}
/* [YUTO-CSS-VERIFY v659] Persona Lightbox controls hover sheen off
   Owner: P-Persona / Persona Lab Lightbox controls hover only.
   Target:
   - Persona Lightbox close button and prev/next knife buttons only.
   Fix:
   - Disable knife hover sheen on:
     1) close X / shuriken button
     2) prev Wakizashi button
     3) next Katana button
   Guard:
   - No Lightbox size / position / image display changes.
   - Desktop v655 and mobile v656 layout untouched.
   - Persona switch rows / News Lab / Home / Links / Privacy untouched.
*/

@media (max-width: 700px) {
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch {
  align-items: center;

    --yuto-bamboo-scale: 1.08;
    --yuto-bamboo-gap-now: calc(var(--yuto-bamboo-gap-base) * var(--yuto-bamboo-scale));
    --yuto-bamboo-inline-now: calc(var(--yuto-bamboo-inline-base) * var(--yuto-bamboo-scale));
    --yuto-bamboo-block-now: calc(var(--yuto-bamboo-block-base) * var(--yuto-bamboo-scale));
    gap: var(--yuto-bamboo-gap-now);
    flex-wrap: nowrap;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-tab,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-tab {
    font-size: 1.06rem;
    padding: 3px 0;
    line-height: 1.1;
    white-space: nowrap;
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-visual-switch > .yuto-bamboo-separator,
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-visual-switch > .yuto-bamboo-separator {
    width: var(--yuto-bamboo-inline-now);
    height: var(--yuto-bamboo-block-now);
    align-self: center;
  }
}

@media (min-width: 901px) {
  body.yuto-persona-lab-page.yuto-web-lab-page {
    --persona-role-panel-reveal-height: clamp(430px, 50vh, 535px);
  }

  /* WARN 靠【位置在後】壓過同選擇器的前一份（max-width）。
       合併或前移 → 生效樣式翻轉。同區搬移保序即安全，不需編號 */
  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel {
  overflow-y: auto;
  touch-action: pan-y;
  scroll-padding-block: calc(var(--persona-panel-fade-size) + 10px);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-y: auto;
  scroll-behavior: auto;
  will-change: scroll-position;
  width: min(100%, var(--persona-panel-max-width));
  max-width: var(--persona-panel-max-width);
  padding-block: clamp(22px, 3vh, 34px);
  padding-inline: clamp(20px, 2.4vw, 36px);
  -webkit-mask-image: linear-gradient(
  to bottom,
  transparent 0,
  #000 clamp(28px, 3.6vh, 46px),
  #000 calc(100% - clamp(28px, 3.6vh, 46px)),
  transparent 100%
  );
  mask-image: linear-gradient(
  to bottom,
  transparent 0,
  #000 clamp(28px, 3.6vh, 46px),
  #000 calc(100% - clamp(28px, 3.6vh, 46px)),
  transparent 100%
  );
  z-index: 3;

    height: var(--persona-role-panel-reveal-height);
    max-height: var(--persona-role-panel-reveal-height);
    min-height: var(--persona-role-panel-reveal-height);
    transform: translateY(clamp(42px, 5vh, 70px));
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body.yuto-persona-lab-page.yuto-web-lab-page {
  --persona-panel-copy-size: clamp(1.12rem, 1.65vw, 1.34rem);
  --persona-panel-title-size: clamp(1.42rem, 2.05vw, 1.76rem);
  --persona-panel-subtitle-size: clamp(1.2rem, 1.75vw, 1.42rem);

    --persona-role-panel-reveal-height: clamp(400px, 50vh, 500px);
  }

  body.yuto-persona-lab-page.yuto-web-lab-page .persona-role-static-copy-panel {
    height: var(--persona-role-panel-reveal-height);
    max-height: var(--persona-role-panel-reveal-height);
    min-height: var(--persona-role-panel-reveal-height);
    transform: translateY(clamp(36px, 4.8vh, 62px));
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-X 區　⚠️ 例外：三區放不下（TODO 待重製）                 ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* WHY  本規則壓過 booking／links／news／persona 的 main 背景（它們排在前面），
        又被 privacy 的 main 背景壓過（它排在後面）→ 既不屬於 3-A 也不屬於 3-C。
        這 6 條規則的特異度全是 (0,2,2)，勝負純靠位置。
   WHY  無法展開成單頁：booking-result／index／payment-result 找不到唯一的
        2-class body 組合，選擇器一展開就會改動特異度 → 生效樣式翻轉。
   WARN 本區的【位置是承重的】：必須排在 3-B booking／links／news／persona 之後、
        排在 3-B privacy 之前。往上或往下搬 → main 背景色翻轉。
   WHY  【已評估決定保留 build138】：消滅本例外區需動 WALL-40 承重牆或動 3 個 HTML，
        但收益是 0 條實質精簡（只消掉本註解區塊）。這 9 條 (0,2,2) main 背景規則是
        互相咬合的位置鏈，強行消滅風險高。此例外有完整標註、被充分理解 → 是正確的解，
        不是技術債。（原 TODO：替 booking-result／index／payment-result 各加唯一 body
        class 展開單頁 → 經評估性價比極差，放棄。詳見 DECISIONS.md §R8 標的2） */

@media (max-width: 700px) {
  /* The active page body remains the blue Lab stage; only the outer bounce edge is black. */
  body.yuto-web-lab-page.yuto-page-bg main {
    background-color: var(--yuto-lab-bg-314bad-deep-vivid, #0B1A4C);
  }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-B 區　privacy 專屬                                         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
body.yuto-policy-page .yuto-footer-grid {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 【區域:隱私 policy】覆蓋半部原有規則 ↓ */
/* WHAT ▸ Yuto Policy Page Module v1 */
body.yuto-policy-page .yuto-policy-main {
  position: relative;
  overflow: hidden;
}

/* WARN [WALL-09] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-policy-page .yuto-policy-shell {
  padding-top: var(--yuto-public-content-start-gap-desktop);
  padding-bottom: var(--yuto-public-content-end-gap-desktop);
}

body.yuto-policy-page .yuto-policy-panel h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.08;
}

body.yuto-policy-page .yuto-policy-lead {
  margin: 0;
  max-width: 760px;
  color: var(--text-soft, #c8cbda);
}

body.yuto-policy-page .yuto-policy-updated {
  margin: 18px 0 0;
  color: rgba(246, 247, 251, 0.72);
  font-size: .94rem;
}

body.yuto-policy-page .yuto-policy-list {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

body.yuto-policy-page .yuto-policy-item {
  padding: clamp(18px, 3vw, 24px);
  border-radius: 0;
}

body.yuto-policy-page .yuto-policy-item h2 {
  margin: 0 0 10px;
  font-size: clamp(1.16rem, 2.4vw, 1.45rem);
  line-height: 1.35;
}

body.yuto-policy-page .yuto-policy-item p {
  margin: 0;
  color: var(--text-soft, #c8cbda);
}

body.yuto-policy-page .yuto-policy-item p + p {
  margin-top: 10px;
}

body.yuto-policy-page .yuto-policy-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

body.yuto-policy-page .yuto-policy-actions .yuto-bamboo-link {
  min-height: 46px;
}

@media (min-width: 701px) and (max-width: 1100px) {
  body.yuto-policy-page .yuto-policy-shell {
    padding-top: var(--yuto-public-content-start-gap-tablet);
    padding-bottom: var(--yuto-public-content-end-gap-tablet);
  }
}

@media (max-width: 700px) {
  body.yuto-policy-page .yuto-policy-shell {
    padding-top: var(--yuto-public-content-start-gap-mobile);
    padding-bottom: var(--yuto-public-content-end-gap-mobile);
  }

  body.yuto-policy-page .yuto-policy-list {
    gap: 14px;
    margin-top: 22px;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  body.yuto-policy-page .yuto-policy-shell {
    padding-top: var(--yuto-public-content-start-gap-landscape);
    padding-bottom: var(--yuto-public-content-end-gap-landscape);
  }
}
body.yuto-policy-page.yuto-web-lab-page .yuto-policy-item h2 {
  font-weight: var(--yuto-type-card-title-weight);
}

body.yuto-policy-page.yuto-web-lab-page .yuto-policy-lead,
body.yuto-policy-page.yuto-web-lab-page .yuto-policy-item p {
  font-weight: var(--yuto-type-body-weight);
}

/* [YUTO-CSS-VERIFY v630] Links mobile button 30 trim test
   Owner: P-Links / F-Mobile / Links small-card entry button visual only.
   Target:
   - Test user's new blue_button_30 material on mobile Links buttons.
   - Source upload has large transparent side margins, so this delivery uses the alpha-trimmed mobile asset:
     images/blue_button_30_mobile_trim.png
   Contract:
   - Desktop untouched.
   - HTML untouched.
   - JS untouched.
   - Links two-column mobile layout untouched.
   - Text size untouched unless existing variable already applies.
   - Background/motif untouched.
*/

/* [YUTO-CSS-VERIFY v631] Links button text weight trim
   Owner: P-Links / Button typography only.
   Target:
   - Only make Links page entry button text one weight lighter.
   - Keep button image, layout, card positions, background, HTML, JS untouched.
   Contract:
   - Global font system untouched.
   - Other pages untouched.
   - Links card body/title/description untouched.
   - Desktop/mobile scope is Links entry button only.
*/

/* [YUTO-CSS-VERIFY v635] Privacy page texture and frameless content
   Owner: P-Policy / privacy.html only.
   Root cause:
   - privacy.html had .yuto-home-bg-scene, but did not opt into yuto-has-bg-texture
     and did not include .yuto-bg-texture-layer.
   - This made the motif layer feel visually over-exposed / too many because the
     approved paper-grid filter layer was missing.
   - Fix by connecting the same texture/filter structure used by the Lab pages,
     but keep the current purple policy background. Do not switch to the #314BAD
     blue base in this version.
   Contract:
   - Privacy page only.
   - Keep policy content.
   - Remove only the outer policy panel frame visual.
   - Do not touch Links buttons, confirmed mobile background, footer copyright JS,
     payment pages, booking pages, home/news/persona pages, or global typography.
*/
body.yuto-policy-page.yuto-web-lab-page {
  --yuto-policy-bg-top: var(--yuto-lab-bg-top, #070f20);
  --yuto-policy-bg-mid: var(--yuto-lab-bg-mid, #09091a);
  --yuto-policy-bg-bottom: var(--yuto-lab-bg-bottom, #050712);
  --yuto-policy-bg-violet: var(--yuto-lab-bg-violet, rgba(132, 71, 255, 0.22));
  --yuto-policy-bg-mint: var(--yuto-lab-bg-mint, rgba(77, 226, 197, 0.052));
  --yuto-policy-bg-stage-height: 1800px;
}

body.yuto-policy-page.yuto-web-lab-page main {
  background-color: var(--yuto-policy-bg-bottom);
  background-image:
    radial-gradient(circle at 88% 9%, var(--yuto-policy-bg-violet), transparent 35%),
    radial-gradient(circle at 4% 19%, var(--yuto-policy-bg-mint), transparent 30%),
    linear-gradient(180deg, var(--yuto-policy-bg-top) 0%, var(--yuto-policy-bg-mid) 48%, var(--yuto-policy-bg-bottom) 100%);
}

body.yuto-policy-page.yuto-web-lab-page main::before {
  background-image:
    radial-gradient(circle at 48% 0%, rgba(255, 255, 255, 0.04), transparent 42%),
    radial-gradient(circle at 86% 74%, rgba(118, 92, 255, 0.12), transparent 35%),
    linear-gradient(90deg, rgba(7, 12, 32, 0.84), rgba(6, 6, 18, 0.18) 52%, rgba(28, 18, 56, 0.56));
  opacity: 0.88;
}

body.yuto-policy-page.yuto-web-lab-page main::after {
  background-image:
    radial-gradient(circle at 50% 18%, rgba(132, 71, 255, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(15, 18, 58, 0.34), rgba(93, 42, 158, 0.17) 42%, rgba(13, 42, 120, 0.28)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.27));
  opacity: 1;
  mix-blend-mode: normal;
}

body.yuto-policy-page.yuto-web-lab-page.yuto-has-bg-texture .yuto-home-bg-scene {
  inset: 0 auto auto 0;
  width: 100%;
  height: min(var(--yuto-policy-bg-stage-height), 100%);
  min-height: 980px;
}

body.yuto-policy-page.yuto-web-lab-page.yuto-has-bg-texture main > .yuto-bg-texture-layer {
  inset: 0 auto auto 0;
  width: 100%;
  height: max(100%, var(--yuto-policy-bg-stage-height));
  min-height: 100%;
}

body.yuto-policy-page .yuto-policy-panel {
  width: min(920px, 100%);
  margin: 0 auto;

  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 700px) {
  body.yuto-policy-page.yuto-web-lab-page {
    --yuto-policy-bg-stage-height: max(100%, 100dvh);
  }

  /* WARN [WALL-40] 承重牆：靠【位置在後】壓過 body.yuto-payment-lab-page.yuto-web-lab-page main 的 background-color。
       上移、合併或跨區搬動 → 生效樣式翻轉 */
  body.yuto-policy-page.yuto-web-lab-page main {
    background-color: var(--yuto-policy-bg-bottom);
    background-image:
      radial-gradient(circle at 90% 6%, rgba(132, 71, 255, 0.16), transparent 34%),
      radial-gradient(circle at 2% 22%, rgba(77, 226, 197, 0.05), transparent 30%),
      linear-gradient(180deg, #070f1d 0%, #080817 52%, #050712 100%);
  }

  body.yuto-policy-page.yuto-web-lab-page.yuto-has-bg-texture main > .yuto-bg-texture-layer {
    height: max(7600px, 520vh);
    min-height: 100%;
  }
}
/* [YUTO-CSS-VERIFY v636] Privacy filter layer and source button fix
   Owner: P-Policy / privacy.html only.
   Root cause:
   - v635 connected the texture/filter structure, which is the purple pill source, not the current blue slice-button source.
   Fix:
   - Move only privacy content shell above texture/overlay layer.
   - Switch only privacy home button sizing to the existing blue slice-button component.
   Contract:
   - Other pages untouched.
   - JS untouched.
   - Links button untouched.
   - Confirmed mobile background untouched.
*/
/* WARN [WALL-32] 承重牆：本選擇器在檔案中【刻意出現多次】，靠「位置在後」壓過其他規則。
     合併或搬動 → 生效樣式【翻轉】（C-3 實測確認）→ DECISIONS.md §承重牆總表 */
body.yuto-policy-page .yuto-policy-shell{
  position: relative;
  z-index: 3;
}

body.yuto-policy-page .yuto-policy-item:first-child {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

body.yuto-policy-page .yuto-policy-item:last-child {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  第 3-C 區　共用覆蓋（壓過頁面層；不可上移）                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@media (max-width: 760px) {
  body.yuto-payment-lab-page .payment-desc,
  body.yuto-payment-lab-page .payment-cancel-desc {
    font-size: .93rem;
    line-height: 1.66;
  }
}

@media (max-width: 700px) {
  /* Keep confirmed v034/v035 seam solution locked. */
  body.yuto-index-page.yuto-web-lab-page {
    --yuto-home-lab-bg-stage-height: 7200px;
  }

  /* Root edge color: this is what mobile browsers reveal during top/bottom rubber-band bounce. */
  html,
  body.yuto-web-lab-page.yuto-page-bg {
    background-color: #070911;
  }

  /* Do not lock the native bounce. Earlier diagnostic guards may have disabled overscroll on index; release it. */
  /* WARN [WALL-39] 承重牆：靠【位置在後】壓過 html.yuto-index-mobile-scroll-clean ／ html.yuto-index-mobile-scroll-clean body.yuto-index-page.yuto-web-lab-page 的 overscroll-behavior-y。
       上移、合併或跨區搬動 → 生效樣式翻轉 */
  html.yuto-index-mobile-scroll-clean,
  html.yuto-index-mobile-scroll-clean body.yuto-index-page.yuto-web-lab-page,
  body.yuto-web-lab-page.yuto-page-bg {
    overscroll-behavior-y: auto;
  }

  /* All mobile texture pages: keep the wallpaper/motif/texture stage long enough to reach the footer/end. */
  body.yuto-web-lab-page.yuto-has-bg-texture {
    --yuto-mobile-lab-bg-stage-height: max(7600px, 520vh);
    --yuto-news-lab-bg-stage-height: max(7600px, 520vh);
    --yuto-booking-lab-bg-stage-height: max(7600px, 520vh);
    --yuto-links-lab-bg-stage-height: max(7600px, 520vh);
    --yuto-payment-lab-bg-stage-height: max(7600px, 520vh);
  }

  body.yuto-web-lab-page.yuto-has-bg-texture .yuto-home-bg-scene,
  body.yuto-web-lab-page.yuto-has-bg-texture main > .yuto-bg-texture-layer {
    height: 100%;
    min-height: 100%;
  }

  /* Payment/result pages previously used a shorter 4200px stage; sync them to the mobile seam guard. */
  body.yuto-payment-lab-page.yuto-has-bg-texture .yuto-home-bg-scene,
  body.yuto-payment-lab-page.yuto-has-bg-texture main > .yuto-bg-texture-layer {
    height: max(100%, var(--yuto-payment-lab-bg-stage-height, var(--yuto-mobile-lab-bg-stage-height, 7600px)));
    min-height: 100%;
  }
}
/* WHAT ▸ V760 Admin Lab Clean UI Source v2 Scope: - admin-news.html - admin-tools.html only Contract: - Admin Lab uses the same visual language as public Lab pages: dark edge, shared #0B1A4C Lab background source, approved paper-grid texture, transparent glass cards, rounded controls and soft borders. - Do not load index-web-lab.js; no knife cursor, no middle-scroll fist. - Do not change Worker / Apps Script / login / CRUD / upload / registry / preflight / run logic. - IDs, name attributes, form fields and data hooks remain owned by admin-lab.js / existing backend flow. - This module replaces admin-news-lab local inline CSS with a clean external source. - V760 deliberately does not render crest/cloud motifs yet; those are JS-generated by index-web-lab.js on public pages and must not be guessed or hardcoded here. */

body.yuto-admin-lab-clean-ui {
  --admin-bg-edge: #070911;
  --admin-bg-source: var(--yuto-lab-bg-314bad-deep-vivid, #0B1A4C);
  --admin-card-bg: rgba(255, 255, 255, 0.052);
  --admin-card-border: rgba(255, 255, 255, 0.12);
  --admin-card-border-soft: rgba(255, 255, 255, 0.09);
  --admin-card-hover-border: rgba(159, 124, 255, 0.18);
  --admin-card-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.16);
  --admin-text: var(--text, #f6f7fb);
  --admin-soft: var(--text-soft, #c8cbda);
  --admin-primary: var(--primary, #9f7cff);
  --admin-radius-xl: 28px;
  --admin-container: 1180px;
  color: var(--admin-text);
  background-color: var(--admin-bg-edge);
  background-image: none;
}

/* WHAT 頁尾靜音開關｜同時管按鈕音效與 Android 震動
   TODO 這塊目前接在檔尾，下次 CSS 整理時要依 DECISIONS.md 歸進正確分區 */
.yuto-sfx-toggle {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: inherit;
  opacity: 0.78;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.yuto-sfx-toggle:hover,
.yuto-sfx-toggle:focus-visible {
  opacity: 1;
}

/* WHY 關閉狀態要一眼看得出來，否則使用者會以為是壞了不是自己關的 */
.yuto-sfx-toggle.is-muted {
  opacity: 0.5;
  text-decoration: line-through;
}