/* WEBMARKS AIO CAMP — components.css（AI CAMPより移植）
   サイドバー・ヘッダー・進捗バー・カード・バッジ等の共通コンポーネント */

/* ================= レイアウトシェル ================= */
.site-header{
  position:sticky;top:0;z-index:40;height:var(--header-h);
  display:flex;align-items:center;gap:var(--space-4);
  padding:0 var(--space-5);background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--color-border);
}
.brand{display:flex;align-items:center;gap:.6em;font-weight:800;color:var(--color-navy);white-space:nowrap}
.brand-mark{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--hero-navy-2),var(--color-primary));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;
}
.brand-name{font-size:1rem;letter-spacing:.01em}
.brand-name small{display:block;font-size:.68rem;font-weight:600;color:var(--color-text-faint);letter-spacing:.08em}

.header-nav{display:flex;gap:var(--space-4);margin-left:auto;font-size:.92rem;font-weight:600}
.header-nav a{color:var(--color-text-muted)}
.header-nav a.is-active,.header-nav a:hover{color:var(--color-primary)}
.header-nav{display:none}
@media (min-width:640px){.header-nav{display:flex}}

/* 検索ボタン＋メニュートグルの右端グループ(T-1・2026-07-24追加)。
   .header-navが無い(モバイル)時はこのラッパー自身がmargin-left:autoで右端へ寄る。
   .header-navがある(デスクトップ)時はnav側の既存auto marginが group全体を右へ寄せ切っている
   ため、ここは小さな固定マージンに切り替える(以前.nav-toggle単体が持っていたのと同じ値)。 */
.header-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
@media (min-width:640px){.header-actions{margin-left:var(--space-2)}}

