/* curriculum.css — カリキュラム一覧・編別ページ */

/* ================= 編ハブヘッダのマスコットアクセント(2026-07-22 ビジュアル実装第2弾) =================
   小さく・見出しの可読性を邪魔しない位置(右側)に配置。極小幅では見出しの折り返しを優先し非表示にする。 */
.hub-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.hub-head-text{flex:1;min-width:220px}
.hub-head-mascot{flex:none;width:60px;height:auto;opacity:.92}
@media (max-width:480px){.hub-head-mascot{display:none}}

/* 編別ハブのヘッダ帯(2026-07-24リッチ化: brushup-design-spec_20260724.md Phase 1-4)。
   ホームの.heroと同じ検証済みダークネイビー(--hero-navy-1/2・--hero-text*)を土台にし、
   右下に編カラーの編アイコンを大型透かしで重ねて「編カラー活用の大型ビジュアル帯」にする。
   本文の文字色は必ずhero-text系トークン(base.cssでAA検証済み: white 14.02:1 / muted 9.26:1 /
   faint 5.50:1)を使い、編カラー(--course-1〜7は明度差が大きい)の濃淡に関わらずコントラストを
   保証する。編カラー自体は「編番号プレート(大判文字＝AA-Large 3:1で可)」と「編アイコン透かし
   (装飾・aria-hidden・z-index:-1で必ず文字の背面)」の2箇所に限定して使う設計。 */
.course-hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;gap:var(--space-5);align-items:flex-start;flex-wrap:wrap;
  padding:var(--space-6);
  background:
    radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.10) 1.5px,transparent 0) 0 0/24px 24px,
    linear-gradient(155deg,var(--hero-navy-1) 0%,var(--hero-navy-2) 88%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);margin-bottom:var(--space-6);
  color:var(--hero-text);
}
/* 編アイコンの大型透かし(装飾のみ・aria-hidden・COURSE_ICONSをbuild.py側で埋め込み)。
   右下に大きく淡く配置し、z-index:-1で本文より必ず背面に置く(重なっても可読性を損なわない)。
   色は編カラーではなく固定の白(既存の.eyecatch-icon=白icon on 編カラー背景と同じ考え方を反転させた版)。
   --course-7(#0F2C4E)は背景のhero-navyとほぼ同じ暗さのため、編カラーで塗ると編VIIだけ透かしが
   ほぼ消える(2026-07-24 Browser目視QAで発覚・是正)。「編カラー活用」は104px大判の編番号プレート
   (下記.course-index)が明確に担うため、透かし側は8編共通で確実に見える白系に統一する。 */
.course-hero-icon-bg{
  position:absolute;right:-20px;bottom:-24px;z-index:-1;width:172px;height:172px;
  color:#fff;opacity:.14;pointer-events:none;
}
.course-hero-icon-bg svg{width:100%;height:100%}
@media (max-width:640px){.course-hero-icon-bg{width:120px;height:120px;right:-14px;bottom:-16px}}

/* 編ローマ数字インデックス(--lg)。編カラーのグラデプレート＋白文字。3.2remの大判文字はWCAG上の
   Large Text(3:1)基準が適用され、--course-1〜7全色で白文字が問題なくクリアする(小さい本文には流用しない)。 */
.course-hero .course-index{
  width:104px;height:104px;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--course-color,var(--color-primary)),var(--course-color-2,var(--color-accent)));
  border:1px solid rgba(255,255,255,.25);box-shadow:0 10px 24px rgba(4,10,26,.35);
}
.course-hero .course-index-num{color:#fff}
.course-hero .course-index-label{color:rgba(255,255,255,.85)}

.course-hero-body{flex:1;min-width:200px}
.course-hero-body h1{color:var(--hero-text)}
.course-hero-body .muted{color:var(--hero-text-muted)}
.course-hero-body .faint{color:var(--hero-text-faint)}
.course-hero-body .progress-label{color:var(--hero-text-faint)}
.course-hero-body .progress-track{background:rgba(255,255,255,.18)}
.course-hero-meta{margin-top:var(--space-3)}

.hub-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-4)}
@media (min-width:640px){.hub-grid{grid-template-columns:repeat(2,1fr)}}

