/* =========================================================
   スライド型教材エンジン 共通スタイル（構造仕様書v0.1準拠）
   - 見た目のパラメータは【デザイントークン】（:root のCSS変数）に集約。
     各教材の theme.css がトークンを上書きして世界観を差し替える。
   - ★デザイナーはこのファイルを編集しない（構造・レイアウトの定義）。
     色・影・角丸・フォント等の変更は各教材の theme.css だけで行う。
     → 手引き：アプリ製作/診断アプリ/_デザイン変更ガイド.md
   - プレフィックス .gd-*（診断エンジン .dg-* と共存）
   ========================================================= */
:root {
  /* ---- 色（基本） ---- */
  --gd-bg: #f7f4ee;            /* ページ背景 */
  --gd-card: #fffdf9;          /* カード・ヘッダー背景 */
  --gd-ink: #453c30;           /* 本文の文字色 */
  --gd-ink-soft: #7d7263;      /* 補足・弱い文字色 */
  --gd-line: #e7dfd2;          /* 罫線・枠線 */
  /* ---- 色（アクセント） ---- */
  --gd-accent: #b0724f;        /* 主アクセント（ボタン・進捗・強調） */
  --gd-accent-ink: #fffdf9;    /* 主アクセントの上に載せる文字色 */
  --gd-accent-soft: #f3e4da;   /* 主アクセントの淡い面（バッジ・ホバー） */
  --gd-sub: #7d9376;           /* 副アクセント（章ラベル・完了チェック） */
  /* ---- 色（部位別・省略時は上の基本色から自動で決まる） ---- */
  --gd-header-bg: color-mix(in srgb, var(--gd-card) 92%, transparent);
  --gd-badge-bg: var(--gd-ink);          /* 診断の行き先バッジ */
  --gd-badge-ink: var(--gd-card);
  --gd-toast-bg: var(--gd-ink);          /* トースト通知 */
  --gd-toast-ink: var(--gd-card);
  --gd-slide-bg: var(--gd-bg);           /* スライド画像の下地 */
  --gd-lightbox-overlay: rgba(30, 24, 16, 0.82);
  --gd-progress-fill: var(--gd-accent);  /* 進捗バー（グラデ指定も可） */
  /* ---- 形 ---- */
  --gd-radius: 16px;           /* カードの角丸 */
  --gd-radius-sm: 12px;        /* ボタン・小部品の角丸 */
  --gd-header-h: 60px;         /* ヘッダーの高さ */
  /* ---- 影 ---- */
  --gd-shadow-card: 0 6px 24px rgba(90, 70, 40, 0.06);
  --gd-shadow-cta: 0 4px 14px rgba(0, 0, 0, 0.12);
  --gd-shadow-drawer: 6px 0 24px rgba(0, 0, 0, 0.12);
  /* ---- 文字 ---- */
  --gd-font: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN",
             "Yu Gothic", "Meiryo", sans-serif;
  --gd-font-heading: inherit;  /* 見出し用フォント（変えなければ本文と同じ） */
  --gd-heading-tracking: 0em;  /* 見出しの字間 */
  /* ---- 動き ---- */
  --gd-ticker-duration: 24s;   /* ティッカー帯が一周する時間 */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gd-bg);
  color: var(--gd-ink);
  font-family: var(--gd-font);
  line-height: 1.9;
  font-size: 15px;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--gd-font-heading); letter-spacing: var(--gd-heading-tracking); }

/* ---------- A. ヘッダー（固定バー） ---------- */
.gd-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--gd-accent); color: var(--gd-accent-ink);
  padding: 8px 16px; border-radius: 0 0 10px 0;
}
.gd-skip:focus { left: 0; }
.gd-header {
  position: sticky; top: 0; z-index: 120;
  display: flex; align-items: center; gap: 12px;
  height: var(--gd-header-h);
  padding: 0 16px;
  background: var(--gd-header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gd-line);
}
.gd-brand {
  display: flex; flex-direction: column; text-decoration: none;
  color: var(--gd-ink); line-height: 1.3; min-width: 0;
}
.gd-brand-main { font-weight: bold; font-size: 15px; white-space: nowrap; }
.gd-brand-sub { font-size: 10px; letter-spacing: 0.14em; color: var(--gd-ink-soft); }
.gd-header-progress {
  margin-left: auto;
  font-size: 13px; font-weight: bold; color: var(--gd-accent);
  background: var(--gd-accent-soft);
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}
.gd-header-btn {
  border: 1px solid var(--gd-line); background: var(--gd-card);
  color: var(--gd-ink-soft); border-radius: 10px;
  padding: 6px 12px; font-size: 12px; white-space: nowrap;
}
.gd-header-btn:hover { color: var(--gd-ink); border-color: var(--gd-accent); }
.gd-toc-toggle { display: none; }

