/* ==========================================================================
   Heaven Retreat — Management UI
   Design system: kintai-style sidebar layout × HR brand warm neutrals
   ========================================================================== */

:root {
  --background: #fbfaf7;
  --foreground: #1d1d1b;
  --card: #ffffff;
  --card-foreground: #1d1d1b;
  --muted: #f4f2ed;
  --muted-foreground: #3a3833;
  --subtle: #524f4a;
  --border: #e7e4dd;
  --border-strong: #d8d4ca;
  --input: #e7e4dd;
  --primary: #1d1d1b;
  --primary-foreground: #ffffff;
  --primary-hover: #2d2d2a;
  --secondary: #f4f2ed;
  --secondary-foreground: #1d1d1b;
  --accent: #807f7e;
  --accent-hover: #6e6d6b;
  --accent-soft: #ebe7df;
  --ring: #807f7e;
  --destructive: #b53127;
  --destructive-soft: #fbeae8;
  --success: #4f7a52;
  --success-soft: #e9f1ea;
  --warning: #c8a046;
  --warning-soft: #faf3e2;
  --info: #4a6781;
  --info-soft: #eaf0f5;
  --sidebar-bg: #ffffff;
  --sidebar-fg: #1d1d1b;
  --sidebar-muted: #6b6a66;
  --sidebar-border: #e7e4dd;
  --sidebar-accent: #f4f2ed;
  --sidebar-accent-fg: #1d1d1b;
  --sidebar-active-bg: #1d1d1b;
  --sidebar-active-fg: #ffffff;
  /* 角丸を廃止しすべて直角に統一 */
  --radius: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --shadow-sm: 0 1px 2px rgba(29, 29, 27, 0.04);
  --shadow: 0 1px 3px rgba(29, 29, 27, 0.06), 0 1px 2px rgba(29, 29, 27, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(29, 29, 27, 0.06), 0 2px 4px -1px rgba(29, 29, 27, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(29, 29, 27, 0.08), 0 4px 8px -2px rgba(29, 29, 27, 0.04);
  --font-sans: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", "YuGothic", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --header-h: 56px;
  /* E案（文字拡大）でサイドバーの項目名が2行に折れるため 240→260px（2026-08-08） */
  --sidebar-w: 260px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.8;
  letter-spacing: 0.01em;
  /* 既定の auto だと Chrome が小書きカナ（ゃゅょっャュョ）の前で改行してよいと判断し、
     「キ／ャンセル」「オプシ／ョン」のように割れる。strict で禁則を効かせる（2026-08-09） */
  line-break: strict;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ==========================================================================
   レイアウト (ヘッダー + サイドバー + main)
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
}
.header .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: 0.04em; font-size: 18px;
  color: var(--foreground);
}
.header .brand img { width: 28px; height: 28px; object-fit: contain; }
.header .brand .brand-name { font-family: "Raleway", "Noto Serif JP", serif; letter-spacing: 0.08em; }
.header .page-title {
  font-size: 17px; color: var(--muted-foreground); font-weight: 500;
  padding-left: 16px; margin-left: 4px;
  border-left: 1px solid var(--border);
}
.header .user-info {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; color: var(--muted-foreground);
}
.header .user-info .user-name { color: var(--foreground); font-weight: 500; }
.header .user-info a {
  color: var(--muted-foreground); font-size: 15px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  transition: all .15s;
}
.header .user-info a:hover { background: var(--muted); color: var(--foreground); }

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--header-h));
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 18px 12px;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.sidebar .nav-group {
  font-size: 14.5px; font-weight: 700; color: var(--subtle);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 14px 10px 6px;
}
.sidebar .nav-group:first-child { padding-top: 4px; }
.sidebar a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  font-size: 17px; color: var(--sidebar-fg);
  border-radius: var(--radius-md);
  transition: all .12s ease;
  position: relative;
}
.sidebar a .nav-icon {
  flex-shrink: 0; width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted-foreground);
}
.sidebar a:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-fg);
}
/* ログアウト（ヘッダーから移設・HR-NEW-36）。
   他の項目は「画面へ移動する」だが、これだけは「セッションを終える」。
   同じ見た目のまま並べると押し間違えるので、上に細い区切りを入れて少しだけ控えめにする。 */
.sidebar a.nav-logout {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--muted-foreground);
}
.sidebar a.nav-logout:hover { color: var(--sidebar-accent-fg); }
.sidebar a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-fg);
  font-weight: 500;
}
.sidebar a.active .nav-icon { color: var(--sidebar-active-fg); }
/* 現在地を一目で（2026-08-25）：黒地＋左に金のバー＋太字 */
.owner-chrome .sidebar a.active, .layout:not(.admin-chrome) .sidebar a.active {
  box-shadow: inset 4px 0 0 var(--cal-gold, #c4973a);
  font-weight: 700;
}
.sidebar a.disabled {
  color: #b8b6b1; cursor: not-allowed;
}
.sidebar a.disabled:hover { background: transparent; color: #b8b6b1; }
.sidebar a.disabled .nav-icon { color: #b8b6b1; }

/* --------------------------------------------------------------------------
   運営管理画面のヘッダー＋サイドバーは色を反転（濃地×白文字）。
   オーナーページ等と同じ白基調で混同されるのを防ぐためのスコープ限定上書き。
   .admin-chrome は template-parts/layout-admin.php のみに付与。
   -------------------------------------------------------------------------- */
.header.admin-chrome {
  background: #1d1d1b;
  border-bottom-color: #34332f;
}
.header.admin-chrome .brand { color: #ffffff; }
.header.admin-chrome .page-title {
  color: #c9c7c1;
  border-left-color: #44433e;
}
.header.admin-chrome .user-info { color: #b8b6b1; }
.header.admin-chrome .user-info .user-name { color: #ffffff; }
.header.admin-chrome .user-info a { color: #b8b6b1; }
.header.admin-chrome .user-info a:hover { background: #34332f; color: #ffffff; }

.layout.admin-chrome .sidebar {
  background: #484848;
  border-right-color: #3a3a3a;
}
.layout.admin-chrome .sidebar .nav-group { color: #a8a6a1; }
.layout.admin-chrome .sidebar a { color: #e2e0da; }
.layout.admin-chrome .sidebar a .nav-icon { color: #b3b1ac; }
.layout.admin-chrome .sidebar a:hover {
  background: #575757;
  color: #ffffff;
}
.layout.admin-chrome .sidebar a:hover .nav-icon { color: #ffffff; }
.layout.admin-chrome .sidebar a.active {
  background: #ffffff;
  color: #1d1d1b;
}
.layout.admin-chrome .sidebar a.active .nav-icon { color: #1d1d1b; }

.main {
  padding: 28px 32px;
  min-width: 0;
  width: 100%;
  /* PC で横幅が間延びしないよう内容幅を制限（サイドバー右側で中央寄せ） */
  max-width: 1140px;
  margin: 0 auto;
}

/* 運営管理画面は一覧・2ペインが主体で、1140px だと横が窮屈になるため画面幅いっぱいに使う */
.layout.admin-chrome .main { max-width: none; margin: 0; }
.main h1 {
  font-size: 24px; font-weight: 600; color: var(--foreground);
  letter-spacing: -0.01em; margin-bottom: 4px;
}
.main h1 + .lead { font-size: 17px; color: var(--muted-foreground); margin-bottom: 24px; }
.main h2 {
  font-size: 19px; font-weight: 600; color: var(--foreground);
  margin: 28px 0 12px;
}
.main .page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.main .page-header .actions { display: flex; gap: 8px; }

/* スコープ切替 (建物切替) */
.scope-switcher { display: flex; gap: 4px; margin-left: 12px; }
.scope-tab {
  padding: 5px 12px; font-size: 16px; color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  transition: all .12s;
}
.scope-tab:hover { border-color: var(--accent); color: var(--foreground); }
.scope-tab.active {
  background: var(--foreground); color: var(--primary-foreground);
  border-color: var(--foreground); font-weight: 500;
}

/* ==========================================================================
   カード
   ========================================================================== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.card-title {
  font-size: 17px; font-weight: 600; color: var(--foreground);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-title .more { font-size: 15px; font-weight: 400; color: var(--muted-foreground); }
.card-title .more:hover { color: var(--foreground); }

/* ==========================================================================
   KPI / 統計カード
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* 契約物件のフルブリードヒーロー（マイページ等の上部） */
.page-hero {
  position: relative;
  margin: -28px -32px 24px;
  padding: 56px 32px 28px;
  min-height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--muted);
  color: #fff;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 100%);
  z-index: 0;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.page-hero-building {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px;
}
.page-hero-building::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
}
.page-hero h1 {
  font-size: 26px; font-weight: 600;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
@media (max-width: 880px) {
  .page-hero { margin: -20px -20px 20px; padding: 48px 20px 20px; min-height: 160px; }
}
@media (max-width: 720px) {
  .page-hero { margin: -16px -16px 16px; padding: 40px 16px 16px; min-height: 140px; }
  .page-hero h1 { font-size: 24px; }
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color .15s;
}
.stat:hover { border-color: var(--border-strong); }
.stat-label {
  font-size: 15px; color: var(--muted-foreground); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.stat-value {
  font-size: 30px; font-weight: 600; color: var(--foreground);
  letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat-value .unit { font-size: 18px; font-weight: 400; color: var(--muted-foreground); margin-left: 4px; }
.stat-sites { display: flex; flex-direction: column; gap: 4px; }
.stat-site-row { font-size: 20px; line-height: 1.3; color: var(--foreground); font-weight: 500; }
.stat-site-row .stat-site-name { font-weight: 600; }
.stat-site-row .stat-site-count strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0 2px; }
.stat-sub { font-size: 15px; color: var(--muted-foreground); margin-top: 6px; }
.stat-trend { font-size: 15px; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--destructive); }

/* プログレスバー */
.progress {
  height: 4px; background: var(--muted); border-radius: 0;
  margin-top: 10px; overflow: hidden;
}
.progress-bar {
  height: 100%; background: var(--foreground);
  border-radius: 0;
}

/* ==========================================================================
   テーブル
   ========================================================================== */
table {
  width: 100%; border-collapse: collapse;
  font-size: 17px; font-variant-numeric: tabular-nums;
}
th {
  background: var(--muted);
  /* 折り返すと「種／別」「予約番／号」のように1文字ずつ縦に割れる。
     横スクロールは .table-scroll / .card 側が担うので、ここでは折り返さない（2026-08-09） */
  white-space: nowrap;
  padding: 10px 14px;
  text-align: left;
  font-weight: 500;
  font-size: 15px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
th:first-child { border-top-left-radius: var(--radius-md); }
th:last-child  { border-top-right-radius: var(--radius-md); }
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--muted); }
tr.clickable { cursor: pointer; }
dl.kv.clickable { cursor: pointer; border-radius: var(--radius-sm); transition: background 0.12s; }
dl.kv.clickable:hover { background: var(--muted); }
td.mono { font-family: var(--font-mono); font-size: 16px; }
td.num  { text-align: right; }
td.empty { color: var(--subtle); }

.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ==========================================================================
   フォーム
   ========================================================================== */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 16px; font-weight: 500;
  color: var(--foreground); margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  font-size: 17px;
  font-family: inherit;
  background: var(--card);
  color: var(--foreground);
  transition: border-color .12s, box-shadow .12s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--ring);
  outline: none;
  box-shadow: 0 0 0 3px rgba(128, 127, 126, 0.15);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--subtle); }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.form-hint { font-size: 15px; color: var(--muted-foreground); margin-top: 4px; }

/* ==========================================================================
   ボタン
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 17px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all .12s;
  white-space: nowrap;
  /* 指定が無いと <a class="btn"> は body の 1.8 を継承して37px、
     <button class="btn"> はブラウザ既定で31px と、同じボタンが6px違う（2026-08-09） */
  line-height: 1.4;
}
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--muted); border-color: var(--border-strong); }
.btn-ghost {
  background: transparent; color: var(--muted-foreground);
}
.btn-ghost:hover { background: var(--muted); color: var(--foreground); }
.btn-danger {
  background: var(--card);
  color: var(--destructive);
  border-color: var(--destructive);
}
.btn-danger:hover { background: var(--destructive); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 16px; }
.btn-lg { padding: 11px 22px; font-size: 18px; }
.btn + .btn { margin-left: 8px; }

/* ==========================================================================
   バッジ
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.badge-gray    { background: var(--muted); color: var(--muted-foreground); }
.badge-blue    { background: var(--info-soft); color: var(--info); }
.badge-green   { background: var(--success-soft); color: var(--success); }
.badge-orange  { background: var(--warning-soft); color: #a07a2e; }
.badge-red     { background: var(--destructive-soft); color: var(--destructive); }
/* 取り下げ済み（キャンセル）。Design 7章の状態色では「濃い灰。赤にしない」と決まっている。
   赤は『要対応・放置すると問題』の色で、キャンセルは対応不要だから区別する。
   以前は予約一覧の中だけ（#bookingsTable スコープ）に置かれていて他画面から使えず、
   予約詳細が赤を使う原因になっていた（HR-BKG-H2）。ここへ移して全画面で使えるようにする。 */
.badge-canceled { background: #cfcbc2; color: #4a4a46; }
.badge-dark    { background: var(--foreground); color: var(--primary-foreground); }
.badge-purple  { background: #ede4f7; color: #6b3fa0; }
.badge-teal    { background: #d6f1ec; color: #1f7a64; }

/* ステータスドット */
.status-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 6px; vertical-align: middle;
}
.status-confirmed   { background: var(--info); }
.status-tentative   { background: var(--warning); }
.status-checked-in  { background: var(--success); }
.status-checked-out { background: var(--subtle); }
.status-cancelled   { background: var(--destructive); }
.status-checked_in  { background: var(--success); }
.status-checked_out { background: var(--subtle); }

/* ==========================================================================
   ログイン画面
   ========================================================================== */
.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--background);
  padding: 24px;
}
.login-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-lg);
}
.login-box .logo-wrap {
  text-align: center; margin-bottom: 24px;
}
.login-box .logo-wrap img { width: 56px; height: 56px; object-fit: contain; }
.login-box .logo-wrap .brand-name {
  font-family: "Raleway", "Noto Serif JP", serif;
  font-size: 22px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--foreground); margin-top: 10px;
}
.login-box .sub {
  font-size: 16px; color: var(--muted-foreground);
  text-align: center; margin-bottom: 28px;
}
.login-box .btn-primary { width: 100%; padding: 11px 22px; }
.login-box .form-group:last-of-type { margin-bottom: 20px; }
.login-box .alert { margin-bottom: 16px; }

/* ==========================================================================
   予約フロー (Step)
   ========================================================================== */
.steps {
  display: flex; gap: 8px; margin-bottom: 24px;
}
.step {
  flex: 1; text-align: center;
  padding: 10px 8px;
  background: var(--muted);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--muted-foreground);
}
.step.active {
  background: var(--foreground); color: var(--primary-foreground); font-weight: 500;
}
.step.done {
  background: var(--accent-soft); color: var(--foreground);
}

/* ==========================================================================
   建物カード
   ========================================================================== */
.building-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.building-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: all .15s;
  text-decoration: none; color: inherit;
}
.building-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.bc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.bc-name { font-size: 19px; font-weight: 600; color: var(--foreground); }
.bc-code {
  font-size: 14px; color: var(--subtle);
  font-family: var(--font-mono);
  background: var(--muted); padding: 2px 6px; border-radius: 0;
}
.bc-row {
  display: flex; justify-content: space-between;
  font-size: 16px; margin-top: 6px;
}
.bc-label { color: var(--muted-foreground); }
.bc-value { font-weight: 500; color: var(--foreground); }

/* ==========================================================================
   施設カード (旧)
   ========================================================================== */
.facility-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.facility-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all .15s;
}
.facility-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.facility-card .photo {
  height: 120px;
  background: linear-gradient(135deg, #e7e4dd, #d8d4ca);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-foreground); font-size: 16px;
}
.facility-card .info { padding: 12px 14px; }
.facility-card .info h3 { font-size: 17px; margin-bottom: 2px; font-weight: 600; }
.facility-card .info p { font-size: 15px; color: var(--muted-foreground); }

/* ==========================================================================
   カレンダー (横スクロール / グリッド)
   ========================================================================== */
.cal-scroll { overflow-x: auto; padding-bottom: 8px; margin: -2px; padding: 2px; }
.cal-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86px;
  grid-template-rows: auto; gap: 4px; min-width: 100%;
}
.cal-cell {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 100px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.cal-cell.weekend { background: #fdfcfa; }
.cal-cell.is-today {
  border-color: var(--foreground); background: var(--card);
  box-shadow: 0 0 0 1px var(--foreground) inset;
}
.cal-cell.cal-month-start { border-left: 2px solid var(--foreground); }
.cal-date {
  display: flex; justify-content: space-between; font-size: 15px;
  padding: 0 2px 4px; border-bottom: 1px solid var(--border);
}
.cal-date .cal-mmdd { font-weight: 600; color: var(--foreground); }
.cal-date .cal-wday { color: var(--subtle); }
.cal-cell.weekend .cal-wday { color: var(--destructive); }
.cal-booking {
  font-size: 14px; padding: 3px 6px; border-radius: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; cursor: pointer; font-weight: 500;
}
.cal-booking.status-confirmed   { background: var(--info); }
.cal-booking.status-tentative   { background: var(--warning); color: #1d1d1b; }
.cal-booking.status-checked_in  { background: var(--success); }
.cal-booking.status-checked_out { background: var(--subtle); }
.cal-booking.status-cancelled   { background: var(--destructive); opacity: .55; text-decoration: line-through; }

.cal-legend {
  display: flex; gap: 16px; margin-top: 12px; font-size: 16px;
  color: var(--muted-foreground); align-items: center; flex-wrap: wrap;
}
.legend-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 6px; vertical-align: middle;
}
.legend-dot.status-confirmed   { background: var(--info); }
.legend-dot.status-tentative   { background: var(--warning); }
.legend-dot.status-checked_in  { background: var(--success); }

/* シンプル月カレンダー (旧) */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-header {
  background: var(--muted); padding: 8px;
  text-align: center; font-size: 15px; font-weight: 500; color: var(--muted-foreground);
  border-radius: var(--radius-sm);
}
.cal-day {
  background: var(--card); padding: 10px 6px; text-align: center;
  font-size: 16px; min-height: 48px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: all .12s;
}
.cal-day:hover { background: var(--muted); }
.cal-day.peak { background: var(--warning-soft); color: #a07a2e; }
.cal-day.closed { background: var(--muted); color: var(--subtle); cursor: not-allowed; }
.cal-day.booked { background: var(--accent-soft); color: var(--foreground); font-weight: 600; }
.cal-day.empty { background: transparent; border-color: transparent; }

/* カレンダータイトル＋ナビ */
.cal-title {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 12px;
}
.cal-nav { display: flex; gap: 6px; }
.cal-nav .btn.is-current { background: var(--foreground); color: var(--primary-foreground); }

/* ==========================================================================
   フィルタ・タブ
   ========================================================================== */
.filter-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; gap: 16px; flex-wrap: wrap;
}
.filter-tabs { display: flex; gap: 4px; }
.filter-tab {
  padding: 6px 14px; font-size: 16px; color: var(--muted-foreground);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; transition: all .12s;
}
.filter-tab:hover { border-color: var(--border-strong); color: var(--foreground); }
.filter-tab.active {
  background: var(--foreground); color: var(--primary-foreground);
  border-color: var(--foreground); font-weight: 500;
}
.filter-tab .cnt { margin-left: 6px; opacity: .65; font-size: 14px; }
.filter-status select {
  padding: 6px 10px; font-size: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card);
}
.filter-status label {
  font-size: 16px; color: var(--muted-foreground);
  display: flex; align-items: center; gap: 8px;
}

.tab-nav {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab-btn {
  padding: 10px 16px; font-size: 17px; font-weight: 500;
  color: var(--muted-foreground); background: transparent;
  border: none; border-bottom: 2px solid transparent;
  cursor: pointer; margin-bottom: -1px; transition: color .12s, border-color .12s;
}
.tab-btn:hover { color: var(--foreground); }
.tab-btn.active { color: var(--foreground); border-bottom-color: var(--foreground); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ==========================================================================
   詳細 / KV / メモ
   ========================================================================== */
.subtle { font-size: 17px; color: var(--muted-foreground); font-weight: 400; margin-left: 6px; }
.breadcrumb { font-size: 15px; margin-bottom: 12px; color: var(--muted-foreground); }
.breadcrumb a { color: var(--muted-foreground); }
.breadcrumb a:hover { color: var(--foreground); }
.breadcrumb .sep { margin: 0 6px; color: var(--subtle); }

.detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.kv { font-size: 17px; }
.kv dt {
  color: var(--muted-foreground); font-weight: 500;
  margin-top: 10px; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.kv dt:first-child { margin-top: 0; }
.kv dd { margin: 4px 0 0; color: var(--foreground); }

/* 横並びコンパクト表示（ラベル｜値 を 2列 grid に） */
.kv.kv-compact {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 10px;
  align-items: baseline;
  padding: 6px 10px;
  font-size: 17px;
}
.kv.kv-compact dt {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: none;
  letter-spacing: 0;
}
.kv.kv-compact dd { margin: 0; color: var(--foreground); }
.kv.kv-compact .kv-sub { color: var(--muted-foreground); font-size: 16px; }

.memo {
  font-size: 17px; color: var(--foreground); line-height: 1.7;
  white-space: pre-wrap; min-height: 40px;
}

/* ==========================================================================
   2カラム / フィード
   ========================================================================== */
.two-col {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}
@media (max-width: 960px) { .two-col { grid-template-columns: 1fr; } }

.feed { list-style: none; padding: 0; margin: 0; }
.feed li {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.feed li:last-child { border-bottom: none; }
.feed-icon {
  font-size: 20px; width: 28px; height: 28px;
  flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--muted); border-radius: 50%;
}
.feed-body { flex: 1; min-width: 0; }
.feed-msg { font-size: 17px; color: var(--foreground); margin-bottom: 2px; }
.feed-meta { font-size: 15px; color: var(--muted-foreground); }
.empty {
  color: var(--subtle); text-align: center;
  padding: 24px 0; font-size: 17px;
}

/* ==========================================================================
   アラート / 通知
   ========================================================================== */
.notice, .alert {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 17px;
  margin-bottom: 12px;
  border: 1px solid;
}
.notice, .alert-warning {
  background: var(--foreground); border-color: var(--foreground); color: #fff;
}
/* 太字は親の文字色を継ぐ。背景を明るく上書きした notice でも読めるように（2026-08-31） */
.notice strong, .alert-warning strong { color: inherit; }
.alert-info {
  background: var(--foreground); border-color: var(--foreground); color: #fff;
}
.alert-success {
  background: var(--foreground); border-color: var(--foreground); color: #fff;
}
.alert-error {
  background: #2a0d0a; border-color: #2a0d0a; color: #fff;
}

/* オーナー系アラート（カード内・上部共通） — テキスト黒、赤はアクセント */
.card-inline-alert,
.notice-alert {
  display: flex; align-items: center; gap: 12px;
  background: #fbeae8;
  border: 1px solid #e3b6b0;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 17px;
  color: var(--foreground);
  margin-bottom: 12px;
}
.card-inline-alert { margin-top: 10px; margin-bottom: 0; }
.card-inline-alert .card-inline-alert-icon,
.notice-alert .notice-alert-icon { color: var(--destructive); font-weight: 700; flex-shrink: 0; }
.card-inline-alert .card-inline-alert-body,
.notice-alert .notice-alert-body { flex: 1; min-width: 0; color: var(--foreground); }
.card-inline-alert .card-inline-alert-body strong,
.notice-alert .notice-alert-body strong { color: var(--foreground); font-weight: 600; }
.card-inline-alert .btn,
.notice-alert .btn { flex-shrink: 0; margin-left: auto; }

/* 上部アラート: 複数行表示用 */
.notice-alert-stack { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; }
.notice-alert-stack .notice-alert-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid #e3b6b0;
}
.notice-alert-stack .notice-alert-head strong { color: var(--foreground); font-weight: 600; }
.notice-alert-stack .notice-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 16.5px;
}
.notice-alert-stack .notice-item strong { color: var(--foreground); }
.notice-alert-stack .notice-meta { color: var(--muted-foreground); }
.notice-alert-stack .notice-meta-sub { color: var(--destructive); font-weight: 600; }

/* 宿泊者名簿登録: テーブル上の説明ノート */
.registry-note {
  background: var(--info-soft);
  border: 1px solid #c7d4e0;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 16.5px;
  color: var(--foreground);
  margin-bottom: 12px;
}
.registry-note-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 0;
  background: var(--success-soft);
  color: var(--success);
  font-size: 15px;
  font-weight: 600;
  margin: 0 2px;
}
.registry-note-tag-overseas {
  background: var(--warning-soft);
  color: #a07a2e;
}

/* 宿泊者名簿登録: 住所/パスポート統合列の表示タグ */
.addr-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 0;
  font-size: 14.5px;
  font-weight: 600;
  margin-right: 6px;
  vertical-align: middle;
}
.addr-tag-jp { background: var(--success-soft); color: var(--success); }
.addr-tag-overseas { background: var(--warning-soft); color: #a07a2e; }
.passport-text { font-family: var(--font-mono); font-size: 16px; }

/* 宿泊者名簿登録: 入力パネル（コンパクト grid） */
.reg-form-compact .reg-residence-toggle {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--muted);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.reg-residence-label { font-weight: 600; font-size: 16.5px; }
.reg-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 17px; }
.reg-radio input { cursor: pointer; }

