/* =====================
   キーワードテーマ層（2026-07-30新設）
   -----------------------------------------------------------
   tools/internal/project-sheet.htmlのKEYWORD_TOKENSを、css/themes.cssの
   4テーマクラスと同じ完成した形のCSSクラスに書き出したもの。
   キーワード1語＝1クラスで、主要項目（色・フォント・角丸カード・余白）は
   KEYWORD_TOKENSの値をそのまま使い、KEYWORD_TOKENSがまだ持っていない
   構造的な項目（文字色・枠線・影・地図背景・角丸のバッジ/フレーム/写真違い）は
   nearestPreset()で選んだ一番近い既存テーマ（css/themes.css）から借りている
   （これらの項目は「キーワードらしさ」への寄与が薄い地味な項目のため）。

   使い方はcss/themes.cssの4テーマと同じ：
     <body class="keyword-yawarakai">      → ページ全体がやわらかい基調
     <section class="menu keyword-pop">    → そのセクションだけポップ基調

   ⚠️の付いたクラスは、色や余白がkeyword-design-matrix.mdに一致する既存値がなく
   新規に用意した値、またはkeyword-design-matrix.md自体に記述がなかった値を含む
   （詳細はtools/internal/project-sheet.htmlのKEYWORD_TOKENSのnoteを参照）。
   yuaさんの目視で違和感があればここを直接調整してよい。
===================== */

/* 質感・装飾の軸 */

/* ⚠️ 色は新規（低彩度パステル系）。角丸・フォントはtheme-pop、構造項目はtheme-earthを借用。
   2026-07-30、かわいいと色が完全一致していた指摘を受け、より彩度を落として差別化 */
.keyword-yawarakai {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(221, 179, 184, 0.25);
  --color-primary:      #DDB3B8;
  --color-secondary:    #E8D5B8;
  --color-text-primary: #3a3027;
  --color-bg-section:   #FFFBF7;
  --color-bg-page:      #FFFBF7;
  --color-text-body:    #3a3027;
  --color-box-shadow:   rgba(58, 48, 39, 0.15);
  --color-border:       rgba(58, 48, 39, 0.2);
  --color-text-dark:    #3a3027;
  --color-text-muted:   #7a6c5a;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #ddd4c6;

  --space-section: 48px;

  --radius-card:  12px;
  --radius-badge: 50px; /* yuaさんの指摘（2026-07-30）でボタンをピル型に近づけた。他のテンプレートより丸め */
  --radius-frame: 8px;
  --radius-photo: 24px; /* yuaさんの指摘（2026-07-30）で写真の角をより丸めた */

  --font-jp: 'M PLUS Rounded 1c', sans-serif;
  --font-en: 'Poppins', sans-serif;
}

/* シャープ・シンプル・モダン・かっこいいは色・フォント・角丸・余白が全軸一致のため共通クラス化 */
.keyword-sharp, .keyword-simple-modern, .keyword-kakkoii {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(44, 44, 44, 0.20);
  --color-primary:      #2C2C2C;
  --color-secondary:    #C5A880;
  --color-text-primary: #1E293B;
  --color-bg-section:   #FBFBFB;
  --color-bg-page:      #FBFBFB;
  --color-text-body:    #1E293B;
  --color-box-shadow:   rgba(30, 41, 59, 0.15);
  --color-border:       rgba(30, 41, 59, 0.2);
  --color-text-dark:    #1E293B;
  --color-text-muted:   #64748B;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #E2E8F0;

  --space-section: 64px;

  --radius-card:  4px;
  --radius-badge: 4px;
  --radius-frame: 2px;
  --radius-photo: 4px;

  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif;
}

/* ⚠️ 余白72pxは新規（matrixの「最大」に対応する既存値がないため）。フォント・角丸はtheme-monoを借用。
   2026-07-30、シャープ/シンプル・モダンと色が完全一致していた指摘を受け、より深みのある独自色に変更。
   2026-08-26、自社HPのfavicon試作（clients/自社HP/company-brand-color-variants.html参照）で
   黒＋金が「ライザップっぽい」「金がいやらしい」と指摘され、グレイッシュブラウン地＋白文字の組み合わせに変更。
   金アクセントも撤回し、同系統の淡いトーンに差し替えた */
