/* ============================================================
   站台層樣式（site layer）— 軟糖立體 Claymorphism
   只管：麵包屑、頁尾、首頁、主題頁、假門、404。
   不碰三個工作區的課程內文樣式。

   設計方向來自 ui-ux-pro-max 對「線上課程平台」的建議：
     PATTERN  Immersive / Interactive Experience
     STYLE    Claymorphism（大圓角、多層柔和陰影、按下去會縮）
     COLORS   教育藍綠 + 課程琥珀
     AVOID    Boring design、No gamification

   三條禁令（來自 2026-08-18 autoplan 審查）：
   1. 不用裸元素選擇器（button {}、a {}、table {}）
   2. 不用已被佔用的類名（.quiz .card .footer .page .steps .example）
   3. 尺寸用 px 或 em，不用 rem
      —— speak 的 html{font-size:17px}，另兩套是 16px，rem 會不一致
   ============================================================ */

:root {
  color-scheme: light;

  /* 底與面 */
  --site-bg: #f0fdfa;          /* 極淺藍綠，整頁的底 */
  --site-surface: #ffffff;     /* 卡片 */
  --site-surface-2: #e8f7f4;   /* 次級區塊 */

  /* 字 */
  --site-ink: #10403b;         /* 深藍綠，不用純黑，比較軟 */
  --site-ink-soft: #4a7c74;
  --site-ink-faint: #8fb3ad;

  /* 主色 */
  --site-primary: #0d9488;
  --site-primary-deep: #0b7a70; /* 小字用這個才夠對比 */
  --site-primary-dark: #075e57;  /* 按鈕的底面（厚度） */
  --site-primary-soft: #ccfbf1;

  /* 重點色：課程琥珀 */
  --site-accent: #d97706;
  --site-accent-deep: #b45309;
  --site-accent-soft: #fef3c7;

  /* 批改 */
  --site-wrong: #dc2626;
  --site-wrong-soft: #fee2e2;

  --site-line: #b8e6de;

  /* 圓角 */
  --site-r-lg: 30px;
  --site-r-md: 22px;
  --site-r-sm: 16px;

  /* 軟糖陰影：外層柔投影 + 上緣高光 */
  --site-clay: 0 1px 2px rgba(16, 64, 59, 0.06),
               0 10px 24px -10px rgba(16, 64, 59, 0.22),
               inset 0 2px 0 rgba(255, 255, 255, 0.9);
  --site-clay-lift: 0 2px 4px rgba(16, 64, 59, 0.08),
                    0 18px 34px -12px rgba(16, 64, 59, 0.28),
                    inset 0 2px 0 rgba(255, 255, 255, 0.95);
  --site-clay-in: inset 0 3px 8px rgba(16, 64, 59, 0.12),
                  inset 0 -1px 0 rgba(255, 255, 255, 0.6);

  --site-measure: 620px;
  --site-wide: 900px;

  --site-cjk: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
    system-ui, -apple-system, sans-serif;
  --site-round: "Nunito", "Noto Sans TC", system-ui, sans-serif;
}

/* ---------- 頁面外殼 ---------- */

.site-shell {
  position: relative;
  max-width: var(--site-wide);
  margin: 0 auto;
  padding: 28px 20px 90px;
  color: var(--site-ink);
  font-family: var(--site-cjk);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
}

/* 只有站台頁換底色。課程頁不動，那是主題層自己的事。 */
:root[data-kind="home"] body,
:root[data-kind="topic"] body,
:root[data-kind="404"] body {
  margin: 0;
  background: var(--site-bg);
}

.site-h1 {
  margin: 0 0 16px;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.site-h2 {
  margin: 56px 0 16px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
}

.site-lead {
  max-width: var(--site-measure);
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.9;
}

.site-lead-soft {
  max-width: var(--site-measure);
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--site-ink-soft);
}

/* 圓角藥丸標籤 */
.site-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--site-accent-soft);
  color: var(--site-accent-deep);
  font-family: var(--site-round);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ---------- 麵包屑：一顆藥丸 ---------- */