.reg-form-compact .reg-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 14px;
}
.reg-form-compact .reg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.reg-form-compact .reg-field label {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--muted-foreground);
}
.reg-form-compact .reg-field input {
  width: 100%;
  padding: 6px 10px;
  font-size: 17px;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: #fff;
}
.reg-form-compact .req { color: #cf2e2e; }
.reg-form-compact .reg-hint { font-size: 14.5px; color: var(--muted-foreground); font-weight: 400; }

/* 列配分 */
.reg-form-compact .reg-field-name        { grid-column: span 3; }
.reg-form-compact .reg-field-birthday    { grid-column: span 2; }
.reg-form-compact .reg-field-nationality { grid-column: span 1; }
.reg-form-compact .reg-field-address,
.reg-form-compact .reg-field-passport    { grid-column: span 6; }
.reg-form-compact .reg-field-email       { grid-column: span 4; }
.reg-form-compact .reg-field-phone       { grid-column: span 2; }

/* 住所/パスポート 切替表示（JS で data-overseas 制御） */
.reg-form-compact[data-overseas="0"] .reg-residence-overseas { display: none; }
.reg-form-compact[data-overseas="1"] .reg-residence-jp { display: none; }

@media (max-width: 820px) {
  .reg-form-compact .reg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reg-form-compact .reg-field-name,
  .reg-form-compact .reg-field-address,
  .reg-form-compact .reg-field-passport,
  .reg-form-compact .reg-field-email { grid-column: span 2; }
  .reg-form-compact .reg-field-birthday,
  .reg-form-compact .reg-field-nationality,
  .reg-form-compact .reg-field-phone { grid-column: span 1; }
}

/* kv ラベル横のヘルプアイコン（ツールチップ表示用） */
.kv-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 600;
  cursor: help;
  vertical-align: middle;
}

/* 物件情報ページ: 物件切替タブ（予約詳細タブと同系統） */
.building-switch-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow-x: auto;
}
.building-switch-tab {
  padding: 12px 18px;
  font-size: 17px;
  color: var(--muted-foreground);
  white-space: nowrap;
  transition: color .12s, background .12s;
  border-right: 1px solid var(--border);
  display: inline-flex; flex-direction: column; gap: 2px;
  text-decoration: none;
}
.building-switch-tab:last-child { border-right: none; }
.building-switch-tab:hover {
  color: var(--foreground);
  background: var(--muted);
}
.building-switch-tab.active {
  background: var(--foreground);
  color: var(--primary-foreground);
}
.building-switch-name { font-weight: 600; }
.building-switch-site { font-size: 15px; opacity: 0.75; }

/* オーナーダッシュボード: 契約物件テーブル */
.contracts-card { margin-bottom: 20px; }
.contracts-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.contracts-table thead th {
  text-align: left;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.contracts-table thead th.num { text-align: right; }
.contracts-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.contracts-table tbody td.num { text-align: right; white-space: nowrap; }
.contracts-table tbody tr:hover { background: var(--muted); }
.contracts-table tr.clickable { cursor: pointer; }
.contracts-building { font-weight: 600; color: var(--foreground); }
.contracts-site { font-size: 15px; color: var(--muted-foreground); margin-top: 2px; }
.contracts-usage { font-size: 16.5px; margin-bottom: 4px; }
.progress-mini { height: 4px; }
.contracts-table tfoot td {
  padding: 10px 12px;
  font-weight: 600;
  background: var(--muted);
  border-top: 2px solid var(--border);
}
.contracts-table tfoot td.num { text-align: right; }
.contracts-table .muted { color: var(--muted-foreground); }
.contracts-table .empty { text-align: center; padding: 30px; color: var(--muted-foreground); }

/* 直近予約履歴: アラート付き行 — 赤バッジで「宿泊者名簿未入力」を明示 */
tr.row-has-alert td:first-child { border-left: 3px solid var(--destructive) !important; }
.row-alert-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fbeae8; color: var(--destructive);
  border: 1px solid #e3b6b0;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 15px; font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}

/* 滞在カウントダウン（残日数で色変化） */
.notice-stay {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 17px;
  margin-top: 14px;
  border: 1px solid;
}
.notice-stay.is-future {
  background: var(--info-soft); border-color: #c7d4e0; color: var(--info);
}
.notice-stay.is-future strong { color: var(--info); }
.notice-stay.is-soon {
  background: var(--success-soft); border-color: #c1d6c2; color: var(--success);
}
.notice-stay.is-soon strong { color: var(--success); }
.notice-stay.is-urgent {
  background: var(--destructive-soft); border-color: #f0c8c4; color: var(--destructive);
}
.notice-stay.is-urgent strong { color: var(--destructive); }

/* 予約履歴の行ステータス色（左ボーダー） */
tr.row-status-tentative   td:first-child { border-left: 3px solid var(--warning); }
tr.row-status-confirmed   td:first-child { border-left: 3px solid var(--info); }
tr.row-status-checked_in  td:first-child { border-left: 3px solid var(--success); }
tr.row-status-checked_out td:first-child { border-left: 3px solid var(--border); }
tr.row-status-cancelled   td:first-child { border-left: 3px solid var(--destructive); }
tr.row-status-cancelled td { color: var(--muted-foreground); opacity: 0.7; }

.incident-banner {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px;
}
.incident-banner.has-issues {
  border-color: #f0c8c4; background: var(--destructive-soft);
}
.incident-banner.has-issues .card-title { color: var(--destructive); border-bottom-color: #f0c8c4; }
.incident-banner.empty { font-size: 17px; color: var(--muted-foreground); }
.incident-banner.empty .muted { color: var(--subtle); margin-left: 6px; font-size: 15px; }
.incident-more { font-size: 16px; color: var(--destructive); margin-top: 8px; }

/* 金額 */
.amount-plus  { color: var(--success); font-weight: 500; }
.amount-minus { color: var(--destructive); font-weight: 500; }
.mono { font-family: var(--font-mono); }

/* チェックリスト */
.checklist label {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; font-size: 17px;
  border-bottom: 1px solid var(--border);
}
.checklist label:last-child { border-bottom: none; }
.checklist input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--foreground);
}

/* ==========================================================================
   ゲスト画面
   ========================================================================== */
.guest-page {
  max-width: 520px; margin: 0 auto;
  padding: 32px 20px;
}
.guest-header {
  text-align: center; padding: 24px 0;
}
.guest-header img { width: 64px; height: 64px; object-fit: contain; }
.guest-header .brand-name {
  font-family: "Raleway", "Noto Serif JP", serif;
  font-size: 22px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--foreground); margin-top: 10px;
}
.guest-header .sub {
  font-size: 16px; color: var(--muted-foreground); margin-top: 6px;
}
.qr-container { text-align: center; padding: 28px 0; }
.qr-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 200px; height: 200px;
  background: var(--card); border: 2px dashed var(--border-strong);
  border-radius: var(--radius); font-size: 16px; color: var(--muted-foreground);
  margin: 0 auto;
}
.qr-box img { width: 100%; height: 100%; padding: 12px; object-fit: contain; }

/* ==========================================================================
   グラフ
   ========================================================================== */
.bar-chart {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px; height: 200px; align-items: end; padding: 12px 0 0;
}
.bar-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; height: 100%;
}
.bar-value { font-size: 15px; color: var(--muted-foreground); font-weight: 500; }
.bar-wrap {
  flex: 1; width: 100%; max-width: 48px;
  display: flex; align-items: flex-end;
}
.bar {
  width: 100%; background: var(--foreground);
  border-radius: 0; min-height: 2px;
}
.bar-label { font-size: 15px; color: var(--muted-foreground); }

/* ==========================================================================
   サムネイル選択 (物件・棟)
   ========================================================================== */
.thumb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.thumb-card {
  display: block; border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--card); transition: all .12s;
  position: relative;
}
.thumb-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
/* 選択中は「選択中」バッジではなく枠そのもので示す（airbnb.php 側と同じ扱い） */
.thumb-card.is-active {
  border-color: var(--cal-gold); border-width: 2px; background: #fffdf7;
  box-shadow: 0 0 0 3px rgba(196,151,58,.22), 0 4px 14px rgba(0,0,0,.09);
  transform: translateY(-2px);
}
.thumb-card.is-active::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: var(--cal-gold); z-index: 2;
}
.thumb-photo {
  height: 110px; background-size: cover; background-position: center;
  background-color: var(--muted);
}
.thumb-meta { padding: 10px 12px; }
.thumb-name { font-size: 17px; font-weight: 600; color: var(--foreground); }
.thumb-sub { font-size: 15px; color: var(--muted-foreground); margin-top: 2px; }
/* 予約可能時期の案内（物件を選択カードの先頭・フィルターの上）。
   所有＝口数別6/7/8ヶ月前、相互利用＝一律4ヶ月前。物件ごとではなくここに1回だけ出す */
.pf-window {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 14px; padding: 9px 12px;
  background: #f6efde; border-left: 2px solid var(--cal-gold);
  font-size: 16px; line-height: 1.6; color: #6b5a2e;
}
.pf-window-ico { display: flex; flex-shrink: 0; color: var(--cal-gold); }
.pf-window-txt b { font-weight: 700; }
.pf-window-sep { margin: 0 2px; opacity: .5; }
.pf-window-note { display: block; margin-top: 2px; color: var(--muted-foreground); }

