/* =========================================================
   section-theme.css  v20260821（TASK M4 → M6）
   セクション背景を5分野に分け、明るい分野だけ白系にする。

   ■ 戻し方
     index.html の <link ... section-theme.css> を1行消すだけで、
     追加前の見た目に完全に戻る（style.css の .section / .section.soft は変更していない）。
     index.html 側の分野クラスと区切りブロックは残るが、CSSが無ければ何も描画しない。

   ■ 分野（画面に出す名前）
     和工電気科とは   #eef3f9 : #ai-value-message #pr-visual          ← 白系（M6で追加）
     免許とAI時代     #0a0e29 : #license-first #license-vs-certificate #ai-license #ai-change-ranking
     学びと実習       #071b27 : #learn #license #practice #videos
     実績と進路       #eef3f9 : #achievements #reasons #career-results ← 白系（M4）
     学校生活とメッセージ #050a19 : #school-life #message

   ■ 明るい分野の色は下の「白系トークン」1か所で決まる。
     .field--results と .field--intro の両方が同じトークンを読むので、
     色を変えるときはトークンだけを直せばよい（片方が取り残されない）。
     コントラスト比は #eef3f9 に対する実測値。
   ========================================================= */

/* ---------------------------------------------------------
   0) 白系トークン（明るい分野の色はここだけで決まる）
   --------------------------------------------------------- */
.field--results,
.field--intro,
.field-divider--results,
.field-divider--intro {
  --lf-bg: #eef3f9;             /* 地の色。純白は使わない */
  --lf-head: #0b1830;           /* 見出し   15.85:1 */
  --lf-text: #2b3d58;           /* 本文      9.85:1 */
  --lf-eyebrow: #0b6f92;        /* eyebrow   5.08:1 */
  --lf-link: #0b5f80;           /* リンク    6.35:1 */
  --lf-accent: #c46a00;         /* 大きい数字のみ 3.48:1（小さい文字には使わない） */
  --lf-accent-strong: #8f4f00;  /* 小さいオレンジ文字はこちら（AA） */
  --lf-card: #ffffff;           /* カードの地 */
  --lf-line: rgba(11, 24, 48, 0.14);
  --lf-shadow: 0 10px 26px rgba(11, 24, 48, 0.09);
}

/* ---------------------------------------------------------
   1) 分野ごとの背景
   style.css の .section / .section.soft と同じ詳細度で、後勝ちで上書きする
   #ai-value-message は .section を持たないため、2つ並べて書く
   --------------------------------------------------------- */
.section.field--intro,
.ai-value-visual-section.field--intro {
  background: var(--lf-bg);
}

.section.field--license {
  background: #0a0e29;
}

.section.field--learning {
  background: #071b27;
}

.section.field--results {
  background: var(--lf-bg);
}

.section.field--closing {
  background: #050a19;
}

/* 「和工電気科とは」の背景に敷かれた薄いシアンの方眼は、
   白地では見えないので濃色側へ振り直す（style.css の ::before はそのまま） */
.ai-value-visual-section.field--intro::before {
  background-image:
    linear-gradient(rgba(11, 24, 48, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 24, 48, 0.05) 1px, transparent 1px);
}

/* ---------------------------------------------------------
   2) 分野の区切り（装飾。線とチップは flex で並べるので重ならない）
   --------------------------------------------------------- */
.field-divider {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  padding: 30px clamp(18px, 4vw, 32px) 0;
}

.field-divider::before,
.field-divider::after {
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  content: "";
}

/* 分野名は data-field-label から描画する。
   こうすると <link> を外したとき、区切りブロックは高さ0で何も描画されない
   （HTMLにテキストを直接書くと、CSSを外したときに文字だけが残ってしまう） */
.field-divider-label::before {
  content: attr(data-field-label);
}

