/*
 * 基盤レイヤー: デザイントークン + 最小リセット
 *
 * Bootstrap 廃止に伴い、全ページが前提とするトークン定義と
 * Reboot 相当の最小リセットをこのファイルに集約する。
 * 値は移行前の見た目を維持するため Bootstrap 5.3 の既定値に合わせている。
 *
 * ブレークポイント規約（メディアクエリでは CSS 変数を使えないため直値で記述する）:
 *   sm: 576px / md: 768px / lg: 992px / xl: 1200px
 *
 * 段階は モバイル(<768) / タブレット(768〜1199) / PC(>=1200) の3段構成。
 * 複数ペイン常設などデスクトップ専用レイアウトへの切り替えは、タブレット幅では
 * ペインが狭くなりすぎるため原則 md ではなく lg・xl を境界にする。ただし軽量な
 * ペインは、常設しても本体に十分な幅が残ることを実測で確かめたうえで md から
 * 常設してよい（例: チャットのルーム一覧）。
 * 詳細: docs/web/responsive-rules.md
 */

:root {
  --mobile-footer-height: 52px;
  --mobile-footer-main-gap: 0px;
  --mobile-footer-action-gap: 16px;
  --mobile-safe-area-offset: env(safe-area-inset-bottom);
  /* 画面下端の占有量。PWAバナー表示中はフッターナビより上に浮く分だけ占有量が増えるため、
     実測値である--pwa-banner-card-gapとのmax()で大きい方を採用する。バナー非表示時は
     card-gapが0pxへフォールバックし--mobile-footer-heightが選ばれる。
     同意バナー表示中は、common.cssの:root:has(#analytics-consent-banner)がこの式自体を
     var(--pwa-banner-card-gap, 0px)へ上書きする（同意バナーは画面下端基準で浮きフッターナビを
     覆って隠すため、覆われて占有していないフッターナビの高さをmax()の対象から外すため） */
  --mobile-footer-occupied-height: max(var(--mobile-footer-height), var(--pwa-banner-card-gap, 0px));
  --pwa-banner-padding-block: 0.875rem;
  --pwa-banner-padding-inline: 1.25rem;
  --pwa-banner-content-gap: 0.75rem;
  /* PWAインストールバナー（.pwa-banner）・同意バナー（#analytics-consent-banner）は排他表示で、
     表示中の一方がglobal/pwa_install.js・global/analytics_consent.jsのいずれかを通じて実行時に
     --pwa-banner-offset・--pwa-banner-card-gapをdocumentElementへ設定する。下端固定要素・main の
     フッター用余白にバナー分を畳み込む。未設定時はフォールバック0pxが効くため、バナーを描画しない
     ページ・環境には影響しない。
     個々のコンポーネント側で二重に加算しないこと。ただしchat.cssの.chat-main-contentのように、
     この--mobile-footer-*-offsetを使わず独自の高さ計算式へ--pwa-banner-offset /
     --pwa-banner-card-gapを直接組み込むケースは、そもそも本トークンを経由しないため対象外
     （二重加算にはならない） */
  --mobile-footer-main-offset: calc(
    var(--mobile-footer-occupied-height) + var(--mobile-footer-main-gap) + var(--mobile-safe-area-offset) +
      var(--pwa-banner-offset, 0px)
  );
  --mobile-footer-action-offset: calc(
    var(--mobile-footer-occupied-height) + var(--mobile-footer-action-gap) + var(--mobile-safe-area-offset) +
      var(--pwa-banner-offset, 0px)
  );

  /* ── デザイントークン（LP由来の白基調） ── */

  /* フォントファミリー */
  --font-family-base:
    "Luxucom Emoji", "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  /* スペーシングスケール（ユーティリティクラスの基準値） */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;

  /* 共通ヘッダー（#header）右側のアイコン単体リンク（通知ベル・ヘルプ・ユーザー、
     common.cssの.header-notification-icon等）の隣接間隔。--space-*スケールに該当値が
     無いためセマンティックトークンとして定義する（room.cssの--room-section-gapと同じ
     考え方）。common.css側は各アイコンのmargin（左右均等、この値の半分ずつ）でこの
     実効間隔を作る。値はチャットヘッダー（chat.cssの--chat-header-icon-gap）と同じ
     22pxにし、各アイコンの実寸（モバイル: 通知約22px・ヘルプ24px・ユーザー28px、
     PC: 28px・28px・36px）に足すと中心間隔が常に44px以上になるようにしている
     （アイコン単体の44×44pxタップ領域が隣と重ならない条件）。トークン自体は
     チャット側と別のため、片方だけ変更しても他方に影響しない */
  --header-icon-gap: 22px;

  /* 共通ヘッダー右側のアイコン単体リンク（通知ベル・ヘルプ）の<i>のサイズ。
     768px以上はBootstrap由来の.fs-3と同じ値（レスポンシブ計算式・1200px以上の
     固定値）を維持し、モバイルのみ24px固定に引き上げる。モバイルは1rem=14px
     （common.css）のため.fs-3の計算式のままだと24pxに届かず、Luxucomの
     タップ領域基準アイコンサイズ（チャットヘッダーと同じ24px）を満たさない */
  --header-icon-size: 24px;

  /* 共通ヘッダー（#header、common.css）の高さ。ヘッダー高さに依存する箇所
     （scroll-padding-top・main のpadding-top・トースト/更新インジケーターの
     top位置・チャットのルーム一覧top・エラーページのヘッダー等）はすべてこの
     変数を参照し、px値を直書きしない（値がずれるとヘッダーと本文が重なる／
     隙間が空く）。モバイル値をここに置き、768px以上は下記のmedia上書きで
     置き換える。モバイルは44×44pxのタップ領域確保に伴い40pxから拡大した */
  --header-height: 48px;

  /* アクセントカラー（ゴールドブラウン）。--color-accentはアプリアイコン（resources/brand/lc-icon.svg）
     の金#B08A57と同値にし、塗りの金がSVGとCSSで2値に割れないようにしている */
  --color-accent: #b08a57;
  --color-accent-light: #c9a75a;
  --color-accent-muted: #9d7743;
  --color-accent-pale: #f0dfc0;
  --color-accent-pale-soft: #f6ecd9;

  /* 主操作の塗り。アプリアイコン（lc-icon.svg）は白地に暖色チャコールの文字と金の下線という
     配色で、それに合わせて主操作は暗色、アクセントの金は差し色に位置づける役割は維持する。
     ただしアイコンの文字色#33302b（白地13.14:1）をそのまま塗りに使うと、投稿FAB・タブ・
     主操作ボタンのような大面積では白基調の中で真っ黒に見え重すぎたため、一段明るい
     #4a4643（白文字9.34:1、AA4.5:1・AAA7:1をともに満たす）にした。
     --color-text-brand（#3f382f）とは用途が異なるため流用しない */
  --color-primary-fill: #4a4643;
  --color-primary-fill-hover: #383533;

  /* 選択中の状態（タブ・チップ・セグメント・トグル）の塗りと文字専用のロール名トークン。
     値は主操作と同じ暗色--color-primary-fillを参照し、二重管理にはしない。トークンを
     見た目（色）ではなく役割で分けておくことで、この役割の配色だけを将来変更したい
     場合に参照側を機械的に洗い出せる（見た目基準の命名だと変更のたびに全箇所を
     手作業で探すことになり、実際に取りこぼしが発生した）。
     塗りを持たない、または塗りが背景色のまま変わらない部品（salon-language-tab等）は
     --color-selected-fillのみを文字・枠に使い、--color-selected-textは使わない
     （白文字を載せる暗色の地が無いため）。
     --color-selected-textは、選択中に地の色そのものが--color-selected-fillへ変わり、
     その上に文字を載せる部品専用 */
  --color-selected-fill: var(--color-primary-fill);
  --color-selected-text: var(--color-bg-white);

  /* 白背景上の文字・枠線・フォーカスリング専用。--color-accent（#b08a57）は白背景に対し
     3.17:1で、UI部品（3:1）は満たすが文字のWCAG AA（4.5:1）を満たさない。
     塗り（ボタン背景・バッジ等）はそのまま--color-accentを使い、白背景上のリンク・
     フォーカスリング・入力欄のフォーカス枠線だけ、白背景に対し4.89:1を確保できる
     濃色 #8f6a3b に切り替える（枠線ボタンは主操作と同じ暗色 --color-primary-fill を使う）。
     フォーカスリングは半透明にすると背景との合成後にコントラストが下がるため
     （かつて存在した半透明版 --color-accent-text-focus は白背景合成後で約1.85:1しかなく
     WCAG 2.2 の1.4.11「3:1」を満たさなかった）、リングにも同じ不透明トークンを使う */
  --color-accent-text: #8f6a3b;
  --color-accent-text-hover: #7a5a32;

  /* テキストカラー。旧body既定色#212529が寒色、ロゴ・アイコンは暖色という混在が
     あったため、muted/subtle/faintを色相35°前後の暖色系へ統一した
     （白地コントラスト比: muted 4.69:1→4.73:1 / subtle 7.46:1→7.59:1 /
     faint 3.54:1→3.59:1。faintはアイコン専用の用途のまま） */
  --color-text-primary: #2f2a22;
  --color-text-secondary: #4d463d;
  --color-text-brand: #3f382f;
  --color-text-muted: #7b7265;
  --color-text-subtle: #5a5349;
  --color-text-faint: #8e867b;
  /* --color-text-mutedを35%透過した下線（text-decoration-color）専用。rgba()の色成分に
     var(--color-text-muted)を部分的に埋め込む構文は無いため、color-mix()を使わない限り
     #7b7265をrgba(123, 114, 101, 0.35)へ手動変換した値を書くしかない。
     --color-text-mutedの値を変えたときはこちらも合わせて再計算すること */
  --color-text-muted-translucent: rgba(123, 114, 101, 0.35);

  /* リンクカラー（ブランドアクセント色。ゴールド系で統一）。白背景上の細い文字のため
     --color-accentではなくAA基準を満たす--color-accent-textを参照する */
  --color-link: var(--color-accent-text);
  --color-link-hover: var(--color-accent-text-hover);

  /* 背景カラー */
  --color-bg-white: #ffffff;
  /* --color-bg-whiteを70%透過した色（トリミング枠の外側マスクの box-shadow 専用）。
     rgba()の色成分にvar(--color-bg-white)を部分的に埋め込む構文は無いため、color-mix()を使わない限り
     #ffffffをrgba(255, 255, 255, 0.7)へ手動変換した値を書くしかない。
     --color-bg-whiteの値を変えたときはこちらも合わせて再計算すること */
  --color-bg-white-translucent: rgba(255, 255, 255, 0.7);
  --color-bg-warm: #fcf8f2;
  --color-bg-subtle: #f7f7f7;
  --color-bg-light: #f2f2f2;
  /* 映像プレイヤー等、黒地が必要な領域専用（ページ全体の白基調とは別トーン） */
  --color-bg-black: #000000;

  /* ホバー/フォーカス時の背景（白地のインタラクティブ要素専用） */
  --color-bg-hover: var(--color-bg-warm);
  --transition-hover: opacity 0.15s ease;
  --opacity-hover: 0.75;

  /* ボーダー */
  --color-border: #e6e6e6;
  --color-border-faint: #ebebeb;
  --color-border-medium: #cfcfcf;
  --color-border-light: #dddddd;
  /* --color-text-mutedと同じ寒色リテラルだったため、暖色統一に合わせて揃えた
     （.btn-neutralの白文字が4.69:1→4.73:1）。同値であることが設計意図のため、
     リテラルを重複させず--color-text-mutedを参照して二重管理にしない */
  --color-border-muted: var(--color-text-muted);
  /* フォーム入力（input/select/textarea）の枠線 */
  --color-border-input: #dee2e6;
  /* コンポーネント既定の半透明ボーダー（カード・ドロップダウン等） */
  --color-border-translucent: rgba(0, 0, 0, 0.175);

  /* 削除アクション（くすんだ赤）*/
  --color-danger-muted: #a85252;
  /* エラー系アラート背景（form-alert 用） */
  --color-danger-pale: #f5e6e6;

  /* 通知・強調（未読バッジ等） */
  --color-danger: #dc3545;

  /* ライブバッジ */
  --color-live-badge: #dc2626;

  /* ルームステータス */
  --color-status-inactive: #e3eef2;
  --color-status-upcoming: #fff1d6;
  --color-status-active: #dff3ea;
  --color-status-closed: #ececec;
  /* 成功系アラート強調色（form-alert 用） */
  --color-success-muted: #2f7a4f;

  /* いいね済みハート */
  --color-heart-liked: var(--color-accent-light);

  /* シャドウ */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-cta: 0 10px 24px rgba(83, 61, 30, 0.22);
  --shadow-cta-hover: 0 14px 30px rgba(83, 61, 30, 0.28);

  /* ボーダー半径 */
  --radius-card: 12px;
  --radius-btn: 12px;
  --radius-btn-lg: 14px;
  --radius-pill: 9999px;
  /* コンポーネント既定の半径（ボタン・フォーム・ドロップダウン等） */
  --radius-base: 0.375rem;

  /* タイポ：フォントサイズ（LP固有値） */
  --font-size-eyebrow: 0.85rem;
  --font-size-nav: 0.9rem;
  --font-size-title-sm: 1.2rem;
  --font-size-title: 1.3rem;
  --font-size-hero: 1.9rem;

  /* タイポ：行間（base=1.5/sm=1.25/lg=2 の中間値） */
  --line-height-tight: 1.4;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.9;

  /* タイポ：字間 */
  --letter-spacing-tight: 0.02em;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.12em;
}