/* 物件カード: 今期・次期の残枠。選ぶ前に比較できるように出す */
.thumb-quota { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border); }
.tq-row { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; color: var(--muted-foreground); white-space: nowrap; }
.tq-row + .tq-row { margin-top: 3px; }
.tq-per { flex: 0 0 42px; white-space: nowrap; font-weight: 700; color: var(--foreground); }
.tq-v b { font-size: 16px; font-weight: 700; color: var(--foreground); }
.tq-v.hi b { color: #6b5a2e; }

/* ==========================================================================
   物件を選択：絞り込みフィルター（.pf-bar / ポップアップ / チップ）
   ========================================================================== */
/* 絞り込みで非表示にするカード。.thumb-card{display:block} が [hidden] を打ち消すため
   より高い詳細度で display:none を効かせる（これが無いと絞り込んでもカードが消えない）。 */
.thumb-card[hidden] { display: none; }
.pf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 2px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.pf-bar .fb-field { display: flex; align-items: center; gap: 7px; }
.pf-bar .fb-field label { font-size: 15px; font-weight: 600; color: var(--muted-foreground); letter-spacing: .04em; }
.fb-select {
  appearance: none; -webkit-appearance: none; font-family: inherit; font-size: 17px; color: var(--foreground);
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 0; padding: 9px 30px 9px 12px; min-width: 150px;
  min-height: 42px; /* 絞り込みボタンと高さを揃える */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236b6a66' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}
.fb-select:focus { outline: none; border-color: var(--foreground); }
.filter-trigger {
  display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 500; color: var(--foreground);
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 0; padding: 9px 15px; min-height: 42px; transition: all .12s;
}
.filter-trigger:hover { border-color: var(--foreground); }
.filter-trigger.has-active { border-color: var(--foreground); background: var(--foreground); color: #fff; }
.filter-trigger svg { width: 16px; height: 16px; }
.filter-trigger .chev { font-size: 14px; opacity: .7; transform: translateY(1px); }
.filter-trigger .fb-num {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 14.5px; font-weight: 700; border-radius: 999px; background: var(--cal-gold); color: #1d1d1b;
}
.filter-trigger.has-active .fb-num { background: #e7d4a6; }
.fb-spacer { flex: 1 1 auto; }
.filter-result { font-size: 16px; color: var(--muted-foreground); white-space: nowrap; }
.filter-result b { color: var(--foreground); font-weight: 700; font-size: 19px; margin: 0 2px; }

.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-chips:empty { display: none; }
.achip { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; color: var(--foreground); background: var(--muted); border: 1px solid var(--border); padding: 5px 9px 5px 11px; }
.achip .x { display: grid; place-items: center; width: 15px; height: 15px; border: 0; border-radius: 999px; background: rgba(0,0,0,.08); font-size: 15px; line-height: 1; color: var(--muted-foreground); cursor: pointer; }
.achip .x:hover { background: var(--destructive-soft); color: var(--destructive); }
.achip-clear { font-size: 16px; color: var(--destructive); background: none; border: 0; padding: 5px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ランクバッジ + タグ（サムネイルカード内） */
.thumb-rank { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; font-size: 14.5px; font-weight: 600; letter-spacing: .06em; color: #1d1d1b; background: rgba(255,255,255,.92); padding: 3px 9px; }
.thumb-rank.r-S { background: #e7d4a6; }
.thumb-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ttag { font-size: 14.5px; color: var(--muted-foreground); background: var(--muted); padding: 2px 7px; letter-spacing: .02em; }
.ttag.opt { color: #6b5a2e; background: #f6efde; }
.ttag.more { cursor: pointer; color: var(--foreground); background: var(--muted); border: 1px solid var(--border-strong); font-weight: 600; }
.ttag.more:hover { border-color: var(--foreground); background: var(--card); }
.thumb-empty { grid-column: 1 / -1; text-align: center; padding: 46px 20px; color: var(--muted-foreground); font-size: 17px; border: 1px dashed var(--border-strong); }
.thumb-empty b { display: block; font-family: "Noto Serif JP", serif; font-size: 20px; color: var(--foreground); margin-bottom: 6px; }

/* 絞り込みポップアップ */
.fpop-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,18,.42); display: none; align-items: center; justify-content: center; padding: 20px; }
.fpop-overlay.show { display: flex; }
.fpop { background: var(--card); width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: pfpop .16s ease; }
@keyframes pfpop { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.fpop-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.fpop-head .t { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 600; }
.fpop-head .t svg { width: 17px; height: 17px; }
.fpop-close { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--muted-foreground); width: 32px; height: 32px; cursor: pointer; }
.fpop-body { padding: 6px 20px 4px; overflow-y: auto; }
.fsec { padding: 16px 0; border-bottom: 1px solid var(--border); }
.fsec:last-child { border-bottom: 0; }
.fsec-title { font-size: 16px; font-weight: 700; letter-spacing: .04em; margin-bottom: 11px; display: flex; align-items: baseline; gap: 8px; }
.fsec-title small { font-size: 14.5px; font-weight: 400; color: var(--muted-foreground); }
.fopt-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.fopt { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: var(--foreground); border: 1px solid var(--border-strong); background: var(--card); padding: 8px 13px; cursor: pointer; transition: all .12s; user-select: none; }
.fopt:hover { border-color: var(--foreground); }
.fopt.on { border-color: var(--foreground); background: var(--foreground); color: #fff; }
.fopt .chk { width: 14px; height: 14px; border: 1.4px solid var(--border-strong); display: grid; place-items: center; font-size: 14px; color: transparent; }
.fopt.on .chk { border-color: #fff; background: #fff; color: var(--foreground); }
.num-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.num-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); }
.num-step { width: 40px; font-size: 23px; line-height: 1; background: var(--card); border: 0; color: var(--foreground); cursor: pointer; }
.num-step:first-child { border-right: 1px solid var(--border-strong); }
.num-step:last-child { border-left: 1px solid var(--border-strong); }
.num-step:hover { background: var(--muted); }
.num-input { width: 72px; text-align: center; font-family: inherit; font-weight: 600; font-size: 22px; color: var(--foreground); background: var(--card); border: 0; padding: 9px 6px; -moz-appearance: textfield; }
.num-input::-webkit-outer-spin-button, .num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-input:focus { outline: none; background: var(--muted); }
.num-input::placeholder { font-weight: 400; font-size: 17px; color: var(--subtle); }
.num-suffix { font-size: 18px; color: var(--muted-foreground); }
.num-clear { margin-left: auto; font-size: 16px; color: var(--muted-foreground); background: none; border: 0; padding: 6px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.num-clear:hover { color: var(--destructive); }
.fpop-foot { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); }
.fpop-foot button { flex: 1; padding: 12px; font-size: 17px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--card); cursor: pointer; }
.fpop-foot .clear { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; color: var(--muted-foreground); }
.fpop-foot .apply { background: var(--foreground); color: #fff; border-color: var(--foreground); }

@media (max-width: 640px) {
  .pf-bar .fb-field { flex: 1 1 100%; justify-content: space-between; }
  .pf-bar .fb-select { flex: 1; min-width: 0; }
  .pf-bar .filter-trigger { flex: 1 1 100%; justify-content: center; }
  .pf-bar .fb-spacer { display: none; }
  .pf-bar .filter-result { width: 100%; order: 9; text-align: right; padding-top: 2px; }
  .fpop-overlay { align-items: flex-end; padding: 0; }
  .fpop { max-width: none; max-height: 90vh; animation: pfsheet .2s ease; }
  @keyframes pfsheet { from { transform: translateY(100%); } to { transform: none; } }
}

/* 契約物件の情報カード */
.property-card { display: flex; gap: 16px; padding: 0; overflow: hidden; }
.property-photo {
  width: 220px; flex-shrink: 0;
  background-size: cover; background-position: center; background-color: var(--muted);
}
.property-body { padding: 16px 18px; flex: 1; min-width: 0; }
.property-head { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.property-name { font-size: 20px; font-weight: 700; color: var(--foreground); }
.property-address { font-size: 16px; color: var(--muted-foreground); margin-top: 4px; }
.property-info {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 18px;
}
.property-info > div { font-size: 16px; }
.property-info dt {
  font-size: 14px; color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
  margin-bottom: 2px;
}
.property-info dd { font-size: 17px; color: var(--foreground); font-weight: 500; }
/* 定員・ランク・駐車場・区分・予約開始のように短い項目を横一列に並べる版 */
.property-info-compact { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
/* 選択中物件の設備一覧（サムネイルでは「+4」で省略されるぶんもここでは全件出す） */
.property-opts { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.property-opts-label {
  font-size: 14px; color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 6px;
}
.property-opts-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.property-rules {
  margin-top: 12px; padding: 8px 12px; background: var(--muted);
  border-radius: var(--radius-sm); font-size: 15px; color: var(--muted-foreground);
}
.property-rules strong { color: var(--foreground); }

/* ==========================================================================
   月グリッドカレンダー (7列) — Luxury Black/Gold Bar Design
   ========================================================================== */
:root {
  --cal-gold:        #c4973a;
  --cal-gold-soft:   #f5edd8;
  --cal-gold-border: #d4a84a;
  --cal-black:       #1a1a1a;
  --cal-gray:        #a8a39a;   /* OUT キャップ */
  --cal-gray-dark:   #6b665c;   /* IN キャップ（OUTより少し濃い） */
  --cal-bar-h:       28px;
  --cal-bar-bottom:  12px;
  --cal-chamfer:     6px;
  --cham-l: polygon(var(--cal-chamfer) 0, 100% 0, 100% 100%, var(--cal-chamfer) 100%, 0 calc(100% - var(--cal-chamfer)), 0 var(--cal-chamfer));
  --cham-r: polygon(0 0, calc(100% - var(--cal-chamfer)) 0, 100% var(--cal-chamfer), 100% calc(100% - var(--cal-chamfer)), calc(100% - var(--cal-chamfer)) 100%, 0 100%);
  --cal-owner-bg:    #e8e4dc;
  --cal-owner-bdr:   #cfc8bb;
  --cal-guest-bg:    #dce4ea;
  --cal-guest-bdr:   #b8c5d1;
  --cal-unavail-bg:  #cdc7bb;
  --cal-unavail-bdr: #b3ac9d;
}

.month-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  user-select: none;
}
.month-head {
  text-align: center; padding: 9px 0; font-size: 15px; font-weight: 700;
  color: #fff; background: var(--cal-black);
  border-radius: var(--radius-sm); letter-spacing: .03em;
}
.month-head:nth-child(1) { background: #b22222; }
.month-head:nth-child(7) { background: #2566a8; }

/* Cell: white background, bars drawn via ::before / ::after.
   overflow:visible so booking bars can bridge the 4px grid gap and
   appear as one continuous bar across cells. Bar edges are driven by
   CSS vars so bridge-l / bridge-r can extend them into the gap. */
.month-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 90px; padding: 5px;
  position: relative; overflow: visible;
  text-decoration: none; color: inherit;
  background-color: var(--card);
  transition: background .1s, border-color .1s;
  --bar-ml: 0;
  --bar-mr: calc(50% + 2px);
  --bar-al: calc(50% + 2px);
  --bar-ar: 0;
}
.month-cell.is-continuing            { --bar-mr: 0; }       /* morning bar becomes full width */
.month-cell.bridge-l                 { --bar-ml: -6px; }    /* connect to previous day */
.month-cell.bridge-r                 { --bar-ar: -6px; }    /* connect to next day */
.month-cell.is-continuing.bridge-r   { --bar-mr: -6px; }
.month-cell.weekend    { background-color: #fdfcfa; }
.month-cell.is-outside { opacity: .28; pointer-events: none; }
/* 本日: 枠線で囲まずに背景色＋「Today」ラベルだけにする（バーと干渉しない） */
.month-cell.is-today   { background-color: #fbf5e6; }
.month-cell.is-past    { background-color: #f7f6f4; }
.month-cell.is-past .month-cell-date { color: #bbb; }
.cell-today-lbl {
  position: absolute; top: 6px; left: 21px;
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
  color: var(--cal-gold); z-index: 4; text-transform: uppercase;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.month-cell-date {
  font-size: 16px; font-weight: 600; color: var(--foreground);
  position: relative; z-index: 4; line-height: 1; display: block;
}
.cell-past-lbl {
  position: absolute; top: 5px; right: 5px;
  font-size: 14px; font-weight: 700; letter-spacing: .07em;
  color: #ccc; z-index: 4;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* ----------------------------------------------------------
   Booking Bars  (bottom-anchored, lower than vertical center)
   ::before = morning portion (left half, checkout end)
   ::after  = afternoon portion (right half, checkin start)
   A 2px inset on each side of center leaves a visible gap so
   back-to-back bookings (OUT|IN same day) never merge.
   ---------------------------------------------------------- */
.month-cell.morn-owner::before,
.month-cell.morn-guest::before,
.month-cell.morn-unavailable::before {
  content: '';
  position: absolute;
  bottom: var(--cal-bar-bottom);
  left: var(--bar-ml); right: var(--bar-mr);
  height: var(--cal-bar-h);
  border-radius: 0;
  z-index: 1; pointer-events: none;
}
.month-cell.aft-owner::after,
.month-cell.aft-guest::after,
.month-cell.aft-unavailable::after {
  content: '';
  position: absolute;
  bottom: var(--cal-bar-bottom);
  left: var(--bar-al); right: var(--bar-ar);
  height: var(--cal-bar-h);
  border-radius: 0;
  z-index: 1; pointer-events: none;
}
/* 細枠チケット: 帯の上下にヘアライン枠を入れる */
.month-cell.morn-owner::before     { background: var(--cal-owner-bg);   box-shadow: inset 0 1px 0 var(--cal-owner-bdr), inset 0 -1px 0 var(--cal-owner-bdr); }
.month-cell.morn-guest::before     { background: var(--cal-guest-bg);   box-shadow: inset 0 1px 0 var(--cal-guest-bdr), inset 0 -1px 0 var(--cal-guest-bdr); }
.month-cell.morn-unavailable::before { background: var(--cal-unavail-bg); box-shadow: inset 0 1px 0 var(--cal-unavail-bdr), inset 0 -1px 0 var(--cal-unavail-bdr); }
.month-cell.aft-owner::after       { background: var(--cal-owner-bg);   box-shadow: inset 0 1px 0 var(--cal-owner-bdr), inset 0 -1px 0 var(--cal-owner-bdr); }
.month-cell.aft-guest::after       { background: var(--cal-guest-bg);   box-shadow: inset 0 1px 0 var(--cal-guest-bdr), inset 0 -1px 0 var(--cal-guest-bdr); }
.month-cell.aft-unavailable::after { background: var(--cal-unavail-bg); box-shadow: inset 0 1px 0 var(--cal-unavail-bdr), inset 0 -1px 0 var(--cal-unavail-bdr); }

/* Continuing booking: morning bar runs full width, afternoon bar hidden.
   Rounded ends only show where the bar is NOT bridged (week boundaries),
   giving a clean continuous band across the row. */
.month-cell.is-continuing.morn-owner::before,
.month-cell.is-continuing.morn-guest::before,
.month-cell.is-continuing.morn-unavailable::before { border-radius: 0; }
.month-cell.is-continuing.aft-owner::after,
.month-cell.is-continuing.aft-guest::after,
.month-cell.is-continuing.aft-unavailable::after   { display: none; }

/* チケットエッジ: 予約の見た目上の始点/終点だけ角を斜めにカット。
   連続バーの週頭(左)・週末(右)を chamfer（中間は橋渡しで直線のまま）。 */
.month-cell.is-continuing:not(.bridge-l).morn-owner::before,
.month-cell.is-continuing:not(.bridge-l).morn-guest::before,
.month-cell.is-continuing:not(.bridge-l).morn-unavailable::before { clip-path: var(--cham-l); }
.month-cell.is-continuing:not(.bridge-r).morn-owner::before,
.month-cell.is-continuing:not(.bridge-r).morn-guest::before,
.month-cell.is-continuing:not(.bridge-r).morn-unavailable::before { clip-path: var(--cham-r); }

/* チェックイン(午後帯)の始点・チェックアウト(午前帯)の終点も帯本体を角カットし、
   キャップ背後に直角が残らないようにする */
.month-cell.aft-owner::after,
.month-cell.aft-guest::after,
.month-cell.aft-unavailable::after { clip-path: var(--cham-l); }
.month-cell:not(.is-continuing).morn-owner::before,
.month-cell:not(.is-continuing).morn-guest::before,
.month-cell:not(.is-continuing).morn-unavailable::before { clip-path: var(--cham-r); }

/* ----------------------------------------------------------
   Bar labels (icon + name overlaid on bars)
   ---------------------------------------------------------- */
.cal-bar-label {
  position: absolute;
  bottom: var(--cal-bar-bottom);
  height: var(--cal-bar-h);
  display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 0 6px;
  z-index: 2; overflow: visible;
  pointer-events: none;
}
/* 予約全体（--span 列ぶん）に跨って名前を中央寄せ（左右余白を均等に）。
   始点=チェックインのセル中央(IN位置)。終点は週末で終わるならセル右端、
   チェックアウトで終わるならそのセル中央(OUT位置)。 */
.cal-bar-label-in {
  left: calc(50% + 2px); right: auto;
  width: calc((var(--span, 1) - 1) * (100% + 4px) + 50%);   /* 週末終わり: 最終セル右端まで */
}
.cal-bar-label-in.ends-co {
  width: calc((var(--span, 1) - 1) * (100% + 4px));          /* チェックアウト終わり: OUT位置まで */
}
.cal-bar-label-full {
  left: 0; right: auto;
  width: calc(var(--span, 1) * 100% + (var(--span, 1) - 1) * 4px);  /* 週末終わり */
}
.cal-bar-label-full.ends-co {
  width: calc((var(--span, 1) - 1) * (100% + 4px) + 50%);    /* チェックアウト終わり: OUT位置まで */
}

/* OWN / GST のロール表記（アイコンの代わり） */
.bar-role {
  flex-shrink: 0; font-size: 14px; font-weight: 800; letter-spacing: .03em;
  line-height: 1; color: rgba(26,26,26,.5);
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.role-sp { display: none; }
.bar-name {
  font-size: 15px; font-weight: 600; line-height: 1;
  color: rgba(26,26,26,.82);
  white-space: nowrap; overflow: visible; flex: 0 0 auto;
}

/* ----------------------------------------------------------
   IN / OUT caps — attached to the bar's start / end point.
   IN  = leading cap of the afternoon (check-in) bar  → black
   OUT = trailing cap of the morning (check-out) bar  → gray
   ---------------------------------------------------------- */
.bar-io {
  position: absolute;
  bottom: var(--cal-bar-bottom);
  height: var(--cal-bar-h);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
  color: #fff; z-index: 3; pointer-events: none;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.bar-io-in {
  left: calc(50% + 2px); width: 22px;
  background: var(--cal-gray-dark);
  clip-path: var(--cham-l);   /* 始点側の角を斜めカット */
}
.bar-io-out {
  right: calc(50% + 2px); width: 26px;
  background: var(--cal-gray);
  clip-path: var(--cham-r);   /* 終点側の角を斜めカット */
}

/* ----------------------------------------------------------
   Selectable & new-booking selection states
   ---------------------------------------------------------- */
.month-cell.kind-available.is-selectable { cursor: pointer; }
.month-cell.kind-available.is-selectable:hover {
  background-color: var(--cal-gold-soft);
  border-color: var(--cal-gold-border);
}
.month-cell.is-checkin {
  background-color: var(--cal-black) !important;
  border-color: var(--cal-black);
}
.month-cell.is-checkin .month-cell-date { color: #fff; }
.month-cell.is-checkin::before {
  content: 'CHECK IN';
  position: absolute; bottom: 9px; left: 0; right: 0;
  text-align: center; font-size: 14px; font-weight: 800;
  letter-spacing: .12em; color: rgba(255,255,255,.6);
  font-family: "Helvetica Neue", Arial, sans-serif;
  z-index: 2; pointer-events: none;
}
.month-cell.is-checkout {
  background-color: var(--cal-black) !important;
  border-color: var(--cal-black);
}
.month-cell.is-checkout .month-cell-date { color: #fff; }
.month-cell.is-checkout::before {
  content: 'CHECK OUT';
  position: absolute; bottom: 9px; left: 0; right: 0;
  text-align: center; font-size: 14px; font-weight: 800;
  letter-spacing: .12em; color: rgba(255,255,255,.6);
  font-family: "Helvetica Neue", Arial, sans-serif;
  z-index: 2; pointer-events: none;
}
.month-cell.is-in-range {
  background-color: var(--cal-gold-soft);
  border-color: var(--cal-gold-border);
}
.month-cell.is-in-range::before {
  content: '予約予定';
  position: absolute; bottom: 9px; left: 0; right: 0;
  text-align: center; font-size: 14px; font-weight: 600;
  color: var(--cal-gold); z-index: 2; pointer-events: none;
}
.month-cell.is-preview {
  background-color: var(--cal-gold-soft);
  border-color: var(--cal-gold-border); opacity: .8;
}
.month-cell.is-preview-end {
  outline: 2px dashed var(--cal-gold); outline-offset: -3px; opacity: 1;
}

/* ----------------------------------------------------------
   Step bar
   ---------------------------------------------------------- */
.cal-step-bar {
  margin-top: 14px; padding: 11px 14px;
  background: #f9f7f4; border: 1px solid #e8e3da;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cal-step {
  display: flex; align-items: center; gap: 5px;
  color: #ccc; font-size: 16px; transition: color .2s; white-space: nowrap;
}
.cal-step.is-active { color: var(--cal-black); font-weight: 600; }
.cal-step.is-done   { color: var(--cal-gold); }
.cal-step-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: #e0ddd8; color: #aaa;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
  transition: background .2s, color .2s;
}
.cal-step.is-active .cal-step-num { background: var(--cal-black); color: #fff; }
.cal-step.is-done   .cal-step-num { background: var(--cal-gold);   color: #fff; }
.cal-step-sep  { color: #ccc; font-size: 18px; }
.cal-step-guide { margin-left: auto; font-size: 16px; color: #888; font-style: italic; }
.cal-step-bar.is-error .cal-step-guide {
  color: var(--destructive); font-style: normal; font-weight: 600;
}

/* RESERVATION label */
.cal-header-label {
  font-size: 14px; font-weight: 800; letter-spacing: .22em;
  color: var(--cal-gold); margin-bottom: 6px;
  font-family: "Helvetica Neue", Arial, sans-serif; text-transform: uppercase;
}

/* ----------------------------------------------------------
   Day detail panel
   ---------------------------------------------------------- */
.cal-day-panel { margin-top: 12px; display: none; }
.cal-day-panel.is-visible { display: block; animation: cal-fadein .18s ease; }
@keyframes cal-fadein { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.cal-day-panel-head {
  font-size: 14px; font-weight: 800; letter-spacing: .18em;
  color: var(--cal-gold); margin-bottom: 7px;
  font-family: "Helvetica Neue", Arial, sans-serif; text-transform: uppercase;
}
.cal-day-panel-card {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  min-height: 62px;
}
.cal-day-panel-icon {
  flex-shrink: 0; width: 38px; height: 38px;
  background: #f0ede8; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.cal-day-panel-body { flex: 1; min-width: 0; }
.cal-day-panel-date { font-size: 18px; font-weight: 700; color: var(--foreground); }
.cal-day-panel-desc { font-size: 16px; color: var(--muted-foreground); margin-top: 3px; line-height: 1.45; }
.cal-day-panel-badge {
  flex-shrink: 0; font-size: 15px; font-weight: 600; align-self: flex-start;
  padding: 4px 10px; border-radius: 0; white-space: nowrap;
}
.badge-avail   { background: var(--cal-gold-soft); color: var(--cal-gold); border: 1px solid var(--cal-gold-border); }
.badge-booked  { background: #f0ede8; color: #888; border: 1px solid #ddd; }
.badge-unavail { background: #eee; color: #999; border: 1px solid #ddd; }

/* ----------------------------------------------------------
   Existing-booking popup — ブラックチケット（白黒反転・重厚）
   ---------------------------------------------------------- */
.cal-pop-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,10,8,0);
  padding: 20px;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: background .4s ease, opacity .3s ease, visibility 0s linear .45s;
}
.cal-pop-overlay.is-open {
  visibility: visible; opacity: 1; pointer-events: auto;
  background: rgba(12,10,8,.62);
  transition: background .4s ease, opacity .2s ease;
}
.cal-pop {
  position: relative; width: 100%; max-width: 360px;
  background: #161412; color: #f4efe6;
  border: 1px solid #2c2823;
  box-shadow: 0 26px 70px -12px rgba(0,0,0,.7), 0 8px 20px rgba(0,0,0,.45);
  /* ほんの少し遅く・重めに立ち上げる */
  opacity: 0; transform: translateY(16px) scale(.965);
  transition: opacity .42s cubic-bezier(.16,.84,.3,1), transform .42s cubic-bezier(.16,.84,.3,1);
}
.cal-pop-overlay.is-open .cal-pop { opacity: 1; transform: none; transition-delay: .05s; }
.cal-pop-close {
  position: absolute; top: 9px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: rgba(244,239,230,.5); padding: 4px; z-index: 2;
}
.cal-pop-close:hover { color: #fff; }

.cal-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid #2c2823;
}
.cal-pop-brand-label {
  font-family: "Raleway", "Noto Serif JP", serif;
  font-size: 17px; font-weight: 700; letter-spacing: .14em; color: #fff;
}
.cal-pop-brand-sub {
  font-size: 14px; letter-spacing: .22em; color: var(--cal-gold);
  margin-top: 3px; font-family: "Helvetica Neue", Arial, sans-serif;
}
.cal-pop-kind {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 700; color: #f4efe6;
  border: 1px solid #3a352e; padding: 5px 9px; white-space: nowrap;
}
.cal-pop-kind-ico {
  font-size: 14px; font-weight: 800; letter-spacing: .05em;
  color: var(--cal-gold);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.cal-pop-hero {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 10px; align-items: center; padding: 22px 18px 20px;
}
.cal-pop-date { text-align: center; }
.cal-pop-date-lbl {
  font-size: 14px; font-weight: 800; letter-spacing: .18em; color: var(--cal-gold);
  font-family: "Helvetica Neue", Arial, sans-serif; display: block; margin-bottom: 7px;
}
.cal-pop-date-md {
  font-family: "Noto Serif JP", serif;
  font-size: 32px; line-height: 1; font-weight: 700; color: #fff;
  letter-spacing: .02em; display: block;
}
.cal-pop-date-sub { font-size: 15px; color: rgba(244,239,230,.55); margin-top: 7px; display: block; }
.cal-pop-nights {
  flex-shrink: 0; width: 62px; height: 62px; border: 1px solid #4a443b; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cal-pop-nights-num {
  font-family: "Noto Serif JP", serif;
  font-size: 26px; font-weight: 700; line-height: 1; color: #fff;
}
.cal-pop-nights-lbl { font-size: 14px; color: rgba(244,239,230,.55); letter-spacing: .1em; margin-top: 2px; }

.cal-pop-perf {
  height: 1px; margin: 0 18px;
  background: repeating-linear-gradient(to right, #4a443b 0 5px, transparent 5px 10px);
}
.cal-pop-name-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 18px 4px;
}
.cal-pop-name-lbl { font-size: 15px; color: rgba(244,239,230,.55); }
.cal-pop-name-val { font-size: 18px; font-weight: 600; color: #fff; }
.cal-pop-link {
  display: block; margin: 14px 18px 18px; text-align: center;
  padding: 12px; background: #f4efe6; color: #161412;
  font-size: 17px; font-weight: 700; text-decoration: none; letter-spacing: .02em;
  transition: background .2s;
}
.cal-pop-link:hover { background: #fff; }

/* ----------------------------------------------------------
   宿泊枠の残り（クォータ）サマリ
   ---------------------------------------------------------- */
.quota-card { }
.quota-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.quota-shares {
  font-size: 16px; font-weight: 600; color: var(--foreground);
  background: #f3f0ea; border: 1px solid var(--border);
  padding: 5px 12px; white-space: nowrap;
}
.quota-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.quota-horizon {
  font-size: 16px; color: var(--muted-foreground);
  background: #f9f7f4; border: 1px solid var(--border);
  padding: 8px 12px; margin-bottom: 12px;
}
.quota-horizon strong { color: var(--foreground); }
/* .quota-period* / .quota-chevron は削除（HR-NEW-136・2026-08-22）。
   宿泊枠の旧デザイン（1期＝1カード）の指定で、テーマのPHP・JSのどこからも
   使われていなかった（全文検索で0件）。今の枠の表示は
   ・TOP … .hrq-table / .hrqc-*（owner-immersive.css）
   ・新規予約 … .qtbl / .qc-*（このファイル）
   の2系統で、こちらは残骸。★消しても画面は変わらない。 */
.quota-now {
  margin-left: auto; font-size: 14px; font-weight: 700; color: #fff;
  background: var(--cal-gold); padding: 2px 7px; letter-spacing: .05em;
}
.quota-remain { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
.quota-remain-num { font-size: 32px; font-weight: 800; line-height: 1; color: var(--cal-black); }
.quota-remain-unit { font-size: 16px; color: var(--muted-foreground); }
.quota-remain-cap { font-size: 15px; }
.quota-split { display: flex; flex-direction: column; gap: 4px; }
.quota-split-item {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; padding: 4px 8px; background: #f7f5f1;
}
.quota-split-lbl { color: var(--muted-foreground); }
.quota-split-val { font-weight: 600; color: var(--foreground); }
.quota-open {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border);
  font-size: 15px; color: var(--muted-foreground);
}
.quota-open.is-open { color: #1d7a3e; font-weight: 600; }
.quota-open-from { color: var(--muted-foreground); font-weight: 400; }
.quota-note {
  margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--muted-foreground);
}

/* ===== 使う宿泊枠の選択テーブル（複数物件・行選択式） ===== */
.quota-pick-lead {
  font-size: 16px; line-height: 1.7; color: var(--muted-foreground);
  background: #f9f7f4; border: 1px solid var(--border);
  padding: 9px 12px; margin-bottom: 14px;
}
.quota-pick-lead strong { color: var(--foreground); }
.qtbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.qtbl {
  width: 100%; border-collapse: collapse; font-size: 16.5px; min-width: 720px;
}
.qtbl th, .qtbl td {
  border: 1px solid var(--border); padding: 8px 10px;
  text-align: center; vertical-align: middle;
}
.qtbl thead th { font-weight: 500; background: var(--muted); color: var(--muted-foreground); }
.qtbl thead .qc-tier { font-size: 16px; font-weight: 700; color: var(--foreground); }
.qtbl thead .qc-range { font-size: 14.5px; color: var(--muted-foreground); font-weight: 400; }
.qtbl thead .qc-waku { font-size: 14.5px; color: var(--muted-foreground); }
.qtbl thead .is-cur { background: #faf6ee; }
.qtbl .qc-prop { text-align: left; white-space: nowrap; }
.qtbl .qc-share { white-space: nowrap; color: var(--muted-foreground); }
.qtbl .qc-share small { font-size: 14px; margin-left: 1px; }
.qtbl tbody .qc-cell { white-space: nowrap; color: var(--foreground); }
.qtbl tbody .qc-cell b { font-size: 19px; font-weight: 600; }
.qtbl tbody .qc-cell small { font-size: 14px; color: var(--muted-foreground); }
.qtbl .qc-cell.is-cur { background: #faf6ee; }
/* 行（物件）の選択 */
.qtbl tbody .qrow { cursor: pointer; transition: background .12s; }
.qtbl tbody .qrow:hover { background: #f5f2ec; }
.qtbl tbody .qrow:focus-visible { outline: 2px solid var(--cal-gold); outline-offset: -2px; }
.qtbl tbody .qrow.is-selected td { background: #fbf4e6; }
.qtbl tbody .qrow.is-selected .qc-cell.is-cur { background: #f7ecd4; }
.qtbl .qc-prop { position: relative; }
.qr-radio {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); margin-right: 8px;
  vertical-align: middle; box-sizing: border-box;
}
.qrow.is-selected .qr-radio {
  border-color: var(--cal-gold); background: var(--cal-gold);
  box-shadow: inset 0 0 0 2.5px #fff;
}
.qr-name { font-weight: 600; color: var(--foreground); vertical-align: middle; }
.qr-sub { display: block; font-size: 14.5px; color: var(--muted-foreground); margin: 3px 0 0 21px; }
.qtbl tfoot td { background: var(--muted); font-weight: 700; }
.qtbl tfoot .qc-prop, .qtbl tfoot .qc-share, .qtbl tfoot .qc-cell b { color: var(--foreground); }
@media (max-width: 720px) {
  .qtbl { font-size: 15.5px; min-width: 620px; }
  .qtbl th, .qtbl td { padding: 7px 8px; }
  .qtbl .qc-prop { position: sticky; left: 0; z-index: 2; background: var(--card); }
  .qtbl .qrow.is-selected .qc-prop { background: #fbf4e6; }
}

/* 上の旧デザインに対するスマホ指定も削除（HR-NEW-136）。
   .quota-grid / .quota-remain-num / .quota-toggle / .quota-period-body も
   同じく、どこからも使われていない。 */

/* Legend */
.legend-dot.legend-available   { background: var(--card); border: 1px solid var(--border-strong); }
.legend-dot.legend-unavailable { background: var(--cal-unavail-bg); border: 1px solid var(--cal-unavail-bdr); }
.legend-dot.legend-selected    { background: var(--cal-black); }
/* Owner / Guest は OWN / GST のテキスト表記で区別 */
.legend-role-item { display: inline-flex; align-items: center; }
.cal-legend .bar-role { margin-right: 5px; color: #6f6a60; font-size: 14px; }

/* Mobile */
@media (max-width: 480px) {
  :root { --cal-bar-h: 22px; --cal-bar-bottom: 7px; --cal-chamfer: 4px; }
  .month-cell { min-height: 60px; padding: 3px; }
  .month-cell-date { font-size: 15px; }
  /* 本日ラベルは右上の空きスペースへ（下部のバーと被らないように） */
  .cell-today-lbl { top: 3px; left: auto; right: 3px; font-size: 14px; }
  /* Mobile: 宿泊者名はプライバシー配慮で一切表示しない（ロール表記のみ）。
     詳細はポップアップ側でも名前を出さない。 */
  .cal-bar-label .bar-name { display: none; }
  .cal-pop-name-row { display: none !important; }
  /* ロールは O / G の短縮表記に */
  .role-pc { display: none; }
  .role-sp { display: inline; }
  .bar-io { font-size: 14px; letter-spacing: 0; }
  .bar-io-in  { width: 16px; }
  .bar-io-out { width: 18px; }
  .cal-day-panel { display: block !important; min-height: 68px; }
  .cal-step-bar { padding: 9px 12px; gap: 5px; }
  .cal-step-label { display: none; }
  .cal-step-guide { margin-left: 0; width: 100%; order: 4; font-size: 15px; }
  .month-cell.is-checkin::before,
  .month-cell.is-checkout::before,
  .month-cell.is-in-range::before { display: none; }
}

/* 物件サムネ: 所有/相互利用の区別バッジ */
.thumb-photo { position: relative; }
.thumb-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 14.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 3px;
  backdrop-filter: blur(4px); box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.thumb-badge-owned { background: rgba(200,168,102,.95); color: #1d1d1b; }
.thumb-badge-cross { background: rgba(45,45,45,.78); color: #ffffff; }
.thumb-card-owned.is-active { border-color: var(--cal-gold); box-shadow: 0 0 0 2px rgba(200,168,102,.25); }
.thumb-card-cross { opacity: .92; }
.thumb-card-cross:hover { opacity: 1; }

/* (旧 cross-toggle / cross-panel ブロックは廃止。所有→相互利用を1グリッドで統合表示) */

/* 宿泊枠の使用元（相互利用時） */
.quota-src { margin-bottom: 12px; padding: 11px 13px; background: #fbf6ee; border: 1px solid var(--cal-gold-border); }
.quota-src-label { font-size: 16px; color: var(--foreground); line-height: 1.5; margin-bottom: 9px; }
.quota-src-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.quota-src-btn {
  font-size: 16px; font-weight: 600; padding: 7px 13px;
  border: 1px solid var(--border-strong); background: #fff; color: var(--foreground); text-decoration: none;
}
.quota-src-btn.is-active { background: var(--cal-black); color: #fff; border-color: var(--cal-black); }
.quota-src-note { font-size: 15px; color: var(--muted-foreground); margin-top: 9px; }

.booking-inline { background: var(--muted); border: 1px solid var(--border-strong); }
.kv-inline { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: 17px; margin-bottom: 12px; }
.kv-inline dt { color: var(--muted-foreground); }
.kv-inline dd { color: var(--foreground); font-weight: 500; }

/* ==========================================================================
   予約チケット
   ========================================================================== */
.ticket {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px -8px rgba(29, 29, 27, 0.18), 0 2px 6px -2px rgba(29, 29, 27, 0.08);
  position: relative;
  overflow: hidden;
  max-width: 760px;
  margin: 0 auto;
}
.ticket-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  background: var(--foreground); color: #fff;
}
.ticket-brand-label {
  font-family: "Raleway", "Noto Serif JP", serif;
  letter-spacing: 0.14em; font-size: 17px; font-weight: 700;
}
.ticket-brand-sub {
  font-size: 15px; color: rgba(255,255,255,.65); margin-top: 2px; letter-spacing: 0.05em;
}
.ticket-meta { text-align: right; }
.ticket-code {
  font-family: var(--font-mono); font-size: 17px; letter-spacing: 0.04em;
  color: #fff; opacity: .9;
}
.ticket-status { margin-top: 4px; }

.ticket-hero {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 12px; align-items: center;
  padding: 28px 28px 24px;
  background: #fff;
}
.ticket-date { text-align: center; }
.ticket-date-label {
  font-size: 14px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--muted-foreground); margin-bottom: 6px;
}
.ticket-date-md {
  font-family: "Noto Serif JP", serif;
  font-size: 38px; line-height: 1; font-weight: 700; color: var(--foreground);
  letter-spacing: 0.02em;
}
.ticket-date-sub {
  font-size: 16px; color: var(--muted-foreground); margin-top: 8px;
}
.ticket-nights {
  position: relative;
  width: 80px; height: 80px;
  border: 1px solid var(--border-strong); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff;
}
.ticket-nights-num { font-size: 30px; font-weight: 700; line-height: 1; color: var(--foreground); }
.ticket-nights-label { font-size: 14px; color: var(--muted-foreground); letter-spacing: 0.1em; margin-top: 2px; }
.ticket-arrow {
  position: absolute; left: -50%; right: -50%; top: 50%;
  transform: translateY(-50%);
  color: var(--border-strong); font-size: 22px; pointer-events: none;
  z-index: -1; text-align: center;
}

.ticket-property {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 24px; border-top: 1px solid var(--border);
}
.ticket-property-photo {
  width: 64px; height: 64px; border-radius: var(--radius-md);
  background-size: cover; background-position: center; background-color: var(--muted);
  flex-shrink: 0;
}
.ticket-property-name { font-size: 19px; font-weight: 700; }
.ticket-property-address { font-size: 16px; color: var(--muted-foreground); margin-top: 2px; }
.ticket-property-unit { font-size: 16px; color: var(--muted-foreground); margin-top: 4px; }

.ticket-perforation {
  position: relative; height: 24px; margin: 0;
  background:
    radial-gradient(circle at 0 50%, transparent 11px, #fff 12px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(to right, var(--border-strong) 0 5px, transparent 5px 10px);
  background-position: 0 50%;
  background-size: 100% 24px, 100% 1px;
  background-repeat: no-repeat;
}
.ticket-perforation::before,
.ticket-perforation::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  background: var(--background);
  border-radius: 50%;
}
.ticket-perforation::before { left: -12px; }
.ticket-perforation::after  { right: -12px; }

.ticket-body {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px;
  padding: 20px 24px 18px;
}
.ticket-field-wide { grid-column: 1 / -1; }
.ticket-field-label {
  font-size: 14px; font-weight: 700; color: var(--muted-foreground);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 3px;
}
.ticket-field-value { font-size: 18px; color: var(--foreground); font-weight: 500; }
.ticket-field-value.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

.ticket-rules {
  margin: 0 24px 18px; padding: 12px 14px;
  background: var(--muted); border-radius: var(--radius-sm);
  font-size: 16px;
}
.ticket-rules strong {
  display: block; margin-bottom: 4px; font-size: 14px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.ticket-rules p { color: var(--foreground); line-height: 1.6; }

.ticket-footer {
  padding: 12px 24px 18px;
  border-top: 1px dashed var(--border);
}
.ticket-footer-note {
  font-size: 15px; color: var(--muted-foreground); line-height: 1.6;
}

.ticket-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin: 20px auto 0; max-width: 760px; gap: 12px; flex-wrap: wrap;
}

/* ご滞在までの流れ (timeline) */
.stay-journey {
  max-width: 760px; margin: 24px auto 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 24px;
}
.stay-journey-title {
  font-size: 17px; font-weight: 700; color: var(--foreground);
  letter-spacing: 0.06em; margin-bottom: 18px;
}
.journey-steps {
  list-style: none; padding: 0; margin: 0; position: relative;
}
.journey-steps::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.journey-step {
  position: relative; padding: 0 0 18px 36px;
  display: flex; gap: 0;
}
.journey-step:last-child { padding-bottom: 0; }
.journey-marker {
  position: absolute; left: 4px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--border-strong);
  z-index: 1;
}
.journey-step.done .journey-marker {
  background: var(--success); border-color: var(--success);
}
.journey-step.done .journey-marker::after {
  content: "✓"; position: absolute; inset: 0;
  color: #fff; font-size: 14px; font-weight: 700; line-height: 12px;
  text-align: center;
}
.journey-step.is-current .journey-marker {
  background: var(--foreground); border-color: var(--foreground);
  box-shadow: 0 0 0 4px rgba(29,29,27,.12);
}
.journey-step.future { opacity: .6; }
.journey-step.future .journey-marker { background: #fff; border-color: var(--border); }

.journey-body { flex: 1; }
.journey-when {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.journey-step.is-current .journey-when { color: var(--foreground); }
.journey-what {
  font-size: 18px; font-weight: 600; color: var(--foreground);
  margin-top: 2px;
}
.journey-step.is-current .journey-what {
  font-weight: 700;
}
.journey-step.is-current .journey-what::before {
  content: "今ここ"; display: inline-block;
  background: var(--foreground); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 999px; margin-right: 8px;
  vertical-align: 1px;
}
.journey-note {
  font-size: 16px; color: var(--muted-foreground); margin-top: 4px;
  line-height: 1.6;
}
.journey-cta { margin-top: 8px; display: inline-block; }

/* ステップに「要対応」アクセント（黒白反転・ハイコントラスト） */
.journey-step.journey-step-attention .journey-marker {
  background: var(--foreground); border-color: var(--foreground);
  box-shadow: 0 0 0 4px rgba(29,29,27,.16);
  animation: hr-pulse 2.2s ease-in-out infinite;
}
.journey-step.journey-step-attention .journey-marker::after {
  content: "!"; position: absolute; inset: 0;
  color: #fff; font-size: 15px; font-weight: 700; line-height: 12px;
  text-align: center;
}
@keyframes hr-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(29,29,27,.16); }
  50%      { box-shadow: 0 0 0 7px rgba(29,29,27,.04); }
}

/* ===== 予約詳細: ご滞在までの流れ（フェーズ帯・宿泊情報タブ内に統合） ===== */
.stay-flow { margin-top: 8px; }
.stay-flow-title { font-size: 17px; font-weight: 700; letter-spacing: .06em; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.stay-flow-hint { font-size: 15.5px; color: var(--muted-foreground); margin: 0 0 14px; }
.flow-badge { display: inline-block; padding: 1px 8px; font-size: 14.5px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; white-space: nowrap; }
.flow-badge-red { background: var(--destructive-soft); color: var(--destructive); }
.flow-badge-gray { background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border); }
.flow-badge-green { background: var(--success-soft); color: var(--success); }
.flow-meta { font-size: 16px; color: var(--muted-foreground); font-weight: 400; }
.flow-cta { margin-top: 9px; }
.flow-phase { border: 1px solid var(--border); margin-bottom: 8px; background: var(--card); }
.flow-phase.is-focus { border-color: #e2d6bd; }
/* まだ到達していないフェーズ（ご滞在後など）は淡く置く。押せば開ける。
   開いたら淡くしない ── 見出しより中身のほうが濃い逆転を避けるため（HR-NEW-66） */
.flow-phase.is-future:not(.is-open) .flow-phase-head { opacity: .68; }
.flow-phase.is-future:not(.is-open) .flow-phase-head:hover { opacity: 1; }
.flow-phase-head { width: 100%; appearance: none; border: 0; border-radius: 0; background: var(--muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; text-align: left; cursor: pointer; font-family: inherit; }
.flow-phase.is-focus .flow-phase-head { background: #f6f1e6; }
.flow-phase-head:hover { background: var(--border); }
.flow-phase.is-focus .flow-phase-head:hover { background: #f1e9d8; }
.flow-phase-no { font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--subtle); }
.flow-phase.is-focus .flow-phase-no { color: #a9853f; }
.flow-phase-title { font-size: 18px; font-weight: 700; }
.flow-phase-role { font-size: 15.5px; color: var(--muted-foreground); }
.flow-phase-summary { margin-left: auto; font-size: 15.5px; color: var(--muted-foreground); font-weight: 600; }
.flow-phase-caret { font-size: 16px; color: var(--muted-foreground); transition: transform .18s; line-height: 1; flex-shrink: 0; }
.flow-phase.is-open .flow-phase-caret { transform: rotate(180deg); }
.flow-phase-panel { display: none; padding: 16px 16px 8px; border-top: 1px solid var(--border); }
.flow-phase.is-open .flow-phase-panel { display: block; }
.flow-steps { position: relative; list-style: none; padding: 0; margin: 0; }
.flow-steps::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 16px; width: 1px; background: var(--border); }
.flow-step { position: relative; padding: 0 0 18px 26px; display: flex; }
.flow-step:last-child { padding-bottom: 4px; }
.flow-dot { position: absolute; left: 0; top: 3px; width: 13px; height: 13px; background: #fff; border: 2px solid var(--border-strong); z-index: 1; }
.flow-step.is-attention .flow-dot { background: #fff; border-color: var(--destructive); animation: flow-glow 2.6s ease-in-out infinite; }
.flow-step.st-done .flow-dot { background: var(--success); border-color: var(--success); }
.flow-step.st-done .flow-dot::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 14px; font-weight: 700; line-height: 9px; text-align: center; }
.flow-step.st-current .flow-dot { background: var(--destructive); border-color: var(--destructive); animation: flow-glow 2.6s ease-in-out infinite; }
@keyframes flow-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(181,49,39,0); } 50% { box-shadow: 0 0 0 5px rgba(181,49,39,.16), 0 0 9px 3px rgba(181,49,39,.30); } }
@keyframes flow-shimmer { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flow-step.is-attention .flow-dot, .flow-step.st-current .flow-dot, .flow-step.st-current .flow-what::before { animation: none; } }
.flow-step.st-future { opacity: .72; }
.flow-body { flex: 1; min-width: 0; }
.flow-when { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--muted-foreground); }
.flow-step.is-attention .flow-when { color: var(--destructive); }
.flow-what { font-size: 18.5px; font-weight: 700; margin-top: 3px; }
.flow-step.st-current .flow-what::before { content: "今ここ"; display: inline-block; background: var(--destructive); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; margin-right: 8px; vertical-align: 1px; animation: flow-shimmer 2.6s ease-in-out infinite; }
.flow-note { font-size: 16px; color: var(--muted-foreground); margin-top: 5px; line-height: 1.65; }

/* 未完了時の常時開いたパネル（黒背景・白文字でハイコントラスト） */
.journey-action-panel {
  margin-top: 14px;
  background: var(--foreground);
  border: 1px solid var(--foreground);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  color: #fff;
}
.journey-action-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.journey-action-banner-icon {
  font-size: 24px; line-height: 1; flex-shrink: 0;
  color: #fff;
}
.journey-action-banner-title {
  font-size: 20px; font-weight: 700; color: #fff;
  margin-bottom: 4px; letter-spacing: .01em;
}
.journey-action-banner-sub {
  font-size: 16px; color: rgba(255,255,255,.78); line-height: 1.65;
}
.journey-action-banner-sub strong { color: #fff; font-weight: 700; }

/* 凡例（代理で入力 / メールで依頼の説明） */
.journey-action-legend {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; margin-bottom: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  font-size: 16px; color: rgba(255,255,255,.85); line-height: 1.6;
}
.journey-action-legend .legend-item {
  display: flex; align-items: flex-start; gap: 10px;
}
.journey-action-legend .legend-item strong { color: #fff; font-weight: 700; }
.journey-action-legend .legend-icon {
  flex-shrink: 0; color: var(--foreground);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: #fff; border-radius: 0;
}

/* 完了時の折りたたみ */
.journey-collapsible {
  margin-top: 14px;
}
.journey-collapsible > summary.journey-collapsible-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-size: 17px; font-weight: 600; color: var(--muted-foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0;
  user-select: none;
}
.journey-collapsible > summary.journey-collapsible-toggle::-webkit-details-marker { display: none; }
.journey-collapsible > summary.journey-collapsible-toggle::before {
  content: "▸"; display: inline-block;
  transition: transform .15s ease;
  font-size: 15px;
}
.journey-collapsible[open] > summary.journey-collapsible-toggle::before {
  transform: rotate(90deg);
}

/* 未完了パネル内のテーブル: 黒背景に合わせて白系トーンへ */
.journey-action-panel .registry-table { color: #fff; }
.journey-action-panel .registry-table thead tr {
  color: rgba(255,255,255,.55) !important;
  border-bottom-color: rgba(255,255,255,.18) !important;
}
.journey-action-panel .registry-table tbody tr {
  border-bottom-color: rgba(255,255,255,.12) !important;
}
.journey-action-panel .registry-table tbody tr:last-child {
  border-bottom: none !important;
}
.journey-action-panel .registry-table tbody tr:hover { background: transparent; }
.journey-action-panel .registry-table .subtle,
.journey-action-panel .registry-table [style*="color:var(--muted-foreground)"] {
  color: rgba(255,255,255,.6) !important;
}
.journey-action-panel .registry-table .btn-secondary {
  background: #fff;
  border-color: #fff;
  color: var(--foreground);
}
.journey-action-panel .registry-table .btn-secondary:hover {
  background: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.85);
  color: var(--foreground);
}
/* 展開フォーム行: 黒背景に乗る薄パネル */
.journey-action-panel .registry-table tr[data-slot-panel] > td {
  background: rgba(255,255,255,.04) !important;
}
.journey-action-panel .registry-table tr[data-slot-panel] {
  background: transparent !important;
}
.journey-action-panel .registry-table tr[data-slot-panel] .form-group label {
  color: rgba(255,255,255,.85);
}
.journey-action-panel .registry-table tr[data-slot-panel] small {
  color: rgba(255,255,255,.6) !important;
}
.journey-action-panel .registry-table tr[data-slot-panel] input,
.journey-action-panel .registry-table tr[data-slot-panel] textarea,
.journey-action-panel .registry-table tr[data-slot-panel] select {
  background: #fff;
  color: var(--foreground);
  border-color: rgba(255,255,255,.25);
}
.journey-action-panel .registry-table tr[data-slot-panel] input:focus,
.journey-action-panel .registry-table tr[data-slot-panel] textarea:focus,
.journey-action-panel .registry-table tr[data-slot-panel] select:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.2);
}
.journey-action-panel .registry-table tr[data-slot-panel] .btn-primary {
  background: #fff;
  color: var(--foreground);
  border-color: #fff;
}
.journey-action-panel .registry-table tr[data-slot-panel] .btn-primary:hover {
  background: rgba(255,255,255,.88);
}

/* チケット = 入力フォーム形式 */
.ticket-form { margin-top: 16px; }
.ticket-form .ticket-field {
  display: flex; flex-direction: column; gap: 4px;
}
.ticket-form .ticket-field-label {
  font-size: 14px; font-weight: 700; color: var(--muted-foreground);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ticket-input {
  font-family: inherit; font-size: 19px; font-weight: 500;
  padding: 8px 0; border: none; border-bottom: 1px dashed var(--border-strong);
  background: transparent; color: var(--foreground); width: 100%;
  outline: none;
}
.ticket-input:focus { border-bottom-color: var(--foreground); border-bottom-style: solid; }
.ticket-input::placeholder { color: var(--subtle); font-weight: 400; }
.ticket-form-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  border-top: 1px dashed var(--border); border-bottom: none;
}
.ticket-form-actions .btn { margin: 0; }

/* 予約区分ラジオ（区分選択／決済負担） */
.ticket-radio-group {
  display: flex; flex-direction: column; gap: 10px; margin-top: 6px;
}
.ticket-radio {
  display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; row-gap: 2px;
  align-items: start; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 0;
  background: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.ticket-radio:hover { border-color: var(--border-strong); }
.ticket-radio input[type="radio"] {
  grid-column: 1; grid-row: 1 / span 2; margin: 4px 0 0 0; accent-color: var(--foreground);
}
.ticket-radio-main { grid-column: 2; font-size: 18px; font-weight: 600; color: var(--foreground); line-height: 1.4; }
.ticket-radio-sub  { grid-column: 2; font-size: 16px; color: var(--muted-foreground); line-height: 1.5; }
.ticket-radio:has(input[type="radio"]:checked) {
  border-color: var(--foreground); background: #faf8f3;
}
.ticket-help {
  margin-top: 8px; padding: 8px 12px;
  background: #fef9e7; border: 1px solid #f5e3a0; border-radius: 0;
  font-size: 16px; color: #7a5d00; line-height: 1.5;
}

/* 予約フォーム: 入力項目をブロック単位で見た目を明確化 */
.ticket-field-block {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: #fdfdfb;
  margin-bottom: 14px;
}
.ticket-field-block-title {
  font-size: 17px; font-weight: 700; color: var(--foreground);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.ticket-field-block-note {
  font-size: 16px; color: var(--muted-foreground);
  line-height: 1.6; margin-bottom: 10px;
}
.ticket-field-block-foot {
  margin-top: 12px; padding: 8px 12px;
  background: #f4f1ea; border-left: 3px solid #c8b88a; border-radius: 0;
  font-size: 15.5px; color: #5a4a20; line-height: 1.55;
}
.ticket-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 720px) {
  .ticket-field-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 880px) {
  :root { --sidebar-w: 200px; }
  .main { padding: 20px; }
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed !important;
    top: var(--header-h);
    left: -260px;
    width: 240px;
    height: calc(100vh - var(--header-h));
    z-index: 45;
    overflow-y: auto;
    transition: left .22s ease;
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--border) !important;
    border-bottom: none;
  }
  .sidebar.is-open { left: 0; }
  .header { padding: 0 16px; }
  .header .page-title { display: none; }
  .main { padding: 16px; }
  .month-cell { min-height: 56px; padding: 4px; }
  .month-cell-date { font-size: 15px; }
  .month-cell-tag { font-size: 14px; padding: 1px 4px; }
  .thumb-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .thumb-photo { height: 88px; }
  .kv-inline { grid-template-columns: 90px 1fr; }
  .property-card { flex-direction: column; }
  .property-photo { width: 100%; height: 160px; }
  .ticket-hero { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px; }
  .ticket-nights { margin: 0 auto; }
  .ticket-arrow { display: none; }
  .ticket-date-md { font-size: 30px; }
  .ticket-body { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .ticket-header { padding: 14px 18px; }
  .ticket-property { padding: 12px 18px; }
  .sidebar a { padding: 11px 10px; min-height: 44px; }
}

/* ====== Stripe payment element ====== */
.payment-element {
  margin-bottom: 8px;
  padding: 18px;
  border: 1px solid #e8e0d4;
  border-radius: 0;
  background: #fdfcf9;
  min-height: 220px;
}
.checkout-status {
  padding: 10px 14px;
  margin-top: 12px;
  border-radius: 0;
  font-size: 17px;
  background: #fce4e4;
  color: #ad1457;
  border: 1px solid #f5c2c2;
}
.form-help {
  font-size: 16px;
  color: #999;
  line-height: 1.6;
}

/* ==========================================================================
   フロントポータル（index.php）
   ========================================================================== */
.portal-page {
  min-height: 100vh;
  background: var(--background);
  padding: 48px 24px 80px;
}
.portal-container {
  max-width: 1100px;
  margin: 0 auto;
}
.portal-hero {
  text-align: center;
  margin-bottom: 40px;
}
.portal-logo {
  width: 64px; height: 64px; object-fit: contain;
}
.portal-brand {
  font-family: "Raleway", "Noto Serif JP", serif;
  font-size: 24px; font-weight: 500; letter-spacing: 0.14em;
  color: var(--foreground); margin-top: 10px;
}
.portal-tagline {
  font-size: 17px; color: var(--muted-foreground);
  margin-top: 6px;
}

.portal-status {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.portal-status__label {
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted-foreground); margin-bottom: 8px;
}
.portal-status__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 18px;
}
.portal-status__link {
  margin-left: 12px; color: var(--accent);
  text-decoration: none; font-size: 16px;
}
.portal-status__link:hover { color: var(--foreground); text-decoration: underline; }

.portal-section { margin-bottom: 40px; }
.portal-section__title {
  font-family: "Noto Serif JP", serif;
  font-size: 20px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--foreground); margin: 0 0 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}

.portal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.portal-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.portal-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.portal-card__icon { font-size: 26px; margin-bottom: 10px; }
.portal-card__title {
  font-size: 19px; font-weight: 600; color: var(--foreground);
  margin-bottom: 4px;
}
.portal-card__desc {
  font-size: 16px; color: var(--muted-foreground); line-height: 1.6;
}
.portal-card--muted {
  background: var(--muted);
  cursor: default;
}
.portal-card--muted:hover { transform: none; box-shadow: none; border-color: var(--border); }

.portal-dev {
  background: #fffaf0;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 22px 24px 26px;
}
.portal-dev__header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.portal-dev__header .portal-section__title { margin: 0; border: none; padding: 0; }
.portal-dev__note {
  font-size: 15px; color: var(--warning);
  background: #fff4d6; padding: 4px 10px; border-radius: 0;
}
.portal-dev__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.portal-dev__col {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px 10px;
  display: flex; flex-direction: column;
}
.portal-dev__col--soon { background: var(--muted); }
.portal-dev__col-title {
  font-size: 16px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--muted-foreground); text-transform: uppercase;
  margin: 0 0 10px;
}
.portal-dev__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.portal-dev__row {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent;
  padding: 8px 10px; border-radius: 0;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.portal-dev__row:hover {
  background: var(--muted);
  border-color: var(--border);
}
.portal-dev__name {
  font-size: 17px; font-weight: 500; color: var(--foreground);
}
.portal-dev__meta {
  font-size: 15px; color: var(--muted-foreground);
}
.portal-dev__empty {
  font-size: 16px; color: var(--muted-foreground); line-height: 1.6;
  padding: 6px 4px;
}
.portal-dev__guest-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 6px; gap: 8px;
}
.portal-dev__guest-actions {
  display: flex; gap: 4px;
}
.btn.btn-sm {
  padding: 4px 10px; font-size: 15px;
}

/* ============ Owner profile (基本情報) ============ */
.profile-card { padding: 24px 28px; }
.card-subtle { font-size: 16px; color: var(--muted-foreground); letter-spacing: 0.02em; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row-wide { grid-column: 1 / -1; }
.form-label {
  font-size: 16px; font-weight: 600; color: var(--muted-foreground);
  letter-spacing: 0.02em;
}
.form-label .req {
  margin-left: 6px; font-size: 14px; padding: 1px 6px;
  background: #c0392b; color: #fff; border-radius: 0; font-weight: 500;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"] {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 12px;
  font-size: 18px;
  font-family: inherit;
  background: #fff;
}
.form-row input:focus { outline: none; border-color: #3a2a1a; box-shadow: 0 0 0 2px rgba(58,42,26,.15); }

.readonly-grid {
  display: flex; flex-direction: column; gap: 12px;
}
.readonly-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.readonly-row:last-child { border-bottom: none; }
.readonly-label { font-size: 17px; color: var(--muted-foreground); }
.readonly-value { font-size: 18px; }
.readonly-note { font-size: 16px; color: var(--muted-foreground); }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .readonly-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============ Booking tab UI (予約詳細タブ) ============ */
.booking-tabs {
  display: flex; gap: 4px;
  border-bottom: 2px solid var(--border);
  margin: 24px 0 0;
  overflow-x: auto;
}
.booking-tab {
  padding: 14px 22px;
  border: none; background: transparent;
  font-size: 18px; font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.booking-tab:hover { color: var(--foreground); }
.booking-tab.active {
  color: #3a2a1a;
  border-bottom-color: #3a2a1a;
}
.booking-tab .tab-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px;
  margin-left: 6px; background: #c0392b; color: #fff;
  border-radius: 0; font-size: 15px; font-weight: 500;
  text-align: center;
}
.booking-tab-content { display: none; padding-top: 28px; }
.booking-tab-content.active { display: block; }

/* 規約違反警告バナー (宿泊者名簿タブ) */
.warn-banner {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-left: 4px solid #c0392b;
  border-radius: 0;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex; gap: 12px; align-items: flex-start;
}
.warn-banner-icon { font-size: 24px; line-height: 1; }
.warn-banner-body { font-size: 17px; line-height: 1.6; }
.warn-banner-body strong { color: #c0392b; }

/* 宿泊者名簿スロット表 */
.slot-grid {
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
.slot-row {
  display: grid; grid-template-columns: 56px 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--card);
}
.slot-delete-btn { color: #b91c1c; }
.slot-delete-btn:hover { background: #fef2f2; border-color: #fca5a5; }
.slot-no { font-size: 17px; font-weight: 600; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; }
.slot-no-rep-text {
  font-size: 14px;
  padding: 2px 6px;
  background: #f0ece2;
  color: #6a5400;
  border-radius: 0;
  font-weight: 600;
}

.slot-check-label {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-size: 17px;
  user-select: none;
}
.slot-check-label input[type="checkbox"] {
  width: 22px; height: 22px; cursor: pointer;
  accent-color: var(--foreground);
  margin: 0;
  flex-shrink: 0;
}
.slot-check-rep { cursor: default; color: var(--muted-foreground); }
.slot-check-rep input[type="checkbox"] {
  cursor: default;
  accent-color: #c89000;
  opacity: 1;
}

.slot-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slot-name { font-size: 18px; font-weight: 500; }
.slot-meta { font-size: 16px; color: var(--muted-foreground); }
.slot-actions { display: flex; gap: 6px; flex-shrink: 0; }
.slot-row.slot-rep { background: #f6f4ee; border-color: #d9c89a; }

/* 宿泊者名簿テーブル（メイン表示） */
.registry-table-wrap { overflow-x: auto; }
.registry-table-main {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
  background: #fff;
}
.registry-table-main thead th {
  background: #f7f5ef;
  color: var(--muted-foreground);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
.registry-table-main tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--foreground);
}
.registry-table-main tbody td.col-actions {
  text-align: right; white-space: nowrap;
}
.registry-table-main tbody td.col-actions .btn { margin-left: 4px; }
.registry-table-main tbody td.col-actions form { display: inline-block; }
.registry-table-main .col-role { width: 80px; }
.registry-table-main .col-name { min-width: 110px; }
.registry-table-main .col-address { min-width: 150px; }
.registry-table-main .col-email { min-width: 130px; }
.registry-table-main .col-phone { min-width: 110px; }
.registry-table-main .col-passport { min-width: 110px; }
.registry-table-main .col-status { width: 90px; }
.registry-table-main .col-actions { width: 140px; }

.registry-table-main tr.reg-row-rep {
  background: #fbf8ef;
}
.registry-table-main tr.reg-row-rep td {
  border-left: 0; border-right: 0;
}
.registry-table-main tr.reg-row-rep td:first-child {
  border-left: 3px solid #c89000;
}
.registry-table-main tr.reg-row-companion:hover { background: #fafaf7; }

.role-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.role-badge.role-rep {
  background: #c89000; color: #fff;
}
.role-badge.role-companion {
  background: #ecece4; color: #6a6a55;
}

.cell-empty {
  color: var(--subtle);
  font-size: 16px;
}
.cell-empty.cell-required {
  color: #cf2e2e;
  font-weight: 600;
}

.status-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.status-chip.chip-done {
  background: #e3f5e3; color: #1b7a1f; border: 1px solid #b6e0b6;
}
.status-chip.chip-invited {
  background: #fdf0d8; color: #8a5b00; border: 1px solid #f1c97a;
}
.status-chip.chip-pending {
  background: #fde8e8; color: #b91c1c; border: 1px solid #f5b3b3;
}

.reg-panel-row > .reg-panel-cell {
  padding: 18px 22px;
  background: #f4f2ea;
  border-bottom: 2px solid var(--border-strong);
}
.reg-panel-title {
  font-size: 17px; font-weight: 700; color: var(--foreground);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}

@media (max-width: 880px) {
  .registry-table-main { font-size: 16px; }
  .registry-table-main thead th,
  .registry-table-main tbody td { padding: 8px 10px; }
}

/* 宿泊者名簿スロット 編集パネル */
.slot-panel {
  margin-top: -2px; margin-bottom: 8px;
  padding: 16px 18px;
  background: var(--muted);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0;
}

/* 譲渡履歴 */
.transfer-list { list-style: none; padding: 0; margin: 0; }
.transfer-list li {
  padding: 10px 0; border-bottom: 1px dashed var(--border);
  font-size: 17px; line-height: 1.6;
}
.transfer-list li:last-child { border-bottom: none; }
.transfer-arrow { color: #c89000; font-weight: 600; margin: 0 6px; }
.transfer-meta { font-size: 15px; color: var(--muted-foreground); margin-top: 2px; }

/* ==========================================================================
   オーナー物件ページ（v0.9）
   ========================================================================== */

/* 1.3fr:1fr ではなく 1:1 で均等にしたい場面 */
.prop-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .prop-grid { grid-template-columns: 1fr; } }

/* kvを2列グリッドで読みやすく */
.prop-kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 14px;
}
.prop-kv dt {
  margin-top: 0;
}
.prop-kv dd {
  margin: 0;
}

/* ギャラリー */
.prop-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.prop-photo {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--muted);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.prop-photo img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.prop-photo figcaption {
  padding: 8px 10px;
  font-size: 16px;
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
  background: var(--card);
}

/* チップ（設備・周辺施設） */
.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 16px;
  line-height: 1.4;
}

.prop-near-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* テーブル（保険契約・メンテ履歴） */
.prop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.prop-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
  white-space: nowrap;
}
.prop-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.prop-table tbody tr:last-child td { border-bottom: none; }
.prop-table tbody tr:hover { background: var(--muted); }

/* 次回予定メンテ */
.prop-upcoming {
  list-style: none;
  margin: 0;
  padding: 0;
}
.prop-upcoming li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.prop-upcoming li:last-child { border-bottom: none; }
.prop-upcoming-date {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.prop-upcoming-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
}
.prop-upcoming-vendor {
  font-size: 16px;
  margin-top: 2px;
}

/* 物件切替 */
.prop-switcher .btn {
  border-radius: 999px;
}

/* ==========================================================================
   予約詳細 — 独立ページ風（main 全面埋め込み）
   ========================================================================== */
.booking-detail-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - var(--header-h));
  background: var(--card);
}
/* タブ帯：物件情報ページと同じ下線タブ（アイコン上・テキスト下・下線で選択・枠なし） */
.nav-wrap {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  flex-shrink: 0;
}
.nav-wrap::after {
  content: "";
  position: absolute; top: 0; bottom: 1px; right: 0; width: 56px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--card) 76%);
}
.nav-wrap.is-scrollable:not(.at-end)::after { opacity: 1; }
.booking-detail-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 0 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.booking-detail-nav::-webkit-scrollbar { display: none; }
.booking-detail-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; align-self: center; margin-right: 12px;
  font-size: 23px;
  color: var(--muted-foreground);
  transition: color .12s;
}
.booking-detail-back:hover { background: transparent; color: var(--foreground); }
.booking-detail-tab {
  flex: 0 0 auto;
  padding: 13px 22px;
  border: none;
  background: transparent;
  font-size: 16.5px;
  font-weight: 400;
  color: var(--muted-foreground);
  white-space: nowrap;
  transition: color .12s;
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.booking-detail-tab svg { width: 20px; height: 20px; flex-shrink: 0; }
.booking-detail-tab .tab-lab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* ホバーで色を変えない（開いていないタブに触れても選択と誤認させない） */
.booking-detail-tab:hover { color: var(--muted-foreground); background: transparent; }
.booking-detail-tab.active,
.booking-detail-tab.active:hover {
  color: var(--foreground); font-weight: 500;
  border-bottom-color: var(--foreground); background: transparent;
}
.booking-detail-tab .tab-badge {
  display: inline-block; min-width: 0; padding: 0 6px;
  background: #c0392b; color: #fff;
  border-radius: 999px; font-size: 15px; font-weight: 600;
  text-align: center;
}
.booking-detail-tab-cancel,
.booking-detail-tab-cancel:hover { color: var(--muted-foreground); }
.booking-detail-tab-cancel.active,
.booking-detail-tab-cancel.active:hover {
  color: var(--destructive); border-bottom-color: var(--destructive);
}
/* 予約一覧へ戻る：SPではタブ内の小さな「‹」をやめ、タブ帯の上に独立表示 */
.bc-backbar { display: none; }
.bc-back-link { display: inline-flex; align-items: center; gap: 6px; }
.booking-detail-notice {
  padding: 10px 24px;
  background: #f0ece2;
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  color: var(--foreground);
  flex-shrink: 0;
}
.booking-detail-notice-error {
  background: #fbeae8;
  color: var(--destructive);
}

/* 次のアクション ストリップ */
.booking-detail-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 14px 24px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.booking-detail-status-lead {
  display: flex; align-items: baseline; gap: 4px;
  color: var(--foreground);
}
.booking-detail-status-num {
  font-size: 34px; font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
}
.booking-detail-status-unit { font-size: 17px; font-weight: 600; margin-right: 6px; }
.booking-detail-status-sub { font-size: 16px; color: var(--muted-foreground); }
.booking-detail-status-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.booking-detail-status-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .12s, background .12s;
  color: var(--foreground);
}
a.booking-detail-status-item:hover {
  border-color: var(--foreground);
  background: #fff;
}
.booking-detail-status-item.is-done { border-left: 3px solid var(--success); }
.booking-detail-status-item.is-todo { border-left: 3px solid #c89000; }
.booking-detail-status-item.is-future { border-left: 3px solid var(--border); opacity: 0.7; }
.booking-detail-status-item-label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted-foreground);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.booking-detail-status-item-value {
  font-size: 17px;
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.booking-detail-status-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
}
.booking-detail-status-tag.tag-done {
  background: var(--success-soft);
  color: var(--success);
}
.booking-detail-status-tag.tag-todo {
  background: #fbf2dc;
  color: #6a5400;
}

@media (max-width: 900px) {
  .booking-detail-status { grid-template-columns: 1fr; gap: 12px; }
  .booking-detail-status-items { grid-template-columns: 1fr; }
}
.booking-detail-body {
  flex: 1 1 auto;
  padding: 20px 24px;
  min-width: 0;
}
.booking-detail-foot {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--muted);
  flex-shrink: 0;
}
.booking-detail-app .booking-tab-content { display: none; padding-top: 0; }
.booking-detail-app .booking-tab-content.active { display: block; }

/* --- 物件ヒーロー --- */
.property-hero {
  position: relative;
  /* 高さ固定だと、文字が大きくなった分だけ中身（予約番号の行）が枠の上に
     はみ出して切れる。写真は background-size:cover なので伸びても崩れない（2026-08-08） */
  min-height: 280px;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  background-color: #2a2a26;
  overflow: hidden;
  margin-bottom: 24px;
}
/* 白文字を写真に直接乗せていて、空など明るい部分では読めなかった（実測 背景の明るさ181/255）。
   文字の下だけを暗くする。写真そのものは暗くしない（2026-08-08） */
.property-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  /* 中身（予約番号の行）はヒーローの上端近くまで来るので、高さは全面にする。
     下ほど濃く、上は薄くして写真の印象を残す */
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.44) 42%, rgba(0,0,0,.26) 100%);
  pointer-events: none;
}
.property-hero-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;              /* 上のグラデーションより手前に */
  padding: 22px 26px;
  color: #fff;
}
.property-hero-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}
.property-hero-meta .booking-code {
  font-family: var(--font-mono, monospace);
  background: rgba(255,255,255,0.18);
  padding: 3px 10px;
  border-radius: 0;
  letter-spacing: 0.04em;
}
/* .main h2 は「クラス+要素」で詳細度が高く、こちらが負けて黒・19pxになっていた。
   親クラスを足して詳細度を上げる（!important は使わない / 2026-08-08） */
.property-hero .property-hero-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #fff;
  letter-spacing: -0.005em;
}
.property-hero-unit {
  font-size: 18px;
  opacity: 0.92;
  margin-bottom: 4px;
}
.property-hero-unit .subtle { color: rgba(255,255,255,0.7); }
.property-hero-address {
  font-size: 16.5px;
  opacity: 0.85;
}

/* --- 予約情報グリッド (PC: 滞在期間 1行 + 詳細 1行 = 2行に収める) --- */
.booking-info-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.info-card {
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.info-card-wide { grid-column: 1 / -1; }
.info-card-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-foreground);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.info-card-value {
  font-size: 18px;
  color: var(--foreground);
}
.info-card-value .subtle { color: var(--muted-foreground); font-size: 16px; }
/* 予約情報カードの補足行（宿泊代表者の連絡先など・2026-09-01） */
.info-card-sub { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--muted-foreground); word-break: break-all; }
.info-card-stay {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}
.info-card-stay-date { text-align: center; }
.info-card-stay-sub {
  font-size: 14.5px;
  color: var(--muted-foreground);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.info-card-stay-md {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2px 0;
}
.info-card-stay-mid {
  display: flex; flex-direction: column; align-items: center;
  color: var(--muted-foreground);
}
.info-card-stay-nights {
  font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--foreground);
}
.info-card-stay-nights-label {
  font-size: 15px;
  letter-spacing: 0.04em;
}

/* --- 予約券 折りたたみ --- */
.ticket-collapsible {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--muted);
  margin-top: 8px;
}
.ticket-collapsible > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--foreground);
}
.ticket-collapsible > summary::-webkit-details-marker { display: none; }
.ticket-collapsible > summary > span:first-child {
  display: inline-flex; align-items: center; gap: 8px;
}
.ticket-collapsible-toggle {
  font-size: 15px;
  color: var(--muted-foreground);
  font-weight: 500;
}
.ticket-collapsible[open] .ticket-collapsible-toggle { font-size: 0; }
.ticket-collapsible[open] .ticket-collapsible-toggle::after {
  content: "閉じる";
  font-size: 15px;
  color: var(--muted-foreground);
  font-weight: 500;
}
.ticket-collapsible > .ticket {
  margin: 0 18px 18px;
}

@media (max-width: 900px) {
  .booking-info-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .booking-detail-body { padding: 16px 12px; }
  .booking-detail-foot { padding: 12px; }
  .booking-detail-notice { padding: 10px 12px; }
  .property-hero { min-height: 200px; }
  .property-hero-overlay { padding: 16px 14px; }
  /* 上の .property-hero .property-hero-title と詳細度を揃えないと負ける */
  .property-hero .property-hero-title { font-size: 23px; }
  .booking-info-grid { grid-template-columns: repeat(2, 1fr); }
  .info-card-stay { grid-template-columns: 1fr; gap: 8px; }
  .info-card-stay-md { font-size: 22px; }
  .info-card-stay-nights { font-size: 24px; }
  .bc-backbar { display: block; background: var(--card); border-bottom: 1px solid var(--border); }
  .bc-back-link { padding: 12px 14px; font-size: 16.5px; font-weight: 500; color: var(--muted-foreground); }
  .bc-back-link .bc-caret { font-size: 21px; line-height: 1; margin-top: -1px; }
  .booking-detail-back { display: none; }
  .booking-detail-nav { padding: 0 4px 0 8px; }
  .booking-detail-tab { padding: 10px 15px; font-size: 14.5px; gap: 5px; }
  .booking-detail-tab svg { width: 19px; height: 19px; }
}

/* ==========================================================================
   譲渡管理ページ（2ペイン）
   ========================================================================== */
.transfers-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 8px;
}
.transfers-list-pane {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-h) + 12px);
  max-height: calc(100vh - var(--header-h) - 32px);
  display: flex; flex-direction: column;
}
.transfers-filter {
  display: flex; gap: 6px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
}
.chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  transition: all .15s;
}
.chip:hover { color: var(--foreground); border-color: var(--border-strong); }
.chip.chip-active {
  background: var(--foreground);
  color: var(--primary-foreground);
  border-color: var(--foreground);
}
.transfers-list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1;
}
.transfers-list li { border-bottom: 1px solid var(--border); }
.transfers-list li:last-child { border-bottom: none; }
.transfers-list li a {
  display: block;
  padding: 12px 14px;
  transition: background .12s;
}
.transfers-list li a:hover { background: var(--muted); }
.transfers-list li.is-selected a {
  background: var(--muted);
  box-shadow: inset 3px 0 0 var(--foreground);
}
.transfers-list-code {
  font-family: var(--font-mono, monospace);
  font-size: 15px;
  color: var(--muted-foreground);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.transfers-list-type-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: var(--font-base, sans-serif);
}
.transfers-list-type-pill.pill-self {
  background: #e9f1fb; color: #1e508f; border: 1px solid #b9d2ef;
}
.transfers-list-type-pill.pill-transferred {
  background: #fdf0d8; color: #8a5b00; border: 1px solid #f1c97a;
}
.transfers-list li.is-self a { border-left: 3px solid #b9d2ef; }
.transfers-list li.is-transferred a { border-left: 3px solid #f1c97a; }
.chip.chip-sm { padding: 4px 10px; font-size: 15px; }
.chip-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  background: rgba(0,0,0,.06);
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
}
.transfers-list-date {
  font-size: 17px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 2px;
}
.transfers-list-date .subtle {
  font-weight: 400;
  color: var(--muted-foreground);
  font-size: 15px;
  margin-left: 4px;
}
.transfers-list-building {
  font-size: 16px;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.transfers-list-assignee {
  font-size: 17px;
  color: var(--foreground);
  margin-bottom: 6px;
}
.transfers-list-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.transfers-detail-pane {
  min-width: 0;
}

@media (max-width: 900px) {
  .transfers-layout { grid-template-columns: 1fr; }
  .transfers-list-pane {
    position: static;
    max-height: none;
  }
}

/* ==========================================================================
   Booking detail — compact statusbar below nav
   ========================================================================== */
.booking-detail-statusbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 18px;
  padding: 10px 24px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  font-size: 16.5px;
  color: var(--foreground);
  flex-shrink: 0;
}
.booking-detail-statusbar-item {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--foreground);
}
.booking-detail-statusbar-item .label {
  color: var(--muted-foreground);
  font-weight: 500;
}
.booking-detail-statusbar-item .value { font-weight: 600; }
.booking-detail-statusbar-item .tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 15px; font-weight: 600;
}
.booking-detail-statusbar-item .tag.tag-done {
  background: var(--success-soft); color: var(--success);
}
.booking-detail-statusbar-item .tag.tag-todo {
  background: #fbf2dc; color: #6a5400;
}
.booking-detail-statusbar-item .tag.tag-info {
  background: var(--info-soft); color: var(--info);
}
.booking-detail-statusbar-item a {
  color: var(--foreground);
  text-decoration: underline; text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}
.booking-detail-statusbar-item a:hover {
  text-decoration-color: var(--foreground);
}
.booking-detail-statusbar-sep {
  width: 1px; height: 14px; background: var(--border-strong);
}

@media (max-width: 640px) {
  .booking-detail-statusbar { padding: 8px 12px; gap: 10px; font-size: 16px; }
  .booking-detail-statusbar-sep { display: none; }
}

/* stay-journey: take full width of the panel (no auto-centering / max-width) */
.booking-tab-content[data-tab-panel="flow"] { padding: 0; }
.booking-tab-content[data-tab-panel="flow"] .stay-journey {
  max-width: none;
  width: 100%;
  margin: 0;
}

/* ==========================================================================
   Booking detail — slot inline status pill
   ========================================================================== */
.slot-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600;
  margin-left: 8px; vertical-align: middle;
}
.slot-status-pill.pill-done {
  background: var(--success-soft); color: var(--success);
}
.slot-status-pill.pill-invited {
  background: var(--info-soft); color: var(--info);
}
.slot-status-pill.pill-pending {
  background: var(--muted); color: var(--muted-foreground);
}

/* ==========================================================================
   Booking detail — payment tab (cards + history)
   ========================================================================== */
.payment-tab-section { margin-bottom: 18px; }
.payment-tab-cards {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.payment-tab-cards-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}
.payment-tab-cards-head .title { font-weight: 600; font-size: 17px; }
.payment-tab-cards-head .sub { font-size: 15.5px; color: var(--muted-foreground); }
.payment-tab-card-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.payment-tab-card-row:last-child { border-bottom: none; }
.payment-tab-card-row .brand {
  font-weight: 700; font-size: 15px; letter-spacing: 0.06em;
}
.payment-tab-card-row .num {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
}
.payment-tab-card-row .exp { font-size: 16px; color: var(--muted-foreground); }
.payment-tab-empty {
  padding: 24px 16px;
  text-align: center;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 17px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.payment-tab-history {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.payment-tab-history-head {
  padding: 12px 16px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 17px;
}
.payment-tab-history table { width: 100%; border-collapse: collapse; }
.payment-tab-history th, .payment-tab-history td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 16.5px;
}
.payment-tab-history th {
  font-weight: 600;
  font-size: 15px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--background);
}
.payment-tab-history tr:last-child td { border-bottom: none; }
.payment-tab-history td.amount { text-align: right; font-weight: 600; }

/* ==========================================================================
   Custom modal (hrAlert / hrConfirm)
   ========================================================================== */
.hr-modal-root {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.hr-modal-root.is-open { display: flex; }
.hr-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20,18,15,0.55);
  backdrop-filter: blur(2px);
  animation: hr-modal-fade .15s ease;
}
.hr-modal-dialog {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  padding: 24px 24px 18px;
  animation: hr-modal-pop .18s cubic-bezier(.2,.7,.3,1);
  outline: none;
}
.hr-modal-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.hr-modal-body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--foreground);
  margin-bottom: 22px;
  white-space: normal;
  word-break: break-word;
}
.hr-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}
.hr-modal-btn {
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background .12s, border-color .12s, color .12s;
}
.hr-modal-btn-secondary {
  background: var(--card);
  border-color: var(--border-strong);
  color: var(--muted-foreground);
}
.hr-modal-btn-secondary:hover {
  color: var(--foreground);
  border-color: var(--foreground);
}
.hr-modal-btn-primary {
  background: var(--foreground);
  color: var(--primary-foreground);
}
.hr-modal-btn-primary:hover { background: var(--primary-hover); }
.hr-modal-btn-danger {
  background: var(--destructive);
  color: #fff;
}
.hr-modal-btn-danger:hover { background: #952820; }

@keyframes hr-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hr-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ==========================================================================
   Flash messages — auto-dismiss compatible
   ========================================================================== */
.hr-flash {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  font-size: 17px;
  border: 1px solid transparent;
  transition: opacity .4s ease, transform .4s ease;
}
.hr-flash.hr-flash-ok {
  background: var(--success-soft);
  color: var(--success);
  border-color: rgba(79,122,82,.25);
}
.hr-flash.hr-flash-error {
  background: var(--destructive-soft);
  color: var(--destructive);
  border-color: rgba(181,49,39,.25);
}
.hr-flash.is-dismissing { opacity: 0; transform: translateY(-4px); pointer-events: none; }

/* ===== 物件インシデント (v0.9.2 UI拡張) ===== */
.prop-incident-tabs {
  display: inline-flex; gap: 4px;
  background: var(--muted);
  padding: 3px;
  border-radius: var(--radius-sm);
}
.prop-incident-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px;
  padding: 5px 12px;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--muted-foreground);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.prop-incident-tab:hover { color: var(--foreground); }
.prop-incident-tab.is-active {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
.prop-incident-count {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 0;
  background: rgba(0,0,0,0.06);
  color: inherit;
  line-height: 1;
}
.prop-incident-tab.is-active .prop-incident-count {
  background: var(--muted);
}

.prop-incident-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.prop-incident-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  scroll-margin-top: 80px;
}
.prop-incident-item:target {
  border-color: var(--warning);
  box-shadow: 0 0 0 2px rgba(225,160,40,0.18);
}
.prop-incident-thumb {
  width: 96px; height: 96px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--muted);
}
.prop-incident-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.prop-incident-thumb-empty {
  background: repeating-linear-gradient(
    45deg,
    var(--muted),
    var(--muted) 10px,
    var(--background) 10px,
    var(--background) 20px
  );
}
.prop-incident-body {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.prop-incident-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 16px;
}
.prop-incident-id {
  font-family: var(--font-mono);
  margin-left: auto;
}
.prop-incident-desc {
  font-size: 17px; color: var(--foreground);
  line-height: 1.5;
}
.prop-incident-dates {
  font-size: 15px;
}

.prop-maint-incident-link {
  margin-top: 4px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 15px;
  color: var(--muted-foreground);
}
.prop-maint-incident-link a {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
}
.prop-maint-incident-link a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .prop-incident-item { grid-template-columns: 64px 1fr; }
  .prop-incident-thumb { width: 64px; height: 64px; }
}

/* ===== admin-buildings 業者リスト (v0.9.2 UI拡張) ===== */
.admin-vendors-section {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.admin-vendors-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-vendors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .admin-vendors-grid { grid-template-columns: 1fr; }
}
.admin-vendor-col-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.admin-vendor-count {
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 1px 6px;
  border-radius: 0;
  background: var(--muted);
  color: var(--muted-foreground);
  line-height: 1;
}
.admin-vendor-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.admin-vendor-row {
  padding: 6px 8px;
  border-radius: 0;
  background: var(--muted);
}
.admin-vendor-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 17px;
}
.admin-vendor-contact {
  margin-top: 2px;
  font-size: 15px;
  font-family: var(--font-mono);
}

/* ===== 写真ギャラリーカテゴリタブ (v0.9.2 floorplan 対応) ===== */
.prop-photo-tabs {
  flex-wrap: wrap;
  max-width: 100%;
}
.prop-photo figcaption {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 15px;
  padding: 4px 6px;
}
.prop-photo-cat {
  display: inline-block;
  background: var(--muted);
  color: var(--muted-foreground);
  padding: 1px 6px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
}
.prop-photo-caption {
  color: var(--muted-foreground);
}

/* ===== admin 一覧画面の絞り込みフィルター（横並び） =====
   .form-row が他所で flex-direction:column に上書きされているため
   admin の絞り込みフォーム専用に分離 */
.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.admin-filter-row .form-group {
  flex: 1 1 200px;
  margin-bottom: 0;
}
.admin-filter-row .form-group.no-grow {
  flex: 0 0 auto;
}

/* ==========================================================================
   owner-property: 3カラム1列（設備｜追加オプション｜周辺環境）
   ========================================================================== */
.prop-grid-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px) {
  .prop-grid-three { grid-template-columns: 1fr; }
}

/* タブを右寄せ（card-title の justify-content:space-between と組み合わせ） */
.prop-photo-tabs {
  margin-left: auto;
  justify-content: flex-end;
}

/* 写真ギャラリー: カテゴリ別 pane 切り替え（JS で is-active を付け替え） */
.prop-gallery-pane { display: none; }
.prop-gallery-pane.is-active { display: grid; }

/* クリッカブル写真・チップ */
.prop-photo.is-clickable {
  cursor: zoom-in;
  transition: transform .12s ease, box-shadow .12s ease;
}
.prop-photo.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.08));
}
.prop-photo.is-clickable:focus-visible {
  outline: 2px solid var(--primary, #6b4eff);
  outline-offset: 2px;
}
.chip.chip-clickable {
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip.chip-clickable:hover {
  background: var(--card);
  border-color: var(--border-strong);
  color: var(--foreground);
}
.chip.chip-clickable:focus-visible {
  outline: 2px solid var(--primary, #6b4eff);
  outline-offset: 2px;
}

/* ==========================================================================
   Lightbox（写真ギャラリー / タグ用ポップアップ）
   ========================================================================== */
.hr-modal-dialog.hr-modal-lightbox {
  max-width: 880px;
  padding: 18px 18px 14px;
}
.hr-lightbox {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hr-lightbox-imgwrap {
  position: relative;
  background: #111;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.hr-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.hr-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease;
}
.hr-lightbox-nav:hover { background: rgba(0,0,0,0.7); }
.hr-lightbox-prev { left: 10px; }
.hr-lightbox-next { right: 10px; }
.hr-lightbox-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 17px;
  color: var(--foreground);
  min-height: 22px;
}
.hr-lightbox-cat {
  display: inline-block;
  background: var(--muted);
  color: var(--muted-foreground);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.hr-lightbox-text { font-weight: 500; }
.hr-lightbox-counter {
  font-size: 15px;
  color: var(--muted-foreground);
  text-align: right;
}

/* ==========================================================================
   テーブル横スクロールラッパー
   ========================================================================== */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 var(--radius) var(--radius);
  /* 両端シャドウでスクロール可能を示す */
  background:
    linear-gradient(to right, var(--card) 20%, transparent),
    linear-gradient(to left,  var(--card) 20%, transparent) right,
    radial-gradient(farthest-side at 0   50%, rgba(0,0,0,.08), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.08), transparent) right;
  background-color: var(--card);
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table-scroll > table { min-width: 500px; }
.registry-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   モバイル: サイドバートグルボタン & オーバーレイ
   ========================================================================== */
.sidebar-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: none; background: transparent;
  cursor: pointer; border-radius: var(--radius-sm);
  color: var(--foreground); flex-shrink: 0;
  transition: background .12s;
}
.sidebar-toggle:hover { background: var(--muted); }
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 40;
}
.sidebar-overlay.is-open { display: block; }
@media (max-width: 720px) {
  .sidebar-toggle { display: inline-flex; }
}

/* ==========================================================================
   モバイル: フォーム行の縦積み
   ========================================================================== */
@media (max-width: 640px) {
  .form-row { flex-direction: column; }
}

/* ==========================================================================
   モバイル: アラートの折り返し
   ========================================================================== */
@media (max-width: 640px) {
  .notice-alert { flex-wrap: wrap; }
  .notice-alert .btn {
    width: 100%; margin-left: 0 !important;
    justify-content: center; margin-top: 4px;
  }
  .notice-alert-stack .notice-item { flex-wrap: wrap; }
  .notice-alert-stack .notice-item .btn {
    width: 100%; margin-left: 0 !important; justify-content: center;
  }
}

/* ==========================================================================
   モバイル: フィルタータブ横スクロール
   ========================================================================== */
.filter-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-bar { flex-wrap: wrap; }

/* ==========================================================================
   モバイル: ページヘッダーのボタン配置
   ========================================================================== */
@media (max-width: 640px) {
  .main .page-header { flex-direction: column; align-items: flex-start; }
  .main .page-header .actions { width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   E案（文字拡大）の副作用対策 — 全ロール共通（2026-08-08 / P3 バッチ1）
   経緯・実測値: 案件フォルダ 文字サイズE案_適用検証_20260807/P2_崩れ点検_結果まとめ.md
   ※ 打ち消し目的のため、意図的にファイル末尾に置いている（後勝ちで効かせる）
   ========================================================================== */

/* 入力欄は font-size を継承しないため、本文18pxに対し13.3px Arial のまま
   取り残されていた（清掃16 / 運営管理15 / 提携店舗11 箇所など計49箇所）。
   .form-group 配下だけは既にCSSで指定済みだったので影響が無かった。 */
input, select, textarea { font-family: inherit; font-size: inherit; }

/* バッジ・チップが2行に割れ、丸枠が縦長の楕円に変形する（「確定」→「確／定」）。
   E案前は折り返し0件だったので、拡大で新規に発生したもの。 */
.badge, .chip, .transfers-list-type-pill { white-space: nowrap; }

@media (max-width: 720px) {
  /* ヘッダーが 56px の固定枠からあふれ、「ログアウト」が縦3行に割れて切れる。
     高さを可変にするだけだと清掃で132px（元の2.4倍）まで伸びて本文を押し下げるので、
     SPでは装飾（ブランド名の文字・店名ピル・ユーザー名）を隠して56pxのまま収める。
     隠した情報はいずれも直下のページ見出しに出ているため失われない。 */
  .header { height: auto; min-height: var(--header-h); padding-top: 6px; padding-bottom: 6px; }
  .header .brand .brand-name,
  .header .brand-name,
  .header .scope-switcher,
  .header .user-info .user-name { display: none; }

  /* --- オーナー画面のヘッダー：スマホではロゴを中央に置く（HR-NEW-37） ---
     ユーザー名（HR-REV-V1）とログアウト（HR-NEW-36）を右から外したので、右側が空いた。
     左のメニューアイコンだけが残るため、flex の並びのままでは中央にならない。
     絶対配置で「画面の真ん中」に置き、左右の要素の幅に影響されないようにする。

     ★ .owner-chrome を必ず付けること。.header のクラスは管理者・清掃・業者・ゲストと共通で、
       ここを素の .header に書くと4つのレイアウトすべてに波及する。
       それらのヘッダーにはユーザー名やログアウトが残っているので、中央寄せすると重なる。

     ロゴの文字（.brand-name）は、上の共通ルールがスマホで隠している。オーナー側だけ出し直す。
     理由: 隠したのは「ログアウトが3行に割れて56pxからあふれる」ためだったが（2026-08-09）、
     その原因を今回取り除いた。マークだけ 28px にすると VI ガイドラインの最小表示サイズ
     （幅12mm ≒ 96dpi換算で約45px・HR-NEW-35）を下回るので、文字を出したほうが規定に近い。 */
  /* ★ position は sticky のままにする。relative を書くと上のスクロール追従が消える。
     sticky も「位置指定された要素」なので、中のロゴの絶対配置はこれを基準にできる。 */
  .header.owner-chrome .brand {
    position: absolute; left: 50%; transform: translateX(-50%);
    max-width: calc(100% - 120px);   /* 左のメニューアイコン(36px)＋余白ぶんを空ける */
  }
  .header.owner-chrome .brand .brand-name {
    display: inline; white-space: nowrap;
    font-size: 17px;   /* 56px の枠に収めるため PC の 18px から少しだけ落とす */
  }

  /* 表がカードを突き破ってページごと横スクロールする。
     overflow-x だけだと表は箱の中で潰れたままなので min-width と必ず対で入れる。
     .sec も要る（/admin-rules/ の表は .card ではなく div.sec の中にある）。 */
  .card, .sec { overflow-x: auto; }
  /* :where() で詳細度を 0 にしてある。これは「既定でこうする」という指定であって、
     ページ側でSP用に組み替えている表（カード型にしている等）は自分の指定で上書きできる。
     ここを .card table と書くと詳細度で勝ってしまい、組み替え済みの表を壊す（2026-08-09） */
  :where(.card, .sec) table { min-width: max-content; }
}

/* ==========================================================================
   注意書きを「？」の中に畳む（HR-NEW-24 / 2026-08-08）
   仕組み: assets/js/hr-note-help.js ＋ window.hrModal
   ========================================================================== */

/* 丸い「?」ボタン。もとは airbnb.php / page-guest-reservation.php の <style> 内に
   あったものを全ページで使えるようにここへ。--mono はページ限定の変数なので
   フォールバックに --font-mono を置く。 */
.help-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--cal-gold-border); background: #fff;
  color: var(--cal-gold);
  font-size: 14px; font-weight: 800; line-height: 1;
  font-family: var(--mono, var(--font-mono));
  cursor: pointer; padding: 0;
}
.help-dot:hover { background: var(--cal-gold-soft); }
.help-dot:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* 文章や見出しの中に置いたとき、ベースライン揃えだと数px下がって見え、
   文字とも詰まって見える。中央で揃え、字間より広い余白を確保する（2026-08-08） */
/* vertical-align:middle は「ベースライン＋小文字の高さの半分」に合わせる指定で、
   和文だと3pxほど下がって見える。位置指定で持ち上げて実際の字面の中央に合わせる。
   em 指定なので文字サイズが変わっても比率が保たれる。 */
.help-dot { vertical-align: middle; margin-left: 8px; position: relative; top: -0.17em; }
/* 横並びの箱（flex）の中では align-items:center と gap で既に揃っているので、
   上の余白・持ち上げは打ち消す（二重に効かせない） */
.hrq-titlerow .help-dot,
.bk-step-h .help-dot { margin-left: 0; top: 0; }

/* 注記の原本。DOMには残して画面からは隠す（文言の管理場所を1つに保つため） */
.hr-note { display: none; }

/* モーダルに複製されたときの見た目。本文17pxは注記としては大きいので少し落とす */
.hr-note-modal .hr-modal-body { font-size: 15px; }
.hr-note-modal .hr-note-body { color: var(--muted-foreground); line-height: 1.8; }
.hr-note-modal .hr-note-body b { color: var(--foreground); font-weight: 600; }
.hr-note-modal .hr-note-body p { margin: 0 0 12px; }
.hr-note-modal .hr-note-body p:last-child { margin-bottom: 0; }

/* 宿泊者名簿未入力などの警告で、本文が143pxまで潰れてボタンとぶつかり、
   括弧の途中で改行していた。SPではボタンを下段に落として本文を全幅にする（2026-08-08） */
@media (max-width: 720px) {
  .card-inline-alert, .notice-alert { flex-wrap: wrap; }
  .card-inline-alert .card-inline-alert-body,
  .notice-alert .notice-alert-body { flex: 1 1 100%; }
  .card-inline-alert .btn,
  .notice-alert .btn { margin-left: 0; width: 100%; margin-top: 10px; }
}

/* ==========================================================================
   スマホでの読みやすさ調整（2026-08-09）
   ========================================================================== */
@media (max-width: 720px) {
  /* 「次回ご宿泊予定」などの項目を、ラベル上・値下の縦積みにする。
     横並びだと値の幅が足りず、予約番号が「R-20260726-103651-」「689」のように
     途中で改行してしまうため */
  .kv.kv-compact { grid-template-columns: 1fr; row-gap: 2px; column-gap: 0; }
  .kv.kv-compact dt { margin-top: 12px; }
  .kv.kv-compact dt:first-of-type { margin-top: 0; }

  /* 警告の見出しと本文を2行に分ける（「宿泊者名簿未入力」／「未入力2名（完了2/4）」） */
  .card-inline-alert-body strong,
  .notice-alert-body strong { display: block; margin-bottom: 2px; }
  .cia-sep { display: none; }
}

/* 予約番号・期間などは途中で改行させない（読み違いのもとになるため） */
.kv.kv-compact dd strong { word-break: keep-all; overflow-wrap: normal; }

/* 見出しの括弧書きを、括弧の途中で改行させないよう補足行に分ける（2026-08-09）
   例: 「予約時の宿泊代表者（管理者プリセット）」→ 見出し＋小さい補足行 */
.card-title-sub, .dt-sub {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted-foreground);
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   細部の粗さ（2026-08-09 / P3-C）
   ========================================================================== */

/* 注記ボックスのアイコンが複数行テキストの縦中央に来て、文章のど真ん中に浮いていた
   （カレンダーのSPでは最大91.4px下）。上端に揃える */
.pf-window { align-items: flex-start; }
.pf-window-ico { margin-top: 3px; }

/* 「次回ご宿泊予定」の項目だけ左右10pxのパディングで内側に寄っていた
   （タイトル37.0 / アラート37.0 に対し項目47.0） */
.kv.kv-compact { padding: 6px 0; }

/* ==========================================================================
   予約詳細：ホーム画面＋パンくず（2026-08-09 / 旧タブ帯 .booking-detail-nav の置き換え）
   解錠コード・Wi-Fi はマイページのチェックイン情報枠でも同じ見た目を使う
   ========================================================================== */

/* ----- 上部（物件写真＋パンくず） ----- */
.bd-top { padding: 20px 24px 0; }
.bd-top .property-hero { margin-bottom: 0; }
.bd-crumbbar {
  position: sticky; top: var(--header-h); z-index: 20;
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 14px 24px;
}
.bd-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: 16px; line-height: 1.6; color: var(--muted-foreground);
}
.bd-crumb a {
  color: var(--muted-foreground); text-decoration: none; cursor: pointer;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.bd-crumb a:hover { color: var(--foreground); border-bottom-color: var(--border-strong); }
.bd-crumb .bd-sep { color: var(--subtle); font-size: 20px; font-weight: 600; line-height: 1; transform: translateY(-1px); }
.bd-crumb .bd-cur { color: var(--foreground); font-weight: 600; }

/* ----- ホーム画面 ----- */
.bd-home { display: none; }
.bd-home.is-on { display: block; }
.bh-grid {
  display: grid; grid-template-columns: 288px 1fr; grid-template-rows: auto 1fr;
  gap: 20px 24px; align-items: start;
}
.bh-key   { grid-column: 1; grid-row: 1 / span 2; }
.bh-stay  { grid-column: 2; grid-row: 1; }
.bh-menu  { grid-column: 2; grid-row: 2; }

.bh-key { border: 1px solid var(--border); background: var(--card); padding: 18px 18px 20px; }
.bh-key-ttl { font-size: 17px; font-weight: 600; color: var(--foreground); margin-bottom: 12px; }
.bh-wifi { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
/* 解錠コードを閉じているあいだ（2026-09-01）、Wi-Fi だけが残ると上の罫線と余白が浮くので消す */
.bh-wifi-solo { margin-top: 0; padding-top: 0; border-top: 0; }

.bh-stay-lab { font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--subtle); margin-bottom: 5px; }
.bh-stay-date { font-size: 22px; font-weight: 600; color: var(--foreground); line-height: 1.5; }
.bh-stay-date .nw { white-space: nowrap; }
.bh-stay-date .bh-nights { font-size: 17px; font-weight: 500; color: var(--muted-foreground); margin-left: 10px; }
.bh-stay-time { font-size: 16.5px; color: var(--muted-foreground); margin-top: 4px; }

.bh-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bh-btn {
  appearance: none; border: 1px solid var(--border); border-radius: 0; background: var(--card);
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 20px;
  font: inherit; text-align: left; cursor: pointer; color: var(--foreground);
  transition: border-color .12s, background .12s;
}
.bh-btn:hover { border-color: var(--foreground); background: var(--muted); }
.bh-btn > svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--muted-foreground); }
.bh-btn:hover > svg { color: var(--foreground); }
.bh-btn-lab { font-size: 18px; font-weight: 600; line-height: 1.5; min-width: 0; }
.bh-btn-flag {
  margin-left: auto; flex: 0 0 auto; font-size: 14.5px; font-weight: 700; line-height: 1.4;
  padding: 2px 9px; background: var(--destructive-soft); color: var(--destructive);
}

