/* ============================================================
   久留米黒棒本舗 コーポレート ／ デザイントークン
   このファイルがサイトの「トンマナの正」。全ページで最初に読み込む。

   ■ 3層構造
     1. 原色      --kb-c-*    ブランドの実際の値。**色の直値はここにしか書かない**
     2. 役割      --kb-*      コンポーネントが参照するのはこの層だけ
     3. 文脈      .kb-on-*    地色が変わる面で 2 を上書きする。部品側は変更不要

   ■ 拡張のしかた
     ・新しい面（例：紺地のセクション）を足す → .kb-on-navy を1つ書くだけ。
       既存の .kb-round や .kb-rule を触る必要はない
     ・色を調整する → 原色を1箇所直す。参照している全箇所に反映される
     ・部品を足す → 役割トークンだけを使って書く。直値を書いたらレビューで落とす
   ============================================================ */

:root{

  /* ---------- 1. 原色 ---------- */

  /* 墨（文字） */
  --kb-c-ink:          #2b2b2b;   /* 見出し・強い文字 */
  --kb-c-ink-soft:     #57534e;   /* 本文 */
  --kb-c-ink-mute:     #8f8a82;   /* 日付・注記・英字ラベル */

  /* 罫線（地色ごとに濃さが要る） */
  --kb-c-rule:         #e3e0d8;   /* 白地の上 */
  --kb-c-rule-washi:   #cfcabd;   /* 和紙・漆喰地の上 */
  --kb-c-rule-strong:  #b9b2a2;   /* 見出し下線など、意図的に強い線 */

  /* ブランドカラー */
  --kb-c-gold:         #c5a059;
  --kb-c-brown:        #8c6239;   /* リンク・ホバー */
  --kb-c-brown-deep:   #483732;   /* 丸ボタンの地 */
  --kb-c-kuro:         #0d0d0d;

  /* 地色 */
  --kb-c-white:        #ffffff;
  --kb-c-paper:        #fafaf7;   /* ごく淡い面 */
  --kb-c-ground-top:   #e9e7e0;   /* ページ地のグラデ上端（モック原本） */
  --kb-c-ground-mid:   #fafaf7;   /* 同 中間 */
  --kb-c-washi:        #e8e2d6;   /* コラム／お知らせの面 */
  --kb-c-washi-edge:   #d3cab7;   /* 同上のヘアライン */
  --kb-c-plaster:      #f4f2ec;   /* ブランドページの漆喰地フォールバック */
  --kb-c-cocoa:        #5c463a;   /* Gesund の地 */
  --kb-c-cocoa-2:      #6b5344;
  --kb-c-cocoa-3:      #57422f;
  --kb-c-kokuto:       #241a12;   /* 黒糖（ダーク面の代替案） */

  /* 状態色（バッジ等） */
  --kb-c-alert:        #b3402f;   /* 休業 */
  --kb-c-leaf:         #8fae74;   /* Gesund */
  --kb-c-slate:        #6d6d68;   /* お知らせ */

  /* ---------- 2. 役割 ---------- */

  --kb-text:           var(--kb-c-ink);
  --kb-text-soft:      var(--kb-c-ink-soft);
  --kb-text-mute:      var(--kb-c-ink-mute);
  --kb-link:           var(--kb-c-brown);
  --kb-link-hover:     var(--kb-c-gold);

  --kb-rule:           var(--kb-c-rule);
  --kb-rule-strong:    var(--kb-c-rule-strong);
  --kb-chip-border:    rgba(43,43,43,.28);   /* 枠線バッジ */

  --kb-surface:        var(--kb-c-white);
  --kb-surface-soft:   var(--kb-c-paper);

  --kb-round-bg:       var(--kb-c-brown-deep);  /* 丸ボタン */
  --kb-round-fg:       var(--kb-c-white);

  /* ---------- 書体 ---------- */

  --kb-font-jp:        'Shippori Mincho','Noto Serif JP',serif;
  --kb-font-en:        'Cinzel',serif;

  /* ---------- 字間（このサイトの記号） ---------- */

  --kb-ls-tight:       .04em;
  --kb-ls-body:        .06em;
  --kb-ls-wide:        .1em;
  --kb-ls-title:       .16em;
  --kb-ls-eyebrow:     .4em;   /* Column / News などの英字 */

  /* ---------- 行間 ---------- */

  --kb-lh-title:       1.7;
  --kb-lh-body:        2.2;
  --kb-lh-loose:       2.5;

  /* ---------- レイアウト ---------- */

  --kb-page-max:       1300px;                    /* 本文系の基準幅（カンプ実測） */
  --kb-gutter:         clamp(1rem,5.5vw,80px);    /* 本文系の左右余白（カンプ実測） */
  --kb-sec-y:          clamp(3.5rem,8vw,7rem);    /* セクション上下 */
  --kb-gap:            clamp(1.5rem,4vw,3rem);    /* 要素間 */

  /* ---------- 装飾 ---------- */

  --kb-radius:         2px;
  --kb-ease:           .3s ease;
  --kb-ease-slow:      .7s ease;
}

