/*
Theme Name: Studio Kohaku
Theme URI: https://studio-kohaku.jp/
Author: 山浦康介 / Studio Kohaku
Description: スタジオ・コハク公式サイト用カスタムテーマ。ダーク×琥珀のデザイン、Lenis+GSAP演出、リード獲得型ブログ対応。静的サイトからの移植版。各ページ固有CSSは各テンプレートのインライン<style>に保持し、ページ間のスタイル混線を防いでいます。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: kohaku
*/

/* =====================================================================
   共通ベース（Phase 1: 共通化リファクタ 2026-05-30）

   背景：旧運用では :root トークン・リセット・body・a などを全テンプレの
   インライン <style> に重複コピーしていたため、トークン値が9種類に
   ドリフトしていた（page-estimate のヘッダー崩れ＝.hd 基本 CSS の取りこぼし
   と同根）。共通ブロックをここに集約し、各テンプレからは段階的に削っていく。

   命名ドリフト対策：front-page は `--accent` を、サブページは `--a` を使う
   2系統が併存していたので、**両方を同値でエイリアス**して既存参照を壊さない。
   後続フェーズで `--accent` に統一していく予定。

   注意：各テンプレのインライン <style> が後勝ちになる構造（style.css は
   wp_head() で先に enqueue、インラインは <body> 直前まで来る）。そのため
   このブロックを足しても **既存テンプレの見た目は変わらない**。
   テンプレからインライン重複を削った時点で初めて common ベースが効く。
   ===================================================================== */

:root{
  /* 背景・パネル */
  --bg:#0f0b07;
  --bg2:#160f08;
  --panel:#1a130b;
  --panel2:#221809;

  /* テキスト */
  --ink:#f3ead9;
  --mute:#a8967a;
  --line:rgba(243,234,217,.14);

  /* アクセント（琥珀） — --accent / --a の両系統エイリアス */
  --accent:#e0a43b;
  --a:#e0a43b;
  --accent2:#c88a2e;
  --glow:#ffd27a;

  /* フォントファミリ */
  --min:'Shippori Mincho B1', serif;
  --jp:'Zen Kaku Gothic New', sans-serif;
  --en:'Fraunces', serif;
}

/* リセット（旧 *{margin:0;...} を共通化） */
*{margin:0;padding:0;box-sizing:border-box;}

/* base typography（旧 body / a を共通化）
   line-height は front-page=1.85 を採用（サブページも基本同値） */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--jp);
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* style.css の旧コメント（参考）：
   元々この style.css は意図的に最小限で、デザインCSSはテンプレの
   インライン <style> に持たせていた。Phase 1 で共通ベース部分のみ
   ここへ移行を開始。.hd / .ft 等のコンポーネントは parts/site-header-sub.php /
   site-footer-sub.php 側に自己完結化（estimate ヘッダー崩れ対策で先行集約済）。 */

/* ログイン時の管理バーと固定/スティッキーヘッダーの干渉だけ吸収 */
.admin-bar .hd{top:32px;}
@media screen and (max-width:782px){.admin-bar .hd{top:46px;}}

/* アクセシビリティ: モーション抑制（全ページ共通の保険） */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* 改行ユーティリティ（端末別に <br> を出し分ける／日本語の組版用）
   目安: スマホ≤767 / タブレット768〜1024 / PC≥1025
   素の<br>=全端末で改行（短い決め文句のみ）。長文は<br>を使わず自然折返しに任せる。 */
br.br-pc{display:inline;}
br.br-tab{display:none;}
br.br-sp{display:none;}
br.br-nosp{display:inline;}
@media (max-width:1024px){
  br.br-pc{display:none;}
  br.br-tab{display:inline;}
}
@media (max-width:767px){
  br.br-tab{display:none;}
  br.br-sp{display:inline;}
  br.br-nosp{display:none;}
}

/* === 確定ロゴ（SVGアウトライン版・点/ピリオド/オーブを焼き込み済み） === */
.hd__logo-img{height:38px;width:auto;max-width:none;display:block;}
.ft__logo-img{height:46px;width:auto;max-width:none;display:block;}
@media(max-width:880px){.hd__logo-img{height:32px;}}

