/* ==========================================================================
   Phase 2 で足したスタイル（app.css の追記分）

   app.css は Phase 0 ワイヤーの wire.css の写しなので、そちらを直接いじると
   ワイヤーとアプリで食い違う。Phase 2 の追加分はこのファイルに分けて置く。
   白黒（グレースケール）のみ。ブランドデザインは Phase 6。
   ========================================================================== */

/* ---------- MediaSlot（写真・動画のプレースホルダー枠） ---------- */
.mslot { margin: 16px 0; }
.mslot__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.mslot__kind { font-weight: 700; }
.mslot__name { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 90%; }
.mslot__id { font-size: 11px; color: #999; letter-spacing: .04em; }

.mslot--filled { margin: 16px 0; }
.mslot__media {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  background: var(--fill);
}
.mslot__cap { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- アプリ起動ボタン（設計書§1-3） ---------- */
.applaunch { margin: 16px 0; }
.applaunch__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.applaunch__note { flex: 1 1 100%; margin: 0 0 4px; }
.applaunch__back { margin: 10px 0 0; }
/* 押しても開かなかったときに出す代替導線（R2）。既定は hidden 属性で隠れている */
.applaunch__fb {
  flex: 1 1 100%;
  margin: 0 0 4px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  background: var(--fill);
}

/* ---------- Wi-Fiパスワード（R2・館内iPadでのみ実値が入る） ---------- */
.wifipw { display: block; }
.wifipw__value { display: block; font-weight: 700; }
.wifipw__hint { display: block; margin-top: 2px; }
.wifipw[data-state='shown'] .wifipw__mask { display: none; }

/* ---------- アンケート（チェックアウト・R2） ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--fill);
  cursor: pointer;
}

/* ---------- オフライン表示（設計書§1-5） ---------- */
.offlinebar {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--line);
  background: var(--fill-2);
  padding: 8px 16px;
  font-size: 14px;
  text-align: center;
}
.offlinebar b { font-weight: 700; }
body:not(.is-offline) .offlinebar { display: none; }
/* オフラインのときだけ出す／隠す（動的データの注意書きなど） */
body:not(.is-offline) [data-offline-only] { display: none !important; }
body.is-offline [data-online-only] { display: none !important; }

/* ---------- HOME ---------- */
.homeclock {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.homehero { margin-bottom: 20px; }
.devtools {
  border: 1px dashed var(--line-2);
  background: var(--fill);
  padding: 10px 12px;
  margin: 0 0 16px;
  font-size: 13px;
}
.devtools .toggles { margin-top: 6px; }

/* ---------- 周辺一覧のフィルタ ---------- */
.spotcount { margin-top: 8px; }

/* ---------- ご予約オプションの案内（ガイド内） ---------- */
.optnote-slot { margin: 16px 0; }

/* ---------- AIコンシェルジュ（Phase 3 まではプレースホルダー） ---------- */
.faqanswer {
  border-left: 3px solid var(--line);
  padding: 10px 0 10px 14px;
  margin: 8px 0 4px;
}
.faqanswer p { margin: 0 0 6px; }

/* ==========================================================================
   Phase 2 R3（申し送り§0-2）: ナビの3層化
     ① ヘッダーのHOME導線  ② 下部の追従ナビ6枠  ③ 全画面共通フッター
   タップ領域は44px以上（iPadの指タップ前提）。
   ========================================================================== */

/* ---------- ① ヘッダーのHOME導線 ---------- */
/* ロゴ自体をHOMEリンクにする。見た目は据え置き（下線を出さない）。 */
.apphead__brand--link {
  text-decoration: none;
  /* 文字は20pxだが、タップ領域は44px以上を確保する */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.apphead__brand--link:active { color: var(--muted); }

/* 右端の家アイコン＋「ホーム」。時計（.apphead__meta）がある画面では
   時計の右に並ぶ。時計が無い画面では margin-left:auto で右端へ寄せる。 */
.apphead__home {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
/* 時計が入っている画面では、時計側が auto を取るのでこちらは詰めるだけにする */
.apphead__meta ~ .apphead__home { margin-left: 0; }
.apphead__home:active { background: var(--fill-2); }
.apphead__home[aria-current="page"] {
  background: var(--fill);
  font-weight: 700;
}
.apphead__homeicon { width: 20px; height: 20px; flex: none; display: block; }

/* ---------- ③ 全画面共通フッター ---------- */
.appfoot {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 2px solid var(--line);
  font-size: 14px;
}
.appfoot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.appfoot__row--contact {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
/* 緊急時のご案内（フッターの主導線） */
.appfoot__emg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.appfoot__emg b { font-size: 16px; }
.appfoot__emg:active { background: var(--fill-2); }
.appfoot__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  color: var(--muted);
}
.appfoot__nums b {
  color: var(--ink);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.appfoot__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.appfoot__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
}
.appfoot__sep { color: var(--line); }
.appfoot__tel {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.appfoot__note { margin: 0; }

/* 縦置きiPad・狭い画面では2段に落とす */
@media (max-width: 700px) {
  .appfoot__row { flex-direction: column; align-items: stretch; }
  .appfoot__emg { align-items: flex-start; }
}

/* ---------- 担当者の電話番号（LINEブロックに添える1行・R3 §0-3） ----------
   実値は packages/shared の OWNER が正。ここは見た目だけ。 */
.ownertel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.ownertel__who { font-size: 14px; }
.ownertel__num {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-decoration: underline;
}
.ownertel__note { flex-basis: 100%; margin: 0; }

/* ==========================================================================
   Phase 2.5 R2 — 名簿フォームの追加パーツ（申し送り§D）
   ⚠️ ここは **新しいクラスの追加だけ**（既存クラスの値は変えていない）。
      ライト基調の画面（/precheckin/ = 宿泊者スマホ）でも同じ部品を使うため、
      ブランド適用の有無にかかわらず読み込まれる phase2.css に土台を置く。
      ブランド面（館内iPad）の色・寸法は brand.css が上書きする。
   ========================================================================== */

/* 入力エラー（リアルタイムバリデーション）。ブランド面では #FF1493 のピンク文字 */
.fielderr {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #c2185b;                 /* ライト面（白地）で読める濃いピンク */
}
.input--err { border-color: #c2185b; }

/* ラベルに添える書式の説明（ハイフンなし・自動入力 など） */
.field__hint {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 400;
}
/* 入力欄の下に出す状況説明（自動入力しました／探しています） */
.field__note { margin: 6px 0 0; font-size: 13px; line-height: 1.6; }

/* 単位付きの入力（年齢の「歳」） */
.inputunit { display: flex; align-items: center; gap: 8px; }
.inputunit .input { flex: 1 1 auto; }
.inputunit__suffix { flex: none; font-size: 15px; }

/* 選択中のラジオ・チェック（§D-4「一目で判別できる」） */
.radios label.is-on {
  border-color: var(--ink);
  background: var(--fill);
  font-weight: 700;
}