.keyword-koukyuukan {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(87, 80, 74, 0.20);
  --color-primary:      #57504A;
  --color-secondary:    #A6957F;
  --color-text-primary: #1E293B;
  --color-bg-section:   #FBFBFB;
  --color-bg-page:      #FBFBFB;
  --color-text-body:    #1E293B;
  --color-box-shadow:   rgba(30, 41, 59, 0.15);
  --color-border:       rgba(30, 41, 59, 0.2);
  --color-text-dark:    #1E293B;
  --color-text-muted:   #64748B;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #E2E8F0;

  --space-section: 72px;

  --radius-card:  4px;
  --radius-badge: 4px;
  --radius-frame: 2px;
  --radius-photo: 4px;

  --font-jp: 'Shippori Mincho', serif;
  --font-en: 'Playfair Display', serif;
}

/* theme-popと全軸一致 */
.keyword-pop {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(37, 99, 235, 0.20);
  --color-primary:      #2563EB;
  --color-secondary:    #F59E0B;
  --color-text-primary: #1F2937;
  --color-bg-section:   #FFFFFF;
  --color-bg-page:      #FFFFFF;
  --color-text-body:    #1F2937;
  --color-box-shadow:   rgba(31, 41, 55, 0.15);
  --color-border:       rgba(31, 41, 55, 0.2);
  --color-text-dark:    #1F2937;
  --color-text-muted:   #6B7280;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #E5E7EB;

  --space-section: 48px;

  --radius-card:  24px;
  --radius-badge: 50px;
  --radius-frame: 16px;
  --radius-photo: 24px;

  --font-jp: 'M PLUS Rounded 1c', sans-serif;
  --font-en: 'Poppins', sans-serif;
}

/* ⚠️ 色は新規（低彩度スレート系）。フォントはゴシック（高級感系との差別化）。
   2026-07-30、theme-blueをそのまま流用していたら「信頼・ビジネス」寄りの青になり
   フォーマルのイメージと違うという指摘を受け、彩度を落とした落ち着いた色に変更 */
.keyword-formal {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(59, 63, 71, 0.20);
  --color-primary:      #3B3F47;
  --color-secondary:    #8A97A6;
  --color-text-primary: #1E293B;
  --color-bg-section:   #F8FAFC;
  --color-bg-page:      #F8FAFC;
  --color-text-body:    #1E293B;
  --color-box-shadow:   rgba(30, 41, 59, 0.15);
  --color-border:       rgba(30, 41, 59, 0.2);
  --color-text-dark:    #1E293B;
  --color-text-muted:   #64748B;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #E2E8F0;

  --space-section: 64px;

  --radius-card:  4px;
  --radius-badge: 4px;
  --radius-frame: 2px;
  --radius-photo: 4px;

  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif;
}

/* 印象・感情の軸 */

/* ⚠️ 色は新規（高彩度ポップな暖色）。角丸・フォントはtheme-popから借用。
   2026-07-30、やわらかいと色が完全一致していた指摘を受け、より彩度・明るさを上げて「かわいい」らしい元気さを出す方向に変更 */
.keyword-kawaii {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(240, 102, 138, 0.25);
  --color-primary:      #F0668A;
  --color-secondary:    #FFC145;
  --color-text-primary: #3a3027;
  --color-bg-section:   #FFFBF7;
  --color-bg-page:      #FFFBF7;
  --color-text-body:    #3a3027;
  --color-box-shadow:   rgba(58, 48, 39, 0.15);
  --color-border:       rgba(58, 48, 39, 0.2);
  --color-text-dark:    #3a3027;
  --color-text-muted:   #7a6c5a;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #ddd4c6;

  --space-section: 48px;

  --radius-card:  12px;
  --radius-badge: 8px;
  --radius-frame: 8px;
  --radius-photo: 12px;

  --font-jp: 'M PLUS Rounded 1c', sans-serif;
  --font-en: 'Poppins', sans-serif;
}

