/* 使用說明書頁樣式（/guide，任務#145新增）。
   共用 app.css 的變數／nav／footer 等既有類別；左側目錄＋右側內文排版
   沿用 kline_guide.css `.ta-layout` / handbook.css `.hb-layout` 驗證過的
   sticky TOC 手感，獨立成 `.gd-` 前綴避免耦合到那兩個頁面專屬的檔案。 */

.gd-intro {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.gd-intro h1 {
  margin: 0 0 10px;
  font-size: clamp(19px, 1.2vw + 15px, 24px);
  font-weight: 800;
  color: var(--text);
}

.gd-intro p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

.gd-intro p strong {
  color: var(--text);
}

/* ---------- 左側目錄 + 右側內文 ---------- */

.gd-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 18px;
  align-items: start;
}

/* [#177] 2026-08-16：top/max-height 原本寫死 76px / calc(100vh - 96px)
   （76 = 當時量到的 nav 62px + 14px 間距）。但 .nav 高度不是常數——nav.js
   拿到 /auth/me 才插 tier 徽章與主題鈕，窄螢幕下 .nav-actions 一換行就從
   一排變兩排，寫死的值會讓目錄整條滑進 nav（z-index 20）底下被蓋住。
   改吃 nav.js 發布的 `--sv-nav-h`（見 nav.js [#177] 區塊），變數缺席時
   fallback 回 62px＝改動前的行為。 */
.gd-toc {
  position: sticky;
  top: calc(var(--sv-nav-h, 62px) + 14px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 10px;
  max-height: calc(100vh - var(--sv-nav-h, 62px) - 34px);
  overflow-y: auto;
}

.gd-toc-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text-muted);
  text-decoration: none;
}

.gd-toc-item:hover {
  background: rgba(var(--surface-tint-rgb), 0.05);
  border-color: var(--border);
  color: var(--text);
}

.gd-toc-item.active {
  background: rgba(var(--brand-cyan-rgb), 0.12);
  border-color: rgba(var(--brand-cyan-rgb), 0.4);
}

.gd-toc-item.active .gd-toc-title,
.gd-toc-item.active.gd-toc-item-index {
  color: var(--brand-cyan-text);
}

.gd-toc-item-index {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 4px;
  padding-bottom: 10px;
}

.gd-toc-num {
  font-size: 10.5px;
  color: var(--text-faint);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.gd-toc-title {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 600;
  margin-top: 2px;
}

.gd-main {
  min-width: 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ---------- 頁面索引總表 ---------- */

.gd-page-index {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 22px 22px;
  scroll-margin-top: 86px;
}

.gd-page-index-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.gd-page-index-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.gd-page-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.gd-page-index-card {
  background: rgba(var(--surface-tint-rgb), 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.gd-page-index-card:hover {
  border-color: rgba(var(--brand-cyan-rgb), 0.4);
  background: rgba(var(--brand-cyan-rgb), 0.06);
}

.gd-page-index-chapter {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-cyan-text);
  margin-bottom: 4px;
}

.gd-page-index-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.gd-page-index-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.gd-page-index-link {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
}

.gd-page-index-link:hover {
  color: var(--brand-cyan-text);
  text-decoration: underline;
}

/* ---------- 章節 ---------- */

.gd-chapter {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 24px 26px;
  scroll-margin-top: 86px;
}

.gd-chapter-head {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.gd-chapter-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-cyan-text);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.gd-chapter-title {
  margin: 0 0 6px;
  font-size: clamp(20px, 1.2vw + 16px, 25px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.gd-chapter-subtitle {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- 1. 強項亮點卡 ---------- */

.gd-highlight-box {
  margin-bottom: 20px;
  padding: 14px 16px 16px;
  background: linear-gradient(135deg, rgba(var(--brand-cyan-rgb), 0.1), rgba(112, 48, 208, 0.08)); /* theme-exempt: 第二停點紫 112,48,208 與 --brand-violet-rgb(96,32,208) 非同值 */
  border: 1px solid rgba(var(--brand-cyan-rgb), 0.28);
  border-radius: var(--radius-sm);
}

.gd-highlight-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand-cyan-text);
  margin-bottom: 8px;
}

.gd-highlight-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gd-highlight-list li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}

.gd-highlight-list li strong {
  color: var(--brand-cyan-text);
}

/* ---------- 1b. 使用時機 + 專業術語一點通（任務#152 M2） ---------- */

.gd-meta-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.gd-usage-box,
.gd-term-box {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.7;
}

.gd-usage-box {
  background: rgba(var(--usage-amber-rgb), 0.08); /* 舉一反三修復 20260728：代幣化（深色值 255,179,71 零變化） */
  border: 1px solid rgba(var(--usage-amber-rgb), 0.28);
}

.gd-usage-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--usage-amber); /* 舉一反三修復 20260728：代幣化（深色值 #ffb347 零變化；淺色 #8f5a04 tint 底 5.52） */
  margin-bottom: 6px;
}

.gd-usage-box p {
  margin: 0;
  color: var(--text);
}

.gd-usage-box p strong {
  color: var(--usage-amber); /* 舉一反三修復 20260728：同上 */
}

.gd-term-box {
  background: rgba(var(--surface-tint-rgb), 0.03);
  border: 1px dashed var(--border);
}

.gd-term-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.gd-term-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.gd-term-explain {
  margin: 0;
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .gd-meta-row {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }
}

/* ---------- 2b. 高手技巧 ---------- */

.gd-tips-box {
  margin-bottom: 20px;
  padding: 14px 16px 16px;
  background: rgba(var(--tips-teal-rgb), 0.08); /* 舉一反三修復 20260728：代幣化（深色值 94,234,212 零變化） */
  border: 1px solid rgba(var(--tips-teal-rgb), 0.28);
  border-radius: var(--radius-sm);
}

.gd-tips-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--tips-teal); /* 舉一反三修復 20260728：代幣化（深色值 #5eead4 零變化；淺色 #1d7a66 tint 底 5.03） */
  margin-bottom: 8px;
}

