/*
 * 基盤レイヤー: デザイントークン + 最小リセット
 *
 * Bootstrap 廃止（Issue #695）に伴い、全ページが前提とするトークン定義と
 * Reboot 相当の最小リセットをこのファイルに集約する。
 * 値は移行前の見た目を維持するため Bootstrap 5.3 の既定値に合わせている。
 *
 * ブレークポイント規約（メディアクエリでは CSS 変数を使えないため直値で記述する）:
 *   sm: 576px / md: 768px / lg: 992px / xl: 1200px
 */

:root {
  --mobile-footer-height: 52px;
  --mobile-footer-main-gap: 0px;
  --mobile-footer-action-gap: 16px;
  --mobile-safe-area-offset: env(safe-area-inset-bottom);
  --mobile-footer-main-offset: calc(
    var(--mobile-footer-height) + var(--mobile-footer-main-gap) + var(--mobile-safe-area-offset)
  );
  --mobile-footer-action-offset: calc(
    var(--mobile-footer-height) + var(--mobile-footer-action-gap) + var(--mobile-safe-area-offset)
  );

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

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

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

  /* アクセントカラー（ゴールドブラウン） */
  --color-accent: #b78f59;
  --color-accent-hover: #a7814d;
  --color-accent-light: #c9a75a;
  --color-accent-muted: #9d7743;
  --color-accent-focus: rgba(183, 143, 89, 0.45);
  --color-accent-shadow: rgba(183, 143, 89, 0.25);
  --color-accent-pale: #f0dfc0;
  --color-accent-pale-soft: #f6ecd9;
  /* ボタン専用アクセント（アクセントカラーを参照） */
  --color-accent-btn: var(--color-accent);
  --color-accent-btn-hover: var(--color-accent-hover);
  --color-accent-btn-focus: var(--color-accent-focus);

  /* テキストカラー */
  --color-text-primary: #2f2a22;
  --color-text-secondary: #4d463d;
  --color-text-brand: #3f382f;
  --color-text-dark: #212529;
  --color-text-muted: #6c757d;
  --color-text-subtle: #555555;
  --color-text-faint: #888888;

  /* リンクカラー（ブランドアクセント色。Issue #770 でゴールド系へ統一） */
  --color-link: var(--color-accent);
  --color-link-hover: var(--color-accent-hover);

  /* 背景カラー */
  --color-bg-white: #ffffff;
  --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-border-muted: #6c757d;
  /* フォーム入力（input/select/textarea）の枠線 */
  --color-border-input: #dee2e6;
  /* コンポーネント既定の半透明ボーダー（カード・ドロップダウン等） */
  --color-border-translucent: rgba(0, 0, 0, 0.175);

  /* 削除アクション（くすんだ赤）*/
  --color-danger-muted: #a85252;
  --color-danger-muted-hover: #8f3f3f;

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

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

  /* ルームステータス */
  --color-status-inactive: #e3eef2;
  --color-status-upcoming: #fff1d6;
  --color-status-active: #dff3ea;
  --color-status-closed: #ececec;

  /* いいね済みハート */
  --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;
}

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

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

[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-dark);
  background-color: var(--color-bg-white);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

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;
}

/* 表示側は絵文字を Twemoji 画像に変換するが、textarea 内には img を描画できず
   フォントの絵文字グリフに頼るしかないため、見え方を表示側に揃える（Issue #843）。
   ❤(U+2764) 等のテキスト既定の絵文字は Inter / Noto Sans JP がグリフを持ち先勝ちするため、
   絵文字フォントをスタックの先頭に置く必要がある。
   カラー絵文字フォントはキーキャップ絵文字（0️⃣〜9️⃣）合成用に、裸の数字や #・*・©・®・™ にも
   グリフを持つ。スタック先頭に置くと通常の数字・記号まで絵文字体で描画されてしまうため、
   unicode-range で絵文字コードポイントのみに適用範囲を限定する。
   既知の割り切り: 数字を範囲から除外した結果、キーキャップ絵文字は textarea 内で
   完全なカラー表示にならない場合があるが、通常の数字が正しく描画されることを優先する。
   ブロック単位の広い連続範囲（例: U+2600-27BF）を指定すると、●○▲▼◆◇ 等チャットで
   頻用される非絵文字の装飾記号まで巻き込むため、Unicode の絵文字集合に一致する
   疎な範囲を列挙する。
   テキスト既定の絵文字のうち、通常の組版記号としても頻用されるもの（©・®・™、数字、#、*）は、
   絵文字体で描画されると実害が大きいため意図的に除外している。それ以外のテキスト既定絵文字
   （‼・⁉・ℹ 等）は絵文字として入力される想定が強いため含める。
   なお ©・®・™ は表示側では Twemoji によりカラー画像化される場合があり、この除外により
   逆方向（表示側はカラー画像／textarea はモノクロ）の不一致が残るが、通常の数字・記号の
   可読性を優先して許容する。
   絵文字を追加する際は 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;
}

textarea {
  font-family: "Luxucom Emoji", var(--font-family-base);
}

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;
}