/* ⚠️ 形・余白はkeyword-design-matrix.md未定義のためtheme-earthの値を仮置き。色はtheme-earthの暖色系、フォントはtheme-blueのゴシックを借用 */
.keyword-shitashimiyasui {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(74, 93, 78, 0.25);
  --color-primary:      #4A5D4E;
  --color-secondary:    #D97706;
  --color-text-primary: #3a3027;
  --color-bg-section:   #FAF7F2;
  --color-bg-page:      #FAF7F2;
  --color-text-body:    #3a3027;
  --color-box-shadow:   rgba(58, 48, 39, 0.15);
  --color-border:       rgba(58, 48, 39, 0.2);
  --color-text-dark:    #3a3027;
  --color-text-muted:   #7a6c5a;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #ddd4c6;

  --space-section: 48px;

  --radius-card:  12px;
  --radius-badge: 8px;
  --radius-frame: 8px;
  --radius-photo: 12px;

  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif;
}

/* theme-blueと色・フォントが直接一致。形はmatrix未定義のためtheme-monoの値を仮置き（余白は「標準」寄りでtheme-monoに近い） */
.keyword-shinraikan {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(30, 58, 138, 0.35);
  --color-primary:      #1E3A8A;
  --color-secondary:    #0284C7;
  --color-text-primary: #222222;
  --color-bg-section:   #F8FAFC;
  --color-bg-page:      #F8FAFC;
  --color-text-body:    #222222;
  --color-box-shadow:   rgba(0, 0, 0, 0.12);
  --color-border:       rgba(0, 0, 0, 0.18);
  --color-text-dark:    #222222;
  --color-text-muted:   #777777;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #e6e6e6;

  --space-section: 48px;

  --radius-card:  4px;
  --radius-badge: 4px;
  --radius-frame: 4px;
  --radius-photo: 4px;

  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif;
}

/* 時間・様式の軸 */

/* ⚠️ 色（紺・臙脂・茶）・余白（詰まった印象）は新規。フォント・角丸はtheme-monoを借用 */
.keyword-dentou-classic {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(107, 44, 62, 0.35);
  --color-primary:      #6B2C3E;
  --color-secondary:    #8B5A2B;
  --color-text-primary: #222222;
  --color-bg-section:   #FBFBFB;
  --color-bg-page:      #FBFBFB;
  --color-text-body:    #222222;
  --color-box-shadow:   rgba(0, 0, 0, 0.12);
  --color-border:       rgba(0, 0, 0, 0.18);
  --color-text-dark:    #222222;
  --color-text-muted:   #777777;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #e6e6e6;

  --space-section: 36px;

  --radius-card:  4px;
  --radius-badge: 4px;
  --radius-frame: 4px;
  --radius-photo: 4px;

  --font-jp: 'Shippori Mincho', serif;
  --font-en: 'Playfair Display', serif;
}

/* theme-earthと色が直接一致。フォント・余白は未定義のため同テーマの値を仮置き */
.keyword-shizen-natural {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(74, 93, 78, 0.25);
  --color-primary:      #4A5D4E;
  --color-secondary:    #D97706;
  --color-text-primary: #3a3027;
  --color-bg-section:   #FAF7F2;
  --color-bg-page:      #FAF7F2;
  --color-text-body:    #3a3027;
  --color-box-shadow:   rgba(58, 48, 39, 0.15);
  --color-border:       rgba(58, 48, 39, 0.2);
  --color-text-dark:    #3a3027;
  --color-text-muted:   #7a6c5a;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #ddd4c6;

  --space-section: 48px;

  --radius-card:  12px;
  --radius-badge: 8px;
  --radius-frame: 8px;
  --radius-photo: 12px;

  --font-jp: '游明朝', 'YuMincho', serif;
  --font-en: 'Cormorant Garamond', serif;
}