/* ============================================================
   智解家 司律一試選擇題 H5 — Design System SSOT
   ------------------------------------------------------------
   - 所有頁面（prototype.html / slides/*.html / index.html）
     只能使用本檔案的 tokens 與 component classes。
   - 調性：智解家官方 indigo / periwinkle 品牌色 + Duolingo 式
     現代輕快；不幼稚、不厚重。Mobile-first（390px 視口）。
   - 不依賴任何網路資源（系統字體 fallback）。
   - 品牌色 SSOT：lawsome-frontend/tailwind.config.js
     （禁止綠色 / teal 作為品牌色；綠紅僅限答題回饋語意色）
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     1. 品牌色 — 智解家官方 indigo / periwinkle
     （主 CTA、選中態、品牌元素）
     取色基準：lawsome-frontend/tailwind.config.js
     highlight #5E6AC6 / logo indigo #435098 / bg-highlight #E1E3F5
     ---------------------------------------------------------- */
  --brand-50:  #E1E3F5;   /* bg-highlight 極淺底（選中選項背景、icon 底） */
  --brand-100: #E2E1FF;   /* divider 淡紫（chip 選中底、hover 底、分隔） */
  --brand-300: #9AA3E0;   /* 中淺 periwinkle（裝飾、進度條/漸層淺端；衍生色 */
  --brand-500: #5E6AC6;   /* highlight 主互動色（primary CTA、選中邊框、連結） */
  --brand-600: #4D58B5;   /* 主互動 hover / active（highlight→indigo 間衍生色） */
  --brand-700: #435098;   /* logo indigo（文字級品牌色、深底上的對比） */

  /* ----------------------------------------------------------
     2. Score Hero 深色系 — primary ink #15133B 家族深 navy/purple
     ---------------------------------------------------------- */
  --hero-900: #0F0D2B;    /* hero 最深底（漸層深端，ink 加深） */
  --hero-800: #15133B;    /* hero 主底色（= primary ink） */
  --hero-700: #2B2766;    /* hero 漸層淺端 / 卡片內層 */
  --hero-line: rgba(255,255,255,.14);  /* hero 區內分隔線 */
  --hero-text-dim: rgba(255,255,255,.72); /* hero 區次要文字 */
  --grad-hero: linear-gradient(160deg, var(--hero-700) 0%, var(--hero-800) 45%, var(--hero-900) 100%);

  /* 首頁 hero 品牌漸層：indigo → periwinkle → 淡紫（吸睛但專業） */
  --grad-hero-home: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 55%, var(--brand-300) 100%);

  /* ----------------------------------------------------------
     3. 輔助 accent — avatar 變體與 deck 列示卡（.card-subject）用
     非品牌色；首頁法科卡（2026-06-12 v3 起四法科 compact 卡、
     無左側 icon、無左緣 accent）不使用這組色
     ---------------------------------------------------------- */
  --subj-1: #4E7CF0;      /* accent 藍（avatar-blue、deck 列示卡 1） */
  --subj-2: #D65A86;      /* accent 玫紅（deck 列示卡 2；禁綠/teal） */
  --subj-3: #F09A2C;      /* accent 琥珀（avatar-amber、deck 列示卡 3） */
  --subj-4: #8B5CF6;      /* accent 紫（avatar-purple、deck 列示卡 4） */
  --subj-1-bg: #EDF2FE;   /* 各科極淺底（icon 圓底、卡片 tint） */
  --subj-2-bg: #FBEAF1;
  --subj-3-bg: #FEF3E2;
  --subj-4-bg: #F3EEFE;

  /* ----------------------------------------------------------
     4. 語意色 — 僅限答題正誤回饋、警示；不得作品牌色使用
     （紅 = 官方 tag-red #FFE6E5 / #AB342A）
     ---------------------------------------------------------- */
  --success-500: #22B868; /* 答對主色（正解亮起、勾號）— 僅答題回饋 */
  --success-bg:  #E9F9F0; /* 答對選項底 */
  --error-500:   #AB342A; /* 答錯主色（錯誤選項、抖動回饋）= 官方 tag-red 前景 */
  --error-bg:    #FFE6E5; /* 答錯選項底 = 官方 tag-red 底 */
  --warning-500: #F5A623; /* 警示 / 未解鎖提示 */
  --warning-bg:  #FEF6E7;

  /* ----------------------------------------------------------
     4b. 優惠進度條狀態色（2026-06-12 v3.1 Marcus feedback）
     滿分 = 亮黃慶祝（celebration gold）；< 80 分 = 同色系偏紅（rose）
     僅限結果頁優惠進度軌道使用，不得作品牌色
     ---------------------------------------------------------- */
  --gold-300: #FFD95C;    /* 滿分慶祝：進度填充亮端 / 節點光暈 */
  --gold-500: #F6B821;    /* 滿分慶祝：節點主色 / 徽章框 */
  --gold-700: #9A6E07;    /* 滿分慶祝：徽章/門檻文字 */
  --gold-bg:  #FFF6DC;    /* 滿分慶祝：徽章底 */
  --rose-300: #E89A93;    /* 低於 80：進度填充（同palette 暖紅階） */
  --rose-500: #C9554A;    /* 低於 80：節點 ring / 強調字 */
  --rose-700: #AB342A;    /* 低於 80：徽章文字 = 官方 tag-red 前景 */
  --rose-bg:  #FFE6E5;    /* 低於 80：徽章底 = 官方 tag-red 底 */

  /* ----------------------------------------------------------
     5. 中性 ink / 底色 — 官方文字與 surface 色
     ---------------------------------------------------------- */
  --ink-900: #15133B;     /* primary ink（主標題 / 題目文字） */
  --ink-700: #41414D;     /* secondary（內文） */
  --ink-500: #76788D;     /* tertiary text（次要文字 / 說明） */
  --ink-400: #A8AABF;     /* placeholder / 弱化文字 */
  --gray-200: #C8C5DF;    /* input outline / 元件邊框 */
  --gray-100: #F0F1F5;    /* bg-secondary（分隔線 / 弱底） */
  --gray-50:  #FCFAF7;    /* bg-tertiary（頁面底色，暖白） */
  --white:    #FFFFFF;
  --paper:    #FFFBEF;    /* 錯題筆記（原考場速記）memo 紙感底色 */
  --paper-line: #F0E3C0;  /* memo 邊框 / 虛線 */

  /* ----------------------------------------------------------
     6. 字體與字級 scale（mobile-first，base 15px）
     ---------------------------------------------------------- */
  --font-sans: "Noto Sans TC", "PingFang TC", sans-serif;
  --text-xs:   12px;      /* badge、輔助標註 */
  --text-sm:   13px;      /* chip、次要說明 */
  --text-base: 15px;      /* 內文、選項文字 */
  --text-md:   16px;      /* 題目文字、強調內文 */
  --text-lg:   18px;      /* 卡片標題 */
  --text-xl:   22px;      /* 區塊標題 */
  --text-2xl:  26px;      /* 頁面主標 */
  --text-3xl:  32px;      /* 首頁 hero 主標 */
  --text-score: 64px;     /* score hero 超大分數 */

  /* 行高 */
  --leading-tight: 1.25;  /* 大標、分數 */
  --leading-snug:  1.4;   /* 卡片標題 */
  --leading-normal: 1.6;  /* 內文 */
  --leading-relaxed: 1.75;/* 解析長文 */

  /* 字重 */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;    /* 超大分數 */

  /* ----------------------------------------------------------
     7. 間距 scale（4px 基準）
     ---------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;        /* 手機版面預設左右 padding */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ----------------------------------------------------------
     8. 圓角
     ---------------------------------------------------------- */
  --radius-sm: 8px;       /* badge、小元件 */
  --radius-md: 12px;      /* 選項、input */
  --radius-lg: 16px;      /* 卡片 */
  --radius-xl: 20px;      /* 大卡片、浮層 */
  --radius-2xl: 28px;     /* score hero 浮層、頁面級容器 */
  --radius-full: 999px;   /* 膠囊按鈕、chip、avatar */

  /* ----------------------------------------------------------
     9. 陰影層級
     ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(21, 19, 59, .06);                       /* 微浮起（chip、選項） */
  --shadow-md: 0 4px 12px rgba(21, 19, 59, .08);                      /* 卡片 */
  --shadow-lg: 0 10px 28px rgba(21, 19, 59, .14);                     /* 浮層、優惠卡 */
  --shadow-cta: 0 6px 16px rgba(94, 106, 198, .35);                   /* 品牌 CTA 發光（periwinkle） */
  --shadow-hero: 0 16px 40px rgba(21, 19, 59, .38);                   /* score hero 區 */
  --shadow-bar: 0 -4px 12px rgba(21, 19, 59, .06);                    /* 2026-06-12 新增：底部固定操作列上緣陰影 */
  --shadow-sheet: 0 -12px 36px rgba(21, 19, 59, .22);                 /* 2026-06-12 新增：bottom sheet 浮層陰影 */

  /* 2026-06-12 新增：遮罩底色（bottom sheet / modal 背後，ink 半透明） */
  --overlay-backdrop: rgba(21, 19, 59, .48);

  /* ----------------------------------------------------------
     10. Motion tokens — 短促克制的 spring
     ---------------------------------------------------------- */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* 主 spring：選項回彈、卡片彈出 */
  --ease-spring-soft: cubic-bezier(.3, 1.25, .5, 1);/* 柔和 spring：hover、chip 切換 */
  --ease-out: cubic-bezier(.22, 1, .36, 1);         /* 一般退出/滑入 */
  --dur-fast: 120ms;      /* 點擊下壓、即時回饋 */
  --dur-base: 220ms;      /* 選項態切換、hover */
  --dur-slow: 360ms;      /* 解析卡滑出、浮層進場 */
  --dur-count: 900ms;     /* 分數遞增動畫總長 */
  --dur-fill: 700ms;      /* 優惠進度條填充 */
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-900);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }

