/* ═══════════════════════════════════════════════════════════════
   2026 Bento Grid（已替換成 Sticky Scroll Demo，CSS 暫保留作為孤兒
   理由：完全移除 risk 高、可能 break 其他 fallback；後續 cleanup PR 再處理）
   ═══════════════════════════════════════════════════════════════ */
.edit-bento {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
  container-type: inline-size;
  container-name: bento;
}

/* 2026-05-06 Batch 2：Bento → Magazine spread
   原 4-col 規則 grid → 12-col asymmetric magazine layout
   每張卡片各自占不同 col span / row span，視覺層次不對稱、編輯雜誌感 */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;       /* mobile 預設單欄 */
  grid-auto-rows: minmax(200px, auto);
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(28px, 3vw, 40px);
}
@media (min-width: 768px) {
  .bento-grid { grid-template-columns: repeat(12, 1fr); }
}

/* Cell base — Linear / Stripe 式深色卡片 */
/* 2026-05-06 PR-B：Bento section 加 subtle radial gradient backdrop（glass 效果的基礎）*/
.edit-bento {
  position: relative;
  isolation: isolate;
}
.edit-bento::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, color-mix(in oklch, var(--c-vermilion) 5%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 80%, color-mix(in oklch, var(--c-gold, #B8893A) 4%, transparent), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Bento cell — 2026-05-06 砍掉重練包 Sub-A：mouse spotlight + 3D tilt + scroll entrance
   - glass morphism 保留（半透明 + backdrop blur + 1px inset highlight）
   - 加 mouse-tracking radial gradient overlay (::after 用 --mx --my CSS vars)
   - 加 3D tilt：transform 用 --rx --ry CSS vars（JS 設）
   - 加 scroll-driven entrance：用 CSS individual properties translate/scale
     (跟 transform 不衝突，可同時 hover tilt + scroll entrance) */
.bento-cell {
  --mx: 50%; --my: 50%;
  --rx: 0deg; --ry: 0deg;
  position: relative;
  display: flex; flex-direction: column;
  background: color-mix(in oklch, var(--c-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--c-border);
  /* 2026-05-06 百萬 polish：強化 inset highlight 雙線 + subtle outer shadow，玻璃質感更明顯 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .06),
    0 2px 8px -4px rgba(0, 0, 0, .04);
  border-radius: clamp(14px, 1.6vw, 20px);
  /* 內部更呼吸 */
  padding: clamp(28px, 3vw, 40px);
  overflow: hidden;
  isolation: isolate;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .25s, background .25s;
  /* 卡片更有重量感 */
  min-height: 280px;
}
[data-theme="dark"] .bento-cell {
  background: color-mix(in oklch, var(--c-surface) 70%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -1px 0 rgba(0, 0, 0, .15),
    0 2px 12px -4px rgba(0, 0, 0, .25);
}
/* ::before — 原 corner gradient 保留（hover 顯示）*/
.bento-cell::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--c-vermilion) 8%, transparent), transparent 50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .35s ease;
  border-radius: inherit;
}
/* ::after — 新加的 mouse-tracking spotlight overlay */
.bento-cell::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    circle 280px at var(--mx) var(--my),
    color-mix(in oklch, var(--c-vermilion) 16%, transparent),
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: plus-lighter;   /* 讓 spotlight 跟 backdrop 加亮疊合 */
}
.bento-cell:hover::before,
.bento-cell:hover::after { opacity: 1; }
.bento-cell:hover {
  border-color: color-mix(in oklch, var(--c-vermilion) 40%, var(--c-border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -1px 0 rgba(0, 0, 0, .08),
    0 32px 72px -16px color-mix(in oklch, var(--c-vermilion) 30%, transparent),
    0 8px 24px -8px color-mix(in oklch, var(--c-vermilion) 20%, transparent);
}
/* 內容 z-index 提到 spotlight 之上（spotlight 是 z:0、content 預設 auto 在上）*/
.bento-cell > * { position: relative; z-index: 1; }

/* Scroll-driven 個別 cell entrance — 用 individual properties (translate/scale)
   不跟 .bento-cell 的 transform: perspective(...) rotateX/Y 衝突 */
@supports (animation-timeline: view()) {
  .bento-cell {
    animation: bentoCellEnter 1ms linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 75%;
  }
  @keyframes bentoCellEnter {
    from { opacity: 0; translate: 0 50px; scale: 0.95; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
  }
}

/* Reduced motion：所有動效 disable */
@media (prefers-reduced-motion: reduce) {
  .bento-cell { animation: none; transform: none; opacity: 1; translate: 0; scale: 1; }
  .bento-cell::before, .bento-cell::after { display: none; }
}

/* Hero modifier 保留（仍有 gradient bg 區分），但 layout 改用 nth-child 控
   2026-05-07：HERO 內 mockup 撐滿寬度，視覺份量配上 8-col 大空間 */
.bento-hero {
  background: linear-gradient(135deg, var(--c-surface) 0%, color-mix(in oklch, var(--c-vermilion) 4%, var(--c-surface)) 100%);
}
.bento-hero .bento-essay-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bento-hero .bec-card {
  width: 100%;
  max-width: 480px;     /* mockup 卡 max-width，桌面看起來更氣派但不撐爆 */
  margin: 0 auto;
}
/* 移除 .bento-wide 的 grid-column span（改 nth-child 控）— 但保留 class 給可能 nested style 用 */

/* Magazine 不對稱 placement（≥768px）— 2026-05-07 重新設計
   原版 cell 4 (TTS) 只有 2 col 文字字字斷行；改成所有 cell 至少 4 col 寬，
   HERO 8 col 仍是視覺 anchor，平衡「不對稱 magazine 感」+「文字 readability」 */
@media (min-width: 768px) {
  /* Cell 1: AI 申論評分 HERO — 左大 8 col × 2 row */
  .bento-cell:nth-child(1) { grid-column: 1 / span 8; grid-row: 1 / span 2; min-height: 380px; }
  /* Cell 2: SM-2 SRS — 右上 4 col */
  .bento-cell:nth-child(2) { grid-column: 9 / span 4; grid-row: 1; }
  /* Cell 3: 法條 popover — 右中 4 col（堆疊 SRS 下方）*/
  .bento-cell:nth-child(3) { grid-column: 9 / span 4; grid-row: 2; }
  /* Cell 4: TTS — 左下 4 col（修：原 2 col 太窄，文字字字斷行）*/
  .bento-cell:nth-child(4) { grid-column: 1 / span 4; grid-row: 3; }
  /* Cell 5: 學習儀表板 — 中下 4 col */
  .bento-cell:nth-child(5) { grid-column: 5 / span 4; grid-row: 3; }
  /* Cell 6: 跨裝置同步 — 右下 4 col */
  .bento-cell:nth-child(6) { grid-column: 9 / span 4; grid-row: 3; }
}

/* mobile：所有 cell 自動單欄 stack（grid-template-columns: 1fr 已預設）*/

/* 過渡寬度：≥480 < 768 用 2 欄 fallback */
/* RWD：≥1024 桌機 — 卡片更有 presence */
@media (min-width: 1024px) {
  .bento-cell { min-height: 300px; }
  /* HERO 用 2-row span 自然撐高（min-height 不要寫死太高，避免內容稀疏顯空） */
  .bento-cell:nth-child(1) { min-height: 420px; }
}

@media (min-width: 480px) and (max-width: 767.98px) {
  /* 平板過渡：2 欄 + cell 1 (HERO) 跟 cell 6 (sync) 跨整行 */
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-cell:nth-child(1) { grid-column: span 2; min-height: 360px; }
  .bento-cell:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 479.98px) {
  /* mobile 小螢幕：所有 cell 單欄 stack，min-height 縮小避免 6 卡 = 1680px 超長 */
  .bento-cell { min-height: 240px; padding: clamp(20px, 5vw, 28px); }
  .bento-cell:nth-child(1) { min-height: 320px; }
  .bento-h { font-size: clamp(19px, 5vw, 22px); }
  .bento-tag { font-size: 10px; }
  /* mobile 砍 3D tilt（單欄全寬時 tilt 看起來怪）*/
  .bento-cell { transform: none !important; }
}

/* Cell text 區（標籤 + 標題 + 描述）*/
/* 2026-05-06 百萬 polish：text 區有更明確的呼吸 */
.bento-text {
  margin-top: auto;
  padding-top: clamp(20px, 2vw, 28px);
}
.bento-tag {
  display: inline-block;
  font-family: var(--ff-mono, monospace);
  font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-vermilion);
  font-weight: 600;
  margin-bottom: 14px;
  padding: 4px 10px;
  background: color-mix(in oklch, var(--c-vermilion) 8%, transparent);
  border-radius: 4px;
  border: 1px solid color-mix(in oklch, var(--c-vermilion) 25%, transparent);
}
.bento-h {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.25;
  color: var(--c-ink);
  margin: 0 0 10px;
}
.bento-hero .bento-h {
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.bento-desc {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.7;
  color: var(--c-text);
  margin: 0;
  text-wrap: pretty;
}
.bento-hero .bento-desc {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
}
.bento-desc strong {
  color: var(--c-ink);
  font-weight: 700;
}

/* Cell visual 區（SVG 視覺化）— 視覺更呼吸 */
.bento-visual {
  flex-shrink: 0;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  color: var(--c-muted);
}
.bento-visual svg { max-width: 100%; height: auto; display: block; }

/* 2026-05-06 百萬 polish：subtle category-based accent
   每張卡用色相微差讓 6 卡有「同家族不同風味」的層次（hue 偏移 < 30deg、同朱印家族）
   user 看不出明顯顏色變化，但下意識感覺 6 卡有層次而非「6 張 vermilion 複製」 */
.bento-cell:nth-child(2) .bento-tag { /* SRS — 偏溫暖橘 */
  color: color-mix(in oklch, var(--c-vermilion) 88%, #FFB07A);
  background: color-mix(in oklch, var(--c-vermilion) 6%, transparent);
  border-color: color-mix(in oklch, var(--c-vermilion) 20%, #FFB07A);
}
.bento-cell:nth-child(3) .bento-tag { /* Popover — 偏深紅 */
  color: color-mix(in oklch, var(--c-vermilion) 92%, #8B2635);
}
.bento-cell:nth-child(4) .bento-tag { /* TTS — 偏紫紅 */
  color: color-mix(in oklch, var(--c-vermilion) 85%, #C04060);
}
.bento-cell:nth-child(5) .bento-tag { /* Stats — 偏金 */
  color: color-mix(in oklch, var(--c-vermilion) 70%, #B8893A);
  background: color-mix(in oklch, #B8893A 8%, transparent);
  border-color: color-mix(in oklch, #B8893A 25%, transparent);
}
.bento-cell:nth-child(6) .bento-tag { /* Sync — 維持 vermilion */
  /* 預設樣式 */
}

/* Hero radar chart (legacy, 已不使用) */
.bento-radar svg { max-width: 200px; margin: 8px auto; }

/* ═══ 申論評分結果卡 mockup（hero cell 視覺）═══
   貼近實際 AI 評分結果 UI：分數 / 等第 / 法條 badge / 一句總評 /
   進度條 / 優點與改善建議列表 */
.bento-essay-card {
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
}
.bec-card {
  width: 100%; max-width: 320px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 16px 16px 14px;
  box-shadow: 0 4px 14px -4px rgba(178, 58, 43, .12);
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
}
.bec-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.bec-score-wrap {
  display: flex; align-items: baseline; gap: 2px;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.bec-score {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: 38px; font-weight: 900;
  color: var(--c-vermilion);
  line-height: 1;
  letter-spacing: -.02em;
}
.bec-denom {
  font-family: var(--ff-mono);
  font-size: 13px; color: var(--c-muted);
  font-weight: 600;
}
.bec-badges {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.bec-grade {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: 13px; font-weight: 800;
  padding: 3px 10px;
  background: color-mix(in oklch, var(--c-vermilion) 12%, transparent);
  color: var(--c-vermilion);
  border: 1px solid color-mix(in oklch, var(--c-vermilion) 30%, transparent);
  border-radius: 4px;
  letter-spacing: .04em;
}
.bec-law {
  font-family: var(--ff-mono);
  font-size: 10px; font-weight: 600;
  padding: 2px 7px;
  background: color-mix(in oklch, #6b8a73 14%, transparent);
  color: #4d6a55;
  border-radius: 99px;
  letter-spacing: .03em;
}
[data-theme="dark"] .bec-law { color: #92b59c; }

.bec-summary {
  font-size: 12.5px; line-height: 1.5;
  color: var(--c-text);
  margin-bottom: 10px;
  font-style: italic;
}
.bec-bar-track {
  height: 4px;
  background: var(--c-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 14px;
}
.bec-bar-fill {
  height: 100%;
  width: 84%;
  background: linear-gradient(90deg, var(--c-vermilion), color-mix(in oklch, var(--c-vermilion) 65%, #d4a847));
  border-radius: 2px;
  transform-origin: left;
  animation: becBarGrow 1.2s .4s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes becBarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bec-bar-fill { animation: none; }
}

.bec-section {
  margin-bottom: 8px;
}
.bec-section:last-child { margin-bottom: 0; }
.bec-section-hdr {
  font-family: var(--ff-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bec-hdr-ok { color: #4d6a55; }
[data-theme="dark"] .bec-hdr-ok { color: #92b59c; }
.bec-hdr-tip { color: var(--c-vermilion); }
.bec-item {
  font-size: 11.5px;
  line-height: 1.5;
  padding: 1px 0;
}
.bec-ok {
  color: #4d6a55;
}
[data-theme="dark"] .bec-ok { color: #92b59c; }
.bec-tip {
  color: var(--c-text);
  opacity: .85;
}

/* SRS curve */
.bento-srs svg { max-width: 200px; }

/* Popover mockup — bento 卡在窄欄（~196px）寬度時，popover 不能完全壓在
   paragraph 上面（會把示意文字蓋掉）。改成從容器右下錨定、同時把容器
   min-height 加大留 paragraph + popover 兩段空間。 */
.bento-popover {
  position: relative;
  padding: 12px 14px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-family: var(--ff-serif-cn);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--c-text);
  min-height: 180px;
}
.bp-paragraph { color: var(--c-muted); max-width: 100%; }
.bp-link {
  color: var(--c-vermilion);
  font-weight: 700;
  border-bottom: 1.5px dotted var(--c-vermilion);
  cursor: pointer;
  position: relative;
}
.bp-popover {
  position: absolute;
  /* 從右下錨定，避免覆蓋 paragraph */
  top: auto;
  bottom: 8px;
  right: 8px;
  width: auto;
  max-width: calc(100% - 16px);
  background: var(--c-bg, var(--c-surface));
  border: 1.5px solid var(--c-vermilion);
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 8px 20px rgba(178, 58, 43, .25);
  font-size: 11px;
  z-index: 2;
  animation: bpPop 1.5s ease-in-out infinite alternate;
}
/* 因為 transform 不再用於 translateY (改 bottom 錨定)，pulse 改純 scale */
@keyframes bpPop {
  from { transform: scale(1); }
  to   { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-popover { animation: none; }
}
.bp-pop-h {
  font-weight: 800;
  color: var(--c-vermilion);
  margin-bottom: 4px;
  font-size: 11px;
}
.bp-pop-body { color: var(--c-text); line-height: 1.5; }

/* Wave visualization */
.bento-wave svg { max-width: 200px; height: 40px; }
@media (prefers-reduced-motion: reduce) {
  .bento-wave svg animate { animation-duration: 0s; }
}

/* Stats heatmap */
.bento-stats svg { max-width: 200px; }

/* Sync visualization */
.bento-sync {
  display: flex; justify-content: center; align-items: center;
  padding: 8px 0;
}
.bento-sync svg { max-width: 280px; height: 80px; color: var(--c-text); }

/* Hero radar chart specific tweak */
.bento-hero .bento-visual {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 16px;
}
.bento-hero .bento-radar svg {
  max-width: min(260px, 100%);
}

/* Wide card layout: visual left, text right on big screens */
.bento-wide {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.bento-wide .bento-visual { margin-bottom: 0; }
.bento-wide .bento-text { margin-top: 0; padding-top: 0; }
@container bento (max-width: 700px) {
  .bento-wide { grid-template-columns: 1fr; }
  .bento-wide .bento-visual { margin-bottom: 16px; }
}
@media (max-width: 700px) {
  .bento-wide { grid-template-columns: 1fr; }
  .bento-wide .bento-visual { margin-bottom: 16px; }
}