/* Windows（base.htmlのインラインスクリプトが data-emoji-font="noto" を付与）。
   Segoe UI Emoji には国旗の字形が無いため Noto Color Emoji を使う。
   Noto Color Emoji は数字・#・*・©・®・™ のグリフも持つので、Inter を先頭に残して通常の文字を奪わせない。
   "Luxucom Emoji" は Windows では Segoe UI Emoji に解決され国旗が出ないため、このスタックには含めない。 */
:root[data-emoji-font="noto"] {
  --font-family-base:
    "Inter", "Noto Color Emoji", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
    "Segoe UI Emoji", sans-serif;
}

/* PC/タブレットのヘッダー高さは据え置き（56px） */
@media (min-width: 768px) {
  :root {
    --header-height: 56px;
    /* .fs-3（utilities.css）のレスポンシブ計算式と同じ値に戻す */
    --header-icon-size: calc(1.3rem + 0.6vw);
  }
}

@media (min-width: 1200px) {
  :root {
    /* .fs-3（utilities.css）の1200px以上の固定値と同じ */
    --header-icon-size: 1.75rem;
  }
}

/* ── 最小リセット ── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 表示ユーティリティ（.d-flex等）はこのファイルより後のutilities.cssに!important付きで
   定義され、同詳細度・同!importantのためソース順で勝つ。打ち消すために
   utilities.cssの末尾でも同じルールを再定義している。 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* フォーカス移動時にブラウザの自動スクロールで対象要素が固定要素の裏に隠れないよう、
   スクロール停止位置に余白を確保する（WCAG 2.2 AA 2.4.11）。ページ内リンク
   （#idへのジャンプ）にも同様に効く。
   header（position: fixed、common.css）の高さは--header-heightに従うため、
   直値ではなく変数を参照する。個別要素がさらに余白を要する場合は、要素側の
   scroll-margin-topで上乗せする（legal.cssの.legal-settings） */
