/* ============================================================================
 * design-tokens.css — stella 全画面共通の上質配色トークン（機能E・一元管理）
 * 全管理画面・LIFF画面はこの1ファイルを <link> して配色/フォントを参照する。
 * 出典: サロン受付画面_モックv2_上質配色.html / 売上分析画面_モック.html。
 * 彩度を落とした上質ボタニカル系。見出し・氏名=Shippori Mincho / 本文=Zen Kaku /
 * 数値=Inter。既存画面の旧トークン名は後方互換エイリアスで自動的に本トークンへ集約する。
 * ==========================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Shippori+Mincho:wght@600;700&family=Inter:wght@500;700;800&display=swap');

:root{
  /* === 上質配色トークン（正） === */
  --olive:#8A9078; --deep:#5A6656; --gold:#B8A575; --ink:#4A4A44; --sub:#9C9B8F;
  --line:#EDEAE1; --bg:#FBFAF6; --panel:#FFFFFF; --soft:#F5F3EC; --soft2:#EFF1E9;
  --warn:#BC8A8E; --pink:#BE9AAB; --pinkbg:#F7F2F5; --blue:#96A2B2; --bluebg:#F1F4F7;

  /* === フォント === */
  --font-body:'Zen Kaku Gothic New',"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --font-serif:'Shippori Mincho',serif;   /* 見出し・お客様名 */
  --font-num:'Inter',sans-serif;          /* 数値 */
  --serif:var(--font-serif);

  /* === 旧トークン名の後方互換エイリアス（原色寄り→上質トークンへ集約） === */
  --rose:var(--olive); --rose-deep:var(--deep); --green:var(--deep);
  --red:var(--warn); --gold1:var(--gold); --gold2:var(--gold);
  --off:var(--soft2); --sat:var(--bluebg); --sun:var(--pinkbg);
}

/* E: 見出し・お客様名は明朝体（Shippori Mincho）。各画面が固有の font-family を
 * 指定している要素はそちらが優先されるため、未指定の主要見出しに広く適用される。
 * ブランドワードマーク(.brand)や氏名用ユーティリティ(.mincho)にも適用。 */
h1, h2, h3.mincho, .brand, .mincho, .customer-name { font-family: var(--font-serif); }

/* プレースホルダー（入力欄の仮文字）は全画面共通で薄いグレーに。
 * 入力済みの文字と見分けがつくよう、本文色より明確に薄くする（2026-07-16 オーナー指示）。 */
::placeholder { color: #C9C6BA; opacity: 1; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #C9C6BA; }

/* ============================================================================
 * レイアウト一斉修正・第2段（2026-07-29）: 型ごとの共通ユーティリティ
 * ❶ .twrap … テーブルの横あふれ対策（横スクロールラッパ）。中のtableにはmin-widthを併用
 * ❷ .frow … flex行の入力潰れ対策（子にmin-width:0。inputの固有最小幅で潰れる/あふれるのを防ぐ）
 * ==========================================================================*/
.twrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.frow { display: flex; gap: 8px; align-items: center; }
.frow > * { flex: 1 1 auto; min-width: 0; }