/* 画面の文字は Noto Sans JP に統一する。端末ごとの既定フォント任せだと、
   Mac・Windows・スマホで字の形も太さも変わり、同じ画面が別物に見えるため。
   display=swap を付けて、読み込みが終わるまでは端末のフォントで表示する
   （真っ白な時間を作らない）。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Design tokens（他の社内ツールと共通）
   ========================================================================== */
:root {
  color-scheme: light dark;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 24px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  --shadow-sm: 0 2px 6px rgba(12, 22, 39, .07), 0 1px 2px rgba(12, 22, 39, .05);
  --shadow-md: 0 8px 20px rgba(12, 22, 39, .10);
  --shadow-lg: 0 18px 36px rgba(12, 22, 39, .16);

  --color-bg: #f4f6fa;
  --color-surface: #ffffff;
  --color-surface-raised: #f6f9fc;
  --color-border: #d9e0ea;
  --color-border-strong: #93a6c2;
  --color-text: #0c1627;
  --color-text-muted: #5a6879;
  --color-text-subtle: #7e8ea3;
  --color-primary: #16263f;
  --color-primary-hover: #0c1627;
  --color-primary-active: #06101d;
  --color-primary-subtle: #e7ecf3;
  --color-success: #2e7d64;
  --color-success-subtle: #e4f0eb;
  --color-warning: #a97b33;
  --color-warning-subtle: #f7eeda;
  --color-danger: #c0453c;
  --color-danger-subtle: #faeae8;

  --sidebar-bg: #0c1627;
  --sidebar-text: #b9c6d8;
  --sidebar-text-strong: #f6f9fc;
  --sidebar-label: #7e8ea3;
  --sidebar-hover: #182942;
  --sidebar-active-bg: #1b2e4d;
  --sidebar-active-text: #ffffff;
  --sidebar-border: #1e2d47;

  --color-row-hover: #eef1f6;
  --color-row-selected: #e7ecf3;

  --color-chart-plan: #808d9e;
  --color-chart-last-year: #93a6c2;
  --color-chart-actual: #16263f;
  --color-chart-forecast: #23705a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #171411;
    --color-surface: #201c18;
    --color-surface-raised: #29241f;
    --color-border: #3a332c;
    --color-border-strong: #4c4339;
    --color-text: #f0eae1;
    --color-text-muted: #a99e90;
    --color-text-subtle: #7c7265;
    --sidebar-bg: #131110;
    --sidebar-text: #b8ada0;
    --sidebar-text-strong: #f5efe7;
    --sidebar-label: #7a7063;
    --sidebar-hover: #221e1a;
    --sidebar-active-bg: #4a7fd0;
    --sidebar-active-text: #ffffff;
    --sidebar-border: #2a2521;
    --color-row-hover: #262019;
    --color-row-selected: #33241d;
    --color-primary: #7aa6e8;
    --color-primary-hover: #93b7ef;
    --color-primary-active: #5f8fd8;
    --color-primary-subtle: #1c2a3a;
    --color-success: #5fb795;
    --color-success-subtle: #1d3a30;
    --color-warning: #d7a45c;
    --color-warning-subtle: #3a2e19;
    --color-danger: #e28078;
    --color-danger-subtle: #3a211f;

    --color-chart-plan: #6d7480;
    --color-chart-last-year: #fbbf24;
    --color-chart-actual: #6d97fb;
    --color-chart-forecast: #4ade80;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.icon-sm { width: 13px; height: 13px; vertical-align: -2px; }
.icon-lg { width: 26px; height: 26px; vertical-align: -6px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
button, .button-link, .button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: 1.4;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
button:hover, .button-link:hover, .button:hover { text-decoration: none; background: var(--color-surface-raised); border-color: var(--color-border-strong); }
button:active, .button-link:active, .button:active { transform: translateY(1px); }
button.primary, .button-link.primary, .button.primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
button.primary:hover, .button-link.primary:hover, .button.primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
button.ghost, .button-link.ghost, .button.ghost { border-color: var(--color-border); background: var(--color-surface); }
button.ghost:hover, .button-link.ghost:hover, .button.ghost:hover { background: var(--color-surface-raised); }
button.danger, .button-link.danger, .button.danger { color: var(--color-danger); border-color: var(--color-danger); }
button.danger:hover, .button-link.danger:hover, .button.danger:hover { background: var(--color-danger-subtle); }
.icon-button { padding: var(--space-2); border-radius: var(--radius-sm); line-height: 1; }
button.small, .button-link.small, .button.small { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }

.flash { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.flash li { padding: var(--space-3) var(--space-4); background: var(--color-primary-subtle); color: var(--color-primary); border-radius: var(--radius-md); font-size: var(--text-sm); }

/* ==========================================================================
   App shell（左サイドバー + コンテンツ）
   ========================================================================== */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.app-content { flex: 1; min-width: 0; }

.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-4);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.app-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--sidebar-text-strong);
  font-weight: 700;
  font-size: var(--text-md);
}
.app-sidebar-brand:hover { text-decoration: none; color: var(--sidebar-text-strong); }
.app-sidebar-section { display: flex; flex-direction: column; gap: var(--space-2); }
.app-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sidebar-label);
  padding: 0 var(--space-2);
}
.app-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.app-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  font-size: var(--text-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.app-nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); text-decoration: none; }
.app-nav-item.is-active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: 600; }
.app-sidebar-footer { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--sidebar-border); }
.app-sidebar-footer .app-nav-item--logout { width: 100%; }


.facility-switcher { position: relative; }
.facility-switcher-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid #2a2f3d;
  border-radius: var(--radius-sm);
  background: #1a1e29;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab0bd' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 14px;
  padding-right: var(--space-8);
}
.facility-switcher-select:hover { border-color: #3a4054; }
.facility-switcher-select option { background: #1a1e29; color: #fff; }

/* スマホ・タブレットでのサイドバーの扱いは、末尾の「スマホ表示」セクションで
   ドロワー方式にまとめている(ここで縦積みにすると、本文に届くまで全ツール分
   スクロールすることになるため)。 */

/* ==========================================================================
   Page shell
   ========================================================================== */
.page { max-width: 1100px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); }
/* 表とグラフを並べて見る画面（分析ツールなど）。1100pxだと、1600px級の画面で
   右3割がただの余白になり、グラフも表も窮屈なまま縮こまっていた。 */
.page--wide { max-width: 1560px; }
.breadcrumb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.breadcrumb-link { color: var(--color-text-muted); }
.breadcrumb-link:hover { color: var(--color-primary); text-decoration: none; }
.breadcrumb-current { color: var(--color-text); font-weight: 600; }
.breadcrumb-sep { display: inline-flex; color: var(--color-text-muted); opacity: 0.6; }
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.page-header h1 { font-size: var(--text-xl); margin: var(--space-1) 0 0; }
.page-header .hint { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.back-link:hover { color: var(--color-primary); }

.proto-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-warning-subtle);
  color: var(--color-warning);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Facility list
   ========================================================================== */
.sidebar-title { font-size: var(--text-md); margin: 0 0 var(--space-3); }

.hub-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

/* ---- 施設サイドバー（検索＋トグルリスト） ---- */
.facility-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-4);
}
.search-field input {
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--text-sm);
  color: var(--color-text);
  width: 100%;
}
.facility-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.facility-item { border-bottom: 1px solid var(--color-border); }
.facility-item:last-child { border-bottom: none; }
.facility-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.facility-toggle:hover { color: var(--color-primary); background: transparent; }
.toggle-chevron { transition: transform var(--transition-fast); color: var(--color-text-subtle); }
.facility-toggle[aria-expanded="true"] .toggle-chevron { transform: rotate(180deg); }
.facility-panel { padding: 0 var(--space-1) var(--space-3); }
.facility-panel a { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
.empty-hint { color: var(--color-text-subtle); font-size: var(--text-sm); text-align: center; padding: var(--space-4) 0; }

/* ---- 全体ダッシュボード ---- */
.dashboard-main { flex-grow: 1; min-width: 0; }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}
.dashboard-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dashboard-card h3 { font-size: var(--text-md); margin: 0; }
.dashboard-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.dashboard-top-list li {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
  border-bottom: 1px dashed var(--color-border);
}
.dashboard-top-list li:last-child { border-bottom: none; }
.dashboard-top-list li.is-flagged span:last-child { color: var(--color-danger); font-weight: 600; }
.dashboard-card .button-link { align-self: flex-start; margin-top: var(--space-2); }

@media (max-width: 720px) {
  .hub-layout { flex-direction: column; }
  .facility-sidebar { width: 100%; }
}

/* ==========================================================================
   Facility detail — section cards
   ========================================================================== */
.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-5);
}
.section-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.section-card-header { display: flex; align-items: center; gap: var(--space-3); }
.section-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.section-card h2 { font-size: var(--text-md); margin: 0; }
.section-card-summary { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.section-metric { display: flex; align-items: baseline; gap: var(--space-2); }
.section-metric-value { font-size: var(--text-xl); font-weight: 700; }
.section-metric-label { font-size: var(--text-xs); color: var(--color-text-subtle); }
.section-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }

.section-card--placeholder { opacity: .7; }
.section-card--placeholder .section-card-icon { background: var(--color-surface-raised); color: var(--color-text-subtle); }
.badge {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-warning-subtle);
  color: var(--color-warning);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ==========================================================================
   Auth (login)
   ========================================================================== */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-6);
}
.auth-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-4);
}
.auth-title { font-size: var(--text-lg); text-align: center; margin: 0 0 var(--space-6); }
.auth-field { position: relative; display: flex; flex-direction: column; gap: var(--space-1); }
.auth-field label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.auth-field input {
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
}
.auth-toggle-visibility {
  position: absolute;
  right: var(--space-1);
  bottom: var(--space-1);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: var(--space-2);
}
.alert { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); margin: var(--space-3) 0; }
.alert-danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.alert-warn { background: var(--color-warning-subtle); color: var(--color-warning); }
.alert-ok { background: var(--color-success-subtle); color: var(--color-success); }
.auth-card .form-actions { margin-top: var(--space-4); }
.auth-card .form-actions button { width: 100%; justify-content: center; }

/* ==========================================================================
   Promotion form（promotion-management-toolから移植）
   ========================================================================== */
.hint { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-1) 0 0; display: flex; align-items: flex-start; gap: var(--space-1); }
/* hidden属性は本来display:noneだが、ボタンなどにdisplay:flex等を後から当てているぶん
   詳細度で負けて効かないことがある(実際に「元に戻す」ボタンや日程の削除ボタンが
   隠れていなかった)。属性が付いている以上は必ず隠す。 */
[hidden] { display: none !important; }

.promo-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 1100px; padding-bottom: var(--space-12); }
.form-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.form-grid label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

.period-fieldset, .facility-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
  background: var(--color-surface);
}
.period-fieldset legend, .facility-fieldset legend {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0 var(--space-1);
}
.period-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.period-row .grow { flex: 1; min-width: 240px; }

.facility-fieldset-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.facility-form-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.facility-form-table th, .facility-form-table td { border-bottom: 1px solid var(--color-border); padding: var(--space-2); text-align: left; }
.facility-form-table tr.is-hidden { display: none; }
.wide-input { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }

.url-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-1); }
.url-search-select { font-size: var(--text-xs); max-width: 100%; padding: 2px var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }

/* ヘルプアイコンにカーソルを合わせると手順を表示するツールチップ（一休CSVの取得手順など） */
.help-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: var(--space-1); color: var(--color-text-subtle); cursor: help; }
.help-tip:hover, .help-tip:focus, .help-tip:focus-within { color: var(--color-primary); }
.help-tip:hover .help-tip-content, .help-tip:focus .help-tip-content, .help-tip:focus-within .help-tip-content { display: block; }
.help-tip-icon { display: block; }
.help-tip-content {
  display: none;
  position: absolute; z-index: 60; top: 100%; left: 0; margin-top: var(--space-2);
  width: 340px; max-width: 80vw;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: var(--space-3);
  font-size: var(--text-xs); font-weight: 400; line-height: 1.7; color: var(--color-text); white-space: normal; cursor: auto;
}
.help-tip-content ol { margin: 0; padding-left: 1.2em; }
.help-tip-content li { margin-bottom: var(--space-2); }
.help-tip-content li:last-child { margin-bottom: 0; }
.help-tip-content code { background: var(--color-bg); border-radius: 3px; padding: 0 4px; font-size: 10px; }
.help-tip-content pre {
  margin: var(--space-1) 0 0; background: var(--color-bg); border-radius: var(--radius-sm);
  padding: var(--space-2); font-size: 10px; white-space: pre-wrap; word-break: break-all; overflow-x: auto;
}

.score-detail { margin-top: 2px; }
.score-detail summary { list-style: none; cursor: pointer; font-size: 10px; color: var(--color-text-muted); }
.score-detail summary::-webkit-details-marker { display: none; }
.score-detail-list { margin: 2px 0 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

.crosstab-table th, .crosstab-table td { text-align: center; padding: var(--space-2); white-space: nowrap; }
.crosstab-table thead th:first-child, .crosstab-table tbody th { text-align: left; background: var(--color-surface-raised); }
.ct-empty { color: var(--color-text-subtle); }

/* クロス集計: 行軸・列軸を選んだ後、不要な値だけチェックを外して表から除外するための一覧 */
.ct-key-filters { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.ct-key-filter-group { flex: 1; min-width: 220px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.ct-key-filter-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
/* 料金調査の表: 空欄の理由。満室は事実、取得できずはこちらの取りこぼし。 */
.price-soldout { color: var(--color-text-muted); font-size: var(--text-xs); }
.price-failed { color: var(--color-danger); font-size: var(--text-xs); }
/* 料金表・部屋タイプ設定: 縛りを掛けた人数のマス。 */
.rate-not-sold { color: var(--color-text-subtle); }
.rate-table td.is-not-sold input { opacity: 0.45; }
.rate-locked { color: var(--color-primary); }
.rate-lock-mark {
  margin-left: 3px; padding: 0 3px; border-radius: var(--radius-sm);
  background: var(--color-primary-subtle); color: var(--color-primary);
  font-size: var(--text-xs); font-weight: 600;
}
.rate-lock { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rate-lock label.checkbox-inline { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; }
/* 見出し・ボタン・切り替えは、それぞれの中では折り返さず、入り切らなければ次の行へ回す。 */
.ct-key-filter-head > * { white-space: nowrap; }
/* 「国内／海外でまとめる」の切り替え。すべて選択／解除の並びに置く。 */
.ct-key-head-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); white-space: nowrap; cursor: pointer; }
.ct-key-checklist { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); max-height: 140px; overflow-y: auto; }
.ct-key-item { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); white-space: nowrap; cursor: pointer; }
/* 居住国は数が多いので、国内／海外のまとまりにしてから国を並べる。
   まとまりごと縦に積み、中の国だけを折り返す。 */
.ct-key-checklist:has(.ct-key-group) {
  flex-direction: column; flex-wrap: nowrap; gap: var(--space-2);
  /* まとまりを縦に積むぶん、平らに並べるときより高さが要る。 */
  max-height: 260px;
}
.ct-key-group { width: 100%; }
.ct-key-group-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding-bottom: 2px; margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-surface); z-index: 1;
}
.ct-key-group-name { font-size: var(--text-xs); font-weight: 700; }
.ct-key-group-items { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.ct-cell-percent { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); }
.crosstab-table .ct-total-row th, .crosstab-table .ct-total-row td, .crosstab-table .ct-total-col {
  font-weight: 700; background: var(--color-surface-raised);
}

/* 最近の評点テーブル。OTA名(colspan)+評点/件数(サブ見出し)の2段見出しにして、
   評点・件数のセルは中央揃え、施設名の列だけ左揃え・折り返し無しにする。 */
/* table.data-table th/td の汎用ルール(text-align:left)より詳細度を上げるため
   table.data-table.review-scores-table の形で指定する(単に.review-scores-table
   だけだと詳細度で負けて中央揃えが効かない)。
   見出し(th)は「施設」「取得日」も含めて常に中央揃え。データ側の施設名だけ
   読みやすさのため左揃え・折り返し無しにする(:first-childだと2行見出しの
   2行目の先頭セル＝じゃらんの「評点」まで巻き込んでしまうため、専用クラスで指定する)。 */
table.data-table.review-scores-table th, table.data-table.review-scores-table td { text-align: center; vertical-align: middle; }
table.data-table.review-scores-table td.review-scores-name { text-align: left; white-space: nowrap; }
table.data-table.review-scores-table tbody td:last-child { white-space: nowrap; }

.wc-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.wc-word { display: inline-flex; align-items: baseline; gap: 1px; line-height: 1.3; white-space: nowrap; text-decoration: none; }
.wc-word:hover { text-decoration: underline; }
.wc-word-mark { font-size: .6em; }

.wc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.wc-table-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.wc-table-box h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-md); }
.wc-pos-dot { width: 10px; height: 10px; border-radius: var(--radius-full); display: inline-block; flex-shrink: 0; }
.wc-table th, .wc-table td { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.wc-bar-cell { position: relative; min-width: 90px; }
.wc-bar { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: var(--radius-sm); opacity: .55; z-index: 0; }
.wc-bar-value { position: relative; z-index: 1; padding: 0 var(--space-1); }
.wc-sentiment { font-size: var(--text-xs); font-weight: 600; }
.wc-table-more { margin-top: var(--space-3); text-align: center; }

.score-diff { font-size: var(--text-xs); font-weight: 600; margin-left: 4px; white-space: nowrap; }
.score-diff.is-up { color: var(--color-success); }
.score-diff.is-down { color: var(--color-danger); }
.score-diff.is-flat { color: var(--color-text-subtle); }

.form-actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: sticky;
  bottom: var(--space-3);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Promotion list（施設ごとの一覧）
   ========================================================================== */
.promo-list-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.promo-list-table th, .promo-list-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; font-size: var(--text-sm); }
.promo-list-table tr:last-child td { border-bottom: none; }
.promo-list-actions { display: flex; gap: var(--space-2); }
.promo-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }

/* ==========================================================================
   Budget form（budget-progress-trackerから移植）
   ========================================================================== */
.record-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 900px; }
.form-section-title { font-size: var(--text-md); margin: 0 0 var(--space-3); }
.form-grid input:disabled { background: var(--color-surface-raised); cursor: not-allowed; }
.history-section { margin-top: var(--space-6); max-width: 900px; }
.history-section table { width: 100%; border-collapse: collapse; }
.history-section th, .history-section td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; font-size: var(--text-sm); }
.num-pos { color: var(--color-success); font-weight: 700; }
.num-neg { color: var(--color-danger); font-weight: 700; }
.num-flat { color: var(--color-text-muted); }

.budget-year-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.budget-year-table th, .budget-year-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: right; font-size: var(--text-sm); }
.budget-year-table th:first-child, .budget-year-table td:first-child { text-align: left; }
.budget-year-table tr:last-child td { border-bottom: none; }
.budget-year-table tr.is-future { opacity: .5; }
.budget-summary-strip { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.budget-summary-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.budget-summary-stat .label { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); margin-bottom: var(--space-1); }
.budget-summary-stat .value { font-size: var(--text-lg); font-weight: 700; }

/* ==========================================================================
   Promotion list / masters / calendar（promotion-management-toolから移植）
   ========================================================================== */
.tab-strip { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.tab-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-4); font-size: var(--text-base); font-weight: 600;
  color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab-link:hover { color: var(--color-text); text-decoration: none; }
.tab-link.is-active { color: var(--color-primary); border-color: var(--color-primary); }
button.tab-link { background: transparent; border-width: 0 0 2px; border-radius: 0; }
button.tab-link:hover { background: transparent; }

.filter-bar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin-bottom: var(--space-2); }
.filter-row label { display: flex; flex-direction: column; font-size: var(--text-xs); color: var(--color-text-muted); gap: var(--space-1); font-weight: 600; }
.filter-row .grow { flex: 1; min-width: 240px; }
.filter-row select, .filter-row input[type="date"], .filter-row input[type="number"], .filter-row input[type="file"] {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--text-base); background: var(--color-surface); color: var(--color-text);
}
.filter-actions { align-items: center; }
.filter-row label.checkbox-inline { flex-direction: row; align-items: center; gap: var(--space-2); font-weight: 400; }

.facility-popover { position: relative; }
.facility-popover summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text); background: var(--color-surface);
}
.facility-popover summary::-webkit-details-marker { display: none; }
.facility-popover[open] summary { border-color: var(--color-primary); color: var(--color-primary); }
.facility-popover summary .chevron { transition: transform var(--transition-fast); }
.facility-popover[open] summary .chevron { transform: rotate(180deg); }
.facility-popover .selected-count { background: var(--color-primary); color: #fff; font-size: var(--text-xs); border-radius: var(--radius-full); padding: 0 var(--space-2); min-width: 18px; text-align: center; }
.facility-popover-panel { position: absolute; z-index: 30; margin-top: var(--space-2); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; min-width: 320px; }
.facility-checkboxes { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.alert-panel-row { display: flex; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-4); flex-wrap: wrap; }
.alert-panel { max-width: 320px; }
.alert-panel summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-danger); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-danger); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.alert-panel summary::-webkit-details-marker { display: none; }
.alert-panel summary .chevron { transition: transform var(--transition-fast); }
.alert-panel[open] summary .chevron { transform: rotate(180deg); }
.alert-panel-count { background: var(--color-danger); color: #fff; font-size: var(--text-xs); border-radius: var(--radius-full); padding: 0 var(--space-2); min-width: 18px; text-align: center; }
.alert-panel-list { margin-top: var(--space-2); padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; list-style: none; }
.alert-panel-list li + li { border-top: 1px solid var(--color-border); }
.alert-panel-list a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); color: var(--color-text); text-decoration: none; border-radius: var(--radius-sm); }
.alert-panel-list a:hover { background: var(--color-surface-raised); }
.alert-panel-date { font-size: var(--text-xs); font-weight: 700; color: var(--color-danger); }
.alert-panel-name { font-size: var(--text-sm); font-weight: 600; }
.alert-panel-channel { font-size: var(--text-xs); color: var(--color-text-muted); }
.planned-alert-panel summary { border-color: var(--color-warning); color: var(--color-warning); }
.planned-alert-panel .alert-panel-count { background: var(--color-warning); }
/* 新規プロモーション（過去1週間の自動追加）。締切・予定と区別できるよう、色を主色にする。 */
.new-alert-panel summary { border-color: var(--color-primary); color: var(--color-primary); }
.new-alert-panel .alert-panel-count { background: var(--color-primary); }
.new-alert-panel .alert-panel-date { color: var(--color-primary); }
.planned-alert-panel .alert-panel-facilities { font-size: var(--text-xs); font-weight: 700; color: var(--color-warning); }

.chip { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--color-text); }
.chip:has(input:checked) { background: var(--color-primary-subtle); border-color: var(--color-primary); color: var(--color-primary); }
a.chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.chip-planned { background: var(--color-warning-subtle); border-color: var(--color-warning); color: var(--color-warning); font-weight: 600; }
.facility-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.facility-chip-list.is-clamped { max-height: 54px; overflow: hidden; }
.chip-toggle { font-size: var(--text-xs); }

.channel-group { margin-bottom: var(--space-4); }
.channel-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); background: var(--color-bg); }
.channel-section > summary::-webkit-details-marker { display: none; }
.channel-heading { font-size: var(--text-lg); margin: 0; padding-left: var(--space-3); border-left: 4px solid var(--color-primary); display: flex; align-items: baseline; gap: var(--space-2); flex: 1; }
.channel-heading .count { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: normal; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 1px var(--space-2); }
.channel-section .chevron { color: var(--color-text-muted); transition: transform var(--transition-base); }
.channel-section[open] .chevron { transform: rotate(180deg); }
.promo-list { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.promo-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-xs); scroll-margin-top: 20px; transition: box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base); }
.promo-card:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
.promo-card:target { background: var(--color-primary-subtle); border-color: var(--color-primary); }
.promo-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.promo-title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.promo-name { font-size: var(--text-md); font-weight: 600; color: var(--color-text); display: inline-flex; align-items: center; gap: var(--space-1); }
a.promo-name:hover { color: var(--color-primary); text-decoration: underline; }
.promo-actions { display: flex; gap: var(--space-1); align-items: center; flex-shrink: 0; }
.promo-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.meta-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.meta-item.is-warning { color: var(--color-warning); font-weight: 600; }
.promo-summary { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); background: var(--color-surface-raised); border-radius: var(--radius-sm); font-size: var(--text-base); white-space: pre-wrap; color: var(--color-text); }
.promo-summary-details { margin-top: var(--space-2); }
.promo-summary-details summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted); }
.promo-summary-details[open] summary { margin-bottom: var(--space-1); }
.promo-facilities { margin-top: var(--space-3); }

.badge { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-primary-subtle); color: var(--color-primary); font-size: var(--text-xs); padding: 1px var(--space-2); border-radius: var(--radius-sm); font-weight: 600; }
.badge-new { background: var(--color-danger); color: #fff; font-weight: 700; }
.badge-urgent { background: var(--color-danger); color: #fff; font-weight: 700; }
.badge-ended { background: var(--color-surface-raised); color: var(--color-text-muted); border: 1px solid var(--color-border); font-weight: 600; }

table.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
table.data-table th, table.data-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; font-size: var(--text-sm); }
table.data-table th { background: var(--color-surface-raised); color: var(--color-text-muted); font-weight: 600; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tbody tr { transition: background var(--transition-base); }
table.data-table tbody tr:hover { background: var(--color-row-hover); }
/* 選択中の行は、hoverより一段濃い暖色で示す。 */
table.data-table tbody tr.is-selected { background: var(--color-row-selected); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.inline-form { display: inline-flex; gap: var(--space-1); align-items: center; margin: 0; }
.muted { color: var(--color-text-muted); }
.empty { color: var(--color-text-muted); padding: var(--space-8) var(--space-4); text-align: center; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

.master-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-5); max-width: 760px; }
.master-table input[type="text"] { padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.reorder-cell { display: flex; flex-direction: column; gap: 2px; }
.reorder-cell button:disabled { opacity: .3; cursor: not-allowed; }
.add-form { margin-top: var(--space-3); flex-wrap: wrap; }
/* 入力欄が増えても枠からはみ出さないよう、折り返して幅も枠内に収める。 */
.master-section .inline-form { flex-wrap: wrap; max-width: 100%; }
.master-section input[type="text"] { max-width: 100%; }
.master-input-narrow { width: 7em; }
.master-input-wide { width: 14em; }
/* 表が横に長くなったら、カードを押し広げず表の中で横スクロールさせる。 */
.master-section .table-scroll { max-width: 100%; }
@media (max-width: 640px) {
  .master-input-narrow, .master-input-wide { width: 100%; }
}
.switch { position: relative; display: inline-flex; align-items: center; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--color-border-strong); border-radius: var(--radius-full); transition: background var(--transition-base); }
.switch .thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-xs); transition: transform var(--transition-base); }
.switch input:checked + .track { background: var(--color-success); }
.switch input:checked + .track + .thumb { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.gantt-scroll { overflow: auto; max-height: 78vh; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
/* 「最大表示」: カレンダーをブラウザの表示領域いっぱいに広げる(サイドバー・ヘッダーも隠す)。
   列が多いので、ページ幅(1100px)とサイドバーに挟まれたままだと横に狭くて使いづらいため。
   最大表示中も保存ボタンは下に残し、その場で編集して保存できるようにする。 */
.calendar-wrap.is-maximized {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  padding: var(--space-3);
  background: var(--color-bg);
}
.calendar-wrap.is-maximized .gantt-scroll { flex: 1; max-height: none; }
.calendar-wrap.is-maximized .form-actions { margin: var(--space-2) 0 0; }
.calendar-wrap.is-maximized .calendar-wrap-bar { margin: 0 0 var(--space-2); }
.gantt-calendar { border-collapse: collapse; width: max-content; }
.gantt-calendar th, .gantt-calendar td { border: 1px solid var(--color-border); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); text-align: center; white-space: nowrap; }
.gantt-date-header { background: var(--color-surface-raised); position: sticky; top: 0; z-index: 3; min-width: 84px; font-weight: 600; }
.gantt-date-header a { color: var(--color-text); }
.gantt-date-header a:hover { color: var(--color-primary); }
.gantt-date-header.is-today { background: var(--color-primary-subtle); }
.gantt-date-header.is-saturday { background: #dbeeff; color: #1c5fa8; }
.gantt-date-header.is-sunday-holiday { background: var(--color-danger-subtle); color: var(--color-danger); }
@media (prefers-color-scheme: dark) {
  .gantt-date-header.is-saturday { background: #163049; color: #8bc4ff; }
}
.gantt-cell-input { padding: 2px; }
.gantt-inline-input {
  width: 100%;
  min-width: 60px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: center;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.gantt-inline-input:hover { border-color: var(--color-border); }
.gantt-inline-input:focus { border-color: var(--color-primary); background: var(--color-surface); outline: none; }
.gantt-inline-input.is-recent-change, .gantt-cell.is-recent-change {
  background: #fff3b0;
  position: relative;
  z-index: 1;
  font-weight: 700;
  box-shadow: 0 0 0 2px #e0a800, 0 2px 6px rgba(224, 168, 0, 0.5);
}
.gantt-cell.is-recent-change { border-radius: var(--radius-sm); }
@media (prefers-color-scheme: dark) {
  .gantt-inline-input.is-recent-change, .gantt-cell.is-recent-change {
    background: #5a4a0d;
    box-shadow: 0 0 0 2px #d9a400, 0 2px 6px rgba(0, 0, 0, 0.6);
  }
}

.gantt-cell-button {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.gantt-cell-button:hover { background: var(--color-primary-subtle); }

.cell-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-subtle);
  padding: 1px;
  cursor: pointer;
  vertical-align: middle;
  border-radius: var(--radius-sm);
}
.cell-history-btn:hover { color: var(--color-primary); background: var(--color-primary-subtle); }
/* .gantt-cell-inputは<td>そのものに付くクラスなので、display:flexにしてしまうと
   table-cellのレイアウトが崩れ、以降の行すべてがずれる(実際に起きた不具合)。
   flexにはせず、中の要素をinline-blockで横並びにする。 */
.gantt-cell-input { white-space: nowrap; }
.gantt-cell-input .gantt-inline-input { display: inline-block; vertical-align: middle; width: calc(100% - 20px); }
.gantt-cell-input .cell-history-btn { display: inline-flex; vertical-align: middle; }

.sell-stop-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(100% - 20px); height: 22px; vertical-align: middle;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); cursor: pointer;
}
.sell-stop-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sell-stop-toggle span { display: none; font-size: var(--text-xs); font-weight: 700; color: #fff; }
.sell-stop-toggle:has(input:checked) { background: var(--color-danger); border-color: var(--color-danger); }
.sell-stop-toggle:has(input:checked) span { display: inline; }

.history-popup {
  position: fixed;
  z-index: 100;
  min-width: 200px;
  max-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  font-size: var(--text-xs);
}
.history-popup h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.history-popup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.history-popup li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 2px 0; border-bottom: 1px dashed var(--color-border); }
.history-popup li:last-child { border-bottom: none; }
.history-popup .history-value { font-weight: 600; }
.history-popup .history-at { color: var(--color-text-muted); white-space: nowrap; }
.history-popup .history-empty { color: var(--color-text-subtle); }
.history-popup-close { position: absolute; top: var(--space-1); right: var(--space-1); }
.gantt-col-channel { position: sticky; left: 0; z-index: 2; width: 80px; min-width: 80px; max-width: 80px; }
.gantt-col-label { position: sticky; left: 80px; z-index: 2; width: 112px; min-width: 112px; max-width: 112px; }
.gantt-corner { background: var(--color-surface-raised); z-index: 4; top: 0; position: sticky; }
.gantt-channel-name {
  background: var(--color-surface-raised);
  font-weight: 600;
  vertical-align: middle;
}
/* チャネル名・部屋タイプ名は長いと64px列に収まらずはみ出していたため、
   このセルだけ折り返しを許可する(他のセルは横スクロールのnowrapのまま)。
   ".gantt-calendar th/td"の詳細度(class+要素)に負けないよう、th/td両方を
   明示して詳細度を上げる。 */
.gantt-calendar th.gantt-channel-name, .gantt-calendar td.gantt-channel-name {
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.gantt-channel-name.is-unmapped { color: var(--color-warning); }
.gantt-row-label { background: var(--color-surface-raised); color: var(--color-text-muted); text-align: left; font-weight: normal; }
.gantt-cell { min-width: 96px; max-width: 150px; vertical-align: top; white-space: normal; }
.gantt-row-count td.gantt-cell { color: var(--color-text); font-weight: 600; text-align: center; }
.gantt-percentage { font-size: 9px; font-weight: normal; color: var(--color-text-muted); }
.gantt-row-total th, .gantt-row-total td { background: var(--color-surface-raised); border-top: 2px solid var(--color-border-strong); border-bottom: 2px solid var(--color-border-strong); font-weight: 700; }
.gantt-row-total .gantt-cell { color: var(--color-primary); text-align: center; }
/* 差分セルの増減色。上の".gantt-row-count td.gantt-cell"(class2+要素1)や
   ".gantt-row-total .gantt-cell"(class2)の方が詳細度が高いため、単独クラスの
   .num-pos/.num-negのままだと色が打ち消されて常に本文色になってしまう。
   施設設定の「差分の色付けしきい値」はこの色分けで効いてくるので、
   ここでcalendar配下のtdに限定して上書きする。 */
/* しきい値超過セルは文字色だけだと予約表の中で埋もれてしまうため、
   pill-ok/pill-crit等と同じ配色トークンで背景も塗って目立たせる。 */
.gantt-calendar td.gantt-cell.num-pos { color: var(--color-success); background: var(--color-success-subtle); font-weight: 700; }
.gantt-calendar td.gantt-cell.num-neg { color: var(--color-danger); background: var(--color-danger-subtle); font-weight: 700; }
.gantt-calendar td.gantt-cell.num-flat { color: var(--color-text-muted); font-weight: 600; }
.is-channel-start > th, .is-channel-start > td { border-top: 2px solid var(--color-border-strong); }
/* 備考欄は数値ではなく文章(イベント名など)を書く欄なので、他のセルより広く取り、
   複数行を折り返して表示する。 */
.gantt-calendar td.gantt-cell-note { min-width: 150px; max-width: 220px; }
/* TLリンカーン反映: これまでに使ったプラングループセット名の候補。 */
.plan-group-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 var(--space-3); }
.plan-group-picker .hint { width: 100%; }
.plan-group-choice {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 2px var(--space-2); cursor: pointer; font-size: var(--text-sm);
}
.plan-group-choice:hover { border-color: var(--color-primary); }
.plan-group-manage { margin-top: var(--space-2); font-size: var(--text-sm); }
.plan-group-manage summary { cursor: pointer; color: var(--color-text-muted); }
/* 予算進捗のKPIは指標(売上/販売室数/ADR)で単位が変わるので、数値の後ろに小さく添える。 */
.kpi-unit { font-size: var(--text-sm); font-weight: normal; color: var(--color-text-muted); margin-left: 2px; }
/* プロモーションの予約期間: 複数日程を必要なだけ足せる入力行。 */
.period-rows { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); }
.period-row { display: flex; align-items: center; gap: var(--space-2); }
.period-row input[type="date"] { flex: 0 1 190px; }
.period-sep { color: var(--color-text-muted); }
.period-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.period-bulk { font-size: var(--text-sm); }
.period-bulk summary { cursor: pointer; color: var(--color-text-muted); }
/* 競合一覧: 行のドラッグで並び替えられることが分かるようにする。 */
#competitor-table tbody tr { cursor: grab; }
#competitor-table tbody tr.is-dragging { opacity: 0.5; cursor: grabbing; background: var(--color-primary-subtle); }
.period-dow {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 2px var(--space-2); cursor: pointer;
}
.period-dow:hover { border-color: var(--color-primary); }
.gantt-calendar textarea.gantt-note-input {
  resize: vertical;
  white-space: pre-wrap;
  line-height: 1.35;
  text-align: left;
  font-weight: normal;
  font-family: inherit;
}

/* プロモーションの実施期間バー: OTA(チャネル)ごとにブランドカラーへ寄せる。
   バーは半透明にして、下のセルの罫線(格子)が透けて見えるようにし、
   どのセル=どの日まで実施しているかを数えやすくする。
   一致しないチャネルは既定(テーマの primary color)にフォールバックする。 */
:root {
  --ota-jalan-fill: rgba(240, 133, 28, 0.32);
  --ota-jalan-strong: #c76800;
  --ota-rakuten-fill: rgba(26, 158, 75, 0.30);
  --ota-rakuten-strong: #0f7a37;
  --ota-ikkyu-fill: rgba(27, 42, 82, 0.42);
  --ota-ikkyu-strong: #0e1830;
  --ota-expedia-fill: rgba(47, 111, 237, 0.28);
  --ota-expedia-strong: #1c4fc0;
  --ota-rurubu-fill: rgba(142, 68, 173, 0.28);
  --ota-rurubu-strong: #6c3086;
  --ota-booking-fill: rgba(0, 59, 149, 0.28);
  --ota-booking-strong: #00276b;
  --ota-agoda-fill: rgba(134, 47, 156, 0.28);
  --ota-agoda-strong: #631f77;
  --ota-default-fill: var(--color-primary-subtle);
  --ota-default-strong: var(--color-primary);
}
.gantt-row-promo-bar .gantt-row-label { text-align: left; }
.gantt-row-promo-bar .gantt-row-label a { color: var(--color-text); display: block; max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gantt-row-promo-bar .gantt-row-label a:hover { color: var(--color-primary); text-decoration: underline; }
.gantt-promo-period { display: block; font-size: 9px; font-weight: normal; color: var(--color-text-muted); white-space: nowrap; }
/* 施設ごとの割引内容・メモがある場合の目印(内容はtitle属性で全文を出す)。 */
.gantt-promo-note { display: block; font-size: 9px; font-weight: 600; color: var(--color-primary); white-space: nowrap; cursor: help; }

/* TLリンカーン反映の確認画面で、反映前にランクを直せる入力欄。 */
.rank-sync-edit { width: 5.5em; text-align: center; font-weight: 700; padding: 2px var(--space-1); }
/* ランク保存の履歴(保存を取り消す)の折りたたみ。 */
.rank-history { margin-top: var(--space-3); }
.rank-history > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.rank-history > summary:hover { color: var(--color-primary); }

/* 全施設サマリーの「在庫取込の状況」ボード(施設×日付の○表)。 */
.import-board { border-collapse: collapse; width: max-content; }
.import-board th, .import-board td { border: 1px solid var(--color-border); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); text-align: center; white-space: nowrap; }
.import-board thead th { background: var(--color-surface-raised); position: sticky; top: 0; z-index: 3; font-weight: 700; }
.import-board .import-board-facility { position: sticky; left: 0; z-index: 2; background: var(--color-surface-raised); text-align: left; font-weight: 600; min-width: 150px; }
.import-board thead .import-board-facility { z-index: 4; }
.import-board-date { min-width: 62px; }
.import-board-weekday { font-size: var(--text-xs); font-weight: normal; color: var(--color-text-muted); }
.import-board-date.is-saturday, .import-board-cell.is-saturday { background: #dbeeff; }
.import-board-date.is-sunday-holiday, .import-board-cell.is-sunday-holiday { background: var(--color-danger-subtle); }
.import-board-date.is-today { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.import-board-mark { color: var(--color-primary); font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .import-board-date.is-saturday, .import-board-cell.is-saturday { background: #163049; }
}
.gantt-bar-cell { padding: 0; background: var(--ota-default-fill); }
.ota-label { border-left: 4px solid var(--ota-default-strong); }
.gantt-bar-cell.ota-jalan { background: var(--ota-jalan-fill); }
.gantt-bar-cell.ota-rakuten { background: var(--ota-rakuten-fill); }
.gantt-bar-cell.ota-ikkyu { background: var(--ota-ikkyu-fill); }
.gantt-bar-cell.ota-expedia { background: var(--ota-expedia-fill); }
.gantt-bar-cell.ota-rurubu { background: var(--ota-rurubu-fill); }
.gantt-bar-cell.ota-booking { background: var(--ota-booking-fill); }
.gantt-bar-cell.ota-agoda { background: var(--ota-agoda-fill); }
.ota-jalan-label { border-left-color: var(--ota-jalan-strong); }
.ota-rakuten-label { border-left-color: var(--ota-rakuten-strong); }
.ota-ikkyu-label { border-left-color: var(--ota-ikkyu-strong); }
.ota-expedia-label { border-left-color: var(--ota-expedia-strong); }
.ota-rurubu-label { border-left-color: var(--ota-rurubu-strong); }
.ota-booking-label { border-left-color: var(--ota-booking-strong); }
.ota-agoda-label { border-left-color: var(--ota-agoda-strong); }
.ota-default-label { border-left-color: var(--ota-default-strong); }

/* ==========================================================================
   Budget dashboard（budget-progress-trackerから移植: KPI/チャート/月別表）
   ========================================================================== */
.hint-inline { color: var(--color-warning); font-size: var(--text-xs); }

.detail-list { margin: var(--space-3) 0 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); }
.detail-list dt { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.detail-list dd { margin: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-xs); }
.kpi-card-forecast { border-color: var(--color-primary); }
.kpi-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; margin-bottom: var(--space-2); }
.kpi-value { font-size: var(--text-xl); font-weight: 700; }
.kpi-sub { font-size: var(--text-sm); margin-top: var(--space-1); font-weight: 600; }

.chart-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-6); }
/* 料金調査の料金表。日付が行・施設が列で、日付の列は横に送っても残す
   (レベニューの縦型カレンダー .rv-vcal と同じ考え方・同じ色分け)。 */
.price-matrix th, .price-matrix td { text-align: right; white-space: nowrap; }
.price-matrix thead th { text-align: center; }
.price-matrix .price-matrix-date {
  position: sticky; left: 0; z-index: 2;
  background: var(--color-surface); text-align: left; font-weight: 600;
  border-right: 2px solid var(--color-text-muted);
}
.price-matrix tbody tr:hover th, .price-matrix tbody tr:hover td { background: var(--color-row-hover); }
.price-matrix tbody tr.is-saturday .price-matrix-date { background: #dbeeff; color: #1c5fa8; }
.price-matrix tbody tr.is-sunday-holiday .price-matrix-date {
  background: var(--color-danger-subtle); color: var(--color-danger);
}
.price-matrix tfoot th, .price-matrix tfoot td {
  border-top: 2px solid var(--color-text-muted); font-weight: 600;
}
/* 日付の横の「この日を追いかける」ボタン。ふだんは控えめにして、日付の読みを邪魔しない。 */
.price-matrix .price-follow { padding: 0 2px; min-width: 0; min-height: 0; opacity: 0.45; }
.price-matrix tr:hover .price-follow, .price-matrix .price-follow:focus { opacity: 1; }

/* その日いちばん安かった施設の目印。金額より先に目に入るよう、色を付けて左に置く。 */
.price-cheapest {
  display: inline-block; margin-right: 4px; padding: 0 4px; border-radius: var(--radius-sm);
  background: #f59e0b; color: #fff; font-size: var(--text-xs); font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .price-matrix tbody tr.is-saturday .price-matrix-date { background: #163049; color: #8bc4ff; }
}

/* レベニューのカレンダーの競合料金。ツールバーのチェックで出し入れする
   (ふだんは数字だけを見たい場面が多いので、出しっぱなしにはしない)。 */
.rate-diff { display: none; }
/* 最安は「最安」の文字を足すのではなく、セルの色と文字で示す。数字が並ぶ表に文字を
   足すと1マスが窮屈になり、かえって読みづらかったため。
   「直近の取り込みで変わった」黄色(.is-recent-change)と見分けられるよう緑にしている。 */
body.show-rate-cheapest .gantt-cell-input.is-rate-cheapest { background: #dcfce7; }
body.show-rate-cheapest .gantt-cell-input.is-rate-cheapest .gantt-inline-input {
  color: #15803d; font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  body.show-rate-cheapest .gantt-cell-input.is-rate-cheapest { background: #14331f; }
  body.show-rate-cheapest .gantt-cell-input.is-rate-cheapest .gantt-inline-input { color: #86efac; }
}
body.show-rate-diff .rate-diff { display: block; font-size: var(--text-xs); text-align: right; }
.rate-diff.is-up { color: var(--color-danger, #b91c1c); }
.rate-diff.is-down { color: var(--color-primary, #1d4ed8); }
.rate-diff.is-same { opacity: 0.5; }
/* 自社・競合の料金を客単価（1人あたり）でも出すとき。表示設定の「金額」で選ぶ。 */
.rv-comp-pp { font-size: var(--text-xs); color: var(--color-text-muted, #64748b); text-align: right; line-height: 1.2; }
.rv-comp-pp-only { display: block; text-align: right; font-variant-numeric: tabular-nums; padding: 2px 4px; }
.rv-comp-unit { display: inline-block; margin-left: 4px; font-size: var(--text-xs); color: var(--color-text-muted, #64748b); font-weight: normal; }
.rv-cal-check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* 料金カレンダー同士のコピー（カレンダーの保存ボタンの上に置く小さな操作欄）。 */
.rv-cal-copy {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 12px 0 4px; padding: 10px 12px;
  border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px;
  background: var(--color-surface-muted, #f8fafc);
}
.rv-cal-copy label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.rv-cal-copy select { min-width: 9rem; }
.rv-cal-copy-title { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.rv-cal-copy-arrow { opacity: 0.6; }
.rv-cal-copy-result:empty { display: none; }
.rv-cal-copy-result.is-error { color: var(--color-danger, #b91c1c); }
@media (prefers-color-scheme: dark) {
  .rv-cal-copy { background: #1e293b; border-color: #334155; }
}

/* 料金調査の「前回からの増減」。チェックを入れたときだけ、料金の下に出す。 */
.price-diff { display: none; font-size: var(--text-xs); }
.show-price-diff .price-diff { display: block; }
.price-diff.is-up { color: var(--color-danger, #b91c1c); }
.price-diff.is-down { color: var(--color-primary, #1d4ed8); }
.price-diff.is-same { opacity: 0.5; }

.chart-container { width: 100%; overflow-x: auto; }
.chart-container-inner { position: relative; }
.chart-container svg { width: 100%; height: auto; min-width: 640px; display: block; }
.chart-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); font-size: var(--text-sm); }
.chart-legend-item { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); transition: background var(--transition-fast), opacity var(--transition-fast); }
.chart-legend-item:hover { background: var(--color-surface-raised); }
.chart-legend-item.is-selected { background: var(--color-primary-subtle); font-weight: 700; }
.chart-legend-item.is-dimmed { opacity: 0.4; }
.chart-legend-swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.chart-tooltip { position: absolute; z-index: 50; pointer-events: none; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); min-width: 160px; white-space: nowrap; }
.chart-tooltip-title { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-1); color: var(--color-text); }
.chart-tooltip-row { display: flex; align-items: center; gap: var(--space-2); padding: 2px 0; }
.chart-tooltip-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.chart-tooltip-label { color: var(--color-text-muted); flex: 1; }
.chart-tooltip-value { font-weight: 600; color: var(--color-text); text-align: right; }

.table-scroll { overflow-x: auto; }
/* 一覧が長くなりがちな一括編集画面用: 表の高さを画面内に収めて縦スクロールにし、
   ヘッダー行(th)を追従させる。table.data-tableは角丸のためoverflow:hiddenを
   持っているが、それがあるとth側のposition:stickyが効かない(隠す側の祖先が
   スクロールコンテナと解釈されてしまう)ため、この組み合わせではoverflow:visible
   で打ち消す。 */
.table-scroll.is-scroll-tall { max-height: 70vh; overflow-y: auto; }
.data-table.sticky-header { overflow: visible; }
.data-table.sticky-header thead th { position: sticky; top: 0; z-index: 2; }
.data-table.sticky-header td:first-child, .data-table.sticky-header th:first-child { white-space: nowrap; }
table.budget-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
table.budget-table th, table.budget-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: right; vertical-align: middle; font-size: var(--text-sm); white-space: nowrap; }
table.budget-table th:first-child, table.budget-table td:first-child, table.budget-table th:nth-child(2), table.budget-table td:nth-child(2) { text-align: left; }
table.budget-table th { background: var(--color-surface-raised); color: var(--color-text-muted); font-weight: 600; }
table.budget-table tr:last-child td { border-bottom: none; }
table.budget-table tbody tr:hover { background: var(--color-row-hover); }
table.budget-table .cell-sub { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: normal; }
table.budget-table .row-status-in_progress { background: var(--color-primary-subtle); }
table.budget-table .row-status-future td { color: var(--color-text-subtle); }
.recent-month-cell { text-align: left !important; white-space: normal !important; min-width: 160px; }
.recent-month-label { font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: var(--space-2); }

/* 状態(成功/失敗/実行中など)を色つきのピルで示す。文字だけより、
   一覧の中で目的の行を見つけやすくするためのもの。 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.pill-ok      { background: var(--color-success-subtle); color: var(--color-success); }
.pill-warn    { background: var(--color-warning-subtle);  color: var(--color-warning); }
.pill-crit    { background: var(--color-danger-subtle);   color: var(--color-danger); }
.pill-running { background: var(--color-primary-subtle);  color: var(--color-primary); }
.pill-muted   { background: var(--color-surface-raised);  color: var(--color-text-subtle); border: 1px solid var(--color-border); }

/* 施設名の頭文字を丸で出す。一覧が長いとき、目で追いやすくするためのもの。
   色は施設名から決めるので、同じ施設は常に同じ色になる。 */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  user-select: none;
}
.avatar-c0 { background: #c75b39; }
.avatar-c1 { background: #2e7d64; }
.avatar-c2 { background: #1e3a5f; }
.avatar-c3 { background: #a97b33; }
.avatar-c4 { background: #7b4b8a; }
.avatar-c5 { background: #b0433f; }
.avatar-row { display: flex; align-items: center; gap: var(--space-2); }

.status-badge { display: inline-flex; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; }
.status-closed { background: var(--color-surface-raised); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.status-progress { background: var(--color-primary); color: #fff; }
.status-future { background: transparent; color: var(--color-text-subtle); border: 1px dashed var(--color-border); }

/* ==========================================================================
   Modal（更新滞留などの警告ポップアップ）
   ========================================================================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 1000; }
.modal-box { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); max-width: 480px; width: 100%; max-height: 80vh; overflow-y: auto; }
.modal-box h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); display: flex; align-items: center; gap: var(--space-2); color: var(--color-warning); }
.modal-list { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.modal-actions { display: flex; justify-content: flex-end; }

/* ==========================================================================
   予約分析（KPIカード・2/3カラムレイアウト）
   ========================================================================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.kpi-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; margin-bottom: var(--space-1); }
.kpi-value { font-size: var(--text-lg); font-weight: 800; color: var(--color-text); }
.kpi-sub { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 3px; }
.kpi-delta { font-size: var(--text-xs); font-weight: 700; margin-top: var(--space-1); }
.kpi-delta.num-pos { color: var(--color-success); }
.kpi-delta.num-neg { color: var(--color-danger); }
.kpi-delta.num-flat { color: var(--color-text-subtle); }
/* minmax(0, ...)必須: 素の1frだとグリッドの列は内包する要素の最小コンテンツ幅
   (chart-container svgのmin-width:640px)より縮まないため、円グラフ等の狭い
   カラムに置いた瞬間グリッド全体が640px×列数まで膨張し、ページごと横に
   はみ出す不具合になる。 */
/* 左に表やグラフ、右に円グラフや凡例。縦は中央ではなく上で揃える。
   中央だと、左の表が長いほど右のグラフが下へ押し出され、上に大きな余白ができる
   （販売先タブで、円グラフの上に900pxの空白ができていた）。 */
/* グラフを左、表を右。タブを切り替えてもグラフの位置が動かないよう、どのタブでも
   左に置き、幅も揃える。表は残りを全部もらう（1.3fr : 1fr だと、12列ある販売先の
   表が右端で切れて、肝心の数字が読めなくなっていた）。 */
.two-col-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
/* 右の列は、左の長い表をスクロールしている間も見えるように貼り付けておく。 */
.two-col-grid > .is-sticky-col { position: sticky; top: var(--space-4); }
.three-col-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.two-col-grid > *, .three-col-grid > * { min-width: 0; }
.ra-checkbox-label { flex-direction: row !important; align-items: center; gap: var(--space-1) !important; font-weight: 400 !important; }
@media (max-width: 860px) { .two-col-grid, .three-col-grid { grid-template-columns: minmax(0, 1fr); } }

/* 円グラフ・横棒ヒストグラムは、折れ線/縦棒グラフ用のmin-width:640pxを適用すると
   カラム幅を無視して巨大化するため、この2種類だけ無効化して控えめなサイズに保つ。 */
.chart-container[data-render="pie"] { max-width: 300px; margin: 0 auto; }
.chart-container[data-render="pie"] svg, .chart-container[data-render="hbar"] svg { min-width: 0; }

/* 円グラフの凡例。項目が多いと折り返しでばらばらに散らばり、どの色がどれなのか
   目で追えなくなっていた(販売先は30件以上ある)。印・名前・割合を縦に揃えた
   一覧にする。数が多いぶんは描画側で「その他」にまとめている。 */
.ra-pie { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.ra-pie-figure { width: 200px; max-width: 100%; }
.ra-pie-figure svg { display: block; width: 100%; height: auto; }
.ra-pie-legend {
  width: 100%; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 1px;
}
.ra-pie-legend li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) max-content;
  align-items: center; gap: var(--space-2);
  padding: 2px var(--space-1); border-radius: var(--radius-sm);
  font-size: var(--text-xs); line-height: 1.45;
  transition: background var(--transition-fast);
}
.ra-pie-legend li.is-focus { background: var(--color-surface-raised); }
.ra-pie-legend .chart-legend-swatch { width: 10px; height: 10px; }
.ra-pie-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-pie-pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text-muted); }
/* どれかに触れている間は、そこだけをはっきり見せる。 */
.ra-pie-slice { transition: opacity var(--transition-fast); }
.ra-pie.is-focused .ra-pie-slice { opacity: 0.25; }
.ra-pie.is-focused .ra-pie-slice.is-focus { opacity: 1; }

/* 集計テーブルの各セルに添える前期間比(比較期間ON時のみ)。 */
.ra-cell-delta { font-size: 10px; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.ra-cell-delta.num-pos { color: var(--color-success); }
.ra-cell-delta.num-neg { color: var(--color-danger); }
.ra-cell-delta.num-flat { color: var(--color-text-subtle); }

/* 集計テーブルの見出しに付けるExcel風の絞り込みフィルター(クリックで
   チェックリストのポップオーバーを開く)。 */
.ra-filter-toggle {
  display: inline-flex; vertical-align: middle; margin-left: var(--space-1);
  padding: 2px; border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer;
}
.ra-filter-toggle:hover { color: var(--color-primary); background: transparent; }
.ra-filter-toggle.is-filtered { color: var(--color-primary); }
.ra-filter-popover {
  position: absolute; z-index: 60; top: 100%; left: 0; margin-top: var(--space-1);
  width: 220px; max-width: 80vw;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: var(--space-2);
  font-weight: 400; white-space: normal; cursor: auto;
}
.ra-filter-popover-head { margin-bottom: var(--space-1); }
.ra-filter-search {
  width: 100%; box-sizing: border-box; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs);
}
.ra-filter-popover-actions { display: flex; gap: var(--space-1); margin-bottom: var(--space-1); }
.ra-filter-checklist { flex-direction: column; flex-wrap: nowrap; max-height: 220px; gap: 2px !important; }

/* ── エージェントマネージャー(スタッフ管理) ────────────────────────── */
/* 「在籍中」のような、フォーム内で単独で置くチェックボックス付きラベル。
   .form-grid label は縦積み(flex-direction: column)なので、それとは別に用意する。 */
.inline-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.inline-check input { margin: 0; }

/* 一覧の操作列。編集リンクと削除ボタンを1行に収める。 */
.cell-actions { white-space: nowrap; }
.cell-actions > * { vertical-align: middle; }

/* 施設トグルで、ログイン中の本人の担当でない施設を薄く見せる。
   optgroup/optionへのCSSはブラウザによって効き方が違うため、色が付かなくても
   「担当施設」「その他の施設」のグループ見出しで区別が付くようにしてある。 */
.facility-switcher-select .facility-option-other,
.facility-switcher-select optgroup.facility-option-other option {
  color: var(--color-text-subtle);
}

/* ログイン・パスワード設定カードの補足文と副次操作。 */
.auth-note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-subtle);
}
.auth-secondary { margin-top: var(--space-3); text-align: center; }

/* ページ見出し右側に複数のボタンを並べる。 */
.header-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* 認証番号の入力欄。桁が読みやすいよう大きめ・等幅・字間広めにする。 */
.auth-code-input {
  font-size: var(--text-xl);
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* サイドバー下部の「今ログインしている人」。ログアウトの真上に置く。 */
.app-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
}
.app-sidebar-user-text { min-width: 0; }
.app-sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sidebar-text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-sidebar-user-sub {
  font-size: var(--text-xs);
  color: var(--sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* スタッフのスケジュール(Googleカレンダー連携)の週表示。 */
.schedule-table td, .schedule-table th { vertical-align: top; }
.schedule-name-col { min-width: 180px; }
.schedule-table th.is-today, .schedule-cell.is-today { background: var(--color-primary-subtle); }
.schedule-cell { min-width: 130px; }
.schedule-event {
  display: flex;
  gap: var(--space-1);
  padding: 2px var(--space-1);
  margin-bottom: 3px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  border-left: 3px solid var(--color-primary);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.schedule-event.is-all-day { border-left-color: var(--color-success); }
.schedule-event-time { font-weight: 700; white-space: nowrap; }
.schedule-event-title { overflow: hidden; text-overflow: ellipsis; }

/* ── チーム編成(施設・プロジェクトへのスタッフ割り当て) ────────────── */
/* 上部の「スタッフ」パレットからチームへドラッグして割り当てる。
   パレット自身もドロップ先で、そこへ戻すと担当から外れる。 */
.staff-palette {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.staff-palette-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.staff-palette-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.team-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3);
}
.team-card--new { border-style: dashed; }
.team-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.team-card-header h3 { margin: 0; font-size: var(--text-sm); }
.team-count { font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; }
.team-members {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-height: 46px;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}
.team-empty { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
.team-add { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.team-edit { margin-top: var(--space-1); font-size: var(--text-xs); }
.team-edit-form { display: flex; gap: var(--space-1); flex-wrap: wrap; margin: var(--space-2) 0; }

/* ドラッグ中のスタッフ札。 */
.staff-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2) 3px 3px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: var(--text-xs);
  cursor: grab;
  user-select: none;
}
.staff-chip:active { cursor: grabbing; }
.staff-chip.is-dragging { opacity: .4; }
.staff-chip-name { white-space: nowrap; }
.staff-chip-role { color: var(--color-text-subtle); }
.staff-chip-remove { display: inline-flex; }
.staff-chip-remove button {
  border: none;
  background: none;
  padding: 0 0 0 2px;
  color: var(--color-text-subtle);
  cursor: pointer;
  line-height: 1;
}
.staff-chip-remove button:hover { color: var(--color-danger); }

/* ドロップ先のハイライト。 */
[data-drop-zone].is-drop-target {
  outline: 2px dashed var(--color-primary);
  outline-offset: 2px;
  background: var(--color-primary-subtle);
}

/* 権限一覧。ツール数が多く横に長くなるため、スタッフ名の列だけ固定して読みやすくする。 */
.permission-table select { min-width: 92px; }
.permission-name-col { position: sticky; left: 0; background: var(--color-surface); z-index: 1; min-width: 170px; }
.permission-table tbody tr:hover .permission-name-col { background: var(--color-row-hover); }

/* 登録された画像アイコン。頭文字アイコンと同じ大きさ・丸さに揃える。 */
.avatar-image { object-fit: cover; padding: 0; }
.avatar-preview { width: 72px; height: 72px; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--color-border); }
.avatar-upload { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* エージェントマネージャーと統括本部を行き来するタブ。同じ列に並ぶが別ツールへ
   移動するので、区切って控えめに見せる。 */
.tab-link--cross { margin-left: auto; color: var(--color-text-subtle); }

/* ── 経費精算 ────────────────────────────────────────────────────────── */
.expense-new { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.expense-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.expense-item--new { border-style: dashed; }
.expense-item-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
/* 明細は項目が多いので、フォームの3列より細かく詰める。 */
.expense-item-grid { grid-template-columns: repeat(4, 1fr); }
.receipt-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }

/* ── 勤怠管理 ────────────────────────────────────────────────────────── */
/* 今日の打刻。画面上部に大きめに置いて押しやすくする。 */
/* 1か月分を1画面に収めたいので、行の高さと入力欄を詰める。 */
.attendance-table td, .attendance-table th { padding: var(--space-1) var(--space-2); }
.attendance-table input[type="time"] { width: 106px; }
.attendance-table .attendance-break { width: 70px; }
.attendance-table tr.is-holiday td { background: var(--color-surface-raised); }
.attendance-table tr.is-today td { box-shadow: inset 0 0 0 1px var(--color-primary); }

/* サーバー状況の使用量バー。色で「まだ余裕がある/そろそろ/危ない」を示す。 */
.usage-bar {
  height: 14px;
  border-radius: 999px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-1);
}
.usage-bar-fill { height: 100%; }
.usage-ok { background: var(--color-success); }
.usage-warn { background: var(--color-warning); }
.usage-crit { background: var(--color-danger); }

/* ── ニュース / トレンド ────────────────────────────────────────────── */
.trend-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.trend-word {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.trend-word:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.chip-link {
  padding: 2px var(--space-2);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.chip-link:hover, .chip-link.is-active {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

.news-list { display: flex; flex-direction: column; gap: var(--space-2); }
.news-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.news-item-main { min-width: 0; }
.news-title { font-weight: 700; }
.news-summary { margin: var(--space-1) 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.news-bookmarks { margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); }
.news-bookmarks li { margin-bottom: var(--space-1); }

/* ==========================================================================
   スマホ表示
   画面が狭いときは、左サイドバーを引き出し(ドロワー)にして本文を全幅で使う。
   多段の入力欄も1列に落とし、指で押せる大きさを確保する。
   ========================================================================== */
/* 画面が広いときは、スマホ用の要素を出さない。 */
.app-topbar, .app-nav-overlay, .app-sidebar-close { display: none; }

@media (max-width: 820px) {
  .app-shell { flex-direction: column; }

  /* 上部の固定バー。メニューボタンと、いま見ている施設名を出す。 */
  .app-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: sticky;
    top: 0;
    z-index: 30;
    padding: var(--space-2) var(--space-3);
    background: var(--sidebar-bg);
    color: var(--sidebar-text-strong);
  }
  .app-topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sidebar-text-strong);
  }
  .app-topbar-brand { color: var(--sidebar-text-strong); font-weight: 700; }
  .app-topbar-brand:hover { color: var(--sidebar-text-strong); text-decoration: none; }
  .app-topbar-facility {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--sidebar-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45%;
  }

  /* サイドバー本体は画面外に置き、メニューを押したときだけ滑り込ませる。 */
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 86vw);
    height: 100vh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: none;
  }
  body.nav-open .app-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  body.nav-open { overflow: hidden; }

  .app-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, .45);
  }
  .app-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    min-width: 40px;
    min-height: 40px;
    border: none;
    background: transparent;
    color: var(--sidebar-text);
  }

  /* 本文の余白を詰めて、狭い画面でも情報量を確保する。 */
  .page { padding: var(--space-4) var(--space-3) var(--space-10); }
  .page-header { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .page-header h1 { font-size: 24px; }
  .header-actions { flex-wrap: wrap; }
  .header-actions > * { flex: 1 1 auto; justify-content: center; }

  /* 入力欄は1列に。3列のままだと1つずつが細くなって扱えない。 */
  .form-grid, .expense-item-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .filter-row label, .filter-row .grow { min-width: 0; }
  .form-actions { flex-wrap: wrap; }
  .form-actions > * { flex: 1 1 auto; }

  /* タブが多い画面(統括本部など)は横スクロールで全部たどれるようにする。 */
  .tab-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-strip::-webkit-scrollbar { display: none; }
  .tab-link { white-space: nowrap; }
  .tab-link--cross { margin-left: 0; }

  /* 表は潰さず横スクロールさせる。列を無理に詰めると1文字ずつ折り返して読めなくなる。 */
  .table-scroll { -webkit-overflow-scrolling: touch; }
  .table-scroll .data-table { min-width: 620px; }
  .data-table td, .data-table th { white-space: nowrap; }
  /* 折り返してよい列だけ例外にする(長い文章や複数行の中身を持つもの)。 */
  .data-table .cell-wrap, .data-table .empty, .news-summary { white-space: normal; }

  /* 各ツールの多段レイアウトを1列に。 */
  .team-board { grid-template-columns: minmax(0, 1fr); }
  .news-item { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .expense-new { flex-direction: column; }
  .avatar-upload { flex-direction: column; align-items: flex-start; }

  /* 指で押せる大きさを確保する(Appleの推奨は44px)。 */
  .app-nav-item, .tab-link, button, .button, .button-link {
    min-height: 40px;
  }
  button.small, .button-link.small, .small { min-height: 34px; }

  /* iOSは文字が16px未満の入力欄にふれると画面を勝手に拡大するため、16pxにそろえる。 */
  input, select, textarea { font-size: 16px; }

  /* 権限一覧のように列が多い表は、名前の固定列だけ幅を詰める。 */
  .permission-name-col { min-width: 120px; }
  .schedule-name-col { min-width: 130px; }
}

/* OTA管理画面のログイン情報。URLは長いので入力欄を広めに取る。 */
.login-url { min-width: 220px; }

/* ログイン情報のサイト名。押すと管理画面へ移動するので、リンクとして見せる
   (自動ログインはフォーム送信なのでbutton要素だが、見た目はリンクに揃える)。 */
.site-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.site-link:hover { text-decoration: underline; background: none; }

/* ログイン情報のID欄。サイトによって2段(施設ID＋オペレータID)になるため、
   見出しを小さく添えてどちらの欄か分かるようにする。 */
.data-table td > label.cell-sub { display: block; margin-top: 2px; }

/* SC/OTAの担当者セル。1行に名前と削除ボタンを収め、追加は折りたたみで隠す。 */
.contact-cell { min-width: 220px; }
.contact-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.contact-line .cell-sub { margin-left: var(--space-1); }
.contact-add > summary { cursor: pointer; list-style: none; }
.contact-add > summary::-webkit-details-marker { display: none; }
.contact-add-form { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-1); }

/* SC/OTAの表示用テーブル。押して開く欄(サイト名・担当者)は、開けることが分かるよう
   下線とカーソルを付ける。 */
.scota-table td { vertical-align: top; }
.scota-detail > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
}
.scota-detail > summary::-webkit-details-marker { display: none; }
.scota-detail > summary::after { content: "▾"; font-size: var(--text-xs); }
.scota-detail[open] > summary::after { content: "▴"; }
.scota-detail > summary:hover { text-decoration: underline; }
.scota-detail-body {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font-size: var(--text-xs);
  line-height: 1.7;
}
.scota-detail-body .cell-actions { margin-top: var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* SC/OTAタブ内の「一覧 / 登録・設定」切り替え。選択中がひと目で分かるようにする。 */
.button-link.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.button-link.is-active:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* リサーチくんの比較表。項目が多く横に長くなるので、施設名の列を固定して見失わないようにする。 */
.research-name .cell-sub a { margin-right: var(--space-1); }

/* OTAの施設ページから読み込んだ写真の選択欄（施設アイコン用）。 */
.ota-photo-picker {
  margin-top: var(--space-2);
}
.ota-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.ota-photo-cell {
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.ota-photo-cell:hover {
  border-color: var(--accent);
}
.ota-photo-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 担当施設を上に出す一覧で、担当以外の行を控えめに見せる（サイドバーの施設トグルと同じ扱い）。 */
tr.is-other-facility td,
tr.is-other-facility th {
  opacity: 0.62;
}

/* SC/OTAマスタの、使うサイトを選ぶチェックボックスの並び。 */
.site-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-1) var(--space-3);
}

/* カレンダーの「全体」の残室・販室は、下へスクロールしても日付の行の下に残す。
   どの区分を上に置くかは施設ごとに変えられるので、行の位置ではなくクラスで指定する。
   ずらす量(--gantt-head-h / --gantt-row1-h)は、実際の高さをJSで測って入れている。 */
.gantt-sticky-1 > th, .gantt-sticky-1 > td {
  position: sticky;
  top: var(--gantt-head-h, 46px);
  z-index: 2;
  background: var(--color-surface-raised);
}
.gantt-sticky-2 > th, .gantt-sticky-2 > td {
  position: sticky;
  top: calc(var(--gantt-head-h, 46px) + var(--gantt-row1-h, 32px));
  z-index: 2;
  background: var(--color-surface-raised);
}
/* 左端に固定している施設名・項目名の列は、固定行の中でも手前に置く。 */
.gantt-sticky-1 > .gantt-col-channel, .gantt-sticky-1 > .gantt-col-label,
.gantt-sticky-2 > .gantt-col-channel, .gantt-sticky-2 > .gantt-col-label {
  z-index: 3;
}

/* 「管理画面」を押したときに出る、ID・パスワードのコピー欄。 */
.admin-login-info { margin-top: var(--space-1); }

/* 発行した鍵の表示。長いので折り返して全文を見せる。 */
.token-box {
  display: block;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  word-break: break-all;
}

/* ログイン権限の表を、枠(FACILITY / STAFF / COMPANY)ごとに区切る。 */
.permission-group-head {
  background: var(--color-surface-raised);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  color: var(--color-text-subtle);
}
.permission-table th.permission-group-start,
.permission-table td.permission-group-start {
  border-left: 2px solid var(--color-border-strong);
}

/* プラン一覧(TLリンカーンのプラン設定表と同じ並び)。横に長いので列幅を絞り、
   部屋タイプの列は左に固定する。部屋が変わる行には上に線を引く。 */
.plan-sheet th, .plan-sheet td { white-space: nowrap; font-size: var(--text-sm); vertical-align: top; }
.plan-sheet .plan-sheet-groups th { background: var(--color-surface-raised); font-size: var(--text-xs); letter-spacing: .06em; color: var(--color-text-subtle); text-align: center; }
.plan-sheet .plan-sheet-room { position: sticky; left: 0; z-index: 1; background: var(--color-surface); min-width: 150px; max-width: 200px; white-space: normal; }
.plan-sheet .plan-sheet-name { min-width: 260px; max-width: 360px; white-space: normal; }
.plan-sheet .plan-sheet-group { min-width: 220px; max-width: 320px; white-space: normal; font-size: var(--text-xs); }
.plan-sheet .plan-sheet-long { min-width: 200px; max-width: 300px; white-space: pre-wrap; font-size: var(--text-xs); }
.plan-sheet .plan-sheet-num { text-align: right; }
.plan-sheet .plan-sheet-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); }
.plan-sheet tr.plan-sheet-room-start td { border-top: 2px solid var(--color-border-strong); }


/* プラン編集の展開チャネル。チェックの右に、任意のプランコード欄を出す。 */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-1) var(--space-3);
}
.channel-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.channel-row .inline-check { min-width: 130px; margin: 0; }
.channel-row input[type="text"] { flex: 1; min-width: 0; }

/* ==========================================================================
   やさしいUI（機械が苦手な人向けの見直し）
   目的: 文字を大きく・押す場所を大きく・説明文を減らす・スマホで迷わない。
   既存の部品の見た目をここでまとめて上書きする（部品ごとの細かな指定より後ろに
   置いてあるので、同じ強さの指定ならこちらが勝つ）。
   ========================================================================== */
:root {
  /* 端末がダークモードでも明るい画面で固定する。見慣れない黒い画面は
     「壊れた」と受け取られやすいため。 */
  color-scheme: light;

  --text-xs: 14px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-md: 18px;
  --text-lg: 21px;
  --text-xl: 28px;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --tap: 48px;                 /* 指で押す部品の最小の高さ */

  /* 標準の色合いは「青・すっきり」。以前は「あたたかい」(朱＋生成り)が標準
     だったが、利用者の指定で2026-10-10に入れ替えた。緑・紫・白黒は
     :root[data-theme="..."] で今までどおり選べる(属性が付くぶん指定が強いので
     ここより優先される)。警告の黄・エラーの赤は意味の色なので変えない。 */
  --color-bg: #f4f6fa;
  --color-surface: #ffffff;
  --color-surface-raised: #f6f9fc;
  --color-border: #d9e0ea;
  --color-border-strong: #93a6c2;
  --color-text: #0c1627;
  --color-text-muted: #5a6879;
  --color-text-subtle: #7e8ea3;
  --color-primary: #16263f;
  --color-primary-hover: #0c1627;
  --color-primary-active: #06101d;
  --color-primary-subtle: #e7ecf3;
  /* 北極星金（ロゴの3色目）。**面で広く使うと安っぽく見える**ので、強調したい
     ところだけに効かせる（選択中の印・今日やることの下線・行動指針のラベル）。
     白地に金の文字は読めない（1.9:1）ので、文字には濃い金のほうを使う。 */
  --color-accent: #dfb46f;
  --color-accent-strong: #7a5612;
  --color-accent-subtle: #f6eedd;
  --color-success: #23705a;
  --color-success-subtle: #e2f1ea;
  --color-warning: #8e6420;
  --color-warning-subtle: #f9efd8;
  --color-danger: #b8342c;
  --color-danger-subtle: #fbe7e5;

  --sidebar-bg: #0c1627;
  --sidebar-text: #b9c6d8;
  --sidebar-text-strong: #ffffff;
  --sidebar-label: #7e8ea3;
  --sidebar-hover: #182942;
  --sidebar-active-bg: #1b2e4d;
  --sidebar-active-text: #ffffff;
  --sidebar-border: #1e2d47;

  --color-row-hover: #eef1f6;
  --color-row-selected: #e7ecf3;

  /* 影も青寄りにする(茶系のままだと紙の色が残って見える)。 */
  --shadow-sm: 0 2px 6px rgba(12, 22, 39, .08), 0 1px 2px rgba(12, 22, 39, .05);
  --shadow-md: 0 8px 20px rgba(12, 22, 39, .10);
  --shadow-lg: 0 18px 36px rgba(12, 22, 39, .16);

  /* グラフの色。前年に暖色を混ぜず、青の濃淡で揃える。 */
  --color-chart-plan: #808d9e;
  --color-chart-last-year: #93a6c2;
  --color-chart-actual: #16263f;
  --color-chart-forecast: #23705a;
}

body { font-size: var(--text-base); line-height: 1.7; }
h1, h2, h3, h4 { line-height: 1.35; letter-spacing: .01em; }
.icon { width: 20px; height: 20px; vertical-align: -4px; }
.icon-sm { width: 17px; height: 17px; vertical-align: -3px; }

/* どこに焦点があるかを太い輪郭で示す（キーボード・拡大鏡の利用者向け）。 */
:focus-visible { outline: 3px solid #35538a; outline-offset: 2px; }

/* ---- ボタン: 大きく・角を丸く・主ボタンははっきり塗る ---- */
button, .button-link, .button {
  min-height: var(--tap);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-base);
  font-weight: 600;
  gap: var(--space-2);
  border-width: 1.5px;
}
button.small, .button-link.small, .button.small {
  min-height: 40px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}
.icon-button { min-width: var(--tap); justify-content: center; padding: var(--space-2); }
button.primary, .button-link.primary, .button.primary { box-shadow: var(--shadow-sm); }
button:disabled, .button:disabled { opacity: .55; cursor: not-allowed; }

/* ---- 入力欄: 高さを揃え、文字を大きく ---- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea {
  font-size: var(--text-base);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
}
textarea { min-height: 120px; line-height: 1.6; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--color-primary); }
input[type="file"] { padding: var(--space-2); }
label { font-size: var(--text-sm); }
.filter-row label { font-size: var(--text-sm); color: var(--color-text); }
.filter-row select, .filter-row input[type="date"], .filter-row input[type="number"], .filter-row input[type="file"] {
  font-size: var(--text-base); border: 1.5px solid var(--color-border-strong);
}
.form-grid input, .form-grid select, .form-grid textarea { font-size: var(--text-base); }

/* ---- 画面の見出し: タイトルの右に「使い方」 ---- */
.page { max-width: 1180px; }
.page-header { align-items: center; flex-wrap: wrap; row-gap: var(--space-3); }
.page-header > div:first-child { flex: 1 1 320px; min-width: 0; }
.page-header h1 { font-size: 30px; font-weight: 800; }
/* 道具の名前の下に添える施設名。見出しと取り違えない大きさにする。 */
.page-sub { font-size: var(--text-md); color: var(--color-text-muted);
  font-weight: 600; margin-top: 2px; }
/* 画面のいちばん上で、その画面が何をするところかを言う1行。 */
.page-lead { font-size: var(--text-md); line-height: 1.8;
  color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.page-lead b { color: var(--color-text); }
.page-header .hint { font-size: var(--text-sm); }
.breadcrumb-bar { font-size: var(--text-sm); }

/* ---- お知らせ（処理の結果）: 目に入る大きさに ---- */
.flash li { font-size: var(--text-base); padding: var(--space-4) var(--space-5); border-left: 6px solid var(--color-primary); }

/* ---- タブ: 押せる感じの大きな見出しに ---- */
.tab-strip { gap: var(--space-1); border-bottom-width: 2px; margin-bottom: var(--space-5); }
.tab-link {
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  border-bottom-width: 4px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab-link.is-active { background: var(--color-primary-subtle); }

/* ---- 表: 行を高く・読みやすく ---- */
table.data-table th, table.data-table td { padding: var(--space-3) var(--space-3); font-size: var(--text-sm); }
table.data-table th { font-size: var(--text-xs); letter-spacing: .02em; }
table.data-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .015); }
.table-scroll { border-radius: var(--radius-md); }

/* ---- カード・区画 ---- */
.master-section, .filter-bar { padding: var(--space-5); box-shadow: var(--shadow-sm); }
.master-section { max-width: none; }
.form-section-title { font-size: var(--text-md); font-weight: 700; }
.section-card h2, .dashboard-card h3 { font-size: var(--text-md); }
.section-card-icon { width: 52px; height: 52px; }
.kpi-value { font-size: var(--text-xl); }
.kpi-label { font-size: var(--text-sm); }

/* 説明文はふつうの段落として流す。flexのままだと中の<strong>が縦に割れて、
   「宿泊日ベース 2026-03-06〜」のような1行が細い列に潰れる（実際に起きていた）。 */
.hint { display: block; }
.hint .icon, .hint .icon-sm { margin-right: var(--space-1); }
/* 表の見出しは折り返さない（「予約件数」が3行に割れて読みづらかった）。 */
table.data-table th { white-space: nowrap; }

/* ---- 長い説明文はふだん出さない（右上の「使い方」の中で読める） ---- */
.hint--explain { display: none !important; }
.hint { font-size: var(--text-sm); }

/* ---- 左メニュー: 文字と押す場所を大きく ---- */
.app-sidebar { width: 290px; gap: var(--space-5); }
.app-sidebar-brand { font-size: var(--text-lg); }
.app-sidebar-label { font-size: 12px; letter-spacing: .12em; }
.app-nav-item { min-height: var(--tap); font-size: var(--text-base); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.app-nav-item.is-active { box-shadow: inset 4px 0 0 var(--color-accent); }
.facility-switcher-select { min-height: var(--tap); font-size: var(--text-base); }

/* ---- 「使い方」ボタンと案内の窓 ---- */
.guide-button {
  margin-left: auto;
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface);
  font-weight: 700;
  white-space: nowrap;
}
.guide-button:hover { background: var(--color-primary-subtle); border-color: var(--color-primary); }
.guide-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(30, 20, 10, .45); }
.guide-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  z-index: 910;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: guide-slide .18s ease-out;
}
@keyframes guide-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.guide-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-primary-subtle);
}
.guide-panel-head h2 { margin: 0; font-size: var(--text-lg); color: var(--color-primary); }
.guide-close { min-width: var(--tap); justify-content: center; padding: var(--space-2); border-color: transparent; background: transparent; }
.guide-panel-body { padding: var(--space-5); overflow-y: auto; font-size: var(--text-base); line-height: 1.8; }
.guide-panel-body h3 { font-size: var(--text-md); margin: var(--space-6) 0 var(--space-2); }
.guide-summary { margin: 0 0 var(--space-4); }
.guide-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--space-3); }
.guide-steps li {
  position: relative; padding-left: 44px; counter-increment: step; min-height: 34px;
}
.guide-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 2px;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.guide-tips, .guide-explain-list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--space-2); }
.guide-explain { border-top: 1px dashed var(--color-border); margin-top: var(--space-6); padding-top: var(--space-2); }
.guide-explain-list { font-size: var(--text-sm); color: var(--color-text-muted); }
body.guide-open { overflow: hidden; }

/* ---- ログイン画面 ---- */
.auth-card { max-width: 440px; padding: var(--space-10) var(--space-8); }
.auth-title { font-size: var(--text-xl); }
.auth-field label { font-size: var(--text-sm); color: var(--color-text); }
.auth-field input { font-size: var(--text-md); }
.auth-note { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- 数字の表示は等幅で桁をそろえる ---- */
.num, td.num, th.num, .kpi-value { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   スマホ（やさしいUI版）: 上のバーを大きく、押す部品は全幅に
   ========================================================================== */
@media (max-width: 820px) {
  .app-topbar { padding: var(--space-2) var(--space-3); min-height: 56px; }
  .app-topbar-brand { font-size: var(--text-md); }
  .app-topbar-facility { font-size: var(--text-sm); max-width: 50%; }
  .app-topbar-toggle { min-width: 48px; min-height: 48px; }

  .page { padding: var(--space-4) var(--space-3) calc(var(--space-12) + env(safe-area-inset-bottom)); }
  /* 見出しと「使い方」は同じ行に置く（幅が足りないと見出しが下に落ち、
     ボタンが浮いて見えるため）。 */
  .page-header { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .page-header > div:first-child { flex: 1 1 calc(100% - 140px); order: 0; }
  .page-header > .guide-button { order: 1; }
  /* 見出しの右に置いてある他のボタン類は、スマホでは見出しの下に全幅で並べる。 */
  .page-header > :not(div:first-child):not(.guide-button) { flex: 1 1 100%; order: 2; justify-content: center; }
  .page-header h1 { font-size: var(--text-lg); }
  .guide-button { padding: var(--space-2) var(--space-3); }
  .guide-panel { width: 100vw; }

  /* 主なボタンは幅いっぱいに。指で狙いやすい。 */
  .filter-row button, .filter-row .button-link, .form-actions button, .form-actions .button-link { width: 100%; justify-content: center; }
  .filter-row .inline-form { width: 100%; }
  .filter-row label { font-size: var(--text-base); }

  /* 表の1列目（日付や名前）を固定して、横に送っても見失わない。 */
  .table-scroll .data-table td:first-child, .table-scroll .data-table th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--color-surface);
    box-shadow: 2px 0 0 var(--color-border);
  }
  .table-scroll .data-table th:first-child { background: var(--color-surface-raised); z-index: 3; }

  .master-section, .filter-bar { padding: var(--space-4); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-value { font-size: var(--text-lg); }

  button, .button, .button-link, .app-nav-item, .tab-link { min-height: var(--tap); }
  button.small, .button-link.small, .small { min-height: 42px; }
}

/* ---- トップ画面: 施設を選ぶ → ツールを選ぶ、だけの入口 ---- */
.home-section-title { font-size: var(--text-md); margin: var(--space-6) 0 var(--space-3); color: var(--color-text-muted); }
.home-facility-grid, .home-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}
.home-facility-card, .home-tool-card {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.home-facility-card:hover, .home-tool-card:hover { text-decoration: none; border-color: var(--color-primary); background: var(--color-primary-subtle); }
.home-facility-card .avatar { width: 44px; height: 44px; font-size: var(--text-md); flex-shrink: 0; }
.home-facility-name { flex: 1; min-width: 0; }
.home-facility-card .icon { color: var(--color-text-subtle); }
.home-facility-card.is-other { font-weight: 600; opacity: .85; }
.home-tool-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--color-primary-subtle); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
@media (max-width: 820px) {
  .home-facility-grid, .home-tool-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 在庫・料金カレンダー: 横に長い表なので、行の見出し（全体／部屋タイプ・残室・販室）を
   左に固定して、横に送っても何の行か分かるようにする。 ---- */
.gantt-calendar th.gantt-row-label, .gantt-calendar td.gantt-row-label,
.gantt-calendar th.gantt-channel-name, .gantt-calendar td.gantt-channel-name {
  position: sticky; left: 0; z-index: 2; background: var(--color-surface-raised);
}
.gantt-calendar th.gantt-channel-name, .gantt-calendar td.gantt-channel-name { left: 0; }
.gantt-calendar th, .gantt-calendar td { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.gantt-date-header { min-width: 92px; }
@media (max-width: 820px) {
  .gantt-calendar th, .gantt-calendar td { padding: var(--space-2); }
  .gantt-cell { min-width: 84px; }
}

/* ---- カレンダー設定: 部屋タイプの名前と紐づけ名 ---- */
.rt-name-cell { min-width: 300px; }
.rt-rename-form { gap: var(--space-2); align-items: center; }
.rt-rename-form input[type="text"] { min-width: 180px; }
.rt-aliases { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); align-items: center; }
.rt-alias { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-raised); font-size: var(--text-sm); }
.rt-alias .icon-button { min-width: 32px; min-height: 32px; }
.rt-alias-add { gap: var(--space-2); align-items: center; }
.rt-alias-add input[type="text"] { min-width: 220px; }

/* ==========================================================================
   色合い（人ごとに選べる）。左メニュー下の「色合い」で切り替える。
   値は :root の変数を差し替えるだけなので、部品側の指定は触らない。
   標準は「青・すっきり」で、その値は上の上書き層の :root にある。
   （以前の標準「あたたかい」は2026-10-10に廃止した。）
   ========================================================================== */
/* 「青・すっきり」の定義はここに無い。標準そのものなので、上の上書き層の
   :root がその値を持っている(二重に持つと片方だけ直したときにずれる)。
   data-theme="blue" はどの規則にも当たらず、そのまま標準の色になる。 */
:root[data-theme="green"] {
  --color-bg: #eef5ef;
  --color-surface-raised: #f5faf6;
  --color-border: #d4e3d7;
  --color-border-strong: #b3cbb9;
  --color-primary: #2b7a4b;
  --color-primary-hover: #246740;
  --color-primary-active: #1d5434;
  --color-primary-subtle: #e2f1e7;
  --sidebar-bg: #17251c;
  --sidebar-text: #c5d6c9;
  --sidebar-label: #8fa694;
  --sidebar-hover: #23342a;
  --sidebar-active-bg: #2b7a4b;
  --sidebar-border: #2b3d31;
  --color-row-hover: #eef7f0;
  --color-row-selected: #e2f1e7;
  --shadow-sm: 0 2px 6px rgba(30, 70, 40, .08), 0 1px 2px rgba(30, 70, 40, .05);

  --color-chart-plan: var(--color-text-subtle);
  --color-chart-last-year: var(--color-warning);
  --color-chart-actual: var(--color-primary);
  /* 着地予測の既定色(--color-success)は実績(このテーマの緑)と近すぎて見分けにくいため、
     この色合いだけ青系にしておく。 */
  --color-chart-forecast: #3a6ea5;
}
:root[data-theme="plum"] {
  --color-bg: #f3eef7;
  --color-surface-raised: #f9f5fb;
  --color-border: #e0d5e8;
  --color-border-strong: #c6b5d3;
  --color-primary: #6f4a9c;
  --color-primary-hover: #5e3e85;
  --color-primary-active: #4d326d;
  --color-primary-subtle: #eee5f5;
  --sidebar-bg: #221a2c;
  --sidebar-text: #d2c8dc;
  --sidebar-label: #9c8fab;
  --sidebar-hover: #30263c;
  --sidebar-active-bg: #6f4a9c;
  --sidebar-border: #3a2f47;
  --color-row-hover: #f5eefa;
  --color-row-selected: #eee5f5;
  --shadow-sm: 0 2px 6px rgba(60, 40, 80, .08), 0 1px 2px rgba(60, 40, 80, .05);

  --color-chart-plan: var(--color-text-subtle);
  --color-chart-last-year: var(--color-warning);
  --color-chart-actual: var(--color-primary);
  --color-chart-forecast: var(--color-success);
}
:root[data-theme="mono"] {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #f2f2f2;
  --color-border: #9a9a9a;
  --color-border-strong: #4a4a4a;
  --color-text: #000000;
  --color-text-muted: #2b2b2b;
  --color-text-subtle: #4d4d4d;
  --color-primary: #111111;
  --color-primary-hover: #333333;
  --color-primary-active: #000000;
  --color-primary-subtle: #e6e6e6;
  --color-success: #0b5d1e;
  --color-success-subtle: #e3f2e6;
  --color-warning: #6b4a00;
  --color-warning-subtle: #fff3d6;
  --color-danger: #a60000;
  --color-danger-subtle: #ffe3e3;
  --sidebar-bg: #000000;
  --sidebar-text: #f0f0f0;
  --sidebar-text-strong: #ffffff;
  --sidebar-label: #c9c9c9;
  --sidebar-hover: #222222;
  --sidebar-active-bg: #ffffff;
  --sidebar-active-text: #000000;
  --sidebar-border: #444444;
  --color-row-hover: #f0f0f0;
  --color-row-selected: #e6e6e6;
  --shadow-sm: none;
  --shadow-md: 0 0 0 2px #000;
  --shadow-lg: 0 0 0 2px #000;

  --color-chart-plan: var(--color-text-subtle);
  --color-chart-last-year: var(--color-warning);
  --color-chart-actual: var(--color-primary);
  --color-chart-forecast: var(--color-success);
}
:root[data-theme="mono"] button, :root[data-theme="mono"] .button-link, :root[data-theme="mono"] .button,
:root[data-theme="mono"] input, :root[data-theme="mono"] select, :root[data-theme="mono"] textarea { border-color: #4a4a4a; }
:root[data-theme="mono"] :focus-visible { outline-color: #000; }

/* 左メニュー下の色合いの選択 */
.theme-picker { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.theme-picker-label { font-size: 11px; letter-spacing: .1em; color: var(--sidebar-label); font-weight: 700; padding: 0 var(--space-2); }
.theme-picker select {
  width: 100%; min-height: 40px; font-size: var(--text-sm);
  border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm);
  background: var(--sidebar-hover); color: var(--sidebar-text-strong); font-family: inherit;
}

/* ---- 部屋タイプ設定の表: 名前の欄を広く、ボタンは折り返さない ---- */
.rt-name-cell { min-width: 340px; }
.rt-rename-form button, .rt-alias-add button, .rt-merge summary, .rt-merge button { white-space: nowrap; }
.rt-merge > summary {
  cursor: pointer; list-style: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 40px; padding: var(--space-1) var(--space-3);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); font-size: var(--text-sm); font-weight: 600;
}
.rt-merge > summary::-webkit-details-marker { display: none; }
.rt-merge > summary::after { content: "▾"; }
.rt-merge[open] > summary::after { content: "▴"; }
.rt-merge > form { margin-top: var(--space-2); max-height: 240px; overflow-y: auto; }
@media (max-width: 820px) {
  .rt-name-cell { min-width: 0; }
  .rt-rename-form input[type="text"], .rt-alias-add input[type="text"] { min-width: 0; width: 100%; }
  .rt-rename-form, .rt-alias-add { flex-wrap: wrap; }
}


/* ---- 在庫・料金カレンダー: 横幅の詰め ----
   日付の列に入るのは2〜3桁の数字か短いランクだけなのに、1列が150px近くまで
   広がっていた。原因は2つ。
     1. 備考セルにmin-width:150pxを付けていた。表の列幅は全行で共有されるので、
        備考1行のために数値の列まで全部広がっていた。
     2. セルの余白(padding)が広く、変更履歴ボタンが入力欄の横幅を20px食っていた。
   列幅は下の「列幅」で切り替えられるようにし、既定を詰めた幅にする。 ---- */
.gantt-calendar { --rv-day-col: 66px; }
.gantt-calendar th, .gantt-calendar td { padding: 2px 4px; }
.gantt-date-header,
.gantt-calendar td.gantt-cell,
.gantt-calendar td.gantt-cell-note {
  width: var(--rv-day-col);
  min-width: var(--rv-day-col);
  max-width: var(--rv-day-col);
}
.gantt-date-header { line-height: 1.25; }
/* 変更履歴ボタンはセルの右上に重ねる。横に並べると、ただでさえ狭い入力欄から
   20px奪ってしまうため。ふだんは薄く、そのセルに触れている間だけはっきり出す
   (指で使うときはタップして入力欄に入れば出てくる)。 */
.gantt-calendar td.gantt-cell-input { position: relative; }
.gantt-calendar td.gantt-cell-input .gantt-inline-input { width: 100%; min-width: 0; }
.gantt-calendar td.gantt-cell-input .cell-history-btn {
  position: absolute; top: 0; right: 0;
  opacity: 0; transition: opacity 0.12s ease;
  background: var(--color-surface-raised); border-radius: var(--radius-sm);
  min-width: 0; min-height: 0; padding: 1px;
}
.gantt-calendar td.gantt-cell-input:hover .cell-history-btn,
.gantt-calendar td.gantt-cell-input:focus-within .cell-history-btn { opacity: 1; }
/* 備考は文章を書く欄なので、狭い列の中で折り返せるように小さめの字にする。 */
.gantt-calendar textarea.gantt-note-input { font-size: var(--text-xs); line-height: 1.3; padding: 1px 2px; }
/* 数字のセルはボタンになっているが、余白で列が広がらないようにする。 */
.gantt-calendar .gantt-cell-button { padding: 2px; width: 100%; }
/* カレンダーの中の入力欄は、指で押す前提の大きさ(高さ48px・太い枠・白背景)を
   そのまま当てると1行が異様に高くなり、画面に入る日数も行数も減ってしまう。
   ここだけは「表の中の書き込み欄」として、罫線に馴染む軽い見た目に戻す。 */
/* 全体の入力欄の指定(input:not(...)の5連)は詳細度が高く、クラスだけの指定では
   勝てない。カレンダーの表そのもののid経由で上書きする。 */
#gantt-calendar-table .gantt-inline-input {
  min-height: 0;
  height: 26px;
  padding: 2px 4px;
  /* 罫線に馴染ませつつ「ここは書き込める」と分かるよう、薄い枠と地色は残す。 */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
#gantt-calendar-table .gantt-inline-input:hover { border-color: var(--color-border-strong); }
#gantt-calendar-table .gantt-inline-input:focus { border-color: var(--color-primary); background: var(--color-surface); }
/* 直近の変更のハイライトは、上の「透明にする」指定に負けないよう塗り直す。 */
#gantt-calendar-table .gantt-inline-input.is-recent-change { background: #fff3b0; }
@media (prefers-color-scheme: dark) {
  #gantt-calendar-table .gantt-inline-input.is-recent-change { background: #5a4a0d; }
}
#gantt-calendar-table textarea.gantt-note-input { height: auto; min-height: 34px; }
/* 備考の空欄に出る行名（メモ等）は日数ぶん並ぶので、薄くして地の模様にしない。 */
#gantt-calendar-table textarea.gantt-note-input::placeholder { color: var(--color-text-subtle); opacity: .45; }
/* 項目名の列(残室/販室/消化率…)は文字が短いので、その幅に合わせる。 */
.gantt-col-label { width: 92px; min-width: 92px; max-width: 92px; }
.rv-colwidth { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.rv-colwidth select { padding: 2px var(--space-2); }
@media (max-width: 820px) {
  .gantt-calendar { --rv-day-col: 60px; }
  .gantt-calendar th, .gantt-calendar td { padding: 2px 3px; }
}


/* ---- 在庫・料金カレンダーの上の帯: 月送り・道具を1本にまとめる ----
   前月／次月・過去日・CSV・比較基準・列幅・最大表示が段違いに並んで場所を取って
   いたので、左に月送り、右に道具、という並びの1本の帯にする。 */
.filter-bar.rv-cal-bar { padding: var(--space-3); margin-bottom: var(--space-3); }
.rv-cal-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-2) var(--space-4);
}
.rv-cal-nav, .rv-cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rv-cal-title { margin: 0; font-size: var(--text-base); font-weight: 700; white-space: nowrap; }
.rv-cal-title span { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-sm); }
.rv-cal-inline-form { display: flex; align-items: center; margin: 0; }
.rv-cal-toolbar label { display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.rv-cal-toolbar select { min-height: 38px; font-size: var(--text-sm); padding: 2px var(--space-2); }
.rv-cal-toolbar .button-link { min-height: 38px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
@media (max-width: 820px) {
  .rv-cal-toolbar { justify-content: flex-start; }
  .rv-cal-title { white-space: normal; }
}


/* ---- 料金反映: 操作を上に置いた1枚のパネル ---- */
.rv-sync-panel { max-width: 900px; }
.rv-sync-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: 0; }
.rv-sync-target { flex: 0 1 280px; }
.rv-sync-target textarea { min-height: 0; height: 62px; }
.rv-sync-form .plan-group-picker { flex: 1 1 260px; margin: 0; }
.rv-sync-picks { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.rv-sync-sep { color: var(--color-text-subtle); }

/* 反映内容は「対象・日付・ランク」だけの短い表なので、横いっぱいに広げず
   中身の幅に合わせる（画面の端まで伸びていて間延びして見えた）。 */
.rv-sync-changes { width: fit-content; max-width: 100%; }
.rv-sync-changes .table-scroll { display: inline-block; max-width: 100%; }
.rv-sync-changes table.data-table { width: auto; }
.rv-sync-changes table.data-table th, .rv-sync-changes table.data-table td {
  padding: var(--space-1) var(--space-3); white-space: nowrap; vertical-align: middle;
}
.rv-sync-changes table.data-table td:first-child, .rv-sync-changes table.data-table th:first-child {
  padding-right: 0; width: 1%;
}
/* 全体の入力欄の指定(input:not(...)の5連)より詳細度を上げるため、idで指定する。 */
#rank-sync-changes .rank-sync-edit {
  width: 64px; min-height: 0; height: 30px; padding: 2px var(--space-2);
  text-align: center; font-weight: 700;
}
#rank-sync-changes input[type="checkbox"] { width: 18px; height: 18px; }


/* ---- 在庫データ管理: 取り込みの操作を「見出し＋操作」の1行に揃える ---- */
.rv-import-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.rv-import-label { flex: 0 0 190px; font-size: var(--text-sm); font-weight: 600; }
.rv-import-row input[type="file"] { flex: 1 1 260px; max-width: 420px; }
.rv-import-row input[type="date"] { flex: 0 0 auto; }
.rv-import-sep { color: var(--color-text-muted); }
.rv-import-inline { display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.rv-import-note { margin: 0 0 var(--space-2) 198px; }
/* 自動取得の行: 「中断」は取得ボタンの横。取得が動いているときだけ出す。 */
.rv-fetch-line { align-items: center; }
.rv-fetch-line > .rv-import-fetch {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0;
}
.rv-fetch-cancel { margin: 0; }
/* 分析ツールの自動取得も同じく、「中断」は取得ボタンの横。 */
.ra-fetch-line { display: flex; flex-wrap: wrap; align-items: flex-end;
                 gap: var(--space-2); }
.ra-fetch-line > form { margin-bottom: var(--space-2); }

.rv-import-history { max-width: 760px; }
.rv-import-history summary { cursor: pointer; font-weight: 600; }
.rv-import-history table { margin-top: var(--space-3); }
@media (max-width: 820px) {
  .rv-import-label { flex-basis: 100%; }
  .rv-import-note { margin-left: 0; }
}

/* ---- 表示設定: 一覧と入力欄を詰める ---- */
/* 設定の箱は、中身(表)の幅に合わせて伸ばす。640pxで止めていたため、列の多い表
   (自社・競合の料金、売止項目)が枠からはみ出していた。画面の幅は超えない。
   短い箱まで横いっぱいに伸ばすと読みにくいので、fit-contentで中身に合わせる。
   #revenue-room-types(部屋タイプ・料金カレンダー)はこの画面の中の入れ物なので、
   以下の指定はそちらにも効く。 */
#revenue-settings .master-section {
  max-width: 100%;
  width: fit-content;
  min-width: min(640px, 100%);
}
/* 表そのものは、狭い画面では箱の中で横スクロールさせる(箱を割らない)。 */
#revenue-settings .master-section > table.master-table { max-width: 100%; }
@media (max-width: 820px) {
  #revenue-settings .master-section { overflow-x: auto; }
}
#revenue-settings table.data-table { width: auto; }
#revenue-settings table.data-table th, #revenue-settings table.data-table td {
  padding: var(--space-1) var(--space-3); vertical-align: middle; white-space: nowrap;
}
/* 入力欄とボタンの大きさをそろえる。部屋タイプのほうだけ既定の大きさだったため、
   同じ「順番」の矢印が横並びと縦積み(1行84px)に分かれ、表がばらついて見えていた。 */
#revenue-settings input[type="text"], #revenue-settings input[type="number"] {
  min-height: 34px; height: 34px; padding: 2px var(--space-2);
}
#revenue-settings button { white-space: nowrap; }
#revenue-settings .icon-button { min-width: 34px; min-height: 34px; padding: 2px; }
#revenue-settings button.small { min-height: 34px; padding: var(--space-1) var(--space-3); }
#revenue-settings .reorder-cell { display: flex; flex-direction: row; gap: 2px; align-items: center; }
/* 紐づけ名のチップと、料金カレンダーの反映先の「×」は小さいまま。上の34pxに
   引っぱられると、チップが行の高さぶんに膨らんでしまう。 */
#revenue-settings .rt-alias .icon-button { min-width: 24px; min-height: 24px; padding: 0; }
#revenue-settings .rc-sync-item .icon-button { min-width: 28px; min-height: 28px; }

/* 残室・販室の行（全体・部屋タイプ別）は、カレンダーでいちばん見る数字なので、
   うっすら色を敷いて消化率・差分・ランクの行と見分けやすくする。
   セル単位の色（直近の変更・売止など）が消えないよう、行の下地だけを塗る。 */
.gantt-calendar tr.is-inventory > th,
.gantt-calendar tr.is-inventory > td {
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}
.gantt-calendar tr.is-inventory > td.gantt-row-label {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-raised));
}

/* 最大表示のときだけ出す「元のサイズに戻す」。ふだんは隠しておく。 */
.calendar-maximized-bar { display: none; }
.calendar-wrap.is-maximized .calendar-maximized-bar {
  display: flex; justify-content: flex-end; margin: 0 0 var(--space-2);
}

/* 備考・競合料金の吹き出し。標準のツールチップは出るまで1秒ほどかかるので、
   マウスを乗せた瞬間に出す自前のもの。 */
.cell-tip {
  position: fixed; z-index: 2000; pointer-events: none;
  max-width: 320px; padding: var(--space-2) var(--space-3);
  background: var(--color-text); color: var(--color-surface);
  border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.5;
  white-space: pre-wrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* カレンダーの区切り。区分(全体・PMS・売止・競合・備考)と部屋タイプの変わり目に
   太い線を入れて、どこからどこまでが一かたまりかを見分けやすくする。 */
/* 枠線と同じ薄い色だと、太くしても線が増えたように見えない。文字寄りの色にする。 */
.gantt-calendar tbody tr.rv-group-start > th,
.gantt-calendar tbody tr.rv-group-start > td {
  border-top: 2px solid var(--color-text-muted);
}

/* 説明がある語。マウスを乗せると .cell-tip で中身を出す(cell_tip.js)。 */
.has-tip { border-bottom: 1px dotted var(--color-text-subtle); cursor: help; }

/* 表示設定の「施設情報」。項目が増えたので折り返し、入力欄は中身に合う幅にする
   （枠からはみ出していた）。 */
/* 施設情報だけ項目が多いので、この箱は広めにして2行に収める。 */
/* 施設情報は項目が多いので、折り返して2行に収まる広さを確保する。 */
#revenue-settings .rv-settings-facility { min-width: min(900px, 100%); }
#revenue-settings .rv-settings-form { align-items: flex-end; gap: var(--space-3); }
#revenue-settings .rv-settings-form label { flex: 0 0 auto; }
#revenue-settings .rv-settings-form input[type="number"] { width: 8em; }
#revenue-settings .rv-settings-form select { max-width: 14em; }


/* ============================== 縦型カレンダー ==============================
   日付を縦に並べた在庫・料金カレンダー(partials/revenue_calendar_vertical.html)。
   セルの中身は横並び版と同じ部品(gantt-cell系)を使うので、ここでは表の骨格
   ——見出しの固定、日付列の固定、区分の区切り——だけを決める。 */
/* 縦型は項目の数だけ列があり、横並び版のように日数ぶん伸びるわけではない。
   min-width:100% にしていたため、項目が少ない施設では画面幅(最大1700px)まで
   引き伸ばされ、1つ1つの列がむだに広くなっていた。中身の幅に合わせる。 */
.rv-vcal { border-collapse: separate; border-spacing: 0; width: max-content; max-width: 100%; }
.rv-vcal th, .rv-vcal td {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm); text-align: center; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rv-vcal thead th {
  position: sticky; z-index: 3;
  background: var(--color-surface-raised); color: var(--color-text-muted); font-weight: 600;
}
.rv-vcal thead tr.rv-vcal-groups th { top: 0; z-index: 4; }
/* 2段目の見出しは、1段目の高さぶん下げて貼り付ける(高さはJSで測って入れる)。 */
.rv-vcal thead tr.rv-vcal-fields th { top: var(--rv-vcal-head-h, 30px); }
.rv-vcal .rv-vcal-group {
  color: var(--color-text); font-weight: 700;
  border-bottom: 2px solid var(--color-text-muted);
}
.rv-vcal .rv-vcal-group.is-total { background: var(--color-primary-subtle); color: var(--color-primary); }
/* 区分・部屋タイプの変わり目。横並び版の太線と同じ狙いで、こちらは縦線にする。 */
.rv-vcal .rv-vcal-edge { border-left: 2px solid var(--color-text-muted); }

/* 日付の列は横に送っても残す。見出しの角は縦横どちらにも固定する。 */
.rv-vcal .rv-vcal-date {
  position: sticky; left: 0; z-index: 2;
  background: var(--color-surface); text-align: left; font-weight: 600;
  border-right: 2px solid var(--color-text-muted);
  /* 「09/01 火」で足りるので、日付列だけが広がらないようにする。 */
  width: 5.5em; min-width: 5.5em; padding-right: var(--space-2);
}
.rv-vcal thead .rv-vcal-corner { z-index: 5; background: var(--color-surface-raised); }
.rv-vcal .rv-vcal-dow { color: var(--color-text-subtle); font-weight: 500; margin-left: 4px; }
.rv-vcal tbody tr:hover th, .rv-vcal tbody tr:hover td { background: var(--color-row-hover); }
.rv-vcal tbody tr.is-saturday .rv-vcal-date { background: #dbeeff; color: #1c5fa8; }
.rv-vcal tbody tr.is-sunday-holiday .rv-vcal-date { background: var(--color-danger-subtle); color: var(--color-danger); }
.rv-vcal tbody tr.is-today .rv-vcal-date { box-shadow: inset 3px 0 0 var(--color-primary); }
.rv-vcal tbody tr.is-month-start th, .rv-vcal tbody tr.is-month-start td {
  border-top: 2px solid var(--color-text-muted);
}
/* 過去の日付は行ごと隠す(横並び版は列で隠している)。 */
.rv-vcal.is-collapsed tbody tr.is-past { display: none; }
.rv-vcal .gantt-cell { min-width: 0; max-width: none; }
.rv-vcal .gantt-cell-note { min-width: 180px; }
/* 入力欄はセルに合わせて伸ばすが、ランクや数値は数文字しか入らないので
   伸ばしすぎない(列がむだに広くなり、1画面に入る項目が減るため)。 */
.rv-vcal .gantt-inline-input { width: 100%; max-width: 62px; }
/* 数値の列は中身が2〜4文字。見出し(「差分残室」など)に合わせて広がると
   1画面に入る項目が減るので、列そのものにも上限を置く。 */
.rv-vcal td.gantt-cell-input, .rv-vcal thead tr.rv-vcal-fields th { max-width: 74px; }
.rv-vcal thead tr.rv-vcal-fields th { overflow: hidden; text-overflow: ellipsis; }
/* 最低料金の見出しは条件名(「スタンダードツイン / 2名」など)なので、1行に
   入り切らない。列は広げず、見出しだけ折り返して全部読めるようにする。 */
.rv-vcal thead tr.rv-vcal-fields th.rv-vcal-minprice {
  white-space: normal; overflow: visible; text-overflow: clip;
  /* 部屋タイプ名(10文字くらい)がそのまま1行に入る幅。他の見出しより少しだけ
     小さくして、列が広がりすぎないようにする。 */
  font-size: 12px; max-width: 10em; line-height: 1.25; vertical-align: bottom;
}
.rv-vcal .rv-mp-name, .rv-vcal .rv-mp-cond { display: block; }
.rv-vcal .rv-mp-cond { color: var(--color-text-subtle); font-weight: 500; }
/* 横並び版でも同じ出し方。行の名前の欄は92pxしかないので、部屋タイプ名を
   折り返しつつ、人数・プランは下の段に小さく出す。 */
.gantt-calendar td.rv-mp-label {
  white-space: normal; font-size: 12px; line-height: 1.25;
}
.gantt-calendar .rv-mp-name, .gantt-calendar .rv-mp-cond { display: block; }
.gantt-calendar .rv-mp-cond { color: var(--color-text-subtle); font-size: 11px; }
.rv-vcal .gantt-cell-note .gantt-inline-input { max-width: none; }
/* 中身は2〜4文字しかないのに、項目名(「差分残室」など)に引っぱられて列が広がって
   いた。項目名を小さくし、余白も詰める。 */
.rv-vcal th, .rv-vcal td { padding: 2px 5px; }
.rv-vcal thead tr.rv-vcal-fields th { font-size: var(--text-xs); padding: 2px 4px; }
.rv-vcal .gantt-cell-button { padding: 0 2px; min-width: 0; }
/* 変更履歴のボタンは、横並び版と同じくセルに重ねて置く。行ごとに20px取られると
   列が2割ほど広くなってしまうため。ふだんは薄く、触れている間だけ出す。 */
.rv-vcal td.gantt-cell-input { position: relative; }
.rv-vcal td.gantt-cell-input .cell-history-btn {
  position: absolute; top: 0; right: 0;
  opacity: 0; transition: opacity 0.12s ease;
  background: var(--color-surface-raised); border-radius: var(--radius-sm);
  min-width: 0; min-height: 0; padding: 1px;
}
.rv-vcal td.gantt-cell-input:hover .cell-history-btn,
.rv-vcal td.gantt-cell-input:focus-within .cell-history-btn { opacity: 1; }
.rv-vcal textarea.gantt-note-input { font-size: var(--text-xs); line-height: 1.3; padding: 1px 2px; }
@media (prefers-color-scheme: dark) {
  .rv-vcal tbody tr.is-saturday .rv-vcal-date { background: #163049; color: #8bc4ff; }
}

/* ============================== 画面の幅 ==============================
   表・カレンダーを見る画面が多いのに、広いディスプレイでは両側がただの余白に
   なっていた。ページの上限を広げ、カードに直書きしてある1100〜1300pxの上限も
   打ち消して画面を使い切る。入力フォームなど、狭いほうが読みやすくて意図的に
   640〜1000pxにしてあるものはそのまま残す。 */
.page { max-width: 1700px; }
.page [style*="max-width:1100px"],
.page [style*="max-width:1200px"],
.page [style*="max-width:1300px"] { max-width: none !important; }

/* クロス表（喫食・泊数・曜日などを販売先別・客室タイプ別に見る表）のセル。
   割合を主役にして、室泊とADRは添え物として小さく出す。 */
.data-table .cell-sub { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: normal; }

/* ====================== 料金取得の料金表の列幅 ======================
   施設の列が名前の長さで広がり、「天然温泉　岩木桜の湯　ドーミーイン弘前」の
   ような長い名前の1列だけが極端に広くなっていた。幅がばらばらだと金額を横に
   見比べられないので、施設の列は全部同じ幅にして、長い名前は見出しの中で
   折り返す。 */
table.price-matrix { table-layout: fixed; width: auto; }
.price-matrix .price-matrix-date { width: 160px; }
.price-matrix th:not(.price-matrix-date),
.price-matrix td:not(.price-matrix-date) { width: 170px; }
/* 見出しは折り返してよい(金額のセルは1行のまま)。行の高さが名前の長さで
   変わらないよう、下端で揃える。 */
.price-matrix thead th:not(.price-matrix-date) {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35; vertical-align: bottom;
}

/* ====================== 施設アイコンの欄 ======================
   写真が小さいわりに周りが空いていた。写真を大きくして、右の操作の並びと
   高さを合わせ、行の間の余白も詰める。 */
.spec-icon-upload { align-items: center; gap: var(--space-4); }
.spec-icon-upload .avatar-preview { width: 128px; height: 128px; font-size: var(--text-xl); }
.spec-icon-upload .spec-icon-row {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; flex: 1 1 auto;
}

/* 「料金を取得」の欄。開始日と終了日が縦に積まれていて背が高かったので、
   期間と取得ボタンを1行に並べる。 */
.price-fetch-form {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4); margin-top: var(--space-2);
}
.price-fetch-form label { display: inline-flex; align-items: center; gap: var(--space-2); }

/* 自社の列は競合を見比べるときの基準なので、日付の隣に固定して、横に送っても
   画面に残す。並び順と出し入れはレベニュー設定の「自社・競合の料金」に合わせている。 */
.price-matrix .price-matrix-own {
  position: sticky; left: 160px; z-index: 1;
  background: var(--color-surface);
  border-right: 2px solid var(--color-border);
}
.price-matrix thead .price-matrix-own { background: var(--color-surface-raised); }
.price-matrix tbody tr:hover .price-matrix-own { background: var(--color-row-hover); }

/* ============ カレンダー左端の「施設名」の列 ============
   80pxしかなく、「天然温泉　岩木桜の湯　ドーミーイン弘前」のような名前が
   1〜2文字ずつ折り返されて何行にもなっていた。隣の条件の列と釣り合う幅にして、
   名前をそのまま読めるようにする。条件の列は、その右隣に固定し直す
   (これまでleft:0が勝っていて、横に送ると施設名の列と重なっていた)。 */
.gantt-col-channel { width: 150px; min-width: 150px; max-width: 150px; }
.gantt-calendar th.gantt-col-label, .gantt-calendar td.gantt-col-label { left: 150px; }

/* 集計表の見出しに添える補足（「DOR / 1室あたり人数」など）。用語だけだと
   何を指しているのか分からないので、日本語の言い換えを小さく重ねる。 */
.th-sub { display: block; font-size: 9.5px; font-weight: 500; opacity: .75; letter-spacing: 0; }

/* カレンダー表示設定の「設定」列。文言が長く、表が枠からはみ出していたので、
   この列だけ折り返しを許して幅を抑える(他の列は数字や短い名前なので
   #revenue-settings のnowrapのまま)。 */
#revenue-settings table.data-table td.rv-group-option {
  white-space: normal; max-width: 230px; line-height: 1.35;
}
#revenue-settings td.rv-group-option .inline-check { align-items: flex-start; }
#revenue-settings td.rv-group-option input[type="checkbox"] { margin-top: 2px; }

/* 部屋タイプ設定の一括保存。表の上に置いて、何がまとめて保存されるのかを添える。 */
.rt-bulk-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: 0 0 var(--space-3);
}
.rt-bulk-bar .hint-inline { margin: 0; }

/* 部屋タイプ設定の「どの枠にも紐づいていない客室」。取り込みには出てくるのに
   行き先が決まっていない客室名を、ここから枠へ入れ直す。 */
.rt-unassigned {
  margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.rt-unassigned h4 { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.rt-unassigned .hint-inline { margin: 0 0 var(--space-2); }
.rt-unassigned-row {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 3px 0;
}
.rt-unassigned-name {
  flex: 1 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: var(--text-sm); font-weight: 600;
}
.rt-unassigned-row select { max-width: 220px; }

/* カレンダーの最低料金の行。料金表から引いた値で、ここでは直せないことが分かるよう、
   入力欄のあるマスとは見え方を分ける。 */
.gantt-calendar td.rv-min-price { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }

/* 表示設定の「カレンダーに出す行」。区分ごとに、その中の行を横に並べて選ぶ。 */
.rv-rowset { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0;
             border-bottom: 1px solid var(--color-border-soft, var(--color-border)); }
.rv-rowset:last-of-type { border-bottom: 0; }
.rv-rowset-name { flex: 0 0 120px; font-size: var(--text-sm); font-weight: 700; }
.rv-rowset-items { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
#revenue-settings .rv-rowset-items .inline-check { font-size: var(--text-sm); font-weight: normal; }

/* 表示設定の区分の表。「出す行」の列は数が多いので折り返す。 */
/* カレンダー表示設定の表も、上の fit-content に任せる(900px固定をやめた)。 */
#revenue-settings table.rv-groups-table td.rv-rowset-items {
  white-space: normal; display: flex; flex-wrap: wrap; gap: 2px var(--space-3);
  align-items: center; max-width: 560px;
}
#revenue-settings .rv-rowset-items .inline-check { font-size: var(--text-sm); font-weight: normal; }
#revenue-settings .rv-rowset-items select { max-width: 200px; }

/* 部屋タイプ設定の表を詰める。行ごとに入力欄が3段になっていて、部屋タイプが
   多い施設だと縦に伸びすぎていた。紐づけの追加は畳んでおき、開いたときだけ出す。 */
#revenue-room-types table.data-table th,
#revenue-room-types table.data-table td { padding: var(--space-1) var(--space-2); vertical-align: top; }
.rt-alias-add-wrap > summary {
  cursor: pointer; list-style: none; font-size: var(--text-xs); font-weight: 700;
  color: var(--color-primary); padding: 3px var(--space-2);
  border: 1px dashed var(--color-border); border-radius: var(--radius-full);
}
.rt-alias-add-wrap > summary::-webkit-details-marker { display: none; }
.rt-alias-add-wrap[open] > summary { margin-bottom: var(--space-1); }
.rt-alias-add-wrap .rt-alias-add input[type="text"] { min-width: 200px; }
.rt-aliases { margin-top: var(--space-1); }
.rt-alias { padding: 1px 2px 1px var(--space-2); font-size: var(--text-xs); }
.rt-alias .icon-button { min-width: 24px; min-height: 24px; padding: 0; }
/* 部屋タイプ名の入力欄。160pxだと「特別和洋室（2025年OPEN）」のような長い名前が
   途中で切れて、どの枠か読めなかった。よくある長さ(全角20字ほど)が収まる幅にする。
   狭い画面では上の @media (max-width: 820px) の「幅いっぱい」を活かすので広げない。 */
@media (min-width: 821px) {
  .rt-rename-form input[type="text"] { min-width: 20em; max-width: 100%; }
}
/* 最低料金の紐づけは選ぶだけなので、幅を取りすぎないようにする。 */
#revenue-room-types td select { max-width: 190px; font-size: var(--text-sm); }

/* まだ保存していないランクから引いた最低料金。保存済みの値と見分けられるようにする。 */
.gantt-calendar td.rv-min-price.is-preview { color: var(--color-primary); font-weight: 700; }

/* 料金設計の部屋タイプ: 「追加」で増やしただけで、まだ保存していない行。 */
.rate-room-table tr.is-new > td:first-child { border-left: 3px solid var(--color-primary); }
.rate-room-add, .rate-plan-add { margin-bottom: var(--space-3); }
/* 料金設計のプラン: 「追加」で増やしただけで、まだ保存していない行。 */
.data-table tr.is-new > td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }

/* 2択の切り替え（CSVの種類など）。押しているほうだけ色を付ける。 */
.seg-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.seg-toggle .seg-btn {
  border: 0; background: var(--color-surface); color: var(--color-text-muted);
  font-size: var(--text-sm); padding: var(--space-1) var(--space-3); cursor: pointer;
}
.seg-toggle .seg-btn + .seg-btn { border-left: 1px solid var(--color-border); }
.seg-toggle .seg-btn.is-active { background: var(--color-primary-subtle); color: var(--color-primary); font-weight: 700; }
/* 統括本部のタブの中の切り替え（監査ログ：ログイン履歴・操作ログ・ログイン鍵の使用履歴／AI：連携・費用） */
.sub-switch { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.sub-switch-btn {
  display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
  color: var(--color-text-muted); font-size: 15px; text-decoration: none;
}
.sub-switch-btn:hover { color: var(--color-text); }
.sub-switch-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }

/* 料金表のマス。クリックするとその場で金額を打ち込める（客単価のとき）。 */
.rate-grid td.rate-cell { cursor: text; }
.rate-grid td.rate-cell:hover { background: var(--color-surface-raised); }
/* 手で打ち替えたマス。色と右上の三角で、計算した金額と見分けられるようにする。 */
.rate-grid td.is-edited {
  color: var(--color-primary); font-weight: 700;
  background: var(--color-primary-subtle); position: relative;
}
.rate-grid td.is-edited::after {
  content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-top: 9px solid var(--color-primary); border-left: 9px solid transparent;
}
.rate-grid td.is-edited:hover { background: var(--color-primary-subtle); }
/* 基本料金の手入力を土台に、プランの調整を当てて出しているマス。直接打ったマスと
   同じ色で示し、印を薄く・下線を点線にして「間接的に効いている」ことを分ける。 */
.rate-grid td.is-from-base {
  color: var(--color-primary); font-weight: 700;
  background: var(--color-primary-subtle); position: relative;
  border-bottom: 2px dotted var(--color-primary);
}
.rate-grid td.is-from-base::after {
  content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-top: 9px solid var(--color-primary); border-left: 9px solid transparent;
  opacity: 0.4;
}
.rate-grid td.is-from-base:hover { background: var(--color-primary-subtle); }
/* 手入力がいくつあるか。 */
.rate-edited-count {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-primary);
  background: var(--color-primary-subtle); border-radius: var(--radius-full);
  padding: 2px var(--space-3); align-self: center;
}
/* 手入力の欄。マスより少しはみ出すくらいに大きくして、桁を打ちやすくする。 */
.rate-grid input.rate-cell-input {
  width: 100%; min-width: 86px; box-sizing: border-box;
  text-align: right; font-size: var(--text-md); font-variant-numeric: tabular-nums;
  padding: 4px 6px; border: 2px solid var(--color-primary); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
}
.rate-grid td.rate-cell { min-width: 92px; }
/* 手入力の保存の結果。 */
.rate-override-status { font-size: var(--text-sm); color: var(--color-text-muted); align-self: center; }
.rate-override-status.is-bad { color: var(--color-danger); font-weight: 700; }

/* 料金設計の各部屋・各プランにぶら下げる「詳細設定」。 */
.rate-detail { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.rate-detail > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); }
.rate-detail-body {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  align-items: flex-end; padding: var(--space-3) 0;
}
.rate-detail-body label { font-size: var(--text-sm); }
.rate-detail-body label.grow { flex: 1 1 320px; }
.rate-detail-body input[type="text"], .rate-detail-body input[type="date"], .rate-detail-body select { min-width: 120px; }
.rate-detail-group {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
}
.rate-detail-label { font-size: var(--text-sm); font-weight: 700; min-width: 72px; }
.rate-detail-group .inline-check { font-size: var(--text-sm); font-weight: normal; }
.rate-plan-detail-row > td { background: var(--color-surface-raised); }

/* チェックボックス付きのチップ（施設で絞り込みなど）。.filter-row label は縦積み
   なので、そのままだとチェックが名前の上に乗ってしまう。横並びに戻す。 */
.filter-row label.chip, label.chip,
.filter-row label.inline-check, .filter-row label.ct-key-item {
  flex-direction: row; align-items: center; gap: var(--space-2);
}
label.chip {
  font-size: var(--text-sm); padding: var(--space-2) var(--space-3);
  white-space: nowrap; cursor: pointer;
}
label.chip input[type="checkbox"] { margin: 0; }
.facility-checkboxes { gap: var(--space-2) var(--space-3); }
.facility-popover-panel { min-width: 360px; max-width: min(560px, 90vw); }

/* 売止のマス。「止」か、その日に流したいランクを打ち込む。
   「止」のときだけ赤くして、今までのチェック済みと同じ見え方にする。 */
/* Booking・一休の取込の表。ファイルを選ぶ欄は既定だと広く、そのままだと
   競合が数件でも表が横に伸びて見切れる。中身に合わせて抑える。 */
.review-import-table input[type="file"] { width: 100%; max-width: 15em; }
.review-import-table .hint-inline { margin: var(--space-1) 0 0; }

/* 売止のマス(文字の欄)。TLリンカーンなど、解除する日にランクを打ち込む施設で使う。 */
.gantt-calendar input.rv-sell-stop-input { text-align: center; font-weight: 700; }
/* #gantt-calendar-table .gantt-inline-input が背景色を持っているので、
   同じだけの強さ(ID付き)で指定しないと赤くならない。 */
#gantt-calendar-table input.rv-sell-stop-input.is-stopped,
.rv-vcal input.rv-sell-stop-input.is-stopped,
.gantt-calendar input.rv-sell-stop-input.is-stopped {
  background: var(--color-danger); border-color: var(--color-danger); color: #fff;
}

/* 売止のマス(チェック)。ねっぱんの「日別のプラン売止め」と同じ作りにする。
   マス全体を押せるように、ラベルをマスいっぱいに広げる。 */
.rv-sell-stop-cell {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 1.9em; cursor: pointer; border-radius: var(--radius-sm);
}
/* 実際に送る値を持つ欄。見せないが、送信には乗せる。 */
.rv-sell-stop-value { display: none !important; }
.rv-sell-stop-cell input[type="checkbox"] {
  width: 1.05em; height: 1.05em; margin: 0; cursor: pointer; accent-color: var(--color-danger);
}
/* 売止の日はマスごと赤くして、ひと目で分かるようにする。 */
.rv-sell-stop-cell.is-stopped { background: var(--color-danger); }
.rv-sell-stop-cell.is-stopped input[type="checkbox"] { accent-color: #fff; }
/* 直近の保存で触ったマス(他の行と同じ黄色)。売止の赤より手前に出す。 */
.rv-sell-stop-cell.is-recent-change { box-shadow: inset 0 0 0 2px var(--color-warning); }

/* 反映画面の「更新条件」。ラジオとチェックを横に並べ、枠で1つにまとめる。 */
.rv-sync-conditions {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center;
}
.rv-sync-conditions legend { font-size: var(--text-sm); font-weight: 700; padding: 0 var(--space-2); }
.rv-sync-conditions .inline-check { margin-top: 0; font-size: var(--text-sm); font-weight: normal; }

/* 反映内容の一括選択リンクの前に置く、種別の小見出し。 */
.rv-sync-pick-label { font-weight: 700; margin-right: var(--space-1); }

/* 区分名の列（左端の「備考」「売止」など）は、同じ区分の中では線を引かない。
   行が続くと、名前の下に空のマスが積み重なって見えてしまうため。
   区分の変わり目(rv-group-start)の太い線はそのまま残す。 */
.gantt-calendar tbody tr:not(.rv-group-start) > th.gantt-channel-name {
  border-top-color: transparent;
}

/* ============================================================
   ニュースの仕分け表示。種類のタブと、記事に付く小さな札。
   ============================================================ */
.news-category-tabs { margin-bottom: var(--space-3); }
.news-tab-count {
  margin-left: var(--space-2); font-size: var(--text-xs);
  color: var(--color-text-subtle); font-variant-numeric: tabular-nums;
}
.news-badge {
  display: inline-block; margin-right: var(--space-2); padding: 1px var(--space-2);
  border-radius: var(--radius-full); font-size: var(--text-xs); line-height: 1.6;
}
.news-badge--opening      { background: #d6ecdf; color: #1f4f3c; }
.news-badge--renewal      { background: #fbeec0; color: #5c4a12; }
.news-badge--competitor   { background: #f9c9c9; color: #6d2222; }
.news-badge--trend        { background: #d9e8f7; color: #1f4362; }
.news-badge--unclassified { background: var(--color-surface-raised); color: var(--color-text-subtle); }
.news-badge--area         { background: none; color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ============================================================
   チーム編成の「誰が何に携わっているか」。人ごとに1列で、自分がいちばん左。
   編成そのものを組み替える操作は、下の details（チーム編成を編集）の中にある。
   ============================================================ */
.people-board {
  display: flex; gap: var(--space-3); overflow-x: auto;
  padding-bottom: var(--space-2); margin-bottom: var(--space-5);
  align-items: flex-start;
}
.people-col {
  flex: 0 0 220px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3);
}
/* 自分の列だけ、ふちを濃くして見つけやすくする。 */
.people-col.is-me { border-color: var(--color-primary); }
.people-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-2);
}
.people-name {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--text-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.people-count {
  flex: 0 0 auto; min-width: 22px; text-align: center;
  border-radius: var(--radius-full); padding: 0 var(--space-2);
  background: var(--color-primary-subtle); color: var(--color-primary-active);
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* 担当が無い人は、数字を目立たせない（探すのは担当が付いている人のため）。 */
.people-count.is-zero { background: none; color: var(--color-text-subtle); font-weight: normal; }
.people-body { display: flex; flex-direction: column; gap: var(--space-1); }
.people-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  background: var(--color-surface-raised); font-size: var(--text-sm);
  color: var(--color-text); text-decoration: none;
}
a.people-item:hover { background: var(--color-primary-subtle); color: var(--color-primary-active); }
.people-item > span {
  flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.people-item em {
  flex: 0 0 auto; font-style: normal; font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* 編成の編集。ふだんは畳んでおく。 */
.team-editor > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--text-sm); color: var(--color-text-muted);
  padding: var(--space-2) 0;
}
.team-editor > summary:hover { color: var(--color-primary); }
.team-editor[open] > summary { margin-bottom: var(--space-2); }

/* ============================================================
   縦幅をそろえる。
   ============================================================ */
/* カレンダー左端の施設名。「天然温泉　岩木桜の湯　ドーミーイン弘前」のような
   長い名前だけ2行になり、その行だけ背が高くなって並びが崩れていた。
   1行に収めて、はみ出す分は…で省く（全部の名前はマウスを乗せると出る）。 */
.gantt-calendar th.gantt-channel-name,
.gantt-calendar td.gantt-channel-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 150px;
}

/* 料金の表の見出し。施設名が1行の列と2行の列が混ざると見出しの高さが名前次第で
   変わるので、2行ぶんの高さで固定する(既にある vertical-align: bottom で下端に
   そろう)。 */
.price-matrix thead th:not(.price-matrix-date) { height: 3.4em; }

/* いつの取得を出しているかの表示。 */
.price-run-stamp {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); color: var(--color-text-muted);
}

/* ============================================================
   料金取得の自動設定。
   ============================================================ */
/* 施設ごとの設定欄。ふだんは畳んでおく(止めてある施設のほうが多いため)。 */
.price-auto > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--text-sm); color: var(--color-text-muted);
  padding: var(--space-2) 0;
}
.price-auto > summary:hover { color: var(--color-primary); }
.price-auto-days { display: inline-flex; gap: var(--space-1); flex-wrap: wrap; }

/* トップの一覧に出す曜日。取る曜日だけ濃くする。 */
.auto-day {
  display: inline-block; width: 1.6em; text-align: center;
  font-size: var(--text-xs); color: var(--color-text-subtle);
}
.auto-day.is-on { color: var(--color-primary); font-weight: 700; }
/* 止めてある施設の行は、目に入る手前で抑える。 */
.data-table tr.is-off td { color: var(--color-text-muted); }

/* ============================================================
   分析ツールの「名前で振り分け」。ルール1本を1枚のカードにして、
   その中に「いま何が入っているか」を畳んで置く。表に詰め込むと、
   言葉・寄せ先・件数・操作が横に並んで読みにくかった。
   ============================================================ */
.rule-block { max-width: 1000px; }
.rule-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2);
}
.rule-progress {
  font-size: var(--text-sm); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.rule-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.rule-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.rule-words { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
/* 登録した言葉。いくつでも並ぶので、1語ずつ囲って切れ目を分かるようにする。 */
.rule-word {
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 1px var(--space-2); font-size: var(--text-sm);
}
.rule-arrow { color: var(--color-text-subtle); margin: 0 var(--space-1); }
.rule-card-actions { display: flex; align-items: center; gap: var(--space-1); }
.rule-count {
  font-size: var(--text-xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; margin-right: var(--space-2);
}
.rule-hits > summary, .rule-rest > summary {
  cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted);
  padding: var(--space-1) 0;
}
.rule-hits ul, .rule-rest ul {
  list-style: none; margin: var(--space-1) 0 0; padding: 0;
  max-height: 260px; overflow-y: auto;
}
.rule-hits li, .rule-rest li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 2px 0; font-size: var(--text-sm); border-top: 1px solid var(--color-border);
}
.rule-hits li span, .rule-rest li span {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rule-hits li em, .rule-rest li em {
  flex: 0 0 auto; font-style: normal; color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.rule-hits-empty { font-size: var(--text-sm); color: var(--color-text-subtle); margin: var(--space-1) 0 0; }
.rule-add {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.rule-add input[type="text"] { flex: 1 1 260px; min-width: 200px; }
.rule-rest { margin-top: var(--space-3); }

/* 寄せ先（施設仕様書の部屋タイプ・プラン）1つぶんの行。
   名前・言葉の欄・保存・件数を1行に並べ、紐づいているものは下に畳む。 */
.dest-form {
  display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap;
}
/* 寄せ先の名前と、そこに紐づいた合計。言葉ごとの件数が右に並ぶので、
   合計は名前の下に置いて取り違えないようにする。 */
.dest-head { flex: 0 0 200px; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.dest-name { font-size: var(--text-sm); }
.dest-head .rule-count { margin-right: 0; }
/* 言葉の欄。1つにつき1欄で縦に積み、一番下は追加用の空欄。 */
.kw-items { flex: 1 1 320px; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
/* 登録済みの言葉は畳んでおく。言い方の違いを足していくと、寄せ先1つで
   5個6個になり、画面が縦に伸びてしまうため。 */
.kw-list { display: flex; flex-direction: column; gap: 4px; }
.kw-list > summary {
  cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted);
  padding: var(--space-1) 0;
}
.kw-list > summary:hover { color: var(--color-primary); }
.kw-item { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.kw-input { flex: 1 1 260px; min-width: 160px; }
.kw-del { flex: 0 0 auto; align-self: center; }
/* 完全一致（=で始まる）の欄は、見た目で区別できるようにする。 */
.kw-input.is-exact { border-color: var(--color-primary); }

.rule-rest-list {
  list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto;
}
.rule-rest-list li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 3px 0; font-size: var(--text-sm); border-top: 1px solid var(--color-border);
}
.rule-rest-list li span {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rule-rest-list li em {
  flex: 0 0 auto; font-style: normal; color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) { .dest-head { flex-basis: 100%; } }

/* 並べ替えのつまみ。ここをつかんで上下に落とすと順番が変わる。
   指で触る端末ではHTML5のドラッグが効かないので、↑↓のボタンも残してある。 */
.drag-grip {
  cursor: grab; user-select: none; color: var(--color-text-subtle);
  font-size: 16px; line-height: 1; padding: 0 var(--space-1);
  flex: 0 0 auto; align-self: center;
}
.drag-grip:active { cursor: grabbing; }
.drag-grip:hover { color: var(--color-text); }
[data-rate-room].is-dragging, [data-plan-row].is-dragging { opacity: .45; }
[data-rate-room] { border-radius: var(--radius-md); }

/* 部屋タイプの料金の表。ふだんは畳んでおく。 */
.rate-prices > summary {
  cursor: pointer; font-size: var(--text-sm); font-weight: 700;
  color: var(--color-text-muted); padding: var(--space-1) 0;
}
.rate-prices > summary:hover { color: var(--color-primary); }

/* 言葉ごとの内訳。言葉が複数あるときに、どれが何を拾っているかを分けて見せる。
   1つの枠に混ぜると「d」が「dt」まで拾っていることに気づけない。 */
/* 欄ごとの内訳。閉じているあいだは欄の右に件数だけを出し、開いたら
   1行まるごと使って中身を出す（プラン名は長いので、右端の幅では読めない）。 */
.kw-group { flex: 0 0 auto; }
.kw-group[open] { flex: 1 1 100%; }
.kw-group > summary {
  cursor: pointer; display: flex; align-items: center; gap: var(--space-2);
  padding: 6px 0 2px; font-size: var(--text-sm); white-space: nowrap;
}
.kw-group.is-empty > summary { color: var(--color-text-subtle); }
.kw-count {
  font-size: var(--text-xs); color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.kw-group ul { list-style: none; margin: 2px 0 var(--space-2); padding: 0; max-height: 240px; overflow-y: auto; }
.kw-group li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 2px 0; font-size: var(--text-sm); border-top: 1px solid var(--color-border);
}
.kw-group li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-group li em { flex: 0 0 auto; font-style: normal; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .kw-items { flex-basis: 100%; } }

/* ============================================================
   フリーボードの管理（一覧・新規作成・見れる人）
   ============================================================ */
.board-admin { max-width: 1000px; }
.board-create {
  display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap;
}
.board-create input[type="text"] { flex: 1 1 280px; min-width: 200px; }
/* 見れる人。ふだんは畳んでおき、開くと在籍スタッフが並ぶ。 */
.viewer-picker > summary {
  cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted);
  padding: var(--space-1) 0;
}
.viewer-picker > summary:hover { color: var(--color-primary); }
.viewer-list {
  display: flex; flex-direction: column; gap: 2px;
  margin: var(--space-1) 0; max-height: 240px; overflow-y: auto;
}
.viewer-list label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 400; white-space: nowrap;
}

   分析ツール「推移」の月次の表（グラフの下）
   ============================================================ */
.ra-trend-table { margin-top: var(--space-4); }
.ra-trend-table td, .ra-trend-table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ra-trend-table .num { text-align: right; }
.ra-trend-table tfoot th { border-top: 2px solid var(--color-text-muted); font-weight: 600; }
/* いまグラフの線で見ている指標の列を、表でも目で追えるようにする。 */
.ra-trend-table .is-active { background: var(--color-primary-subtle); }
/* クチコミのCSV取込の履歴。日時・件数を縦にそろえ、ファイル名は折り返す */
.review-import-history td { font-variant-numeric: tabular-nums; vertical-align: top; }
.review-import-history td:nth-child(4) { word-break: break-all; min-width: 12em; }
.review-import-history td:first-child,
.review-import-history td:nth-child(5),
.review-import-history td:last-child { white-space: nowrap; }

/* 部屋タイプの詳細設定にある「OTAでの部屋ID」。サイトの数だけ欄が並ぶので、
   1欄を小さくして折り返す。上の欄（管理名称など）とは線で区切る。 */
.room-site-ids {
  border-top: 1px dashed var(--color-border);
  gap: var(--space-2) var(--space-3);
}
.room-site-ids-head {
  flex: 1 1 100%; display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted);
}
.room-site-ids label { font-size: var(--text-sm); }
.room-site-ids input[type="text"] { min-width: 0; width: 9em; }

/* 予約分析の紐づけ画面で、施設仕様書に登録したIDで拾えているものを出す帯。 */
.kw-id {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  padding: var(--space-1) var(--space-2); margin-bottom: var(--space-1);
  background: var(--color-primary-subtle); border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.kw-id .kw-id-label { font-weight: 700; }
/* ID1つぶん。拾えている割合を右に小さく添える。1件も無いものは薄くして、
   直す先が一目で分かるようにする。 */
.kw-id-item { display: inline-flex; align-items: center; gap: 4px; }
.kw-id-item em { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 700; }
.kw-id-item.is-none { opacity: .55; }
.kw-id-item.is-none em { font-weight: normal; }
.kw-id code {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 0 6px;
}

/* 営業管理の商談一覧。宿の名前・担当・次にやることが1文字ずつ縦に折れてしまうので、
   列に最低限の幅を持たせる(横に長い表なので table-scroll の中で横に流す)。 */
.sales-deals-table td:nth-child(1) { min-width: 13em; }
.sales-deals-table td:nth-child(2) { min-width: 9em; }
.sales-deals-table td:nth-child(6) { white-space: nowrap; }
.sales-deals-table td:nth-child(7) { min-width: 12em; }
.sales-deals-table select { width: 100%; }
/* 見込み先の一覧も、宿の名前と担当者で同じことが起きる。 */
.sales-prospect-table td:nth-child(1) { min-width: 13em; }
.sales-prospect-table td:nth-child(2),
.sales-prospect-table td:nth-child(4) { white-space: nowrap; }

/* 下の方に、媒体の指定なしで .app-sidebar の幅を上書きしている行がある。
   後から書いたほうが勝つので、この塊はファイルのいちばん最後に置く。 */
/* ---- 広い画面では、左メニューを端の細いバーにしてホバーで開く ----
   ツールが13個あり、常に240px出していると本文がそのぶん狭い。畳んでいるあいだは
   アイコンだけを出し、カーソルを乗せたときに名前が出るようにする。

   開くときは本文を押し広げず、上に重ねる(位置が固定されていないと、開くたびに
   本文が横にずれて読んでいる場所を見失う)。そのため、バーは画面に固定して
   .app-shell に細いぶんの余白を取る。

   スマホは別に引き出し(ドロワー)を用意してあるので、ここでは触らない。 */
@media (min-width: 821px) {
  .app-shell { padding-left: 56px; }
  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 56px;
    height: 100vh;
    padding-left: 10px;
    padding-right: 10px;
    gap: var(--space-4);
    overflow-x: hidden;
    white-space: nowrap;
    transition: width .16s ease, padding .16s ease;
    z-index: 60;
  }
  /* キーボードで辿っているときも開く(Tabでメニューに入れなくなるのを防ぐ)。 */
  /* 開いたときの幅は、いちばん長い名前（エージェントマネージャー）が収まる
     大きさにする。240pxだと「エージェントマネージャー」「レベニューマネジメント」が
     枠から出て切れていた（名前は折り返さない作りなので、足りないぶんは消える）。 */
  .app-sidebar:hover,
  .app-sidebar:focus-within {
    width: 300px;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    box-shadow: 4px 0 18px rgba(0, 0, 0, .18);
  }
  /* 畳んでいるあいだに出すのはアイコンだけ。文字や施設の選択欄は、細い幅では
     切れて読めないので消す(中途半端に頭だけ見えている方が読みにくい)。 */
  .app-sidebar-brand span,
  .app-sidebar-label,
  .facility-switcher,
  .app-sidebar-footer .staff-name {
    transition: opacity .12s ease;
  }
  .app-sidebar:not(:hover):not(:focus-within) .app-sidebar-brand span,
  .app-sidebar:not(:hover):not(:focus-within) .app-sidebar-label,
  .app-sidebar:not(:hover):not(:focus-within) .facility-switcher {
    opacity: 0;
    pointer-events: none;
  }
  /* アイコンが縮まないようにする(幅が足りないとflexに潰される)。 */
  .app-nav-item { white-space: nowrap; }
  .app-nav-item .icon,
  .app-nav-item .icon-sm,
  .app-nav-item .icon-md { flex-shrink: 0; }

  /* 細いあいだは縦のスクロールバーが幅を食い、アイコンの右半分が切れていた。
     バー自体を出さないようにする(ホイールでの上下はそのまま効く)。 */
  .app-sidebar { scrollbar-width: none; -ms-overflow-style: none; }
  .app-sidebar::-webkit-scrollbar { width: 0; height: 0; }

  /* 畳んでいるあいだは、アイコンが細いバーの真ん中に来るようにする。
     文字は幅からあふれた先にあるので、そのまま隠れる。 */
  .app-sidebar:not(:hover):not(:focus-within) .app-nav-item,
  .app-sidebar:not(:hover):not(:focus-within) .app-sidebar-brand {
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
    gap: 0;
  }
  .app-sidebar:not(:hover):not(:focus-within) .app-nav-item > .icon,
  .app-sidebar:not(:hover):not(:focus-within) .app-nav-item > .icon-sm,
  .app-sidebar:not(:hover):not(:focus-within) .app-nav-item > .icon-md,
  .app-sidebar:not(:hover):not(:focus-within) .app-sidebar-brand > .icon-md {
    margin-left: 8px;
    margin-right: 8px;
  }
  /* 足元のアバターも、細いあいだは丸だけ出す。 */
  .app-sidebar:not(:hover):not(:focus-within) .app-sidebar-footer { padding-left: 0; padding-right: 0; }

  /* 名前は<span>で囲まれておらず地の文なので、要素を指して消せない。
     文字の大きさを0にして畳み、アイコン(px指定)だけを残す。頭の一文字だけが
     覗いていると、かえって何のツールか分からなくなるため。 */
  .app-sidebar:not(:hover):not(:focus-within) .app-nav-item,
  .app-sidebar:not(:hover):not(:focus-within) .app-sidebar-brand {
    font-size: 0;
  }
}

/* 施設仕様書の「入力してください」。施設を登録しただけで放置されないよう、
   足りない項目を施設情報の先頭に出す(全部そろったら消える)。 */
.spec-todo {
  border: 1px solid var(--color-warning);
  background: var(--color-warning-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.spec-todo-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.spec-todo-list {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  margin: var(--space-2) 0 0; padding-left: var(--space-4);
}
.spec-todo-list li { min-width: 12em; }
.spec-todo-list .cell-sub { display: block; }

/* ---- 広い画面では本文も画面いっぱいに使う ----
   左メニューを細いバーにして幅が空いたので、カレンダーや内訳表を横に広く出す。
   .page の上限は前のほうで何度か上書きされている(1100→1180→1700px)ので、
   ここでまとめて外す。

   ただし説明文だけは上限を残す。1行が画面いっぱいに伸びると、目が次の行の
   頭に戻れなくなって読みにくい(表や数字にはこの問題がない)。 */
@media (min-width: 821px) {
  .page {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .page > .hint,
  .page-header .hint,
  .hint--explain { max-width: 100ch; }
}

/* 採用管理の応募者一覧。名前・応募先・次の予定が1文字ずつ縦に折れないよう、
   列に最低限の幅を持たせる(横に長い表なので table-scroll の中で横に流す)。 */
.recruit-applicant-table td:nth-child(1) { min-width: 11em; }
.recruit-applicant-table td:nth-child(2) { min-width: 8.5em; }
.recruit-applicant-table td:nth-child(3) { min-width: 12em; }
.recruit-applicant-table td:nth-child(4) { min-width: 7em; }
.recruit-applicant-table td:nth-child(6) { min-width: 14em; }
.recruit-applicant-table td:nth-child(7) { white-space: nowrap; }
.recruit-applicant-table select { width: 100%; }

/* レベニューの全施設一覧: 施設名からその施設のレベニュー画面へ飛べるようにする。
   表の見た目は崩さず、触ったときだけリンクだと分かるようにする。 */
.facility-name-link { color: inherit; text-decoration: none; }
.facility-name-link:hover { color: var(--color-primary); text-decoration: underline; }

/* ==============================================
/* 分析ツール「推移」の日次グラフ。1か月ぶんを画面幅に収め、それより長い期間は
   横スクロールで見る。左右の目盛りはスクロールの外に重ねて固定する。 */
.ra-combo-scroll { overflow-x: auto; overflow-y: hidden; }
.chart-container .ra-combo-axis { position: absolute; top: 0; }
.chart-container .ra-combo-axis-left { left: 0; }
.chart-container .ra-combo-axis-right { right: 0; }

/* ---- 期間(開始〜終了)を1つのカレンダーで選ぶ ----
   日付欄を2つ並べると、カレンダーを2回開くことになり、月をまたぐ期間ほど手間だった。
   ボタン1つを押すと2か月ぶんのカレンダーが開き、始まり→終わりの順に押して決める。 */
/* 見出し＋欄の形は、隣に並ぶ「集計基準」などの欄(.ra-inline-label)に合わせる。
   横並び・同じ文字の大きさ・同じ高さにしないと、1つだけ浮いて見える。 */
.filter-row .date-range-field {
  display: flex; flex-direction: row; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); white-space: nowrap;
}
.date-range { position: relative; display: inline-flex; font-weight: 400; }
.date-range-btn {
  font: inherit; font-size: var(--text-sm); text-align: left; white-space: nowrap;
  min-height: var(--tap);
  /* 画面が狭いときは欄の方を縮めて、横スクロールが出ないようにする。 */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.date-range-btn:hover { border-color: var(--color-primary); }
.date-range-btn.is-empty { color: var(--color-text-muted); }
.date-range-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: var(--space-3); width: max-content; max-width: min(92vw, 560px);
}
.date-range-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.date-range-note { flex: 1; text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.date-range-nav {
  width: 30px; height: 30px; padding: 0; line-height: 1; font-size: 18px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-raised); color: var(--color-text); cursor: pointer;
}
.date-range-nav:hover { border-color: var(--color-primary); color: var(--color-primary); }
.date-range-body { display: flex; gap: var(--space-4); }
.date-range-month-name { text-align: center; font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-1); }
.date-range-month table { border-collapse: collapse; }
.date-range-month th {
  width: 34px; padding: 2px 0; font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted); text-align: center;
}
.date-range-month th.is-sun { color: var(--color-danger); }
.date-range-month th.is-sat { color: var(--ra-sat, #1c5fa8); }
.date-range-month td { padding: 1px; }
.date-range-month td button {
  width: 34px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text); cursor: pointer;
  font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.date-range-month td button.is-sun { color: var(--color-danger); }
.date-range-month td button.is-sat { color: var(--ra-sat, #1c5fa8); }
.date-range-month td button:hover { background: var(--color-surface-raised); }
.date-range-month td button.is-today { box-shadow: inset 0 0 0 1.5px var(--color-border-strong); }
.date-range-month td button.is-inside { background: var(--color-primary-subtle); }
.date-range-month td button.is-edge { background: var(--color-primary); color: #fff; font-weight: 700; }
.date-range-presets {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
@media (prefers-color-scheme: dark) {
  .date-range { --ra-sat: #8bc4ff; }
  .date-range-panel { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
}
/* ── スマホで、押した場所に合わせて出る小窓 ──────────────────────
   どれも「ボタンの左端にそろえて、決まった幅で開く」作りになっていた。
   ボタンが画面の右寄りにあると、小窓が画面の外にはみ出して押せなくなる。
   狭い画面では、どれも画面の下に敷く形にそろえる（カレンダーと同じ）。 */
@media (max-width: 640px) {
  .help-tip-content,
  .ra-filter-popover,
  .facility-popover-panel,
  .entry-ms-list {
    position: fixed; top: auto; left: var(--space-2); right: var(--space-2);
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    width: auto; min-width: 0; max-width: none;
    max-height: 70vh; overflow-y: auto; margin-top: 0;
  }
  /* グラフの吹き出しは、画面の幅で折り返す（1行のままだと右へ抜ける）。 */
  .chart-tooltip { white-space: normal; max-width: calc(100vw - 2 * var(--space-4)); }
}

@media (max-width: 640px) {
  /* スマホでは、押したボタンに合わせて置くと画面の外へはみ出す（ボタンが右に
     あると、カレンダーの左半分が画面の左に切れて日付が押せなくなる）。
     画面の下に敷く形にして、必ず全部が見えるようにする。 */
  .date-range-panel {
    position: fixed; top: auto; left: var(--space-2); right: var(--space-2);
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none; max-height: 82vh; overflow-y: auto;
  }
  /* 画面の下に敷くと、よく使う「今月」「直近30日」が下に隠れる。上に出す。 */
  .date-range-panel { display: flex; flex-direction: column; }
  .date-range-presets {
    order: -1; margin-top: 0; padding-top: 0; border-top: 0;
    margin-bottom: var(--space-3); padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }
  .date-range-body { flex-direction: column; gap: var(--space-3); }
  .date-range-month table { width: 100%; }
  .date-range-month th, .date-range-month td button { width: auto; }
  .date-range-month td { padding: 2px; }
  .date-range-month td button { width: 100%; height: 38px; }
}
/* スマホ幅では .filter-row のボタンを横いっぱいに広げる決まりがあり、そのままだと
   カレンダーの「‹ ›」まで伸びて説明文が縦1文字ずつに折れてしまう。中だけ戻す。 */
.date-range-panel button { width: auto; }
.date-range-panel .date-range-nav { width: 30px; height: 30px; flex: none; }
.date-range-panel .date-range-presets button { flex: none; }

/* ---- 部屋タイプ・プランの「販売中／販売終了」 ----
   売らなくなったものを消すと、過去の料金や予約データとの紐づけまで消える。
   行は残したまま、ここで見るものを切り替える。 */
/* 基本情報の中に入れた「掲載順位を見るエリア」。室数・都道府県と同じ枠の中で、
   少し引いて見えるようにする（取りに行く先が同じ施設ページなので1か所にまとめた）。 */
.spec-basic-areas { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }
.spec-basic-areas-head { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.spec-basic-areas .area-url-list { margin: 0; }

.sale-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
/* ── 並び替えの見方（部屋タイプ設定・プラン設定の「並び替え」） ──
   並べ替えだけに集中できるよう、名前とつまみ以外は畳む。畳むのは見た目だけで、
   入力そのものはフォームに残るので、ここで保存しても他の値は消えない
   （「販売中／販売終了／すべて」の切り替えと同じ考え方）。 */
.is-sort-view .rate-room-add,
.is-sort-view .rate-plan-add { display: none; }
.is-sort-view .rate-plan-table td:not(.reorder-cell):not(.rate-row-name),
.is-sort-view .rate-plan-table thead th:nth-child(n+3),
.is-sort-view .rate-room-table td:not(.reorder-cell):not(.rate-row-name),
.is-sort-view .rate-room-table thead th:nth-child(n+3) { display: none; }
/* 名前は読むためのものなので、見出しと枠線を消して一覧らしく見せる
   （直すこともできるよう、入力欄のままにしておく。触れば枠が出る）。 */
.is-sort-view .rate-row-name .field-label { display: none; }
.is-sort-view .rate-row-name input[type="text"] {
  border-color: transparent; background: transparent; font-weight: 600;
  padding-left: 0; box-shadow: none;
}
.is-sort-view .rate-row-name input[type="text"]:hover { border-color: var(--color-border); }
.is-sort-view .rate-row-name input[type="text"]:focus {
  border-color: var(--color-primary); background: var(--color-surface); padding-left: var(--space-2);
}
/* ↑↓は縦積み（表の狭い列用）が既定なので、並び替えの見方では横に並べて1行に収める。 */
.is-sort-view .reorder-cell { flex-direction: row; gap: 2px; align-items: center; white-space: nowrap; }
.is-sort-view .rate-plan-table td.reorder-cell,
.is-sort-view .rate-room-table td.reorder-cell { width: 1%; }
.is-sort-view .reorder-cell button { width: auto; }
/* 名前は残りの幅いっぱいに。 */
.is-sort-view .rate-row-name { width: 100%; }
.is-sort-view .rate-plan-table td.rate-row-name input[type="text"] { width: 100%; }
/* ふだんの見方では、並べ替えの道具は出さない（「並び替え」へ寄せた）。 */
[data-rate-panel]:not(.is-sort-view) .drag-grip,
[data-rate-panel]:not(.is-sort-view) .reorder-cell,
[data-rate-panel]:not(.is-sort-view) .rate-plan-table thead th:first-child,
[data-rate-panel]:not(.is-sort-view) .rate-room-table thead th:first-child { display: none; }
.sale-filter button { font-size: var(--text-sm); }
.sale-filter button.is-active {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.sale-filter button.is-active:hover { background: var(--color-primary-hover); color: #fff; }
.sale-count {
  margin-left: var(--space-1); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); opacity: .85;
}
[data-sale-row][hidden] { display: none !important; }
.sale-check { white-space: nowrap; }
/* 販売終了の行は、ひと目で分かるように薄く出す（読めなくはしない）。 */
tr.is-ended > td, tr.is-ended > th { opacity: .62; }

/* ---- リサーチくんの比較表 ----
   施設ごとに1行だと、1行が画面の高さを超えて隣の施設と見比べられなかった。
   項目を縦・施設を横に並べ、項目名の列と施設名の行を貼り付けたままにする。
   （.data-table の overflow: hidden と border-collapse: collapse のままでは
   貼り付けが効かないので、この表だけ外す。料金表と同じ直し方。） */
table.research-grid {
  border-collapse: separate; border-spacing: 0; overflow: visible; width: auto;
}
/* 中の小さな表(キャンセルポリシー・子供料金)まで同じ指定が効いてしまうと、
   幅や線がおかしくなる。この表の直接のマスだけを指す。 */
table.research-grid > thead > tr > th,
table.research-grid > tbody > tr > th,
table.research-grid > tbody > tr > td {
  border: 0; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  vertical-align: top; padding: var(--space-2) var(--space-3); font-size: var(--text-sm);
}
table.research-grid > thead > tr > *:first-child,
table.research-grid > tbody > tr > *:first-child { border-left: 1px solid var(--color-border); }
table.research-grid > thead > tr > th { border-top: 1px solid var(--color-border); }
table.research-grid > thead > tr > th {
  position: sticky; top: 0; z-index: 3; background: var(--color-surface-raised); text-align: left;
}
table.research-grid .research-item {
  position: sticky; left: 0; z-index: 2; background: var(--color-surface-raised);
  width: 11em; min-width: 11em; color: var(--color-text); font-weight: 700;
}
table.research-grid > thead > tr > th.research-item-head { z-index: 4; }
/* 施設の列は、中身の多い少ないにかかわらず同じ幅にする。内容に合わせて伸ばすと
   施設ごとに225〜368pxとばらつき、横に並べて見比べるのに目が滑る。 */
table.research-grid .research-facility,
table.research-grid > tbody > tr > td {
  width: 17em; min-width: 17em; max-width: 17em;
}
table.research-grid > tbody > tr > td { background: var(--color-surface); }
/* 長い施設名やURLで列が広がらないよう、はみ出す分は折り返す。 */
table.research-grid .research-facility, table.research-grid .research-text {
  overflow-wrap: anywhere;
}
/* 自社の列は見比べるときの基準なので、色を変えて、横に送っても残るようにする
   （貼り付ける位置＝項目名の列の幅は、画面側で測って入れる）。 */
table.research-grid .is-own {
  background: var(--color-primary-subtle);
  position: sticky; left: var(--research-own-left, 11em); z-index: 2;
}
table.research-grid > thead > tr > th.is-own { z-index: 4; }
.research-facility-name { font-weight: 700; display: flex; align-items: center; gap: var(--space-2); }
.research-facility-links { margin-top: 2px; }
.research-facility-links a { margin-right: var(--space-2); }
.research-facility-foot {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2);
}
.research-facility-foot form { display: inline-flex; }
/* 長い内容は7行で畳む。押すと全文。 */
.research-text {
  white-space: pre-wrap; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.research-text.is-clipped { cursor: pointer; }
.research-text.is-open { display: block; -webkit-line-clamp: none; }
.research-more {
  margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--color-primary); font-size: var(--text-xs); font-weight: 600;
}
.research-more:hover { text-decoration: underline; background: none; }

/* ---- タブの下に置く、そのタブぶんの操作 ----
   以前はタブの上に全機能のボタンが並び、いま見ている画面と関係のないものまで
   出ていた。タブごとに、その画面で使うものだけを並べる。 */
.tab-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4);
}
/* タブのすぐ下に置くので、タブ側の下の余白はその分だけ詰める。 */
.tab-strip + .tab-actions { margin-top: calc(var(--space-3) * -1); }
.tab-actions:empty { display: none; }
.tab-actions form { display: inline-flex; }
.tab-actions-note { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- リサーチくんのキャンセルポリシー ----
   「2日前 23:59 まで キャンセル料 無料 前日 00:00 から …」と1本の文で届くので、
   いつ・いくらかかるのかを縦に並べて出す（読み取れない書き方のときは元の文）。 */
/* キャンセルポリシー・子供料金の小さな表。どの施設でも「区分」と「料金」の幅を
   そろえる。中身に合わせると施設ごとに列の位置がずれて、上下に見比べられない。 */
table.cancel-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
table.cancel-table th { width: 50%; }
table.cancel-table td { width: 50%; }
table.cancel-table th, table.cancel-table td {
  padding: 2px 0; border: 0; font-size: var(--text-sm); vertical-align: top;
  font-weight: 400; text-align: left;
  /* 枠から出ないよう、長い区分名もそのマスの中で折り返す。 */
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
/* 時期・区分の方を折り返し、料金は折らずに右へ寄せる（「宿泊料金の / 100%」と
   割れると読みにくいため）。料金の列は中身の幅だけ取る。 */
/* 時期・区分の列に余った幅を全部持たせ、料金は中身のぶんだけ右に置く。
   こうしないと料金の列が幅を取りすぎて、時期が2〜3文字ずつ折れてしまう。 */
table.cancel-table th {
  color: var(--color-text-muted); padding-right: var(--space-3); width: 100%;
}
table.cancel-table td {
  text-align: right; font-weight: 700; white-space: normal; overflow-wrap: anywhere;
  font-size: var(--text-xs);
}
table.cancel-table td.is-free { color: var(--color-success); }
/* 受け入れていない区分は、料金と同じ強さで出すと読み違えるので薄くする。 */
table.cancel-table td.is-none { color: var(--color-text-muted); font-weight: 600; }
.research-time { font-weight: 700; font-variant-numeric: tabular-nums; }
table.cancel-table tr + tr th, table.cancel-table tr + tr td { border-top: 1px dotted var(--color-border); }

/* ---- 施設仕様書の「基本情報」 ----
   室数・都道府県・エリア・保存・取り込みを1段に並べていたら、見出しの付く欄と
   付かない欄が混ざって下端がそろわず、どれが今の値でどれが操作なのか分からなく
   なっていた。上の段に「登録する値」、下の段に「押すもの」を置く。 */
.spec-basic { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.spec-basic-fields {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-5);
}
.spec-basic-field {
  display: flex; flex-direction: column; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); white-space: nowrap;
}
/* 値のほうは見出しより大きく・濃く出して、どこが中身か一目で分かるようにする。 */
.spec-basic-value {
  display: flex; align-items: center; gap: var(--space-1);
  min-height: var(--tap); font-size: var(--text-sm); font-weight: 400; color: var(--color-text);
}
/* チェックは見出しを持たないので、他の欄の「値」の高さに合わせて下端をそろえる。 */
.spec-basic-field--check { justify-content: flex-end; }
.spec-basic-field--check .inline-check { min-height: var(--tap); display: flex; align-items: center; }
.spec-basic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
/* 取り込みは「欄に入れるだけ」で保存ではない。区切りを入れて保存から離す。 */
.spec-basic-fetch {
  display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding-left: var(--space-3); border-left: 1px solid var(--color-border);
}
/* 読み取った値が入った欄は、保存前だと分かるよう色を付ける。 */
.filter-row input.is-filled, .filter-row select.is-filled,
.spec-basic input.is-filled, .spec-basic select.is-filled {
  border-color: var(--color-primary); background: var(--color-primary-subtle);
}

/* 宿側の連絡先。何人でも並べられるので、欄は横幅いっぱいに使う。 */
.owner-contact-table td { padding: var(--space-1) var(--space-2); }
.owner-contact-table input { width: 100%; min-width: 8em; }
.owner-contact-table td:nth-child(4) input { min-width: 12em; }

/* 予算進捗の「上期・下期・年間」。年間の行は合計なので太く出す。 */
.budget-period-table { width: auto; min-width: 640px; margin-bottom: var(--space-4); }
.budget-period-table th, .budget-period-table td {
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}
.budget-period-table thead th { text-align: right; }
.budget-period-table tbody th { text-align: left; font-weight: 700; }
.budget-period-table tbody th .cell-sub { display: block; font-weight: 400; }
.budget-period-table tr.is-year td, .budget-period-table tr.is-year th {
  font-weight: 700; background: var(--color-surface-raised);
}
.budget-period-table .kpi-unit { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: 2px; }

/* 料金表：取込ファイルに書き込んだ結果 */
.rate-fill-result { margin: var(--space-2, 8px) 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.rate-fill-result p { margin: 0; }
.rate-fill-result.is-bad { color: var(--color-danger); }

/* ---- 在庫・料金カレンダー: 上に貼り付く行でも、左の見出しを手前に置く ----
   「全体／残室」「販室」の行は、下へスクロールしても見えるよう行ごと貼り付けて
   いる。その行の中では日付のマスも同じ重なり順になるため、横に送ると数字が
   左の見出しの上に重なって見えていた（見出しがあとから描かれる数字に負ける）。
   見出しの2列だけを手前に上げて、必ず数字を隠すようにする。 */
.gantt-calendar tr.gantt-sticky-1 > .gantt-col-channel,
.gantt-calendar tr.gantt-sticky-1 > .gantt-col-label,
.gantt-calendar tr.gantt-sticky-2 > .gantt-col-channel,
.gantt-calendar tr.gantt-sticky-2 > .gantt-col-label { z-index: 4; }
/* 見出しの角(左上)は、縦にも横にも固定しているのでさらに手前。 */
.gantt-calendar th.gantt-corner { z-index: 6; }

/* 料金表の「縛りランク」。見出しを欄の上に積むと、この欄だけ背が高くなって
   同じ段のボタン(取込ファイルに書き込む・ランク設定など)と下端がずれるので、
   「1名縛り［A1から］」のように横に並べてボタンと同じ高さにする。 */
.filter-row .rate-lock label.ra-inline-label {
  flex-direction: row; align-items: center; gap: var(--space-1); white-space: nowrap;
}

/* ---- いま登録しているエリア（掲載順位） ----
   サイト名・エリア・人数・ボタン・説明を横一列に流すと一続きの文に見えたので、
   サイトごとに1行ずつ縦に並べ、ボタンはその下に置く。 */
.area-url-now { margin-bottom: var(--space-4); }
.area-url-list {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3);
}
.area-url-site { font-weight: 700; font-size: var(--text-sm); }
.area-url-areas {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}
/* 人数はエリア名と続けて読むものではないので、囲って別物だと分かるようにする。 */
.area-url-areas .pill { background: var(--color-surface-raised); color: var(--color-text-muted); }
.area-url-auto { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* 基本情報の「エリア」は、選んだエリアをそのまま出すだけ。 */
.area-now { font-weight: 700; }
.area-now.is-empty { font-weight: 400; color: var(--color-text-muted); }

/* クチコミ取込の画面で、どのサイトのURLが入っているかを並べる小さな印。 */
.review-url-state { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-3); }

/* ---- クチコミ一覧の表 ----
   列が多く、横幅が足りないと対象名や投稿日が1文字ずつ縦に折れて読めなくなる。
   短い列は折り返さず、本文だけを折り返す(表ごと横スクロールできる作り)。 */
.review-list-table th, .review-list-table td { white-space: nowrap; vertical-align: top; }
/* 対象名は横幅が足りないと1文字ずつ縦に折れる。表ごと横スクロールできるので、
   読める幅を確保してから折り返す。 */
.review-list-table th:first-child, .review-list-table td:first-child {
  min-width: 11em; max-width: 16em; white-space: normal;
}
.review-list-table td:last-child { white-space: pre-wrap; min-width: 22em; }

/* ランクの区間ごとの「B〜R（+300〜+5,100円）」。欄の下に1行で出す。 */
.rate-segment .rate-segment-range { flex-basis: 100%; margin: 0; font-variant-numeric: tabular-nums; }
#rate-segment-total { margin: 0 0 var(--space-2); font-variant-numeric: tabular-nums; }

/* ---- マニュアル ----
   記事の一覧はカードで並べる。表にすると本文の抜粋が1行に潰れて、
   探している言葉がどこに当たったのか読めないため。 */
.manual-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.manual-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.manual-card-title { font-size: var(--text-md); font-weight: 700; text-decoration: none; }
.manual-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
}
/* 分類は色を持たない印なので、囲いだけ付けて本文と区別する。 */
.manual-card-meta .pill:not([class*="pill-"]) {
  background: var(--color-surface-raised); color: var(--color-text-muted);
}
.manual-card-hit {
  margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted);
  background: var(--color-surface-raised); border-radius: var(--radius-md); padding: var(--space-2);
}
.manual-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.manual-search-field input { min-width: 18em; }

/* 本文。書いたままの改行で出す(書式を覚えなくても読める形にするため)。 */
.manual-body { max-width: 52em; }
.manual-section + .manual-section { margin-top: var(--space-5); }
.manual-section-title { font-size: var(--text-md); margin: 0 0 var(--space-2); }
.manual-anchor { color: inherit; text-decoration: none; }
.manual-anchor:hover { text-decoration: underline; }
.manual-section-body { white-space: pre-wrap; line-height: 1.8; }
.manual-editor { width: 100%; font-family: inherit; line-height: 1.8; }

/* マニュアルの本文に入れる画像。手順書は「どのボタンを押すか」が肝なので、
   小さすぎると役に立たない。横幅いっぱいまで使い、押すと原寸で開く。 */
.manual-figure { margin: var(--space-3) 0; }
.manual-figure img {
  max-width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  display: block;
}
.manual-mark {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs);
  background: var(--color-surface-raised); border-radius: var(--radius-sm); padding: 1px 6px;
}
/* 書くときに、どの番号がどの画像かを見ながら選べるようにする。 */
.manual-image-picker { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0; }
.manual-image-picker figure { margin: 0; width: 150px; }
.manual-image-picker img {
  width: 100%; height: 100px; object-fit: cover;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.manual-image-picker figcaption { margin-top: 4px; text-align: center; }

/* 使い方パネルから、詳しいマニュアルへの案内。 */
.guide-manual-link { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-4) 0 0; }

/* ---- 料金カレンダーの「変更履歴」ボタンのアイコン ----
   マス1つずつに時計のSVGを丸ごと置いていたら、マスが8,840ある施設で
   3,042個ぶん・12,168本の線になり、画面の要素が約33,700個まで膨らんでいた
   (ページの38%がこのボタン)。しかも普段は opacity:0 で見えない。
   絵はCSSで1回だけ定義して、マスには空のボタンだけを置く。 */
.cell-history-btn::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--icon-clock) center / contain no-repeat;
  mask: var(--icon-clock) center / contain no-repeat;
}
:root {
  --icon-clock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='8'/><path d='M12 9v4l3 2'/><path d='M5 3 3 5'/><path d='M19 3l2 2'/></svg>");
}

/* 期間カレンダーの月見出し(年・月のプルダウン)。ふだんは見出しの文字と同じに見せ、
   カーソルを合わせたときだけ枠と▼を出して「選べる」と分かるようにする。
   ▼の分の余白は常に取っておき、合わせた瞬間に見出しの幅が変わらないようにする。 */
.date-range-month-name { display: flex; justify-content: center; gap: 2px; }
.date-range-panel select.date-range-jump {
  width: auto; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 2px 16px 2px 4px;
  font: inherit; font-weight: 700; color: inherit; cursor: pointer;
  background: transparent no-repeat right 4px center / 8px 5px;
  border: 1px solid transparent; border-radius: 4px; box-shadow: none;
  appearance: none; -webkit-appearance: none;
  font-variant-numeric: tabular-nums;
}
.date-range-panel select.date-range-jump:hover,
.date-range-panel select.date-range-jump:focus-visible {
  border-color: var(--color-primary); color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23888'/%3E%3C/svg%3E");
}

/* ---- 今日やること ----
   31施設ぶんを1枚に並べるので、1件を1行で読み切れる形にする。
   急ぎ(まとまって取れていない)だけ左に色を付けて、目で拾えるようにする。 */
.todo-group + .todo-group { margin-top: var(--space-5); }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.todo-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.todo-item.is-warn { border-left-color: var(--color-danger); }
.todo-title { font-weight: 600; text-decoration: none; }

/* トップに出す「今日やること」。施設のカードより上に置くので、詰めて出す。 */
.home-todo { margin-bottom: var(--space-5); }
.home-todo .home-section-title { border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-2); }
.home-todo .home-section-title { display: flex; align-items: center; gap: var(--space-3); }
.home-todo .todo-item { padding: var(--space-2) var(--space-3); }
.home-todo .todo-item .cell-sub { margin-right: var(--space-2); }

/* 料金の自動取得: 曜日ごとの決め事。取得しない曜日は薄くして、設定しても
   動かないことが分かるようにする。 */
.price-auto-days-detail { margin-top: var(--space-3); }
.price-day-table { max-width: 620px; }
.price-day-table th { white-space: nowrap; }
.price-day-table tr.is-off { opacity: 0.5; }
.price-day-table tr.is-off .cell-sub { display: block; }

/* スケジュール / タスク管理 --------------------------------------------- */
.cal-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4); }
.week-spacer { flex-grow: 1; }
.cal-switch { display: inline-flex; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); overflow: hidden; }
.cal-tab { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; color: var(--color-text); background: var(--color-surface); }
.cal-tab + .cal-tab { border-left: 1px solid var(--color-border-strong); }
.cal-tab.is-active { background: var(--color-primary); color: #fff6f0; }
.cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  color: var(--color-text); text-decoration: none; background: var(--color-surface); }
.cal-nav:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cal-label { font-size: var(--text-lg); font-weight: 700; min-width: 8em; }
.cal-filter { display: inline-flex; gap: var(--space-2); align-items: flex-start; }
.primary-link { display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); background: var(--color-primary); color: #fff6f0;
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.primary-link:hover { background: var(--color-primary-hover); }

.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.cal-weekday { padding: var(--space-2); text-align: center; font-size: var(--text-xs);
  font-weight: 700; color: var(--color-text-muted); }
.cal-weekday.is-sat { color: #3b6ea8; }
.cal-weekday.is-sun { color: var(--color-danger); }
.cal-grid { background: var(--color-border); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); overflow: hidden; }
.cal-day { background: var(--color-surface); padding: var(--space-2); min-height: 104px;
  display: flex; flex-direction: column; gap: 3px; }
.cal-grid--week .cal-day { min-height: 240px; }
.cal-day.is-other { background: var(--color-surface-raised); }
.cal-day.is-other .cal-day-num { color: var(--color-text-subtle); }
.cal-day.is-today { background: var(--color-row-hover); box-shadow: inset 0 0 0 2px var(--color-primary); }
.cal-day-head { display: flex; align-items: baseline; gap: var(--space-1); }
.cal-day-num { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-day.is-sat .cal-day-num { color: #3b6ea8; }
.cal-day.is-sun .cal-day-num { color: var(--color-danger); }
.cal-day.is-today .cal-day-num { color: var(--color-primary); }
.cal-day-add { margin-left: auto; color: var(--color-text-subtle); text-decoration: none;
  font-size: var(--text-md); line-height: 1; opacity: 0; }
.cal-day:hover .cal-day-add { opacity: 1; }
.cal-day-add:hover { color: var(--color-primary); }
.cal-event { border-radius: 4px; padding: 2px var(--space-2); font-size: var(--text-xs);
  line-height: 1.35; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-1);
  border-left: 3px solid; }
/* 自分が出る予定と、ほかの人の予定の見分け。
   **色の濃さで分けない。** 以前は自分=薄い色つき(#faebe4)・ほかの人=薄いグレー
   (#fcf8f1)で、並ぶとほとんど同じに見えていた（利用者から「見づらい」との指摘、
   2026-09-30）。色の見え方は人によって違うので、
   **「塗ってあるのが自分・枠だけがほかの人」**という形そのもので分ける。
   テーマを変えても、暗い配色でも、同じように見分けられる。 */
.cal-event--mine {
  /* 各テーマの --color-primary-subtle は淡すぎて、白地の中で目立たなかった
     （青テーマで #e4edf9）。テーマ色を混ぜて、どの配色でも同じ濃さで塗る。
     1行目は color-mix が使えない環境向けの控え。 */
  background: var(--color-primary-subtle);
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
  border: 1px solid var(--color-primary);
  border-left-width: 6px;
  font-weight: 600;
}
.cal-event--mine .cal-event-time { color: var(--color-primary); }
.cal-event--other {
  background: transparent;
  border: 1px dashed var(--color-border-strong);
  border-left-width: 1px;
  color: var(--color-text-muted);
}
/* 中の名札(種類・担当者・施設)も、自分のぶんだけ濃く出す。全部同じ濃さだと、
   予定が並んだときにどれが自分のものか探すことになる。 */
.cal-event--other .cal-chip, .cal-event--other .cal-event-place { opacity: 0.72; }
.cal-event--other .cal-event-time { color: var(--color-text-muted); font-weight: 600; }
.cal-event--other .cal-event-title { color: var(--color-text-muted); }
.cal-event-time { font-weight: 700; }
.cal-legend { display: flex; gap: var(--space-4); margin-top: var(--space-3); }
.cal-legend-dot { display: inline-block; width: 16px; height: 12px; border-radius: 3px;
  margin-right: var(--space-1); vertical-align: -1px; box-sizing: border-box; }
/* 凡例も、カレンダーの見た目と同じにする（塗り／枠だけ）。 */
.cal-legend-dot--mine { background: var(--color-primary-subtle);
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
  border: 1px solid var(--color-primary); border-left-width: 5px; }
.cal-legend-dot--other { background: transparent; border: 1px dashed var(--color-border-strong); }
.cal-event-title { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-grid--week .cal-event-title { white-space: normal; }
/* 件名はリンク(押すと直す画面へ)。ふだんは今までどおりの見た目にして、押せることは
   カーソルと下線で示す。リンクの色をそのまま出すと、カレンダーが青い文字だらけになる。 */
a.cal-event-title { color: inherit; text-decoration: none; }
a.cal-event-title:hover { text-decoration: underline; }
.cal-event[data-edit-url] { cursor: pointer; }
.cal-event-del { background: none; border: none; color: var(--color-text-subtle); cursor: pointer;
  padding: 0 2px; font-size: var(--text-sm); line-height: 1; opacity: 0; }
.cal-event:hover .cal-event-del { opacity: 1; }
.cal-event-del:hover { color: var(--color-danger); }

.help-section { background: var(--color-primary-subtle); border-color: var(--color-border-strong); }

.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.task-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border); }
.task-item:last-child { border-bottom: none; }
.task-item--help { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-2); }
.task-item.is-overdue .task-title { color: var(--color-danger); }
.task-body { flex-grow: 1; min-width: 0; }
.task-title { font-size: var(--text-base); font-weight: 600; }
/* 完了のチェック。ボタンの共通指定(padding・最小の高さ)に引っぱられて縦長に
   なるので、ここで打ち消して正方形にする。 */
.task-item .inline-form { display: flex; align-items: center; }
.task-check { width: 20px; height: 20px; min-width: 0; min-height: 0; flex-shrink: 0;
  box-sizing: border-box; border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer;
  padding: 0; line-height: 1; }
.task-check:hover { border-color: var(--color-primary); background: var(--color-primary-subtle); }
/* 「助けを呼ぶ」が2行に折れると行の高さが揃わない。 */
.task-item button { white-space: nowrap; }
.task-item .small { min-width: 6.5em; }
.task-item .icon-button { min-width: 0; }
.task-tag { flex-shrink: 0; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs);
  font-weight: 600; background: var(--color-surface-raised); color: var(--color-text-muted); }
.task-due--overdue { background: var(--color-danger-subtle); color: var(--color-danger); }
.task-due--today { background: var(--color-danger-subtle); color: var(--color-danger); }
.task-due--soon { background: var(--color-warning-subtle); color: var(--color-warning); }

.schedule-columns { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-4); align-items: start; }
.task-add-form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-4);
  padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.task-add-form input[type="text"] { flex-grow: 1; min-width: 180px; }
.offset-field { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.offset-field input { width: 5em; }

.load-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.load-row { display: flex; align-items: center; gap: var(--space-3); }
.load-name { width: 7em; flex-shrink: 0; font-size: var(--text-sm); font-weight: 600; }
.load-spacer { flex-grow: 1; }
.load-bar { flex-grow: 1; height: 16px; background: var(--color-surface-raised); border-radius: var(--radius-sm);
  display: flex; overflow: hidden; }
.load-seg { display: block; height: 100%; }
.load-seg--overdue { background: var(--color-danger); }
.load-seg--week { background: var(--color-warning); }
.load-seg--later { background: var(--color-border-strong); }
.load-count { width: 4.5em; flex-shrink: 0; text-align: right; font-size: var(--text-sm); color: var(--color-text-muted); }
.load-legend { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
.load-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: var(--space-1); }

.template-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.template-item { display: flex; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-3); background: var(--color-surface); }
.template-body { flex-grow: 1; min-width: 0; cursor: pointer; }
.template-body .task-title { display: block; }
.template-help { flex-shrink: 0; font-size: var(--text-sm); color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: var(--space-2); }
.member-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* .form-grid label は縦積みなので、チップは横並びに戻す。 */
.form-grid .member-picker label.member-chip,
.form-grid label.member-chip,
.member-chip { display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 400;
  color: var(--color-text); background: var(--color-surface); cursor: pointer; }
.member-chip input { margin: 0; }
/* 単独で置く「終日」は、横いっぱいに伸ばさない。 */
.form-grid > div > label.member-chip { width: fit-content; }
.form-label { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.form-label small { font-weight: 400; }
/* 参加者と施設を選ぶ枠。施設は30件を超えるので、枠の中だけを高さで区切ってスクロール
   させる。ページ全体が縦に伸びると、下の「保存」まで遠くなるため。 */
.pick-box { display: flex; flex-wrap: wrap; gap: var(--space-2); max-height: 15rem;
  overflow-y: auto; padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); }
/* 所属ごとのかたまり。所属の行(まとめて選ぶ)を頭に置き、その下にその所属の人を並べる。 */
.pick-group { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center; }
.pick-group + .pick-group { margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border); }
.member-chip--team { font-weight: 600; background: var(--color-surface-raised);
  border-color: var(--color-border-strong); }
.kind-section.is-off { opacity: .55; }

@media (max-width: 1100px) {
  .schedule-columns { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* 狭い画面では、月のマス目を並べても読めない。曜日の見出しを畳んで
     2列にし、日付を大きめに出す。 */
  .cal-weekdays { display: none; }
  .cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-day { min-height: 84px; }
  .cal-grid--week .cal-day { min-height: 120px; }
  .cal-day-add, .cal-event-del { opacity: 1; }
}

/* ひとりぶんの「実績と貢献」。トップとエージェントマネージャーで同じ部品を使う。 */
.kpi-link { display: inline-block; margin-top: var(--space-2); font-size: var(--text-xs); }
.person-columns { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-4); align-items: start; }
.person-event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.person-event { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.person-event:last-child { border-bottom: none; }
.person-event.is-today { font-weight: 600; }
.person-event-date { width: 3.5em; flex-shrink: 0; color: var(--color-text-muted); }
.person-event.is-today .person-event-date { color: var(--color-primary); }
.person-event-time { width: 3.5em; flex-shrink: 0; color: var(--color-text-muted); }
.person-event-title { flex-grow: 1; min-width: 0; }
.load-name--wide { width: 12em; }
.load-seg--sales { background: var(--color-primary); }

@media (max-width: 1100px) {
  .person-columns { grid-template-columns: 1fr; }
}

/* 入力の誤りを、いつもの帯より強く見せる。 */
.flash-error { border-color: var(--color-danger); color: var(--color-danger); }

/* 人ごとの溜まり具合。棒の長さ＝重さの合計、色の内訳＝締切の近さ。 */
.load-track { flex-grow: 1; height: 18px; background: var(--color-surface-raised);
  border-radius: var(--radius-sm); overflow: hidden; }
.load-bar-outer { display: flex; height: 100%; border-radius: var(--radius-sm); overflow: hidden; }
.load-seg--today { background: var(--color-primary); }
.load-seg--soon { background: var(--color-warning); }
.load-row.is-empty .load-name { color: var(--color-text-subtle); }
.load-figures { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
  min-width: 16em; justify-content: flex-end; }
.load-figures .task-tag { font-size: var(--text-xs); }

/* 選択肢の多いプルダウンを、押すと開いて打つと絞り込める1つの欄にする。
   もとの <select> は隠して残してあるので、送信の形は変わらない。 */
.combo { position: relative; }
.combo-input { width: 100%; }
.combo-panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  max-height: 264px; overflow-y: auto; background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: var(--space-1); }
.combo-head { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-xs);
  font-weight: 700; color: var(--color-text-subtle); }
.combo-option { padding: var(--space-2) var(--space-3); font-size: var(--text-sm);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); }
.combo-option.is-active { background: var(--color-row-hover); }
.combo-option.is-selected { font-weight: 700; color: var(--color-primary); }
.combo-empty { padding: var(--space-3); font-size: var(--text-sm); color: var(--color-text-subtle); }

/* 左のメニューは暗い配色。中身の一覧は明るいままだと浮くので合わせる。 */
.app-sidebar .combo-input { background: var(--sidebar-hover); color: var(--sidebar-text-strong);
  border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.app-sidebar .combo-input::placeholder { color: var(--sidebar-label); }
.app-sidebar .combo-panel { background: var(--sidebar-bg); border-color: var(--sidebar-border); }
.app-sidebar .combo-option { color: var(--sidebar-text-strong); }
.app-sidebar .combo-option.is-active { background: var(--sidebar-hover); }
.app-sidebar .combo-option.is-selected { color: var(--sidebar-active-text);
  background: var(--sidebar-active-bg); }
/* 担当施設とその他を見分けられるようにする。担当をはっきり、その他は落とす。
   一覧が長いので、色の濃さが同じだとどこまでが担当か分からなくなる。 */
.app-sidebar .combo-option.facility-option-other { color: var(--sidebar-label); }
.app-sidebar .combo-option.facility-option-other.is-active { color: var(--sidebar-text-strong); }
.app-sidebar .combo-head { color: var(--sidebar-text-strong); font-size: var(--text-xs);
  letter-spacing: .06em; padding: var(--space-3) var(--space-3) var(--space-1);
  border-top: 1px solid var(--sidebar-border); margin-top: var(--space-1); }
.app-sidebar .combo-head:first-child { border-top: none; margin-top: 0; padding-top: var(--space-2); }
/* 担当施設の見出しには色を差して、上下の区切りを分かりやすくする。 */
.app-sidebar .combo-panel .combo-head + .combo-option { margin-top: 2px; }

/* カレンダーの予定に出す、種類・担当・施設・会議URL。 */
.cal-event { flex-direction: column; align-items: stretch; gap: 2px; }
.cal-event-head { display: flex; align-items: baseline; gap: var(--space-1); }
.cal-event-meta { display: flex; flex-wrap: wrap; gap: 3px; }
.cal-chip { font-size: 10px; line-height: 1.5; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-chip--who { color: var(--color-text); }
.cal-chip--place { color: var(--color-success); border-color: var(--color-success-subtle); }
.cal-chip--link { color: var(--color-primary); border-color: var(--color-primary);
  text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.cal-chip--link:hover { background: var(--color-primary); color: #fff6f0; }
/* 月表示は狭いので、種類と会議URLだけにして高さを抑える。 */
.cal-grid--month .cal-chip--who, .cal-grid--month .cal-chip--place { display: none; }
.cal-grid--day .cal-day { min-height: 420px; }
.cal-grid--day .cal-event { padding: var(--space-3); }
.cal-grid--day .cal-event-title, .cal-grid--week .cal-event-title { white-space: normal; }
.cal-grid--day .cal-chip { font-size: var(--text-xs); padding: 1px var(--space-2); }

/* 日表示は1日ぶんなので、7列のままだと右が丸ごと空く。 */
.cal-grid--day { grid-template-columns: minmax(0, 1fr); }
/* 週・日は列が狭い。時刻と件名を同じ行に置くと、件名が1文字ずつ折れて読めない。 */
.cal-grid--week .cal-event-head,
.cal-grid--day .cal-event-head { flex-direction: column; align-items: flex-start; gap: 0; position: relative; }
.cal-grid--week .cal-event-head .inline-form,
.cal-grid--day .cal-event-head .inline-form { position: absolute; top: 0; right: 0; }
.cal-grid--week .cal-event-title,
.cal-grid--day .cal-event-title { font-weight: 600; padding-right: var(--space-4); }
.cal-grid--day .cal-event-head { flex-direction: row; align-items: baseline; gap: var(--space-2); }
/* 絞り込みの欄が広がりすぎないようにする。 */
.cal-filter .combo { min-width: 12em; max-width: 16em; }
.cal-filter select { max-width: 15em; }

/* 予定の時間。打ち込まずに、押して決められるようにする。 */
.time-block { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.time-quick { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.time-quick-label { width: 6em; flex-shrink: 0; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.time-chip { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text); cursor: pointer; font-family: inherit;
  min-width: 0; min-height: 0; white-space: nowrap; }
.time-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.time-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff6f0; font-weight: 600; }
.time-exact { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.time-exact label { display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }

/* 料金カレンダーの反映先(ねっぱんのカレンダー名)を縦に並べる。 */
.rc-sync-list { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.rc-sync-item { display: flex; gap: var(--space-1); align-items: center; width: 100%; }
.rc-sync-item input { flex: 1; min-width: 0; }
.add-form .rc-sync-list { min-width: 16em; }


/* ── 紐づけボード（全施設 × 機能） ────────────────────────────────── */
/* 「その機能がまだ使えない」マスを赤で塗る。数字が出ないのを不具合だと思われる前に、
   どこが足りないのかをマスの中に書いておく（色だけだと理由が分からないため）。 */
.board-table td, .board-table th { vertical-align: top; }
.board-cell { white-space: normal; }
.board-cell.is-alert { background: var(--color-danger-subtle); }
.board-mark { display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); line-height: 1.4; }
.board-mark--ok { color: var(--color-success); }
/* 赤い理由は、押すと直す場所（施設仕様書のそのタブ）が開くリンク。理由が2つ付く
   マスがあるので、縦に積む。リンクの青は使わず、赤のまま押せることを下線で示す。 */
a.board-mark--ng, .board-mark--ng { color: var(--color-danger); font-weight: 600; }
a.board-mark--ng { display: flex; text-decoration: none; }
a.board-mark--ng:hover { text-decoration: underline; }
a.cal-chip--alert { text-decoration: none; }
a.cal-chip--alert:hover { text-decoration: underline; }
.cal-chip--alert { background: var(--color-danger-subtle); color: var(--color-danger); }
/* 競合の明細は、ふだんは閉じておく。全施設ぶんを開いたままだと表が読めない。 */
.board-detail td { padding-top: 0; border-top: none; }
.board-detail summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted); }
.board-comps { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.board-comp { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); font-size: var(--text-sm); }
/* 止めた施設は、動いている施設と見分けが付くよう薄くする。 */
.board-table.is-muted { opacity: .7; }

/* ==========================================================================
   やさしいUIへの見直し（2026-09-29）
   上の「やさしいUI」の層で、文字の大きさ・押す場所・表の行の高さは既に
   直してある。ここに足すのは、そこで拾えていなかったものだけにする。
   （一度ここで文字サイズの変数を入れ直したが、上の層より小さい値だったため
     かえって縮めてしまった。同じものを二重に持たない。）
   ========================================================================== */

/* 数字のカード: 桁が多いと単位の「円」だけが次の行に落ちていた。折り返さず、
   丸めた値を大きく出して、正確な値はその下に小さく添える。 */
.kpi-value { white-space: nowrap; }
.kpi-exact { font-size: var(--text-xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; margin-top: 2px; }

/* 表の見出しは、本文と同じ大きさだと見分けがつかない。太さで差をつける。 */
table.data-table th { font-weight: 700; }
/* 数字の列は等幅にして桁をそろえる。 */
table.data-table td.num, table.data-table th.num { font-variant-numeric: tabular-nums; }

/* 何も無いときは、場所を取らずに「次にやること」を出す。 */
.empty-action { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--color-surface-raised); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); }
.empty-action p { margin: 0; font-size: var(--text-sm); }

/* 終わったタスク。ふだんは畳んでおき、押し間違えたときに戻せるようにする。 */
.done-list { margin-top: var(--space-4); border-top: 1px solid var(--color-border);
  padding-top: var(--space-3); }
.done-list > summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted); }
.task-item.is-done .task-title { color: var(--color-text-muted); text-decoration: line-through; }

/* ── ランキング（マーケティング） ─────────────────────────────
   「自分がいま何位か」を最初に大きく出し、エリア全体の一覧はその下に畳んで置く。
   順位は数字が小さいほど良いので、推移の折れ線は上下をひっくり返してある
   （テンプレート側の spark マクロ）。 */
.rank-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.rank-card {
  border: 1px solid var(--color-border); border-radius: 14px;
  background: var(--color-surface); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.rank-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rank-card-board { font-weight: 700; line-height: 1.4; }
.rank-card-body { display: flex; align-items: flex-end; gap: 14px; }
.rank-card-side { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; flex-grow: 1; }
.rank-card-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rank-position { display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; }
.rank-position strong { font-size: 2.4rem; line-height: 1; font-weight: 700; }
.rank-position span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* サイトの色分け。どちらのランキングを見ているかが一目で分かるようにする。 */
.rank-site { padding: 3px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.rank-site--jalan { background: rgba(214, 90, 32, 0.12); color: #b34c14; }
.rank-site--rakuten { background: rgba(191, 0, 0, 0.10); color: #a51414; }

/* 上がった＝良い方向。色だけでなく文字でも書く（色が見分けにくい人がいる）。 */
.rank-move { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 700; }
.rank-move--up { color: var(--color-success, #1f7a4d); }
.rank-move--down { color: var(--color-danger, #b23b33); }
.rank-move--down svg { transform: scaleY(-1); }
.rank-move--flat { color: var(--color-text-muted); font-weight: 600; }

.rank-spark { width: 120px; height: 34px; overflow: visible; }
.rank-spark polyline { fill: none; stroke: var(--color-primary); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.rank-spark circle { fill: var(--color-primary); }

.rank-board { border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 10px; }
.rank-board > summary {
  cursor: pointer; padding: 13px 16px; font-weight: 700;
  display: flex; align-items: center; gap: 10px; min-height: var(--tap, 48px); box-sizing: border-box;
}
.rank-board[open] > summary { border-bottom: 1px solid var(--color-border); }
.rank-badge { padding: 2px 9px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700;
  background: var(--color-primary); color: #fff; }
.rank-badge--competitor { background: var(--color-surface-alt, #eef1f6); color: var(--color-text-muted); }
.rank-row--mine > td { background: rgba(47, 74, 140, 0.09); font-weight: 700; }
.rank-row--competitor > td { background: rgba(0, 0, 0, 0.035); }


/* ── タスクの内容と、締切での区切り ──────────────────────────────── */
/* 件名だけだと「何をするのか」が本人にしか分からない。中身はふだんたたんでおき、
   書いてあるものは開いた状態で出す（読み落とさないように）。 */
.task-note { margin-top: var(--space-2); }
.task-note summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted); }
.task-note textarea { width: 100%; margin-top: var(--space-2); font-family: inherit;
  font-size: var(--text-sm); padding: var(--space-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.task-note form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
/* 手伝ってほしい欄では書き換えさせず、読むだけにする（持ち主と手伝う人が書く場所は
   それぞれの欄にある）。 */
.task-note-read { margin-top: var(--space-2); font-size: var(--text-sm);
  white-space: pre-wrap; color: var(--color-text); }
/* 「1週間以内」と「それより先」の見出し。 */
.task-group-title { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600;
  margin: var(--space-4) 0 var(--space-2); }
.task-group-title:first-of-type { margin-top: var(--space-2); }
.task-add-note { flex: 1 1 100%; }


/* ── イベント情報 ────────────────────────────────────────────────── */
/* 日ごとのかたまり。日付を左に固定して、その日の予定を右に積む。 */
.event-days { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.event-day + .event-day { margin-top: var(--space-3); }
.event-day-head { display: flex; align-items: baseline; gap: var(--space-2);
  font-weight: 700; padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border); }
.event-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
/* 1件は1行。会場 → 名前 → 区分 の順に読めるよう、会場の幅をそろえる。 */
.event-item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); }
.event-venue { display: flex; flex-direction: column; min-width: 14em; font-weight: 600;
  font-size: var(--text-sm); }
.event-title { flex: 1 1 18em; min-width: 12em; }
.event-add { margin: var(--space-3) 0; }
.event-add summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted); }
/* 会場ごとの画面は「会場の表」と「えらんだ会場の予定」の2段組。画面が狭いときは
   縦に積む（表を横に潰すと会場名が読めなくなる）。 */
.event-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .event-split { grid-template-columns: 1fr; } }
.data-table tr.is-selected > td { background: var(--color-surface-raised); }

/* 客室タイプ別の稼働率が100%を超えたとき。計算ではなく「部屋タイプ設定の室数が
   実態と合っていない」ことを示す合図なので、隠さずに目立たせる（伊豆赤沢の
   デラックス和洋室が2室設定に対し1日あたり平均2.4室出ていた）。 */
.ra-occ-over { color: var(--color-danger, #b23b33); font-weight: 700; }


/* ── 料金カレンダーのイベント行 ────────────────────────────────────── */
/* マスは狭いので、名前は入るところまでにして、全文はマウスを乗せたとき（data-tip）に
   出す。読むだけの行なので、備考の入力欄とは見た目を変えて区別する。 */
.rv-event-cell { padding: 1px 2px; vertical-align: middle; }
.rv-event { display: block; font-size: var(--text-xs, 11px); line-height: 1.25;
  padding: 1px 3px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; cursor: default; }
.rv-event + .rv-event { margin-top: 1px; }
.rv-event--live { background: var(--color-danger-subtle); color: var(--color-danger); }
.rv-event--sports { background: var(--color-success-subtle); color: var(--color-success); }
.rv-event--expo, .rv-event--festival, .rv-event--academic,
.rv-event--other { background: var(--color-warning-subtle); color: var(--color-warning); }


/* ── イベントカレンダー（月のマス目）────────────────────────────────── */
/* スケジュールの月表示と同じ形。1日のマスに予定が何件も入るので、マスは高さを
   決めて中だけスクロールさせる（マスの高さが日によってバラバラだと、週の行が
   ガタガタになって読めない）。 */
.ev-grid .cal-day { min-height: 7.5rem; max-height: 11rem; overflow-y: auto; }
.ev-chip { font-size: var(--text-xs, 11px); line-height: 1.3; border-radius: 4px;
  padding: 2px 4px; margin-top: 2px; }
.ev-chip a { color: inherit; text-decoration: none; }
.ev-chip a:hover { text-decoration: underline; }
/* 会場名はイベント名の下に小さく。どこの会場かが分からないと、その施設に効くのか
   判断できないため。 */
.ev-chip-venue { display: block; opacity: .75; }
.ev-chip--live { background: var(--color-danger-subtle); color: var(--color-danger); }
.ev-chip--sports { background: var(--color-success-subtle); color: var(--color-success); }
.ev-chip--expo, .ev-chip--festival, .ev-chip--academic,
.ev-chip--other { background: var(--color-warning-subtle); color: var(--color-warning); }
.ev-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: var(--space-1); vertical-align: -1px; }
.ev-dot--live { background: var(--color-danger); }
.ev-dot--sports { background: var(--color-success); }
.ev-dot--expo, .ev-dot--festival, .ev-dot--academic,
.ev-dot--other { background: var(--color-warning); }


/* 新しく入った予定の印。取得で増えたぶんに付ける（黙って増えていると気づけない）。 */
.ev-new { display: inline-block; font-size: 9px; font-weight: 700; line-height: 1.4;
  padding: 0 3px; border-radius: 3px; vertical-align: 1px;
  background: var(--color-primary); color: var(--color-surface); }
.ev-new-list { margin: var(--space-2) 0 0; padding-left: 1.2em; font-size: var(--text-sm); }

/* レベニューカレンダーの「1か月追加」。保存のボタンとは役割が違うので右端へ離す。 */
.form-actions .rv-extend-month { margin-left: auto; }

/* クチコミのワードクラウドを施設ごとに分けて並べる。競合の単語の表は畳んでおき、
   開いたときだけ見る */
.wc-group + .wc-group { margin-top: var(--space-4); }
.wc-group-title { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); font-size: var(--text-base); }
.wc-competitor { margin-top: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.wc-competitor > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: 700; }
.wc-competitor > .wc-grid { margin: 0; padding: 0 var(--space-4) var(--space-4); }


/* ── 採用管理：選考の板 ──────────────────────────────────────────── */
/* ステップを列にして応募者を並べる。表で見ると「いま誰がどこで止まっているか」が
   行を読まないと分からないため。列は7本（見送り・辞退は畳んだところに出す）。 */
.rc-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2); align-items: start; margin-top: var(--space-3); }
/* 画面が狭いときは列を減らして折り返す（横に潰すと名前しか読めなくなる）。 */
@media (max-width: 1200px) { .rc-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc-col-head { display: flex; align-items: baseline; gap: var(--space-1);
  font-size: var(--text-sm); font-weight: 600; padding: var(--space-2);
  background: var(--color-surface-raised); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.rc-col-count { margin-left: auto; color: var(--color-text-muted); font-weight: 400; }
.rc-col-body { background: var(--color-surface-raised); padding: var(--space-2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); min-height: 6rem; }
.rc-col-empty { margin: 0; color: var(--color-text-subtle); text-align: center;
  font-size: var(--text-sm); }
/* 1人ぶんの札。急ぐものは左の縦線で示す（色だけだと、並んだときに気づきにくい）。 */
.rc-card { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-2); font-size: var(--text-sm); }
.rc-card + .rc-card { margin-top: var(--space-2); }
.rc-card.is-soon { border-left: 3px solid var(--color-primary); }
.rc-card.is-stale { border-left: 3px solid var(--color-danger); }
.rc-card.is-done { border-left: 3px solid var(--color-success); }
.rc-card-name { font-weight: 600; text-decoration: none; color: var(--color-text); }
.rc-card-name:hover { text-decoration: underline; }
.rc-card-sub { font-size: var(--text-xs, 11px); color: var(--color-text-muted); line-height: 1.5; }
.rc-mark--soon { color: var(--color-primary); font-weight: 600; }
.rc-mark--stale { color: var(--color-danger); font-weight: 600; }
/* ステップを進める欄。詳細を開いて選んで保存、より速く済ませるために札の中に置く。 */
.rc-card-move { margin-top: var(--space-1); }
.rc-card-move select { width: 100%; font-size: var(--text-xs, 11px); padding: 2px 4px; }
/* 上に出す「今日やること」。 */
.rc-today-list { display: block; margin-top: var(--space-1); }
.rc-pill { display: inline-block; font-size: var(--text-xs, 11px); padding: 2px 6px;
  border-radius: var(--radius-sm); margin: 2px 4px 0 0; text-decoration: none; }
.rc-pill--soon { background: var(--color-surface); color: var(--color-primary); }
.rc-pill--stale { background: var(--color-surface); color: var(--color-danger); }
.rc-closed { margin-top: var(--space-4); }
.rc-closed summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted); }
.rc-closed-list { margin: var(--space-2) 0 0; padding-left: 1.2em; font-size: var(--text-sm); }
.rc-dot { display: inline-block; width: 3px; height: 11px; margin-right: var(--space-1);
  vertical-align: -1px; }
.rc-dot--soon { background: var(--color-primary); }
.rc-dot--stale { background: var(--color-danger); }
.rc-dot--done { background: var(--color-success); }

/* 分析ツールのマスタ管理 ⇄ 施設仕様書の部屋/プラン設定を行き来するリンク。 */
.rule-head .rule-progress { margin-left: auto; }
.rate-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2);
}
.rate-section-head .form-section-title { margin: 0; }

/* ── 採用管理：数字で見る画面 ────────────────────────────────────── */
/* 表を6つ積み上げると、どれが大事なのか分からなかった。要点を4つのカードにして
   先に出し、流れを棒の長さで見せる。 */
.rc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3); margin: var(--space-3) 0; }
@media (max-width: 760px) { .rc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc-kpi { background: var(--color-surface-raised); border-radius: var(--radius-md);
  padding: var(--space-3); }
.rc-kpi.is-alert { background: var(--color-danger-subtle); }
.rc-kpi-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.rc-kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.rc-kpi-value small { font-size: var(--text-sm); font-weight: 400; margin-left: 2px; }
.rc-kpi.is-alert .rc-kpi-value { color: var(--color-danger); }
.rc-kpi-sub { font-size: var(--text-xs, 11px); color: var(--color-text-muted); }
/* 選考の流れ。数字だけだと、どこで細くなるかが読み取れない。 */
.rc-funnel { margin: var(--space-2) 0 var(--space-4); }
.rc-funnel-row { display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) 0; text-decoration: none; color: var(--color-text); }
.rc-funnel-row:hover { text-decoration: none; background: var(--color-surface-raised); }
.rc-funnel-name { flex: 0 0 8em; font-size: var(--text-sm); }
.rc-funnel-bar { flex: 1 1 auto; height: 14px; background: var(--color-surface-raised);
  border-radius: 3px; overflow: hidden; }
.rc-funnel-bar i { display: block; height: 100%; background: var(--color-primary); }
.rc-funnel-row--offer .rc-funnel-bar i,
.rc-funnel-row--hired .rc-funnel-bar i { background: var(--color-success); }
.rc-funnel-row--rejected .rc-funnel-bar i,
.rc-funnel-row--declined .rc-funnel-bar i { background: var(--color-border-strong); }
.rc-funnel-count { flex: 0 0 2.5em; text-align: right; font-weight: 600; }
/* 予定と経路を横並びに。縦に積むと下まで見ない。 */
.rc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 900px) { .rc-two { grid-template-columns: 1fr; } }
.rc-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.rc-list li { display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); }
.rc-list-when { flex: 0 0 8em; color: var(--color-text-muted); font-size: var(--text-xs, 11px); }
.rc-ratio { flex: 1 1 auto; height: 10px; background: var(--color-surface-raised);
  border-radius: 3px; overflow: hidden; }
.rc-ratio i { display: block; height: 100%; background: var(--color-success); }
.rc-ratio--job { margin: var(--space-2) 0 var(--space-1); }
/* 募集は札にする。表の行だと、あと何人なのかが数字に埋もれる。 */
.rc-jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3); margin-top: var(--space-2); }
.rc-job { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3); }
.rc-job-name { font-weight: 600; }


/* 募集の札（採用管理）。表の行だと「あと何人」が数字に埋もれるため。 */
.rc-job-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rc-job-nums { display: flex; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--text-sm); margin-top: var(--space-1); }
.rc-job-nums b { font-size: var(--text-base, 1rem); }
.rc-job-left { color: var(--color-danger); font-weight: 600; }
.rc-job-done { color: var(--color-success); font-weight: 600; }
.rc-job-foot { display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2); flex-wrap: wrap; }
/* 充足した募集と、止めた募集は、並んだときに見分けられるようにする。 */
.rc-job.is-filled .rc-ratio i { background: var(--color-success); }
.rc-job.is-closed { opacity: .65; }

/* 競合のワードクラウドは畳んでおき、開いたときだけ枠の中に出す */
.wc-competitor-cloud > .wc-cloud { margin: 0 var(--space-4) var(--space-4); }

/* 予算進捗のフォーキャスト（利用者が入れる月ごとの予測）。着地予測(緑)と見分けるため紫 */
:root { --color-chart-fc: #7c3aed; }
.kpi-card-fc { border-color: var(--color-chart-fc); }
.col-fc { background: rgba(124, 58, 237, .06); }
.fc-actions { margin-top: var(--space-4); align-items: center; }
.fc-section { margin-top: var(--space-4); }
.fc-table th, .fc-table td { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.fc-table th:first-child, .fc-table td:first-child, .fc-table td:nth-child(2) { text-align: left; }
.fc-input-head, .fc-input { background: rgba(124, 58, 237, .07); }
.fc-input input { width: 7em; text-align: right; }
.fc-input input.is-bad { border-color: var(--color-danger, #c62828); background: #fdecec; }
.fc-sheet { background: rgba(46, 125, 100, .06); }
.fc-out { font-weight: 700; }
.fc-table thead th { text-align: center; }

/* 上期・下期・年間の表: table.data-table td の左寄せが勝って、右寄せの見出しと
   数字がずれていた。列を減らすとずれが目立つので、数字は右に寄せる */
table.budget-period-table td { text-align: right; }

/* エリア予約件数: グラフと日別データは横に送って過去へさかのぼる。
   マウスではつかんで送れる(enableDragScroll)。 */
.is-drag-scroll { cursor: grab; }
.is-drag-scroll.is-dragging { cursor: grabbing; user-select: none; }
.is-drag-scroll.is-dragging .hover-col { cursor: grabbing !important; }
.booking-own-table th, .booking-own-table td { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.booking-own-table th:first-child { text-align: left; position: sticky; left: 0; z-index: 2; background: var(--color-surface); box-shadow: 2px 0 0 var(--color-border); }
.booking-own-table thead th:first-child { background: var(--color-surface-raised); z-index: 3; }
.booking-own-year { display: block; font-size: var(--text-xs, .75rem); opacity: .7; }
.booking-own-table td.is-empty { color: var(--color-text-muted, #888); }
.booking-own-table td.is-failed { color: var(--color-danger, #c62828); }
/* グラフのホバーに出す「その日に走っていた企画」(エリア予約件数) */
.chart-tooltip-bands { min-width: 240px; margin-top: var(--space-2, 8px); padding-top: var(--space-2, 8px); border-top: 1px solid var(--color-border); }
.chart-tooltip-band { display: flex; gap: 6px; align-items: flex-start; max-width: 320px; white-space: normal; }
.chart-tooltip-band .chart-tooltip-swatch { margin-top: 4px; flex: none; }
.chart-tooltip-band-note { display: block; font-size: var(--text-xs, .75rem); opacity: .75; }

/* 分析ツールの表の絞り込みで、全部外して表が空になったときの戻すボタン。 */
.ra-filter-empty {
  display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0;
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.ra-filter-empty[hidden] { display: none; }
/* プラン名のように長い名前も読めるよう、絞り込みの一覧を少し広げる。 */
.ra-filter-popover { width: 320px; }


/* ── クリエイティブ（施設ごとの世界観から原稿をつくる） ──────────────── */
/* 左に下地と世界観、右につくるものと結果。書きながら指示の出来上がりを見られるように
   横並びにする（縦に積むと、書いた内容が指示にどう入るか見ながら直せない）。 */
.cv-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5); align-items: start; }
@media (max-width: 1000px) { .cv-layout { grid-template-columns: 1fr; } }
/* 仕様書から拾った下地。読むだけなので入力欄にはしない。 */
.cv-facts { list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.cv-facts li { display: flex; gap: var(--space-2); padding: var(--space-1) 0;
  border-bottom: 1px dashed var(--color-border); }
.cv-facts li span:first-child { flex: 0 0 7em; color: var(--color-text-muted); }
.cv-field { display: block; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.cv-field textarea, .cv-field input { width: 100%; }
/* 組み立てた指示。そのまま貼って使うので、折り返して全文を見せる。 */
.cv-prompt-head { display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-1); flex-wrap: wrap; }
.cv-prompt-head .cell-sub { margin-right: auto; }
.cv-prompt { white-space: pre-wrap; word-break: break-word; font-size: var(--text-sm);
  line-height: 1.6; background: var(--color-surface-raised); padding: var(--space-3);
  border-radius: var(--radius-sm); max-height: 22rem; overflow-y: auto; margin: 0 0 var(--space-3); }
.cv-output { border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.cv-output summary { cursor: pointer; display: flex; gap: var(--space-2);
  align-items: baseline; flex-wrap: wrap; }
.cv-body { white-space: pre-wrap; word-break: break-word; font-size: var(--text-sm);
  line-height: 1.7; margin: var(--space-2) 0; }

/* クリエイティブ：世界観の材料（HP・OTAから読んだ文章）。
   読めたか読めなかったかが一覧でわかることが大事なので、字数と理由を行に出す。 */
.cv-sources { list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.cv-sources li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.cv-sources label { display: flex; align-items: baseline; gap: var(--space-2); cursor: pointer; }
.cv-sources label strong { font-weight: 600; }
.cv-sources .cell-sub { margin-left: auto; }
.cv-sources details { margin-top: var(--space-1); }
.cv-sources .cv-body { max-height: 14rem; overflow-y: auto;
  background: var(--color-surface-raised); padding: var(--space-2);
  border-radius: var(--radius-sm); }
.cv-src-ng { margin-left: auto; color: var(--color-danger); }

/* ── 売上シミュレーション ──────────────────────────────────────────────
   数字を見比べる画面なので、桁がそろうこと（右寄せ・等幅）を優先する。
   「導入前 → 導入後」を1マスに入れるため、行の高さを詰めている。 */
.sim-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-5); align-items: start; }
@media (max-width: 1100px) { .sim-layout { grid-template-columns: 1fr; } }

/* 3シナリオ。年間の着地を先に見せ、押して切り替える。 */
.sim-scenarios { display: flex; gap: var(--space-2); margin-bottom: var(--space-4);
  flex-wrap: wrap; }
.sim-scenario { flex: 1 1 10rem; display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: inherit; }
.sim-scenario:hover { border-color: var(--color-primary); }
.sim-scenario.is-active { border-color: var(--color-primary); border-width: 2px;
  background: var(--color-surface-raised); }
.sim-scenario-name { font-size: var(--text-sm); color: var(--color-text-muted); }
.sim-scenario-growth { font-size: var(--text-lg); }

/* 年間の着地。チェックの順（logic.md §16）に左から並べる。 */
.sim-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-2); margin-bottom: var(--space-4); }
.sim-kpi { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 2px; }
.sim-kpi-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.sim-kpi strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

/* 見立てと要再確認。注意は左の線で色を変える（赤を塗りつぶすと読みにくい）。 */
.sim-notes { list-style: none; padding: 0; margin: 0 0 var(--space-4);
  font-size: var(--text-sm); }
.sim-notes li { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-1);
  border-left: 3px solid var(--color-border); background: var(--color-surface-raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; line-height: 1.6; }
.sim-notes li.is-warn { border-left-color: var(--color-danger); }

/* 月別の表。数字は右寄せ・等幅にそろえる。 */
.sim-months td.num, .sim-months th.num { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.sim-months tr.is-overridden td { background: var(--color-surface-raised); }
.sim-months .sim-reason-row td { padding-top: 0; border-top: 0; }
.sim-reason { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-sm);
  line-height: 1.7; color: var(--color-text-muted); }
.sim-season { display: inline-block; padding: 0 var(--space-2); border-radius: 999px;
  font-size: var(--text-xs); border: 1px solid var(--color-border); white-space: nowrap; }
.sim-season.is-busy { border-color: var(--color-danger); color: var(--color-danger); }
.sim-season.is-low { color: var(--color-text-muted); }

/* 導入前の表。実績が無い月は、埋めるところだと分かるようにする。 */
.sim-page tr.is-missing td { background: var(--color-danger-subtle); }
.cell-warn { color: var(--color-danger); }
/* 数字は右寄せ。この指定はシミュレーションの画面の中だけに閉じる。
   .num は18画面で使われていて、いまは左寄せのまま並んでいるものがあるため
   （全体に効かせると、関係ない画面の見え方まで変わってしまう）。 */
.sim-page td.num, .sim-page th.num { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* 市場パイの並び。自社の行だけ太くする。 */
.sim-rank { margin: var(--space-2) 0 0; padding-left: 1.5em; font-size: var(--text-sm); }
.sim-rank li { padding: 2px 0; display: flex; justify-content: space-between; gap: var(--space-2); }
.sim-rank li.is-own { font-weight: 700; color: var(--color-primary); }
.page-header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* 提案資料用コメント。そのまま貼って使うので、折り返して全文を見せる。 */
.sim-comment { margin-bottom: var(--space-4); }
/* チャネル絞り込み: OTA・リアル・自社の見出しの下に販売先を並べる（クチコミ分析の国内／海外と同じ形）。 */
.ra-channel-groups { max-height: 320px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ra-channel-group-head {
  display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px;
  background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 1;
}
.ra-channel-group-head strong { font-size: var(--text-sm); }
.ra-channel-group-list { padding: 6px 10px; }

/* ---- 需要予測（じゃらん・楽天を1画面に並べる） ----
   グラフが主役なので、条件とエリア選びは上下に詰め、エリアの一覧と数値の表は
   折りたたんでおく。開いたときに2つのグラフが近くに並んで見えるようにする。 */
.demand-site + .demand-site { margin-top: var(--space-4); }
.demand-site > .form-section-title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* 見出しと条件（地方・人数・都道府県）を1行にまとめる。グラフを2つ縦に並べる
   ぶん、見出しの行と条件の行が別々だと縦に伸びてしまうため。 */
.demand-head {
  display: flex; align-items: flex-end; gap: var(--space-5);
  flex-wrap: wrap; margin-bottom: var(--space-2);
}
.demand-head > .form-section-title { margin: 0; }
.demand-cond { margin: 0; }
.demand-areas, .demand-numbers { margin-top: var(--space-2); }
.demand-areas > summary, .demand-numbers > summary {
  cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted);
  padding: 2px 0; display: inline-flex; align-items: center; gap: var(--space-1);
}
.demand-areas > summary:hover, .demand-numbers > summary:hover { color: var(--color-text); }
.demand-areas[open] > summary, .demand-numbers[open] > summary { margin-bottom: var(--space-2); }
/* 自館の消化率の行は、エリアの空き宿数とは別の数字なので地色で区切る。 */
.demand-numbers .is-own-row > td {
  background: var(--color-surface-raised); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 右目盛り（2つの単位を同じグラフに重ねたとき）。グラフは期間ぶん横に長いので、
   右端の目盛りはスクロールしないと出てこない。見えている右端に浮かせて貼る。 */
.chart-axis-float { position: absolute; top: 0; width: 48px; z-index: 2; pointer-events: none; }
.chart-axis-float span {
  position: absolute; right: 0; padding: 1px 4px; border-radius: 3px;
  font-size: 13px; line-height: 1.2; white-space: nowrap;
  color: var(--color-text); background: var(--color-surface); opacity: 0.92;
  font-variant-numeric: tabular-nums;
}
.demand-site > .form-section-title .cell-sub { font-weight: 400; color: var(--color-text-muted); }

/* ---- 予算進捗 全施設サマリーの「調子」 ----
   予算比（無ければ前年比）を5段階の顔で出す。前後3か月を横に並べるので、
   1つのセルは「顔＋段階名」「予算比・前年比」「金額」の3段に収める。 */
.mood { vertical-align: middle; flex-shrink: 0; }
.mood-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
}
.mood-legend li { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
.mood-table th, .mood-table td { vertical-align: top; }
/* 施設名は横に長い表でも常に見えるようにする。 */
.mood-table .mood-name-col {
  position: sticky; left: 0; z-index: 1;
  background: var(--color-surface); white-space: nowrap;
}
.mood-table thead .mood-name-col { background: var(--color-surface-raised); }
.mood-cell { min-width: 164px; }
.mood-cell-top { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.mood-cell-label { font-weight: 700; }
.mood-cell-ratios {
  display: flex; flex-direction: column; gap: 1px;
  font-size: var(--text-sm); font-variant-numeric: tabular-nums; margin-top: 2px;
}
/* アイコンの元にした方の比率を太字にする（予算が無い月は前年比で見ている）。 */
.mood-cell-ratios .is-basis { font-weight: 700; }

/* クチコミの「最近の評点」: じゃらん・楽天・Booking・一休の評点と件数の列を同じ幅にする。
   幅を中身任せにすると、件数の桁が多いサイトだけ広がって見比べにくかった。
   狭い画面では表の外側(table-scroll)で横に送る。 */
table.data-table.review-scores-table { table-layout: fixed; width: 100%; min-width: 1100px; }
table.data-table.review-scores-table col.review-scores-col-name { width: 22%; }
table.data-table.review-scores-table col.review-scores-col-ota { width: 8.75%; }
table.data-table.review-scores-table col.review-scores-col-date { width: 8%; }
table.data-table.review-scores-table td.review-scores-name { white-space: normal; }
table.data-table.review-scores-table td { font-variant-numeric: tabular-nums; }
/* 施設仕様書 SC/OTA: 手数料が上乗せになるプログラム（楽天ボーナスプログラム・一休プライス最適化）。 */
.ota-fee-programs { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.ota-fee-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.ota-fee-rate { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }

/* スマホの引き出しメニューでは、施設の候補を下のメニューに重ねず、押し下げて並べる。
   重ねていると、候補の一覧を指でなぞったときに引き出し全体が動いて、指の下に
   「施設仕様書」「プロモーション管理」などが入り込み、施設のつもりで押すと
   そちらが開いていた。一覧の中だけで動く小さな窓もやめ、引き出し1枚で動かす。 */
@media (max-width: 820px) {
  .app-sidebar .combo-panel {
    position: static; max-height: none; overflow: visible;
    margin-top: var(--space-1); box-shadow: none;
  }
  .app-sidebar .combo-option { min-height: var(--tap, 44px); display: flex; align-items: center; }
}
/* 施設の予算進捗、月別の表の「調子」の列。 */
.budget-table .mood-col { white-space: nowrap; }
.budget-table .mood-col .mood { vertical-align: middle; }
.mood-col-label { font-weight: 700; margin-left: 2px; vertical-align: middle; }

/* ---- 施設マスタ管理の能力値カード ----
   施設の性格を1枚で見比べる。ランクの色はA(赤)〜G(灰)の7段階で、
   パワプロの選手カードの見え方に合わせている。 */
.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--space-3); }
.fc-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); padding: var(--space-3);
}
.fc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.fc-name { font-weight: 700; }
.fc-head-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.fc-mood { display: inline-flex; align-items: center; gap: 3px; }
.fc-mood-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.fc-overall { font-size: var(--text-xl); font-weight: 700; line-height: 1; }

.fc-abilities { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 4px; }
.fc-abilities li { display: flex; align-items: center; gap: var(--space-2); }
.fc-ab-label { width: 4.8em; font-size: var(--text-sm); color: var(--color-text-muted); flex-shrink: 0; }
.fc-ab-rank { width: 1.3em; text-align: center; font-weight: 700; flex-shrink: 0; }
.fc-ab-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--color-surface-raised); overflow: hidden; }
.fc-ab-fill { display: block; height: 100%; }
.fc-ab-value {
  width: 6.4em; text-align: right; font-size: var(--text-xs);
  color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0;
}

.fc-traits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-3); }
.fc-trait { font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-sm); }
.fc-trait.is-good { background: var(--color-primary-subtle); color: var(--color-primary); }
.fc-trait.is-weak { background: var(--color-danger-subtle); color: var(--color-danger); }
.fc-missing { margin: var(--space-2) 0 0; }

/* ランクの色。文字と棒の両方に当てる。 */
.fc-rank-A { color: #dc2626; } .fc-ab-fill.fc-rank-A { background: #dc2626; }
.fc-rank-B { color: #ea580c; } .fc-ab-fill.fc-rank-B { background: #ea580c; }
.fc-rank-C { color: #ca8a04; } .fc-ab-fill.fc-rank-C { background: #ca8a04; }
.fc-rank-D { color: #16a34a; } .fc-ab-fill.fc-rank-D { background: #16a34a; }
.fc-rank-E { color: #2563eb; } .fc-ab-fill.fc-rank-E { background: #2563eb; }
.fc-rank-F { color: #7c3aed; } .fc-ab-fill.fc-rank-F { background: #7c3aed; }
.fc-rank-G { color: var(--color-text-muted); } .fc-ab-fill.fc-rank-G { background: var(--color-text-subtle); }
.fc-rank-none { color: var(--color-text-subtle); }

/* グラフの凡例・ホバーで名前の前に出す丸い印(エリア予約件数: 楽天のボーナスプログラム参画率)。
   5%がいちばん目立つよう、strong(5%) → mid(8%) → light(3%) の順に濃くする。 */
.chart-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6em;
  padding: 1px 7px; border-radius: 999px; border: 1.5px solid #bf0000; font-size: 0.85em; font-weight: 700;
  line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle; }
.chart-badge--strong { background: #bf0000; color: #fff; }
.chart-badge--mid { background: #f8c9c9; color: #8a0000; border-color: #e07a7a; }
.chart-badge--light { background: #fff; color: #9a5a5a; border-color: #e6bcbc; font-weight: 600; }

/* クチコミ分析の上の「新着クチコミ」の知らせ。マイナスクチコミがあれば赤で目立たせる */
.review-new-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-surface); }
.review-new-card.is-alert { border-left-color: var(--color-danger); }
.review-new-card a { text-decoration: none; color: inherit; }
.review-new-main strong { font-size: 1.25em; font-variant-numeric: tabular-nums; }
.review-new-sites { color: var(--color-text-muted); font-size: var(--text-sm); }
.review-new-go { margin-left: auto; font-weight: 700; white-space: nowrap; }
.review-new-alert { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--color-danger); color: #fff !important; font-weight: 700; white-space: nowrap; }
.review-new-note { color: var(--color-text-muted); font-size: var(--text-sm); }
.review-new-filter { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
/* 点数の低いクチコミ（5点満点で3点以下。Booking.comは10点満点なので6点以下）。
   一覧の中で先に目が行くよう、行全体に赤みを付け、左端に帯を出す。 */
tr.review-row-negative td { background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
tr.review-row-negative td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
tr.review-row-negative td:nth-child(4) { color: var(--color-danger); font-weight: 700; }
tr.review-row-negative:hover td { background: color-mix(in srgb, var(--color-danger) 16%, transparent); }

/* 競合料金は5桁(10,000円以上)になる日がある。縦並びでは入力欄を62pxに絞っていたので
   「82178」が「8217」で切れていた。この列だけ5桁が入る幅にし、数字の上下ボタンは
   消して(料金を1円ずつ上げ下げする使い方はしない)その分も数字に回す。 */
.rv-comp-input { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.rv-comp-input::-webkit-inner-spin-button,
.rv-comp-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rv-vcal td.rv-comp-cell { max-width: none; }
#gantt-calendar-table.rv-vcal .rv-comp-input,
.rv-vcal .rv-comp-input { width: calc(6ch + 12px); max-width: none; min-width: 0; padding: 2px 4px; }

/* エージェントマネージャーを所属ごとに並べたときの、所属の見出し行。 */
.staff-dept-row > td {
  background: var(--color-surface-raised); font-weight: 700;
  border-top: 1px solid var(--color-border);
}
.staff-dept-row .cell-sub { display: inline; margin-left: var(--space-2); font-weight: 400; }

/* ---- トップの「アカウント情報」 ----
   ふだんは閉じておき、押すと自分の情報だけを直せる形にする。 */
.home-account {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); margin-bottom: var(--space-5);
}
.home-account > summary {
  cursor: pointer; list-style: none; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.home-account > summary::-webkit-details-marker { display: none; }
.home-account-head { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.home-account-head > span { display: flex; flex-direction: column; min-width: 0; }
.home-account-name { font-weight: 700; }
.home-account-open { font-size: var(--text-sm); color: var(--color-primary); }
.home-account[open] > summary { border-bottom: 1px solid var(--color-border); }
.home-account-form { padding: var(--space-4); }
.home-account-form > label { display: block; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.home-account-form > label > input[type="url"] { display: block; width: 100%; margin-top: var(--space-1); }

/* 行の中に置くチェックボックス（アカウント一覧の「既定の権限も入れ直す」など）。
   .rate-lock / .filter-row の中だけで定義していたため、汎用の指定を足す。 */
.inline-form label.checkbox-inline {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 400; font-size: var(--font-size-sm); white-space: nowrap;
}

/* プラン詳細の手仕舞い(宿泊日の◯日前の◯時まで) */
.cutoff-field { display: flex; flex-direction: column; gap: var(--space-1); }
.cutoff-label { font-size: var(--text-sm); font-weight: 600; }
.cutoff-inputs { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cutoff-inputs input[type=number] { width: 5em; text-align: right; font-variant-numeric: tabular-nums; }
.cutoff-inputs input[type=time] { width: 8em; }

/* プラン詳細をOTAへ反映する画面 */
.ota-running { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.ota-site { align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.ota-site.is-off { color: var(--color-text-muted); }
.ota-table th, .ota-table td { vertical-align: top; }
.ota-table td.ota-cell { white-space: pre-wrap; min-width: 14em; max-width: 32em; font-variant-numeric: tabular-nums; }
.ota-table td.is-empty { color: var(--color-text-muted); }
.ota-table td.is-diff { background: rgba(217, 119, 6, .12); }
.ota-actions { margin-top: var(--space-3); align-items: center; }
.ota-result { font-size: var(--text-sm); }
.ota-result.is-failed { color: var(--color-danger, #c62828); }
.ota-result.is-ok { color: var(--color-success, #2e7d64); }
.ota-result.is-running { color: var(--color-text-muted); }
/* 読み込み・反映の進み具合。1サイト1分ほどかかるので、帯と%で出す。 */
.ota-progress {
  display: inline-block; width: 12em; max-width: 40vw; height: 8px;
  background: var(--color-border); border-radius: var(--radius-full); overflow: hidden;
}
.ota-progress-fill {
  display: block; height: 100%; background: var(--color-primary, #2563eb);
  border-radius: var(--radius-full); transition: width .4s ease;
}
.ota-progress-num { font-variant-numeric: tabular-nums; }
.ota-running { flex-wrap: wrap; }
.status-badge.status-ng { background: #fdecec; color: var(--color-danger, #c62828); }

/* ==========================================================================
   タレントマネジメント（宿で働く人）
   ========================================================================== */
/* 部門の切り替え。どの画面にも効く軸なので、タブのすぐ下に置く。 */
.tm-deptbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
              margin: 0 0 var(--space-4); }
.tm-deptbar-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
                    color: var(--color-text-subtle); }
.tm-deptchip { background: var(--color-surface); border: 1px solid var(--color-border);
               border-radius: var(--radius-full); padding: 3px var(--space-4);
               font-size: var(--text-sm); color: var(--color-text); }
.tm-deptchip:hover { border-color: var(--color-primary); color: var(--color-primary);
                     text-decoration: none; }
.tm-deptchip.is-active { background: var(--color-primary); border-color: var(--color-primary);
                         color: #fff; font-weight: 700; }

/* 部門ごとの 在籍／目安／過不足 */
.tm-staffing { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
               gap: var(--space-3); }
.tm-staff-cell { background: var(--color-surface); border: 1px solid var(--color-border);
                 border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.tm-staff-cell .tm-dept { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-1); }
.tm-staff-cell .tm-count { font-size: var(--text-xl); font-weight: 700;
                           font-variant-numeric: tabular-nums; }
.tm-staff-cell .tm-target { font-size: var(--text-xs); color: var(--color-text-subtle); }
.tm-gap { font-size: var(--text-sm); font-weight: 700; margin-top: var(--space-1);
          color: var(--color-text-subtle); }
.tm-gap.is-short { color: var(--color-danger); }
.tm-gap.is-over { color: var(--color-text-muted); }
.tm-gap.is-ok { color: var(--color-success); }

/* 気をつけること */
.tm-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
             gap: var(--space-2); }
.tm-alerts li { display: flex; gap: var(--space-3); align-items: baseline;
                border-left: 3px solid var(--color-border-strong);
                background: var(--color-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
                padding: var(--space-2) var(--space-3); font-size: var(--text-sm); line-height: 1.7; }
.tm-alerts li.is-critical { border-left-color: var(--color-danger); }
.tm-alerts li.is-warn { border-left-color: var(--color-warning); }
.tm-alert-kind { flex: 0 0 7.5em; font-size: var(--text-xs); font-weight: 700;
                 color: var(--color-text-muted); }
.tm-alerts li.is-critical .tm-alert-kind { color: var(--color-danger); }
.tm-alerts li.is-warn .tm-alert-kind { color: var(--color-warning); }

/* スキルの表 */
.tm-matrix { border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.tm-matrix th, .tm-matrix td { border: 1px solid var(--color-border); padding: var(--space-2);
                               text-align: center; white-space: nowrap; }
.tm-matrix thead th { background: var(--color-surface-raised); font-size: var(--text-xs);
                      font-weight: 700; }
.tm-matrix tbody th { text-align: left; background: var(--color-surface); font-weight: 600; }
.tm-matrix td { background: var(--color-surface); }
.tm-matrix tbody tr.is-helper-row th { background: var(--color-surface-raised); font-weight: 400; }
.tm-matrix tfoot td, .tm-matrix tfoot th { background: var(--color-surface-raised);
                                           font-size: var(--text-xs); font-weight: 700; }
.tm-matrix tfoot td.is-alone { background: var(--color-danger-subtle); color: var(--color-danger); }
.tm-post-mark { font-size: 9px; font-weight: 700; color: var(--color-primary); }
.tm-lv { display: inline-block; min-width: 1.6em; border-radius: var(--radius-sm); font-weight: 700; }
.tm-lv-teach { background: var(--color-primary); color: #fff; }
.tm-lv-solo  { background: var(--color-primary-subtle); color: var(--color-primary); }
.tm-lv-help  { background: var(--color-surface-raised); color: var(--color-text-muted);
               border: 1px solid var(--color-border); }
.tm-lv-train { background: transparent; color: var(--color-text-subtle);
               border: 1px dashed var(--color-border-strong); }
/* よその部門から応援に入っている人の印 */
.tm-lv.is-helper { outline: 2px dotted var(--color-text-subtle); outline-offset: 1px; }
.tm-lv-select { min-height: 0; padding: 1px 2px; font-size: var(--text-sm); width: 3.4em; }
.tm-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs);
             color: var(--color-text-muted); margin-top: var(--space-2); }

/* 部門ごとの権限 */
.pm { display: inline-block; border-radius: var(--radius-sm); padding: 1px var(--space-2);
      font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.pm-edit { background: var(--color-primary-subtle); color: var(--color-primary); }
.pm-view { background: var(--color-surface-raised); color: var(--color-text-muted);
           border: 1px solid var(--color-border); }
.pm-none { background: var(--color-surface-raised); color: var(--color-text-subtle); }
.pm-select { min-height: 0; padding: 1px 2px; font-size: var(--text-xs); }
.tm-matrix tbody tr.pm-locked th, .tm-matrix tbody tr.pm-locked td {
  background: var(--color-surface-raised); }

.tm-edit summary { cursor: pointer; }
.tm-matrix tfoot td.is-nobody { background: var(--color-warning-subtle); color: var(--color-warning); }
.tm-sub-head { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-subtle); }
.tm-why { margin: 0; padding-left: 1.3em; font-size: var(--text-sm); line-height: 1.9; }
.tm-band { display: inline-block; min-width: 1.7em; padding: 1px 2px; border-radius: var(--radius-sm);
           font-size: var(--text-xs); font-weight: 700; }
.tm-band-early { background: #fde9cf; color: #8a5200; }
.tm-band-mid   { background: #d9ecd6; color: #2f6b2a; }
.tm-band-late  { background: #d7e4f7; color: #1f4276; }
.tm-band-night { background: #2a3650; color: #fff; }
.tm-bar { display: inline-block; width: 90px; height: 8px; border-radius: var(--radius-full);
          background: var(--color-surface-raised); border: 1px solid var(--color-border);
          vertical-align: middle; overflow: hidden; }
.tm-bar-fill { display: block; height: 100%; background: var(--color-primary); }
.tm-bar-fill.is-warn { background: var(--color-warning); }
.tm-bar-fill.is-critical { background: var(--color-danger); }

/* ---- 希望シフトの提出ページ（ログインなしでスマホから開く） ---- */
.wish-body { background: var(--color-bg); margin: 0; padding: var(--space-4);
             display: flex; justify-content: center; }
.wish-card { background: var(--color-surface); border: 1px solid var(--color-border);
             border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
             padding: var(--space-5); width: 100%; max-width: 480px; }
.wish-title { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.wish-who { font-size: var(--text-md); font-weight: 700; margin: 0 0 var(--space-3); }
.wish-text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.9; }
.wish-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs);
             background: var(--color-warning-subtle); border-radius: var(--radius-sm);
             padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.wish-error { background: var(--color-danger-subtle); color: var(--color-danger);
              border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
              font-size: var(--text-sm); }
.wish-notice { background: var(--color-surface-raised); border-radius: var(--radius-sm);
               padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.wish-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wish-cal th { font-size: var(--text-xs); color: var(--color-text-subtle); padding: 2px 0; }
.wish-cal td { border: 1px solid var(--color-border); vertical-align: top; padding: 2px; }
.wish-cal td.wish-out { background: var(--color-surface-raised); border-color: var(--color-border); }
.wish-num { font-size: 10px; font-weight: 700; }
.wish-sun .wish-num { color: #b23b2e; }
.wish-sat .wish-num { color: #2f5fa8; }
.wish-busy { color: var(--color-warning); margin-left: 2px; }
.wish-select, .wish-band { width: 100%; min-height: 0; padding: 2px; font-size: var(--text-sm); }
.wish-band { font-size: 10px; margin-top: 1px; }
.wish-cell.is-x { background: var(--color-danger-subtle); }
.wish-cell.is-soft { background: var(--color-warning-subtle); }
.wish-cell.is-yes { background: var(--color-success-subtle); }
.wish-legend { list-style: none; margin: var(--space-3) 0; padding: 0;
               font-size: var(--text-xs); color: var(--color-text-muted); line-height: 2; }
.wish-chip { display: inline-block; min-width: 1.5em; text-align: center; font-weight: 700;
             border-radius: 4px; margin-right: var(--space-2); }
.wish-chip.is-x { background: var(--color-danger-subtle); color: var(--color-danger); }
.wish-chip.is-soft { background: var(--color-warning-subtle); color: var(--color-warning); }
.wish-chip.is-yes { background: var(--color-success-subtle); color: var(--color-success); }
.wish-note { display: block; font-size: var(--text-sm); }
.wish-note textarea { width: 100%; font-family: inherit; font-size: var(--text-sm);
                      border: 1px solid var(--color-border); border-radius: var(--radius-sm);
                      padding: var(--space-2); }
.wish-send { width: 100%; margin-top: var(--space-3); min-height: 48px; }
.wish-done { text-align: center; background: var(--color-success-subtle);
             border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); }
.wish-check { width: 44px; height: 44px; margin: 0 auto var(--space-2); border-radius: 50%;
              background: var(--color-surface); color: var(--color-success);
              font-size: 22px; line-height: 44px; font-weight: 700; }
.wish-done-title { font-weight: 700; margin: 0; }
.wish-foot { text-align: center; font-size: var(--text-xs); color: var(--color-text-subtle);
             margin: var(--space-4) 0 0; }
/* 料金表の「詳細設定」: 項目を見出しごとの段に分けて並べる */
.rate-detail-section { flex: 1 1 100%; display: grid; grid-template-columns: 9em 1fr; gap: var(--space-3);
  padding: var(--space-2) 0; border-top: 1px dashed var(--color-border); }
.rate-detail-section:first-of-type { border-top: none; }
.rate-detail-head { font-size: var(--text-sm); font-weight: 700; padding-top: var(--space-2); }
.rate-detail-fields { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: flex-end; }
.rate-detail-fields label { font-size: var(--text-sm); }
.rate-detail-fields label.grow { flex: 1 1 360px; }
.rate-detail-fields label.wide { flex: 1 1 100%; }
.rate-detail-fields label.wide textarea { width: 100%; }
.rate-detail-line { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.rate-detail-sub { font-size: var(--text-sm); font-weight: 600; min-width: 5em; }
.rate-detail-memo { display: flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); }
.rate-detail-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; }
@media (max-width: 820px) {
  .rate-detail-section { grid-template-columns: 1fr; gap: var(--space-1); }
}
.rate-detail-fields label.grow { display: flex; align-items: center; gap: var(--space-1); }
.rate-detail-fields label.grow input { flex: 1 1 auto; min-width: 0; }
/* プラン編集の「期間・締切」: 掲載期間・販売期間・手仕舞いを1行ずつ並べる */
.period-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
.period-line-label { font-size: var(--text-sm); font-weight: 600; min-width: 5em; }
.period-line .form-grid { margin: 0; }

/* ---- 表の見出しを押して並び替える（static/js/table_sort.js） ---- */
th.is-sortable { cursor: pointer; user-select: none; position: relative; padding-right: 16px; }
th.is-sortable:hover { color: var(--color-primary); }
th.is-sortable::after {
  content: "⇅"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--color-text-subtle); opacity: .45;
}
th.is-sortable[data-sorted="asc"]::after { content: "▲"; opacity: 1; color: var(--color-primary); }
th.is-sortable[data-sorted="desc"]::after { content: "▼"; opacity: 1; color: var(--color-primary); }

/* クロス集計で、10点満点のBooking.comと5点満点のサイトが同じマスに入っているとき。
   数字はサイトの満点のまま出すので、そのマスだけ平均がそろっていない。 */
.crosstab-table td.ct-cell.is-mixed { outline: 2px dashed var(--color-warning); outline-offset: -2px; }
.ct-mixed-note { margin: 0 0 var(--space-2); }

/* レベニューのカレンダーで、過去の取込時点を表示しているときの知らせ。
   数字は見るだけで、マスは触れない（古い値で上書きしないため）。 */
.rv-as-of-note {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  background: var(--color-warning-subtle); color: var(--color-warning);
  font-size: var(--text-sm); font-weight: 600;
}

/* 過去の時点を表示しているときのマス。触れないことが見て分かるようにする。
   横型・縦型とも #gantt-calendar-table で地色を指定しているので、そちらより
   強い書き方にしないと白いままになる。 */
#gantt-calendar-table .gantt-inline-input:disabled,
#gantt-calendar-table .gantt-note-input:disabled,
.gantt-inline-input:disabled,
.gantt-note-input:disabled {
  background: var(--color-surface-raised);
  color: var(--color-text-subtle);
  border-style: dashed;
  cursor: default;
}
.rv-sell-stop-box:disabled { cursor: default; opacity: 0.6; }

/* ---- 画像リサイズ（TOOL） ---- */
.ir-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .ir-layout { grid-template-columns: 1fr; } }
.ir-panel { position: sticky; top: 16px; }
@media (max-width: 900px) { .ir-panel { position: static; } }
.ir-field { margin-bottom: 16px; }
.ir-field:last-child { margin-bottom: 0; }
.ir-field .lbl { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.ir-dims { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.ir-dims input { font-variant-numeric: tabular-nums; }
.ir-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ir-modes button {
  /* アプリ共通のボタンは inline-flex なので、そのままだと名前と説明が横に並んで
     「切り / 抜き」のように割れる。この枠では縦に積む。 */
  display: block; min-width: 0;
  font: inherit; font-size: .85rem; text-align: left; line-height: 1.35; padding: 8px 6px;
  border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-bg);
  color: var(--color-text); cursor: pointer;
}
.ir-modes button small { display: block; color: var(--color-text-muted); font-size: .72rem; }
/* 入力欄は、狭い画面で枠からはみ出さないよう縮められるようにする
   （gridやflexの中身は既定で「中身の幅より小さくならない」ため）。 */
.ir-panel select, .ir-panel input[type="text"], .ir-panel input[type="number"] {
  width: 100%; min-width: 0; max-width: 100%;
}
.ir-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.ir-color-row { display: flex; gap: 8px; align-items: center; }
.ir-row-end { display: flex; gap: 8px; flex-wrap: wrap; }
.ir-modes button[aria-pressed="true"] {
  border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary);
  background: var(--color-surface);
}
.ir-modes button:disabled { opacity: .45; cursor: not-allowed; }
.ir-check { display: flex; gap: 8px; align-items: center; font-size: .9rem; margin-bottom: 6px; }
#ir-q { width: 100%; }
#ir-bg { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--color-border); border-radius: 6px; }

.ir-drop {
  border: 2px dashed var(--color-border); border-radius: 14px; background: var(--color-bg);
  min-height: 300px; display: grid; place-items: center; padding: 28px; text-align: center;
  transition: border-color .15s, background .15s;
}
.ir-drop.is-over { border-color: var(--color-primary); background: var(--color-surface); }
.ir-stage { width: 100%; max-width: 360px; height: 180px; display: grid; place-items: center; margin: 0 auto 16px; }
.ir-frame {
  border: 2px solid var(--color-primary); border-radius: 4px; display: grid; place-items: center;
  font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--color-primary);
  transition: width .25s ease, height .25s ease;
}
.ir-frame.is-auto { border-style: dashed; }
.ir-frame small { display: block; font-size: .72rem; font-weight: 500; color: var(--color-text-muted); }
.ir-pick {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; cursor: pointer;
  font-weight: 700; font-size: .88rem; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff;
}
.ir-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.ir-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 10px; }
.ir-bar h2 { font-size: 1rem; margin: 0; }
.ir-list { display: grid; gap: 10px; }
.ir-item {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px;
}
.ir-thumb { width: 88px; height: 66px; border-radius: 6px; background: var(--color-bg); display: grid; place-items: center; overflow: hidden; }
.ir-thumb img { max-width: 100%; max-height: 100%; display: block; }
.ir-meta { min-width: 0; }
.ir-name { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-nums { font-size: .82rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ir-nums b { color: var(--color-text); font-weight: 700; }
.ir-item.is-error .ir-nums { color: var(--color-danger); }
@media (max-width: 520px) {
  .ir-item { grid-template-columns: 64px 1fr; }
  .ir-thumb { width: 64px; height: 48px; }
  .ir-item button { grid-column: 1 / -1; }
}
.ir-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  background: var(--color-text); color: var(--color-surface); padding: 10px 16px; border-radius: 8px;
  font-size: .88rem; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.ir-toast.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ir-frame, .ir-drop, .ir-toast { transition: none; } }

/* ---- 営業管理の勢力図 ---- */
.sales-map-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-5); }
.sales-map-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.sales-map-head .form-section-title { margin: 0; }
.sales-map-legend { list-style: none; display: flex; gap: var(--space-4); margin: 0; padding: 0; font-size: .85rem; flex-wrap: wrap; }
.sales-map-legend li { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.sales-map-legend b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.sales-map-chip { width: 12px; height: 12px; border-radius: 3px; background: var(--color-border); display: inline-block; }
.sales-map-chip.is-own { background: var(--color-primary); }
.sales-map-chip.is-target { background: var(--color-warning); }
/* 地図は日本の形でほぼ正方形になり、高さで大きさが決まる。地図の列は中身の
   大きさに任せ(auto)、余る横幅は右の一覧(1fr)で使い切る。固定幅の細い列を
   置くと、広い画面で真ん中が空いてしまう。 */
.sales-map-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-3); }
.sales-map { width: clamp(300px, 34vw, 620px); }
.sales-map svg { width: 100%; height: auto; display: block; }
@media (max-width: 820px) {
  .sales-map-body { grid-template-columns: 1fr; }
  .sales-map { width: 100%; }
}
/* 地図の色。塗りはここだけで決める（SVGには色を持たせない）。 */
.jp-pref { fill: var(--color-bg); stroke: var(--color-surface); stroke-width: 1; stroke-linejoin: round; }
.jp-pref[data-state="own"] { fill: var(--color-primary); }
.jp-pref[data-state="target"] { fill: var(--color-warning); }
.jp-pref[data-state="own"], .jp-pref[data-state="target"] { cursor: pointer; }
.jp-pref[data-state="own"]:hover, .jp-pref[data-state="target"]:hover { fill: var(--color-primary-hover); }
.jp-pref[data-picked] { stroke: var(--color-text); stroke-width: 2; }
.jp-pref:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.jp-inset { fill: none; stroke: var(--color-border-strong); stroke-width: 1; }
.jp-inset-label { font-size: 13px; fill: var(--color-text-muted); font-family: inherit; }
.sales-map-side { display: grid; gap: var(--space-3); align-content: start; }
/* 都道府県のカードを、幅に応じて何列でも並べる。広い画面ほど列が増える。 */
.sales-map-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); }
.sales-map-card { background: var(--color-bg); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); border: 1px solid transparent; }
.sales-map-card[data-picked] { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.sales-map-card-head { display: flex; align-items: center; gap: 6px; }
.sales-map-card-head strong { font-size: .9rem; }
.sales-map-card-head .cell-sub { margin-left: auto; font-variant-numeric: tabular-nums; }
.sales-map-pick-list { list-style: none; margin: 4px 0 0; padding: 0; font-size: .82rem; color: var(--color-text-muted); }
.sales-map-pick-list li { padding: 1px 0; }
.sales-map-pick-list li.is-target { color: var(--color-warning); }
.sales-map-pick-list li .cell-sub { margin-left: 4px; }
.sales-map-notes { display: grid; gap: var(--space-2); }

/* Booking.comの「施設名で検索」は、ローマ字に直してから押せるよう欄を出す。 */
.url-search-word { width: 100%; max-width: 220px; margin-bottom: var(--space-1); }

/* ---- 施設の状態（契約中・営業中・解約・失注） ---- */
.facility-status-select { min-width: 7.5em; }
.facility-status-select.is-cancelled,
.facility-status-select.is-lost { color: var(--color-text-muted); }
.facility-status-select.is-prospect { color: var(--color-warning); }

/* ---- 施設マスタ管理: 状態ごとのカード ---- */
/* 43施設を1本の表にすると43行になって縦に延々と続く。広い画面では横に並べて
   行数を減らす（1920pxで5列＝9行）。狭い画面では1列に積む。 */
.fm-group .form-section-title { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--space-3); }
.fm-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); display: grid; gap: var(--space-2); align-content: start; }
.fm-card-name { display: flex; align-items: center; gap: var(--space-2); }
.fm-card-name .rename-input { flex: 1 1 auto; min-width: 0; }
.fm-card-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.fm-card-icons { display: flex; gap: 4px; }
@media (max-width: 560px) { .fm-grid { grid-template-columns: 1fr; } }

/* ---- ランク反映: サイトコントローラー待ちの表示 ---- */
/* 相手のサイトが更新を終えるのを待っているあいだ。止まったように見えて中断
   されやすいので、待っている状態だと分かる見た目にする。 */
#rank-sync-status.rank-sync-waiting {
  background: var(--color-warning-subtle); color: var(--color-warning);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-weight: 600;
}
#rank-sync-cancel-form.is-quiet { opacity: .5; }
#rank-sync-cancel-form.is-quiet:hover { opacity: 1; }

/* 凡例でまとめて選択を外すボタン。選んでいるときだけ出る。 */
.chart-legend-clear {
  font: inherit; font-size: var(--text-sm); line-height: 1;
  padding: 3px 8px; margin-left: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text-subtle); cursor: pointer;
}
.chart-legend-clear:hover { background: var(--color-surface-raised); color: var(--color-text); }

/* 横並びのカレンダーの料金。列幅を「狭い」(54px)にすると、5桁(例: 25400)の
   競合料金と最低料金の「¥25,400」が途中で切れていた。実測すると、5桁は字の
   大きさの2.95倍・「¥25,400」は3.86倍の幅が要る(Noto Sans JP・等幅数字。
   最安の緑と最低料金は太字なので、ふつうの太さの2.78倍より広い)。
   列幅から枠と余白を引いた残りに収まる大きさを計算で出し、どの列幅でも5桁が
   最後まで読めるようにする。「ふつう」(66px)以上では上限(14px)で頭打ちになり、
   これまでとほぼ同じ見た目のまま、6桁も入るようになる。 */
/* 変数は表のid側に置く。縦並び(.rv-vcal)には --rv-day-col が無いので、
   既定値(66px)を添えておく(添えないと指定ごと無効になり、字の大きさが
   思わぬところから降ってくる)。 */
#gantt-calendar-table {
  /* 入力欄は 枠1px×2 + 内側4px×2 + セルの余白4px×2 = 18px を使う。 */
  --rv-price-font: clamp(9px, calc((var(--rv-day-col, 66px) - 18px) / 3.15), 14px);
  /* 最低料金は入力欄ではないので、セルの余白(4px×2)と1pxの逃げだけ。 */
  --rv-min-price-font: clamp(9px, calc((var(--rv-day-col, 66px) - 9px) / 4.05), 14px);
  /* 消化率の「100.0%」も、列幅を「狭い」にすると切れていた。太字で3.65倍要る。 */
  --rv-num-font: clamp(9px, calc((var(--rv-day-col, 66px) - 8px) / 3.8), var(--text-sm));
}
#gantt-calendar-table .rv-comp-input { font-size: var(--rv-price-font); }
#gantt-calendar-table td.gantt-cell { font-size: var(--rv-num-font); }
#gantt-calendar-table td.rv-min-price {
  font-size: var(--rv-min-price-font);
  font-variant-numeric: tabular-nums;
}

/* 自分のログインパスワードの入口。設定する画面はあったのに、どこからも行けず、
   ほとんどの人が共通パスワードのままだった。サイドバーの下とトップのアカウント
   情報の両方から入れるようにする。 */
.app-sidebar-footer .app-nav-item--password { width: 100%; justify-content: flex-start; gap: var(--space-2); }
.app-sidebar-footer .app-nav-item--password .pill { margin-left: auto; font-size: var(--text-xs); }
.home-account-password {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.home-account-password .cell-sub { margin: 0; }
.home-account-password .button-link { margin-left: auto; }
@media (max-width: 820px) {
  .home-account-password .button-link { margin-left: 0; }
}

/* ---- クチコミ分析: 項目別の評価（レーダーチャート） ----
   総合点だけでは「どこで負けているか」が分からないので、項目ごとに競合と重ねる。
   4点台にかたまるため、目盛りは0起点にせず実際の値の少し外側で切っている
   （0起点だと全部が外周に張り付いて差が見えない）。 */
/* サイトごとに1枚ずつ並べる。広い画面は2列、狭い画面は縦に積む。 */
/* OTAごとに1枚ずつ並べる枠（項目別の評価・月ごとの件数）。**枠の数は4つで固定**。
   出せるサイトだけを並べていたので、じゃらんと楽天しか無い施設では2枚が横いっぱいに
   広がり、施設ごとにグラフの大きさが変わっていた（利用者の指定、2026-10-19）。 */
.site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.site-card { min-width: 0; }
.site-card-title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 700; }
.site-card .empty { margin: 0; }
@media (max-width: 1100px) { .site-grid { grid-template-columns: 1fr; } }
/* 項目別の評価は4サイトを1列に並べる（利用者の指定、2026-10-20）。
   狭い画面では読めなくなるので、幅に応じて 4→2→1 に落とす。 */
.site-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1500px) { .site-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .site-grid--four { grid-template-columns: 1fr; } }
/* 4つ並べると1枚が狭いので、凡例は詰めて出す。 */
.site-grid--four .radar-legend { font-size: var(--text-xs); }
.radar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.radar-card { min-width: 0; }
.radar-card-title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 700; }
/* 1枚が細くなるので、図の下に一覧を敷く(横に並べると図が小さくなりすぎる)。 */
.radar-wrap { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.radar-card .radar-wrap, .site-card .radar-wrap { flex-direction: column; }
.radar-card .radar-svg, .site-card .radar-svg { max-width: 100%; flex: 0 0 auto; }
.radar-card .radar-legend, .site-card .radar-legend { max-width: none; width: 100%; flex: 0 0 auto; }
@media (max-width: 820px) {
  .radar-grid { grid-template-columns: 1fr; }
}
/* 画面が広くても大きくしすぎない。横に伸ばすと軸の名前だけが離れていって、
   かえって形が読みにくくなる。余った幅は右の一覧(凡例)に使う。 */
.radar-svg { width: 100%; height: auto; flex: 2 1 420px; min-width: 0; max-width: 620px; }
.radar-ring { fill: none; stroke: var(--color-border); stroke-width: 1; }
.radar-ring.is-outer { stroke: var(--color-border-strong); }
.radar-axis { stroke: var(--color-border); stroke-width: 1; }
.radar-axis-label { font-size: 13px; fill: var(--color-text); }
.radar-tick { font-size: 11px; fill: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

.radar-shape { --radar-color: #2563eb; transition: opacity .12s ease; }
/* 面を塗るのは自施設だけ。競合まで塗ると、3件も重なった時点で濁って形が読めない。 */
.radar-area { fill: none; }
.radar-shape.is-self .radar-area { fill: var(--radar-color); opacity: .12; }
.radar-line { fill: none; stroke: var(--radar-color); stroke-width: 1.6; opacity: .8;
  stroke-linejoin: round; stroke-dasharray: 5 4; }
.radar-shape.is-self .radar-line { stroke-width: 2.6; opacity: 1; stroke-dasharray: none; }
.radar-dot { fill: var(--radar-color); r: 2.6; transition: r .1s ease; }
.radar-shape.is-self .radar-dot { r: 3.5; }
/* さわっている項目の点だけ大きくして、どの軸を見ているか分かるようにする。 */
.radar-dot.is-hot { r: 5; }
.radar-shape.is-self .radar-dot.is-hot { r: 6; }
/* 軸ごとの当たり判定。見えないが、ここにさわると全施設の点数が出る。 */
.radar-hit { fill: transparent; cursor: pointer; }
.radar-axis-label.is-hot { font-weight: 700; fill: var(--color-primary); }
/* 押して1つだけにしたときは、競合でも自施設と同じ濃さで見せる。 */
.radar-shape.is-picked .radar-line { stroke-width: 2.6; opacity: 1; }
.radar-shape.is-picked .radar-area { fill: var(--radar-color); opacity: .12; }
.radar-shape.is-dim { opacity: .18; }

.radar-center-bg { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1; }
.radar-center-value { text-anchor: middle; font-size: 19px; font-weight: 700; fill: var(--color-text);
  font-variant-numeric: tabular-nums; }
.radar-center-label { text-anchor: middle; font-size: 11px; fill: var(--color-text-subtle); }

.radar-legend { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; max-width: 360px; }
.radar-legend-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2); cursor: pointer; text-align: left; font-size: var(--text-sm);
}
.radar-legend-item:hover { background: var(--color-surface-raised); }
.radar-legend-item.is-picked { border-color: var(--color-border-strong); background: var(--color-surface-raised); }
/* 凡例の線の見本。自施設は実線、競合は点線（グラフの描き分けと合わせる）。 */
.radar-legend-key { width: 18px; height: 3px; border-radius: 2px; flex-shrink: 0;
  background: var(--radar-color, currentColor); }
.radar-legend-key[data-dashed] {
  background: repeating-linear-gradient(90deg,
    var(--radar-color, currentColor) 0 5px, transparent 5px 9px);
}
.radar-legend-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-legend-score { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.radar-legend-score .cell-sub { margin-left: var(--space-1); font-weight: 400; }
@media (max-width: 820px) {
  .radar-legend { flex: 1 1 100%; }
}

/* クチコミ一覧の「その項目の点」。下限と上限の2つを1つの欄のように並べる。 */
.filter-range { display: inline-flex; gap: var(--space-1); }
.review-item-score { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- プランの「詳細設定」: 区分を切り替えにして、縦に伸びないようにする ----
   項目が6区分あって開くと縦に長く、プランが何本も並ぶと目的の欄まで遠かった
   （利用者の指摘、2026-10-11）。区分ごとの切り替えにして1区分ずつ出す。
   横も、画面いっぱいまで広げると見出しと入力欄が離れて読みにくいので、
   読める幅で止める（この枠だけの話で、ほかの画面は今までどおり全幅を使う）。 */
.rate-plan-detail-row .rate-detail-body { max-width: 960px; }
.rate-detail-tabs {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin: 0 0 var(--space-2);
}
.rate-detail-tab {
  min-height: 34px; padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm); font-weight: 600; border-width: 1.5px;
  border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-muted);
}
.rate-detail-tab.is-active {
  background: var(--color-primary); border-color: var(--color-primary);
  color: #fff;
}
/* .rate-detail-section は display:grid なので、hidden だけでは消えない。 */
.rate-detail-section[hidden] { display: none !important; }
/* 切り替えのつまみが区分名を兼ねるので、中の見出しは出さない。
   見出しのぶんの列も要らなくなるので、入力欄を左いっぱいから並べる。 */
.rate-detail-body[data-tabbed] .rate-detail-head { display: none; }
.rate-detail-body[data-tabbed] .rate-detail-section {
  grid-template-columns: 1fr; border-top: none; padding-top: 0;
}
@media (max-width: 820px) {
  .rate-plan-detail-row .rate-detail-body { max-width: none; }
}

/* ---- OTAに反映の表: サイトの欄の幅をそろえ、サイト間のずれを赤くする ----
   以前は中身の長さで列幅がばらばらになり（説明文のサイトだけ極端に広い）、
   サイトどうしの見比べがしづらかった。列の幅を決め打ちにして、残りを
   「仕様書の内容」と各サイトで等分する（利用者の指定、2026-10-11）。 */
.ota-table { table-layout: fixed; width: 100%; }
.ota-table th.ota-col-check { width: 3.4rem; }
.ota-table th.ota-col-item { width: 8.2rem; }
/* 等分にするため、前の指定(min-width/max-width)は外す。はみ出す長い文は折る。
   見出しも折る（「Yahoo!トラベル（一休.comと同じ管理画面）」のような長い名前が
   隣の列へはみ出していた）。 */
.ota-table td.ota-cell { min-width: 0; max-width: none; overflow-wrap: anywhere; }
/* 上書き層の table.data-table th が white-space: nowrap なので、同じ強さでは
   勝てない。table.data-table を付けて折り返せるようにする。 */
table.data-table.ota-table th { white-space: normal; overflow-wrap: anywhere; }
/* 仕様書と違う（黄）より、サイトどうしのずれ（赤）を強く出す。
   「どれが正しいか」はこちらでは決められないので、色で気づかせるだけにする。 */
.ota-table td.is-odd {
  background: var(--color-danger-subtle);
  box-shadow: inset 0 0 0 2px var(--color-danger);
}
.ota-table tr.has-gap > th { color: var(--color-danger); }
.pill-ng { background: var(--color-danger-subtle); color: var(--color-danger); }
@media (max-width: 820px) {
  /* 狭い画面では等分にすると1列が読めない幅になるので、横に送る。 */
  .ota-table { table-layout: auto; width: auto; }
  .ota-table td.ota-cell { min-width: 12em; }
}

/* ---- OTAに反映: どのサイトが何になっているかを並べる ----
   赤く塗るだけだと、どこがどう違うのかを目で探すことになる（利用者の指摘、
   2026-10-11）。項目のところに「サイト名：いまの値」を1行ずつ出す。 */
.ota-gap-lines { margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.ota-gap-lines li {
  font-size: var(--text-xs); font-weight: normal; color: var(--color-text-muted);
  line-height: 1.5; overflow-wrap: anywhere;
}
.ota-gap-lines li:first-child { color: var(--color-text); }
/* 説明文は1000文字まで入るので、そのまま出すと1行で画面が埋まる。
   高さで止めて、必要なら中だけスクロールして読む。 */
.ota-table .ota-cell-body { max-height: 15em; overflow: auto; white-space: pre-wrap; }
/* 文章の「ここが違う」。欄ごと色を付けると、1000文字の中から目で探すことになる。 */
.ota-mark {
  background: var(--color-danger-subtle); color: var(--color-danger);
  border-radius: 3px; padding: 0 1px; font-weight: 700;
}
/* 相手にはあるのに、ここには無いところ。場所だけが分かるように細い印を置く。 */
.ota-mark--gone { padding: 0; border-left: 2px solid var(--color-danger); }
/* パッケージで使えない言葉。「ほかのサイトと違う」の赤とは別の色にする。 */
/* 欄の下に出す「何がだめか」。 */
.ota-ng-note { color: var(--color-warning); display: flex; align-items: flex-start; gap: var(--space-1); white-space: normal; }
/* パッケージで使えない言葉が入っているところ。入力したそばから赤く出す
   （利用者の指定、2026-10-13）。保存するまで分からないと、直すのが後回しになる。 */
.ota-ng-error {
  color: var(--color-danger); font-weight: 700; font-size: var(--text-xs);
  line-height: 1.5; white-space: normal; margin-top: var(--space-1);
}
.ota-ng-error:empty { display: none; }
.ota-table td.ota-spec-cell .is-ng {
  border-color: var(--color-danger);
  background: var(--color-danger-subtle);
}
.ota-mark--ng {
  background: var(--color-warning-subtle); color: var(--color-warning);
  box-shadow: inset 0 -2px 0 var(--color-warning);
}
/* 「OTAに反映」の仕様書の列を、その場で直せる欄にしたぶんの見た目。 */
.ota-table td.ota-spec-cell .ota-cell-body { max-height: none; }
.ota-spec-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.ota-spec-line label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); }
.ota-table td.ota-spec-cell .ota-spec-wide { width: 100%; }
.ota-table td.ota-spec-cell input[type="date"], .ota-table td.ota-spec-cell select { min-width: 0; max-width: 100%; }
.ota-table td.ota-spec-cell textarea { min-height: 7em; }
/* OTAに反映の「販売先と反映するサイト」。載せているか・プランコード・反映するかを
   サイトごとに1行で並べる（別々の枠だったものを1つにまとめた）。 */
.ota-channel-table { width: auto; }
.ota-channel-table th, .ota-channel-table td { vertical-align: middle; white-space: nowrap; }
.ota-channel-table tbody th { text-align: left; font-weight: 600; }
.ota-channel-table tr.is-off tbody th, .ota-channel-table tr.is-off th { color: var(--color-text-muted); }
.ota-channel-code { width: 11em; max-width: 100%; }
.ota-channel-table .ota-site { margin: 0; }
/* 反映する項目の「全て選択」「全て外す」。 */
.ota-check-all { align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
@media (max-width: 720px) {
  .ota-channel-table th, .ota-channel-table td { white-space: normal; }
  .ota-channel-code { width: 8em; }
}

/* ---- OTAに反映: 子供料金のマス ----
   1行につないだ文（小学生 大人と同じ・含む / 幼児(食事・布団) 受入不可 / …）は、
   列が狭いと折り返して読めなかった。施設仕様書の子供料金と同じ「区分 → 値」の
   並びにする。 */
/* 子供料金のマスだけは、空白をそのまま出す指定（pre-wrap）を外す。
   区分ごとの表を組むので、テンプレートの改行や字下げが空行になってしまう。 */
.ota-table .ota-cell-body--child { white-space: normal; max-height: none; }
.ota-child { display: grid; grid-template-columns: auto 1fr; gap: 1px var(--space-2);
  margin: 0; font-size: var(--text-xs); line-height: 1.5; }
.ota-child dt { color: var(--color-text-muted); white-space: nowrap; }
.ota-child dd { margin: 0; font-weight: 600; }
.ota-child-title { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-1); }
.ota-child-title:first-child { margin-top: 0; }
/* プラン設定の一覧: 管理名称の欄。入れていないときは、いまの販売プラン名を
   薄く出す（欄とその下の2段に分けず、1つにまとめた）。薄い＝まだ入れていない。 */
.rate-plan-table .rate-admin-name { width: 100%; }
.rate-plan-table .rate-admin-name::placeholder { color: var(--color-text-subtle); opacity: .85; }

/* 「OTAに反映」の表のうち、どのサイトにも欄が無い項目のかたまり。表の中で
   「ここから下は送らない」と分かるように、区切りの行を1本入れる。 */
/* 「仕様書の内容」の列は入力欄だけなので、改行をそのまま出す指定(pre-wrap)を外す。
   テンプレートの{% ... %}が残す改行が空行として出て、1行が3〜4行ぶんの高さに
   なっていた（対象の部屋は7つ並べると画面1枚ぶんになっていた）。 */
.ota-table td.ota-spec-cell .ota-cell-body { white-space: normal; }
.ota-table td.ota-spec-cell .inline-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 var(--space-3) var(--space-1) 0;
}
.ota-table td.ota-spec-cell .filter-row { margin: 0; gap: var(--space-1); }
.ota-table td.ota-spec-cell .filter-row > label { display: block; width: 100%; }
.ota-table td.ota-spec-cell .filter-row select { width: 100%; }
.ota-table tr.ota-group-row th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  border-top: 2px solid var(--border-strong, var(--border));
}
/* そのサイトに欄が無いところ。文字で書くと表がうるさいので斜線にする
   （利用者の指定、2026-10-12）。カーソルを合わせると理由が出る。 */
.ota-table td.ota-cell.is-na {
  color: var(--text-muted); text-align: center; vertical-align: middle;
  min-width: 6em;
  background-image: linear-gradient(to top right, transparent calc(50% - 0.5px),
    var(--color-border-strong) calc(50% - 0.5px), var(--color-border-strong) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));
}
/* 子供料金の区分×単位の表は列の幅に収まらないので、その行の下へ横いっぱいに置く。 */
.ota-table tr.ota-child-edit .table-scroll { max-width: 100%; }

/* ---- OTAに反映の表を詰める（利用者の指定、2026-10-12）----
   「項目ごとの枠が無駄に広い」。見てみると、1行につき100pxほどが何も書いていない
   余白だった。原因は3つ。
   1. 「仕様書の内容」のマスに pre-wrap が効いていて、テンプレートの字下げ（改行＋
      空白）が空行として出ていた。中の .ota-cell-body だけ normal に戻してあったが、
      マス本体の直下にある改行はそのまま残っていたため、上下に2行ずつ入っていた。
   2. 入力欄の高さが48px（指で押す部品の最小）だったので、1つ置くだけで1行ぶんの
      倍の高さになっていた。この表は見比べながら直す画面なので、小さいボタンと
      同じ40pxにそろえる。
   3. 日付の欄が列に収まらず、開始と終了が上下に折り返していた。「仕様書の内容」の
      列を少し広くし、欄の幅を決めて1行に収める。 */
.ota-table td.ota-spec-cell { white-space: normal; }
.ota-table th.ota-col-spec { width: 24%; }
/* 行の上下の余白。表全体で詰める。 */
.ota-table > thead > tr > th,
.ota-table > tbody > tr > th,
.ota-table > tbody > tr > td { padding-block: var(--space-2); }
/* 入力欄は小さいボタンと同じ高さ（40px）に。文字の大きさは変えない。 */
.ota-table td.ota-spec-cell input:not([type="checkbox"]):not([type="radio"]),
.ota-table td.ota-spec-cell select {
  min-height: 40px; padding-block: var(--space-1);
}
/* 日付は「2026-10-12」が入ればよい。2つ並べても1行に収まる幅にする。 */
.ota-table td.ota-spec-cell input[type="date"] { width: 8.4em; padding-inline: var(--space-2); }
.ota-table td.ota-spec-cell select { padding-inline: var(--space-2); max-width: 100%; }
/* 文章の欄は、下の「いまの内容」と見比べられればよいので少し低くする。 */
.ota-table td.ota-spec-cell textarea { min-height: 5.5em; }
.ota-table td.ota-spec-cell .ota-spec-line { margin-top: var(--space-1); }

/* ==========================================================================
   施設仕様書のプラン設定(iPadなど幅の狭い画面で崩れていた、2026-10-11)
   - 「プラン設定を保存」のバーは画面の下に貼り付く作り(.form-actions)だが、
     iPadでは画面の途中に貼り付いて表の行に重なって見えた。プランの表は長くならない
     ので、ここだけ貼り付けずに表のすぐ下へ置く。
   - 表が約1060px幅あり、右端の「OTA反映」が切れていた。幅の狭い画面では
     「積み重ね」(読むだけの補足)を隠し、入力欄を少し縮めて収める。
   ========================================================================== */
#rate-plan-form > .form-actions { position: static; box-shadow: none; margin-top: var(--space-3); }
.rate-plan-table td input[type="number"] { width: 84px !important; }
.rate-plan-table td.rate-row-name input[type="text"] { min-width: 10em; }
/* 「作成済み」などの印は「詳細設定」の下へ積む。横に並べると表が画面より広くなり、
   右端の「販売中」のチェックが切れて見えなかった（1366px幅のノートで約60px。
   利用者の指摘、2026-11-02）。 */
.rate-plan-table td.rate-plan-setting > .pill,
.rate-plan-table td.rate-plan-setting > .cell-sub { display: block; width: fit-content; margin-top: var(--space-1); }
/* 掲載期間・販売期間も、サイトごとの日付の切れ目で折り返せるようにする（同じ理由）。 */
.rate-plan-table td.rate-period-cell { white-space: normal; min-width: 11em; }
.rate-plan-table td.rate-period-cell > div > span { display: inline-block; white-space: nowrap; margin-right: var(--space-1); }
@media (max-width: 1279px) {
  .rate-plan-table thead th:nth-child(6),
  .rate-plan-table tbody td:nth-child(6) { display: none; }
  .rate-plan-table td select { max-width: 9.5em; }
  .rate-plan-table td.cell-actions .sale-check span { font-size: var(--text-xs); }
}

/* ---- プラン設定: 掲載期間・販売期間 ----
   延長を忘れるとそのまま売り逃しになるので、プランを並べた表で見えるようにした。
   ほかのプランと違う期間だけ赤で出す。 */
/* 「1年延ばす」は、この列のことなので見出しの横に置く。 */
.rate-plan-table th .rate-period-extend {
  display: flex; width: fit-content; margin-top: var(--space-1); font-weight: 400;
}
.rate-period-cell { white-space: nowrap; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.rate-period-cell .is-odd { color: var(--color-danger); font-weight: 700; }
.rate-period-cell small { display: block; font-size: var(--text-xs); font-weight: 400; }
/* サイトごとの期間（じゃらん・楽天）。どこまで延びているかを横に並べる。 */
.rate-period-cell span { margin-left: var(--space-2); }
.rate-period-cell span.is-odd { color: var(--color-danger); font-weight: 700; }
/* 通年のつもりなのに、じゃらん・楽天の側が半年を切っているプランの知らせ。
   表の赤だけだと見落とすので、プランの上に出す。 */
.rate-period-warn {
  color: var(--color-danger); background: var(--color-danger-subtle);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
}
/* 期間をまとめて通年にするボタンは、販売中／販売終了の切り替えとは役目が違うので右へ寄せる。 */
.sale-filter > button[formaction] { margin-left: auto; }
@media (max-width: 720px) { .rate-period-cell { white-space: normal; } }

/* ==========================================================================
   レベニュー「売れ方から提案」
   見立てで行の色を変える。赤＝手を打つ日、青＝値上げできる日。
   ========================================================================== */
.pace-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pace-table td .cell-sub { display: block; }
.pace-table tr.pace-up > td { background: rgba(37, 99, 235, .07); }
.pace-table tr.pace-down > td { background: rgba(220, 38, 38, .06); }
.pace-table tr.pace-soldout > td { background: rgba(220, 38, 38, .12); }
.pace-table tr.pace-stock > td { background: var(--surface-2); }
.pace-head { font-weight: 600; margin-right: var(--space-4); }
.pace-head .cell-sub { display: inline; font-weight: normal; margin-left: var(--space-1); }

/* プラン設定の一覧の「OTAに作成」小窓（2026-10-11）。部屋タイプの枠は「OTA反映」の画面と同じ見た目 */

/* 余分なスペースの知らせ（static/js/space_check.js、2026-10-12） */
.space-alert { margin-top: 4px; padding: 6px 8px; border-radius: var(--radius-md); background: var(--color-warning-subtle, #fff6e0); color: var(--color-warning, #8a5a00); font-size: var(--text-sm); }
.space-alert.is-soft { background: var(--color-surface-raised); color: var(--color-text-subtle); }
.space-alert-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.space-alert-head > span { flex: 1 1 auto; min-width: 0; }
.space-alert-list { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 2px; }
.space-alert-list code { margin-left: 4px; white-space: pre-wrap; word-break: break-all; color: var(--color-text); background: var(--color-surface); padding: 0 3px; border-radius: 3px; }
.space-alert-item { all: unset; cursor: pointer; display: flex; gap: 6px; align-items: baseline; width: 100%; padding: 2px 4px; border-radius: 4px; }
.space-alert-item:hover, .space-alert-item:focus-visible { background: var(--color-surface); outline: 1px solid var(--color-border); }
.space-alert-item b { flex: none; font-weight: 600; }
.space-alert-list { list-style: none; padding-left: 0; max-height: 14em; overflow: auto; }
.space-alert-list mark { background: var(--color-warning-subtle); color: var(--color-warning); border-bottom: 2px solid var(--color-warning); }
.space-alert-line { flex: none; color: var(--color-text-subtle); font-size: var(--text-xs); }

/* ランクの行の上に出す「売れ方から見た提案」。カレンダーの数字の邪魔を
   しないよう、色は薄く・文字は小さく。 */
/* 提案のマス。中身は1日1つの枠（.rv-pace-box）で、すぐ上のランクの欄と同じ
   幅・同じ高さにそろえる（利用者の指定、2026-10-13）。
   以前は文字をそのまま置いていたので、ランクの入った日だけ2行になったり、
   「このまま」と「P→O」で幅がばらばらに見えていた。 */
.rv-pace-row > td.rv-pace-cell { text-align: center; vertical-align: middle; }

/* ==========================================================================
   取得・反映の進み具合（macros/run_progress.html）
   もとは「OTAに反映」だけにあったものを、どの取得・反映でも同じ見た目で
   出せるようにした（利用者の指定、2026-10-12）。
   ========================================================================== */
.run-running {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2); margin-bottom: var(--space-2);
}
/* <p> の中にも置けるよう入れ物は span。中の補足は横に並べる。 */
.run-running .cell-sub { display: inline; }
.run-step { overflow-wrap: anywhere; }
.run-progress {
  display: inline-block; width: 12em; max-width: 40vw; height: 8px;
  background: var(--color-border); border-radius: var(--radius-full); overflow: hidden;
}
.run-progress-fill {
  display: block; height: 100%; background: var(--color-primary, #2563eb);
  border-radius: var(--radius-full); transition: width .4s ease;
}
.run-progress-num { font-variant-numeric: tabular-nums; }
/* 全体の件数が分からない取得。%を出す代わりに、流れる帯で「動いている」とだけ伝える。 */
.run-progress.is-unknown .run-progress-fill {
  width: 40%;
  animation: run-progress-slide 1.4s ease-in-out infinite;
}
@keyframes run-progress-slide {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .run-progress.is-unknown .run-progress-fill { animation: none; width: 100%; opacity: .5; }
}

/* 提案ロジックの画面。ふだんの進み方の表と、上げ下げの決め方。 */
.pace-curve td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pace-curve td .cell-sub { display: block; }
.pace-rules { margin: 0; padding-left: 1.2em; }
.pace-rules li { margin-bottom: var(--space-2); }

/* 提案ロジックの部屋タイプの切り替え。上のタブより一段小さく。 */
.tab-strip--sub { margin-top: calc(var(--space-2) * -1); margin-bottom: var(--space-3); }
.tab-strip--sub .tab-link { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); }

/* 提案の枠。すぐ上のランクの欄(.gantt-inline-input)と同じ大きさ・同じ角丸に
   そろえ、上げ下げは色で見せる。ランクの入った日だけ形が変わらないよう、
   「このまま」も在庫の知らせも同じ枠に入れる（利用者の指定、2026-10-13）。
   ボタンにも当たるので、全体のボタンの指定(min-height 48px など)に負けない
   よう、表のid経由で上書きする。 */
#gantt-calendar-table .rv-pace-box {
  display: block; box-sizing: border-box; width: 100%; margin: 0;
  min-height: 0; height: 26px; line-height: 22px; padding: 0 2px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  text-align: center; white-space: nowrap; overflow: hidden;
  font-family: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
  /* いちばん長い中身は「このまま」（全角4文字）。列の幅から決める。 */
  font-size: clamp(9px, calc((var(--rv-day-col, 66px) - 14px) / 4.1), 13px);
  background: transparent; color: var(--color-text-subtle);
}
/* 矢印は、前後のランクより一段弱く出す（読むのはランクのほうなので）。 */
#gantt-calendar-table .rv-pace-box b { font-weight: inherit; opacity: .55; padding: 0 1px; }
#gantt-calendar-table .rv-pace-box.rv-pace-up {
  background: rgba(37, 99, 235, .10); border-color: rgba(37, 99, 235, .45); color: var(--color-primary);
}
#gantt-calendar-table .rv-pace-box.rv-pace-down {
  background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .40); color: var(--color-danger);
}
#gantt-calendar-table .rv-pace-box.rv-pace-soldout {
  background: rgba(220, 38, 38, .16); border-color: rgba(220, 38, 38, .40); color: var(--color-danger);
}
#gantt-calendar-table .rv-pace-box.rv-pace-stock {
  background: var(--color-surface-raised); border-color: var(--color-border); color: var(--color-text-muted);
}
/* 「このまま」は動かさなくてよい日なので、枠線も地色も持たせず静かに出す。 */
#gantt-calendar-table .rv-pace-box.rv-pace-keep { font-weight: 600; }

/* 提案のランクは押せる。押すとすぐ上のランクの欄に入る。 */
#gantt-calendar-table button.rv-pace-apply { cursor: pointer; }
#gantt-calendar-table button.rv-pace-apply:hover,
#gantt-calendar-table button.rv-pace-apply:focus-visible {
  border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary);
}
#gantt-calendar-table button.rv-pace-apply.is-applied { opacity: .5; }

/* ── フォトギャラリー（施設仕様書の設定仕様書タブ） ──
   「①写真を入れる → ②整える → ③サイトに載せる」の3段。カードは畳んでおき、
   サイトごとの細かい設定は「設定」を開いたところへ入れる（1枚に操作が全部出ていて
   見づらい、という利用者の指摘、2026-10-14）。
   PCでは横に並べて一覧性を取り、スマホでは1枚ずつ縦に積む（画面の決まり）。 */
.photo-head-state { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* 手順の枠。どこから手を付けるかが分かるように、番号を振って区切る。 */
.photo-step {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.photo-step-title {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: 600;
}
.photo-step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-size: .8em;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.photo-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.photo-card.is-dragging { opacity: .5; }
/* 基準のサイトに無い写真は、ひと目で分かるようにする。 */
.photo-card.is-nobase { border-color: var(--color-warning); }
.photo-card-head { display: flex; align-items: center; gap: 2px; }
.photo-card-head .grow { flex: 1; }
.photo-no { font-size: .72rem; color: var(--color-text-muted); }
.photo-pick { display: inline-flex; align-items: center; }
/* 畳んでいても「見ておくことがある」と分かる印。 */
.photo-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3em; height: 1.3em; border-radius: 50%;
  background: var(--color-warning-subtle); color: var(--color-warning);
  font-size: .72rem; font-weight: 700;
}
/* 4:3の枠に収めて並べる。写真の縦横がばらついても行が崩れない。 */
.photo-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-bg); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ふだん見るところ。区分・キャプション・掲載だけ。 */
.photo-main { display: flex; flex-direction: column; gap: 4px; }
.photo-main input[type="text"], .photo-main select { width: 100%; font-size: .8rem; }
.photo-main .checkbox-inline { font-size: .75rem; font-weight: 400; }
.photo-category { font-weight: 600; }
.photo-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-1); flex-wrap: wrap;
  padding-top: 4px; margin-top: auto;
  border-top: 1px solid var(--color-border);
}
.photo-where-sites { display: inline-flex; gap: 2px; }
.photo-where-sites .pill { padding: 0 4px; font-size: .68rem; }

/* 押したときだけ出るところ。サイトごとの違いはここにまとめる。 */
.photo-more { border-top: 1px solid var(--color-border); padding-top: 4px; }
.photo-more summary { cursor: pointer; color: var(--color-text-muted); }
.photo-more[open] summary { margin-bottom: var(--space-1); }
.photo-site-box {
  border-left: 2px solid var(--color-border);
  padding: 2px 0 2px var(--space-2);
  margin-bottom: var(--space-2);
  display: flex; flex-direction: column; gap: 3px;
}
.photo-site-name { font-size: .72rem; font-weight: 600; color: var(--color-text-muted); }
.photo-site-box label { font-size: .75rem; }
.photo-site-box input[type="text"], .photo-site-box select, .photo-site-box textarea { width: 100%; }
.photo-site-box .checkbox-inline { font-weight: 400; }
.photo-more-foot { display: flex; justify-content: flex-end; }
.photo-where { color: var(--color-text-muted); margin: 0 0 var(--space-2); line-height: 1.4; }
.photo-warn { color: var(--color-danger); margin: 0 0 2px; line-height: 1.4; }

/* まとめて区分を変える・消す帯。 */
.photo-bulk {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2); margin-bottom: var(--space-2);
  border: 1px solid var(--color-primary); border-radius: var(--radius-md);
  background: var(--color-primary-subtle); font-size: var(--text-sm);
  position: sticky; top: 0; z-index: 3;
}
.photo-bulk .grow { flex: 1; }
.photo-bulk-sep { color: var(--color-text-subtle); }
.sale-filter .is-warn { color: var(--color-danger); }

/* サイトに載せるところ。 */
.photo-sync-state { margin-top: var(--space-2); }
.photo-sync-line { margin: 0 0 var(--space-1); line-height: 1.5; }

@media (max-width: 600px) {
  .photo-grid { grid-template-columns: 1fr; }
  .photo-bulk .grow { flex-basis: 100%; height: 0; }
  .photo-bulk select { max-width: 9em; }
  /* 狭い画面では、手順の中の並びを積む。選択肢の長い name（「すべてのサイト
     （じゃらん→楽天→一休）」など）が、そのままだと画面からはみ出す。 */
  .photo-step { padding: var(--space-2); }
  .photo-step .filter-row { gap: var(--space-2); }
  .photo-step .filter-row > label,
  .photo-step .filter-row > button,
  .photo-step .filter-row > span { flex-basis: 100%; min-width: 0; }
  .photo-step .filter-row > label.checkbox-inline { flex-basis: auto; }
  .photo-step .filter-row select,
  .photo-step .filter-row input[type="file"] { max-width: 100%; }
}

/* 狭い画面でタブが多いとき、1行に収まらず画面が横に伸びていた
   （「設定仕様書」タブの中が6つになったため）。狭い画面では折り返して積む。 */
@media (max-width: 600px) {
  .tab-strip { flex-wrap: wrap; }
}

/* じゃらん（基準）に無い写真は、ひと目で分かるようにする。 */
.photo-card.is-nobase { border-color: var(--color-warning); }
.photo-where-sites { display: inline-flex; gap: 2px; margin-right: 4px; }
.photo-where-sites .pill { padding: 0 4px; font-size: .68rem; }
.photo-bulk-sep { color: var(--color-text-subtle); }

/* 子供料金の「100円」。100%のつもりで単位を直し忘れたもの（利用者の指定、2026-10-14）。
   打った時点で赤くして、保存も止める。 */
.child-100-warn {
  color: var(--color-danger); font-weight: 700; font-size: var(--text-xs);
  line-height: 1.4; margin-top: var(--space-1); white-space: normal; max-width: 22em;
}
.child-price-table .is-ng { border-color: var(--color-danger); background: var(--color-danger-subtle); }

/* サイトごとの細かい設定は、ふだん出さない（ほとんど使わないため。利用者の指摘、
   2026-10-14）。上のスイッチを入れたときだけ出す。欄そのものは画面に残っている
   ので、出していなくても値はそのまま保存される。 */
.photo-grid .photo-more { display: none; }
.photo-grid.show-more .photo-more { display: block; }
.photo-more-switch { margin-left: auto; }
.photo-sort-note { margin: 0 0 var(--space-2); }
.photo-main input[data-photo-ikyu-caption] { font-size: .75rem; }

/* るるぶ（JTB PICS）のログイン。メールのコードが要るので、SC/OTAの行の中で
   ログイン→コード入力まで済ませる（利用者の指定、2026-10-14）。 */
.rurubu-login { margin-top: var(--space-2); }
.rurubu-login .filter-row { margin: 0; gap: var(--space-2); align-items: flex-end; }
.rurubu-login-ng { color: var(--color-danger); font-weight: 700; }

/* フォトギャラリーの保存は、貼り付けにしない。区分ごとに見るので1画面に収まる
   ことが多く、貼り付けると下のカードに被って読めなくなる（利用者の画面で確認、
   2026-10-14）。 */
#photo-form .form-actions { position: static; box-shadow: none; }

/* フォトギャラリーの並べ替え。つかんで運ぶ（↑↓はやめた。利用者の指定、2026-10-14）。
   touch-action: none は、指でつかんだときに画面がスクロールしてしまうのを止める
   （遠くへ運ぶためのスクロールは、こちらで面倒を見る）。 */
/* 部屋タイプ・プラン設定では、つまみは「並び替え」の見方のときだけ出す決まりに
   なっている（上の [data-rate-panel]:not(.is-sort-view) .drag-grip）。
   フォトギャラリーはつねに並べ替えられるので、こちらは出しておく。 */
[data-rate-panel="photos"] .photo-card .drag-grip,
.photo-card .drag-grip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text-muted); font-size: .72rem;
  cursor: grab; touch-action: none; user-select: none;
}
.photo-card .drag-grip:active { cursor: grabbing; }
.photo-card.is-dragging {
  opacity: .55;
  outline: 2px dashed var(--color-primary);
  outline-offset: 2px;
}
/* 運んでいるあいだ、下の文字を選んでしまわないように。 */
.photo-grid:has(.is-dragging) { user-select: none; }

/* 「ギャラリーに載せるものだけ」の切り替え。区分の絞り込みとは役目が違うので、
   帯の右端に寄せて離しておく（利用者の指定、2026-10-14）。 */
[data-photo-filter] > [data-photo-gallery-only] { margin-left: auto; }
[data-photo-filter] > [data-photo-gallery-only].is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* 削除と「サイトからも消す」はひとまとまりの操作。囲って、別々の2つに
   見えないようにする（利用者の指定、2026-10-14）。 */
.photo-del {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
}
.photo-del .checkbox-inline { margin: 0; }
/* サイトからも消すときは、戻せない操作だと分かるようにする。 */
.photo-del.is-hard { border-color: var(--color-danger); }

/* 同じ写真らしい組。左右に並べて見比べる（切り方が違うだけかどうかは、
   並べれば一目で分かる。利用者の指摘、2026-10-14）。 */
.photo-pair-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.photo-pair {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "pick shots" "pick note";
  align-items: start;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.photo-pair:hover { background: var(--color-surface-hover, #f7f7f7); }
.photo-pair > input { grid-area: pick; margin-top: 4px; }
.photo-pair-shots { grid-area: shots; display: flex; gap: 4px; }
.photo-pair-shots img {
  width: 50%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-border);
}
.photo-pair-note { grid-area: note; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.photo-pair-plus { color: var(--color-text-muted); }
@media (max-width: 640px) {
  .photo-pair-list { grid-template-columns: 1fr; }
}

/* 同じ写真らしい組は、ふだん畳んでおく（組が多いと画面が長くなりすぎる。
   利用者の指定、2026-10-14）。見出しをつまみにして開け閉めする。 */
.photo-pairs-box > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.photo-pairs-box > summary::-webkit-details-marker { display: none; }
.photo-pairs-box > summary::after {
  content: "開く";
  font-size: var(--text-sm);
  font-weight: normal;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  padding: 1px 8px;
}
.photo-pairs-box[open] > summary::after { content: "閉じる"; }
.photo-pairs-box > summary:hover::after { border-color: var(--color-primary); }

/* キャプションで探す欄。区分のボタンと同じ帯に置く。 */
.photo-find {
  min-width: 260px;
  flex: 1 1 260px;
  max-width: 420px;
}
/* 探しているあいだは区分をまたいで出すので、並べ替えのつまみは使えない。 */
.photo-grid.is-finding .drag-grip { opacity: .35; pointer-events: none; }

/* 「中断する」は進み具合のすぐ下に、小さく置く。 */
.photo-stop { margin: var(--space-2) 0 0; }

/* ── プロモーションの参画（編集画面の施設の表。利用者の指定、2026-10-15）── */
.facility-form-table tr.is-entry-done td { background: var(--color-primary-subtle); }
.facility-form-table tr.is-entry-other td { color: var(--color-text-subtle); }
.entry-ms { position: relative; min-width: 260px; }
.entry-ms > summary { list-style: none; cursor: pointer; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 4px 28px 4px 8px; min-height: 32px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: var(--color-surface); position: relative; }
.entry-ms > summary::-webkit-details-marker { display: none; }
.entry-ms > summary::after { content: "▾"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--color-text-subtle); }
.entry-ms[open] > summary { border-color: var(--color-primary); }
.entry-ms .placeholder { color: var(--color-text-subtle); font-size: var(--text-sm); }
.entry-tag { font-size: var(--text-xs); padding: 0 8px; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-primary); white-space: nowrap; }
.entry-ms-list { position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); min-width: 320px; max-width: 520px; max-height: 300px; overflow: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 2px; }
.entry-ms-list label { display: flex; gap: 8px; align-items: flex-start; padding: 4px 6px; border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; }
.entry-ms-list label:hover { background: var(--color-surface-raised); }
.entry-ikyu { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.entry-act { white-space: nowrap; }
.entry-status { font-size: var(--text-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-full); border: 1px solid currentColor; }
.entry-status--accepted { color: var(--color-warning); }
.entry-status--running { color: var(--color-warning); }
.entry-status--done { color: var(--color-primary); }
.entry-status--failed { color: var(--color-danger); }
.entry-act .small { margin-left: 6px; }
/* 申し込みの結果（止まった理由など）は折り返して、行の下に出す。 */
.entry-msg { white-space: normal; max-width: 360px; margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-muted); }
.entry-msg.is-error { color: var(--color-danger); }
.entry-bulk { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-3); }
.entry-bulk p { flex-basis: 100%; margin: 0; }

/* レベニューの表示設定: 区分の中の行(残室・販室…)を上下で並べ替える一覧。 */
.rv-subrow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex-basis: 100%; }
.rv-subrow { display: flex; align-items: center; gap: var(--space-1); }
.rv-subrow .icon-button { padding: 2px 4px; }

/* 部屋タイプの詳細設定：OTAに登録する内容 */
.room-ota { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border, #ddd); display: flex; flex-direction: column; gap: 8px; }
.room-ota-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.room-ota-grid label { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.room-ota-grid .room-ota-wide { grid-column: 1 / -1; }
.room-ota-pair { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.room-ota-pair input[type=number] { width: 70px; }
.room-ota-beds input[type=number] { width: 70px; font-variant-numeric: tabular-nums; }
.room-ota-beds td, .room-ota-beds th { padding: 4px 6px; }
.room-ota-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .85rem; }
.room-ota-checks-head { font-weight: 600; min-width: 3em; }

/* ==========================================================================
   料金/売止反映の「送り先」（プラングループセットと、流す対象の紐づけ）
   サイトコントローラーは同じIDの二重ログインを許さないので、送り先を並べて
   1回のログインで上から順に流す（利用者の指定、2026-10-19）。
   ========================================================================== */
#rv-sync-groups { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--space-3); }
.rv-sync-group {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
}
.rv-sync-group > legend {
  font-size: var(--text-sm); font-weight: 700; padding: 0 var(--space-2);
  display: flex; align-items: center; gap: var(--space-2);
}
.rv-sync-group > legend button { font-weight: normal; }
/* 流す対象のチェックは、数が増えても1行に詰めて折り返す。 */
.rv-sync-group-targets {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-3);
}
.rv-sync-group-targets .inline-check { margin-top: 0; font-size: var(--text-sm); font-weight: normal; }
.rv-sync-group .rv-sync-conditions { flex-basis: 100%; border: 0; padding: 0; }
.rv-sync-group-add { flex-basis: 100%; margin: 0; }
.rv-sync-group-pick { font-size: var(--text-sm); color: var(--color-text-subtle); }

/* クチコミ分析の「宿の返信率」。率を大きく、分母は下に小さく置く。 */
.review-reply-table td { font-variant-numeric: tabular-nums; }
.review-reply-table td .cell-sub { display: block; }

/* クロス集計の「差(pt)」の列。自館と市場（競合）を並べたときだけ出る。 */
.crosstab-table .ct-gap-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-left: 2px solid var(--color-border);
  white-space: nowrap;
}
.crosstab-table .ct-gap-col.is-behind { background: #fde2e1; }  /* 市場より少ない */
.crosstab-table .ct-gap-col.is-ahead  { background: #e3f2e1; }  /* 市場より多い */

/* 部屋IDの確認画面：いま入っているIDと違うとき */
.room-id-now { color: var(--color-danger, #c0392b); margin-left: 2px; }

/* 部屋ID：サイトコントローラーから読み込む（CSVより目立たせる） */
.sc-room-id-fetch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 24px 0 8px; }
.sc-room-id-btn { font-size: 1.05rem; padding: 12px 22px; }
#sc-room-id-status a { font-weight: 600; }

/* プラン参画（プロモーション一覧の「プラン参画」タブ）。セールごとに開く枠、施設ごとに「元値 → 参画」の組。 */
.plan-site-tabs { margin-top: calc(-1 * var(--space-2)); }
.plan-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); margin-bottom: var(--space-3); }
.plan-card > summary { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); cursor: pointer; }
.plan-card-body { padding: 0 var(--space-4) var(--space-4); display: grid; gap: var(--space-3); }
.plan-cond { font-size: var(--text-sm); background: var(--color-surface-raised); border-radius: var(--radius-sm, 4px); padding: var(--space-2) var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.chip-site { font-size: var(--text-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-full); border: 1px solid currentColor; }
.chip-site--jalan { color: #e2501d; }
.chip-site--rakuten { color: #bf0000; }
.plan-table-wrap { overflow-x: auto; }
.plan-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: var(--text-sm); }
.plan-table th { text-align: left; font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.plan-table td { padding: var(--space-2); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.plan-fac { width: 170px; font-weight: 700; white-space: nowrap; }
.plan-act { width: 230px; }
.plan-act .small { margin-top: 4px; }
.plan-pair { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 24px; gap: 6px; align-items: center; }
.plan-pair + .plan-pair { margin-top: 6px; }
.plan-pair select { width: 100%; min-width: 0; }
.plan-arrow { color: var(--color-text-muted); text-align: center; }
.plan-x { border: 0; background: none; color: var(--color-text-muted); cursor: pointer; font-size: 16px; }
.plan-warn { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-warning); }
.plan-done-pair { font-size: var(--text-sm); }
.plan-done-pair + .plan-done-pair { margin-top: 4px; }
.plan-done-pair .code { color: var(--color-text-muted); font-size: var(--text-xs); }
.plan-form .inline-check { margin-top: 6px; font-size: var(--text-xs); }
.link-button { border: 0; background: none; color: var(--color-primary); cursor: pointer; padding: 4px 0 0; font-size: var(--text-xs); }
/* クチコミ分析の中のタブ。マーケティングの5タブのすぐ下に並ぶので、少し離す。 */
.review-subtabs { margin-top: var(--space-4); }

/* クロス集計の「対象」。どの施設を入れるかをチェックで選ぶ。 */
.ct-target-pick {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  min-width: 320px;
  flex: 1 1 360px;
}
.ct-target-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}
.ct-target-count { font-size: var(--text-sm); color: var(--color-text-muted); }
.ct-target-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-3);
  max-height: 128px;
  overflow-y: auto;
}
.ct-target-list .checkbox-inline { margin: 0; }

/* 「比較」。マスの2段目に、えらんだ競合の値と差を小さく出す
   （分析ツールの期間比較と同じ見せ方。利用者の指定、2026-10-20）。 */
.crosstab-table .ct-cmp-line {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-top: 2px;
}
.crosstab-table .ct-cmp-line .up { color: var(--color-success); }
.crosstab-table .ct-cmp-line .down { color: var(--color-danger); }

/* 比較しているときに、何と何を比べているかを表の上に出す。 */
.ct-cmp-note {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
/* 参画中の帯は、表の狭い欄（参画の列）に収まる長さにする。 */
[data-entry-progress] { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px); align-items: center; white-space: normal; }
[data-entry-progress] .run-running { margin-bottom: 0; }
[data-entry-progress] .run-progress { width: 7em; }

/* リサーチくん：売っているプランと部屋の構成。 */
.research-mix-table td.num, .research-mix-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.research-mix-table tr.is-own > th { background: var(--color-primary-subtle); }
.research-mix-table td.is-none { color: var(--color-text-subtle); }
.research-mix-table .mix-share {
  display: block;
  font-size: 11px;
  color: var(--color-text-subtle);
}
.research-mix-table .mix-when { font-size: var(--text-xs); color: var(--color-text-muted); }
.research-mix-table .empty-cell { color: var(--color-text-muted); font-size: var(--text-sm); }

/* リサーチくん：施設名を押して開く、プランと部屋の中身。 */
.research-mix-table .mix-open {
  font-size: inherit;
  padding: 0;
  text-align: left;
  font-weight: inherit;
}
.research-mix-table .mix-open::after { content: " ▾"; font-size: 11px; }
.research-mix-table .mix-open[aria-expanded="true"]::after { content: " ▴"; }
.research-mix-table .mix-detail-row > td { padding: 0; background: var(--color-surface-raised); }
.mix-detail { padding: 12px 16px 16px; }
.mix-detail-head { font-weight: 600; margin-bottom: 8px; }
/* プランも部屋も列が多いので、横に並べず上下に置いて幅いっぱいに使う。 */
.mix-detail-cols { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
/* 中身が長いと列が縮まずに横へはみ出すので、縮んでよいことを書いておく。 */
.mix-detail-col { min-width: 0; }
.mix-detail-title { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 4px; }
/* 列は中身なりの幅にして、入りきらなければ横に送る（名前だけは折り返す）。 */
.mix-detail-table { font-size: var(--text-sm); width: max-content; min-width: 100%; }
.mix-detail-table th { font-weight: 500; }
.mix-detail-table td, .mix-detail-table thead th { white-space: nowrap; }
.mix-detail-table tbody th {
  font-weight: 400;
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 12em;
  max-width: 34em;
}
.mix-detail-table td.num, .mix-detail-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mix-detail-table .mix-when { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.mix-detail .table-scroll { max-height: 420px; overflow: auto; }
.mix-detail-head .mix-bottom {
  margin-left: 10px;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.mix-detail-table .mix-share { display: block; font-size: 11px; color: var(--color-text-subtle); }

/* プロモーション一覧：施設で絞り込んだとき、その施設がまだ参画していない企画。
   探せるように出すが、参画している企画と見分けられるよう薄くする
   （利用者の指定、2026-10-20）。 */
/* 参画している企画は左に緑の帯、未参画は灰色の点線＋薄い地色。名前の横にも
   「参画中」「未参画」の印を出す。色だけだと見分けにくかった（利用者の指定）。 */
.promo-card.is-joined { border-left: 5px solid var(--color-success); }
.promo-card.is-unjoined {
  background: var(--color-surface-raised);
  border: 1px dashed var(--color-border-strong);
  border-left: 5px dashed var(--color-text-subtle);
}
.promo-card.is-unjoined .promo-name { color: var(--color-text-subtle); }
.badge-joined { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.badge-unjoined { background: transparent; color: var(--color-text-subtle); border: 1px dashed var(--color-text-subtle); }
.chip-unjoined { background: transparent; border-style: dashed; color: var(--color-text-subtle); }

/* 料金取得のマスに出す「その料金の部屋タイプ名」。名前は長いので1行に収める
   （全部はマスに乗せたときに出る。利用者の指定、2026-10-20）。 */
.price-matrix-cell .price-room {
  font-size: var(--text-xs); color: var(--color-text-subtle);
  max-width: 11em; margin: 0 auto;
  /* 部屋タイプ名は長いので切り詰めるが、定員は切らずに最後まで出す（2026-10-25）。 */
  display: flex; gap: 4px; align-items: baseline; justify-content: center;
}
.price-matrix-cell .price-room-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 料金取得の中のタブ。 */
.price-subtabs { margin-top: var(--space-4); }

/* OTA反映の画面の「プラングループ」の枠（販売先の表から外して別に立てた。2026-10-20）。 */
.plan-group-box { border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); padding: var(--space-3) var(--space-4); background: var(--color-surface-raised); }
.plan-group-box .form-section-title { margin-top: 0; }
.plan-group-field { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.plan-group-field input { max-width: 16em; }

/* マーケティングの各表で、自施設の行をひと目で見分けられるようにする
   （利用者の指定、2026-10-21）。ランキングの「自社」の行と同じ見え方にそろえる。 */
.data-table tr.is-own > td,
.data-table tr.is-own > th {
  background: var(--color-primary-subtle);
  font-weight: 700;
}
.research-mix-table tr.is-own > th .mix-open { font-weight: 700; }
/* リサーチくんの比較表は施設が列なので、列の見出しと中身を太字にする。 */
.research-grid th.research-facility.is-own .research-facility-name { font-weight: 700; }
.research-grid td.research-cell.is-own { font-weight: 600; }

/* どのタブからでも、その施設の管理画面・ユーザー画面へ飛べるボタン。
   パンくずの右端に置き、押すと下に開く（利用者の指定、2026-10-21）。 */
.site-jump { position: relative; margin-left: auto; display: flex; gap: var(--space-2); }
.site-jump-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.site-jump-button:hover { background: var(--color-primary-subtle); border-color: var(--color-primary); }
.site-jump-button[aria-expanded="true"] { background: var(--color-primary-subtle); border-color: var(--color-primary); }
.site-jump-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 880;
  width: min(520px, calc(100vw - 32px));
  max-height: min(70vh, 640px);
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.site-jump-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-subtle);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  font-size: var(--text-sm);
}
.site-jump-close { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
.site-jump-body { padding: var(--space-2); }
.site-jump-table { font-size: var(--text-sm); }
.site-jump-table tbody th { font-weight: 500; text-align: left; }
.site-jump-table .site-jump-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  white-space: nowrap;
}
.site-jump-table td, .site-jump-table th { padding: var(--space-2) var(--space-3); }
.site-jump-table .site-jump-actions form { margin: 0; }
@media (max-width: 760px) {
  .site-jump-panel { width: calc(100vw - 24px); }
}

/* 競合判定の相関表。どこと見比べられているかを色の濃さで分かるようにする
   （数字だけだと、どの相手が強いのかが一目で読めない）。 */
.rival-matrix th .rival-head {
  display: inline-block;
  max-width: 7rem;
  font-size: 0.8em;
  line-height: 1.25;
  white-space: normal;
}
.rival-matrix td.rival-self { color: var(--color-text-muted, #888); }
.rival-rank {
  display: inline-block;
  min-width: 2rem;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rival-rank--top { background: var(--color-primary-subtle); }
.rival-rank--mid { background: color-mix(in srgb, var(--color-primary-subtle) 55%, transparent); }
.rival-rank--low { background: color-mix(in srgb, var(--color-primary-subtle) 25%, transparent); }
.rival-rank--hidden { color: var(--color-text-muted, #888); font-weight: 400; }

/* 「使い方」はパンくずの右端へ移し、マークだけにした（利用者の指定、
   2026-10-21）。本文は各ページの partials/guide.html が持ったままなので、
   元のボタンだけを隠す。中身（開いたときの案内）はこれまでどおり。
   隠すのは右端のマークがある画面（施設を選んでいる画面）だけ。施設を選ばない
   画面（経費精算・勤怠・請求書など）は右端のマークが無いので、元のボタンを出す
   （全部隠していたため、そうした画面で「使い方」が出なくなっていた。2026-11-02）。 */
.has-guide-proxy .guide-button { display: none; }

/* マークはもう少し大きく（利用者の指定、2026-10-21）。 */
.site-jump-button .icon { width: 26px; height: 26px; vertical-align: -6px; }

/* ==========================================================================
   目安箱（利用者の指定、2026-10-22）
   ========================================================================== */
.suggest-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}
.suggest-group { display: inline-flex; gap: var(--space-1); flex-wrap: wrap; }
.suggest-done-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.suggest-done-toggle input { pointer-events: none; }
.suggest-form { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.suggest-form .suggest-body textarea { width: 100%; }

.suggest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.suggest-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.suggest-item.is-done { opacity: .72; }
.suggest-vote { margin: 0; }
.suggest-vote-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1.2;
}
.suggest-vote-button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.suggest-vote-button.is-voted {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.suggest-vote-count { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.suggest-vote-label { font-size: 11px; }
.suggest-main { flex: 1; min-width: 0; }
.suggest-title { font-weight: 700; color: var(--color-text); }
.suggest-title:hover { color: var(--color-primary); }
.suggest-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.suggest-kind { font-weight: 700; color: var(--color-primary); }
.suggest-preview {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: pre-wrap;
}
.suggest-detail-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.suggest-body-text { white-space: pre-wrap; margin: var(--space-2) 0 0; }
.suggest-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.suggest-status form { margin: 0; }
.suggest-delete { margin-left: auto !important; }
.suggest-comment {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.suggest-comment p { margin: var(--space-1) 0 0; white-space: pre-wrap; }

/* AI画像加工。元と直したものを並べて見比べる画面。 */
.ai-form { display: grid; gap: var(--space-4); max-width: 54rem; }
.ai-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  padding: var(--space-4);
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  color: var(--color-text-muted);
}
.ai-drop.is-over { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.ai-drop img { max-height: 16rem; border-radius: 6px; }
.ai-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
}
.ai-presets legend { padding: 0 var(--space-2); font-weight: 700; }
.ai-preset { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.ai-free { display: grid; gap: var(--space-2); }
.ai-free textarea { width: 100%; }
.ai-jobs { display: grid; gap: var(--space-4); }
.ai-job { border: 1px solid var(--color-border); border-radius: 8px; padding: var(--space-3); }
.ai-job-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ai-job-head form { margin-left: auto; }
.ai-job-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.ai-job-body figure { margin: 0; display: grid; gap: var(--space-2); }
.ai-job-body img { width: 100%; border-radius: 6px; }
.ai-job-body figcaption { color: var(--color-text-muted); font-size: 0.85em; }
.ai-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 8rem;
  padding: var(--space-3);
  border-radius: 6px;
  background: var(--color-surface-2, rgba(0, 0, 0, 0.04));
  color: var(--color-text-muted);
  text-align: center;
}
.ai-settings { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.ai-settings label { display: grid; gap: var(--space-1); }
@media (max-width: 720px) {
  .ai-job-body { grid-template-columns: 1fr; }
  .ai-presets { flex-direction: column; }
}
.suggest-kinds-link { margin-left: auto; }
.suggest-kind-table tr.is-off > td { opacity: .6; }
.suggest-kind-move { display: flex; gap: var(--space-1); }
.suggest-kind-move form { margin: 0; }
/* 競合判定の「よく見比べられている組み合わせ」。数字の列だけだと強弱が読めないので、
   帯の長さでも出す（利用者の指摘「どこがよく比べられてるのかが分からない」、2026-10-22）。 */
.rival-score {
  position: relative;
  display: inline-block;
  min-width: 4.5rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-surface-raised, rgba(0, 0, 0, 0.04));
}
.rival-score .rival-score-bar { position: absolute; inset: 0 auto 0 0; background: var(--color-primary-subtle); }
.rival-score .rival-score-num { position: relative; font-weight: 700; font-variant-numeric: tabular-nums; }

/* るるぶの並び（宿泊施設・客室ごとにドラッグで並べ替える）。 */
.rurubu-order-group { margin: var(--space-3) 0; }
.rurubu-order-title { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.rurubu-tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rurubu-tile { position: relative; width: 128px; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-surface-raised); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.rurubu-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
.rurubu-tile { cursor: grab; touch-action: none; user-select: none; }
.rurubu-tile-move { display: flex; justify-content: space-between; }
.rurubu-tile-move .icon-button { padding: 0 8px; line-height: 1.6; }
.rurubu-tile-no { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; border-radius: 4px; padding: 0 5px; font-variant-numeric: tabular-nums; }
.rurubu-tile-cap { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rurubu-tile.is-dragging { opacity: .4; }

/* ②の写真カードも、どこをつかんでも並べ替えられる（2026-10-22）。 */
#photo-cards [data-photo-card] { cursor: grab; }
#photo-cards [data-photo-card] input, #photo-cards [data-photo-card] select, #photo-cards [data-photo-card] textarea, #photo-cards [data-photo-card] .photo-more { cursor: auto; }
.suggest-tool {
  padding: 1px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-raised);
}
.suggest-tool-pick { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }

/* ニュースの注目度。何社が同じ話題を出したかと、社内で何回開かれたか
   （利用者の指定、2026-10-22）。 */
.news-badge--hot {
  background: var(--color-warning-subtle);
  color: var(--color-warning-strong, #8a5a00);
  font-weight: 700;
}
.news-badge--views { background: var(--color-primary-subtle); color: var(--color-primary); }

/* 営業管理：段階ごとの担当と、その場で宿を足すところ（利用者の指定、2026-10-22）。 */
.sales-stage-staff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.sales-new-facility {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.sales-new-facility form { margin: 0; }

/* 目安箱：いまの状態のボタンを、一覧の印と同じ色にする（利用者の指定、2026-10-22）。 */
.suggest-status-button.is-now[data-status="未対応"] {
  background: var(--color-warning-subtle); color: var(--color-warning); border-color: var(--color-warning);
}
.suggest-status-button.is-now[data-status="対応中"] {
  background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary);
}
.suggest-status-button.is-now[data-status="対応済み"] {
  background: var(--color-success-subtle); color: var(--color-success); border-color: var(--color-success);
}
.suggest-status-button.is-now { font-weight: 700; }

/* 空港の便数。到着の時間帯を、チェックインの山として見るための帯。 */
.flight-hours {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 160px;
  padding: var(--space-3) 0;
}
.flight-hour { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; }
.flight-hour-bar { background: var(--color-primary-subtle); border-radius: 3px 3px 0 0; min-height: 2px; }
.flight-hour-num { font-size: 0.75rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--color-text); }
.flight-hour-label { font-size: 0.7rem; text-align: center; color: var(--color-text-muted); }

/* 部屋タイプ設定の「この部屋の写真」と、写真を選ぶ窓（2026-10-22）。 */
.room-photos { margin: var(--space-2) 0; padding: var(--space-2); border: 1px dashed var(--color-border); border-radius: 6px; }
.room-photos-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.photo-picker { width: min(1100px, 95vw); max-height: 85vh; padding: 0; border: 1px solid var(--color-border); border-radius: 8px; }
.photo-picker-head { position: sticky; top: 0; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border); z-index: 1; }
.photo-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); padding: var(--space-3); }
.photo-picker-item { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--color-border); border-radius: 6px; padding: 4px; cursor: pointer; }
.photo-picker-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.photo-picker-item:has(input:checked) { outline: 2px solid var(--color-primary, #2563eb); }

/* ==========================================================================
   画像ツール（AI加工）。写真を見てもらって、指摘に答えながら直す
   （利用者の指定、2026-10-22）。
   ========================================================================== */
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: var(--space-2);
  border-radius: 50%; background: var(--color-primary); color: #fff;
  font-size: var(--text-xs); font-weight: 700;
}
.ai-drop { min-height: 200px; margin-bottom: 12px; }
.ai-drop p { margin: 4px 0; font-size: 1rem; }
.ai-drop .cell-sub { font-size: .85rem; }
.ai-drop-preview { max-width: 280px; max-height: 180px; border-radius: 8px; display: block; margin: 0 auto 10px; }
.ai-shot { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--space-4); margin-top: var(--space-3); align-items: start; }
.ai-shot img { width: 100%; border-radius: var(--radius-md); display: block; }
.ai-category { display: inline-block; padding: 2px var(--space-2); border-radius: 999px;
  background: var(--color-primary-subtle); color: var(--color-primary); font-weight: 700;
  font-size: var(--text-sm); margin-bottom: var(--space-2); }
.ai-findings { border-left: 4px solid var(--color-border); padding-left: var(--space-3);
  margin: var(--space-3) 0; }
.ai-findings.is-high { border-color: var(--color-danger); }
.ai-findings.is-medium { border-color: var(--color-warning); }
.ai-findings.is-nice { border-color: var(--color-success); }
.ai-findings-head { font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.ai-finding { display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.ai-finding:last-child { border-bottom: 0; }
.ai-finding span.cell-sub { display: block; }
.ai-objects, .ai-tags > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ai-tags { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.ai-tags-label { font-size: var(--text-sm); color: var(--color-text-muted);
  margin-bottom: var(--space-1); }
.ai-free { display: block; margin-top: var(--space-3); }
.ai-free textarea { width: 100%; }
.ai-tries { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3); }
.ai-try { border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-2); background: var(--color-surface); }
.ai-try.is-picked { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-subtle); }
.ai-try img { width: 100%; border-radius: var(--radius-sm); display: block; }
.ai-try-head { display: flex; justify-content: space-between; align-items: center;
  font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-1); }
.ai-refine { margin-top: var(--space-4); }
.ai-refine textarea { width: 100%; }
.ai-history { display: grid; gap: var(--space-1); }
.ai-history-item { display: grid; grid-template-columns: 7em 1fr 12em; gap: var(--space-2);
  padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm); color: var(--color-text); }
@media (max-width: 760px) {
  .ai-shot { grid-template-columns: 1fr; }
  .ai-history-item { grid-template-columns: 1fr; }
}

/* ============================================================
   画面の設定（人ごと）。色合いのほかに、文字の大きさ・書体・表の詰め具合・
   画面の動きを選べる（利用者の指定、2026-10-22）。
   値は <html data-font-size> などに入る（partials/sidebar.html）。
   設定の画面では、見え方の例の枠にも同じ data-… を付けて下見できるようにしてある。
   ============================================================ */

/* 文字の大きさ。文字の寸法だけを倍率で動かす。余白まで一緒に動かすと、
   表の列がはみ出したり、1画面に入る行数が極端に減ったりするため。 */
:root, .ui-preview { --ui-font-scale: 1; }
:root[data-font-size="s"], .ui-preview[data-font-size="s"] { --ui-font-scale: 0.9; }
:root[data-font-size="l"], .ui-preview[data-font-size="l"] { --ui-font-scale: 1.12; }
:root[data-font-size="xl"], .ui-preview[data-font-size="xl"] { --ui-font-scale: 1.25; }
:root[data-font-size], .ui-preview[data-font-size] {
  --text-xs: calc(11px * var(--ui-font-scale));
  --text-sm: calc(12.5px * var(--ui-font-scale));
  --text-base: calc(14px * var(--ui-font-scale));
  --text-md: calc(15px * var(--ui-font-scale));
  --text-lg: calc(17px * var(--ui-font-scale));
  --text-xl: calc(24px * var(--ui-font-scale));
}
:root[data-font-size] body, .ui-preview[data-font-size] { font-size: var(--text-base); }

/* 書体。本文の並びをまとめて差し替える。どれも端末に入っているものだけで組み、
   読み込みに失敗して字が出ない状態を作らない。 */
:root[data-font="rounded"] body, .ui-preview[data-font="rounded"] {
  font-family: "Hiragino Maru Gothic ProN", "Quicksand", "Zen Maru Gothic",
               "Noto Sans JP", -apple-system, sans-serif;
}
:root[data-font="mincho"] body, .ui-preview[data-font="mincho"] {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
               "MS PMincho", serif;
}
:root[data-font="mono"] body, .ui-preview[data-font="mono"] {
  font-family: "SFMono-Regular", Consolas, "Hiragino Kaku Gothic ProN",
               Meiryo, monospace;
}

/* 表の詰め具合。1画面に入る行数が変わる。 */
:root[data-density="compact"] .data-table th,
:root[data-density="compact"] .data-table td,
.ui-preview[data-density="compact"] .data-table th,
.ui-preview[data-density="compact"] .data-table td {
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.35;
}

/* 画面の動き。目が疲れる・酔うという人のために止められるようにする
   （端末側で「視差効果を減らす」にしている人は、設定に関係なく止める）。 */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* 設定の画面。 */
.ui-settings { display: grid; gap: var(--space-4); max-width: 46rem; }
.ui-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3) var(--space-4);
}
.ui-setting { display: grid; gap: var(--space-1); min-width: 0; }
.ui-setting select { width: 100%; }
.ui-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  max-width: 46rem;
}
.ui-preview h3 { margin-top: 0; }

/* 仕様書のプラン一覧の「販売中のOTA」（2026-10-23）。サイト名の札を並べ、期間切れは薄く。 */
.rate-sale-sites { min-width: 9em; }
.sale-site { display: inline-block; margin: 0 4px 4px 0; padding: 0 6px; font-size: var(--text-xs); line-height: 1.6;
  border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-raised); white-space: nowrap; }
.sale-site.is-ended { opacity: .45; text-decoration: line-through; }

/* 営業管理の名刺（2026-10-24）。写真と読み取った文字を並べて置く。
   スマホでは1列に積む（撮ってその場で直すため、画面が狭い）。 */
.card-scan { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.card-scan label { display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.card-scan select { min-width: 12rem; }
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.card-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.card-item:hover { border-color: var(--color-accent); background: var(--color-surface-raised); }
.card-item img { width: 100%; border-radius: var(--radius-sm); object-fit: cover; aspect-ratio: 91 / 55; }
.card-noimage {
  display: grid;
  place-items: center;
  aspect-ratio: 91 / 55;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.card-body { min-width: 0; display: grid; gap: 2px; }
.card-body > * { overflow-wrap: anywhere; }
.card-company { font-size: var(--text-sm); color: var(--color-text-muted); }
.card-name { font-weight: 600; }
.card-name .cell-sub { margin-left: var(--space-2); font-weight: 400; }

.card-edit { display: grid; grid-template-columns: minmax(16rem, 24rem) 1fr; gap: var(--space-4); align-items: start; }
.card-edit-shot img { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.card-edit-form { margin: 0; }
.card-note { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.card-note textarea { width: 100%; }
.card-delete { margin-top: var(--space-4); }
@media (max-width: 720px) {
  .card-list { grid-template-columns: 1fr; }
  .card-edit { grid-template-columns: 1fr; }
  .card-item { grid-template-columns: 6rem 1fr; }
  /* 名刺は外で撮って、その場で直すことが多い。押しやすい幅にする。 */
  .card-scan label, .card-scan input, .card-scan select, .card-scan button { width: 100%; }
}
/* 名刺の項目は短いものが多いので、写真の横でも2列に収める。 */
.card-edit-form .form-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* 入国者数。総数と、2年ぶんの推移を並べて置く。 */
.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-4) 0;
}
.entry-total { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.entry-total span { font-size: 1rem; font-weight: 400; margin-left: 0.2rem; color: var(--color-text-muted); }
.entry-trend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 72px;
  min-width: 14rem;
  flex: 1;
}
.entry-trend-bar {
  flex: 1;
  min-width: 3px;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--color-primary-subtle) 80%, transparent);
}
.entry-trend-bar.is-now { background: var(--color-primary); }

/* 写真の「反映待ち」の印。.pill の display が hidden に勝たないように。 */
[data-photo-pending][hidden] { display: none; }

/* 部屋タイプ設定・プランの画面の上に出す、写真の反映の帯。 */
.photo-run-banner:empty { display: none; }
.photo-run-banner { margin-bottom: var(--space-3); }

/* 部屋タイプ設定を、プラン設定と同じ1行＝1部屋の表にした（2026-10-24）。
   料金と詳細は行の「料金・詳細」から別の画面で入れる。 */
.rate-room-table td, .rate-room-table th { vertical-align: top; }
/* 部屋タイプ名は長いものが多いので、途中で切れない幅を取る。 */
.rate-room-table td.rate-row-name { min-width: 18rem; }
.rate-room-table td.rate-row-name input[type="text"] { width: 100%; }
.rate-room-table .rate-room-count { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-room-prices { min-width: 9em; }
.rate-room-price {
  display: inline-block; margin: 0 4px 2px 0; padding: 0 6px;
  font-size: var(--text-xs); line-height: 1.7; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface-raised);
}
.rate-room-price small { color: var(--color-text-muted); margin-right: 4px; }

/* 1部屋ぶんの設定の画面。人数の見出しと入力欄がずれないよう、列幅を固定する。 */
.rate-table { width: auto; table-layout: fixed; }
.rate-table td, .rate-table th { padding: var(--space-1) var(--space-2); text-align: center; width: 116px; }
.rate-table .rate-table-head { text-align: left; width: 110px; white-space: nowrap; }
.rate-table thead th { font-size: var(--text-xs); color: var(--color-text-muted); }
.rate-table input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.room-detail-desc { display: grid; gap: var(--space-1); }
.room-detail-desc input { width: 100%; }
.room-detail-actions { display: flex; gap: var(--space-3); align-items: center; }

/* 資料作成。指標のチェックと、その指標に書くコメントを1組にして並べる。 */
.report-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.report-metric {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.report-metric-head { display: flex; align-items: center; gap: var(--space-2); }
.report-metric-head span:first-of-type { font-weight: 700; }
.report-comment { width: 100%; resize: vertical; font-family: inherit;
  font-size: 15px; line-height: 1.7; }
/* 取れる指標が増えたので、どのツールから来た数字かでまとめる。 */
.report-group { margin-bottom: var(--space-4); }
.report-group-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; font-weight: 700;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.report-group-head .muted { font-weight: 400; font-size: var(--text-xs); }
.report-group .report-metrics { margin-bottom: 0; }
/* 章の見出しの右に「コメントをAIに書かせる」を置く。下線は行ごと引く。 */
.report-group-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.report-group-bar .report-group-head {
  flex: 1 1 14rem; border-bottom: 0; margin-bottom: 0;
}

/* グラフの点に添える数字。グラフだけでは読み取れないので値を出す
   （利用者の指定、2026-10-25）。線や塗りの上でも読めるよう、文字のまわりを
   背景色で縁取りしてある（SVG側で paint-order="stroke"）。 */
.chart-value { font-variant-numeric: tabular-nums; }

/* 料金取得の曜日別分析（2026-10-25）。平均・平日比・幅を1マスに縦に積む。 */
.price-weekday-table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-weekday-table th { white-space: nowrap; }
.price-weekday-table tbody th { text-align: left; }
.price-weekday-table .cell-sub { font-size: var(--text-xs); }
.price-weekday-table tr.is-base-row { background: var(--color-surface-raised); }
.price-vs { font-size: var(--text-xs); font-weight: 600; }
.price-vs.is-up { color: var(--color-danger); }
.price-vs.is-down { color: var(--color-primary); }
.price-special-table input[type="text"] { width: 12rem; }
/* 料金のマスに出す部屋の定員。部屋タイプ名のうしろに小さく添える（切り詰めない）。 */
.price-cap { flex: none; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
/* 部屋ごとの子供料金（2026-10-25） */
.child-room-prices { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.child-room-head { display: flex; gap: var(--space-2); align-items: baseline; }
.child-room { border: 1px solid var(--color-border, #e3e7ee); border-radius: 8px; padding: var(--space-2) var(--space-3); background: var(--color-surface, #fff); }
.child-room > summary { cursor: pointer; list-style: none; }
.child-room > summary::-webkit-details-marker { display: none; }
.child-room[open] > summary { margin-bottom: var(--space-2); }
.child-room-title { font-weight: 700; margin-top: var(--space-2); }

/* 需要予測の「部屋ごとの残室」（2026-10-25）。施設の中の在庫を、部屋タイプごとに並べる。 */
.stock-table th, .stock-table td { white-space: nowrap; text-align: center; }
.stock-table thead th { font-size: var(--text-xs); }
.stock-room { max-width: 10em; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.stock-cell { font-variant-numeric: tabular-nums; }
.stock-none { color: var(--color-text-muted); }
.stock-diff { font-size: var(--text-xs); font-weight: 600; }
.stock-diff.is-down { color: var(--color-danger); }
.stock-diff.is-up { color: var(--color-primary); }
.stock-total { font-weight: 700; font-variant-numeric: tabular-nums; background: var(--color-surface-raised); }
/* 部屋タイプのOTA：仕様書の列をその場で直す（2026-10-25）。説明文は改行のまま見せる。 */
.room-ota-table td.room-ota-spec { min-width: 300px; background: var(--color-surface-raised); }
.room-ota-table td.room-ota-spec textarea { width: 100%; box-sizing: border-box; min-height: 9em; }
.room-ota-table td.room-ota-spec select, .room-ota-table td.room-ota-spec input[type=text] { max-width: 100%; }
.room-ota-table td.room-ota-spec input[type=number] { width: 5.5em; }
.room-ota-table td.room-ota-site { white-space: pre-wrap; }
.room-ota-table .room-ota-checks { display: flex; flex-wrap: wrap; gap: 2px 10px; white-space: normal; }
.room-ota-beds-mini { border-collapse: collapse; white-space: normal; }
.room-ota-beds-mini th, .room-ota-beds-mini td { padding: 2px 3px; border: 0; font-size: var(--text-xs); }
.room-ota-beds-mini input[type=number] { width: 4em !important; }
.room-desc-count { display: flex; gap: 12px; flex-wrap: wrap; white-space: normal; }
.room-desc-count .is-over { color: var(--color-danger); font-weight: 700; }
/* 消化率の見方（2026-10-25）。高いほど売れている＝値段を上げる判断に使う。 */
.stock-rate { font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-rate.is-mid { color: var(--color-primary); }
.stock-rate.is-high { color: var(--color-danger); }
.stock-group-rates { display: grid; gap: 1px; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; }
.sale-filter .button-link.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ── 理念とKPI（トップ・サイドバー・統括本部） ──────────────────────
   理念は掲げるだけでは読まれないので、毎日開く場所に出す。KPIは「60%」だけ
   では早いか遅いか分からないため、同じ日までに進んでいるはずの位置（ペース）
   を目盛りとして重ねる。 */
.app-sidebar-vision {
  font-size: var(--text-xs); line-height: 1.5; color: var(--sidebar-text);
  opacity: .75; padding: 0 var(--space-2) var(--space-3);
}
.vision-board {
  margin-bottom: var(--space-5); padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.vision-mission {
  margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.5;
  text-wrap: balance;
}
.vision-preview { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.vision-chip {
  font-size: var(--text-xs); padding: 2px var(--space-3); border-radius: var(--radius-full);
  background: var(--color-accent-subtle); color: var(--color-accent-strong);
}
.vision-values { width: 100%; font-family: inherit; line-height: 1.8; }
.vb-grid {
  display: grid; gap: var(--space-3); margin-top: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.vb-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-3); display: grid; gap: var(--space-3); min-width: 0;
}
.vb-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.vb-item { display: grid; gap: 4px; min-width: 0; }
.vb-item-head {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.vb-item-head strong { margin-left: auto; font-size: var(--text-base); }
.vb-bar {
  position: relative; height: 10px; border-radius: var(--radius-full);
  background: var(--color-surface-raised); overflow: hidden;
}
.vb-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--color-primary); border-radius: var(--radius-full);
}
/* 今日までに進んでいるはずの位置。ここより右まで伸びていれば先行している。 */
.vb-bar-pace {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--color-text); opacity: .55;
}
.vb-facility { font-weight: 700; color: inherit; text-decoration: none; }
.vb-facility:hover { color: var(--color-primary); text-decoration: underline; }

/* 需要予測のインバウンド需要（2026-10-25）。見出しの数字を横に並べ、下に月の表。 */
.inbound-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.inbound-head { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--color-surface); }
.inbound-head strong { display: block; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.inbound-head strong small { font-size: var(--text-sm); font-weight: 400; margin-left: 2px; color: var(--color-text-muted); }
.inbound-head strong.is-up { color: var(--color-danger); }
.inbound-head strong.is-down { color: var(--color-primary); }
.inbound-table td, .inbound-table th { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inbound-table tbody th, .inbound-table td:nth-child(2) { text-align: left; }
.inbound-table td.is-up { color: var(--color-danger); font-weight: 600; }
.inbound-table td.is-down { color: var(--color-primary); }
.inbound-table tr.is-mine { background: var(--color-surface-raised); font-weight: 600; }
.inbound-ranking { margin-top: var(--space-3); }
.inbound-ranking > summary { cursor: pointer; }
/* どこの国から来ているか（2026-10-25）。割合を横棒で見せる。 */
.inbound-countries { margin-top: var(--space-4); }
.country-bars { display: grid; gap: 4px; }
.country-bar { display: grid; grid-template-columns: 8rem 1fr 7rem; gap: var(--space-2); align-items: center; }
.country-name { font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-track { height: 14px; background: var(--color-surface-raised); border-radius: var(--radius-full); overflow: hidden; }
.country-fill { display: block; height: 100%; background: var(--color-primary); border-radius: var(--radius-full); }
.country-value { font-size: var(--text-sm); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.country-value small { color: var(--color-text-muted); margin-left: 6px; }
/* 会社のKPI。施設ごとより先に、数字そのものを大きく見せる。 */
.vb-grid--company { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.vb-card--company { gap: var(--space-2); }
.vb-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.vb-value {
  font-size: var(--text-xl); font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--color-primary);
}
.vb-unit { font-size: var(--text-sm); font-weight: 600; margin-left: 2px; }
.vb-target-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.vb-target-input { display: flex; align-items: center; gap: var(--space-2); }
.vb-target-input input { text-align: right; font-variant-numeric: tabular-nums; }

/* ── プロモーションの参画分析 ──────────────────────────────────
   1本ずつの画面では「年を通してどれだけ出ているか」が分からないので、
   参加率と、セール期間が年のうち何日を覆っているかを横棒で並べる。 */
.pa-sub { font-size: var(--text-sm); font-weight: 700; margin: var(--space-4) 0 var(--space-2); }
.pa-bar {
  display: inline-block; vertical-align: middle; width: 110px; height: 8px;
  background: var(--color-surface-raised); border-radius: var(--radius-full);
  overflow: hidden; margin-right: var(--space-2);
}
.pa-bar-fill { display: block; height: 100%; background: var(--color-primary); }
.pa-bar-fill--days { background: var(--color-success, #2f855a); }

/* OTA掲載チェック（2026-10-25）。○△×と実数を1マスに。 */
.ota-check-table td { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ota-check-table tbody th { text-align: left; white-space: nowrap; }
.ota-check-table td.cell-sub, .ota-check-table td:nth-child(2) { text-align: left; }
.ota-check-mark { font-weight: 700; margin-right: 4px; }
.ota-check-cell.is-ok .ota-check-mark { color: var(--color-primary); }
.ota-check-cell.is-warn { background: var(--color-warn-subtle, #fff6e5); }
.ota-check-cell.is-warn .ota-check-mark { color: #b8860b; }
.ota-check-cell.is-ng { background: var(--color-danger-subtle); }
.ota-check-cell.is-ng .ota-check-mark { color: var(--color-danger); }
.ota-check-gaps { border: 1px solid var(--color-border); border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); margin: var(--space-3) 0; }
.ota-check-gaps ul { margin: 0; padding-left: 1.2em; }
/* リサーチくんの喫食別まとめ（2026-10-25）。素泊まりとの差を目立たせる。 */
.mix-meals { margin-bottom: var(--space-3); }
.mix-meal-table td, .mix-meal-table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mix-meal-table tbody th { text-align: left; }
.mix-meal-cost { font-weight: 700; color: var(--color-danger); }
.mix-meal-kinds { white-space: normal; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── クーポン比較（マーケティング） ───────────────────────────────
   自社と競合を縦に並べ、サイトごとに何を出しているかを見比べる。
   1つの宿に複数出ていることがあるので、セルの中で縦に積む。 */
.cpn-table td { vertical-align: top; }
.cpn-own { background: var(--color-primary-subtle); }
.cpn-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: 4px; }
.cpn-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpn-name { font-size: var(--text-sm); color: var(--color-text-muted); }
/* 需要予測の下に足した2つの枠（部屋ごとの残室・インバウンド需要）。
   master-section と同じ白いカードにして、続きではなく別の話だと分かるようにする
   （枠が付いておらず、インバウンドが残室の中に入って見えていた。2026-10-25）。 */
.demand-block + .demand-block { margin-top: var(--space-5); }
.demand-block > .rate-section-head { margin-top: 0; }

/* YADONOVAコンパス（2026-10-25）。今日の出勤と会社のKPIを1枚で。 */
.compass-people { display: grid; gap: 8px; }
.compass-person { display: grid; grid-template-columns: 7rem 1fr 14rem; gap: var(--space-3); align-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--color-surface); }
.compass-person.is-working { border-left: 3px solid var(--color-primary); }
.compass-person.is-off { opacity: .6; }
.compass-when strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.compass-when small { color: var(--color-text-muted); margin-left: 4px; }
.compass-name { font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.compass-bar { height: 6px; border-radius: var(--radius-full); background: var(--color-surface-raised); overflow: hidden; margin-bottom: 2px; }
.compass-bar span { display: block; height: 100%; background: var(--color-primary); border-radius: var(--radius-full); }
.compass-bar span.is-behind { background: var(--color-danger); }
.compass-month .is-ok { color: var(--color-primary); font-weight: 600; }
.compass-month .is-short { color: var(--color-danger); font-weight: 600; }
.compass-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); }
.compass-kpi { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface); }
.compass-kpi strong { display: block; font-size: var(--text-xl); font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
@media (max-width: 720px) {
  .compass-person { grid-template-columns: 5rem 1fr; }
  .compass-month { grid-column: 1 / -1; }
}
/* 勤怠のフレックス（2026-10-25）。月の実働が所定に届いているかだけを見る。 */
.attend-flex { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline;
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
.attend-flex.is-short { border-left-color: var(--color-danger); }
.attend-flex small { color: var(--color-text-muted); margin-left: 2px; }
.attend-flex-diff { font-weight: 700; }
.attend-flex.is-ok .attend-flex-diff { color: var(--color-primary); }
.attend-flex.is-short .attend-flex-diff { color: var(--color-danger); }

/* TL-リンカーンの認証コード（SMS）の入力欄。読み込みが待っているあいだだけ出る。 */
.sc-2fa { align-items: flex-end; gap: var(--space-2); margin: var(--space-2) 0 0; }
.sc-2fa input[name="code"] { width: 9rem; font-variant-numeric: tabular-nums; letter-spacing: .12em; }

/* チャット通知の設定。受け取る種類は1行1つで、説明を小さく添える。 */
.chat-kinds { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin: var(--space-3) 0 0; }
.chat-kinds legend { padding: 0 var(--space-2); font-size: .85rem; color: var(--color-text-muted); }
.chat-kind { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-1) 0; }
.chat-kind span { display: flex; flex-direction: column; }
.chat-kind small { color: var(--color-text-muted); }
.chat-target-actions { display: flex; gap: var(--space-2); align-items: center; }
.chat-target-actions form { display: inline; }

/* 施設仕様書の「最近の動き」（チャットのやりとりから作ったまとめ）。 */
.chat-read-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chat-read-actions form, .chat-link-form { display: inline-flex; gap: var(--space-1); align-items: center; }

/* ===== クリエイティブ：ブランド戦略書ヒアリングシート ===== */
.hs-tools { margin: var(--space-3) 0; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.hs-tools form { margin: 0; }
.hs-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(320px, 0.8fr); gap: var(--space-4); align-items: start; }
.hs-side, .hs-preview { position: sticky; top: var(--space-3); }
.hs-prog { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface, #fff); }
.hs-prog-lbl { font-size: 12px; color: var(--color-text-muted); }
.hs-prog-num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-bar { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.hs-bar i { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width .2s; }
.hs-side ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.hs-side li a { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: var(--radius-sm, 6px); color: inherit; text-decoration: none; font-size: 13px; }
.hs-side li a:hover { background: var(--color-bg-subtle, rgba(0,0,0,.04)); }
.hs-side li a small { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.hs-side li a.done small { color: var(--color-success, #2e7d32); font-weight: 700; }
.hs-main { min-width: 0; }
.hs-blk { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--color-surface, #fff); scroll-margin-top: var(--space-3); }
.hs-blk h2 { font-size: 16px; margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px; }
.hs-no { color: var(--color-primary); font-variant-numeric: tabular-nums; font-size: 13px; }
.hs-lead { color: var(--color-text-muted); font-size: 13px; margin: 0 0 var(--space-3); }
.hs-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.hs-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hs-f.hs-full, .hs-comp { grid-column: 1 / -1; }
.hs-t { font-size: 13px; font-weight: 600; }
.hs-f input[type=text], .hs-f select, .hs-f textarea, .hs-comp input { width: 100%; box-sizing: border-box; }
.hs-f textarea { min-height: 84px; resize: vertical; }
.hs-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 9px; margin-left: 4px; vertical-align: 1px; }
.hs-req { background: #fdecea; color: #b3261e; }
.hs-res { background: #e8f0fe; color: #1a56c4; }
.hs-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.hs-checks label { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.hs-comp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-2); }
.hs-comp-head span { font-size: 12px; color: var(--color-text-muted); }
.hs-research { display: flex; gap: var(--space-2); align-items: flex-start; border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); font-size: 13px; }
.hs-preview { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface, #fff); max-height: calc(100vh - 2 * var(--space-3)); display: flex; flex-direction: column; }
.hs-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.hs-head h3 { margin: 0; font-size: 15px; }
.hs-missing { font-size: 12px; color: #b3261e; margin: var(--space-2) 0; }
.hs-missing.ok { color: var(--color-success, #2e7d32); }
.hs-toast { font-size: 12px; color: var(--color-text-muted); min-height: 1em; }
.hs-sheet { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.6; background: var(--color-bg-subtle, #f6f7f9); border-radius: var(--radius-sm, 6px); padding: var(--space-3); margin: 0; }
@media (max-width: 1100px) {
  .hs-grid { grid-template-columns: minmax(0, 1fr); }
  .hs-side, .hs-preview { position: static; max-height: none; }
  .hs-side ol { display: flex; flex-wrap: wrap; gap: 4px; }
  .hs-sheet { max-height: 60vh; }
}
@media (max-width: 640px) {
  .hs-fields, .hs-comp { grid-template-columns: minmax(0, 1fr); }
  .hs-comp-head { display: none; }
}

/* クチコミの一覧：検索した言葉に色を付ける（2026-10-26）。 */
mark.review-hit { background: #ffe58a; color: inherit; padding: 0 1px; border-radius: 2px; }
@media (prefers-color-scheme: dark) { mark.review-hit { background: #7a6212; } }
.chat-ai-key { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; margin: var(--space-3) 0 0; }
.chat-ai-key input[name="api_key"] { min-width: 18rem; }
.hs-skill { flex-shrink: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); font-size: 12px; }
.hs-skill-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.hs-skill-url { display: block; margin: 4px 0; word-break: break-all; color: var(--color-text-muted); user-select: all; }
.hs-skill ol { margin: 4px 0 0; padding-left: 1.4em; }
.hs-skill li + li { margin-top: 2px; }

/* チャット：会話を読む係の選択 */

/* 予定：Googleカレンダー（Meetの発行と議事録） */
.meet-issue { grid-column: 1 / -1; }
.meeting-mode { grid-column: 1 / -1; }
.meeting-mode-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.meet-box { margin-top: var(--space-3); }
.meet-minutes { margin-top: var(--space-2); }
.meet-minutes-head { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.meet-minutes-text { white-space: pre-wrap; word-break: break-word; margin: var(--space-2) 0 0;
  max-height: 24rem; overflow-y: auto; font-family: inherit; font-size: 13px; line-height: 1.7; }

/* 資料作成：相談（チャット） */
.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--space-4); align-items: start; }
.report-main { min-width: 0; }
/* 相談は画面の右に通しで置き、画面の高さいっぱいまで使う（利用者の指定、
   2026-11-03）。資料の中身を見ながら話すところなので、小さいと使われない。 */
.report-chat { position: sticky; top: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px); padding: var(--space-3); background: var(--color-surface); }
.report-chat .form-section-title { margin-top: 0; }
.report-chat-log { max-height: calc(100vh - 22rem); overflow-y: auto; display: flex; flex-direction: column;
  gap: var(--space-2); margin-bottom: var(--space-2); }
.report-chat-row { display: flex; flex-direction: column; gap: 2px; }
.report-chat-row--user { align-items: flex-end; }
.report-chat-bubble { white-space: pre-wrap; word-break: break-word; font-size: 13px;
  line-height: 1.7; padding: var(--space-2); border-radius: var(--radius-sm, 8px);
  background: var(--color-surface-alt, rgba(127, 127, 127, 0.1)); max-width: 95%; }
.report-chat-row--user .report-chat-bubble { background: var(--color-accent-soft, rgba(127, 127, 160, 0.18)); }
.report-chat-input { width: 100%; resize: vertical; font-size: 15px; }
/* 返事を待っているあいだ。点が静かに明滅して、動いていることを見せる。 */
.report-chat-bubble--wait { display: flex; align-items: center; gap: var(--space-2); }
.report-chat-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--color-primary, #8a7a4a);
  animation: report-chat-dot 1.2s ease-in-out infinite;
}
@keyframes report-chat-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
/* 動きを減らす設定の人には明滅させない。 */
@media (prefers-reduced-motion: reduce) {
  .report-chat-dot { animation: none; opacity: 0.7; }
}
/* 相談のあとに「何を変えたか」。返事の文とは別に、箇条書きで残す。 */
.report-chat-changed { margin: var(--space-2) 0 0; padding-left: 1.2em;
  font-size: 13px; line-height: 1.7; color: var(--color-primary); }
.report-chat-tips { display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-3); }
.report-chat-tips .cell-sub { flex: 1 0 100%; }
.report-chat-tip { cursor: pointer; text-align: left; font-size: 13px; }
/* 狭い画面では縦に積む（相談を下に回す）。 */
@media (max-width: 900px) {
  .report-layout { grid-template-columns: minmax(0, 1fr); }
  .report-chat { position: static; }
}

/* 統括本部：AIの費用（日ごとの棒） */
.cost-days { display: flex; gap: 4px; align-items: flex-end; overflow-x: auto;
  padding: var(--space-2) 0; }
.cost-day { display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 2.2rem; height: 9rem; justify-content: flex-end; }
.cost-day-bar { width: 1.1rem; min-height: 2px; border-radius: 3px 3px 0 0;
  background: var(--color-accent, #8a7a4a); }
.cost-day-label, .cost-day-yen { font-size: 11px; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; }

/* 資料作成：弁当箱の並び（利用者の指定、2026-10-27）。大小の枠を並べ、どこに何が
   あるかを形で分かるようにする。出来上がる資料の1枚と同じ並べ方にそろえた。 */
.report-bento { display: grid; gap: var(--space-3); align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(360px, 30rem);
  margin-bottom: var(--space-4); }
.bento-card { min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); }
.bento-card > .form-section-title:first-child { margin-top: 0; }
.bento-period { grid-column: 1 / 2; }
.bento-cover { grid-column: 2 / 4; }
.bento-metrics, .bento-out { grid-column: 1 / 4; }
.bento-chat { grid-column: 4 / 5; grid-row: 1 / span 6; }
.bento-cover-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3); }
.bento-field--wide { grid-column: 1 / -1; }
.bento-field input, .bento-field select { font-weight: 400; }
.bento-runs { margin-bottom: var(--space-6); }
.bento-field { display: grid; gap: var(--space-1); font-size: var(--text-xs);
  color: var(--color-text-muted); font-weight: 600; }
/* 狭い画面では縦に積む（スマホは縦長に使う）。 */
@media (max-width: 1100px) {
  .report-bento { grid-template-columns: minmax(0, 1fr); }
  .bento-period, .bento-cover, .bento-metrics,
  .bento-out, .bento-chat { grid-column: 1 / -1; grid-row: auto; }
  .bento-cover-grid { grid-template-columns: minmax(0, 1fr); }
  .bento-chat { position: static; }
  .report-chat-log { max-height: 26rem; }
}

/* ---- 料金の読み込み（TL・ねっぱん → 料金表）の確認画面 ---- */
.ri-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.ri-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.ri-stat span { font-size: 12px; color: var(--color-text-muted); }
.ri-stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.ri-stat b.ri-stat-text { font-size: 14px; line-height: 1.4; }
.ri-stat.is-warn b { color: var(--color-danger, #c0392b); }
.ri-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ri-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.ri-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 18px; margin-bottom: var(--space-3); min-width: 0; }
.ri-box summary { cursor: pointer; font-weight: 600; }
.ri-list { margin: 8px 0 0; padding-left: 1.2em; font-size: 13px; }
.ri-table td.num, .ri-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ri-table s { color: var(--color-text-muted); }
.ri-table .is-up { color: #1a7f37; }
.ri-table .is-down { color: #c0392b; }
.ri-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ri-line { font-size: 14px; }
@media (max-width: 900px) { .ri-grid { grid-template-columns: 1fr; } }

/* ===== スケジュール カレンダー（Googleカレンダー風に作り直し） ============== */
/* 旧ツールバーは .cal-bar だったが、.cal-bar は予定のバーに使うので名前を移す。 */
.cal-bar-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-3); }

/* ── 月表示：色付きのバーを縦に積む ── */
.cal-grid--month .cal-day { min-height: 118px; gap: 2px; }
a.cal-day-num { text-decoration: none; color: inherit; }
a.cal-day-num:hover { color: var(--color-primary); text-decoration: underline; }
.cal-day-bars { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-bar { display: flex; align-items: baseline; gap: 4px; border-radius: 4px;
  padding: 1px 6px; font-size: var(--text-xs); line-height: 1.6; text-decoration: none;
  white-space: nowrap; overflow: hidden; min-width: 0; }
.cal-bar-time { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cal-bar-title { overflow: hidden; text-overflow: ellipsis; }
/* 塗り=自分・淡い色＋枠=ほかの人（この色分けはアプリ共通） */
.cal-bar--mine { background: var(--color-primary); color: #ffffff; }
.cal-bar--mine .cal-bar-time { color: #ffffff; opacity: .85; }
.cal-bar--other { background: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface));
  color: var(--color-text); border: 1px solid var(--color-border-strong); padding: 0 5px; }
.cal-bar--other .cal-bar-time { color: var(--color-text-muted); }

/* ── 週・日表示：時間グリッド ── */
.cal-tg { border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--color-surface); }
.cal-tg-head, .cal-tg-allday, .cal-tg-body {
  display: grid; grid-template-columns: 52px repeat(var(--tg-cols), minmax(0, 1fr)); }
.cal-tg-head { border-bottom: 1px solid var(--color-border); }
.cal-tg-dayhead { display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 2px; text-decoration: none; color: inherit;
  border-left: 1px solid var(--color-border); }
.cal-tg-dow { font-size: var(--text-xs); color: var(--color-text-muted); }
.cal-tg-dnum { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.5em; }
.cal-tg-dayhead.is-sat .cal-tg-dow, .cal-tg-dayhead.is-sat .cal-tg-dnum { color: #3b6ea8; }
.cal-tg-dayhead.is-sun .cal-tg-dow, .cal-tg-dayhead.is-sun .cal-tg-dnum { color: var(--color-danger); }
.cal-tg-dayhead.is-today .cal-tg-dnum { background: var(--color-primary); color: #ffffff;
  width: 1.5em; height: 1.5em; line-height: 1.5em; border-radius: 50%; text-align: center; }
/* 終日の帯 */
.cal-tg-allday { border-bottom: 1px solid var(--color-border); }
.cal-tg-allday-label { font-size: var(--text-xs); color: var(--color-text-muted);
  padding: 3px 4px; text-align: right; align-self: center; }
.cal-tg-allday-col { border-left: 1px solid var(--color-border); padding: 2px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 時刻の目盛りと本体 */
.cal-tg-body { position: relative; }
.cal-tg-axis { position: relative; }
.cal-tg-hour { position: absolute; left: 0; right: 0; height: 0; }
.cal-tg-hour-label { display: block; text-align: right; padding-right: 6px;
  font-size: var(--text-xs); color: var(--color-text-muted); transform: translateY(-50%); }
.cal-tg-col { position: relative; border-left: 1px solid var(--color-border); min-width: 0; }
.cal-tg-col.is-today { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.cal-tg-line { position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid var(--color-border); }
.cal-slot { position: absolute; box-sizing: border-box; border-radius: 5px;
  padding: 1px 5px; overflow: hidden; text-decoration: none; display: flex;
  flex-direction: column; line-height: 1.25; font-size: var(--text-xs); }
.cal-slot--mine { background: var(--color-primary); color: #ffffff; }
.cal-slot--mine .cal-slot-time { color: #ffffff; opacity: .85; }
.cal-slot--other { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-text); border: 1px solid var(--color-border-strong); }
.cal-slot-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-slot-title { overflow: hidden; text-overflow: ellipsis; }

/* スマホ：横幅が狭いので目盛りを細く・文字を詰める。週は7列のまま畳む。 */
@media (max-width: 640px) {
  .cal-tg-head, .cal-tg-allday, .cal-tg-body {
    grid-template-columns: 38px repeat(var(--tg-cols), minmax(0, 1fr)); }
  .cal-tg-dnum { font-size: var(--text-base); }
  .cal-tg-hour-label { font-size: 10px; padding-right: 3px; }
  .cal-slot { padding: 1px 3px; }
  .cal-grid--month .cal-day { min-height: 92px; padding: var(--space-1); }
  .cal-bar, .cal-slot { font-size: 11px; }
}

/* 月表示のバーを見やすく（送られた画像に合わせて、淡い枠でなくベタ塗りに）。
   自分=塗り(濃い青・白文字)、ほかの人=読めるグレーのベタ塗り。色の濃さで
   どちらか分かるうえ、どちらも文字がはっきり読める。 */
.cal-bar { line-height: 1.7; padding: 1px 7px; font-size: var(--text-sm); }
.cal-bar--other {
  background: color-mix(in srgb, var(--color-text) 14%, var(--color-surface));
  color: var(--color-text); border: none; padding: 1px 7px;
  border-left: 3px solid var(--color-text-muted); border-radius: 4px;
}
.cal-bar--other .cal-bar-time { color: var(--color-text-muted); }
.cal-grid--month .cal-day { min-height: 116px; }
@media (max-width: 640px) {
  .cal-bar { font-size: 12px; line-height: 1.65; padding: 1px 5px; }
  .cal-grid--month .cal-day { min-height: 98px; padding: 3px; gap: 2px; }
  /* マスの番号を少し小さく、バーに縦の場所を譲る。 */
  .cal-grid--month .cal-day-num { font-size: var(--text-xs); }
}

/* ── 経費精算（keiriの画面の並びを、POLARISの色で）2026-10-28 ───────── */
.exp-page { max-width: none; }
.exp-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
/* トップのタブの中の経費精算：画面ごとの見出し（精算の名前・戻る・状態） */
.exp-subhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.exp-subhead h2 { margin: 2px 0 0; font-size: 22px; }
.exp-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: var(--radius-full); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600;
}
.exp-tab:hover { color: var(--color-text); text-decoration: none; border-color: var(--color-border-strong); }
.exp-tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: inset 0 -2px 0 var(--color-accent); }
.exp-tab--side { margin-left: auto; }
.exp-subtabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.exp-badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-danger); color: #fff; font-size: var(--text-xs); text-align: center; }

.exp-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm);
}
.exp-card-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: 700; margin: 0 0 var(--space-4); }
.exp-spaced { margin-top: var(--space-6); }
.exp-muted { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.exp-strong-warn, .exp-warn-text { color: var(--color-danger); font-weight: 600; }
.exp-links { margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.exp-note { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-raised); border-radius: var(--radius-md); font-size: var(--text-sm); }

/* ホームの上の帯 */
.exp-hero {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
  padding: var(--space-8) var(--space-8); margin-bottom: var(--space-4); border-radius: var(--radius-lg);
  background: linear-gradient(115deg, #0c1627 0%, #16263f 45%, #2b4268 100%); color: #fff;
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.exp-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(223, 180, 111, .25); }
.exp-hero-date { font-size: var(--text-sm); opacity: .8; font-weight: 600; }
.exp-hero-hello { font-size: 28px; font-weight: 800; margin: var(--space-2) 0; letter-spacing: .02em; }
.exp-hero-sub { font-size: var(--text-base); opacity: .9; }
.exp-hero-close { min-width: 220px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); position: relative; z-index: 1; }
.exp-hero-close-label { font-size: var(--text-xs); opacity: .8; font-weight: 600; }
.exp-hero-close-date { font-size: 26px; font-weight: 800; margin: 4px 0; }
.exp-hero-close-left { font-size: var(--text-sm); opacity: .85; }
.exp-hero-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); margin-top: var(--space-3); overflow: hidden; }
.exp-hero-bar span { display: block; height: 100%; background: var(--color-accent); border-radius: 3px; }

/* 対応が必要なもの */
.exp-todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.exp-todo { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-surface); }
.exp-todo:hover { text-decoration: none; border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.exp-todo-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-primary-subtle); color: var(--color-primary); flex-shrink: 0; }
.exp-todo strong { display: block; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.exp-todo > span:last-child > span { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.exp-todo--crit .exp-todo-icon { background: var(--color-danger-subtle); color: var(--color-danger); }
.exp-todo--crit strong { color: var(--color-danger); }
.exp-todo--warn .exp-todo-icon { background: var(--color-warning-subtle); color: var(--color-warning); }

/* 受取額 */
.exp-received-form { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin-bottom: var(--space-4); }
.exp-received-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.exp-received-form input, .exp-received-form select { min-width: 170px; }
.exp-received-figs { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: flex-end; }
.exp-fig span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.exp-fig strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.exp-fig--main strong { font-size: 26px; }
.exp-csv { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 600; }

/* 締めの帯 */
.exp-deadline {
  display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4);
  border: 2px solid var(--color-accent); border-radius: var(--radius-lg); background: var(--color-accent-subtle); color: var(--color-accent-strong);
}
.exp-deadline-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: #fff; color: var(--color-accent-strong); flex-shrink: 0; }
.exp-deadline-label { font-size: var(--text-xs); font-weight: 700; }
.exp-deadline-rule { font-size: var(--text-lg); font-weight: 800; margin: 4px 0 6px; color: var(--color-text); }
.exp-deadline-sub { font-size: var(--text-sm); }
.exp-close-line { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* 自分の状況 */
.exp-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); }
.exp-status { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.exp-status h3 { font-size: var(--text-base); margin: 0 0 var(--space-3); }
.exp-status-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.exp-status-row a { font-weight: 800; color: var(--color-text); text-decoration: underline; font-variant-numeric: tabular-nums; }
.exp-zero { color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

/* 一覧・絞り込み */
.exp-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.exp-chip { padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); background: var(--color-surface); }
.exp-chip:hover { text-decoration: none; color: var(--color-text); }
.exp-chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.exp-table td, .exp-table th { white-space: nowrap; }
.exp-table td.num, .exp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.exp-new-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.exp-new-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.exp-new-form .exp-grow { flex: 1; min-width: 220px; }
.exp-primary { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-full); padding: 10px 22px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.exp-primary:hover { background: var(--color-primary-hover); }
.exp-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 10px 22px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.exp-link-danger { background: none; border: none; color: var(--color-danger); font-size: var(--text-sm); padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.exp-inline { display: inline-flex; align-items: center; gap: var(--space-2); margin: 2px 0; }

/* 1件の精算 */
.exp-next { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-4); background: var(--color-primary-subtle); color: var(--color-primary); font-size: var(--text-base); }
.exp-next--rejected { background: var(--color-danger-subtle); color: var(--color-danger); }
.exp-next--approved, .exp-next--paid { background: var(--color-success-subtle); color: var(--color-success); }
.exp-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); border: 0; padding: 0; margin: 0; }
.exp-info-grid label, .exp-item-grid label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.exp-info-grid input, .exp-info-grid select, .exp-item-grid input, .exp-item-grid select { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-base); background: var(--color-surface); color: var(--color-text); }
.exp-wide { grid-column: 1 / -1; }
.exp-items { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.exp-item + .exp-item { border-top: 1px solid var(--color-border); }
.exp-item-row { display: grid; grid-template-columns: 100px 120px 1fr 90px 150px 110px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.exp-item-cat { font-weight: 700; }
.exp-item-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.exp-item-edit { padding: 0 var(--space-4) var(--space-3); }
.exp-item-edit summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted); display: inline-flex; gap: 4px; align-items: center; }
.exp-item-edit form { margin-top: var(--space-3); }
.exp-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.exp-item-grid [hidden] { display: none; }
.exp-item-new { margin-top: var(--space-5); padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.exp-item-new h3 { font-size: var(--text-base); margin: 0 0 var(--space-3); display: flex; gap: 6px; align-items: center; }
.exp-receipt-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.exp-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.exp-or { font-size: var(--text-xs); color: var(--color-text-subtle); }
.exp-check { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.exp-check h3 { font-size: var(--text-sm); margin: 0 0 var(--space-2); display: flex; gap: 6px; align-items: center; }
.exp-check ul { margin: 0; padding-left: 1.2em; font-size: var(--text-sm); }
.exp-check--fix { background: var(--color-warning-subtle); border-left: 4px solid var(--color-warning); }
.exp-check--fix h3 { color: var(--color-warning); }
.exp-check--note { background: var(--color-surface-raised); border-left: 4px solid var(--color-border-strong); }
.exp-send { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.exp-send form:first-child { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.exp-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.exp-meta span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.exp-reason { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.exp-reason input { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.exp-group-title { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.exp-check-list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }

/* 領収書ストック */
.exp-upload { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.exp-file-button { cursor: pointer; }
.exp-memo { flex: 1; min-width: 200px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.exp-receipt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.exp-receipt { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.exp-receipt-thumb { display: grid; place-items: center; height: 150px; background: var(--color-surface-raised); }
.exp-receipt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.exp-receipt-doc { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--color-text-muted); font-weight: 700; font-size: var(--text-sm); }
.exp-receipt-body { padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); }
.exp-receipt-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-new-payment summary { cursor: pointer; margin: 0; }
.exp-new-payment[open] summary { margin-bottom: var(--space-4); }

@media (max-width: 720px) {
  .exp-hero { flex-direction: column; align-items: stretch; padding: var(--space-6) var(--space-5); }
  .exp-hero-hello { font-size: 22px; }
  .exp-card { padding: var(--space-4); }
  .exp-tab--side { margin-left: 0; }
  .exp-item-row { grid-template-columns: 1fr auto; }
  .exp-item-row .exp-item-date { grid-column: 1 / -1; color: var(--color-text-muted); }
  .exp-received-form input, .exp-received-form select { min-width: 0; }
}
@media (prefers-color-scheme: dark) {
  .exp-deadline-icon { background: var(--color-surface); }
  .exp-deadline-rule { color: var(--color-text); }
}
.exp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.exp-receipt-pick select { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.exp-receipt-pick input[type=file] { max-width: 100%; }
.exp-receipt-thumb { overflow: hidden; flex: 0 0 150px; }
.exp-receipt-body { background: var(--color-surface); }

/* 経費精算：AIの読み取り・使い方ガイド（2026-10-28） */
.exp-link { background: none; border: none; color: var(--color-primary); font-size: var(--text-sm); font-weight: 600; padding: 0; cursor: pointer; text-align: left; }
.exp-link:hover { text-decoration: underline; }
.exp-link:disabled { color: var(--color-text-muted); cursor: default; text-decoration: none; }
.exp-ai-read { margin: 0; display: grid; gap: 2px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--color-primary-subtle); }
.exp-ai-read div { display: flex; gap: 6px; min-width: 0; }
.exp-ai-read dt { flex: 0 0 4.5em; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.7; }
.exp-ai-read dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.exp-guide-toc { position: sticky; top: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); }
.exp-guide-toc-title { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.exp-guide-toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: var(--text-sm); }
.exp-guide-body { min-width: 0; }
.exp-guide-sec { scroll-margin-top: var(--space-4); line-height: 1.8; }
.exp-guide-sec h3 { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.exp-guide-sec ul, .exp-guide-sec ol { margin: 0; padding-left: 1.4em; }
.exp-guide-sec p { margin: 0 0 var(--space-3); }
.exp-guide-rule { font-size: var(--text-lg); font-weight: 800; color: var(--color-primary); }
.exp-guide-steps { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); counter-reset: step; margin-bottom: var(--space-3) !important; }
.exp-guide-steps li { counter-increment: step; border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.exp-guide-steps li::before { content: counter(step); display: block; font-size: 22px; font-weight: 800; color: var(--color-primary); line-height: 1.2; }
.exp-guide-steps strong { display: block; }
.exp-guide-steps span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
.exp-guide-table td { white-space: normal; vertical-align: top; }
.exp-guide-table td:first-child { font-weight: 700; white-space: nowrap; }
.exp-guide-tag { display: inline-block; margin: 0 4px 0 0; padding: 0 8px; border-radius: var(--radius-full); background: var(--color-primary-subtle); font-size: var(--text-sm); font-weight: 600; }
.exp-guide-faq { margin: 0; }
.exp-guide-faq dt { font-weight: 700; margin-top: var(--space-3); }
.exp-guide-faq dt::before { content: "Q. "; color: var(--color-primary); }
.exp-guide-faq dd { margin: 2px 0 0; color: var(--color-text-muted); }
.exp-info-grid textarea { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; resize: vertical; }
@media (max-width: 900px) {
  .exp-guide { grid-template-columns: 1fr; }
  .exp-guide-toc { position: static; }
  .exp-guide-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .exp-guide-steps { grid-template-columns: 1fr; }
}
/* 経費精算：AIに聞く */
.exp-ask-log { display: flex; flex-direction: column; gap: var(--space-3); max-height: 460px; overflow-y: auto; margin-bottom: var(--space-3); }
.exp-ask-msg { max-width: min(760px, 88%); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); white-space: pre-wrap; line-height: 1.8; font-size: var(--text-sm); }
.exp-ask-msg--user { align-self: flex-end; background: var(--color-primary); color: #fff; }
.exp-ask-msg--assistant { align-self: flex-start; background: var(--color-primary-subtle); color: var(--color-text); }
.exp-ask-msg.is-waiting { color: var(--color-text-muted); }
.exp-ask-msg.is-error { background: var(--color-danger-subtle); color: var(--color-danger); }
.exp-ask-suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.exp-ask-suggest .exp-chip { background: var(--color-surface); cursor: pointer; font: inherit; font-size: var(--text-sm); }
.exp-ask-form { display: flex; gap: var(--space-2); }
.exp-ask-form input { flex: 1; min-width: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); font: inherit; }
.exp-ask-form button:disabled { opacity: .6; }
.exp-plain-fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
/* 領収書の名前をあとから直す */
.exp-receipt-rename summary { display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; }
.exp-receipt-rename summary::-webkit-details-marker { display: none; }
.exp-receipt-rename summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.exp-receipt-rename summary .icon-sm { flex-shrink: 0; color: var(--color-text-muted); }
.exp-receipt-rename form { display: flex; gap: 6px; margin-top: 6px; }
.exp-receipt-rename input { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }
/* 出張の期間（分析と同じ期間カレンダー） */
.exp-range-label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.exp-range-label .date-range-btn { width: 100%; min-height: 40px; text-align: left; }
.exp-range-label .date-range { display: flex; }
/* 目安箱：誰が書いたかを顔アイコンで分かるようにする。文字の行に並ぶので小さめ。 */
.suggest-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-text); }
.suggest-who .avatar { width: 22px; height: 22px; font-size: 11px; }
.suggest-comment .suggest-who .avatar { width: 26px; height: 26px; font-size: 12px; }

/* ── 統括本部 → AI連携 ───────────────────────────── */
.ai-providers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
}
.ai-provider {
  border: 1px solid var(--border, #e3e3e3);
  border-radius: 10px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ai-provider-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ai-provider-form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.ai-provider-form input[type="password"] { flex: 1 1 200px; min-width: 0; }
/* トップに移した「今日の出勤」（旧YADONOVAコンパス、2026-10-28）。
   見出しの横に日付と所定を添えるので、見出しだけ横並びにする。 */
.home-compass { margin-bottom: var(--space-5); }
.home-compass .home-section-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.compass-name .avatar { width: 24px; height: 24px; font-size: 12px; }

/* 経費精算：日当の枠・宿泊費の上限超え・送れない点 */
.exp-allowance { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.exp-over { border-left: 3px solid var(--color-danger); padding: 6px 10px; background: var(--color-danger-subtle, rgba(192, 69, 60, .06)); border-radius: 4px; }
.exp-over p { margin: 0 0 6px; }
.exp-check-cell { align-self: end; padding-bottom: 6px; }
/* 運賃の検索結果（駅すぱあと）。空のあいだは場所を取らない。 */
.exp-fare-results:empty { display: none; }
.exp-fare-results { display: flex; flex-direction: column; gap: 6px; }
.exp-fare-option { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-text); font-size: var(--text-base); cursor: pointer; }
.exp-fare-option:hover { border-color: var(--color-primary); }
.exp-fare-option strong { font-size: var(--text-lg, 17px); }
.exp-fare-option .exp-muted { font-size: var(--text-sm); }
.exp-check--block { background: var(--color-danger-subtle, rgba(220, 38, 38, .06)); border-left: 4px solid var(--color-danger, #dc2626); }
.exp-check--block h3 { color: var(--color-danger, #dc2626); }

/* レベニュー表示設定: 自社・競合の料金の出し方（金額・人数・食事・並べ方） */
.rv-comp-display { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); }
.rv-comp-display-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.rv-comp-display-label { min-width: 4em; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.rv-comp-display button { justify-self: start; }

/* 料金/売止反映: 表示設定で決めた反映先（TLリンカーン） */
.rv-sync-linked-list { margin: 0 0 var(--space-2); padding-left: 1.4em; display: grid; gap: var(--space-1); font-size: var(--text-sm); }

/* 勤怠管理（2026-10-29 作り直し）。カードを並べ、上に棒グラフと数字、下に勤務表。 */
:root {
  --att-work: #8fcbe6; --att-over: #b7a2e6; --att-paid: #86c9a6; --att-plan: #c9d3df;
  --att-sat-bg: #eef6fb; --att-sun-bg: #fbeff3; --att-sat-text: #2f7aa8; --att-sun-text: #c0456e;
  --att-leave-taken: #e0569a; --att-leave-planned: #f0a8cb; --att-leave-left: #a9c6ee;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --att-work: #3f8fb3; --att-over: #7c64b8; --att-paid: #3f8f6a; --att-plan: #4a5563;
    --att-sat-bg: #17232c; --att-sun-bg: #2a1a21; --att-sat-text: #7fbfe6; --att-sun-text: #f08fb0;
    --att-leave-taken: #d04f8c; --att-leave-planned: #8a4f6c; --att-leave-left: #4b6d9c;
  }
}
.att-msg.is-short { color: var(--color-danger); font-weight: 600; }
.att-msg.is-over { color: var(--color-warning, #b7791f); font-weight: 600; }
.att-msg.is-ok { color: var(--color-success, var(--color-text-muted)); }
.att-alert.is-overdue { border-color: var(--color-danger); color: var(--color-danger); background: var(--color-danger-subtle); }

.att-page { max-width: none; }
.att-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); margin: 0 0 var(--space-4); box-shadow: 0 1px 2px rgba(12, 22, 39, .04); }
.att-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  font-size: 17px; margin: 0 0 var(--space-3); }
.att-card-title .cell-sub { font-weight: 400; }

/* 月の切り替え・提出 */
.att-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); background: var(--color-primary-subtle);
  border-radius: var(--radius-md); }
.att-month-nav, .att-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.att-actions form { margin: 0; }
.att-round { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-text-muted); color: #fff; text-decoration: none; }
.att-round:hover { background: var(--color-primary); }
.att-month-label { font-size: 20px; padding: 0 var(--space-2); }
.att-btn { white-space: nowrap; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-sm); padding: 8px 16px; font-weight: 600; cursor: pointer; font-size: 15px; }
.att-btn--submit { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.att-btn--shift { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
.att-btn--edit { background: var(--color-primary); border-color: var(--color-primary); color: #fff; padding: 4px 16px; }
.att-btn--edit:hover, .att-btn--edit:focus { background: var(--color-primary-hover); color: #fff; }

/* 上：棒グラフ＋数字 */
.att-dash { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); }
.att-dash .att-card { margin-bottom: var(--space-4); }
.att-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-left: auto;
  font-size: 14px; font-weight: 400; color: var(--color-text-muted); }
.att-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 2px; }
.att-key--work { background: var(--att-work); } .att-key--over { background: var(--att-over); }
.att-key--paid { background: var(--att-paid); } .att-key--plan { background: var(--att-work); opacity: .4; }
.att-chart-scroll { overflow-x: auto; }
.att-chart { display: block; width: 100%; height: auto; max-height: 260px; }
.att-grid { stroke: var(--color-border); stroke-width: 1; }
.att-grid--eight { stroke: var(--color-warning); stroke-dasharray: 4 3; }
.att-axis { font-size: 12px; fill: var(--color-text-muted); }
.att-axis.is-sat { fill: var(--att-sat-text); } .att-axis.is-sun { fill: var(--att-sun-text); }
.att-axis.is-today { font-weight: 700; fill: var(--color-text); }
.att-bar--work { fill: var(--att-work); } .att-bar--over { fill: var(--att-over); } .att-bar--paid { fill: var(--att-paid); }
.is-future .att-bar { opacity: .38; }
.att-today { fill: var(--color-primary-subtle); }

.att-kpi-card { display: flex; flex-direction: column; gap: var(--space-3); border-top: 4px solid var(--color-success); }
.att-kpi-card.is-short { border-top-color: var(--color-danger); }
.att-kpi-card.is-over { border-top-color: var(--color-warning); }
.att-kpi-main { display: flex; flex-direction: column; }
.att-kpi-label, .att-kpi-sub { font-size: 14px; color: var(--color-text-muted); }
.att-kpi-big { font-size: 38px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.att-kpi-list { margin: 0; display: grid; gap: 6px; }
.att-kpi-list div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--color-border); padding-bottom: 4px; }
.att-kpi-list dt { color: var(--color-text-muted); font-size: 15px; } .att-kpi-list dd { margin: 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.att-msg--big { margin: 0; font-size: 17px; }

/* 横のゲージ：濃い＝いままで、薄い＝月末の見込み、縦線＝所定 */
.att-hbar { position: relative; height: 12px; border-radius: var(--radius-full); background: var(--color-surface-raised);
  border: 1px solid var(--color-border); }
.att-hbar--lg { height: 18px; }
.att-hbar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-full); }
.att-hbar-plan { background: var(--att-work); opacity: .45; }
.att-hbar-done { background: var(--att-work); }
.att-hbar.is-short .att-hbar-plan, .att-hbar.is-short .att-hbar-done { background: var(--color-danger); }
.att-hbar.is-over .att-hbar-plan { background: var(--att-over); opacity: .7; }
.att-hbar-need { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--color-text); }

/* 全員分（尾崎さん） */
.att-team { display: grid; gap: 2px; }
.att-team-row { display: grid; grid-template-columns: 180px minmax(200px, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.att-team-row:last-child { border-bottom: 0; }
.att-team-who { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 16px; }
.att-team-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 14px; color: var(--color-text-muted); }
.att-team-nums strong { color: var(--color-text); }
.att-team-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

/* 有給 */
.att-leave { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: var(--space-4); align-items: center; }
.att-leave-nums { display: flex; gap: var(--space-4); }
.att-leave-nums div { display: flex; flex-direction: column; }
.att-leave-nums span { font-size: 14px; color: var(--color-text-muted); }
.att-leave-nums strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.att-leave-nums small { font-size: 13px; margin-left: 2px; }
.att-leave-bar { position: relative; display: flex; height: 22px; border-radius: var(--radius-sm); overflow: visible;
  background: var(--color-surface-raised); border: 1px solid var(--color-border); }
.att-leave-bar span { height: 100%; }
.att-leave-taken { background: var(--att-leave-taken); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.att-leave-planned { background: var(--att-leave-planned); }
.att-leave-left { background: var(--att-leave-left); }
.att-leave-five { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--color-warning); }
.att-leave-scale { position: relative; display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-muted); height: 18px; margin-top: 2px; }
.att-leave-five-label { position: absolute; transform: translateX(-50%); color: var(--color-warning); font-weight: 600; }
.att-leave-grants { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.att-leave-grants li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.att-leave-grants small { color: var(--color-text-muted); }

/* 勤務表 */
.att-days-card { padding: 0; overflow: hidden; }
.att-days { width: 100%; border-collapse: collapse; font-size: 16px; }
.att-days th { text-align: left; font-weight: 600; font-size: 14px; color: var(--att-sat-text); padding: 10px 14px;
  border-bottom: 1px solid var(--color-border); line-height: 1.3; }
.att-days td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.att-days .num { text-align: right; font-variant-numeric: tabular-nums; }
.att-day.is-sat td { background: var(--att-sat-bg); }
.att-day.is-sat .att-day-date, .att-day.is-sat .att-type { color: var(--att-sat-text); }
.att-day.is-sun td { background: var(--att-sun-bg); }
.att-day.is-sun .att-day-date, .att-day.is-sun .att-type { color: var(--att-sun-text); }
.att-day.is-today td:first-child { box-shadow: inset 4px 0 0 var(--color-primary); }
.att-day-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.att-day-date small { display: block; font-size: 13px; }
.att-day-time { font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; }
.att-type { font-weight: 600; }
.att-type--trip { color: var(--color-warning); } .att-type--holiday { color: var(--color-success); }
.att-type--off { color: var(--color-text-muted); }
.att-type + small { display: block; }
.att-over { color: #7c5cc4; font-weight: 600; }
.att-day-note { color: var(--color-text-muted); font-size: 15px; }
.att-day-act { text-align: right; width: 1%; }
.att-day-edit td { background: var(--color-primary-subtle); }
.att-edit-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.att-edit-form label { display: flex; flex-direction: column; font-size: 14px; color: var(--color-text-muted); gap: 2px; }
.att-edit-note { flex: 1 1 180px; }

.att-page .hint, .att-page .pill { font-size: 14px; }
.att-edit-form input, .att-edit-form select { font-size: 16px; }
@media (max-width: 960px) {
  .att-dash { grid-template-columns: minmax(0, 1fr); }
  .att-leave { grid-template-columns: 1fr; }
  .att-team-row { grid-template-columns: 1fr; }
  .att-team-tags { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .att-days th, .att-days td { padding: 8px; }
  .att-days th:nth-child(5), .att-days td:nth-child(5), .att-days th:nth-child(6), .att-days td:nth-child(6) { display: none; }
  .att-legend { margin-left: 0; }
}

/* スケジュール：勤怠の出張・休み・有給（予定とは別の、薄い帯） */
.cal-work { display: block; font-size: 11px; line-height: 1.5; padding: 0 6px; margin-bottom: 2px; border-radius: var(--radius-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: var(--color-text);
  background: var(--color-surface-raised); border-left: 3px solid var(--color-text-muted); }
.cal-work--trip { border-left-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, transparent); }
.cal-work--holiday { border-left-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 14%, transparent); }
.cal-work--office { border-left-color: var(--color-primary); }
.cal-legend-work { display: inline-block; width: 14px; height: 10px; padding: 0; margin: 0 4px 0 0; vertical-align: middle; }

/* 出張精算：勤怠の出張で、精算がまだ無いもの */
.exp-trip-missing { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.exp-trip-missing li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border-left: 3px solid var(--color-border); background: var(--color-surface-raised); }
.exp-trip-missing--warn { border-left-color: var(--color-warning) !important; }
.exp-trip-missing--crit { border-left-color: var(--color-danger) !important; background: var(--color-danger-subtle) !important; }

/* ── スケジュール：Googleカレンダー風（2026-10-29）。人ごとの色・大きめの文字 ──
   見る人に年配の方が多いので、文字は小さくしすぎない（利用者、2026-10-29）。 */
.cal-bar-row { gap: var(--space-2) var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border); }
.cal-label { font-size: 22px; font-weight: 600; }
.cal-nav { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; }
.cal-nav:hover { background: var(--color-row-hover); }
.cal-tab { font-size: 15px; padding: 8px 18px; }
.cal-bar-row .small.ghost { font-size: 15px; padding: 7px 16px; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full); }
.cal-bar-row .primary-link { font-size: 15px; padding: 9px 18px; border-radius: var(--radius-full); }
.cal-filter select { font-size: 15px; }

/* 月 */
.cal-weekday { font-size: 14px; font-weight: 600; padding: 8px 4px; }
.cal-grid--month .cal-day { min-height: 128px; padding: 4px 4px 6px; }
.cal-day-head { justify-content: center; position: relative; margin-bottom: 2px; }
.cal-day-num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; text-decoration: none; color: var(--color-text); }
.cal-day-num:hover { background: var(--color-row-hover); }
.cal-day.is-today { background: var(--color-surface); box-shadow: none; }
.cal-day.is-today .cal-day-num { background: var(--color-primary); color: #fff; }
.cal-day-head .cell-sub { position: absolute; left: 4px; top: 6px; font-size: 13px; }
.cal-day-add { position: absolute; right: 4px; top: 4px; font-size: 18px; }
.cal-bar { font-size: 14px; line-height: 1.6; padding: 1px 8px; border-radius: 4px; }
.cal-bar--mine { background: var(--ev, var(--color-primary-subtle)); color: #1b2433; }
.cal-bar--mine .cal-bar-time { color: #1b2433; opacity: .8; }
.cal-bar--other { background: color-mix(in srgb, var(--ev, var(--color-primary)) 28%, var(--color-surface));
  color: var(--color-text); border: 0; border-left: 4px solid color-mix(in srgb, var(--ev, var(--color-primary)) 75%, #1b2433); }
.cal-bar--other .cal-bar-time { color: var(--color-text-muted); }
.cal-bar-title { white-space: nowrap; }

/* 勤怠の帯：人の色のしま模様（予定と見分ける） */
.cal-work { font-size: 13px; line-height: 1.6; padding: 0 8px; border-radius: 4px; color: var(--color-text);
  border-left: 4px solid var(--ev, var(--color-text-muted));
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ev, #888) 35%, var(--color-surface)) 0 6px,
              var(--color-surface) 6px 12px); }
.cal-work--trip, .cal-work--holiday, .cal-work--office { background-color: transparent; }
.cal-legend { flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 14px; align-items: center; }
.cal-person { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); }
.cal-person i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.cal-legend-sep { margin-left: var(--space-3); }
.cal-legend-dot--mine { background: var(--color-text-muted); border: 0; }
.cal-legend-dot--other { background: color-mix(in srgb, var(--color-text-muted) 18%, var(--color-surface));
  border: 0; border-left: 4px solid var(--color-text-muted); }
.cal-legend-dot--work { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-text-muted) 30%, var(--color-surface)) 0 4px,
  var(--color-surface) 4px 8px); border-left: 3px solid var(--color-text-muted); }

/* 週・日 */
.cal-tg-dow { font-size: 13px; font-weight: 600; }
.cal-tg-dnum { font-size: 24px; font-weight: 500; min-width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; }
.cal-tg-dayhead.is-today .cal-tg-dow { color: var(--color-primary); }
.cal-tg-dayhead.is-today .cal-tg-dnum { background: var(--color-primary); color: #fff; }
.cal-tg-allday-label, .cal-tg-hour-label { font-size: 13px; }
.cal-tg-col.is-today { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); }
.cal-slot { font-size: 14px; line-height: 1.35; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--color-surface); }
.cal-slot--mine { background: var(--ev, var(--color-primary-subtle)); color: #1b2433; }
.cal-slot--other { background: color-mix(in srgb, var(--ev, var(--color-primary)) 28%, var(--color-surface));
  color: var(--color-text); border-left: 4px solid color-mix(in srgb, var(--ev, var(--color-primary)) 75%, #1b2433); }
.cal-slot--other .cal-slot-time { color: var(--color-text-muted); }
.cal-slot-time { display: block; font-size: 13px; }
.cal-slot-title { display: block; font-weight: 600; }
@media (max-width: 720px) {
  .cal-label { font-size: 18px; }
  .cal-grid--month .cal-day { min-height: 92px; }
  .cal-bar { font-size: 12px; padding: 0 4px; }
  .cal-bar-time { display: none; }
}

/* アカウント情報：スケジュールの色を選ぶ */
.color-pick { border: 0; padding: 0; margin: var(--space-3) 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.color-pick legend { font-size: 15px; font-weight: 600; margin-bottom: var(--space-2); }
.color-swatch { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: 15px; background: var(--color-surface); }
.color-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.color-swatch-dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(12,22,39,.15); }
.color-swatch:has(input:checked) { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-text); font-weight: 700; }
.color-swatch:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.color-swatch.is-taken { opacity: .45; cursor: not-allowed; }
.color-swatch-name small { margin-left: 4px; font-size: 13px; color: var(--color-text-muted); }

/* スケジュールから出張・休みを勤怠に入れる */
.cal-work-add { position: relative; }
.cal-work-add-btn { list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; padding: 8px 16px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); display: inline-flex; gap: 6px; align-items: center; }
.cal-work-add-btn::-webkit-details-marker { display: none; }
.cal-work-add[open] .cal-work-add-btn { background: var(--color-primary-subtle); }
.cal-work-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(420px, 92vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(12, 22, 39, .16); }
.cal-work-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--color-text-muted); }
.cal-work-form input, .cal-work-form select { font-size: 16px; }
.cal-work-form-note, .cal-work-form button { grid-column: 1 / -1; }
@media (max-width: 720px) { .cal-work-form { right: auto; left: 0; } }
.cal-slot--mine .cal-slot-time { color: #1b2433; opacity: .8; }
.cal-bar--mine, .cal-slot--mine { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ev) 55%, #1b2433); }

/* ── 経費精算・スケジュール・勤怠：文字を大きめに（2026-10-29） ──
   見る人に年配の方が多いので、この3つは一段大きい文字で組む。人ごとの「文字の大きさ」
   の設定（--ui-font-scale）はそのまま効くよう、倍率を掛けた値で置き換える。 */
.exp-page, .sch-page, .att-page {
  --text-xs: calc(14px * var(--ui-font-scale, 1));
  --text-sm: calc(15px * var(--ui-font-scale, 1));
  --text-base: calc(16px * var(--ui-font-scale, 1));
  --text-md: calc(17px * var(--ui-font-scale, 1));
  --text-lg: calc(19px * var(--ui-font-scale, 1));
  --text-xl: calc(26px * var(--ui-font-scale, 1));
  font-size: var(--text-base);
}
.exp-page input, .exp-page select, .exp-page textarea,
.sch-page input, .sch-page select, .sch-page textarea { font-size: calc(16px * var(--ui-font-scale, 1)); }
.exp-page label, .sch-page label { font-size: var(--text-sm); }
.exp-page .data-table th, .sch-page .data-table th { font-size: var(--text-xs); }
.exp-page .data-table td, .sch-page .data-table td { font-size: var(--text-sm); }
.exp-page .pill, .sch-page .pill { font-size: var(--text-xs); }
.exp-page button, .exp-page .exp-chip, .sch-page button { font-size: var(--text-sm); }
.exp-page small, .sch-page small { font-size: var(--text-xs); }
.sch-page .cal-tg-dow, .sch-page .cal-tg-hour-label, .sch-page .cal-slot-time,
.sch-page .cal-tg-allday-label { font-size: 14px; }
/* タスクの溜まり具合：スマホでは名前の下にゲージと件数を並べる（横にはみ出さないように） */
@media (max-width: 600px) {
  .sch-page .load-row { flex-wrap: wrap; row-gap: 4px; }
  .sch-page .load-name, .sch-page .load-name--wide { width: 100%; }
  .sch-page .load-track { flex: 1 1 auto; min-width: 0; }
}

/* ── 請求書管理・契約書管理（マネーフォワードの並びを、POLARISの色で）2026-10-29 ─── */
.bill-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-4); }
.bill-actions--end { justify-content: flex-end; margin-top: var(--space-2); }
.bill-actions .inline-form { margin: 0; }
.bill-kpis { margin-bottom: var(--space-4); }
.bill-kpis strong small { font-size: var(--text-sm); margin-left: 2px; color: var(--color-text-muted); }
.bill-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.bill-two .exp-card { min-width: 0; }
@media (max-width: 1100px) { .bill-two { grid-template-columns: minmax(0, 1fr); } }
.bill-wrap { white-space: normal !important; min-width: 160px; }
.bill-row-overdue td { background: var(--color-danger-subtle); }
.bill-row-actions { display: flex; gap: var(--space-2); align-items: center; }
.bill-row-actions .inline-form { margin: 0; }
.bill-search { margin-bottom: var(--space-4); }
.bill-sum { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-3); font-size: var(--text-base); color: var(--color-text-muted); }
.bill-sum strong { color: var(--color-text); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.bill-quickpay { display: inline; margin-left: 4px; }

/* 月ごとの棒 */
.bill-chart { display: flex; align-items: flex-end; gap: var(--space-3); height: 220px; padding-top: var(--space-2); }
.bill-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.bill-chart-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-bottom: 1px solid var(--color-border); }
.bill-bar { display: block; width: 38%; max-width: 26px; min-height: 2px; border-radius: 4px 4px 0 0; }
.bill-bar--billed { background: var(--color-primary); }
.bill-bar--received { background: var(--color-accent); }
.bill-chart-label { font-size: var(--text-sm); font-weight: 700; }
.bill-chart-fig { font-size: 13px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.bill-legend { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.bill-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* 入力 */
.bill-form .exp-card { margin-bottom: var(--space-4); }
.bill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.bill-grid label, .bill-stack label, .bill-send label, .bill-item-pick label {
  display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); min-width: 0;
}
.bill-grid input, .bill-grid select, .bill-grid textarea, .bill-stack input, .bill-stack textarea, .bill-send input, .bill-send textarea { width: 100%; font-size: var(--text-base); }
.bill-span2 { grid-column: span 2; }
@media (max-width: 900px) { .bill-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .bill-grid { grid-template-columns: minmax(0, 1fr); } .bill-span2 { grid-column: auto; } }
.bill-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.bill-send { display: flex; flex-direction: column; gap: var(--space-4); max-width: 820px; }
.bill-attach { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.bill-notes { width: 100%; font-size: var(--text-base); }
.bill-item-pick { margin-bottom: var(--space-3); max-width: 420px; }
.bill-lines td { vertical-align: middle; }
.bill-lines input, .bill-lines select { width: 100%; font-size: var(--text-base); }
.bill-col-name { min-width: 260px; width: 40%; }
.bill-in-num { text-align: right; min-width: 80px; font-variant-numeric: tabular-nums; }
.bill-in-unit { min-width: 56px; }
.bill-line-amount { min-width: 110px; font-weight: 700; }
.bill-add-line { margin-top: var(--space-3); }
.bill-totals { margin: var(--space-4) 0 0 auto; max-width: 380px; display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.bill-totals > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.bill-totals-sub { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; justify-content: space-between; gap: var(--space-4); }
.bill-totals-main { border-top: 2px solid var(--color-primary); padding-top: 8px; font-size: var(--text-lg); }
.bill-totals-main strong { font-size: 24px; }

/* 1通の画面 */
.bill-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.bill-detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .bill-detail { grid-template-columns: minmax(0, 1fr); } }
.bill-preview { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; min-height: 70vh; }
.bill-preview iframe { width: 100%; height: 82vh; min-height: 560px; border: 0; display: block; }
.bill-preview-img { display: block; max-width: 100%; margin: 0 auto; }
.bill-preview-empty { padding: var(--space-6); }
.bill-side { display: flex; flex-direction: column; min-width: 0; }
.bill-dl { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: var(--text-base); }
.bill-dl dt { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; }
.bill-dl dd { margin: 0; overflow-wrap: anywhere; }
.bill-dd-big { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bill-pre { white-space: pre-wrap; }
.bill-paid-line { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.bill-paid-line strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.bill-pop { position: relative; }
.bill-pop > summary { list-style: none; }
.bill-pop > summary::-webkit-details-marker { display: none; }
.bill-pop-body { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 260px; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.bill-pop-body label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); font-weight: 600; }
.bill-delete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.bill-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-base); font-weight: 400; color: var(--color-text); }
.bill-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2) var(--space-4); }
.bill-seal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.bill-seal img { width: 90px; height: 90px; object-fit: contain; border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: #fff; }
.bill-link-box { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-3); }
.bill-link-box input { width: 100%; font-size: var(--text-sm); }
.bill-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--text-base); }
.bill-events li { border-left: 3px solid var(--color-border); padding-left: 10px; }

/* 進み具合 */
.bill-steps { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 0 0 var(--space-4); counter-reset: step; }
.bill-steps li { counter-increment: step; position: relative; flex: 1; min-width: 150px; padding: 10px 14px 10px 44px; background: var(--color-surface);
  border: 1px solid var(--color-border); margin-left: -1px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.bill-steps li::before { content: counter(step); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; background: var(--color-surface-raised); border: 1px solid var(--color-border); }
.bill-steps li.is-done { color: var(--color-success); }
.bill-steps li.is-done::before { content: "✓"; background: var(--color-success); border-color: var(--color-success); color: #fff; }
.bill-steps li.is-active { color: var(--color-primary); background: var(--color-primary-subtle); border-color: var(--color-primary); z-index: 1; }
.bill-steps li.is-active::before { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* 契約の相手が開くページ（ログイン不要） */
.sign-body { background: var(--color-bg); margin: 0; min-height: 100vh; font-size: 16px; color: var(--color-text); }
.sign-head { display: flex; justify-content: space-between; align-items: center; padding: 14px max(16px, env(safe-area-inset-left, 0px)); background: #16263f; color: #fff; border-bottom: 2px solid #dfb46f; }
.sign-company { font-weight: 800; font-size: 18px; }
.sign-tag { font-size: 14px; opacity: .85; }
.sign-card { max-width: 920px; margin: 24px auto; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
@media (max-width: 960px) { .sign-card { margin: 12px; padding: 16px; } }
.sign-from { margin: 0; color: var(--color-text-muted); font-size: 14px; font-weight: 600; }
.sign-title { margin: 6px 0 12px; font-size: 24px; }
.sign-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 12px; }
.sign-meta div { display: flex; gap: 8px; }
.sign-meta dt { color: var(--color-text-muted); font-size: 14px; }
.sign-meta dd { margin: 0; font-weight: 600; }
.sign-message { white-space: pre-wrap; padding: 12px 14px; background: var(--color-surface-raised); border-radius: var(--radius-md); }
.sign-pdf { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.sign-pdf iframe { width: 100%; height: 70vh; min-height: 420px; border: 0; display: block; }
.sign-dl { margin: 8px 0 16px; font-size: 15px; }
.sign-form { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 2px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-subtle); }
.sign-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.sign-form input[type=text] { font-size: 17px; padding: 10px 12px; max-width: 360px; }
.sign-form .sign-confirm { flex-direction: row; align-items: center; gap: 10px; font-size: 17px; }
.sign-confirm input { width: 22px; height: 22px; }
.sign-btn { display: inline-flex; justify-content: center; align-items: center; padding: 14px 28px; border-radius: var(--radius-full); border: none; cursor: pointer;
  background: var(--color-primary); color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; align-self: flex-start; }
.sign-btn:hover { background: var(--color-primary-hover); color: #fff; text-decoration: none; }
.sign-btn--ghost { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); font-size: 15px; padding: 10px 20px; }
.sign-btn--ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }
.sign-small { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.sign-decline { margin-top: 18px; }
.sign-decline summary { cursor: pointer; color: var(--color-text-muted); font-size: 14px; }
.sign-decline form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-width: 520px; }
.sign-decline label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.sign-error { color: var(--color-danger); font-weight: 700; padding: 10px 14px; background: var(--color-danger-subtle); border-radius: var(--radius-md); }
.sign-notice { padding: 10px 14px; background: var(--color-warning-subtle); border-radius: var(--radius-md); }
.sign-done { text-align: center; padding: 28px 12px; }
.sign-check { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--color-success); color: #fff; font-size: 34px; font-weight: 800; }
.sign-done-title { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.sign-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
/* スマホでは明細を1行ずつ縦に積む（横スクロールで入力させない） */
@media (max-width: 640px) {
  .bill-lines-wrap { overflow: visible; }
  .bill-lines thead { display: none; }
  .bill-lines-wrap .bill-lines, .bill-lines tbody { display: block; min-width: 0; width: 100%; border: 0; }
  .bill-lines tr.bill-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); position: relative; }
  .bill-lines td { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; min-width: 0; }
  .bill-lines-wrap .bill-lines td:first-child { position: static; background: transparent; box-shadow: none; }
  .bill-lines td::before { content: attr(data-label); font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
  .bill-lines td[data-label="品目"] { grid-column: 1 / -1; padding-right: 44px; }
  .bill-lines td.bill-line-amount { justify-content: flex-end; font-size: var(--text-lg); }
  .bill-lines td.bill-line-del-cell { position: absolute; top: 30px; right: 0; }
  .bill-lines td.bill-line-del-cell::before { content: none; }
  .bill-col-name, .bill-in-num, .bill-in-unit, .bill-line-amount { min-width: 0; }
}

/* Discordとつなぐ（2026-10-29）。欄が1つだけの短いフォームなので、画面の下に
   貼り付く「つなぐ」の帯が、そのままだとトークンの入力欄に重なってしまう
   （検証で実測。帯は .form-actions の position: sticky）。この枠だけ貼り付けない。 */
.discord-form .form-actions { position: static; box-shadow: none; }

/* 勤怠：休みの数（月ごと）が合わないとき */
.att-kpi-list .att-kpi-warn dt, .att-kpi-list .att-kpi-warn dd { color: var(--color-danger); }
/* 祝日でも出勤の日（休みの数に入らない）は色を付けない。休み・有給の日だけ薄く */
.att-day.is-off:not(.is-sat):not(.is-sun) td { background: var(--color-surface-raised); }

/* 会社カレンダー（1年分の出勤日・休み） */
.ccal-total { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 16px; }
.ccal-total strong { font-size: 19px; }
.ccal-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 15px; margin: 0 0 var(--space-4); }
.ccal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ccal-key { width: 18px; height: 18px; border-radius: 4px; display: inline-block; border: 1px solid var(--color-border); }
.ccal-key--off, .ccal-day--off { background: #dbe3f0; }
.ccal-key--special, .ccal-day--special { background: #f2dfb4; }
.ccal-key--hwork { background: var(--color-surface); box-shadow: inset 0 -4px 0 #d9a86a; }
.ccal-key--work { background: var(--color-surface); }
.ccal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.ccal-month { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-3) var(--space-4); }
.ccal-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: 20px; }
.ccal-title a { color: var(--color-text); text-decoration: none; }
.ccal-title a:hover { text-decoration: underline; }
.ccal-title span { font-size: 14px; font-weight: 500; color: var(--color-text-muted); }
.ccal-table { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.ccal-table th { font-size: 14px; font-weight: 600; color: var(--color-text-muted); text-align: center; padding: 2px 0; }
.ccal-table th.is-sat { color: var(--att-sat-text); } .ccal-table th.is-sun { color: var(--att-sun-text); }
.ccal-day { text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; padding: 6px 0; border-radius: 6px; }
.ccal-day--off, .ccal-day--special { font-weight: 700; }
.ccal-day--off.is-sun, .ccal-day--special.is-sun { color: var(--att-sun-text); }
.ccal-day--off.is-sat { color: var(--att-sat-text); }
.ccal-day--hwork { box-shadow: inset 0 -4px 0 #d9a86a; }
.ccal-day.is-today { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.ccal-notes { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.ccal-notes li { display: flex; gap: 8px; align-items: baseline; }
.ccal-notes li span { font-variant-numeric: tabular-nums; min-width: 3em; color: var(--color-text-muted); }
.ccal-notes em { margin-left: auto; font-style: normal; font-weight: 600; }
.ccal-notes li.is-off em { color: #8a6a1f; } .ccal-notes li.is-work em { color: var(--color-text-muted); }
@media (max-width: 1200px) { .ccal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ccal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ccal-grid { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .ccal-page { padding: 0 !important; max-width: none !important; }
  body:has(.ccal-page) .app-sidebar, body:has(.ccal-page) .app-topbar, body:has(.ccal-page) .mobile-topbar,
  .ccal-page .breadcrumb, .ccal-page .back-link, .ccal-page .page-header > :not(div),
  .ccal-page .att-btn, .ccal-page .att-round, .ccal-page .ccal-notes { display: none !important; }
  body:has(.ccal-page) .app-content { margin: 0 !important; padding: 0 !important; }
  .ccal-page .page-header { margin: 0 0 2mm; }
  .ccal-page .page-header h1 { font-size: 16pt; margin: 0; }
  .ccal-page .att-toolbar { padding: 1mm 3mm; margin: 0 0 2mm; }
  .ccal-page .att-month-label { font-size: 14pt; }
  .ccal-total { font-size: 10pt; } .ccal-total strong { font-size: 11pt; }
  .ccal-legend { font-size: 9pt; margin: 0 0 2mm; gap: 2mm 6mm; }
  .ccal-key { width: 10px; height: 10px; }
  .ccal-grid { grid-template-columns: repeat(4, 1fr); gap: 3mm; }
  .ccal-month { break-inside: avoid; padding: 2mm; border-radius: 3mm; }
  .ccal-title { font-size: 12pt; margin: 0 0 1mm; } .ccal-title span { font-size: 8pt; }
  .ccal-table { border-spacing: 1px; }
  .ccal-table th { font-size: 8pt; padding: 0; }
  .ccal-day { font-size: 9pt; padding: 1px 0; border-radius: 2px; }
  .ccal-day--off, .ccal-day--special, .ccal-key, .ccal-day--hwork, .att-toolbar {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
}
/* 会社カレンダーだけA4横で印刷する（ほかの画面の印刷には効かせない） */
@media print { .ccal-page { page: ccal; } }
@page ccal { size: A4 landscape; margin: 10mm; }

/* レベニューの表示設定: 保存ボタンを画面下の1つにまとめた。画面の下に貼り付けて、
   変更があるときだけ色を付ける。 */
.rv-save-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-4) calc(-1 * var(--space-2)) 0; padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.rv-save-bar .rv-save-state { font-size: 15px; color: var(--color-text-muted); margin-right: auto; }
.rv-save-bar.is-dirty { border-color: var(--color-warning); background: var(--color-warning-subtle); }
.rv-save-bar.is-dirty .rv-save-state { color: var(--color-text); font-weight: 600; }
.rv-save-bar.is-done:not(.is-dirty) { border-color: var(--color-success); background: var(--color-success-subtle); }
.rv-save-bar.is-done:not(.is-dirty) .rv-save-state { color: var(--color-success); font-weight: 600; }
.rv-save-bar button { font-size: 15px; padding: 10px 22px; }

/* 勤怠管理（管理）：全員分の月送り */
.att-team-nav { display: inline-flex; gap: var(--space-2); margin-left: auto; }

/* Discordで知らせる：まだ出していない人の並び */
.notice-pending-head { margin-top: 18px; }
.notice-pending-title { font-size: 15px; margin: 0; }
.notice-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0; font-size: 15px; }

/* Discordの人とスタッフの紐づけ：1人1行。PCは横並び、スマホは名前の下に選ぶ欄 */
.dc-people { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--space-2) var(--space-4); }
.dc-person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.dc-person-name { min-width: 0; display: flex; flex-direction: column; font-size: 15px; }
.dc-person-name strong { overflow-wrap: anywhere; }
.dc-person-name .cell-sub { font-size: 13px; color: var(--color-text-muted); }
.dc-person select { width: 100%; font-size: 15px; }
@media (max-width: 640px) {
  .dc-person { grid-template-columns: 1fr; }
}

/* Discordで聞けるようにする：部屋ごとの設定（施設＋印）。スマホは積む */
.dc-room-fields { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.dc-room-fields select { flex: 1 1 200px; min-width: 0; font-size: 15px; }
.dc-room-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 15px; }
.dc-rooms { grid-template-columns: 1fr; }
.dc-room { grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr); }
@media (max-width: 640px) {
  .dc-room { grid-template-columns: 1fr; }
}
.dc-room-checks .inline-check { font-size: 15px; color: var(--color-text); }

/* ── ホームの「個人／会社」と、売上と経費（2026-11-01） ── */
.home-view-switch { display: inline-flex; gap: 4px; padding: 4px; margin: var(--space-2) 0 var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; }
.home-view-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: 999px;
  font-size: var(--text-base); font-weight: 600; color: var(--color-text-muted); text-decoration: none; }
.home-view-link:hover { text-decoration: none; color: var(--color-text); }
.home-view-link.is-active { background: var(--color-primary); color: #fff; }
.home-money { margin-bottom: var(--space-6); }
.home-money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); }
.home-money-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); }
.home-money-period { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-2); }
.home-money-rows { margin: 0; display: flex; flex-direction: column; }
.home-money-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.home-money-rows > div:last-child { border-bottom: 0; }
.home-money-rows dt { font-size: var(--text-base); color: var(--color-text-muted); }
.home-money-rows dd { margin: 0; font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.home-money-rows dd small { font-size: var(--text-sm); font-weight: 400; margin-left: 2px; }
.home-money-rows .is-total dt { color: var(--color-text); font-weight: 700; }
.home-money-rows .is-total dd { font-size: var(--text-xl); }
.home-money-rows dd.is-minus { color: var(--color-danger, #c0392b); }

/* 施設管理：解約・失注の施設の削除（施設名を入れて確かめる） */
.fm-delete { margin-top: var(--space-2); }
.fm-delete > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-base); color: var(--color-danger); }
.fm-delete > summary::-webkit-details-marker { display: none; }
.fm-delete-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.fm-delete-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-base); }
.fm-delete-form input { width: 100%; font-size: var(--text-base); }
.fm-delete-form button { align-self: flex-start; }

/* スタッフの編集画面「ログインと権限」（統括本部のアカウント・ログイン権限を統合、2026-11-01） */
.staff-access-block { margin: var(--space-3) 0 0; }
.staff-access-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.staff-access-facilities { max-height: 220px; margin-top: var(--space-2); }
.staff-access-block details summary { cursor: pointer; margin-top: var(--space-2); }
.staff-tool-group { margin: var(--space-2) 0 0; }
.staff-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-2) var(--space-3); margin-top: var(--space-1); }
.staff-tool-grid label { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.staff-list-access { display: flex; gap: 4px; flex-wrap: wrap; }

/* チャット通知：知らせで呼ぶ人を選ぶ（目安箱） */
.notice-mention-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); margin: var(--space-2) 0; }
.chat-link-form:has(.notice-mention-pick) { flex-wrap: wrap; }
.chat-link-form .notice-mention-pick { flex-basis: 100%; }

/* スケジュール：予定をドラッグで動かす（static/js/cal_drag.js） */
[data-cal-drag] [data-move-url] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-cal-drag] .cal-slot, [data-cal-drag] .cal-bar { cursor: grab; }
.cal-slot .cal-slot-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.cal-slot .cal-slot-resize::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 2px;
  margin-left: -9px; border-radius: 2px; background: currentColor; opacity: 0; }
.cal-slot:hover .cal-slot-resize::after { opacity: .5; }
[data-move-url].is-dragging { opacity: .35; }
body.cal-dragging, body.cal-dragging * { cursor: grabbing !important; }
.cal-drag-preview { position: absolute; left: 1px; right: 1px; z-index: 5; border-radius: 6px; pointer-events: none;
  background: var(--ev, var(--color-primary)); color: #1b2433; font-size: var(--text-sm); font-weight: 700;
  padding: 2px 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); opacity: .92; }
.cal-drag-ghost { position: fixed; z-index: 1000; pointer-events: none; max-width: 240px; padding: 4px 10px; border-radius: 6px;
  background: var(--color-primary); color: #fff; font-size: var(--text-sm); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.is-drop-target { outline: 2px solid var(--color-primary); outline-offset: -2px; background: var(--color-primary-subtle); }
.cal-drag-toast { position: fixed; z-index: 1000; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: var(--text-base);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.cal-drag-toast.is-bad { background: var(--color-danger); }

/* トップのアカウント情報の、Googleアカウント連携 */
.home-account-google {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border);
}
.home-account-google .hint { margin: 0; }

/* 勤怠管理（管理）：36協定の知らせ（その人の行の下に出す） */
.att-team-alerts { grid-column: 1 / -1; margin: 0; padding: 8px 12px; list-style: none; border-radius: var(--radius-md);
  background: var(--color-warning-subtle); font-size: 15px; display: grid; gap: 4px; }
.att-team-alerts li.is-crit { color: var(--color-danger); font-weight: 600; }
.att-team-alerts li.is-warn { color: var(--color-warning); }

/* ── 請求書管理：1通の画面と、作る・修正する画面（2026-11-02、MFの並びを参考に） ── */
.inv-top { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 18px 20px; margin-bottom: var(--space-4); }
.inv-top-main { min-width: 0; flex: 1 1 360px; }
.inv-top-name { margin: 0 0 6px; font-size: 22px; color: var(--color-primary); }
.inv-top-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 15px; color: var(--color-text-muted); }
.inv-top-meta strong { color: var(--color-text); }
.inv-top-title { margin: 6px 0 0; font-size: 15px; }
.inv-top-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 14px; }
.inv-top-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.inv-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: 15px;
  font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; list-style: none; }
.inv-btn::-webkit-details-marker { display: none; }
.inv-btn:hover { background: var(--color-surface-raised); text-decoration: none; }
.inv-btn--danger { color: var(--color-danger); }
.inv-btn--blue { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.inv-btn--blue:hover { background: var(--color-primary); filter: brightness(1.08); }
.inv-btn--sm { padding: 5px 10px; font-size: 14px; }
.inv-menu { position: relative; }
.inv-menu-body { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 240px; padding: 8px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14); display: grid; gap: 4px; }
.inv-menu--right .inv-menu-body { left: auto; right: 0; }
.inv-menu-body button:not(.danger):not(.exp-primary) { width: 100%; display: flex; align-items: center; gap: 6px; padding: 9px 10px;
  border: 0; background: none; text-align: left; font-size: 15px; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); }
.inv-menu-body button:not(.danger):not(.exp-primary):hover { background: var(--color-surface-raised); }
.inv-confirm { gap: 10px; padding: 12px; font-size: 15px; }
.inv-confirm label { display: grid; gap: 4px; }
.inv-confirm .bill-check { display: flex; }

.inv-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 0; }
.inv-tab { padding: 10px 18px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: none; font-size: 15px; font-weight: 600; color: var(--color-primary); cursor: pointer; margin-bottom: -1px; }
.inv-tab.is-active { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.inv-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--space-4); }
.inv-panel .exp-card { margin: 0; border: 0; padding: 0; box-shadow: none; }
.inv-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }

/* 帳票の見た目（紙） */
.inv-paper-wrap { background: var(--color-surface-raised); border-radius: var(--radius-md); padding: 24px; overflow-x: auto; }
.inv-paper { position: relative; max-width: 820px; min-width: 620px; margin: 0 auto; background: #fff; color: #1b2433;
  padding: 44px 48px 48px; box-shadow: 0 1px 4px rgba(15, 23, 42, .12); border-top: 6px solid #1f2a44; font-size: 14px; line-height: 1.7; }
.inv-paper.is-cancelled { opacity: .75; }
.inv-cancel-mark { position: absolute; top: 28px; left: 40px; border: 2px solid #c0392b; color: #c0392b; font-weight: 700; padding: 2px 14px; font-size: 18px; }
.inv-title { text-align: center; font-size: 26px; letter-spacing: .4em; margin: 0 0 28px; font-weight: 600; color: #1b2433; }
.inv-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.inv-name { font-size: 19px; font-weight: 700; margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1.5px solid #1b2433; display: inline-block; min-width: 70%; }
.inv-contact { margin: 0 0 6px; }
.inv-addr { margin: 6px 0 0; color: #3b4659; }
.inv-from { position: relative; justify-self: end; min-width: 260px; }
.inv-co { font-weight: 700; font-size: 15px; margin: 0; padding-right: 70px; }
.inv-seal { position: absolute; top: -6px; right: 0; width: 64px; height: 64px; object-fit: contain; }
.inv-meta { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; margin: 14px 0 0; }
.inv-meta dt { color: #3b4659; }
.inv-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.inv-subject { margin: 26px 0 10px; font-size: 15px; }
.inv-phrase { margin: 0 0 16px; }
.inv-amount { display: flex; align-items: baseline; gap: 24px; border: 2px solid #9aa3b2; padding: 14px 18px; margin-bottom: 22px; max-width: 520px; }
.inv-amount span:first-child { font-weight: 700; font-size: 16px; }
.inv-amount strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.inv-amount--receipt { margin-top: 26px; }
.inv-lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inv-lines th { font-weight: 600; color: #3b4659; text-align: left; padding: 6px 8px; border-bottom: 1.5px solid #1b2433; white-space: nowrap; }
.inv-lines td { padding: 7px 8px; border-bottom: 1px solid #dfe3ea; }
.inv-lines .num, .inv-break .num { text-align: right; }
.inv-sum { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: start; margin-top: 18px; }
.inv-break { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.inv-break th { font-weight: 600; color: #3b4659; text-align: left; padding: 4px 6px; border-bottom: 1px solid #9aa3b2; white-space: nowrap; }
.inv-break td { padding: 4px 6px; border-bottom: 1px solid #dfe3ea; }
.inv-totals { display: grid; grid-template-columns: 1fr auto; margin: 0; font-variant-numeric: tabular-nums; }
.inv-totals dt, .inv-totals dd { padding: 6px 4px; border-bottom: 1px solid #dfe3ea; margin: 0; }
.inv-totals dd { text-align: right; }
.inv-totals .inv-totals-main { font-weight: 700; font-size: 16px; border-bottom: 1.5px solid #1b2433; }
.inv-box { margin-top: 20px; }
.inv-box h3 { font-size: 14px; margin: 0 0 4px; color: #3b4659; }
.inv-box p { margin: 0; white-space: pre-line; border: 1px solid #dfe3ea; padding: 8px 12px; min-height: 2em; }

/* 作る・修正する画面：左に入力、右にできあがりの見た目 */
.inv-edit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-4); align-items: start; }
.inv-edit-preview { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.inv-edit-preview-label { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: 600; font-size: 15px; color: var(--color-text-muted); }
.inv-edit-preview .inv-paper-wrap { padding: 12px; }
.inv-edit-preview .inv-paper { min-width: 0; padding: 28px 26px 30px; }
.inv-edit-preview .inv-head { gap: 14px; }
.inv-edit-preview .inv-from { min-width: 0; }
.inv-quick { display: flex; gap: 6px; margin-top: 6px; }

@media (max-width: 1280px) {
  .inv-edit { grid-template-columns: 1fr; }
  .inv-edit-preview { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .inv-top-actions { align-items: stretch; width: 100%; }
  .inv-paper-wrap { padding: 8px; }
  .inv-paper { min-width: 0; padding: 22px 16px; }
  .inv-head, .inv-sum { grid-template-columns: 1fr; }
  .inv-from { justify-self: start; }
  .inv-menu-body { left: 0; right: auto; }
}

/* 請求書管理：一覧 */
.inv-head-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.inv-status-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3); }
.inv-status-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 15px; font-weight: 600;
  color: var(--color-text-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap; }
.inv-status-tab:hover { color: var(--color-text); text-decoration: none; }
.inv-status-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.inv-count { min-width: 24px; padding: 0 7px; border-radius: var(--radius-full); background: var(--color-surface-raised);
  font-size: 13px; text-align: center; color: var(--color-text-muted); }
.inv-status-tab.is-active .inv-count { background: var(--color-primary); color: #fff; }
.inv-status-tab.is-alert .inv-count { background: var(--color-danger); color: #fff; }
.inv-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: var(--space-3); font-size: 15px; }
.inv-search label { display: inline-flex; align-items: center; gap: 6px; }
.inv-search-q { flex: 1 1 280px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 10px; background: var(--color-surface); }
.inv-search-q input { border: 0; flex: 1; padding: 9px 0; background: none; font-size: 15px; min-width: 0; }
.inv-search-q input:focus { outline: none; }
.inv-list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.inv-list-sum { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); font-size: 15px; color: var(--color-text-muted); }
.inv-list-sum strong { color: var(--color-text); font-size: 17px; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.inv-table th { text-align: left; font-weight: 600; font-size: 14px; color: var(--color-text-muted); padding: 10px 14px;
  border-bottom: 1px solid var(--color-border); white-space: nowrap; background: var(--color-surface-raised); }
.inv-table td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; white-space: nowrap; }
.inv-table .num { text-align: right; }
.inv-row { cursor: pointer; }
.inv-row:hover td { background: var(--color-primary-subtle); }
.inv-row.is-overdue td { background: var(--color-danger-subtle, #fdeceb); }
.inv-row.is-cancelled td { color: var(--color-text-muted); }
.inv-row-main { white-space: normal !important; min-width: 220px; }
.inv-row-main a { display: block; font-weight: 700; font-size: 16px; }
.inv-row-main span { display: block; font-size: 14px; color: var(--color-text-muted); }
.inv-row-num { color: var(--color-text-muted); font-size: 14px; }
.inv-row-amount { font-weight: 700; font-size: 16px; }
.inv-row-amount small { font-weight: 400; font-size: 13px; margin-left: 2px; }
.inv-row-pay { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-empty { padding: 32px 16px; text-align: center; color: var(--color-text-muted); font-size: 15px; margin: 0; }
.inv-gap { height: 22px; }
.inv-edit-preview .inv-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 210px); gap: 14px; }
.inv-edit .bill-lines select[name=line_tax_rate] { min-width: 92px; }

/* 請求書管理：品目の欄と選択肢（2026-11-02） */
.bill-lines .bill-col-name { min-width: 240px; }
/* 品目の欄は横いっぱい、その下に「えらぶ」（品目名が切れないように縦に積む） */
.bill-lines .bill-name-cell { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.bill-lines .bill-name-cell .bill-in-name { width: 100%; min-width: 0; }
.bill-lines .bill-name-cell .bill-name-pick { width: auto; align-self: flex-start; min-width: 0; font-size: 14px; padding: 4px 26px 4px 10px; }
@media (max-width: 720px) {
  .bill-lines .bill-col-name { min-width: 0; }
}

/* 淡い色（珊瑚 #fbebeb など）でも、ほかの人の予定の縁が見えるように少し濃くした（2026-11-02）。 */

/* 経費精算：日当（役職ごとの表・午後出発／午前帰着。2026-11-02） */
.exp-check-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; align-self: end; padding-bottom: 10px; }
.exp-mini-table { margin-top: 8px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.exp-mini-table th, .exp-mini-table td { padding: 3px 10px; border-bottom: 1px solid var(--color-border); text-align: left; }
.exp-mini-table .num { text-align: right; }

/* ===== スケジュール：Googleカレンダーに寄せた見た目（2026-11-02） =====================
   「背景と一体化しすぎ」（利用者）。カレンダーを白い板にして線をはっきりさせ、予定は
   影と白い縁で浮かせる。月表示の時刻つき予定は Google と同じく「●時刻 件名」、
   終日・日をまたぐ予定だけを塗りのバーにする。 */
.cal-shell { background: var(--color-surface); border: 1px solid #dadce0; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .05); padding: 16px 18px 18px; }
.cal-shell .cal-bar-row { border-bottom: 0; margin-bottom: 8px; }

/* 月表示 */
.cal-shell .cal-weekdays { border-bottom: 0; }
.cal-shell .cal-weekday { color: #5f6368; font-size: 14px; }
.cal-shell .cal-grid--month { background: #dadce0; border: 1px solid #dadce0; border-radius: 10px; overflow: hidden; gap: 1px; }
.cal-shell .cal-grid--month .cal-day { background: #fff; cursor: pointer; transition: background .12s; }
.cal-shell .cal-grid--month .cal-day:hover { background: #f8f9fb; }
.cal-shell .cal-grid--month .cal-day.is-other { background: #fafbfc; }
.cal-shell .cal-grid--month .cal-day.is-other .cal-day-num { color: #9aa0a6; }
.cal-shell .cal-day-num { color: #3c4043; font-weight: 600; }
.cal-shell .cal-day.is-today .cal-day-num { background: var(--color-primary); color: #fff; }
.cal-shell .cal-day-bars { display: grid; gap: 2px; }
/* 時刻つきの予定：●時刻 件名（塗らない） */
.cal-shell .cal-bar.cal-bar--dot { background: transparent; box-shadow: none; border: 0; color: #3c4043;
  display: flex; align-items: center; gap: 6px; padding: 1px 6px; border-radius: 6px; }
.cal-shell .cal-bar.cal-bar--dot:hover { background: #f1f3f4; }
.cal-shell .cal-bar--dot .cal-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--ev, var(--color-primary)) 80%, #1b2433); }
.cal-shell .cal-bar--dot .cal-bar-time { color: #5f6368; opacity: 1; font-weight: 400; }
.cal-shell .cal-bar--dot.cal-bar--mine .cal-bar-title { font-weight: 700; }
.cal-shell .cal-bar--dot.cal-bar--other .cal-bar-title { color: #3c4043; }
/* 終日・日をまたぐ予定：塗りのバー */
.cal-shell .cal-bar:not(.cal-bar--dot) { box-shadow: 0 1px 2px rgba(16, 24, 40, .14); border: 0; color: #1b2433;
  font-weight: 600; border-radius: 6px; }
.cal-shell .cal-bar--mine:not(.cal-bar--dot) { background: var(--ev, var(--color-primary-subtle)); }
.cal-shell .cal-bar--other:not(.cal-bar--dot) { background: color-mix(in srgb, var(--ev, var(--color-primary)) 60%, #fff);
  border-left: 4px solid color-mix(in srgb, var(--ev, var(--color-primary)) 70%, #1b2433); }

/* 週・日表示 */
.cal-shell .cal-tg { border: 1px solid #dadce0; border-radius: 10px; overflow: hidden; background: #fff; }
.cal-shell .cal-tg-head { border-bottom: 1px solid #dadce0; background: #fff; }
.cal-shell .cal-tg-dow { color: #5f6368; }
.cal-shell .cal-tg-dnum { color: #3c4043; }
.cal-shell .cal-tg-allday { border-bottom: 1px solid #dadce0; background: #fff; }
.cal-shell .cal-tg-col { border-left: 1px solid #dadce0; background: #fff; cursor: cell; }
.cal-shell .cal-tg-col.is-today { background: color-mix(in srgb, var(--color-primary) 3%, #fff); }
.cal-shell .cal-tg-line { border-top: 1px solid #e3e5e8; }
.cal-shell .cal-tg-line::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--hour-px) / 2);
  border-top: 1px dashed #f0f1f3; }
.cal-shell .cal-tg-hour-label { color: #70757a; }
.cal-shell .cal-slot { border: 1px solid #fff; border-radius: 6px; color: #1b2433;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .22); cursor: pointer; }
.cal-shell .cal-slot:hover { box-shadow: 0 3px 10px rgba(16, 24, 40, .25); z-index: 3; }
.cal-shell .cal-slot--mine { background: var(--ev, var(--color-primary-subtle)); }
.cal-shell .cal-slot--other { background: color-mix(in srgb, var(--ev, var(--color-primary)) 60%, #fff);
  border-left: 4px solid color-mix(in srgb, var(--ev, var(--color-primary)) 70%, #1b2433); }
.cal-shell .cal-slot-time, .cal-shell .cal-slot--other .cal-slot-time { color: #1b2433; opacity: .8; }
.cal-shell .cal-slot-title { font-weight: 700; }
/* ドラッグで選んでいる時間（cal_create.js） */
.cal-new-box { position: absolute; left: 2px; right: 2px; z-index: 4; border-radius: 6px; pointer-events: none;
  background: color-mix(in srgb, var(--color-primary) 85%, #fff); color: #fff; font-size: 14px; font-weight: 700;
  padding: 3px 8px; box-shadow: 0 4px 14px rgba(16, 24, 40, .28); }
/* 今の時刻 */
.cal-now { position: absolute; left: -1px; right: 0; z-index: 5; height: 0; border-top: 2px solid #d93025; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -6px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: #d93025; }
body.cal-dragging .cal-tg-col { cursor: grabbing; }
@media (max-width: 720px) {
  .cal-shell { padding: 10px 8px 12px; border-radius: 12px; }
}
.cal-shell .cal-bar.cal-bar--dot { flex-wrap: nowrap; white-space: nowrap; margin: 0; line-height: 1.55; }
.cal-shell .cal-bar--dot .cal-bar-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cal-shell .cal-tg-col.is-today { background: #f5f9ff; }

/* ===== 予定の登録・修正（2026-11-02、わかりやすく簡単に） ============================ */
.ev-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.ev-card { background: var(--color-surface); border: 1px solid #dadce0; border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.ev-side { position: sticky; top: 12px; display: grid; gap: 14px; }
.ev-side-title { margin: 0; font-size: 15px; color: var(--color-text-muted); font-weight: 600; }
.ev-title { width: 100%; font-size: 24px; font-weight: 600; border: 0; border-bottom: 2px solid #dadce0;
  border-radius: 0; padding: 6px 2px 8px; background: transparent; }
.ev-title:focus { outline: none; border-bottom-color: var(--color-primary); }
.ev-preview { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; font-size: 14px; color: var(--color-text-muted); }
.ev-field { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef0f3; }
.ev-field--tight { margin-top: 0; padding-top: 0; border-top: 0; }
.ev-label { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.ev-label small { font-weight: 400; color: var(--color-text-muted); font-size: 14px; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-chip { position: relative; cursor: pointer; }
.ev-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ev-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: var(--radius-full);
  border: 1px solid #c9ced6; background: #fff; font-size: 15px; font-weight: 600; color: var(--color-text); transition: background .12s; }
.ev-chip:hover span { background: #f3f5f8; }
.ev-chip input:checked + span { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ev-chip input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ev-chip--muted span { color: var(--color-text-muted); font-weight: 500; }
.ev-chip[hidden] { display: none; }
.ev-when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.ev-times { display: flex; align-items: flex-end; gap: 8px; }
.ev-times[hidden] { display: none; }
.ev-tilde { padding-bottom: 10px; color: var(--color-text-muted); }
.ev-inline { display: grid; gap: 4px; font-size: 14px; color: var(--color-text-muted); font-weight: 600; }
.ev-inline input, .ev-inline select, .ev-inline textarea { font-size: 16px; }
.ev-wide { margin-top: 10px; }
.ev-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #c9ced6;
  border-radius: var(--radius-full); font-size: 15px; font-weight: 600; cursor: pointer; }
.ev-toggle input { width: 18px; height: 18px; }
.ev-quick { display: grid; gap: 8px; margin-top: 12px; }
.ev-quick[hidden] { display: none; }
.ev-more { margin-top: 10px; }
.ev-more summary { cursor: pointer; font-size: 14px; color: var(--color-primary); font-weight: 600; }
.ev-more[open] summary { margin-bottom: 8px; }
.ev-search { display: flex; align-items: center; gap: 8px; border: 1px solid #c9ced6; border-radius: var(--radius-md);
  padding: 0 12px; margin-bottom: 10px; background: #fff; }
.ev-search input { border: 0; flex: 1; padding: 10px 0; font-size: 16px; background: none; min-width: 0; }
.ev-search input:focus { outline: none; }
.ev-fac { max-height: 220px; overflow-y: auto; padding: 2px; }
.ev-empty { margin: 4px 0; font-size: 14px; color: var(--color-text-muted); }
.ev-members { border: 0; padding: 0; }
.ev-repeat { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ev-repeat select { font-size: 16px; }
.ev-actions { position: sticky; bottom: 0; z-index: 10; background: color-mix(in srgb, var(--color-bg, #f4f6f9) 92%, transparent);
  backdrop-filter: blur(4px); padding: 12px 0; margin-top: 12px; }
.ev-actions .primary { font-size: 16px; padding: 12px 28px; }
@media (max-width: 960px) {
  .ev-layout { grid-template-columns: 1fr; }
  .ev-side { position: static; }
}
@media (max-width: 720px) {
  .ev-card { padding: 14px 14px; }
  .ev-title { font-size: 20px; }
}

/* スケジュール：選んだ人だけ表示（2026-11-02） */
.cal-filter { position: relative; align-items: center; }
.cal-people { position: relative; }
.cal-people-btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600;
  padding: 9px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: #fff; white-space: nowrap; }
.cal-people-btn::-webkit-details-marker { display: none; }
.cal-people[open] .cal-people-btn { background: var(--color-primary-subtle); }
.cal-people-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(360px, 90vw); max-height: 60vh; overflow: auto;
  background: #fff; border: 1px solid #dadce0; border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 24, 40, .18); padding: 12px 14px; }
.cal-people-group + .cal-people-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef0f3; }
.cal-people-team { font-size: 13px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 4px; }
.cal-people-item { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 15px; cursor: pointer; border-radius: 8px; }
.cal-people-item:hover { background: #f3f5f8; }
.cal-people-item input { width: 18px; height: 18px; }
.cal-people-item i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.cal-people-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
@media (max-width: 720px) { .cal-people-pop { right: auto; left: 0; } }

/* 予定の登録：個人の予定／会社の予定（2026-11-02） */
.ev-cal-pick { display: inline-flex; gap: 0; border: 1px solid #c9ced6; border-radius: var(--radius-full); padding: 3px; margin-bottom: 14px; background: #f6f7f9; }
.ev-cal { position: relative; cursor: pointer; }
.ev-cal input { position: absolute; opacity: 0; pointer-events: none; }
.ev-cal span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: var(--radius-full); font-size: 15px; font-weight: 600; color: var(--color-text-muted); }
.ev-cal input:checked + span { background: #fff; color: var(--color-text); box-shadow: 0 1px 3px rgba(16, 24, 40, .18); }
.ev-cal input:focus-visible + span { outline: 2px solid var(--color-primary); }
.ev-cal-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.ev-company-note { display: flex; align-items: center; gap: 6px; margin: 18px 0 0; padding: 10px 14px; border-radius: 10px;
  background: color-mix(in srgb, #e5b443 16%, #fff); font-size: 15px; font-weight: 600; }
.ev-company-note[hidden], .ev-field[hidden] { display: none; }
/* カレンダー：会社の予定は太字で、帯に小さく「全社」 */
.cal-shell .is-company .cal-slot-title, .cal-shell .is-company .cal-bar-title { font-weight: 800; }

/* スケジュール：過ぎた日・時間・予定は薄く（2026-11-02） */
.cal-shell .cal-grid--month .cal-day.is-past { background: #f4f5f7; }
.cal-shell .cal-grid--month .cal-day.is-past .cal-day-num { color: #9aa0a6; }
.cal-shell .cal-tg-col.is-past { background: #f4f5f7; }
.cal-shell .cal-tg-dayhead.is-past .cal-tg-dow, .cal-shell .cal-tg-dayhead.is-past .cal-tg-dnum { color: #9aa0a6; }
.cal-past-shade { position: absolute; left: 0; right: 0; top: 0; background: rgba(120, 128, 140, .09); pointer-events: none; z-index: 0; }
.cal-shell .cal-slot.is-past, .cal-shell .cal-bar.is-past { opacity: .5; filter: saturate(.5); box-shadow: none; }
.cal-shell .cal-slot.is-past:hover, .cal-shell .cal-bar.is-past:hover { opacity: .85; }

/* 予定の登録：項目ごとに区切って、字を大きく（2026-11-02、「全体的に長く見えて見づらい」） */
.ev-main.ev-card { background: transparent; border: 0; box-shadow: none; padding: 0; display: grid; gap: 14px; counter-reset: evstep; }
.ev-block { background: var(--color-surface); border: 1px solid #dadce0; border-radius: 14px; padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.ev-main .ev-field.ev-block { margin-top: 0; border-top: 1px solid #dadce0; }
.ev-block--top .ev-title { font-size: 26px; }
.ev-block--top .ev-preview { font-size: 15px; }
.ev-step .ev-label { font-size: 19px; font-weight: 800; margin-bottom: 14px; gap: 10px; }
.ev-step .ev-label::before { counter-increment: evstep; content: counter(evstep); display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 700; flex: 0 0 auto; }
.ev-step .ev-label small { font-size: 15px; }
.ev-main .ev-chip span { font-size: 17px; min-height: 46px; padding: 8px 18px; }
.ev-main .ev-inline { font-size: 15px; }
.ev-main .ev-inline input, .ev-main .ev-inline select, .ev-main .ev-search input { font-size: 18px; }
.ev-main .ev-inline input[type=date], .ev-main .ev-inline input[type=time] { min-height: 48px; }
.ev-main .time-chip { font-size: 16px; padding: 8px 14px; }
.ev-main .time-quick-label { font-size: 15px; min-width: 3em; }
.ev-main .ev-toggle { font-size: 17px; min-height: 48px; }
.ev-main .ev-fac { max-height: 190px; border: 1px solid #eef0f3; border-radius: 10px; padding: 10px; background: #fbfbfc; }
.ev-main .member-chip { font-size: 17px; }
.ev-main .ev-more summary { font-size: 16px; }
.ev-main .ev-company-note { margin: 0; font-size: 17px; }
.ev-side .ev-inline { font-size: 15px; }
.ev-side .ev-inline input, .ev-side .ev-inline textarea, .ev-side select { font-size: 17px; }
@media (max-width: 720px) {
  .ev-block { padding: 14px 14px; }
  .ev-block--top .ev-title { font-size: 21px; }
}

/* 予定の登録：施設のプルダウン（2026-11-02） */
.ev-dd { position: relative; }
.ev-dd-btn { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 50px; padding: 0 16px; border: 1px solid #c9ced6; border-radius: 10px; background: #fff; font-size: 18px; font-weight: 600; }
.ev-dd-btn::-webkit-details-marker { display: none; }
.ev-dd[open] .ev-dd-btn { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.ev-dd-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid #dadce0;
  border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .2); padding: 12px; }
.ev-dd-list { max-height: 300px; overflow-y: auto; display: grid; gap: 2px; }
.ev-dd-item { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 8px; font-size: 17px; cursor: pointer; }
.ev-dd-item:hover { background: #f3f5f8; }
.ev-dd-item input { width: 20px; height: 20px; flex: 0 0 auto; }
.ev-dd-item[hidden] { display: none; }
.ev-dd-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.ev-fac-selected { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ev-fac-selected:empty { display: none; }
.ev-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 600; }
.ev-tag-x { border: 0; background: rgba(255, 255, 255, .2); color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; }
.ev-tag-x:hover { background: rgba(255, 255, 255, .35); }
.ev-search input, .ev-search input:focus { border: 0 !important; box-shadow: none !important; outline: none; }

/* スケジュール：クイック登録の窓・終日の帯（2026-11-02） */
.cal-quick { position: fixed; z-index: 60; width: min(420px, calc(100vw - 24px)); background: #fff; border-radius: 16px;
  box-shadow: 0 16px 48px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .12); padding: 14px 18px 16px; }
.cal-quick[hidden] { display: none; }
.cal-quick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal-quick-head .ev-cal-pick { margin: 0; }
.cal-quick-head .ev-cal span { padding: 6px 14px; font-size: 15px; }
.cal-quick-x { border: 0; background: transparent; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.cal-quick-x:hover { background: #f1f3f4; }
.cal-quick .cal-quick-title { width: 100%; font-size: 22px; border: 0 !important; border-bottom: 2px solid var(--color-primary) !important;
  border-radius: 0 !important; padding: 6px 2px 8px; box-shadow: none !important; background: transparent; }
.cal-quick .cal-quick-title:focus { outline: none; }
.cal-quick-when { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; font-size: 17px; font-weight: 600; }
.cal-quick-kind { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.cal-quick-kind select { font-size: 17px; min-height: 44px; flex: 1; }
.cal-quick-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.cal-quick-more { border: 0; background: transparent; color: var(--color-primary); font-size: 16px; font-weight: 700; cursor: pointer; padding: 10px 12px; border-radius: 8px; }
.cal-quick-more:hover { background: var(--color-primary-subtle); }
.cal-quick .primary { font-size: 16px; padding: 11px 26px; border-radius: var(--radius-full); }
.cal-shell .cal-tg-allday-col { cursor: cell; min-height: 34px; }
.cal-shell .cal-tg-allday-col.is-picking, .cal-shell .cal-grid--month .cal-day.is-picking {
  background: color-mix(in srgb, var(--color-primary) 14%, #fff) !important; }
@media (max-width: 720px) {
  .cal-quick { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; }
}
/* 終日の段を広く（2026-11-02、「もう少し枠を広げて」）。押しやすく、帯が2本並んでも窮屈にならない */
.cal-shell .cal-tg-allday-col { min-height: 64px; padding: 6px 4px; display: flex; flex-direction: column; gap: 3px; }
.cal-shell .cal-tg-allday-label { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #5f6368; }
.cal-shell .cal-tg-allday .cal-bar, .cal-shell .cal-tg-allday .cal-work { font-size: 14px; line-height: 1.6; padding: 2px 8px; }

/* ===== タスクのページ（2026-11-02、見やすく使いやすく） =============================== */
.tk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tk-kpi { background: #fff; border: 1px solid #dadce0; border-radius: 14px; padding: 14px 18px; display: grid; gap: 2px; }
.tk-kpi span { font-size: 15px; color: var(--color-text-muted); font-weight: 600; }
.tk-kpi strong { font-size: 32px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tk-kpi strong small { font-size: 16px; margin-left: 2px; font-weight: 600; }
.tk-kpi .tk-kpi-name { font-size: 22px; }
.tk-kpi em { font-style: normal; font-size: 14px; color: var(--color-text-muted); }
.tk-kpi.is-crit { border-color: color-mix(in srgb, var(--color-danger) 40%, #fff); background: color-mix(in srgb, var(--color-danger) 6%, #fff); }
.tk-kpi.is-crit strong { color: var(--color-danger); }
.tk-kpi.is-warn { border-color: color-mix(in srgb, var(--color-warning) 45%, #fff); background: color-mix(in srgb, var(--color-warning) 7%, #fff); }
.tk-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.tk-main, .tk-side { display: grid; gap: 16px; }
.tk-card { background: #fff; border: 1px solid #dadce0; border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.tk-card-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.tk-card-head h2 { margin: 0; font-size: 20px; }
.tk-count { font-size: 15px; color: var(--color-text-muted); font-weight: 600; display: inline-flex; gap: 10px; }
.tk-count-crit { color: var(--color-danger); }
.tk-add { background: #f6f7f9; border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.tk-add-row { display: flex; gap: 8px; }
.tk-add-row input[type=text] { flex: 1; min-width: 0; font-size: 17px; min-height: 48px; }
.tk-add-row input[type=date] { font-size: 16px; min-height: 48px; }
.tk-add-row .primary { font-size: 16px; padding: 0 22px; }
.tk-add-more { margin-top: 8px; }
.tk-add-more summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px; }
.tk-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.tk-add-grid label { display: grid; gap: 4px; font-size: 14px; color: var(--color-text-muted); font-weight: 600; }
.tk-add-grid input, .tk-add-grid select { font-size: 16px; }
.tk-wide { grid-column: 1 / -1; }
.tk-group { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 6px; font-size: 16px; color: var(--color-text-muted); }
.tk-group span { font-size: 14px; font-weight: 600; }
.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tk-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 4px; border-top: 1px solid #eef0f3; }
.tk-item:first-child { border-top: 0; }
.tk-item.is-overdue { background: color-mix(in srgb, var(--color-danger) 5%, #fff); border-radius: 10px; }
.tk-item--ask { grid-template-columns: minmax(0, 1fr); }
.tk-check-form { margin: 0; }
.tk-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #9aa0a6; background: #fff; cursor: pointer; margin-top: 2px; display: inline-block; }
.tk-check:hover { border-color: var(--color-success, #1e8e3e); background: color-mix(in srgb, var(--color-success, #1e8e3e) 12%, #fff); }
.tk-check.is-on { background: var(--color-success, #1e8e3e); border-color: var(--color-success, #1e8e3e); }
.tk-title { font-size: 17px; font-weight: 700; line-height: 1.45; }
.tk-item.is-done .tk-title { text-decoration: line-through; color: var(--color-text-muted); font-weight: 500; }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 14px; }
.tk-due { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--color-text-muted); }
.tk-due--overdue, .tk-due--today { color: var(--color-danger); }
.tk-due--soon { color: var(--color-warning); }
.tk-pill { padding: 1px 10px; border-radius: var(--radius-full); background: #f1f3f4; font-weight: 600; font-size: 13px; }
.tk-pill--crit { background: color-mix(in srgb, var(--color-danger) 12%, #fff); color: var(--color-danger); }
.tk-pill--warn { background: color-mix(in srgb, var(--color-warning) 14%, #fff); color: var(--color-warning); }
.tk-sub { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-muted); }
.tk-note { margin-top: 6px; }
.tk-note summary { cursor: pointer; font-size: 14px; color: var(--color-primary); font-weight: 600; }
.tk-note textarea { width: 100%; font-size: 15px; margin: 6px 0; }
.tk-read { margin-top: 6px; padding: 8px 10px; background: #f6f7f9; border-radius: 8px; font-size: 15px; white-space: pre-line; }
.tk-actions { display: flex; align-items: center; gap: 6px; }
.tk-row-actions { display: flex; gap: 8px; margin-top: 8px; }
.tk-btn { border: 1px solid #c9ced6; background: #fff; border-radius: var(--radius-full); padding: 6px 14px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; list-style: none; }
.tk-btn::-webkit-details-marker { display: none; }
.tk-btn:hover { background: #f3f5f8; }
.tk-btn--icon { padding: 4px 12px; font-size: 18px; line-height: 1; }
.tk-menu { position: relative; }
.tk-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid #dadce0; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .16); padding: 6px; min-width: 160px; }
.tk-menu-pop form { margin: 0; }
.tk-menu-pop button { width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; font-size: 15px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.tk-menu-pop button:hover { background: #f3f5f8; }
.tk-menu-pop button.is-danger { color: var(--color-danger); }
.tk-empty { color: var(--color-text-muted); font-size: 15px; margin: 6px 0; display: flex; align-items: center; gap: 6px; }
.tk-done { margin-top: 14px; }
.tk-done summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--color-text-muted); }
.tk-load { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tk-load-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tk-load-name { font-size: 16px; font-weight: 700; }
.tk-load-num { font-size: 14px; color: var(--color-text-muted); }
.tk-load-num b { font-size: 18px; color: var(--color-text); }
.tk-load li.is-empty .tk-load-num { color: var(--color-success, #1e8e3e); font-weight: 600; }
.tk-load-track { height: 12px; background: #f1f3f4; border-radius: var(--radius-full); overflow: hidden; margin-top: 6px; }
.tk-load-track .load-bar-outer { display: flex; height: 100%; }
.tk-load-tags { display: flex; gap: 6px; margin-top: 6px; }
.tk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 13px; color: var(--color-text-muted); }
.tk-ask summary { font-size: 16px; padding: 10px 0 2px; }
.tk-rank { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 16px; }
.tk-rank li { display: list-item; }
.tk-rank li span { display: inline-block; min-width: 8em; }
@media (max-width: 1100px) {
  .tk-layout { grid-template-columns: 1fr; }
  .tk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tk-card { padding: 14px; }
  .tk-item { grid-template-columns: auto minmax(0, 1fr); }
  .tk-actions { grid-column: 2; }
  .tk-add-row { flex-wrap: wrap; }
  .tk-add-row input[type=text] { flex-basis: 100%; }
  .tk-add-grid { grid-template-columns: 1fr; }
  .tk-kpi strong { font-size: 26px; }
}

/* スケジュール：自分のタスク（締切の日、2026-11-02） */
.cal-task { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.5; padding: 1px 8px; border-radius: 6px;
  color: #1b2433; text-decoration: none; background: #fff; border: 1px dashed #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-task i { flex: 0 0 auto; width: 12px; height: 12px; border: 2px solid #5f6368; border-radius: 3px; }
.cal-task:hover { background: #f1f3f4; text-decoration: none; }
.cal-task--overdue, .cal-task--today { border-color: var(--color-danger); color: var(--color-danger); }
.cal-task--overdue i, .cal-task--today i { border-color: var(--color-danger); }
.cal-legend-task { display: inline-block; width: 12px; height: 12px; border: 2px solid #5f6368; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.tk-item:target { outline: 3px solid color-mix(in srgb, var(--color-primary) 40%, transparent); border-radius: 10px; }

/* 部屋タイプの「ランクの幅」（利用者の指定、2026-11-02）。この部屋で使う差額・倍率の見本。 */
[data-rank-width] .rate-segment { gap: var(--space-2); margin-bottom: var(--space-2); }
.rank-width-choice { gap: var(--space-4); }
.rank-width-preview { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-3) 0 var(--space-2); }
.rank-width-chip { padding: 2px 8px; border: 1px solid var(--color-border); border-radius: 6px;
  font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--color-surface); }
.rank-width-chip b { margin-right: 2px; }
.pill.rank-own-pill { margin-top: var(--space-1); }
/* タスクのやる日時（2026-11-02）：カレンダーでは点線の枠＋□、タスクのページでは青い札 */
.cal-shell .cal-slot.cal-slot--task { background: color-mix(in srgb, var(--ev, var(--color-primary)) 22%, #fff);
  border: 2px dashed color-mix(in srgb, var(--ev, var(--color-primary)) 80%, #1b2433); box-shadow: none; }
.cal-shell .cal-bar--task .cal-task-box, .cal-task-box { flex: 0 0 auto; width: 12px; height: 12px; border: 2px solid #5f6368; border-radius: 3px; }
.cal-task--plan { border-style: solid; border-color: var(--color-primary); }
.tk-plan { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: var(--radius-full);
  background: var(--color-primary-subtle); color: var(--color-primary); font-weight: 700; font-size: 13px; }
.tk-plan-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.tk-plan-fields input { font-size: 16px; min-height: 42px; }
.tk-plan-label { width: 100%; font-size: 14px; color: var(--color-text-muted); font-weight: 600; }

/* タスクの資料（ファイル・URL。2026-11-02） */
.tk-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.tk-file { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border: 1px solid #c9ced6; border-radius: var(--radius-full);
  background: #fff; font-size: 14px; max-width: 100%; }
.tk-file a { display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary); font-weight: 600; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.tk-file a:hover { text-decoration: underline; }
.tk-file-x { border: 0; background: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; color: var(--color-text-muted); font-size: 15px; }
.tk-file-x:hover { background: #f1f3f4; color: var(--color-danger); }
.tk-file-add { flex-basis: 100%; }
.tk-file-add input[type=file] { font-size: 15px; }
.tk-file-add input[type=url], .tk-file-add input[type=text] { font-size: 16px; min-width: 200px; flex: 1; }
.ev-private { margin-left: 6px; padding: 0 6px; border-radius: 6px; background: rgba(0,0,0,.08); font-size: 12px; font-weight: 600; }
.ev-chip input:checked + span .ev-private { background: rgba(255,255,255,.25); }
.ev-cal-box { width: 12px; height: 12px; border: 2px solid #5f6368; border-radius: 3px; display: inline-block; }

/* ===== ホーム（個人）：お知らせと今日やること（2026-11-02、分かりやすく・字を大きく） ===== */
.hm-notices, .hm-today { background: #fff; border: 1px solid #dadce0; border-radius: 16px; padding: 18px 20px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.hm-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 20px; }
.hm-badge { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--radius-full);
  background: var(--color-danger); color: #fff; font-size: 15px; }
.hm-date { font-size: 16px; font-weight: 600; color: var(--color-text-muted); margin-left: 4px; }
.hm-ok { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 16px; color: var(--color-success, #1e8e3e); font-weight: 600; }
.hm-notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hm-notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px;
  border-radius: 12px; border: 1px solid; border-left-width: 6px; }
.hm-notice.is-crit { background: color-mix(in srgb, var(--color-danger) 6%, #fff); border-color: color-mix(in srgb, var(--color-danger) 35%, #fff); border-left-color: var(--color-danger); }
.hm-notice.is-warn { background: color-mix(in srgb, var(--color-warning) 8%, #fff); border-color: color-mix(in srgb, var(--color-warning) 40%, #fff); border-left-color: var(--color-warning); }
.hm-notice-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.hm-notice.is-crit .hm-notice-icon { background: var(--color-danger); }
.hm-notice.is-warn .hm-notice-icon { background: var(--color-warning); }
.hm-notice-body { display: grid; gap: 2px; }
.hm-notice-body strong { font-size: 17px; line-height: 1.45; }
.hm-notice-body span { font-size: 15px; color: var(--color-text-muted); }
.hm-notice-btn { white-space: nowrap; padding: 10px 18px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none; }
.hm-notice-btn:hover { filter: brightness(1.1); text-decoration: none; color: #fff; }
.hm-today-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hm-today-grid--sub { margin-top: 14px; }
.hm-box { border: 1px solid #e3e6ea; border-radius: 12px; padding: 14px 16px; background: #fbfbfc; }
.hm-box-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hm-box-head h3 { margin: 0; font-size: 17px; display: inline-flex; align-items: baseline; gap: 8px; }
.hm-box-head a { font-size: 15px; font-weight: 600; }
.hm-count { font-size: 14px; color: var(--color-text-muted); font-weight: 600; }
.hm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hm-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid #eceef1; font-size: 16px; }
.hm-row:first-child { border-top: 0; }
.hm-row.is-overdue, .hm-row.is-warn { background: color-mix(in srgb, var(--color-danger) 5%, transparent); border-radius: 8px; }
.hm-time { flex: 0 0 auto; min-width: 5.2em; font-weight: 700; font-size: 16px; }
.hm-time small { display: block; font-weight: 500; font-size: 14px; color: var(--color-text-muted); }
.hm-text { min-width: 0; display: grid; gap: 2px; }
.hm-text a { font-weight: 700; }
.hm-tag { font-size: 14px; color: var(--color-text-muted); font-weight: 600; }
.hm-tag.is-crit { color: var(--color-danger); }
.hm-empty { margin: 6px 0; font-size: 15px; color: var(--color-text-muted); }
.hm-more { display: inline-block; margin-top: 6px; font-size: 15px; font-weight: 600; }
/* 実績の数字（ホーム・スタッフのページ）も大きめに */
.kpi-label { font-size: 14px; }
.kpi-unit { font-size: 14px; }
.kpi-link { font-size: 14px; }
.button-link.small { font-size: 14px; }
.person-event, .person-columns .task-item { font-size: 15px; }
.person-columns .task-tag { font-size: 13px; }
@media (max-width: 900px) {
  .hm-today-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hm-notice { grid-template-columns: auto minmax(0, 1fr); }
  .hm-notice-btn { grid-column: 1 / -1; text-align: center; }
  .hm-notices, .hm-today { padding: 14px; }
}

/* タスクの完了の印は、カレンダーと同じ□にそろえる（利用者の指定、2026-11-02） */
.tk-check, .task-check { border-radius: 6px !important; position: relative; }
.tk-check:hover::after, .task-check:hover::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 18px; font-weight: 800; color: var(--color-success, #1e8e3e); line-height: 1; }
.tk-check.is-on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; font-weight: 800; }

/* ===== ホーム（会社）：字を大きく（2026-11-02、「このページ字が小さめ」） ===== */
.home-section-title { font-size: 20px; color: var(--color-text); }
.home-section-title .cell-sub { font-size: 16px; }
.home-view-link, .tab-link { font-size: 16px; }
.home-money-period { font-size: 17px; font-weight: 700; }
.home-money-rows dt { font-size: 16px; }
.home-money-rows dd { font-size: 20px; font-weight: 700; }
.home-money-rows .is-total dd { font-size: 26px; }
.home-money-rows dd small { font-size: 15px; font-weight: 600; margin-left: 2px; }
.home-compass .compass-people { gap: 10px; }
.home-compass .compass-person { padding: 14px 18px; grid-template-columns: 150px minmax(0, 1fr); }
.home-compass .compass-when { white-space: nowrap; }
.home-compass .compass-when strong { font-size: 20px; }
.home-compass .compass-when small { font-size: 14px; }
.home-compass .compass-name { font-size: 17px; font-weight: 700; gap: 8px; }
.home-compass .compass-name .avatar { width: 30px; height: 30px; font-size: 14px; }
.home-compass .pill { font-size: 13px; padding: 2px 10px; }
.home-compass .cell-sub { font-size: 15px; }
.home-compass .att-msg { font-size: 15px; }
.vision-board, .vision-board .vision-chip { font-size: 16px; }
.kpi-board .kpi-label, .vision-board .kpi-label { font-size: 15px; }
@media (max-width: 720px) {
  .home-compass .compass-person { grid-template-columns: 120px minmax(0, 1fr); }
  .home-compass .compass-month { grid-column: 1 / -1; }
}

/* ホーム（個人）：これから／これまで（2026-11-02） */
.hm-future .hm-title { color: var(--color-primary); }
.hm-past { background: #fbfaf7; }
.hm-row.is-today-row { background: color-mix(in srgb, var(--color-primary) 5%, transparent); border-radius: 8px; }
.hm-amount { margin-left: auto; font-weight: 700; font-size: 17px; white-space: nowrap; }
.hm-amount small { font-size: 14px; margin-left: 2px; }
/* トップの実績の札。いまは2つ（締切の割合はトップから外した、2026-11-03）。
   数を変えたらここも変える。空の列を作ると画面の右側が余白になる。 */
.hm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
.hm-kpi { background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; padding: 12px 16px; display: grid; gap: 2px; }
.hm-kpi span { font-size: 15px; color: var(--color-text-muted); font-weight: 600; }
.hm-kpi strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.hm-kpi strong small { font-size: 15px; margin-left: 2px; }
.hm-kpi em { font-style: normal; font-size: 14px; color: var(--color-text-muted); }
@media (max-width: 720px) { .hm-kpis { grid-template-columns: 1fr; } }
.home-account-open { font-size: 14px; }
.home-account-form, .home-account-form label, .home-account-form .cell-sub { font-size: 14px; }
.home-account-form input, .home-account-form select { font-size: 16px; }

/* タスクの□を小さく（利用者、2026-11-02「ちょっと大きい」）。28px → 22px */
.tk-check { width: 22px !important; height: 22px !important; border-radius: 5px !important; margin-top: 3px; }
.tk-check:hover::after, .tk-check.is-on::after { font-size: 15px; }
.hm-notice.is-noaction { grid-template-columns: auto minmax(0, 1fr); }

/* 勤怠の勤務表：列の並び（横いっぱいに均等）は前のまま、行の上下の余白だけ詰める
   （利用者、2026-11-02。列を左に寄せた版は戻した）。 */
.att-days td { padding-top: 5px; padding-bottom: 5px; line-height: 1.35; }
.att-days th { padding-top: 8px; padding-bottom: 8px; }
.att-days td .att-btn, .att-days td button { padding-top: 6px; padding-bottom: 6px; }
.att-days td button, .att-days td .att-btn { min-height: 38px; }

/* スマホで画面が横にはみ出して、全体が縮んで表示されていたところ（2026-11-02、390px幅で実測）。
   ・選択肢の長いプルダウン（エリア予約件数の「この施設にあたるもの」など）が幅を押し広げていた
   ・スケジュールの「表示する人」の小窓が、ボタンの位置から右へ突き出していた
   ・項目の並びを画面ごとに指定している入力欄（マニュアルの登録など）が、スマホでも3列のままだった
   ・枠で囲んだ入力欄（プロモーションの施設選び）が、中身の幅に合わせて広がっていた
   ・マニュアルの本文で、長いURLが折り返されずに続いていた */
select { max-width: 100%; }
fieldset { min-width: 0; }
.manual-section-body { overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .form-grid[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 720px) {
  .inline-form label { max-width: 100%; min-width: 0; }
  .cal-people { position: static; }
  .cal-people-pop { left: 0; right: 0; width: auto; }
  /* 数字のカードの単位に説明が付くもの（「%・12件中10件」など）は、数字の後ろで折り返す */
  .kpi-value .kpi-unit { white-space: normal; }
}

/* Trip.comのログイン（プロモーション管理） */
.ota-login { max-width: 720px; }
.ota-login-state { font-size: 16px; margin: var(--space-2) 0 var(--space-3); }
.ota-login-ng { color: var(--color-danger); }
.ota-login-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ota-login-link { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.ota-login-link label { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-1); font-size: 15px; font-weight: 600; }
.ota-login-link input[type=url] { font-size: 16px; padding: 10px 12px; width: 100%; }

/* 自分のタスクを「お願いに出す」ときに重さ・緊急度を選ぶ小窓（2026-11-03） */
.tk-menu > summary { list-style: none; }
.tk-menu > summary::-webkit-details-marker { display: none; }
.tk-ask-pop { left: 0; right: auto; min-width: 240px; padding: 12px; }
.tk-ask-pop form { display: grid; gap: 10px; }
.tk-ask-pop label { display: grid; gap: 4px; font-size: 14px; color: var(--color-text-muted, #5f6368); }
.tk-ask-pop select { font-size: 15px; padding: 8px 10px; }
.tk-menu-pop.tk-ask-pop button.primary { background: var(--color-primary, #1f2a44); color: #fff; justify-content: center; font-size: 15px; }

/* 勤怠：グラフの下に有給の取得状況（2026-11-03）。左の列はグラフと有給を縦に積む。 */
.att-dash-main { display: flex; flex-direction: column; min-width: 0; }
.att-leave-card .att-leave { grid-template-columns: auto minmax(200px, 1fr); }
.att-leave-card .att-leave-grants { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px;
  border-top: 1px solid var(--color-border, #e3e6ea); padding-top: var(--space-3); }
.att-leave-card .att-leave-grants li { background: var(--color-surface-muted, #f6f7f9); border-radius: 8px; padding: 8px 12px; }
@media (max-width: 960px) {
  .att-leave-card .att-leave { grid-template-columns: 1fr; }
}
.att-leave-next { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; color: var(--color-text); }
.att-leave-next li { display: flex; align-items: center; gap: 6px; }

/* 勤怠の日ごとの表：列を等間隔に並べ、行に少しゆとりを持たせる（2026-11-03、
   利用者が見せた他社の勤怠画面くらいの幅・高さ）。数字も見出しの下に左ぞろえ。 */
@media (min-width: 601px) {
  .att-days { table-layout: fixed; }
  .att-days th:nth-child(1) { width: 15%; }
  .att-days th:nth-child(2) { width: 13%; }
  .att-days th:nth-child(3) { width: 14%; }
  .att-days th:nth-child(4) { width: 13%; }
  .att-days th:nth-child(5) { width: 13%; }
  .att-days th:nth-child(7) { width: 110px; }
  .att-days .num { text-align: left; }
  .att-days th, .att-days td { padding-left: 24px; padding-right: 16px; }
  .att-days td { padding-top: 10px; padding-bottom: 10px; }
  .att-days th { padding-top: 12px; padding-bottom: 12px; }
  .att-days td.att-day-act { text-align: right; padding-right: 20px; }
  .att-day-note { overflow-wrap: anywhere; }
}

/* ── スタッフ管理：字を大きく・見やすく（2026-11-03） ── */
.st-page { font-size: 16px; }
.st-page .data-table th { font-size: 14px; padding: 12px 14px; }
.st-page .data-table td { font-size: 15px; padding: 12px 14px; }
.st-page .data-table td a { font-size: inherit; }
.st-page .cell-sub, .st-page .data-table .cell-sub { font-size: 13.5px; }
.st-page .pill { font-size: 13px; padding: 3px 10px; }
.st-page .avatar-row a { font-size: 16px; font-weight: 700; }
.st-page .cell-actions .small, .st-page .cell-actions button { font-size: 14px; min-height: 36px; }
.st-page .staff-dept-row td { font-size: 15px; font-weight: 700; }
.st-page .hint { font-size: 14px; }
.st-page .filter-row label, .st-page .filter-row select { font-size: 15px; }
.st-page .tab-link { font-size: 16px; }
/* 編集 */
.st-page .form-section { padding: 22px 24px; }
.st-page .form-section-title { font-size: 19px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.st-page .form-grid label, .st-page .staff-tool-grid label { font-size: 14px; color: var(--color-text); }
.st-page .form-label { font-size: 15px; font-weight: 700; color: var(--color-text); }
.st-page input[type=text], .st-page input[type=email], .st-page input[type=tel], .st-page input[type=date],
.st-page input[type=password], .st-page select, .st-page textarea { font-size: 16px; }
.st-page select.small { font-size: 15px; min-height: 40px; }
.st-page .inline-check { font-size: 15px; }
.st-page .staff-tool-group > .cell-sub { font-size: 14px; font-weight: 700; letter-spacing: .04em; margin-top: 12px; }
.st-page .staff-tool-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 12px 16px; }
.st-page .staff-access-block { margin-top: 18px; }
.st-page .ct-key-item { font-size: 15px; }
.st-page details > summary { font-size: 15px; }
.st-page .form-actions button, .st-page .form-actions .button { font-size: 16px; min-height: 44px; padding: 0 22px; }
/* 担当施設の札 */
.st-fac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.st-fac { display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px 8px 12px; background: #fff; }
.st-fac:has(input:checked), .st-fac.is-on { border-color: var(--color-primary, #1f2a44); background: #f1f4fa; }
.st-fac-name { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; min-width: 0; margin: 0; color: var(--color-text); }
.st-fac-name input { width: 20px; height: 20px; flex: none; }
.st-fac-name span { overflow-wrap: anywhere; }
.st-fac select { width: auto; min-width: 7.5rem; max-width: 10rem; font-size: 14px; min-height: 36px; padding: 4px 8px; }
.st-fac:not(:has(input:checked)) select { opacity: .55; }
/* チーム編成 */
.st-page .staff-chip-name { font-size: 15px; }
.st-page .team-count { font-size: 14px; }
.st-page .people-name { font-size: 15px; }
.st-page .avatar { font-size: 14px; }
.st-page .team-card-header a, .st-page .staff-chip-role, .st-page .team-add select, .st-page .team-add button { font-size: 15px; }
/* 個人 */
.st-page .kpi-label, .st-page .kpi-unit, .st-page .kpi-link { font-size: 15px; }
.st-page .load-name { font-size: 15px; }
@media (max-width: 600px) {
  .st-fac-grid { grid-template-columns: 1fr; }
}
.st-page .back-link, .st-page button.small, .st-page .chip, .st-page .team-empty, .st-page .people-count { font-size: 14px; }
.st-page .people-item, .st-page .people-item span, .st-page .people-facility span { font-size: 14px; }
.bill-mail-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.bill-mail-fields button { font-size: var(--text-sm); }
.bill-mail-preview { background: var(--color-surface-muted, #f6f7f9); border-radius: 8px; padding: var(--space-3) var(--space-4); }
.bill-mail-preview p, .bill-mail-preview pre { margin: 0 0 6px; }
.bill-mail-preview-to { font-size: var(--text-sm); color: var(--color-text-muted); }
.bill-mail-preview-subject { font-weight: 600; }
.bill-mail-preview pre { white-space: pre-wrap; font-family: inherit; font-size: var(--text-base); line-height: 1.7; }
.bill-mail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .bill-mail { grid-template-columns: minmax(0, 1fr); } }
/* 請求書管理：URLで送る（開封の確認） */
.bill-how { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.bill-how-opt { flex: 1 1 260px; display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.bill-how-opt:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.bill-how-opt input { width: 20px; height: 20px; flex: none; }
.bill-how-opt span { display: flex; flex-direction: column; gap: 2px; }
.bill-how-opt small { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 400; }
.bill-url { word-break: break-all; }
.inv-link { display: flex; align-items: center; gap: 8px; margin: 6px 0; max-width: 720px; }
.inv-link span { font-size: var(--text-sm); color: var(--color-text-muted); flex: none; }
.inv-link input { flex: 1; min-width: 0; font-size: var(--text-sm); }
.inv-opened { margin-left: 6px; }
.inv-public-paper { max-width: 920px; margin: 0 auto 32px; padding: 0 max(16px, env(safe-area-inset-left, 0px)); overflow-x: auto; }

/* 出張精算の日当：1日いくら・日ごとの内訳・合計と明細の状態（2026-11-03） */
.exp-allowance { display: block; }
.exp-allow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.exp-allow-title { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; }
.exp-allow-rate { font-size: 16px; }
.exp-allow-rate b { font-size: 18px; }
.exp-allow-rate small { font-size: 14px; color: var(--color-text-muted); margin-left: 4px; }
.exp-allow-days { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.exp-allow-days li { display: grid; gap: 2px; min-width: 112px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); }
.exp-allow-days li.is-half { border-style: dashed; background: #fbf7ee; }
.exp-allow-date { font-size: 14px; color: var(--color-text-muted); font-weight: 600; }
.exp-allow-amt { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.exp-allow-days small { font-size: 13px; color: var(--color-text-muted); }
.exp-allow-total { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 16px; }
.exp-allow-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.exp-allow-total .pill { font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
/* 半日になる日：チェックと文字を横に並べる */
.exp-check-row { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 0; align-self: start; }
.exp-info-grid .exp-check-row label.inline-check { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--color-text); }
.exp-check-row input[type=checkbox] { width: 18px; height: 18px; margin: 0; }


/* 出張の行き先：施設を何か所でも（2026-11-03） */
.exp-dests { grid-column: span 1; }
.exp-dest-row { display: flex; gap: 6px; align-items: center; }
.exp-dest-row input { flex: 1; min-width: 0; }
.exp-dest-del { flex: none; width: 34px; height: 34px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.exp-dests .exp-dest-row:only-of-type .exp-dest-del { visibility: hidden; }
.exp-dest-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--color-primary, #1f2a44); font-size: 15px; font-weight: 700; padding: 4px 0; cursor: pointer; }
/* 日ごとの日当の札（打ち合わせあり／半日／移動だけ） */
.exp-allow-days li { min-width: 150px; }
.exp-allow-days li.is-none { border-style: dashed; background: #f4f5f7; }
.exp-allow-days li.is-none .exp-allow-amt { color: var(--color-text-muted); }
.exp-allow-days select { font-size: 14px; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); max-width: 100%; }

/* ── 精算の画面の作り直し（2026-11-03）：番号つきの段・押して選ぶボタン・日当の札 ── */
.exp-step { padding: 18px 22px; }
.exp-step-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.exp-step-n { width: 26px; height: 26px; border-radius: 50%; background: #e8eef8; color: var(--color-primary, #1f2a44); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.exp-step-body { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.exp-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; }
.exp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.exp-field .exp-label, .exp-allow-bar .exp-label { font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.exp-field input[type=text], .exp-field input[type=date] { font-size: 16px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 8px; min-width: 220px; }
.exp-field--range .date-range-btn { min-height: 42px; min-width: 260px; text-align: left; font-size: 16px; }
.exp-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-surface); }
.exp-seg label { margin: 0; cursor: pointer; }
.exp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.exp-seg span { display: block; padding: 8px 14px; font-size: 15px; border-right: 1px solid var(--color-border); color: var(--color-text); }
.exp-seg label:last-child span { border-right: 0; }
.exp-seg input:checked + span { background: var(--color-primary, #1f2a44); color: #fff; font-weight: 700; }
.exp-seg input:focus-visible + span { outline: 2px solid var(--color-primary, #1f2a44); outline-offset: -2px; }
.exp-dests .exp-dest-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exp-dests .exp-dest-row input { min-width: 200px; }
.exp-note-box summary { font-size: 15px; color: var(--color-text-muted); cursor: pointer; }
.exp-note-box input { margin-top: 8px; width: 100%; font-size: 16px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 8px; }
.exp-allow-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin-bottom: 12px; }
.exp-allow-sum { font-size: 16px; }
.exp-allow-sum strong { font-size: 24px; margin: 0 6px; font-variant-numeric: tabular-nums; }
.exp-allow-sum small { font-size: 14px; color: var(--color-text-muted); }
.exp-allow-days li { padding: 0; border: 0; background: none; min-width: 0; }
.exp-day { display: grid; gap: 2px; text-align: left; min-width: 140px; padding: 10px 14px; border: 2px solid var(--color-primary, #1f2a44); border-radius: 12px; background: #f1f4fa; cursor: pointer; font: inherit; color: var(--color-text); }
.exp-day.is-none { border: 2px dashed var(--color-border); background: var(--color-surface); color: var(--color-text-muted); }
.exp-day .exp-day-state { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; }
.exp-day.is-none .exp-allow-amt { color: var(--color-text-muted); }
.exp-day:disabled { cursor: default; }
.exp-add > summary { list-style: none; }
.exp-add > summary::-webkit-details-marker { display: none; }
.exp-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px dashed var(--color-primary, #1f2a44); border-radius: 10px; color: var(--color-primary, #1f2a44); font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 10px; }
.exp-add[open] .exp-add-btn { margin-bottom: 12px; }
.exp-check-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.exp-check-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; padding: 8px 12px; border-radius: 8px; background: #fbf5e6; }
.exp-check-list li.is-block { background: #fbeaea; }
.exp-check-list li em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--color-danger); margin-left: auto; }
.exp-check-notes { font-size: 14px; margin-bottom: 12px; }
.exp-send-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.exp-send-total { display: flex; align-items: baseline; gap: 10px; }
.exp-send-total strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.exp-send-total small { font-size: 14px; color: var(--color-text-muted); }
.exp-send-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: flex-end; }
.exp-delete { margin-top: 14px; text-align: right; }
@media (max-width: 600px) {
  .exp-field input[type=text], .exp-dests .exp-dest-row input { min-width: 0; width: 100%; }
  .exp-field, .exp-dests { width: 100%; }
  .exp-day { min-width: 0; width: 100%; }
  .exp-allow-days li { flex: 1 1 140px; }
}

/* 請求書の自動発行（MFの定期請求） */
.inv-menu-body .inv-menu-link { width: 100%; display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--color-text); font-size: var(--text-base); text-decoration: none; }
.inv-menu-body .inv-menu-link:hover { background: var(--color-surface-raised); }
.rec-table td { vertical-align: top; }
.rec-table td .cell-sub { display: block; }
/* 前回の結果は長いので折り返す（ほかの列は一覧の決まりどおり折り返さない） */
.exp-table.rec-table td.rec-last, .exp-table.rec-table td.rec-wrap { white-space: normal; min-width: 180px; max-width: 260px; }
.rec-off td { color: var(--color-text-muted); }
.rec-mail, .rec-next { margin: 0; font-size: var(--text-base); }
.rec-line-sample { display: block; margin-top: 4px; }
.rec-how { margin-top: var(--space-3); }
.rec-form .exp-card .hint { margin-top: var(--space-3); }
.rec-delete { margin-top: var(--space-4); position: relative; }

/* 取引先の施設（複数えらべる） */
.bill-span4 { grid-column: 1 / -1; }
.bill-facilities { min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.bill-facilities legend { padding: 0 6px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.bill-fac-count { margin-left: 8px; font-weight: 400; }
.bill-grid .bill-facilities .bill-fac-filter { width: 100%; max-width: 320px; margin-bottom: 10px; }
.bill-facilities .bill-checks { max-height: 280px; overflow-y: auto; }
.bill-grid .bill-facilities label.bill-check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: var(--text-base); color: var(--color-text); }
.bill-grid .bill-facilities label.bill-check input { width: 18px; height: 18px; flex: none; }
.bill-facility-pick[hidden] { display: none !important; }

/* 1通にまとめる請求書：明細ごとの施設（施設ごとに分けるときは列ごと隠す） */
.bill-lines:not(.is-by-line) .bill-line-fac { display: none; }
.bill-lines .bill-line-fac select { min-width: 160px; }
.bill-facility-pick { display: flex; flex-direction: column; gap: var(--space-3); }
.bill-grid .bill-facility-one { max-width: 420px; }
.inv-line-fac { display: block; margin-top: 2px; font-size: 13px; color: var(--color-text-muted); }
.bill-grid .bill-facility-pick .bill-how-opt { font-size: var(--text-base); font-weight: 400; color: var(--color-text); }
.bill-grid .bill-facility-pick .bill-how-opt strong { font-weight: 700; }