/* ============================================================================
   WEBMARKS AIマーケティング構築講座｜内部学習エディション
   design system stylesheet — styles.css （ライト・クリーン刷新版）
   ------------------------------------------------------------------------
   非公開・内部専用。外部公開・配布は禁止。
   自己完結（外部CDN不使用・フォントはOS標準の日本語ゴシックのみ使用）。
   重要：本ファイルはコンテンツの表示可否に一切関与しない（opacity:0等の
   初期非表示は使用しない）。JSが1行も動かなくても全文が読める設計。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. リセット
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------------------
   1. デザイントークン（ライトテーマ）
--------------------------------------------------------------------------- */
:root{
  color-scheme: light;

  /* サーフェス（白／オフホワイト基調） */
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #eef1f7;
  --surface-3: #e4e8f1;
  --border: rgba(31,41,64,.10);
  --border-strong: rgba(31,41,64,.18);
  --border-soft: rgba(31,41,64,.06);

  /* テキスト */
  --ink: #1f2430;
  --ink-dim: #545e73;
  --ink-faint: #6b7488; /* 2026-07-22 QA: 旧#8891a3は白背景でコントラスト比約3.17:1(WCAG AA未達)。4.69:1相当に是正 */

  /* ブランドアクセント（章ごとに切り替える基準色／ライト背景でAA可読な濃度に調整） */
  --indigo:#4338ca;
  --cyan:#0e7490;
  --amber:#b45309;
  --violet:#6d28d9;
  --emerald:#047857;
  --rose:#be123c;
  --sky:#0369a1;
  --teal:#0f766e;
  --coral:#b91c1c;
  --azure:#1d4ed8;
  --magenta:#a21caf;
  --lime:#4d7c0f;
  --gold:#a16207;

  --accent: var(--indigo);
  --accent-grad: linear-gradient(120deg, var(--indigo), var(--cyan) 85%);

  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(31,41,64,.04), 0 10px 24px -18px rgba(31,41,64,.18);
  --shadow-md: 0 16px 36px -16px rgba(31,41,64,.16);
  --shadow-lg: 0 28px 64px -22px rgba(31,41,64,.20);

  --font-jp: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --sidebar-w: 284px;
  --content-max: 900px;
}

/* 章ごとのアクセント色（data-accent 属性で切り替え・0〜11章＋導入ぶんを先に定義） */
[data-accent="gold"]    { --accent: var(--gold); }
[data-accent="indigo"]  { --accent: var(--indigo); }
[data-accent="cyan"]    { --accent: var(--cyan); }
[data-accent="emerald"] { --accent: var(--emerald); }
[data-accent="amber"]   { --accent: var(--amber); }
[data-accent="rose"]    { --accent: var(--rose); }
[data-accent="violet"]  { --accent: var(--violet); }
[data-accent="sky"]     { --accent: var(--sky); }
[data-accent="teal"]    { --accent: var(--teal); }
[data-accent="coral"]   { --accent: var(--coral); }
[data-accent="azure"]   { --accent: var(--azure); }
[data-accent="magenta"] { --accent: var(--magenta); }
[data-accent="lime"]    { --accent: var(--lime); }