.nav-toggle{
  border:1px solid var(--color-border);background:#fff;border-radius:var(--radius-sm);
  width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;cursor:pointer;flex:none;padding:0;
  /* 2026-07-26 鈴木さん最終フィードバック(公開前最終調整項目3・実機バグ対応):
     iOSのボタンはデフォルトでネイティブのチロム(角丸グラデーション)を持ち、appearance未リセット
     だとカスタムのborder/background/border-radiusと衝突して見た目・タップ領域がずれることがある
     ため明示的にappearance:noneでリセットする。touch-action:manipulationは、
     ダブルタップズーム判定待ちで最初のタップが遅延/無視されるのを防ぐ(実機Safari特有で
     デスクトップ検証では再現しないクラスの不具合への対策)。-webkit-tap-highlight-colorは
     タップ時の灰色フラッシュを消す視覚上の副作用対策(機能には影響しない)。 */
  -webkit-appearance:none;appearance:none;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
/* ハンバーガーアイコンの3本線。以前は".nav-toggle span"を参照していたが、マークアップに
   対応する<span>が無く実際には::before/::afterの2本しか描画されていなかった
   (2026-07-26 鈴木さん最終フィードバックで発見・修正)。中央の線を.nav-toggle-barという
   実在の<span>に対応させ、3本とも確実に描画されるようにする。 */
.nav-toggle-bar,.nav-toggle::before,.nav-toggle::after{
  content:"";display:block;width:20px;height:2px;background:var(--color-navy);border-radius:2px;flex:none;
}
/* 2026-07-26 UI刷新(実装2)バグ修正: PCで押しても無反応に見えていた原因はこのボタン自体に
   デスクトップ非表示ルールが無かったこと。sidebar.js側のクリック処理は body.sidebar-open
   クラスをtoggleするだけだが、.sidebar は min-width:1024px で常にdisplay:block(モバイル
   ドロワー用のtransform/position:fixedは@media (max-width:1023.98px)側にしか無い)なので、
   PC幅ではこのクラスtoggleに見た目上の効果が一切無く「無反応」に見えていた(実測で確認)。
   ボタンごとdisplay:noneにして、モバイルドロワー開閉専用のUIであることを明確にする。 */
@media (min-width:1024px){.nav-toggle{display:none}}

/* ================= 検索ボタン(T-1・2026-07-24追加) =================
   モバイル: nav-toggleと同じ44x44の正方形アイコンボタン(ラベル非表示)。
   640px以上: 幅可変のピル形状でラベル「検索」も表示する(header-navが横に出るのと同じ幅で開放)。 */
.search-trigger{
  display:flex;align-items:center;justify-content:center;gap:.4em;
  border:1px solid var(--color-border);background:#fff;border-radius:var(--radius-pill);
  height:44px;width:44px;padding:0;cursor:pointer;flex:none;
  color:var(--color-text-muted);font-weight:700;font-size:.85rem;font-family:inherit;
  -webkit-appearance:none;appearance:none;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.search-trigger:hover{border-color:var(--color-primary);color:var(--color-primary)}
.search-trigger-icon{width:18px;height:18px;flex:none;display:flex}
.search-trigger-icon svg{width:100%;height:100%}
.search-trigger-label{display:none}
@media (min-width:640px){
  .search-trigger{width:auto;padding:0 1em 0 .8em}
  .search-trigger-label{display:inline}
}

.app-shell{
  display:flex;align-items:flex-start;max-width:1440px;margin:0 auto;
}
.app-main{flex:1;min-width:0;padding:var(--space-6) var(--space-5) var(--space-7)}
.app-main-inner{max-width:var(--content-max);margin:0 auto}

/* ================= サイドバー ================= */
.sidebar{
  width:var(--sidebar-w);flex:none;position:sticky;top:var(--header-h);
  height:calc(100vh - var(--header-h));overflow-y:auto;
  border-right:1px solid var(--color-border);background:var(--color-bg-section);
  padding:var(--space-5) var(--space-4);
  display:none;
}
@media (min-width:1024px){.sidebar{display:block}}
.sidebar-inner{display:flex;flex-direction:column;gap:var(--space-2)}
/* サイドバー視認性拡大(2026-07-25・鈴木さん指摘「小さくて見づらい」対応)。
   文字サイズを.85rem前後帯から.95rem以上へ底上げし、行間(line-height)とpaddingも
   比例して拡大する。行間を確保することで編タイトル等の折返し時の読みやすさも改善する。 */
.sidebar-link{
  display:block;padding:.65em .75em;border-radius:var(--radius-sm);color:var(--color-text-muted);
  font-weight:700;font-size:.98rem;line-height:1.4;touch-action:manipulation;
}
.sidebar-link:hover{background:var(--color-secondary-light);text-decoration:none}
.sidebar-link.is-active{background:var(--color-secondary-light);color:var(--color-primary)}
.sidebar-heading{
  font-size:.78rem;letter-spacing:.09em;color:var(--color-text-faint);font-weight:800;
  margin:var(--space-4) 0 var(--space-1) .7em;text-transform:uppercase;
}
.sidebar details{border-radius:var(--radius-sm)}
.sidebar details > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6em;touch-action:manipulation;
  padding:.6em .75em;border-radius:var(--radius-sm);font-weight:700;font-size:.98rem;line-height:1.4;color:var(--color-navy);
}
.sidebar details > summary::-webkit-details-marker{display:none}
.sidebar details > summary::after{
  content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--color-text-faint);
  border-bottom:2px solid var(--color-text-faint);transform:rotate(-45deg);transition:transform .15s;flex:none;
}
.sidebar details[open] > summary::after{transform:rotate(45deg)}
.sidebar details > summary:hover{background:var(--color-secondary-light)}
.course-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--course-color,var(--color-primary))}
.sidebar .sidebar-section{margin:.2em 0 .35em 1.1em}
.sidebar .sidebar-section > summary{font-size:.9rem;font-weight:600;color:var(--color-text-muted);line-height:1.4}
.sidebar .lesson-list{list-style:none;margin:.25em 0 .55em 1.3em;padding:0;display:flex;flex-direction:column;gap:2px}
.sidebar .lesson-list a{
  display:flex;align-items:center;gap:.5em;padding:.45em .65em;border-radius:6px;font-size:.88rem;line-height:1.45;
  color:var(--color-text-muted);
}
.sidebar .lesson-list a:hover{background:var(--color-secondary-light);text-decoration:none}
.sidebar .lesson-list a.is-active{background:var(--color-primary);color:#fff}
.sidebar .lesson-done-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--color-border)}
.sidebar .lesson-list a.is-done .lesson-done-dot{background:var(--color-success)}
.sidebar-course-progress{margin-left:auto;font-size:.78rem;color:var(--color-text-faint);font-weight:700}

/* 2026-07-25 サイドバー「実践編」カテゴリー別配置分(鈴木さん直接指示)。
   2026-07-25(同日UI修正1): 外側の折りたたみ(.sidebar-practice-toggle/.sidebar-heading-toggle)は
   廃止し、「実践編」見出しは既存の.sidebar-heading(<p>、「学習編」と共通)をそのまま使う。
   2026-07-25(同日UI修正2・鈴木さん直接指示「見た目一緒に。動いたときのアクションも一緒に」):
   専用クラス.sidebar-practice-scene/.sidebar-scene-countによる差分スタイルは廃止した。
   カテゴリーの<details>は.sidebar-courseそのもの、右側バッジ(記事数)も.sidebar-course-progress
   をそのまま再利用し、学習編の編と1px単位で同一の見た目にする(識別はbuild.py側の
   data-practice-scene/data-practice-id属性・data-badge-kind属性のみで行い、CSSクラスは
   増やさない。JSのpaintProgress()はdata-course-block属性を目印にするため、この
   バッジは自動的に進捗計算の対象外になる=構造的に保証される)。 */

