/* WEBMARKS AIO CAMP — base.css（AI CAMPより移植）
   リセット・CSS変数（配色・タイポ・余白トークン）
   方針: 白基調×WEBMARKSブルー系。background-clip:textによるグラデ文字は使用禁止（単色文字のみ）。 */

:root{
  /* --- 配色（サイト仕様v1 §7-1 準拠） --- */
  --color-bg:#FFFFFF;
  --color-bg-section:#F6F9FC;
  --color-primary:#1D5FA8;
  --color-primary-dark:#154880;
  --color-navy:#12233B;
  --color-secondary-light:#E7F0FB;
  --color-accent:#4A90D9;
  --color-success:#2E9E6B;
  --color-success-bg:#E4F5EC;
  --color-warning:#C77C1F;
  --color-warning-bg:#FBF0E1;
  --color-border:#E3E9F0;
  --color-text:#12233B;
  --color-text-muted:#4A5A70;
  --color-text-faint:#8496AC;

  /* 編ごとのアクセント（プライマリブルーの色相内・単色系統バリエーション） */
  --course-1:#2E6FB8;
  --course-2:#1D5FA8;
  --course-3:#17518F;
  --course-4:#123F72;
  --course-5:#3C86D6;
  --course-6:#4A90D9;
  --course-7:#0F2C4E;
  /* 編VIII(2026-07-24追加)。既存1〜7と同じ色相帯(H≈205〜212°)を保ちつつ、
     既存7色のV(明度)レンジ(course-4=0.45〜course-7=0.31)の間の空白域(V≈0.39)を
     とることで既存色と混同されない濃紺にした。白文字コントラスト比11.0:1でAA/AAA適合
     (計算式・既存7色との比較はPORT_NOTES.md §11参照)。 */
  --course-8:#0E3F63;
  /* 編IX(2026-07-25追加・世界のAIO：国別動向と実例)。既存8色(course-1〜8)のいずれとも
     重複しない濃紺#0E2A47を採用(build.py COURSE_HEX_BY_ORDERと同値・二重定義につき値を
     変える場合は両方直す)。 */
  --course-9:#0E2A47;

  /* --- ヒーロー帯専用トークン（2026-07-23 ビジュアル刷新） ---
     ダークはヒーロー帯・編ハブの小帯アクセントのみに限定して使う（本文・カード・レッスンは白基調を維持）。
     配色は #0B1B3A→#12295C のネイビーグラデ。文字色はWCAG AA検証済み(navy2=#12295Cを最悪値として
     white=14.02:1 / muted(#C3D3EE)=9.26:1 / faint(#8FA3C8)=5.50:1 / kicker(#8FC6FF)=7.81:1)。
     --color-primary(2.17:1)・--color-accent(4.20:1)は文字色としてはこの帯の上で使わない(コントラスト不足のため装飾/バー用途限定)。 */
  --hero-navy-1:#0B1B3A;
  --hero-navy-2:#12295C;
  --hero-text:#FFFFFF;
  --hero-text-muted:#C3D3EE;
  --hero-text-faint:#8FA3C8;
  --hero-kicker:#8FC6FF;

  /* --- タイポグラフィ ---
     UI・本文は引き続きシステムサンセリフのみ(外部フォント/CDN禁止)。編ローマ数字インデックス
     (.course-index-num)だけはOS標準のセリフ(Georgia/Times New Roman)を数字専用に使い、
     本文サンセリフと対比させる一点豪華の演出にする(これも外部フォントではなくOS同梱フォント)。 */
  --font-sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  --font-serif-index:Georgia,"Times New Roman",serif;

  /* --- 余白・角丸・シャドウ --- */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-pill:999px;
  /* 多層シャドウ(2026-07-23): 近距離のくっきりした影+遠距離の柔らかい影を重ね、
     単層シャドウより繊細な立体感を出す。.card全箇所へ波及するトークン更新のためマークアップ変更は不要。 */
  --shadow-card:0 1px 2px rgba(18,35,59,.05),0 1px 3px rgba(18,35,59,.05);
  --shadow-card-hover:0 6px 14px rgba(18,35,59,.07),0 18px 34px rgba(18,35,59,.11);
  --header-h:64px;
  /* サイドバー幅(2026-07-25拡大: 280px->305px・鈴木さん指摘「小さくて見づらい」対応の一環。
     文字サイズ・行間・paddingの拡大ぶんを吸収し、編タイトルの折返しが窮屈にならない余白を確保する。
     本文カラム(--content-max)は据え置きのため、圧迫は最小限。モバイルドロワー幅は
     components.cssのmin(84vw,320px)固定でこの変数を参照しないため無影響。) */
  --sidebar-w:305px;
  --rail-w:280px;
  --content-max:920px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-sans);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{padding-left:1.4em}