html {
  scroll-padding-top: calc(var(--header-height) + var(--space-2));
}

/* mobile-footer-nav（position: fixed、common.css）はd-md-noneで768px未満のみ
   表示されるため、下端の余白確保もモバイル幅に限定する。
   --mobile-footer-heightの固定値ではなく--mobile-footer-main-offsetを使う。PWAインストール
   バナー・同意バナー表示中は占有量が--mobile-footer-occupied-height（バナーの実測値との
   max()）へ増え、safe-area分（--mobile-safe-area-offset）も上乗せされるため、固定値のままだと
   バナー表示中にTab移動したフォーカス対象がバナーの裏へ隠れうる（WCAG 2.2 AA 2.4.11）。
   main（common.css）のpadding-bottomと同じトークンを使うことで、スクロール停止位置と
   実際に確保されている下端余白を一致させる */
@media (max-width: 767px) {
  html {
    scroll-padding-bottom: calc(var(--mobile-footer-main-offset) + var(--space-2));
  }
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1 {
  font-size: calc(1.375rem + 1.5vw);
}

h2 {
  font-size: calc(1.325rem + 0.9vw);
}

h3 {
  font-size: calc(1.3rem + 0.6vw);
}

h4 {
  font-size: calc(1.275rem + 0.3vw);
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  h4 {
    font-size: 1.5rem;
  }
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 2rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 0.875em;
}

a {
  color: var(--color-link);
  text-decoration: underline;
}

img,
svg {
  vertical-align: middle;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* 絵文字は端末の絵文字フォントで描画する。textarea と表示側が同じ --font-family-base を使うため、
   見え方は揃う。
   ❤(U+2764) 等のテキスト既定の絵文字は Inter / Noto Sans JP がグリフを持ち先勝ちするため、
   絵文字フォントをスタックの先頭に置く必要がある。
   カラー絵文字フォントはキーキャップ絵文字（0️⃣〜9️⃣）合成用に、裸の数字や #・*・©・®・™ にも
   グリフを持つ。スタック先頭に置くと通常の数字・記号まで絵文字体で描画されてしまうため、
   unicode-range で絵文字コードポイントのみに適用範囲を限定する。
   既知の割り切り: 数字を範囲から除外した結果、キーキャップ絵文字は完全なカラー表示に
   ならない場合があるが、通常の数字が正しく描画されることを優先する。
   ブロック単位の広い連続範囲（例: U+2600-27BF）を指定すると、●○▲▼◆◇ 等チャットで
   頻用される非絵文字の装飾記号まで巻き込むため、Unicode の絵文字集合に一致する
   疎な範囲を列挙する。
   テキスト既定の絵文字のうち、通常の組版記号としても頻用されるもの（©・®・™、数字、#、*）は、
   絵文字体で描画されると実害が大きいため意図的に除外している。それ以外のテキスト既定絵文字
   （‼・⁉・ℹ 等）は絵文字として入力される想定が強いため含める。
   絵文字を追加する際は Unicode の emoji-data.txt と突き合わせること。特に隙間が生じやすいのは
   General Punctuation (U+2000-206F)・Letterlike Symbols (U+2100-214F)・
   Arrows (U+2190-21FF、絵文字と非絵文字が混在する疎な範囲)・
   Miscellaneous Technical (U+2300-23FF)・Enclosed Alphanumerics (U+2460-24FF)・
   Miscellaneous Symbols (U+2600-26FF)・Dingbats (U+2700-27BF) の各ブロック。 */
@font-face {
  font-family: "Luxucom Emoji";
  src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Noto Color Emoji");
  unicode-range:
    U+200D, U+203C, U+2049, U+2139, U+2194-2199, U+21A9-21AA, U+231A-231B, U+2328, U+23CF, U+23E9-23FA, U+24C2,
    U+2600-2604, U+260E, U+2611, U+2614-2615, U+2618, U+261D, U+2620, U+2622-2623, U+2626, U+262A, U+262E-262F,
    U+2638-263A, U+2640, U+2642, U+2648-2653, U+265F-2660, U+2663, U+2665-2666, U+2668, U+267B, U+267E-267F,
    U+2692-2697, U+2699, U+269B-269C, U+26A0-26A1, U+26A7, U+26AA-26AB, U+26B0-26B1, U+26BD-26BE, U+26C4-26C5, U+26C8,
    U+26CE-26CF, U+26D1, U+26D3-26D4, U+26E9-26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702, U+2705, U+2708-270D,
    U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728, U+2733-2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755,
    U+2757, U+2763-2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE, U+2934-2935,
    U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297, U+3299, U+FE0F, U+1F000-1FAFF, U+E0020-E007F;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

textarea {
  resize: vertical;
}