/* モバイルドロワー
   2026-07-26 鈴木さん最終フィードバック(公開前最終調整項目3・実機バグ対応): 実機Safariでの
   タップ取りこぼし対策としてtouch-action:manipulationを明示し、閉じている間の.sidebar-scrimが
   誤って入力を奪わないようpointer-events:noneも明示する(displayのみに依存しない二重の安全策)。 */
@media (max-width:1023.98px){
  .sidebar{
    display:block;position:fixed;top:0;left:0;height:100vh;width:min(84vw,320px);
    transform:translateX(-105%);transition:transform .22s ease;z-index:60;padding-top:calc(var(--header-h) + var(--space-4));
    box-shadow:var(--shadow-card-hover);touch-action:pan-y;-webkit-overflow-scrolling:touch;
  }
  body.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-scrim{
    display:none;position:fixed;inset:0;background:rgba(18,35,59,.4);z-index:50;
    touch-action:manipulation;pointer-events:none;
  }
  body.sidebar-open .sidebar-scrim{display:block;pointer-events:auto}
}

/* ================= 右レール ================= */
.rail{
  width:var(--rail-w);flex:none;padding:var(--space-6) var(--space-5);display:none;
}
@media (min-width:1280px){.rail{display:block}}
.rail-card{
  background:var(--color-bg-section);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-4);margin-bottom:var(--space-4);
}
.rail-card h4{margin:0 0 .6em}

/* ================= 進捗バー ================= */
.progress-track{
  background:var(--color-border);border-radius:var(--radius-pill);height:10px;overflow:hidden;width:100%;
}
.progress-fill{
  height:100%;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent));
  width:0%;transition:width .4s ease;
}
.progress-row{display:flex;align-items:center;gap:.8em;margin:.4em 0}
.progress-label{font-size:.82rem;color:var(--color-text-muted);white-space:nowrap;min-width:3.4em;text-align:right;font-weight:700}
.progress-hero{margin-top:var(--space-5)}
.progress-hero .progress-track{height:14px}

/* C8 サイドバー全体進捗（デザインシステムv2） 2026-07-25拡大: ラベル文字・％表示・バー高さを
   一回り大きくし、他のサイドバー要素の拡大と揃える(鈴木さん指摘「小さくて見づらい」対応)。 */
.sidebar-overall{
  position:sticky;bottom:0;margin-top:auto;padding:.95em 1.1em 1.05em;
  background:#fff;border-top:1px solid var(--color-border);
}
.sidebar-overall-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.9rem;font-weight:700;color:var(--color-text-muted);margin-bottom:.5em;
}
.sidebar-overall-row #sidebarOverallLabel,.sidebar-overall-row #sidebarPracticeOverallLabel{
  color:var(--color-primary);font-variant-numeric:tabular-nums;font-size:1.05rem;
}
.sidebar-overall .progress-track{height:10px}
/* 2026-07-26 UI刷新(実装3): 学習編/実践編2本立て。2本目は上に区切り線+余白を足して
   視覚的なグループとして分離する(1本目=.sidebar-overall-group:first-childは区切り線なし)。 */
.sidebar-overall-group + .sidebar-overall-group{
  margin-top:.85em;padding-top:.85em;border-top:1px dashed var(--color-border);
}

/* C1 page-hero（デザインシステムv2） */
.page-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.07) 1.5px,transparent 0) 0 0/24px 24px,
    linear-gradient(100deg,rgba(11,27,58,.94) 0%,rgba(11,27,58,.62) 55%,rgba(18,41,92,.30) 100%),
    url("../img/hero-bg.jpg?v=i2") center/cover no-repeat,
    linear-gradient(155deg,var(--hero-navy-1) 0%,var(--hero-navy-2) 82%);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
  padding:var(--space-6);margin-bottom:var(--space-6);color:var(--hero-text);
}
.page-hero .hero-kicker{
  display:flex;align-items:center;gap:.6em;font-size:.72rem;font-weight:800;
  letter-spacing:.22em;color:var(--hero-kicker);text-transform:uppercase;margin-bottom:var(--space-3);
}
.page-hero .hero-kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--hero-kicker)}
.page-hero h1{margin:0;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.3;color:#fff}
.page-hero .hero-lead{font-size:1rem;line-height:1.75;color:var(--hero-text-muted);max-width:60ch;margin:var(--space-3) 0 0}
.page-hero .hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65em;margin-top:var(--space-4);
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--hero-text-faint);
}
.page-hero .hero-meta-dot{width:4px;height:4px;border-radius:50%;background:var(--hero-text-faint)}
.progress-hero-meta{display:flex;justify-content:space-between;margin-top:.5em;font-size:.85rem;color:var(--color-text-muted)}
.progress-hero-meta strong{color:var(--color-primary);font-size:1.1em}