.section-block{margin-bottom:var(--space-6)}
.section-block h3{
  display:flex;align-items:center;gap:.6em;padding-bottom:.4em;border-bottom:2px solid var(--color-border);
}
.lesson-row-list{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}
.lesson-row{
  display:flex;align-items:center;gap:var(--space-3);padding:.85em 1em;
}
.lesson-row .lesson-row-num{
  flex:none;width:40px;height:40px;border-radius:var(--radius-sm);color:#fff;font-weight:800;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;
  background:linear-gradient(135deg,var(--course-color,var(--color-primary)),var(--course-color-2,var(--color-accent)));
}
.lesson-row .lesson-row-body{flex:1;min-width:0}
.lesson-row .lesson-row-title{font-weight:700;color:var(--color-navy);font-size:.94rem}
.lesson-row .lesson-row-goal{font-size:.8rem;color:var(--color-text-muted);margin-top:.15em}
.lesson-row .lesson-row-badges{flex:none;display:flex;gap:.4em;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:220px}
.lesson-row .lesson-done-dot{width:8px;height:8px;border-radius:50%;background:var(--color-border);flex:none}
.lesson-row.is-done .lesson-done-dot{background:var(--color-success)}

/* ================= 学習フロー簡易図解(編ハブ・編別ページ共通) ================= */
.flow-diagram{margin:1em 0 var(--space-6)}
.flow-diagram-scroll{padding-bottom:.3em}
.flow-diagram-scroll svg{display:block}
.flow-diagram-caption{font-size:.82rem;color:var(--color-text-faint);margin:.5em 0 0}
/* カリキュラム一覧の9編サマリー(render_overview_flow_svg・2026-07-25拡大)専用。
   base.cssの汎用ルール img,svg{max-width:100%} のままだと、拡大後の実サイズ(横約2500px)が
   横幅の狭いコンテンツ列に収まるようCSSで縮小され、結局「文字が小さいまま」に戻ってしまう
   (鈴木さん指摘の再発を防ぐための根本原因対応)。ここだけmax-widthの制約を外し、SVGを
   常に実寸(width/height属性どおりの大きな文字)で描画し、収まりきらない幅は
   .scroll-x(overflow-x:auto)でスクロールして読む(禁止事項「縮小で潰さない」を満たす)。 */
.flow-diagram-scroll--lg svg{max-width:none}

/* Image2.0編バナー（2026-07-24 ・左スクリムで白文字AA維持）
   編別ページの.course-heroヘッダ帯専用(build_course_pageが描画・本タスクのスコープ外)。
   2026-07-25 Wave2残タスクでhub-cardは.course-card-visual(下記)へ移行したため、
   ここは.course-hero単独のセレクタに整理した(旧: .eyecatch[data-course]と併記)。 */