.field-divider-label {
  flex: 0 0 auto;
  padding: 6px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

/* 暗い分野の区切り */
.field-divider--license {
  background: #0a0e29;
}

.field-divider--learning {
  background: #071b27;
}

.field-divider--closing {
  background: #050a19;
}

.field-divider--license::before,
.field-divider--license::after,
.field-divider--learning::before,
.field-divider--learning::after,
.field-divider--closing::before,
.field-divider--closing::after {
  background: linear-gradient(90deg, transparent, rgba(43, 216, 255, 0.5), transparent);
}

.field-divider--license .field-divider-label,
.field-divider--learning .field-divider-label,
.field-divider--closing .field-divider-label {
  border-color: rgba(43, 216, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
  color: #ff9d2e;
}

/* 明るい分野（和工電気科とは／実績と進路）の区切り */
.field-divider--results,
.field-divider--intro {
  background: var(--lf-bg);
}

.field-divider--results::before,
.field-divider--results::after,
.field-divider--intro::before,
.field-divider--intro::after {
  background: linear-gradient(90deg, transparent, rgba(11, 24, 48, 0.3), transparent);
}

.field-divider--results .field-divider-label,
.field-divider--intro .field-divider-label {
  border-color: rgba(11, 24, 48, 0.22);
  background: #ffffff;
  color: var(--lf-accent-strong);
}

@media (max-width: 720px) {
  .field-divider {
    gap: 8px;
    padding-top: 24px;
  }

  .field-divider-label {
    padding: 5px 14px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
}

/* =========================================================
   3) 明るい分野に共通の色（両分野で同じ指定を1か所にまとめる）
   タグ名の一括上書きはせず、実際に使われているクラスに当てる
   ========================================================= */

/* --- 見出し・強調 --- */
.field--results .section-head h2,
.field--results .achievement-copy h3,
.field--results .success-head h3,
.field--results .success-subhead h4,
.field--results .success-feature-body h4,
.field--results .info-card h3,
.field--results .career-card h3,
.field--results .career-highlight h3,
.field--results .career-highlight-grid strong,
.field--results .related-list strong,
.field--intro .section-head h2,
.field--intro .ai-value-visual-head h2 {
  color: var(--lf-head);
}

/* 見出し下のアンダーライン（既定はシアン） */
.field--results .section-head h2::after,
.field--intro .section-head h2::after {
  background: linear-gradient(90deg, #0b6f92, rgba(11, 111, 146, 0));
}

/* --- 本文 --- */
.field--results .section-head p,
.field--results .story-lede,
.field--results .achievement-copy p,
.field--results .stats-dashboard-note,
.field--results .success-head p,
.field--results .success-feature-body p:not(.tag),
.field--results .info-card p,
.field--results .career-card p,
.field--results .career-card li,
.field--results .career-highlight span,
.field--results .career-highlight-grid span,
.field--results .achievement-image figcaption,
.field--results .success-photo-card figcaption,
.field--results .related-list,
.field--intro .section-head p,
.field--intro .ai-value-visual-head > p:last-child,
.field--intro .ai-value-visual-card figcaption,
.field--intro .pr-visual-note {
  color: var(--lf-text);
}

/* 注記（既定は白の半透明。詳細度を上げて確実に当てる） */
.field--results .section-head .privacy-photo-note,
.field--results .success-head .privacy-photo-note {
  color: var(--lf-text);
}

/* --- eyebrow
   本文色の指定（.field--results .section-head p 等）より詳細度を上げる --- */
.field--results .section-head .eyebrow,
.field--results .success-head .eyebrow,
.field--results .eyebrow,
.field--intro .section-head .eyebrow,
.field--intro .ai-value-visual-head .eyebrow,
.field--intro .eyebrow {
  color: var(--lf-eyebrow);
}

/* --- リンク。ボタンは対象外 --- */
.field--results a:not(.btn),
.field--intro a:not(.btn) {
  color: var(--lf-link);
}

/* --- カード類：白地・淡い枠・淡い影 --- */
.field--results .stat-cell,
.field--results .achievement-copy,
.field--results .achievement-image,
.field--results .info-card,
.field--results .career-card,
.field--results .career-highlight-grid article,
.field--results .success-photo-card,
.field--results .success-feature-card,
.field--intro .ai-value-visual-card,
.field--intro .pr-visual-card {
  border-color: var(--lf-line);
  background: var(--lf-card);
  box-shadow: var(--lf-shadow);
}

/* =========================================================
   4) 「実績と進路」だけで使うクラス
   ========================================================= */

/* ギャラリーの外枠は、カードとの差が出るよう少しだけ沈める */
.field--results .success-gallery {
  border-color: rgba(11, 24, 48, 0.12);
  background: #f7fafd;
  box-shadow: 0 10px 26px rgba(11, 24, 48, 0.07);
}

/* --- 数値カード（構造・文言は変更しない。色だけ） --- */
.field--results .stat-cell::before {
  background: linear-gradient(180deg, #0b6f92, rgba(11, 111, 146, 0.12));
}

.field--results .stat-cell.stat-denken {
  border-color: rgba(196, 106, 0, 0.42);
}

.field--results .stat-cell.stat-denken::before {
  background: linear-gradient(180deg, #c46a00, rgba(196, 106, 0, 0.12));
}

.field--results .stat-label,
.field--results .stat-note {
  color: var(--lf-text);
}

.field--results .stat-unit {
  color: var(--lf-head);
}

/* 数字は clamp(2rem〜) の大きい文字なので、オレンジは #c46a00 のまま使える */
.field--results .stat-number {
  color: var(--lf-eyebrow);
  text-shadow: none;
}

.field--results .stat-cell.stat-denken .stat-number {
  color: var(--lf-accent);
  text-shadow: none;
}

/* --- タグ・関連資格チップ --- */
.field--results .tag {
  background: rgba(11, 95, 128, 0.1);
  color: var(--lf-link);
}

.field--results .related-list span {
  border-color: var(--lf-line);
  background: rgba(11, 24, 48, 0.05);
  color: var(--lf-link);
}

.field--results .related-list strong {
  border-color: var(--lf-line);
  background: rgba(11, 24, 48, 0.05);
}

/* --- 箇条書きの点（既定はシアン＋発光） --- */
.field--results .career-card li::before {
  background: var(--lf-eyebrow);
  box-shadow: none;
}

/* --- オレンジ系の強調ブロック（白地向けに濃く） --- */
.field--results .accent-card {
  border-color: rgba(143, 79, 0, 0.3);
  background: linear-gradient(145deg, rgba(196, 106, 0, 0.1), #ffffff);
}

.field--results .career-highlight {
  border-color: rgba(143, 79, 0, 0.32);
  background: linear-gradient(150deg, rgba(196, 106, 0, 0.1), #ffffff);
}

.field--results .career-highlight-grid article.career-star {
  border-color: rgba(196, 106, 0, 0.55);
  box-shadow: 0 10px 26px rgba(11, 24, 48, 0.09);
}

/* 小さいオレンジ文字は #8f4f00（AA）まで濃くする
   バッジは span のため、.career-highlight-grid span より詳細度を上げる */
.field--results .career-highlight-grid .career-star-badge,
.field--results .career-star-badge {
  border-color: rgba(143, 79, 0, 0.45);
  background: rgba(196, 106, 0, 0.12);
  color: var(--lf-accent-strong);
  text-shadow: none;
}

.field--results .career-star-num {
  color: var(--lf-accent-strong);
  text-shadow: none;
}

/* =========================================================
   5) 「和工電気科とは」だけで使うクラス（M6）
   ========================================================= */

/* PRビジュアルの画像は、白地に合わせて影を浅くする */
.field--intro .pr-visual-link img {
  box-shadow: 0 12px 30px rgba(11, 24, 48, 0.14);
}

/* --- ボタン ---
   .btn-secondary は既定が color:#ffe2bd（淡いクリーム）で、白地では読めない。
   .btn-primary はシアンの地に濃紺文字なのでそのまま使い、白地で沈まないよう枠と影だけ足す。
   ※「実績と進路」には .btn が1つも無いので、この指定は向こうに影響しない */
.field--intro .btn-secondary {
  border-color: rgba(143, 79, 0, 0.45);
  background: rgba(196, 106, 0, 0.12);
  color: var(--lf-accent-strong);
}

.field--intro .btn-primary {
  border-color: rgba(11, 95, 128, 0.35);
  box-shadow: 0 10px 26px rgba(11, 24, 48, 0.12);
}

/* デンキAIの誘導ボタンは濃紺グラデの地。白地では文字を白にする */
.field--intro .denki-ai-inline-btn {
  border-color: rgba(11, 95, 128, 0.55);
  box-shadow: 0 10px 26px rgba(11, 24, 48, 0.16);
  color: #ffffff;
}

/* 既定の hover はシアンの発光で、白地では見えない */
.field--intro .btn:hover {
  box-shadow: 0 14px 34px rgba(11, 24, 48, 0.16);
}