/* ---------- 3. 文脈（面ごとの上書き）----------
   役割トークンは、面を持つ側が自分で上書きする。
   例）ブランドテーマ  kurobo-theme-<brand>.css の .kb-theme-*
       明るい面を持つフッター .kb-site-footer（暗いページでも既定へリセット）
   ここに汎用の .kb-on-* は置かない。
   ★文脈は入れ子にすると子孫が勝つ。面を持つ要素の側で宣言すること。 */

/* ============================================================
   共通コンポーネント
   ここに置くものの条件：2ページ以上で使う ／ 役割トークンだけで書ける
   ============================================================ */

/* 丸ボタン（記事送り・もっと見る・カード内CTA で共用） */
.kb-round{
  flex:none;
  width:clamp(3rem,4.4vw,3.6rem); height:clamp(3rem,4.4vw,3.6rem);
  border-radius:50%;
  background:var(--kb-round-bg); color:var(--kb-round-fg);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem; text-decoration:none;
  transition:opacity var(--kb-ease);
}
.kb-round:hover{ opacity:.78; }

/* ラベル＋丸ボタン */
.kb-more{
  display:flex; align-items:center; justify-content:flex-end;
  gap:1rem; margin-top:clamp(1.5rem,3vw,2.25rem);
}
.kb-more__label{ font-size:.72rem; letter-spacing:var(--kb-ls-wide); color:var(--kb-text-soft); }

/* 定義リスト表（店舗情報・採用要項・会社概要 で共用）

   同じ見た目を2つのマークアップに当てる。宣言は1か所にまとめること。
     table … Elementor 本文に手書きされた表（採用要項・会社概要）
     dl    … 店舗エンティティの出力 [kurobo_store] / kurobo_store_info()
   .kb-rtable は table 版の旧名。保存済みの本文が使っているため互換で残す。 */
.kb-dl,
.kb-rtable{
  width:100%; border-collapse:collapse; margin:0; font-family:var(--kb-font-jp);
}
.kb-dl .kb-info__row{ display:flex; }

.kb-dl th, .kb-rtable th,
.kb-dl td, .kb-rtable td,
.kb-dl dt, .kb-dl dd{
  padding:1.1rem .2rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--kb-rule); font-weight:400; line-height:2.1;
}
.kb-dl tr:first-child th, .kb-rtable tr:first-child th,
.kb-dl tr:first-child td, .kb-rtable tr:first-child td,
.kb-dl .kb-info__row:first-child dt,
.kb-dl .kb-info__row:first-child dd{ border-top:1px solid var(--kb-rule); }

.kb-dl th, .kb-rtable th,
.kb-dl dt{
  width:9.5em; flex:0 0 9.5em;
  font-size:.8rem; letter-spacing:var(--kb-ls-wide);
  color:var(--kb-text-mute); white-space:nowrap;
}
.kb-dl td, .kb-rtable td,
.kb-dl dd{
  flex:1 1 auto; min-width:0; margin:0;
  font-size:.86rem; letter-spacing:var(--kb-ls-tight); color:var(--kb-text-soft);
}

@media (max-width:600px){
  .kb-dl, .kb-rtable,
  .kb-dl tbody, .kb-rtable tbody,
  .kb-dl tr, .kb-rtable tr,
  .kb-dl th, .kb-rtable th,
  .kb-dl td, .kb-rtable td,
  .kb-dl .kb-info__row,
  .kb-dl dt, .kb-dl dd{ display:block; width:auto; }
  .kb-dl th, .kb-rtable th,
  .kb-dl dt{ border-bottom:0; padding-bottom:.2rem; white-space:normal; }
  .kb-dl td, .kb-rtable td,
  .kb-dl dd{ padding-top:.2rem; }
  .kb-dl tr:first-child td, .kb-rtable tr:first-child td,
  .kb-dl .kb-info__row:first-child dd{ border-top:0; }
}
}