.site-crumbs {
  display: inline-block;
  margin: 0 0 22px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--site-surface);
  box-shadow: 0 1px 2px rgba(16, 64, 59, 0.06),
              0 6px 14px -8px rgba(16, 64, 59, 0.25);
  font-family: var(--site-round);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--site-ink-soft);
}

.site-crumbs a {
  color: var(--site-primary-deep);
  text-decoration: none;
}

.site-crumbs a:hover,
.site-crumbs a:focus-visible {
  color: var(--site-accent-deep);
}

.site-crumbs .site-sep {
  margin: 0 8px;
  color: var(--site-ink-faint);
}

/* ---------- 首頁招牌：一題真的題目 ---------- */

.site-ask {
  max-width: var(--site-measure);
  margin: 26px 0 0;
  padding: 26px 24px 24px;
  border-radius: var(--site-r-lg);
  background: var(--site-surface);
  box-shadow: var(--site-clay);
}

.site-ask-q {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.65;
}

.site-ask-hint {
  margin: 0 0 18px;
  font-family: var(--site-round);
  font-size: 14px;
  font-weight: 700;
  color: var(--site-ink-faint);
}

.site-opts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.site-opt { margin: 0; }

.site-opt button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--site-r-md);
  background: var(--site-surface-2);
  box-shadow: 0 3px 0 #cdeae5, var(--site-clay-in);
  color: var(--site-ink);
  font-family: var(--site-cjk);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.site-opt button:hover {
  background: var(--site-primary-soft);
}

/* 按下去會縮 —— 軟糖的手感就是這個 */
.site-opt button:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #cdeae5, var(--site-clay-in);
}

.site-opt-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--site-surface);
  box-shadow: inset 0 -1px 0 rgba(16, 64, 59, 0.1);
  font-family: var(--site-round);
  font-size: 15px;
  font-weight: 800;
  color: var(--site-ink-faint);
}

.site-opt[data-state="wrong"] button {
  background: var(--site-wrong-soft);
  box-shadow: 0 3px 0 #f7c9c9, var(--site-clay-in);
  color: var(--site-ink-soft);
}

.site-opt[data-state="wrong"] .site-opt-mark {
  background: var(--site-wrong);
  color: #fff;
}

.site-opt[data-state="right"] button {
  background: var(--site-primary-soft);
  box-shadow: 0 3px 0 #99e6da, var(--site-clay-in);
  font-weight: 700;
}

.site-opt[data-state="right"] .site-opt-mark {
  background: var(--site-primary);
  color: #fff;
}

.site-opt[data-state] .site-opt-mark {
  animation: site-pop 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes site-pop {
  from { transform: scale(0.4); }
  to   { transform: scale(1); }
}

/* 回饋卡 */
.site-ask-fb {
  display: none;
  margin: 16px 0 0;
  padding: 15px 18px;
  border-radius: var(--site-r-sm);
  background: var(--site-accent-soft);
  color: var(--site-accent-deep);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
}

.site-ask-fb[data-open="1"] {
  display: block;
  animation: site-in 240ms ease both;
}

.site-ask-after {
  display: none;
  margin: 18px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}

.site-ask-after[data-open="1"] {
  display: block;
  animation: site-in 300ms ease both;
}

.site-ask-after a {
  color: var(--site-primary-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--site-primary-soft);
}

.site-ask-after a:hover,
.site-ask-after a:focus-visible {
  border-bottom-color: var(--site-primary);
}

@keyframes site-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 主題卡（首頁） ---------- */

.site-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.site-topic {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: var(--site-r-lg);
  background: var(--site-surface);
  box-shadow: var(--site-clay);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.site-topic:hover {
  transform: translateY(-3px);
  box-shadow: var(--site-clay-lift);
}

.site-topic-badge {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 14px;
  border-radius: 16px;
  background: var(--site-primary-soft);
  box-shadow: inset 0 -2px 0 rgba(16, 64, 59, 0.08);
  font-family: var(--site-round);
  font-size: 19px;
  font-weight: 800;
  color: var(--site-primary-deep);
}

.site-topic[data-topic="business"] .site-topic-badge {
  background: var(--site-accent-soft);
  color: var(--site-accent-deep);
}

.site-topic[data-topic="Singing"] .site-topic-badge {
  background: #e0e7ff;
  color: #4338ca;
}

.site-topic-name {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.4;
}

.site-topic-name a {
  color: var(--site-ink);
  text-decoration: none;
}

.site-topic-name a:hover,
.site-topic-name a:focus-visible {
  color: var(--site-primary-deep);
}

.site-topic-what {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--site-ink-soft);
}

.site-topic-meta {
  margin: auto 0 0;
  font-family: var(--site-round);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--site-ink-soft);
}