/* =====================================================================
   ブログ図解コンポーネント（Phase 2: 共通化リファクタ 2026-05-30）

   記事本文（single.php の .prose 内）で繰り返し使う図解を共通クラス化。
   旧来は記事ごとに inline style で重複記述していた（記事213は6図解・
   inline 170箇所）。今後の記事は下記クラスの指定だけで同じ図解を再現できる。

   詳細度の注意：記事本文は .prose ラッパー内にあり、single.php に
   `.prose table` `.prose th,.prose td` `.prose thead th`
   `.prose tbody tr:nth-child(even)`（詳細度 0,1,1〜0,1,2）の汎用テーブルCSSが
   ある。これに勝つため図解クラスは必ず `.prose` 配下にスコープし、
   汎用テーブルの罫線・影・ヘッダー配色を明示的に上書き／リセットする。
   配色は本文カラム（明色カード前提）で可読性を確保する固定値。
   ===================================================================== */

/* --- 図解の外枠 --- */
.prose .sk-figure{margin:30px 0;}
.prose .sk-figure--card{padding:22px 20px;background:#fffdf6;border:1px solid #e7dcc4;border-radius:14px;}
.prose .sk-figure--scroll{overflow-x:auto;background:#fffdf6;border:1px solid #e7dcc4;border-radius:14px;padding:22px 20px;}
.prose .sk-figure__cap{font-weight:700;color:#2a1f10;font-size:15px;margin-bottom:14px;}
.prose .sk-figure__note{margin:12px 0 0;font-size:12px;color:#7a6a4e;line-height:1.6;opacity:1;}

/* --- 表：.prose table の汎用CSS（罫線/影/ヘッダー配色）を図解仕様へ上書き --- */
.prose .sk-table{width:100%;border-collapse:collapse;font-size:14px;background:#fffdf6;border:0;border-radius:12px;overflow:hidden;box-shadow:none;color:#2a1f10;}
.prose .sk-table caption{caption-side:top;text-align:left;font-weight:700;color:#2a1f10;font-size:15px;margin-bottom:14px;}
.prose .sk-table caption .lab{display:inline-block;vertical-align:middle;font-family:var(--en);font-weight:400;font-size:10.5px;letter-spacing:.12em;border:1px solid #c8851f;border-radius:999px;padding:3px 10px;color:#b9781a;margin-right:9px;}
.prose .sk-table th,.prose .sk-table td{padding:11px 14px;border:0;text-align:left;line-height:1.6;vertical-align:top;color:#2a1f10;}
.prose .sk-table thead th{padding:14px 14px;background:#b8821f;color:#fff;font-weight:700;}
.prose .sk-table tbody tr{border-top:1px solid #e6dcc6;}
.prose .sk-table tbody tr:nth-child(even){background:#faf6ec;}
.prose .sk-table td:first-child{font-weight:700;}
.prose .sk-table .nw{white-space:nowrap;}
.prose .sk-table .em{color:#b8821f;font-weight:700;}
.prose .sk-table .b{font-weight:700;}

/* --- ラベルpill（人の判断／AI支援 等） --- */
.prose .sk-tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;line-height:1.6;}
.prose .sk-tag--human{background:#e0a43b;color:#2a1f10;}
.prose .sk-tag--ai{background:#f0e4c8;color:#7a6a4e;}

/* --- 横帯（プロポーションバー）。各セグメントの flex:0 0 X% のみ inline で指定 --- */
.prose .sk-bar{display:flex;width:100%;border-radius:8px;overflow:hidden;font-weight:700;font-size:13px;line-height:1.4;}
.prose .sk-bar__seg{display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 6px;}
.prose .sk-bar__seg--strong{background:#b8821f;color:#fff;}
.prose .sk-bar__seg--mid{background:#e0a43b;color:#2a1f10;}
.prose .sk-bar__seg--weak{background:#d9cdb2;color:#2a1f10;padding:14px 4px;font-size:10px;}

/* --- ステップ（番号付き縦フロー） --- */
.prose .sk-steps{display:flex;flex-direction:column;gap:11px;}
.prose .sk-step{display:flex;align-items:flex-start;gap:12px;}
.prose .sk-step__num{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#b8821f;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;}
.prose .sk-step__body{flex:1;}
.prose .sk-step__body strong{color:#2a1f10;}
.prose .sk-step__desc{font-size:13px;color:#7a6a4e;}