h1,h2,h3,h4{color:var(--color-navy);line-height:1.4;margin:0 0 .6em}
h1{font-size:1.9rem;font-weight:800}
h2{font-size:1.4rem;font-weight:800}
h3{font-size:1.15rem;font-weight:800;margin-top:1.6em}
h4{font-size:1rem;font-weight:700}
p{margin:0 0 1em;color:var(--color-text)}
strong{color:var(--color-navy);font-weight:700}
/* 引用=コールアウト化。左のカラーバー＋左肩に大きな引用符(タイポグラフィ文字・単色)を添えて
   「本文中の一言」ではなく「引用/コールアウト」であることを一目で判別できるようにする。 */
blockquote{
  position:relative;margin:1.3em 0;padding:1em 1.3em 1em 2.9em;background:var(--color-bg-section);
  border-left:4px solid var(--color-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--color-text-muted);font-size:.95em;
}
blockquote::before{
  content:"\201C";position:absolute;left:.7rem;top:.2rem;font-size:2.3rem;line-height:1;
  font-weight:800;color:var(--color-primary);opacity:.32;font-family:Georgia,"Times New Roman",serif;
}
blockquote p{margin:0 0 .5em}
blockquote p:last-child{margin-bottom:0}
code{background:var(--color-secondary-light);border-radius:5px;padding:.1em .4em;font-size:.9em;color:var(--color-primary-dark)}
hr{border:0;border-top:1px solid var(--color-border);margin:2em 0}
button{font-family:inherit}

/* 横に長くなりうる表現は、それ自体にoverflow-xを持たせて本文の横スクロールを防ぐ */
.scroll-x{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.92em}
th,td{padding:.6em .8em;border:1px solid var(--color-border);text-align:left;vertical-align:top}
th{background:var(--color-bg-section);color:var(--color-navy);font-weight:700}

/* 表の読みやすさ改善: カード化(外枠のみ)＋縞模様。本文中の表は必ず.table-scrollで包む運用(build.py側)。 */
.table-scroll{border:1px solid var(--color-border);border-radius:var(--radius-md);margin:1.3em 0}
.table-scroll table{margin:0}
.table-scroll th,.table-scroll td{border:0;border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border)}
.table-scroll th:last-child,.table-scroll td:last-child{border-right:0}
.table-scroll tr:last-child td{border-bottom:0}
.table-scroll tbody tr:nth-child(even) td{background:#FAFCFE}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--color-primary);color:#fff;
  padding:.6em 1em;border-radius:0 0 var(--radius-sm) 0;z-index:1000;
}
.skip-link:focus{left:0}

/* ================= キーボードフォーカス可視化(全ページ共通・2026-07-23) =================
   マウス操作時は既定のフォーカスリングを出さず(:focus-visible)、キーボード操作時のみブランドカラーの
   リングを表示する。ダークヒーロー帯の内側だけ白リングに切り替え、ネイビー背景でも視認性を確保する。 */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px;
}
.hero a:focus-visible,.hero button:focus-visible{outline-color:#fff}

/* ================= モーション制御(全ページ共通・2026-07-23) =================
   OS側で「視差効果を減らす」等が有効なユーザーには、サイト内のあらゆるアニメーション/トランジション/
   スムーススクロールを事実上無効化する。個々のコンポーネント側で重複定義する必要はない(このルール1つで
   ヒーローのフェードイン・カードホバー・スクロールリビールすべてに効く)。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* ================= スクロールリビール用ユーティリティ(motion.js が使用) =================
   既定は常に不透明度1(=完全表示)。motion.jsがビューポート外の要素にだけ.js-revealを付与してから
   observeするため、JSが読み込めない/実行されない環境でも本文は最初から通常表示のまま(安全側)。 */
.js-reveal{opacity:0;transition:opacity .5s ease}
.js-reveal.is-revealed{opacity:1}
.js-reveal--rise{transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js-reveal--rise.is-revealed{transform:translateY(0)}