/* ================= 「AI検索最適化の運用支援」バナー(2026-07-25 UI改善4) =================
   ホーム(カリキュラムセクション後)・各編ページ(レッスン一覧後)・レッスンページ(コンパクト版)の
   3箇所に出す共通CTAコンポーネント(build.py render_promo_banner()参照)。.page-heroと同じ
   「グラデ重ね＋背景画像＋ネイビーグラデのフォールバック」パターンを踏襲する。画像
   (aio-consulting-banner.jpg)は2026-07-25 Image2.0生成分だが、backgroundの複数レイヤーの
   仕様上、この画像レイヤーが万一読み込めなくても背面の単色ネイビーグラデがそのまま表示され、
   レイアウト・可読性は崩れない(=画像の有無に依存しない設計)。画像自体は右側に光る折れ線
   グラフの装飾があるため、左側(テキスト側)ほど不透明度を上げたグラデで重ね、右側の装飾を
   活かしつつ左のテキストは常に読める配色にしている。 */
.promo-banner{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(100deg,rgba(11,27,58,.95) 0%,rgba(11,27,58,.74) 44%,rgba(18,41,92,.28) 100%),
    url("../img/aio-consulting-banner.jpg?v=i2") center/cover no-repeat,
    linear-gradient(155deg,var(--hero-navy-1) 0%,var(--hero-navy-2) 82%);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
  padding:var(--space-6);margin:var(--space-6) 0;color:var(--hero-text);
}
.promo-banner-body{max-width:46ch;position:relative;z-index:1}
.promo-banner-kicker{
  display:flex;align-items:center;gap:.6em;font-size:.72rem;font-weight:800;
  letter-spacing:.18em;color:var(--hero-kicker);text-transform:uppercase;margin:0 0 var(--space-3);
}
.promo-banner-kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--hero-kicker)}
/* 2026-07-26 UI刷新(実装5・鈴木さん指示「タイトル1.3〜1.5倍・ボタンも拡大」):
   フル版タイトルclamp(1.25rem,2.6vw,1.6rem)→clamp(1.7rem,3.5vw,2.2rem)は下限1.36倍・上限1.375倍
   でレンジ全体が指示の1.3〜1.5倍に収まる。clamp()のままなので長文見出しになっても折返しで
   吸収され崩れない(固定幅にはしない)。 */