/* ---------- レイアウト（sticky目次＋本文列） ---------- */
.gd-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ---------- D. 目次サイドバー ---------- */
.gd-sidebar {
  position: sticky; top: calc(var(--gd-header-h) + 12px);
  align-self: start;
  max-height: calc(100vh - var(--gd-header-h) - 24px);
  overflow-y: auto;
  background: var(--gd-card);
  border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius);
  padding: 16px 14px;
}
.gd-side-head { display: flex; justify-content: space-between; align-items: center; }
.gd-side-title { font-size: 13px; font-weight: bold; }
.gd-side-close { display: none; border: none; background: none; font-size: 13px; color: var(--gd-ink-soft); }
.gd-side-progress-label {
  margin-top: 10px;
  font-size: 10px; letter-spacing: 0.14em; color: var(--gd-sub); font-weight: bold;
}
.gd-side-progress-num { font-size: 13px; color: var(--gd-ink); margin-left: 6px; }
.gd-side-bar { height: 6px; background: var(--gd-accent-soft); border-radius: 999px; overflow: hidden; margin: 6px 0 14px; }
.gd-side-fill { height: 100%; width: 0; background: var(--gd-progress-fill); border-radius: 999px; transition: width 0.3s ease; }
.gd-search-label { display: block; font-size: 11px; color: var(--gd-ink-soft); margin-bottom: 4px; }
.gd-search {
  width: 100%; border: 1px solid var(--gd-line); border-radius: 10px;
  padding: 8px 10px; font-family: inherit; font-size: 13px;
  background: var(--gd-bg); color: var(--gd-ink);
}
.gd-search:focus { outline: 2px solid var(--gd-accent-soft); border-color: var(--gd-accent); }
.gd-toc { margin-top: 12px; }
.gd-toc-chapter {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 0 4px; padding: 0 4px;
  font-size: 11px; font-weight: bold; color: var(--gd-sub);
  letter-spacing: 0.08em; text-decoration: none;
}
.gd-toc-chapter .gd-toc-range { color: var(--gd-ink-soft); font-weight: normal; }
.gd-toc-link {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px;
  font-size: 13px; color: var(--gd-ink); text-decoration: none;
  line-height: 1.5;
}
.gd-toc-link:hover { background: var(--gd-accent-soft); }
.gd-toc-link.is-active { background: var(--gd-accent-soft); color: var(--gd-accent); font-weight: bold; }
.gd-toc-num { font-size: 11px; color: var(--gd-ink-soft); min-width: 20px; }
.gd-toc-check { margin-left: auto; color: var(--gd-sub); font-size: 12px; visibility: hidden; }
.gd-toc-link.is-done .gd-toc-check { visibility: visible; }
.gd-toc-empty { font-size: 12px; color: var(--gd-ink-soft); padding: 8px 4px; display: none; }
.gd-side-reset {
  margin-top: 16px; width: 100%;
  border: 1px dashed var(--gd-line); background: none;
  color: var(--gd-ink-soft); border-radius: 10px;
  padding: 8px; font-size: 12px;
}
.gd-side-reset:hover { color: var(--gd-accent); border-color: var(--gd-accent); }