.site-topic-meta .site-how {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--site-surface-2);
  color: var(--site-primary-deep);
  font-size: 13px;
}

/* ---------- 進度 ---------- */

.site-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-family: var(--site-round);
  font-size: 14px;
  font-weight: 800;
  color: var(--site-ink-soft);
}

.site-dots {
  display: flex;
  gap: 6px;
}

.site-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--site-surface-2);
  box-shadow: inset 0 2px 3px rgba(16, 64, 59, 0.12);
}

.site-dot[data-done="1"] {
  background: var(--site-primary);
  box-shadow: 0 2px 4px -1px rgba(13, 148, 136, 0.6);
}

/* ---------- 課程列（主題頁） ---------- */

.site-lessons {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.site-lesson {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--site-r-md);
  background: var(--site-surface);
  box-shadow: var(--site-clay);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.site-lesson:hover {
  transform: translateY(-2px);
  box-shadow: var(--site-clay-lift);
}

.site-lesson-no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--site-surface-2);
  box-shadow: inset 0 -2px 0 rgba(16, 64, 59, 0.08);
  font-family: var(--site-round);
  font-size: 15px;
  font-weight: 800;
  color: var(--site-ink-soft);
}

.site-lesson[data-done="1"] .site-lesson-no {
  background: var(--site-primary);
  color: #fff;
  box-shadow: 0 3px 6px -2px rgba(13, 148, 136, 0.7);
}

.site-lesson-body { flex: 1 1 auto; min-width: 0; }

.site-lesson-title {
  display: block;
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
}

.site-lesson-title a {
  color: var(--site-ink);
  text-decoration: none;
}

.site-lesson-title a:hover,
.site-lesson-title a:focus-visible {
  color: var(--site-primary-deep);
}

.site-lesson-note {
  display: block;
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--site-ink-soft);
}

.site-lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--site-round);
  font-size: 13px;
  font-weight: 700;
}

.site-chip {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--site-surface-2);
  color: var(--site-ink-soft);
}

.site-chip[data-kind="time"] {
  background: var(--site-primary-soft);
  color: var(--site-primary-deep);
}

.site-chip[data-kind="do"] {
  background: var(--site-accent-soft);
  color: var(--site-accent-deep);
}

/* 已讀打勾 */
.site-done { display: none; }

.site-lesson[data-done="1"] .site-lesson-no::after { content: ""; }

/* ---------- 速查表 ---------- */

.site-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.site-card {
  padding: 16px 18px;
  border-radius: var(--site-r-md);
  background: var(--site-accent-soft);
  box-shadow: 0 1px 2px rgba(120, 70, 10, 0.06),
              0 8px 18px -10px rgba(120, 70, 10, 0.3),
              inset 0 2px 0 rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.75;
  color: var(--site-accent-deep);
}