/* ============================================================
   .btn — 按鈕（primary / secondary / ghost / pill）
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px var(--space-6);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }

/* 主 CTA：品牌 periwinkle、發光陰影（立即開始 10 題） */
.btn-primary {
  background: var(--brand-500);
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { background: var(--brand-600); transform: translateY(-1px); }

/* 次要：白底 periwinkle 邊（自選設定、再挑戰） */
.btn-secondary {
  background: var(--white);
  color: var(--brand-700);
  box-shadow: inset 0 0 0 1.5px var(--brand-500);
}
.btn-secondary:hover { background: var(--brand-50); }

/* 幽靈：無底無框（次要導流、取消） */
.btn-ghost {
  background: transparent;
  color: var(--ink-500);
}
.btn-ghost:hover { color: var(--ink-700); background: var(--gray-100); }

/* 膠囊修飾：score hero 右上「再測一次」等 */
.btn-pill { border-radius: var(--radius-full); }

/* 尺寸修飾 */
.btn-lg { padding: 16px var(--space-8); font-size: var(--text-lg); border-radius: var(--radius-lg); }
.btn-sm { padding: 9px var(--space-4); font-size: var(--text-sm); }

/* 深底上的膠囊（score hero 內用） */
.btn-on-dark {
  background: rgba(255,255,255,.14);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.btn-on-dark:hover { background: rgba(255,255,255,.22); }

/* 滿版按鈕 */
.btn-block { display: flex; width: 100%; }

/* ============================================================
   .card — 卡片
   ============================================================ */

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}

/* Deck 列示卡：左緣 accent + hover 微浮起（deck 內分類列示用；
   非首頁法科卡——首頁法科卡無左緣 accent、無 icon，見 prototype .domain-card）
   搭配 .card-subject-1 ~ -4 指定 accent 色 */
.card-subject {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring-soft),
              box-shadow var(--dur-base) var(--ease-out);
}
.card-subject::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--subj-accent, var(--brand-500));
}
.card-subject:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-subject-1 { --subj-accent: var(--subj-1); --subj-tint: var(--subj-1-bg); }
.card-subject-2 { --subj-accent: var(--subj-2); --subj-tint: var(--subj-2-bg); }
.card-subject-3 { --subj-accent: var(--subj-3); --subj-tint: var(--subj-3-bg); }
.card-subject-4 { --subj-accent: var(--subj-4); --subj-tint: var(--subj-4-bg); }