/* ---------- B. ヒーロー ---------- */
.gd-hero {
  background: var(--gd-card);
  border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius);
  padding: 34px 26px 0;
  overflow: hidden;
  box-shadow: var(--gd-shadow-card);
}
.gd-hero-kicker {
  font-size: 11px; letter-spacing: 0.2em; color: var(--gd-sub);
  font-weight: bold; margin: 0 0 10px;
}
.gd-hero-title { margin: 0 0 10px; font-size: 30px; line-height: 1.5; }
.gd-hero-sub { margin: 0 0 16px; color: var(--gd-ink-soft); font-size: 15px; }
.gd-hero-features { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.gd-hero-features li {
  background: var(--gd-accent-soft); color: var(--gd-accent);
  font-size: 12px; font-weight: bold;
  padding: 4px 12px; border-radius: 999px;
}
.gd-cta {
  display: inline-block;
  border: none; border-radius: var(--gd-radius-sm);
  background: var(--gd-accent); color: var(--gd-accent-ink);
  font-size: 15px; font-weight: bold; letter-spacing: 0.04em;
  padding: 13px 26px;
  box-shadow: var(--gd-shadow-cta);
  margin-bottom: 24px;
}
.gd-cta:hover { filter: brightness(1.06); }
.gd-ticker {
  border-top: 1px solid var(--gd-line);
  margin: 0 -26px;
  padding: 8px 0;
  overflow: hidden; white-space: nowrap;
}
.gd-ticker-inner {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.22em; color: var(--gd-ink-soft);
  animation: gd-marquee var(--gd-ticker-duration) linear infinite;
  padding-left: 100%;
}
@keyframes gd-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- C. 現在地診断 ---------- */
.gd-diag {
  margin-top: 20px;
  background: var(--gd-card);
  border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius);
  padding: 26px 22px;
  box-shadow: var(--gd-shadow-card);
}
.gd-diag-kicker { font-size: 11px; letter-spacing: 0.2em; color: var(--gd-sub); font-weight: bold; margin: 0 0 6px; }
.gd-diag-heading { margin: 0 0 6px; font-size: 21px; }
.gd-diag-note { margin: 0 0 16px; font-size: 14px; color: var(--gd-ink-soft); }
.gd-diag-choice-label { font-size: 12px; font-weight: bold; color: var(--gd-ink-soft); margin: 0 0 8px; }
.gd-diag-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.gd-choice {
  text-align: left;
  border: 1.5px solid var(--gd-line); border-radius: var(--gd-radius-sm);
  background: var(--gd-card); color: var(--gd-ink);
  padding: 12px 14px; line-height: 1.6;
}
.gd-choice:hover { border-color: var(--gd-accent); background: var(--gd-accent-soft); }
.gd-choice[aria-pressed="true"] { border-color: var(--gd-accent); background: var(--gd-accent-soft); }
.gd-choice-label { display: block; font-size: 14px; font-weight: bold; }
.gd-choice-dest { display: block; font-size: 12px; color: var(--gd-ink-soft); }
.gd-diag-result { margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gd-diag-found { font-size: 13px; color: var(--gd-sub); font-weight: bold; display: none; }
.gd-diag-badge {
  display: none;
  background: var(--gd-badge-bg); color: var(--gd-badge-ink);
  font-size: 13px; font-weight: bold;
  padding: 4px 12px; border-radius: 8px;
}
.gd-diag-go {
  border: none; border-radius: var(--gd-radius-sm);
  background: var(--gd-accent); color: var(--gd-accent-ink);
  font-size: 14px; font-weight: bold;
  padding: 11px 22px;
}
.gd-diag-go:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- E. 章トビラ ---------- */
.gd-chapter-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 36px 4px 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gd-accent-soft);
}
.gd-chapter-label { font-size: 12px; letter-spacing: 0.16em; font-weight: bold; color: var(--gd-accent); }
.gd-chapter-title { margin: 0; font-size: 19px; }
.gd-chapter-range { margin-left: auto; font-size: 12px; color: var(--gd-ink-soft); }

/* ---------- F. スライド型ページ ---------- */
.gd-page {
  background: var(--gd-card);
  border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius);
  padding: 20px 22px;
  margin-bottom: 22px;
  scroll-margin-top: calc(var(--gd-header-h) + 14px);
  box-shadow: var(--gd-shadow-card);
}
.gd-page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.gd-page-context { display: block; font-size: 11px; color: var(--gd-sub); font-weight: bold; letter-spacing: 0.06em; }
.gd-page-title { margin: 2px 0 0; font-size: 20px; line-height: 1.5; }
.gd-done-toggle {
  margin-left: auto; flex-shrink: 0;
  border: 1.5px solid var(--gd-line); border-radius: 999px;
  background: var(--gd-card); color: var(--gd-ink-soft);
  font-size: 12px; padding: 5px 14px; white-space: nowrap;
}
.gd-done-toggle:hover { border-color: var(--gd-accent); color: var(--gd-accent); }
.gd-done-toggle.is-done {
  background: var(--gd-sub); border-color: var(--gd-sub); color: var(--gd-card);
}
.gd-slide {
  position: relative; display: block; width: 100%;
  border: 1px solid var(--gd-line); border-radius: var(--gd-radius-sm);
  overflow: hidden; padding: 0; background: var(--gd-slide-bg);
}
.gd-slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gd-slide-zoom-hint {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
}
.gd-page-message { margin: 12px 0 14px; font-size: 15px; font-weight: bold; }
.gd-blocks { display: grid; gap: 10px; }
.gd-block { border: 1px solid var(--gd-line); border-radius: var(--gd-radius-sm); background: var(--gd-bg); padding: 12px 14px 6px; }
.gd-block-label { margin: 0 0 4px; font-size: 12.5px; font-weight: bold; color: var(--gd-accent); letter-spacing: 0.04em; }
.gd-block-body { margin: 0 0 8px; font-size: 14px; }