/* 解錠コード・Wi-Fi をボタンにした形（スマホのホーム画面だけ使う） */
.bh-keybtns { display: none; }
.bh-kb {
  appearance: none; border: 1px solid var(--border); border-radius: 0; background: var(--card);
  font: inherit; text-align: left; cursor: pointer; color: var(--foreground);
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 16px 14px; min-width: 0;
}
.bh-kb:hover { border-color: var(--foreground); background: var(--muted); }
.bh-kb > svg { width: 24px; height: 24px; color: var(--muted-foreground); }
.bh-kb-ttl { font-size: 16px; font-weight: 600; line-height: 1.4; }
.bh-kb-sub { font-size: 14px; color: var(--muted-foreground); line-height: 1.4; }

/* ----- 解錠コード（QR） ----- */
.bq-body { display: flex; gap: 14px; align-items: flex-start; padding-top: 2px; }
.bq-thumb {
  position: relative; flex: 0 0 104px; width: 104px; height: 104px;
  border: 1px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.bq-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bq-thumb-empty { flex-direction: column; gap: 6px; color: var(--subtle); background: var(--muted); }
.bq-thumb-empty svg { width: 26px; height: 26px; }
.bq-thumb-empty span { font-size: 14px; letter-spacing: .06em; }
.bq-meta { flex: 1 1 auto; min-width: 0; }
.bq-badge { display: inline-block; padding: 1px 8px; font-size: 14.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.bq-badge-gray  { background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border); }
.bq-badge-green { background: var(--success-soft); color: var(--success); }
.bq-pin { display: flex; align-items: baseline; gap: 9px; margin-top: 9px; }
.bq-pin-lbl { font-size: 14.5px; color: var(--muted-foreground); letter-spacing: .06em; }
.bq-pin-val { font-family: var(--font-mono); font-size: 23px; font-weight: 500; letter-spacing: .06em; color: var(--foreground); }
.bq-valid { font-size: 15.5px; color: var(--muted-foreground); margin-top: 5px; }
.bq-cta { margin-top: 11px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- Wi-Fi ----- */
.bw-item { margin-top: 9px; }
.bw-items > .bw-item:first-child { margin-top: 2px; }
.bw-k { font-size: 14px; color: var(--subtle); letter-spacing: .06em; }
.bw-vrow { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.bw-v { font-family: var(--font-mono); font-size: 16.5px; word-break: break-all; line-height: 1.45; }
.bw-copy {
  flex: 0 0 auto; appearance: none; border: 1px solid var(--border); border-radius: 0; background: var(--card);
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted-foreground); padding: 0;
}
.bw-copy:hover { border-color: var(--border-strong); color: var(--foreground); }
.bw-copy svg { width: 14px; height: 14px; }
.bw-done { font-size: 14.5px; color: var(--success); margin-top: 7px; }
.bw-done[hidden] { display: none; }
.bw-empty { font-size: 15.5px; color: var(--muted-foreground); }

/* ----- 拡大表示（解錠コード＝黒×金 / Wi-Fi＝白） ----- */
.qrov, .wfov {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.qrov { background: rgba(12,10,8,.62); }
.wfov { background: rgba(12,10,8,.5); }
.qrov[hidden], .wfov[hidden] { display: none; }
.qrov-card {
  position: relative; width: 100%; max-width: 340px; background: #161412; color: #f4efe6;
  border: 1px solid #2c2823; box-shadow: 0 26px 70px -12px rgba(0,0,0,.7);
  padding: 20px 20px 22px; text-align: center;
}
.qrov-close, .wfov-close {
  position: absolute; top: 8px; right: 10px; background: none; border: 0; border-radius: 0;
  cursor: pointer; font-size: 21px; line-height: 1; padding: 4px;
}
.qrov-close { color: rgba(244,239,230,.5); }
.qrov-close:hover { color: #fff; }
.wfov-close { color: var(--subtle); }
.wfov-close:hover { color: var(--foreground); }
.qrov-brand { font-size: 17px; font-weight: 700; letter-spacing: .14em; color: #fff; }
.qrov-eyebrow { font-size: 13px; letter-spacing: .22em; color: var(--cal-gold, #c4973a); margin-top: 3px; font-weight: 700; }
.qrov-prop { margin-top: 14px; }
.qrov-prop-name { display: block; font-family: var(--font-serif); font-size: 20px; color: #fff; }
.qrov-code { display: block; font-family: var(--font-mono); font-size: 14.5px; letter-spacing: .04em; color: rgba(244,239,230,.5); margin-top: 4px; }
.qrov-qr { margin: 16px auto 0; width: 212px; }
.qrov-qr .bq-thumb { flex: none; width: 212px; height: 212px; padding: 10px; }
.qrov-pin { margin-top: 16px; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.qrov-pin-lbl { font-size: 14.5px; letter-spacing: .06em; color: rgba(244,239,230,.55); }
.qrov-pin-val { font-family: var(--font-mono); font-size: 26px; font-weight: 500; letter-spacing: .18em; color: #fff; }
.qrov-perf { height: 1px; margin: 16px 0 12px; background: repeating-linear-gradient(to right, #4a443b 0 5px, transparent 5px 10px); }
.qrov-valid { font-size: 16px; color: rgba(244,239,230,.75); }
.qrov-hint { font-size: 15px; color: rgba(244,239,230,.5); margin-top: 8px; line-height: 1.6; }
.wfov-card {
  position: relative; width: 100%; max-width: 360px; background: var(--card);
  border: 1px solid var(--border); box-shadow: 0 26px 70px -12px rgba(0,0,0,.45); padding: 20px 20px 24px;
}
.wfov-ttl { font-size: 18px; font-weight: 600; margin-bottom: 14px; }

/* ----- マイページのチェックイン情報枠 ----- */
.cki-card .bh-key { border: 0; padding: 0; }
.cki-target { margin-bottom: 14px; }
.cki-target-name { display: block; font-family: var(--font-serif); font-size: 18px; }
.cki-target-sub { display: block; font-size: 15px; color: var(--muted-foreground); margin-top: 3px; }
.cki-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.cki-empty { font-size: 16px; color: var(--muted-foreground); }

@media (max-width: 900px) {
  /* スマホは 滞在期間 → 解錠コード/Wi-Fi → ボタン の順に積む。
     align-items は stretch に戻す（PC用の start のままだと子が内容幅に縮む） */
  .bh-grid { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
  /* 並べ替えはホーム画面の中だけ。マイページのチェックイン情報枠にも .bh-key があり、
     スコープを外すと「予約詳細を開く」がQRの上に来てしまう */
  .bd-home .bh-stay { order: 1; } .bd-home .bh-key { order: 2; }
  .bd-home .bh-keybtns { order: 2; } .bd-home .bh-menu { order: 3; }
  .bh-menu { grid-template-columns: 1fr; }

  /* ホーム画面では、解錠コードとWi-Fiはボタンにして押したら出す（C案） */
  .bd-home .bh-key { display: none; }
  .bd-home .bh-keybtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  /* いちばん長い日付「2026年12月30日（水） 〜 2027年1月10日（月）」でも1行に収める。
     実測: 幅351pxに対し 22px=493 / 18px=404 / 16px=363 は溢れ、15px=340 で収まる */
  .bh-stay-lab { font-size: 14px; }
  .bh-stay-date { font-size: 15px; font-weight: 700; }
  .bh-stay-date .bh-nights { display: block; margin-left: 0; font-size: 15px; }
  .bh-stay-time { font-size: 15px; }

  /* パンくずは折り返すと階層が読めなくなるので、1行のまま横スクロール */
  .bd-crumbbar { padding: 12px; }
  .bd-crumbbar.is-scrollable::before {
    content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 26px;
    background: linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0));
    pointer-events: none; z-index: 1;
  }
  .bd-crumb {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; font-size: 15px;
  }
  .bd-crumb::-webkit-scrollbar { display: none; }
  .bd-crumb > * { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 640px) {
  .bd-top { padding: 16px 12px 0; }
  /* スマホのモーダルはボトムシート（背後のページが見える＝モーダルだと伝わる） */
  .qrov, .wfov { align-items: flex-end; padding: 0; }
  .qrov-card, .wfov-card { max-width: none; border-left: 0; border-right: 0; border-bottom: 0; }
  .qrov-card { padding: 18px 18px 26px; }
  .wfov-card { padding: 18px 18px 28px; }
  .qrov-qr, .qrov-qr .bq-thumb { width: 224px; }
  .qrov-qr .bq-thumb { height: 224px; }
}

/* ==========================================================================
   メール管理 (admin-mail)
   ========================================================================== */
.mail-list table { width: 100%; }
.mail-list td { vertical-align: middle; }
.mail-list .mail-name { font-weight: 600; }
.mail-list .mail-subj { font-size: 15px; color: var(--muted-foreground); }

.mail-editor { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,440px); gap: 28px; align-items: start; }
@media (max-width: 1080px) { .mail-editor { grid-template-columns: 1fr; } }

.mail-editor .field-hint { font-size: 14px; color: var(--subtle); margin: 2px 0 8px; }

.mail-tokens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mail-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; background: var(--muted); color: var(--muted-foreground);
  border: 1px solid var(--border); padding: 3px 8px;
}
.mail-tokens-label { font-size: 15px; font-weight: 600; margin-bottom: 6px; }

.mail-preview-pane { position: sticky; top: 16px; }
.mail-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mail-preview-head .lbl { font-size: 15px; font-weight: 600; color: var(--muted-foreground); }
.mail-preview-frame {
  width: 100%; height: 560px; border: 1px solid var(--border-strong);
  background: #f5f7fa; display: block;
}

.mail-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.mail-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.btn-linky { background: none; border: none; padding: 0; color: var(--destructive); font-size: 15px; cursor: pointer; }
.btn-linky:hover { text-decoration: underline; }

/* =====================================================================
   ゲスト招待の3ステップ（入力 → ご確認 → 完了）— HR-NEW-20
   モック owner-guest-invite_confirm_mock.html ver 1.1 の写し。
   新規予約カレンダーの .bk-step と名前がぶつかるため gi- で始める
   （招待ページは .bk-step を「1〜4の入力セクション」に使っている）
   ===================================================================== */
.gi-pane[hidden] { display: none; }

.gi-steps { display: flex; align-items: center; margin: 2px auto 20px; flex-wrap: nowrap; max-width: 520px; }
.gi-fstep { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted-foreground); white-space: nowrap; }
.gi-fstep .n {
  width: 26px; height: 26px; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; line-height: 1;
  padding-bottom: 2px;                     /* 丸の中の数字が下がるのを戻す（横断ルール） */
  font-size: 14px; font-weight: 700; color: var(--subtle); background: #fff;
  border-radius: 50%; flex: 0 0 auto;
}
.gi-fstep.on { color: var(--foreground); font-weight: 600; }
.gi-fstep.on .n { background: var(--foreground); color: #fff; border-color: var(--foreground); }
.gi-fstep.done .n { background: #6b6a66; color: #fff; border-color: #6b6a66; }  /* 完了＝濃いグレー */
.gi-step-line { flex: 1 1 auto; min-width: 12px; max-width: 60px; height: 1px; background: var(--border-strong); margin: 0 8px; }

/* SP：円形リング（N/3）＋ステップ名。文字量が増えても崩れない形 */
.gi-sp { display: none; align-items: center; gap: 12px; margin: 2px 0 18px; }
.gi-sp-ring {
  width: 52px; height: 52px; flex: 0 0 52px; border: 2px solid var(--foreground);
  border-radius: 50%; display: flex; align-items: baseline; justify-content: center;
  padding-bottom: 2px; gap: 1px; background: #fff;
}
.gi-sp-ring b { font-size: 20px; font-weight: 700; line-height: 1; }
.gi-sp-ring i { font-size: 13px; font-style: normal; color: var(--subtle); line-height: 1; }
.gi-sp-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gi-sp-txt b { font-size: 17px; font-weight: 600; }
.gi-sp-txt small { font-size: 14.5px; color: var(--muted-foreground); line-height: 1.6; }

/* ご確認（step2） */
.gi-final-t { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.gi-final-l { font-size: 16.5px; color: var(--muted-foreground); line-height: 1.8; margin-bottom: 18px; }
.gi-rev { border: 1px solid var(--border); background: var(--card); }
.gi-rev-h {
  font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--muted-foreground);
  background: var(--muted); padding: 9px 16px; border-bottom: 1px solid var(--border);
}
.gi-rev-h:not(:first-child) { border-top: 1px solid var(--border); }
.gi-rev-row { display: flex; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 17px; }
.gi-rev-row:last-child { border-bottom: none; }
.gi-rev-row .k { flex: 0 0 150px; color: var(--muted-foreground); font-size: 16px; }
.gi-rev-row .v { flex: 1 1 auto; min-width: 0; }
.gi-rev-row .sub, .gi-rev-msg .sub { color: var(--subtle); font-size: 15.5px; }
.gi-rev-msg { padding: 12px 16px; font-size: 16.5px; line-height: 1.9; white-space: normal; }
.gi-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.gi-back {
  appearance: none; background: none; border: none; padding: 0;
  font: inherit; font-size: 16.5px; color: var(--muted-foreground); cursor: pointer;
}
.gi-back:hover { color: var(--foreground); text-decoration: underline; }

/* 予約できる日が1日も無い期は淡くし、理由を添える（HR-REV-D2）。
   数字は消さない——枠は割り当てられていて、いま使えないだけなので */
.hrq-dim { opacity: .5; }
.hrq-why {
  display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400;
  color: var(--muted-foreground); line-height: 1.5; letter-spacing: 0; white-space: normal;
}
.hrqc-why { margin: 4px 0 6px; font-size: 14px; color: var(--muted-foreground); line-height: 1.6; }

/* FVのバッジはリンクになった（HR-REV-D1）。<a> でも見た目を変えない
   （色と下線はブラウザ既定が付くため、ここだけ打ち消す。位置や色は owner-immersive.css 側） */
a.hri-alert, a.hri-alert:hover, a.hri-alert:visited { color: #fff; text-decoration: none; }

/* 完了モーダルの中身（共通部品 hr-modal.js の body に入れる） */
.gi-done-line { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 16.5px; }
.gi-done-line span { flex: 0 0 108px; color: var(--muted-foreground); font-size: 15.5px; }
.gi-done-line b { flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.7; }
.gi-done-warn {
  margin-top: 14px; padding: 11px 14px; font-size: 16px; line-height: 1.8;
  background: var(--warning-soft, #fbf3df); border: 1px solid #e6d3a3; color: var(--foreground);
}
.gi-done-next-h { font-size: 15.5px; font-weight: 700; margin: 18px 0 8px; }
.gi-done-steps { margin: 0; padding-left: 1.3em; font-size: 16px; line-height: 1.9; color: var(--muted-foreground); }
.gi-done-steps b { color: var(--foreground); }

@media (max-width: 640px) {
  .gi-steps { display: none; }
  .gi-sp { display: flex; }
  .gi-rev-row { flex-direction: column; gap: 4px; }
  .gi-rev-row .k { flex: 0 0 auto; }
  .gi-nav { flex-direction: column-reverse; align-items: stretch; }
  .gi-nav .cal-book { width: 100%; }
  .gi-back { padding: 8px 0; }
}

/* ============ 必須ラベルと、欄単位の不備表示（HR-NEW-54 / HR-NEW-59） ============
   ルール（2026-08-10 ユーザー補足）：任意なのは「ご同行者の宿泊者名簿」だけ。
   それ以外の欄には「必須」を付け、任意の側には「任意」とは書かない。
   見た目は代表者追加モーダルの .form-label .req に揃えてある。
   ★ .req は他画面（予約詳細の宿泊者名簿など）でも「*」の意味で使われているため、
     ここでは新規予約フォームの見出し・ラベルに限って効かせる。全体には広げないこと。 */
.bk-step-h .req,
.att-f label .req,
.fs-label .req,
.pay-pick-lb .req {
  margin-left: 6px; font-size: 13px; padding: 1px 6px; vertical-align: 2px;
  background: #c0392b; color: #fff; border-radius: 0; font-weight: 500;
  letter-spacing: .02em; white-space: nowrap;
}
/* 欄の直下に出す理由。入力欄1つにつき1つだけ */
.fld-err {
  margin-top: 6px; font-size: 15px; line-height: 1.6; color: #c0392b;
}
/* 進むボタンの手前に出す要約。理由そのものは各欄の直下にある */
.fld-err-sum {
  margin: 0 0 10px; padding: 9px 12px; font-size: 16px; line-height: 1.6;
  color: #c0392b; background: #fdf2f0; border: 1px solid #e8bdb6;
}
/* 不備のある欄そのものも分かるようにする（色だけに頼らず、文言が直下に出る） */
.is-invalid { border-color: #c0392b !important; background: #fffafa; }
.is-invalid:focus { outline-color: #c0392b; }

/* ==========================================================================
   押せる領域を 44px にする（HR-REV-V3 ／ 2026-08-18）
   --------------------------------------------------------------------------
   ★ 見た目は1pxも変えない。透明な ::after を重ねて「当たり判定だけ」広げる。
     padding を足すと座布団（背景・枠）ごと大きくなって見た目が変わるので使わない。
   ★ 44px の根拠は UI/UX基本設計指針 §6。オーナー様は50代以上の方も多い。
   ★ ::after は背景も枠も持たないので画面には出ない。element の中身より後に描かれるが
     透明なので見た目に影響はなく、クリックだけ拾う。
   ★ 既に position を持つもの（.help-dot=relative / .hri-arrow・.hri-owned-close=absolute）には
     position を書かない。書くとレイアウトが動く。
   ========================================================================== */
.btn,
.filter-tab,
.header .brand,
.bd-crumb a,
.rule-link,
#hrp .subtab,
.pay-seg button,
.sidebar-toggle { position: relative; }

/* 高さだけ足りない横長のボタン・リンク（横幅はもともと44px以上ある） */
.btn::after,
.filter-tab::after,
.header .brand::after,
.bd-crumb a::after,
.rule-link::after,
#hrp .subtab::after,
.pay-seg button::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 44px; min-height: 100%;   /* 元から44px以上ある要素は縮めない */
}

/* 縦横とも足りない四角・丸のボタン */
.help-dot::after,
.sidebar-toggle::after,
.hri-arrow::after,
.hri-owned-close::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; min-width: 100%; min-height: 100%;
}

/* ============ 宿泊者名簿の「ご案内」の色（HR-NEW-88 / HR-NEW-104） ============
   全員のご登録が済んでいるときの表示。要対応（赤 = --destructive）ではない。

   ★2026-08-19 ユーザー決定：**場所によって強さを変える。**
     出る場面が違うので、同じ意味でも同じ色にはしない。
       予約完了モーダル … 予約した直後に一度だけ目に入る → 金（中の強さ）
       TOPのアラート     … 開くたび毎回目に入る          → 白地＋金の細い縁（いちばん弱い）
       次回ご宿泊予定カード … 同じマイページの中に並ぶ     → TOPと同じ弱さに揃える
   ★点滅は付けない。動きは色より強い刺激なので、点滅が残ると警告の印象がそのまま残る。

   色を変えるときはこの変数だけを直す。場所ごとに独立している。 */
:root {
  /* 金（中の強さ）… 予約完了モーダル */
  --hr-notice-mid:      var(--warning);        /* #c8a046 */
  --hr-notice-mid-soft: var(--warning-soft);   /* #faf3e2 */
  --hr-notice-mid-fg:   #8a6a22;               /* 金地・白地とも読める濃さの金 */
  /* 白地＋金の細い縁（いちばん弱い）… TOPのアラート／次回ご宿泊予定カード */
  --hr-notice-weak-bg:   #fff;
  --hr-notice-weak-line: var(--warning);
  --hr-notice-weak-fg:   #8a6a22;
}
/* --- TOPのアラート（白地＋金の細い縁）---
   .hri-alert の地の指定は owner-immersive.css にあり、そちらは別担当のため触らない。
   詳細度を上げてあるので、読み込み順に関係なくこちらが効く。
   ★点滅（.hri-alert-glow）は付けない＝hero.php 側で外している。 */
a.hri-alert.hr-notice-weak,
button.hri-alert.hr-notice-weak,
.hri-alert.hr-notice-weak {
  background: var(--hr-notice-weak-bg);
  border: 1px solid var(--hr-notice-weak-line);
  color: var(--hr-notice-weak-fg);
  box-shadow: none;
  animation: none;
}
a.hri-alert.hr-notice-weak:hover,
button.hri-alert.hr-notice-weak:hover,
.hri-alert.hr-notice-weak:hover {
  background: var(--hr-notice-weak-bg);
  color: var(--hr-notice-weak-fg);
  transform: none;
  box-shadow: none;
}
.hri-alert.hr-notice-weak .hri-alert-dot {
  background: var(--hr-notice-weak-line);
  box-shadow: none;
  animation: none;
  opacity: 1;
}
/* --- 次回ご宿泊予定カードの帯（TOPと同じ弱さ）--- */
.card-inline-alert.hr-notice-weak {
  border: 1px solid var(--hr-notice-weak-line);
  background: var(--hr-notice-weak-bg);
}
.card-inline-alert.hr-notice-weak .card-inline-alert-icon,
.card-inline-alert.hr-notice-weak .card-inline-alert-body strong {
  color: var(--hr-notice-weak-fg);
}

/* 2026-08-31: 宿泊枠を内数（残り◯/◯泊・うちハイシーズン◯泊まで）で見せる */
.qtc .qtc-hs{display:block;font-size:12px;color:var(--muted-foreground,#777);margin-top:2px;white-space:nowrap}
.qtc .qtc-hs b{font-size:13px;font-weight:600;color:var(--foreground,#1a1a1a)}
.sq-per .sq-hs{display:block;font-size:12px;color:var(--muted-foreground,#777);margin-top:2px}
.sq-per .sq-hs b{font-size:13px;font-weight:600;color:var(--foreground,#1a1a1a)}
.qcgrid.one{grid-template-columns:1fr}
.qcbox .qcbox-hs{display:block;font-size:11.5px;color:var(--muted-foreground,#777);margin-top:2px}
.qcbox .qcbox-hs b{font-size:12.5px;color:var(--foreground,#1a1a1a)}
.qc-cell .qc-hs{display:block;font-size:11.5px;color:var(--muted-foreground,#777);margin-top:2px;white-space:nowrap}
.qc-cell .qc-hs b{font-size:12.5px;color:var(--foreground,#1a1a1a)}