/* ブランドの色と寸法
 *
 * 色は先方支給の logo.svg（キャラクター）から実際に抽出したもの。
 * 推測で決めた色は入れていない。
 *
 * ★方針（2026-10-09 の打ち合わせ・10-13 の確認で確定）
 *  - 全体はシック寄り、白地ベース
 *  - 部屋の雰囲気に合わせる
 *  - 黄緑をアクセントに使い、キャラクターが置かれても浮かないようにする
 *  - 直営8室（作り込み＋デザイン②）はキャラクターを使う
 *  - オーナー物件4室（デザイン①）はキャラクターを使わず、別テイストにする
 */

:root {
  /* ---- キャラクターから抽出した色 ---- */
  --brand-lime:        #89c122; /* 明るい黄緑。アクセントの主役 */
  --brand-green:       #138a55; /* 緑 */
  --brand-green-deep:  #006335; /* 深い緑。文字やボタンに使える濃さ */
  --brand-green-mid:   #379339;
  --brand-yellow:      #fff200; /* 花の黄 */
  --brand-yellow-pale: #f3f196;
  --brand-blue:        #4476b9; /* 花の中心の青 */
  --brand-blue-pale:   #8294c6;

  /* ---- 407号室の実際の色（写真から抽出・2026-10-13）----
   * ★先方は「シック寄り・白地ベース」と言っていたが、部屋の実物は
   *   ネイビーの梁 ＋ OSB合板のオレンジ ＋ 白 という配色だった。
   *   「部屋の雰囲気に合わせる」なら、黄緑を面で敷くとぶつかる。
   *   → 白地を基調にネイビーを効かせ、黄緑はキャラクターの周りだけに留める
   */
  --room-navy:   #1b2a4a; /* 天井を横切る梁の濃紺 */
  --room-amber:  #c08b48; /* OSB合板・夜の照明のあたたかい色 */

  /* ---- 画面の基本色（白地ベース） ---- */
  --bg:          #ffffff;
  --bg-subtle:   #f7f8f5; /* 区切りの面。緑に寄せたごく薄いグレー */
  --line:        #e3e6e0;
  --ink:         #1c2420; /* 本文。真っ黒にせず緑寄りの黒で上品に */
  --ink-muted:   #5f6b63;

  /* ---- 役割別 ---- */
  --accent:      var(--brand-lime);
  --accent-ink:  var(--brand-green-deep); /* 黄緑の上に白文字は読めないので、文字は深緑 */
  --price:       var(--brand-green-deep);
  --sold-out:    #9aa39d;

  /* ---- 寸法（iPad Pro 第6世代 11インチ／iPadOS 26.7.1）----
   * 画面は 2388×1668px、CSS上の幅は 834pt。
   * 据え置きの端末を立って／座って触るので、スマホより大きめに取る。
   */
  --tap-min:     56px;  /* 指で押す要素の最小の高さ。44pxは手に持つ前提の値なので足りない */
  --font-body:   18px;
  --font-price:  22px;
  --font-title:  28px;
  --radius:      12px;
  --gap:         20px;
  --page-max:    834px;
}

/* ============================================================
   宿泊客側の書体と色（2026-10-13・参考サイトの実測から）
   ============================================================
   ★書体はゴシックに統一した。明朝をやめたのは好みではなく仕様。
     Hiragino Mincho ProN / Yu Mincho はハングルを持っていない。
     契約の「将来 韓国語・中国語を追加できるように」を満たせない。
     ゴシックなら ja / ko / zh-Hant すべて端末内蔵で骨格の揃ったものが使える。
   ★数字だけ欧文に分けるのは、値札の組み方（数字を大きく・単位を小さく・
     数字だけ字間を解除）を効かせるため。 */
:root {
  --f-ja:  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo",
           "PingFang TC", "Yu Gothic", system-ui, sans-serif;
  --f-num: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* 大きな英字。デザインごとに差し替える */
  --f-disp: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --disp-weight: 800;
  --disp-tracking: .04em;

  /* 地 */
  --paper:     #FAF9F5;   /* 紙の面。補足・受付番号のプレート */
  --plate:     #F2F3EF;   /* 写真が無いときの版面 */
  --plate-ink: #C8CEC2;   /* その上に敷く薄い英字 */

  /* 墨。#1c2420 より締める */
  --ink:       #14171A;
  --ink-mute:  #6B7269;
  --ink-faint: #9AA39D;

  /* 罫は3段だけ。誌面はここで決まる */
  --rule:      #DADED4;   /* 1px の基本 */
  --rule-soft: #E6E9E2;   /* カードの中 */

  /* ★差し色は1色だけ。参考サイトも朱赤1色だった。
     こちらはブランドの黄緑を使うが、白地では 2.3:1 しかないので
     面にだけ使い、文字には --accent-ink を使う */
  --accent:     #89C122;
  --accent-ink: #5E8A14;
  --alert:      #B4432C;  /* 進めないときだけ。赤は他で使わない */
}

/* ★デザインA（オーナー物件4室）。静かに振る。
   セリフ系の大きな英字＋温かい紙＋枠線だけの札で、Bと別ブランドに見せる
   ★キャラクターを使わないので、黄緑をアクセントにする理由がない（直営と見分けがつくように）
   ⚠ 以前はこの選択子が2か所にあり、前の方の --accent（青）/--accent-ink（白）は
     後ろのアンバーで上書きされて効いていなかった。生きていた値だけをここに1つにまとめた */
[data-design="simple_a"] {
  --price:      var(--ink);
  --f-disp: Didot, "Bodoni 72", "Times New Roman", serif;
  --disp-weight: 400;
  --disp-tracking: .10em;
  --accent:     #B0813F;   /* 室内のOSB合板のアンバー */
  --accent-ink: #8A6124;
  --paper:      #F6F4EF;
}