/* 列示卡內的 icon 圓底 */
.card-subject .subj-icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--subj-tint, var(--brand-50));
  color: var(--subj-accent, var(--brand-500));
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

/* ============================================================
   .chip — 篩選/設定用小膠囊（年份、題數選擇）
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 7px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--gray-200);
  color: var(--ink-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-spring-soft);
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--brand-300); }
.chip.is-selected {
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1.5px var(--brand-500);
  color: var(--brand-700);
  font-weight: var(--weight-bold);
}

/* ============================================================
   .badge — 標籤
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  background: var(--gray-100);
  color: var(--ink-500);
}
.badge-success { background: var(--success-bg); color: var(--success-500); }
.badge-warning { background: var(--warning-bg); color: var(--warning-500); }
.badge-error   { background: var(--error-bg);   color: var(--error-500); }
.badge-brand   { background: var(--brand-50);   color: var(--brand-700); }

/* 「本題含老師評析」：品牌 indigo 底 + 金星 — 名師背書專用，
   沒有老師評析的題目禁止使用 */
.badge-teacher {
  background: var(--brand-700);
  color: var(--white);
  padding: 5px 12px;
}
.badge-teacher::before { content: "★"; color: #FFD466; font-size: 10px; }

/* ============================================================
   .avatar — 縮寫圓形頭像 + .avatar-row 並排列
   （老師頭像一律 inline 縮寫，不抓外部圖；逐一並排不重疊）
   ============================================================ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  flex: none;
  user-select: none;
}
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-lg { width: 44px; height: 44px; font-size: var(--text-base); }
/* 色彩變體：並排時交錯使用，避免單調 */
.avatar-blue   { background: var(--subj-1-bg); color: var(--subj-1); }
.avatar-amber  { background: var(--subj-3-bg); color: var(--subj-3); }
.avatar-purple { background: var(--subj-4-bg); color: var(--subj-4); }

/* 並排列：gap 排列、逐一並排不重疊；用於考科卡片 2-3 位老師
   （.avatar-stack 為舊名 alias，行為同 .avatar-row，禁止再做負 margin 重疊） */
.avatar-row,
.avatar-stack { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ============================================================
   .option — 答題選項（default / selected / correct / wrong）
   點擊下壓回彈、正解 pop、錯誤輕抖 — 全部走 spring tokens
   ============================================================ */

.option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: 14px var(--space-4);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--gray-200), var(--shadow-sm);
  color: var(--ink-900);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-align: left;
  cursor: pointer;
  border: 0;
  font-family: var(--font-sans);
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.option:hover { box-shadow: inset 0 0 0 1.5px var(--ink-400), var(--shadow-sm); }
.option:active { transform: scale(.98); } /* 下壓 */

/* 選項代號圓圈 (A)(B)(C)(D) */
.option .option-key {
  flex: none;
  width: 26px; height: 26px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100);
  color: var(--ink-500);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  transition: all var(--dur-base) var(--ease-out);
}