.site-card a {
  display: block;
  margin: 0 0 4px;
  color: var(--site-ink);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.site-card a:hover,
.site-card a:focus-visible {
  color: var(--site-accent-deep);
}

/* ---------- 需要什麼裝置 ---------- */

.site-needs {
  max-width: var(--site-measure);
  margin: 22px 0 0;
  padding: 16px 20px;
  border-radius: var(--site-r-md);
  background: var(--site-surface);
  box-shadow: var(--site-clay);
  font-size: 15px;
  line-height: 1.85;
}

/* ---------- 頁尾 ---------- */

.site-foot {
  margin: 64px 0 0;
  padding: 26px 24px 24px;
  border-radius: var(--site-r-lg);
  background: var(--site-surface);
  box-shadow: var(--site-clay);
  font-family: var(--site-cjk);
  font-size: 15px;
  line-height: 1.85;
  color: var(--site-ink);
}

.site-foot-lead {
  max-width: 30em;
  margin: 0 0 18px;
  color: var(--site-ink-soft);
}

.site-foot-nav {
  margin: 22px 0 0;
  font-family: var(--site-round);
  font-size: 14px;
  font-weight: 700;
  color: var(--site-ink-faint);
}

.site-foot-nav a {
  color: var(--site-primary-deep);
  text-decoration: none;
}

.site-foot-nav a:hover,
.site-foot-nav a:focus-visible {
  color: var(--site-accent-deep);
}

/* 課程頁上的頁尾：底色比課程紙面淺一階，讓它讀起來是「站台的框」 */
:root[data-kind="lesson"] .site-foot,
:root[data-kind="reference"] .site-foot,
:root[data-kind="resources"] .site-foot {
  background: rgba(255, 255, 255, 0.72);
}

/* ---------- 假門 ---------- */

.site-door {
  display: inline-block;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--site-r-md);
  background: var(--site-primary);
  box-shadow: 0 5px 0 var(--site-primary-dark),
              0 14px 22px -10px rgba(13, 148, 136, 0.6),
              inset 0 2px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
  font-family: var(--site-cjk);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.site-door:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 0 var(--site-primary-dark),
              0 18px 26px -10px rgba(13, 148, 136, 0.65),
              inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

.site-door:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--site-primary-dark),
              0 6px 12px -8px rgba(13, 148, 136, 0.5),
              inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

.site-door-panel {
  display: none;
  margin: 18px 0 0;
  padding: 18px 20px;
  border-radius: var(--site-r-md);
  background: var(--site-surface-2);
  box-shadow: var(--site-clay-in);
  font-size: 15px;
  line-height: 1.9;
}

.site-door-panel[data-open="1"] {
  display: block;
  animation: site-in 240ms ease both;
}

.site-door-panel p { margin: 0 0 12px; }
.site-door-panel p:last-child { margin-bottom: 0; }

.site-door-go {
  display: inline-block;
  margin: 4px 0 0;
  padding: 12px 20px;
  border-radius: var(--site-r-sm);
  background: var(--site-accent);
  box-shadow: 0 4px 0 var(--site-accent-deep),
              inset 0 2px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
}

.site-door-go:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--site-accent-deep),
              inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

/* ---------- 鍵盤焦點 ---------- */

.site-crumbs a:focus-visible,
.site-foot-nav a:focus-visible,
.site-door:focus-visible,
.site-door-go:focus-visible,
.site-topic-name a:focus-visible,
.site-lesson-title a:focus-visible,
.site-card a:focus-visible,
.site-opt button:focus-visible,
.site-ask-after a:focus-visible {
  outline: 3px solid var(--site-accent);
  outline-offset: 3px;
}

/* ---------- 手機 ---------- */

@media (max-width: 34em) {
  :root {
    --site-r-lg: 24px;
    --site-r-md: 18px;
  }

  .site-shell { padding: 20px 14px 76px; font-size: 16px; }
  .site-h1 { font-size: 30px; }
  .site-h2 { font-size: 19px; margin-top: 42px; }
  .site-lead { font-size: 17px; }

  .site-ask { padding: 20px 16px 18px; }
  .site-ask-q { font-size: 17px; }
  .site-opt button { min-height: 60px; padding: 14px 14px; }

  .site-topic { padding: 18px 18px 16px; }
  .site-lesson { padding: 16px 16px; gap: 12px; }
  .site-foot { padding: 22px 18px 20px; }
}

/* ---------- 減少動態 ---------- */

@media (prefers-reduced-motion: reduce) {
  .site-opt button,
  .site-topic,
  .site-lesson,
  .site-door,
  .site-door-go { transition: none; }

  .site-opt button:active,
  .site-door:active,
  .site-door-go:active,
  .site-topic:hover,
  .site-lesson:hover { transform: none; }

  .site-door-panel[data-open="1"],
  .site-ask-fb[data-open="1"],
  .site-ask-after[data-open="1"],
  .site-opt[data-state] .site-opt-mark { animation: none; }
}

/* ---------- 列印 ---------- */

@media print {
  .site-crumbs,
  .site-door,
  .site-door-panel,
  .site-foot-nav { display: none; }
  .site-shell { padding: 0; }
}