/* ---------- G. 差し込みモジュール ---------- */
.gd-module { margin-top: 12px; }
.gd-copy { border: 1px solid var(--gd-line); border-radius: var(--gd-radius-sm); overflow: hidden; }
.gd-copy-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--gd-accent-soft); padding: 8px 12px;
}
.gd-copy-label { font-size: 12.5px; font-weight: bold; color: var(--gd-accent); }
.gd-copy-btn {
  border: none; border-radius: 8px;
  background: var(--gd-accent); color: var(--gd-accent-ink);
  font-size: 12px; font-weight: bold; padding: 6px 12px;
}
.gd-copy-body {
  margin: 0; padding: 12px 14px;
  font-size: 13px; line-height: 1.8;
  white-space: pre-wrap; word-break: break-all;
  background: var(--gd-card);
  font-family: inherit;
}
.gd-glossary-title { font-size: 12.5px; font-weight: bold; color: var(--gd-accent); margin: 0 0 6px; }
.gd-glossary { width: 100%; border-collapse: collapse; font-size: 13px; }
.gd-glossary th, .gd-glossary td { border: 1px solid var(--gd-line); padding: 7px 10px; text-align: left; line-height: 1.6; }
.gd-glossary th { background: var(--gd-accent-soft); color: var(--gd-accent); font-size: 12px; }
.gd-extlink {
  display: inline-block;
  border: 1.5px solid var(--gd-accent); border-radius: var(--gd-radius-sm);
  color: var(--gd-accent); text-decoration: none;
  font-size: 13.5px; font-weight: bold;
  padding: 9px 18px;
}
.gd-extlink:hover { background: var(--gd-accent-soft); }

/* ---------- F-5. ページフッターナビ ---------- */
.gd-page-nav {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed var(--gd-line);
  font-size: 13px;
}
.gd-page-nav a {
  color: var(--gd-ink-soft); text-decoration: none;
  padding: 6px 10px; border-radius: 8px;
}
.gd-page-nav a:hover { background: var(--gd-accent-soft); color: var(--gd-accent); }
.gd-page-nav a[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.gd-page-pos { margin-left: auto; color: var(--gd-ink-soft); font-size: 12px; }
.gd-page-done-btn {
  border: 1.5px solid var(--gd-accent); border-radius: 999px;
  background: var(--gd-card); color: var(--gd-accent);
  font-size: 12px; font-weight: bold; padding: 5px 16px;
}
.gd-page-done-btn.is-done { background: var(--gd-sub); border-color: var(--gd-sub); color: var(--gd-card); }

/* ---------- H. フッター ---------- */
.gd-footer {
  border-top: 1px solid var(--gd-line);
  margin-top: 30px; padding: 24px 16px 40px;
  text-align: center; font-size: 12px; color: var(--gd-ink-soft);
}
.gd-footer-brand { font-weight: bold; color: var(--gd-ink); margin-bottom: 6px; }
.gd-footer a { color: var(--gd-accent); }
.gd-proto-note { margin-top: 10px; font-size: 11px; opacity: 0.8; }

/* ---------- ライトボックス（F-2） ---------- */
.gd-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: var(--gd-lightbox-overlay);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
}
.gd-lightbox[hidden] { display: none; }
.gd-lightbox-bar {
  display: flex; align-items: center; gap: 12px;
  color: #fff; font-size: 13px; margin-bottom: 10px;
  width: min(920px, 100%);
}
.gd-lightbox-badge { background: var(--gd-accent); color: var(--gd-accent-ink); border-radius: 6px; padding: 2px 10px; font-weight: bold; }
.gd-lightbox-title { font-weight: bold; }
.gd-lightbox-open { margin-left: auto; color: #fff; font-size: 12px; }
.gd-lightbox-close {
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 8px;
  background: none; color: #fff; font-size: 12px; padding: 4px 12px;
}
.gd-lightbox img {
  width: min(920px, 100%); max-height: 78vh; object-fit: contain;
  border-radius: 10px; background: var(--gd-slide-bg);
}

/* ---------- トースト ---------- */
.gd-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 250;
  background: var(--gd-toast-bg); color: var(--gd-toast-ink);
  font-size: 13px; padding: 8px 18px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.gd-toast.is-show { opacity: 1; }

/* ---------- モバイル（目次＝ドロワー） ---------- */
@media (max-width: 900px) {
  .gd-layout { grid-template-columns: 1fr; padding-top: 14px; }
  .gd-toc-toggle { display: inline-block; }
  .gd-sidebar {
    position: fixed; top: var(--gd-header-h); left: 0; bottom: 0;
    width: min(320px, 86vw); max-height: none;
    border-radius: 0 var(--gd-radius) var(--gd-radius) 0;
    transform: translateX(-102%);
    transition: transform 0.25s ease;
    z-index: 150;
    box-shadow: var(--gd-shadow-drawer);
  }
  .gd-sidebar.is-open { transform: translateX(0); }
  .gd-side-close { display: inline-block; }
  .gd-hero-title { font-size: 23px; }
  .gd-page-head { flex-wrap: wrap; }
}