/* 已選中（送出前）：品牌 periwinkle */
.option.is-selected {
  background: var(--brand-50);
  box-shadow: inset 0 0 0 2px var(--brand-500), var(--shadow-sm);
}
.option.is-selected .option-key { background: var(--brand-500); color: var(--white); }

/* 正解：綠底亮起 + spring pop */
.option.is-correct {
  background: var(--success-bg);
  box-shadow: inset 0 0 0 2px var(--success-500), var(--shadow-sm);
  animation: option-pop var(--dur-slow) var(--ease-spring);
}
.option.is-correct .option-key { background: var(--success-500); color: var(--white); }

/* 答錯：紅底 + 短促輕抖 */
.option.is-wrong {
  background: var(--error-bg);
  box-shadow: inset 0 0 0 2px var(--error-500), var(--shadow-sm);
  animation: option-shake var(--dur-slow) var(--ease-out);
}
.option.is-wrong .option-key { background: var(--error-500); color: var(--white); }

/* 已作答後的其餘選項：弱化、不可再點 */
.option.is-disabled { opacity: .55; pointer-events: none; }

@keyframes option-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes option-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

/* ============================================================
   .progress — 進度條（答題進度、優惠門檻填充）
   ============================================================ */

.progress {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  overflow: hidden;
}
.progress .progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand-300), var(--brand-500));
  transition: width var(--dur-fill) var(--ease-spring-soft);
}
/* 深底版本（score hero / reward 區內） */
.progress-on-dark { background: rgba(255,255,255,.18); }

/* ============================================================
   .input — 輸入框（LINE ID 留資）
   ============================================================ */