.course-hero[data-course="I"]{background:linear-gradient(100deg,rgba(11,27,58,.93) 0%,rgba(11,27,58,.6) 52%,rgba(11,27,58,.22) 100%),url("../../img/course-I-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-hero[data-course="II"]{background:linear-gradient(100deg,rgba(11,27,58,.93) 0%,rgba(11,27,58,.6) 52%,rgba(11,27,58,.22) 100%),url("../../img/course-II-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-hero[data-course="III"]{background:linear-gradient(100deg,rgba(11,27,58,.93) 0%,rgba(11,27,58,.6) 52%,rgba(11,27,58,.22) 100%),url("../../img/course-III-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-hero[data-course="IV"]{background:linear-gradient(100deg,rgba(11,27,58,.93) 0%,rgba(11,27,58,.6) 52%,rgba(11,27,58,.22) 100%),url("../../img/course-IV-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-hero[data-course="V"]{background:linear-gradient(100deg,rgba(11,27,58,.93) 0%,rgba(11,27,58,.6) 52%,rgba(11,27,58,.22) 100%),url("../../img/course-V-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-hero[data-course="VI"]{background:linear-gradient(100deg,rgba(11,27,58,.93) 0%,rgba(11,27,58,.6) 52%,rgba(11,27,58,.22) 100%),url("../../img/course-VI-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-hero[data-course="VII"]{background:linear-gradient(100deg,rgba(11,27,58,.93) 0%,rgba(11,27,58,.6) 52%,rgba(11,27,58,.22) 100%),url("../../img/course-VII-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-hero[data-course="VIII"]{background:linear-gradient(100deg,rgba(11,27,58,.93) 0%,rgba(11,27,58,.6) 52%,rgba(11,27,58,.22) 100%),url("../../img/course-VIII-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
/* 編IX(2026-07-25追加・世界のAIO：国別動向と実例)。画像は別工程で生成中のため、
   ビルド後にcourse-IX-banner.jpgが不在でもCSSとしては参照だけで安全にビルドが通る
   (未生成の間はurl()が404になり、linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))の
   単色フォールバックのみ表示される)。 */
.course-hero[data-course="IX"]{background:linear-gradient(100deg,rgba(11,27,58,.93) 0%,rgba(11,27,58,.6) 52%,rgba(11,27,58,.22) 100%),url("../../img/course-IX-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}

/* ================= 編バナー帯(.course-card-visual・カリキュラム一覧の編カード用) =================
   2026-07-25 Wave2残タスク: hub-card上部に高さ132px(モバイルは90px)のビジュアル帯を敷く。
   ホームのcourse-cardと同一クラス名・同一値で実装し(components.cssは変更対象外のため
   ページ別CSSへ複製するが、見た目の差異は作らない)、外側(.course-card-visual)の
   overflow:hiddenで「上側のみ角丸」とホバーズームをクリップ、内側(.course-card-visual-img・
   inset:0)だけをホバー時にscale(1.03)する。バナー上に置く文字は左下の編ローマ数字チップのみ。 */
.course-card-visual{position:relative;height:132px;overflow:hidden;border-radius:var(--radius-md) var(--radius-md) 0 0}
.course-card-visual-img{
  position:absolute;inset:0;background-color:var(--hero-navy-2);
  transition:transform .3s ease;
}
.hub-card:hover .course-card-visual-img{transform:scale(1.03)}
@media (max-width:640px){.course-card-visual{height:90px}}

.course-card-visual-index{
  position:absolute;left:.7em;bottom:.6em;z-index:1;
  display:inline-flex;align-items:baseline;gap:.3em;
  background:rgba(255,255,255,.88);border-radius:var(--radius-pill);
  padding:.2em .7em;line-height:1;box-shadow:0 2px 8px rgba(4,10,26,.22);
}
.course-card-visual-index-num{font-family:var(--font-serif-index);font-weight:700;font-size:.92rem;color:var(--hero-navy-2)}
.course-card-visual-index-label{font-size:.6rem;font-weight:800;letter-spacing:.08em;color:var(--color-text-muted)}

.course-card-visual-img[data-course="I"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-I-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="II"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-II-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="III"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-III-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="IV"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-IV-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="V"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-V-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="VI"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-VI-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="VII"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-VII-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="VIII"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-VIII-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="IX"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-IX-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}

/* ================= セクション見出し=英字キッカー+日本語見出し(2026-07-24 Wave2・home.cssと同一仕様) =================
   カリキュラム一覧ページ自身の見出し(「8編の学習フロー」「編一覧」)にも適用し、ホームと視覚言語を揃える。 */
.section-heading{margin:var(--space-7) 0 var(--space-4)}
.section-heading:first-of-type{margin-top:0}
.section-heading-kicker{
  display:flex;align-items:center;gap:.55em;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  color:var(--color-primary);text-transform:uppercase;margin:0 0 .35em;
}
.section-heading-kicker::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--color-primary)}
.section-heading-title{margin:0;font-size:1.3rem;font-weight:800;color:var(--color-navy);line-height:1.35}