.gd-tips-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: gd-tip;
}

.gd-tips-list li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}

.gd-tips-list li strong {
  color: var(--tips-teal); /* 舉一反三修復 20260728：同上 */
}

/* ---------- 4. 常見問題 ---------- */

.gd-faq-box {
  margin-top: 20px;
  padding: 14px 16px 16px;
  background: rgba(var(--surface-tint-rgb), 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.gd-faq-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}

.gd-faq-item {
  padding: 10px 0;
  border-top: 1px dashed var(--border);
}

.gd-faq-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.gd-faq-q {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.gd-faq-a {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- 2. 圖文說明 ---------- */

.gd-section-block {
  margin-bottom: 18px;
}

.gd-section-block:last-of-type {
  margin-bottom: 20px;
}

.gd-shot {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: top center;
  background: rgba(var(--shadow-rgb), 0.25);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: zoom-in;
}

.gd-shot-missing {
  padding: 30px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-faint);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.gd-section-caption {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

.gd-section-caption strong {
  color: var(--text);
}

/* ---------- 3. 實際操作範例 ---------- */

.gd-example-box {
  padding: 16px 18px 18px;
  background: rgba(var(--surface-tint-rgb), 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.gd-example-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}

.gd-example-steps {
  margin: 0 0 14px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gd-example-steps li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.gd-example-steps li strong {
  color: var(--text);
}

.gd-example-box .gd-shot {
  max-height: 640px;
}

.gd-example-result {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: rgba(var(--brand-blue-rgb), 0.08);
  border: 1px dashed rgba(var(--brand-blue-rgb), 0.3);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}

.gd-example-result strong {
  color: var(--brand-cyan-text);
}

/* ---------- 圖片放大燈箱 ---------- */

.gd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(2, 6, 16, 0.88); /* theme-exempt: 燈箱遮罩 2,6,16 缺 token --lightbox-scrim（--overlay rgba(11,15,26,.86) 非同值） */
  cursor: zoom-out;
}

.gd-lightbox.open {
  display: flex;
}

.gd-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(var(--shadow-rgb), 0.6);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .gd-layout {
    grid-template-columns: 1fr;
  }

  .gd-toc {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-height: none;
    gap: 6px;
  }

  .gd-toc-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .gd-toc-item-index {
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .gd-chapter {
    padding: 18px 16px 20px;
  }

  .gd-page-index {
    padding: 16px 16px 18px;
  }

  .gd-page-index-grid {
    grid-template-columns: 1fr;
  }

  .gd-shot {
    max-height: 360px;
  }

  .gd-example-box .gd-shot {
    max-height: 420px;
  }
}