.input {
  width: 100%;
  padding: 13px var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--gray-200);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink-900);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.input::placeholder { color: var(--ink-400); }
.input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand-500);
}

/* ============================================================
   .section-label — 區塊小標（結果頁各段落標題）
   ============================================================ */

.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-500);
  letter-spacing: .06em;
  text-transform: none;
}
.section-label::before {
  content: "";
  width: 4px; height: 14px;
  border-radius: 2px;
  background: var(--brand-500);
}

/* ============================================================
   .score-hero — 結果頁深色分數區
   深 navy/purple 漸層 + 超大分數 + 排名 + 右上膠囊 + 少量彩片
   ============================================================ */

.score-hero {
  position: relative;
  background: var(--grad-hero);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  color: var(--white);
  padding: var(--space-6) var(--space-5) var(--space-10);
  box-shadow: var(--shadow-hero);
  overflow: hidden;
  text-align: center;
}
.score-hero .score-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.score-hero .score-hero-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
/* 超大分數：遞增動畫由 JS 改數字，CSS 負責進場 spring */
.score-hero .score-hero-score {
  font-size: var(--text-score);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  animation: score-enter var(--dur-count) var(--ease-spring);
}
.score-hero .score-hero-score .score-unit {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-left: var(--space-1);
}
.score-hero .score-hero-sub {
  color: var(--hero-text-dim);
  font-size: var(--text-base);
  margin-top: var(--space-1);
}
/* 答對/答錯/時間 等 stat 列 */
.score-hero .score-hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hero-line);
}
.score-hero .hero-stat { text-align: center; }
.score-hero .hero-stat .hero-stat-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.score-hero .hero-stat .hero-stat-label {
  font-size: var(--text-xs);
  color: var(--hero-text-dim);
  margin-top: 2px;
}

@keyframes score-enter {
  0%   { transform: scale(.6); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

/* 精緻彩片：少量、靜態微傾斜的小色塊（避免過量 confetti） */
.confetti-dot {
  position: absolute;
  width: 8px; height: 12px;
  border-radius: 2px;
  opacity: .85;
  pointer-events: none;
}
.confetti-periwinkle { background: var(--brand-300); transform: rotate(18deg); }
.confetti-amber  { background: #FFD466; transform: rotate(-24deg); }
.confetti-pink   { background: #FF8FA3; transform: rotate(40deg); }
.confetti-blue   { background: #7FA7FF; transform: rotate(-12deg); }

/* ============================================================
   .reward-ladder — 專屬優惠白色浮層容器（接在 score hero 下方）
   2026-06-12 v3：內容改為遊戲化里程碑進度軌道（80/90/滿分 →
   95折/9折/8折），節點樣式在 prototype 專屬 <style> 的
   .milestone-*；舊三階優惠大卡 .reward-step 已隨 v3 移除
   ============================================================ */

.reward-ladder {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}
.reward-ladder .reward-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
}

/* ============================================================
   .memo-card — 錯題筆記（原「考場速記」更名；2026-06-12 v3）
   精緻 memo 紙感、適合截圖保存；無錯題時整塊不顯示
   ============================================================ */

.memo-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--paper-line);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  position: relative;
}
/* 頂部裝飾「膠帶」 */
.memo-card::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 72px; height: 16px;
  background: rgba(94, 106, 198, .28);
  border-radius: 2px;
}
.memo-card .memo-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--ink-900);
  margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
}
.memo-card .memo-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.memo-card .memo-list li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-bottom: 1px dashed var(--paper-line);
  font-size: var(--text-sm);
  color: var(--ink-700);
  line-height: var(--leading-normal);
}
.memo-card .memo-list li:last-child { border-bottom: 0; }
.memo-card .memo-list li::before {
  content: "✎";
  position: absolute;
  left: 0;
  color: var(--brand-600);
}
/* 小抄關鍵字高亮 */
.memo-card .memo-hl {
  background: rgba(245, 166, 35, .22);
  border-radius: 3px;
  padding: 0 3px;
  font-weight: var(--weight-bold);
}

/* ============================================================
   解析卡 — 答題後從下方滑出微彈
   ============================================================ */