/* ---------------------------------------------------------------------------
   2. ベース
--------------------------------------------------------------------------- */
body{
  font-family: var(--font-jp);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.9;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

::selection{ background: color-mix(in srgb, var(--accent) 24%, transparent); color:#111; }

h1,h2,h3,h4{ font-weight: 800; letter-spacing: .01em; color: var(--ink); }
h1{ font-size: clamp(1.9rem, 3.6vw, 2.85rem); line-height:1.3; }
h2{ font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height:1.4; margin-bottom:.9rem; }
h3{ font-size: 1.14rem; line-height:1.5; margin-bottom:.5rem; }
p{ margin-bottom: 1.1em; color: var(--ink); }
p:last-child{ margin-bottom: 0; }

strong, b{ color:#0d1220; font-weight: 700; }

mark{
  background: linear-gradient(100deg, rgba(255,214,64,.65), rgba(255,214,64,.38));
  color:#3f2d02;
  font-weight: 700;
  padding: .04em .42em;
  border-radius: .3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lead{
  font-size: 1.12rem;
  color: var(--ink-dim);
  font-weight: 500;
}

.key-point{
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: .05em .5em;
  border-radius: .35em;
}

small, .fine{ font-size:.82rem; color: var(--ink-faint); }

a.inline-link{
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
a.inline-link:hover{ opacity:.75; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   3. 社外秘バッジ / フッター注記（全ページ必須表示）
--------------------------------------------------------------------------- */
.confid-chip{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#9f1239;
  background: rgba(190,18,60,.09);
  border:1px solid rgba(190,18,60,.28);
  border-radius: var(--radius-pill);
  padding: .3em .75em;
  white-space: nowrap;
}

.site-footer{
  border-top:1px solid var(--border);
  margin-top: 3.5rem;
  padding: 1.4rem 0 2.4rem;
  text-align:center;
}
.site-footer__notice{
  font-size:.78rem;
  color: var(--ink-faint);
  letter-spacing:.01em;
  font-weight:600;
}
.site-footer__meta{
  margin-top:.5rem;
  font-size:.74rem;
  color: var(--ink-faint);
  opacity:.85;
}

/* ---------------------------------------------------------------------------
   4. アプリシェル（サイドバー + メイン）
--------------------------------------------------------------------------- */
.app-shell{
  display:grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
  min-height:100vh;
}

.sidebar{
  position: sticky;
  top:0;
  align-self:start;
  height:100vh;
  overflow-y:auto;
  border-right:1px solid var(--border);
  background: var(--surface);
  padding: 1.5rem 1.15rem 2rem;
}
.sidebar::-webkit-scrollbar{ width:8px; }
.sidebar::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:8px; }

.brand{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding: .2rem .35rem .9rem;
  border-bottom:1px solid var(--border-soft);
  margin-bottom: 1rem;
}
.brand__mark{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius: 11px;
  background: var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; font-size:1.05rem;
  box-shadow: var(--shadow-sm);
}
.brand__text{ min-width:0; }
.brand__title{
  font-size:.92rem;
  font-weight:800;
  color:var(--ink);
  line-height:1.35;
}
.brand__subtitle{
  font-size:.72rem;
  color: var(--ink-faint);
  margin-top:.15rem;
}

.sidebar-section{ margin: 1.2rem 0; }
.sidebar-section__label{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  color: var(--ink-faint);
  text-transform:uppercase;
  padding: 0 .5rem;
  margin-bottom:.5rem;
}

.nav-part{ margin-bottom:1.15rem; }
.nav-part__label{
  font-size:.7rem;
  font-weight:700;
  color: var(--ink-dim);
  padding: .3rem .5rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.nav-part__label .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--accent);
  flex:0 0 auto;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding: .5rem .55rem;
  border-radius: var(--radius-sm);
  font-size:.83rem;
  color: var(--ink-dim);
}
a.nav-item:hover{ background: var(--surface-2); color: var(--ink); }
.nav-item.is-active{
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--ink);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.nav-item.is-locked{ color: var(--ink-faint); cursor:default; }

.nav-item__num{
  flex:0 0 auto;
  width:24px; height:24px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:800;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.nav-item.is-locked .nav-item__num{
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink-faint);
}
.nav-item__title{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item__badge{
  flex:0 0 auto;
  font-size:.62rem;
  font-weight:700;
  padding:.15em .5em;
  border-radius: var(--radius-pill);
}
.nav-item__badge.is-live{ background:rgba(4,120,87,.11); color:#065f46; border:1px solid rgba(4,120,87,.28); }
.nav-item__badge.is-soon{ background: var(--surface-2); color: var(--ink-faint); border:1px solid var(--border); }
.nav-item__check{ flex:0 0 auto; font-size:.85rem; opacity:.9; color:#047857; }

.sidebar-cta{
  margin-top:1.4rem;
  padding:.9rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border:1px solid var(--border);
}
.sidebar-cta__label{ font-size:.7rem; color:var(--ink-faint); margin-bottom:.4rem; }
.progress-track{
  height:7px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow:hidden;
  border:1px solid var(--border);
}
.progress-fill{
  height:100%;
  width:0%;
  background: var(--accent-grad);
  border-radius: var(--radius-pill);
  transition: width .4s ease;
}
.sidebar-cta__count{ font-size:.78rem; color:var(--ink-dim); margin-top:.45rem; }

.nav-toggle{
  display:none;
  align-items:center;
  gap:.5rem;
  position: sticky;
  top:0;
  z-index:40;
  width:100%;
  padding: .85rem 1rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
  font-size:.85rem;
  font-weight:700;
}
.nav-toggle__icon{ width:20px; height:14px; position:relative; }
.nav-toggle__icon span{
  position:absolute; left:0; right:0; height:2px; background: var(--ink);
  border-radius:2px;
}
.nav-toggle__icon span:nth-child(1){ top:0; }
.nav-toggle__icon span:nth-child(2){ top:6px; }
.nav-toggle__icon span:nth-child(3){ top:12px; }

/* ---------------------------------------------------------------------------
   5. メインコンテンツ
--------------------------------------------------------------------------- */
.main{ min-width:0; padding: 2.6rem 2.2rem 4rem; }
.content{ max-width: var(--content-max); margin: 0 auto; }

.breadcrumb{
  display:flex; align-items:center; gap:.5rem;
  font-size:.78rem;
  color: var(--ink-faint);
  margin-bottom: 1.4rem;
}
.breadcrumb a{ color: var(--ink-dim); }
.breadcrumb a:hover{ color: var(--accent); }

.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background: transparent;
}
.scroll-progress__bar{ height:100%; width:0%; background: var(--accent-grad); }

/* ---------------------------------------------------------------------------
   6. ヒーロー / 章アイキャッチ帯
--------------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-lg);
  border:1px solid var(--border);
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 65%);
  padding: 2.6rem 2.4rem;
  box-shadow: var(--shadow-md);
}
.hero::before, .hero::after{
  content:"";
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  filter: blur(80px);
  opacity:.16;
  pointer-events:none;
}
.hero::before{ background: var(--accent); top:-180px; right:-120px; }
.hero::after{ background: var(--cyan); bottom:-220px; left:-140px; opacity:.10; }

.hero__grid{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(31,41,64,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 75%);
  opacity:.6;
}

.hero__inner{ position:relative; z-index:1; }
.hero__num{
  position:absolute;
  right:-.5rem; top:-2.2rem;
  font-size: 8rem;
  font-weight:900;
  color: color-mix(in srgb, var(--accent) 13%, transparent);
  line-height:1;
  z-index:0;
  user-select:none;
  pointer-events:none;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.74rem; font-weight:800; letter-spacing:.08em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-pill);
  padding:.35em .9em;
  margin-bottom: 1rem;
}
.hero__art{
  flex:0 0 auto;
  width:76px; height:76px;
  border-radius: 20px;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.hero__art svg{ width:38px; height:38px; }
.hero__top{ display:flex; align-items:center; gap:1.2rem; margin-bottom:1.1rem; }
.hero__title{ margin:0; }
.hero__desc{ max-width: 62ch; margin-top:.9rem; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.stat-chip{
  font-size:.78rem; color: var(--ink-dim);
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-pill);
  padding:.4em .95em;
  display:inline-flex; align-items:center; gap:.4em;
  box-shadow: var(--shadow-sm);
}
.hero__actions{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* future-image slot: 将来AI生成画像を差し込む場合はこの要素の内側に <img> を追加、
   もしくは background-image を指定すれば自動でカバー表示される */
.hero-art-slot{
  position:relative;
  margin-top:1.6rem;
  height:0;
  border-radius: var(--radius);
  overflow:hidden;
}
.hero-art-slot img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------------------------------------------------------------------
   7. ボタン
--------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.86rem; font-weight:700;
  padding:.65em 1.2em;
  border-radius: var(--radius-pill);
  border:1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{ background: var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--primary{
  background: var(--accent-grad);
  color:#fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover{ filter:brightness(1.06); }
.btn--ghost{ background:transparent; }

.check-toggle{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.84rem; font-weight:700;
  padding:.6em 1.05em;
  border-radius: var(--radius-pill);
  border:1px solid var(--border-strong);
  background: var(--surface);
  cursor:pointer;
  user-select:none;
}
.check-toggle input{ accent-color: var(--accent); width:16px; height:16px; }
.check-toggle.is-done{ background: rgba(4,120,87,.10); border-color: rgba(4,120,87,.35); color:#065f46; }

/* ---------------------------------------------------------------------------
   8. セクション見出し
--------------------------------------------------------------------------- */
.section{ margin: 3rem 0; }
.section-head{ margin-bottom: 1.3rem; }
.section-head__eyebrow{
  font-size:.72rem; font-weight:800; letter-spacing:.09em;
  color: var(--accent);
  margin-bottom:.5rem;
  display:block;
}
.section-head__desc{ color: var(--ink-dim); max-width: 68ch; margin-top:.4rem; }

/* ---------------------------------------------------------------------------
   9. カード各種
--------------------------------------------------------------------------- */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-sm);
}

.grid{ display:grid; gap:1.1rem; }
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* 講座マップ：章カード */
.chapter-card{
  position:relative;
  display:flex; flex-direction:column;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: var(--surface);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.chapter-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.chapter-card__band{
  height:60px;
  position:relative;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  display:flex; align-items:center; padding:0 1.3rem;
}
.chapter-card__num{
  position:relative; z-index:1;
  font-size:1.5rem; font-weight:900; color: var(--accent);
}
.chapter-card__part{
  position:relative; z-index:1;
  margin-left:auto;
  font-size:.66rem; font-weight:700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-radius: var(--radius-pill);
  padding:.25em .7em;
}
.chapter-card__body{ padding:1.15rem 1.3rem 1.3rem; flex:1; display:flex; flex-direction:column; }
.chapter-card__title{ font-size:1rem; font-weight:800; margin-bottom:.5rem; }
.chapter-card__desc{ font-size:.85rem; color: var(--ink-dim); flex:1; }
.chapter-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--border-soft);
  font-size:.74rem; color: var(--ink-faint);
}
.chapter-card__status{
  font-weight:700; font-size:.68rem;
  padding:.22em .6em; border-radius: var(--radius-pill);
}
.chapter-card__status.is-live{ background: rgba(4,120,87,.11); color:#065f46; border:1px solid rgba(4,120,87,.28); }
.chapter-card__status.is-soon{ background: var(--surface-2); color: var(--ink-faint); border:1px solid var(--border); }
.chapter-card.is-locked{ opacity:.72; }
.chapter-card.is-locked .chapter-card__band{ filter:grayscale(.4); }

.chapter-card__readtoggle{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background: rgba(255,255,255,.82);
  border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(3px);
  box-shadow: var(--shadow-sm);
}
.chapter-card__readtoggle input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.chapter-card__readtoggle .mark-icon{ font-size:.9rem; opacity:.4; color: var(--ink-faint); }
.chapter-card__readtoggle.is-checked{ background: rgba(4,120,87,.16); border-color:#059669; }
.chapter-card__readtoggle.is-checked .mark-icon{ opacity:1; color:#047857; }

/* レッスンカード（章ページ内） */
.lesson-card{
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding:1.2rem 1.3rem;
  box-shadow: var(--shadow-sm);
}
.lesson-card__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.lesson-card__num{
  flex:0 0 auto;
  width:26px; height:26px; border-radius:8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800;
}
.lesson-card__title{ font-size:.95rem; font-weight:700; }
.lesson-card__type{
  margin-left:auto; flex:0 0 auto;
  font-size:.66rem; font-weight:700; color: var(--ink-faint);
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius-pill); padding:.18em .6em;
  white-space:nowrap;
}
.lesson-card__body p{ font-size:.9rem; color: var(--ink-dim); }
.lesson-card.is-empty{ border-style:dashed; box-shadow:none; }

.video-placeholder{
  display:flex; align-items:center; gap:.7rem;
  border:1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding:.85rem 1rem;
  font-size:.85rem;
  color: var(--ink-faint);
}
.video-placeholder__icon{ font-size:1.15rem; }

/* ハイライト / コールアウト */
.callout{
  border-radius: var(--radius);
  border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  padding:1.4rem 1.5rem;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.callout__label{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.72rem; font-weight:800; letter-spacing:.05em;
  color: var(--accent);
  margin-bottom:.7rem;
}
.callout ul{ display:flex; flex-direction:column; gap:.55rem; }
.callout li{ font-size:.92rem; color: var(--ink-dim); padding-left:1.3rem; position:relative; }
.callout li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color: var(--accent); font-weight:800;
}

.note-box{
  border-left:3px solid var(--border-strong);
  padding:.2rem 0 .2rem 1.1rem;
  color: var(--ink-faint);
  font-size:.85rem;
}

/* ツールロゴチップ */
.tool-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin: .8rem 0 1.2rem; }
.tool-chip{
  display:inline-flex; align-items:center; gap:.55em;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-pill);
  padding:.35em .9em .35em .4em;
  font-size:.83rem; font-weight:600; color: var(--ink-dim);
  box-shadow: var(--shadow-sm);
}
.tool-chip__icon{
  flex:0 0 auto;
  width:22px; height:22px;
  border-radius:6px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-2);
}
.tool-chip__icon svg{ width:100%; height:100%; }

/* 表 */
.table-wrap{ overflow-x:auto; border-radius: var(--radius); border:1px solid var(--border); box-shadow: var(--shadow-sm); }
table.data-table{ min-width:100%; font-size:.88rem; background: var(--surface); }
.data-table th, .data-table td{
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
.data-table thead th{
  background: var(--surface-2);
  color: var(--ink-dim);
  font-size:.74rem; font-weight:700; letter-spacing:.04em;
  white-space:nowrap;
}
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr:hover{ background: var(--surface-2); }

/* ステップ/フロー */
.flow{ display:flex; flex-direction:column; gap:.75rem; }
.flow__step{
  display:flex; gap:1rem; align-items:flex-start;
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding:1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.flow__num{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:10px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem;
}
.flow__title{ font-weight:700; margin-bottom:.25rem; }
.flow__desc{ font-size:.87rem; color: var(--ink-dim); }
.flow__layers{ display:flex; flex-direction:column; gap:.3rem; margin-top:.5rem; }
.flow__layer{ font-size:.82rem; color: var(--ink-faint); }
.flow__layer b{ color: var(--ink-dim); }

/* パートグルーピング（Part1/2/3） */
.part-group{ margin-bottom: 2.6rem; }
.part-group__head{
  display:flex; align-items:baseline; gap:.7rem;
  margin-bottom:1.1rem;
}
.part-group__index{
  font-size:.72rem; font-weight:800; letter-spacing:.08em;
  color: var(--ink-faint);
}
.part-group__title{ font-size:1.05rem; font-weight:800; }
.part-group__desc{ font-size:.85rem; color: var(--ink-faint); margin-left:auto; text-align:right; max-width:34ch; }

/* prev/next 章ナビ */
.chapter-pager{
  display:grid; grid-template-columns: 1fr 1fr; gap:1rem;
  margin-top: 2.6rem;
}
.pager-link{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1rem 1.2rem;
  background: var(--surface);
  display:flex; flex-direction:column; gap:.3rem;
  box-shadow: var(--shadow-sm);
}
a.pager-link:hover{ border-color: var(--accent); }
.pager-link.is-next{ text-align:right; align-items:flex-end; }
.pager-link.is-locked{ opacity:.55; box-shadow:none; }
.pager-link__label{ font-size:.7rem; color: var(--ink-faint); font-weight:700; }
.pager-link__title{ font-size:.92rem; font-weight:700; }

/* details（デザインシステム早見表など） */
details.showcase{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0;
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
details.showcase > summary{
  cursor:pointer; list-style:none;
  padding:1.1rem 1.4rem;
  display:flex; align-items:center; gap:.7rem;
  font-weight:800; font-size:.95rem;
}
details.showcase > summary::-webkit-details-marker{ display:none; }
details.showcase > summary::after{
  content:"表示 ▾"; margin-left:auto; font-size:.75rem; font-weight:700; color: var(--ink-faint);
}
details.showcase[open] > summary::after{ content:"閉じる ▴"; }
details.showcase .showcase-body{ padding: .2rem 1.4rem 1.6rem; border-top:1px solid var(--border-soft); }

.swatches{ display:flex; flex-wrap:wrap; gap:.7rem; }
.swatch{ display:flex; flex-direction:column; align-items:center; gap:.4rem; width:78px; }
.swatch__chip{ width:46px; height:46px; border-radius:12px; border:1px solid var(--border-strong); }
.swatch__name{ font-size:.68rem; color: var(--ink-faint); text-align:center; }

/* ---------------------------------------------------------------------------
   10. レスポンシブ
--------------------------------------------------------------------------- */
@media (max-width: 980px){
  .app-shell{ grid-template-columns: 1fr; }
  .nav-toggle{ display:flex; }
  .sidebar{
    position: fixed; inset: 48px 0 0 0; height: calc(100vh - 48px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index:50;
    width: 100%;
    max-width: 340px;
  }
  .app-shell.nav-open .sidebar{ transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main{ padding: 1.6rem 1.15rem 3rem; }
  .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr 1fr; }
  .chapter-pager{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; }
  .hero{ padding: 1.9rem 1.4rem; }
  .hero__num{ font-size:5.2rem; top:-1rem; right:-.2rem; }
  .hero__top{ flex-wrap:wrap; }
  .part-group__head{ flex-wrap:wrap; }
  .part-group__desc{ margin-left:0; text-align:left; max-width:none; }
}

/* ---------------------------------------------------------------------------
   11. 印刷
--------------------------------------------------------------------------- */
@media print{
  .sidebar, .nav-toggle, .scroll-progress, .chapter-card__readtoggle, .hero__actions{ display:none !important; }
  .app-shell{ display:block; }
  body{ background:#fff; color:#000; }
  .card, .lesson-card, .callout, .hero{ border-color:#ccc; box-shadow:none; }
}

/* ---------------------------------------------------------------------------
   注記：本ファイルは opacity:0 / visibility:hidden(常時) / transform で
   コンテンツ本体を隠す指定を一切含まない。上記 visibility:hidden は
   サイドバーの既読チェックマーク（装飾アイコン1文字）にのみ限定使用。
--------------------------------------------------------------------------- */