.promo-banner-title{margin:0 0 .5em;font-size:clamp(1.7rem,3.5vw,2.2rem);line-height:1.35;color:#fff}
.promo-banner-lead{margin:0 0 var(--space-4);font-size:.94rem;line-height:1.75;color:var(--hero-text-muted)}
.promo-banner-cta{background:#fff;color:var(--color-primary-dark);border-color:#fff}
/* 2026-07-26 追記修正: 上のfont-size/padding指定は、後方(下記.btn基本ルール)のfont-size:.92rem/
   padding:.75em 1.3emと詳細度(0,1,0)が同点のため、CSSカスケードの「後方勝ち」で無効化されて
   いた(ブラウザ実機のgetComputedStyleで実測して発覚)。要素型を1つ足して詳細度(0,1,1)を
   意図的に.btnより高くし、ソース順に依存せず確実に上書きされるようにする。 */
a.promo-banner-cta{font-size:1.05rem;padding:.95em 1.8em;min-height:52px}
.promo-banner-cta:hover{background:var(--hero-text-muted);border-color:var(--hero-text-muted)}

/* レッスンページ用コンパクト版: 460本全ページに出るため高さ・余白は抑えつつ、タイトルは
   フル版と同じ1.3倍程度の比率(1.05rem→1.4rem)で拡大する(見出しキッカーは
   build.py側でそもそもHTMLに出力しない=非表示のCSSを別途書く必要がない)。 */
.promo-banner--compact{padding:var(--space-4) var(--space-5);margin:var(--space-5) 0}
.promo-banner--compact .promo-banner-title{font-size:1.4rem;margin-bottom:.35em}
.promo-banner--compact .promo-banner-lead{font-size:.85rem;margin-bottom:var(--space-3);max-width:56ch}

@media (max-width:640px){
  .promo-banner-body{max-width:100%}
}

/* ================= バッジ ================= */
.badge{
  display:inline-flex;align-items:center;gap:.35em;font-size:.72rem;font-weight:800;letter-spacing:.02em;
  padding:.3em .7em;border-radius:var(--radius-pill);border:1px solid transparent;white-space:nowrap;
}
.badge svg{width:12px;height:12px;flex:none}
.badge-format-video_text{background:var(--color-secondary-light);color:var(--color-primary-dark);border-color:#cfe0f5}
.badge-format-text_only{background:#F0F2F5;color:var(--color-text-muted);border-color:var(--color-border)}
.badge-format-demo_video{background:#EDF3FC;color:var(--course-4);border-color:#d7e5f7}
.badge-format-exercise{background:var(--color-success-bg);color:var(--color-success);border-color:#cdeadb}

.badge-status-prep{background:#F0F2F5;color:var(--color-text-muted);border-color:var(--color-border)}
.badge-status-writing{background:var(--color-secondary-light);color:var(--color-primary-dark);border-color:#cfe0f5}
.badge-status-video_pending{background:#F0F2F5;color:var(--color-text-muted);border-color:var(--color-border)}
.badge-status-ready{background:var(--color-primary);color:#fff}
.badge-status-done{background:var(--color-success-bg);color:var(--color-success);border-color:#cdeadb}
.badge-status-text_published{background:var(--color-success-bg);color:var(--color-success);border-color:#cdeadb}

/* ================= カード ================= */
.card{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);transition:box-shadow .15s,transform .15s;
}
a.card:hover,.card.is-hoverable:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}

/* ================= アイキャッチ（編カラー＋レッスン番号＋種別アイコン） ================= */
.eyecatch{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;
  background:linear-gradient(135deg,var(--course-color,var(--color-primary)) 0%,var(--course-color-2,var(--color-accent)) 100%);
  display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;
}
.eyecatch .eyecatch-sub{font-size:.7rem;color:rgba(255,255,255,.75);margin-top:.3em;font-weight:700}
.eyecatch-icon{width:32px;height:32px;margin-bottom:.45em;opacity:.9}
.eyecatch-icon svg{width:100%;height:100%}
.eyecatch.is-sm .eyecatch-icon{width:22px;height:22px;margin-bottom:.3em;opacity:.7}

/* ================= 編ローマ数字インデックス（構造デバイス・2026-07-23） =================
   編I〜VIIは実際に学習順序を持つ7段階のシーケンスであるため、ローマ数字を単なる飾りではなく
   「この編が何番目か」を伝える情報要素として大きく扱う。数字だけOS標準のセリフ
   (--font-serif-index=Georgia/Times New Roman)を使い、サンセリフの本文・UIと意図的に対比させる
   （新規の外部フォント読み込みは無し。既存のblockquote引用符と同じ考え方の使い回し）。
   ホーム編カード(--md)・編別ハブヒーロー(--lg)・カリキュラム一覧ハブのグラデ帯上(--on-color)の
   3箇所で共有する1つの部品として実装し、置き場所ごとに数字サイズだけ変える。 */
.course-index{
  --ci-color:var(--course-color,var(--color-primary));
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;text-align:center;gap:.28em;
}
.course-index-label{
  font-size:.6rem;font-weight:800;letter-spacing:.16em;color:var(--ci-color);
  text-transform:uppercase;opacity:.88;
}
.course-index-num{
  font-family:var(--font-serif-index);font-weight:700;color:var(--ci-color);letter-spacing:.01em;
}
.course-index--md .course-index-num{font-size:2.1rem}
.course-index--lg .course-index-num{font-size:3.2rem}
.course-index--on-color .course-index-label{color:rgba(255,255,255,.82)}
.course-index--on-color .course-index-num{color:rgba(255,255,255,.97);font-size:2.5rem}
.eyecatch.is-sm .course-index--on-color .course-index-num{font-size:1.95rem}

/* レッスン一覧行の小さなアイキャッチ(編カラー丸背景＋レッスンIDのみのクリーンな表示)。
   2026-07-26 鈴木さん最終フィードバックで右上の種別アイコン/ツールロゴの小丸バッジ
   (.eyecatch-mini-icon/.eyecatch-mini-logo)を削除した。完了状態は行左の.lesson-done-dotで
   表す(このアイキャッチ自体には完了装飾を持たせない)。 */
.eyecatch-mini{flex-direction:column;gap:.05em}
.eyecatch-mini-id{font-size:.7rem}

/* ================= ボタン ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.75em 1.3em;border-radius:var(--radius-sm);font-weight:700;font-size:.92rem;
  border:1px solid transparent;cursor:pointer;min-height:44px;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-dark)}
.btn-outline{background:#fff;border-color:var(--color-primary);color:var(--color-primary)}
.btn-outline:hover{background:var(--color-secondary-light)}
.btn-ghost{background:transparent;border-color:var(--color-border);color:var(--color-text-muted)}
.btn-ghost:hover{background:var(--color-bg-section)}
.btn-success{background:var(--color-success);color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-block{width:100%}

/* ================= フッター ================= */
.site-footer{
  border-top:1px solid var(--color-border);padding:var(--space-6) var(--space-5);
  color:var(--color-text-faint);font-size:.82rem;text-align:center;
}
.site-footer a{color:var(--color-text-muted)}

/* ================= パンくず ================= */
.breadcrumb{font-size:.82rem;color:var(--color-text-faint);margin-bottom:var(--space-4)}
.breadcrumb a{color:var(--color-text-faint)}
.breadcrumb a:hover{color:var(--color-primary)}

/* ================= 404ページのマスコット(2026-07-22 ビジュアル実装第2弾) =================
   404は専用ページCSSを持たないため共通components.cssに置く。 */
.notfound-mascot{width:170px;height:auto;margin:0 auto var(--space-5);display:block}

/* ================= お知らせ(C9・デザインシステムv2 2026-07-24: 日付＋編カラーバッジ＋タイトル＋要約1行のリスト型) ================= */
.news-list{list-style:none;margin:0;padding:0}
.news-item{padding:.85em 0;border-bottom:1px solid var(--color-border)}
.news-item:last-child{border-bottom:none}
.news-item-top{display:flex;align-items:center;gap:.55em;flex-wrap:wrap}
.news-badge{
  display:inline-flex;align-items:center;font-size:.68rem;font-weight:800;color:#fff;letter-spacing:.02em;
  border-radius:var(--radius-pill);padding:.2em .7em;white-space:nowrap;
}
.news-date{font-size:.75rem;color:var(--color-text-faint);font-weight:700}
.news-pin{
  display:inline-block;font-size:.68rem;font-weight:800;color:var(--color-warning);
  background:var(--color-warning-bg);border-radius:var(--radius-pill);padding:.1em .6em;
}
.news-title{font-weight:700;color:var(--color-navy);margin:.3em 0 .1em;font-size:.96rem}
.news-summary{
  font-size:.85rem;color:var(--color-text-muted);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ================= 完了チェック ================= */
.complete-box{
  margin-top:var(--space-6);padding:var(--space-4);background:var(--color-bg-section);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;
}
.complete-box .status-text{font-size:.9rem;color:var(--color-text-muted);font-weight:700}
.complete-box .status-text.is-done{color:var(--color-success)}

/* ================= レッスン・アイキャッチ帯(旧・動画プレースホルダ) =================
   2026-07-24格上げ(brushup-design-spec_20260724.md Phase 1-3): 単なる「動画準備中」プレースホルダから、
   編カラーのグラデ帯＋レッスンID大表示＋セクション名＋形式アイコンを持つ「章ヘッダー」的なアイキャッチへ。
   プレースホルダ機能(スライド教材未整備の明示。2026-07-25悪魔の代弁者再監査 修正3で旧・動画由来の
   文言からスライド前提の誠実な文言へ変更済み・詳細はbuild.pyのVIDEO_PLACEHOLDER_NOTE参照)
   自体は.vnoteとしてそのまま維持する。per-lesson画像アセットは
   作らずテンプレ+CSSのみで表現するため、lessons.jsonのeyecatchフィールドは将来の個別差し込み用に温存する。
   背景はhome.cssの.heroと同じ「ドットグリッド＋グラデ」の技法を編カラーで再利用し、サイト全体で
   「ダーク/濃色の帯＝ブランドの顔」という一貫した視覚言語にする(本文・カードは引き続き白基調)。 */
.video-placeholder{
  position:relative;overflow:hidden; /* 隅のマスコット・地紋パターンのクリップ基準 */
  aspect-ratio:16/9;border-radius:var(--radius-lg);
  /* 背景は3層: ①ドットグリッド地紋 ②ネイビースクリム(rgba(11,27,58,…)=--hero-navy-1の実値。
     CSS変数は色関数の内側でRGB分解できないため、この1箇所だけ実値を直書きしている) ③編カラーのグラデ。
     ②のスクリムは--course-1〜7の中で最も明るい2色(--course-5 #3C86D6・--course-6 #4A90D9)でも
     白文字(小文字5.46:1/大判ID文字はAA-Large基準で6:1超)がAAを満たすよう計算した固定不透明度(.38)。
     編カラー自体は6割強の重みで残るため「編カラーのグラデ帯」という見た目は維持される。 */
  background:
    radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.14) 1.5px,transparent 0) 0 0/22px 22px,
    linear-gradient(rgba(11,27,58,.38),rgba(11,27,58,.38)),
    linear-gradient(135deg,var(--course-color,var(--color-primary)) 0%,var(--course-color-2,var(--color-accent)) 100%);
  border:1px solid rgba(18,35,59,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:var(--space-5);
  padding:1.1em 1.4em;text-align:center;
}
/* アイキャッチ帯の隅のマスコット(2026-07-22 ビジュアル実装第2弾)。小さく・中央のID/ラベルの
   可読性を邪魔しない位置(右下)に控えめな不透明度で配置する。全228レッスンで同一の
   小型ファイルを共有参照するため追加の通信コストは初回読み込み分のみ(以降はブラウザキャッシュ)。 */
.video-placeholder-mascot{
  position:absolute;right:14px;bottom:10px;width:52px;height:auto;opacity:.82;pointer-events:none;
}
@media (max-width:480px){.video-placeholder-mascot{width:36px;right:8px;bottom:8px}}

/* 形式アイコン(装飾・aria-hidden。同等のテキストラベルはページ上部のformat_badge()バッジが提示済み) */
.video-placeholder .vp-format-icon{width:26px;height:26px;color:#fff;opacity:.85;margin-bottom:.35em}
.video-placeholder .vp-format-icon svg{width:100%;height:100%}
/* セクション名(小さめのキッカー行)。長いセクション名でも帯を突き破らないよう2行でクランプする。
   color=.92は上記スクリム込みでAA(4.5:1)を満たす値として計算済み(単体の編カラーグラデには乗せない)。 */
.video-placeholder .vp-section{
  margin:0;font-size:.74rem;font-weight:800;letter-spacing:.05em;color:rgba(255,255,255,.92);
  max-width:88%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
/* レッスンID大表示。帯の主役。幅に応じてclampし、極端に長いIDでも折返し崩れしにくくする。 */
.video-placeholder .vp-id{
  margin:.18em 0 0;font-size:clamp(1.9rem,7vw,3.1rem);font-weight:800;color:#fff;line-height:1.05;letter-spacing:.01em;
}
.video-placeholder .vnote{font-size:.78rem;color:rgba(255,255,255,.92);margin-top:.5em}

/* 2026-07-24 レッスン動画埋め込み(.lesson-video-embed・TASK-160動画パイプライン導入分)は撤去した。
   鈴木さん判断: 合成音声の不自然さにより動画は廃止し、同じ場所にクリック送りのスライドビューアを
   埋め込む(スライドビューア本体のCSSはpages/lesson.css末尾「レッスン内スライドビューア」節に実装。
   経緯・旧実装の記録はsite/PORT_NOTES.md §8-9参照)。 */

/* ================= 前後レッスンナビ ================= */
.lesson-pager{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap}
.lesson-pager a{
  flex:1;min-width:140px;border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:.9em 1.1em;color:var(--color-text-muted);
}
.lesson-pager a:hover{border-color:var(--color-primary);background:var(--color-secondary-light);text-decoration:none}
.lesson-pager .pager-dir{font-size:.7rem;font-weight:800;color:var(--color-text-faint);letter-spacing:.06em}
.lesson-pager .pager-title{display:block;margin-top:.2em;font-weight:700;color:var(--color-navy);font-size:.92rem}
.lesson-pager .pager-next{text-align:right;margin-left:auto}

/* ================= セクション見出し ================= */
.section-title{
  font-size:.78rem;letter-spacing:.12em;color:var(--color-text-faint);font-weight:800;
  text-transform:uppercase;margin:var(--space-6) 0 var(--space-3);
}
.section-title:first-child{margin-top:0}

/* ================= ユーティリティ ================= */
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.muted{color:var(--color-text-muted)}
.faint{color:var(--color-text-faint);font-size:.85rem}
.tag-chip{
  display:inline-block;font-size:.72rem;color:var(--color-text-muted);background:var(--color-bg-section);
  border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:.2em .7em;
}

/* ================= 全文検索モーダル(T-1・2026-07-24追加) =================
   全ページ共通(render_page()が全ページに埋め込む)。依存ゼロの自前JS(assets/js/search.js)が
   #searchModalのhidden属性を付け外しするだけ(表示アニメーションはCSS transitionのみ)。
   モバイル(<640px)は全画面・640px以上は中央寄せのカード型パネルにする。 */
.search-modal{position:fixed;inset:0;z-index:200}
.search-modal[hidden]{display:none}
body.search-open{overflow:hidden}
.search-modal-backdrop{position:absolute;inset:0;background:rgba(11,27,58,.46)}
.search-modal-panel{
  position:relative;display:flex;flex-direction:column;height:100%;background:#fff;
  animation:searchModalIn .16s ease-out;
}
@keyframes searchModalIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (min-width:640px){
  .search-modal{padding:9vh var(--space-5) var(--space-5)}
  .search-modal-panel{
    height:auto;max-height:78vh;max-width:640px;margin:0 auto;border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card-hover);overflow:hidden;
  }
}
.search-modal-bar{
  display:flex;align-items:center;gap:.7em;flex:none;padding:var(--space-4) var(--space-4);
  border-bottom:1px solid var(--color-border);
}
.search-modal-bar-icon{width:20px;height:20px;flex:none;color:var(--color-text-faint);display:flex}
.search-modal-bar-icon svg{width:100%;height:100%}
.search-modal-input{
  flex:1;min-width:0;border:0;outline:0;font-size:1rem;font-family:inherit;color:var(--color-text);
  background:transparent;
}
.search-modal-input::placeholder{color:var(--color-text-faint)}
.search-modal-close{
  flex:none;width:36px;height:36px;border:0;background:var(--color-bg-section);border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-muted);
}
.search-modal-close:hover{color:var(--color-primary)}
.search-modal-close svg{width:16px;height:16px}
.search-modal-body{flex:1;min-height:0;overflow-y:auto;padding:var(--space-2) var(--space-4) var(--space-5)}
.search-modal-hint,.search-modal-empty{color:var(--color-text-faint);font-size:.88rem;padding:var(--space-4) var(--space-2)}
/* 検索結果の編別グループ化(2026-07-24 TASK-167 WP-C5)。.search-results-groupsが
   モーダル・/searchページ共通のコンテナ(旧<ul>から<div>へ変更・search.js側も対応済み)。
   グループ見出し左の縦線は編カラー(--course-N)をJSがインラインCSS変数で渡して色分けする
   (プロンプト集グループは--color-successで固定)。 */
.search-results-groups{display:flex;flex-direction:column;gap:var(--space-4)}
.search-result-group-heading{
  margin:0 0 .35em;padding:.15em .3em .15em .6em;font-size:.72rem;font-weight:800;
  letter-spacing:.02em;color:var(--color-text-muted);
  border-left:3px solid var(--search-group-accent,var(--color-border));
}
.search-results-list{list-style:none;margin:0;padding:0}
.search-result-item{border-bottom:1px solid var(--color-border)}
.search-result-item:last-child{border-bottom:none}
.search-result-link{display:block;padding:.85em .3em}
.search-result-link:hover,.search-result-link:focus,.search-result-item.is-active .search-result-link{
  background:var(--color-secondary-light);text-decoration:none;border-radius:var(--radius-sm);
}
.search-result-top{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;margin-bottom:.25em}
.search-result-type{
  display:inline-flex;align-items:center;font-size:.66rem;font-weight:800;letter-spacing:.03em;
  border-radius:var(--radius-pill);padding:.15em .6em;
}
.search-result-type--lesson{background:var(--color-secondary-light);color:var(--color-primary-dark)}
.search-result-type--prompt{background:var(--color-success-bg);color:var(--color-success)}
/* 2026-07-25「実践編」新設分: レッスン(青)・プロンプト(緑)と区別できる第3の色系統(暖色)。 */
.search-result-type--practice{background:var(--color-warning-bg);color:var(--color-warning)}
.search-result-course{
  display:inline-flex;align-items:center;font-size:.66rem;font-weight:800;color:#fff;
  border-radius:var(--radius-pill);padding:.15em .6em;white-space:nowrap;
}
.search-result-title{margin:0;font-weight:700;color:var(--color-navy);font-size:.94rem}
.search-result-excerpt{
  margin:.2em 0 0;color:var(--color-text-muted);font-size:.82rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}