.explain-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
  animation: slide-up-spring var(--dur-slow) var(--ease-spring);
}
.explain-card .explain-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--brand-700);
  margin-bottom: var(--space-2);
}
.explain-card .explain-body {
  font-size: var(--text-sm);
  color: var(--ink-700);
  line-height: var(--leading-relaxed);
  white-space: pre-line;
}

@keyframes slide-up-spring {
  0%   { transform: translateY(16px); opacity: 0; }
  70%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); }
}

/* ============================================================
   .sheet — bottom sheet（2026-06-12 v3 新增：自選設定浮層）
   由下滑上 spring 進場 + 遮罩淡入；蓋住首頁法科選項與底部操作列。
   結構：.sheet-layer（定位層）> .sheet-backdrop + .sheet
        .sheet = .sheet-handle + .sheet-header + .sheet-body(可捲動)
                 + .sheet-footer（自己的「立即開始」）
   ============================================================ */

.sheet-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  visibility: hidden;
  transition: visibility 0s var(--dur-slow); /* 關閉時等滑出動畫跑完再隱藏 */
}
.sheet-layer.is-open { visibility: visible; transition: visibility 0s; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-backdrop);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.sheet-layer.is-open .sheet-backdrop { opacity: 1; }

.sheet {
  position: absolute;
  left: 0; right: 0;
  bottom: -16px;                       /* 多沉 16px：spring 過衝時不露出底縫 */
  display: flex;
  flex-direction: column;
  max-height: 88%;
  background: var(--white);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow-sheet);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  transition: transform var(--dur-slow) var(--ease-spring-soft); /* 短促 spring 滑上 */
}
.sheet-layer.is-open .sheet { transform: translateY(0); }

/* 頂部抓握把手 */
.sheet-handle {
  flex: none;
  width: 36px; height: 4px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  margin: var(--space-3) auto 0;
}
.sheet-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-5) var(--space-2);
}
.sheet-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--ink-900); }
/* 右上 ✕：按下回到原首頁狀態 */
.sheet-close {
  flex: none;
  width: 32px; height: 32px;
  border: 0;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100);
  color: var(--ink-500);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.sheet-close:hover { background: var(--gray-200); color: var(--ink-700); }
.sheet-close:active { transform: scale(.92); }

.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--space-5) var(--space-4);
}
.sheet-footer {
  flex: none;
  padding: var(--space-3) var(--space-5) var(--space-2);
  border-top: 1px solid var(--gray-100);
  background: var(--white);
}

/* ============================================================
   Deck / Slide 輔助 classes（spec deck 專用，非產品 UI）
   slides/*.html 與 index.html 共用
   ============================================================ */

.slide {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-12);
  margin: var(--space-8) auto;
  max-width: 1080px;
  box-shadow: var(--shadow-md);
}
.slide .slide-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.slide .slide-subtitle {
  font-size: var(--text-base);
  color: var(--ink-500);
  margin-bottom: var(--space-8);
}
/* 多欄示意排版 */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}
.spec-block { min-width: 0; }
.spec-block-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-700);
  margin-bottom: var(--space-3);
}
/* 色票 */
.swatch { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.swatch .swatch-color {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(21,19,59,.08);
  flex: none;
}
.swatch .swatch-meta { font-size: var(--text-xs); color: var(--ink-500); line-height: 1.5; }
.swatch .swatch-meta .token-name {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--ink-900);
  font-weight: var(--weight-medium);
}
/* token 對照列（字級 / 間距 / motion 表） */
.token-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--gray-100);
}
.token-row .token-name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--brand-700);
  min-width: 160px;
}
.token-row .token-note { font-size: var(--text-xs); color: var(--ink-500); }
/* 元件示範列 */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* 手機框：index.html 以 iframe 嵌入 prototype 各態 */
.phone-frame {
  width: 390px;
  height: 720px;
  border-radius: 36px;
  border: 10px solid var(--ink-900);
  background: var(--gray-50);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.phone-frame iframe { width: 100%; height: 100%; border: 0; }

/* Motion hover demo（deck 內示範用） */
.motion-demo-spring {
  transition: transform var(--dur-base) var(--ease-spring);
}
.motion-demo-spring:hover { transform: translateY(-4px) scale(1.04); }
.motion-demo-shake:hover { animation: option-shake var(--dur-slow) var(--ease-out); }
.motion-demo-pop:hover { animation: option-pop var(--dur-slow) var(--ease-spring); }