:root {
  --bg: #f7f8f6;
  --surface: #ffffff;
  --text: #1d2327;
  --muted: #5f6970;
  --border: #d9dee2;
  --grid: #e1e0d9;
  --baseline: #8a8f94;
  --accent: #1f6f8b;
  --banner-bg: #fff4d6;
  --banner-border: #e0b44c;
  /* 4 段階（安い ↔ 高い）。青 ↔ 赤の発散、真ん中は灰色。validate_palette.js で隣どうしの見分けを確認済み */
  --level-low: #5598e7;
  --level-normal: #f0efec;
  --level-high: #f0a09c;
  --level-peak: #d63f3f;
  --level-none: transparent;
  --on-strong: #ffffff;
  --cheaper: #2a78d6;
  --pricier: #e34948;
  --insufficient: #c9ccd0;
  --trend-line: #3b4247;
  --trend-daily: #a9b0b5;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #15181a;
    --surface: #1e2225;
    --text: #e5e8ea;
    --muted: #99a2a9;
    --border: #353b40;
    --grid: #2c2f31;
    --baseline: #6c747a;
    --accent: #7cc3dc;
    --banner-bg: #3a3218;
    --banner-border: #8a6d22;
    --level-low: #3987e5;
    --level-normal: #3a3c3e;
    --level-high: #9a4545;
    --level-peak: #e66767;
    --cheaper: #3987e5;
    --pricier: #e66767;
    --insufficient: #4a4f54;
    --trend-line: #d5dadd;
    --trend-daily: #5c6469;
  }
}

:root[data-theme='dark'] {
  --trend-line: #d5dadd;
  --trend-daily: #5c6469;
  --bg: #15181a;
  --surface: #1e2225;
  --text: #e5e8ea;
  --muted: #99a2a9;
  --border: #353b40;
  --grid: #2c2f31;
  --baseline: #6c747a;
  --accent: #7cc3dc;
  --banner-bg: #3a3218;
  --banner-border: #8a6d22;
  --level-low: #3987e5;
  --level-normal: #3a3c3e;
  --level-high: #9a4545;
  --level-peak: #e66767;
  --cheaper: #3987e5;
  --pricier: #e66767;
  --insufficient: #4a4f54;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    system-ui,
    -apple-system,
    'Hiragino Sans',
    'Noto Sans JP',
    sans-serif;
  line-height: 1.6;
}

.header,
.main,
.footer {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

.header h1 {
  margin: 24px 0 4px;
  font-size: 1.6rem;
}

.lead,
.note,
.observed,
.footer {
  color: var(--muted);
}

.note {
  font-size: 0.9rem;
}

.picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: end;
  margin: 16px 0;
}

.picker label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}

select,
input[type='search'] {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  max-width: 100%;
}

.observed {
  margin: 0;
  font-size: 0.9rem;
}

.banner {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  border-radius: 8px;
}

/* モックサイトの注意書き。ヘッダーのいちばん上に置く */
.banner-mock {
  margin: 16px 0 0;
}

.status:empty {
  display: none;
}

.block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin: 0 0 20px;
}

.block h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0;
  margin: 8px 0 12px;
  list-style: none;
  font-size: 0.85rem;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
  position: relative;
}

.level-low {
  background: var(--level-low);
  color: var(--on-strong);
}
.level-normal {
  background: var(--level-normal);
}
.level-high {
  background: var(--level-high);
}
.level-peak {
  background: var(--level-peak);
  color: var(--on-strong);
}
.level-none {
  background: var(--level-none);
  border-style: dashed;
}

/* 満室が多い日は、右上に小さな印（色だけに頼らない） */
.has-soldout::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 1.5px var(--surface);
}

.calendar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.month h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.month .grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.month .weekday {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
}

.cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border-radius: 4px;
  border: 1px solid transparent;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  color: inherit;
}

.cell.blank,
.cell.level-none {
  background: none;
}

.cell.level-low,
.cell.level-peak {
  color: var(--on-strong);
}

button.cell {
  cursor: pointer;
}

button.cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.cell.level-none {
  border: 1px dashed var(--border);
  color: var(--muted);
}

.cell.blank {
  border: none;
}

/* 祝日は日付に下線（色だけに頼らない） */
.cell.is-holiday,
.holiday-sample {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 700;
}

.holiday-sample {
  font-size: 0.8rem;
}

.day-detail {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--bg);
}

.day-detail p {
  margin: 2px 0 0;
}

.table-view {
  margin-top: 12px;
}

.table-wrap {
  overflow-x: auto;
  max-height: 360px;
}

table {
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 100%;
}

th,
td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

th:first-child,
td:first-child {
  text-align: left;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}

.tabs button {
  font: inherit;
  font-size: 0.9rem;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.tabs button[aria-selected='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.summary {
  font-weight: 600;
  margin: 8px 0;
}

.summary:empty {
  display: none;
}

.chart {
  overflow-x: auto;
}

.chart svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}

.chart .grid-line {
  stroke: var(--grid);
  stroke-width: 1;
}

.chart .base-line {
  stroke: var(--baseline);
  stroke-width: 1.5;
}

.chart .axis-label,
.chart .value-label,
.chart .soldout-label {
  fill: var(--muted);
  font-size: 11px;
}

.chart .value-label {
  fill: var(--text);
  font-weight: 600;
}

.chart .bar-cheaper {
  fill: var(--cheaper);
}

.chart .bar-pricier {
  fill: var(--pricier);
}

.chart .bar-insufficient {
  fill: none;
  stroke: var(--insufficient);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.chart .hit {
  fill: transparent;
  cursor: default;
}

.chart .hit:hover + .bar-group rect,
.chart g.col:hover rect.bar {
  opacity: 0.85;
}

/* ---- 1 年の流れ ---- */

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  list-style: none;
  margin: 8px 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.trend-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trend-legend li[hidden] {
  display: none;
}

.trend-legend .key {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px solid var(--trend-line);
}

.trend-legend .key-daily {
  border-top: 1px solid var(--trend-daily);
}

.trend-legend .key-cheaper,
.trend-legend .key-pricier {
  height: 10px;
  border: 0;
  border-radius: 2px;
  background: var(--cheaper);
  opacity: 0.35;
}

.trend-legend .key-pricier {
  background: var(--pricier);
}

.trend-chart {
  overflow-x: auto;
  touch-action: pan-y;
}

.trend-chart svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}

.trend-chart .panel-title {
  fill: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.trend-chart .axis-label {
  fill: var(--muted);
  font-size: 11px;
}

.trend-chart .month-band {
  fill: var(--grid);
  opacity: 0.35;
}

.trend-chart .grid-line {
  stroke: var(--grid);
  stroke-width: 1;
}

.trend-chart .base-line {
  stroke: var(--baseline);
  stroke-width: 1.5;
}

.trend-chart .line-daily {
  fill: none;
  stroke: var(--trend-daily);
  stroke-width: 1;
}

.trend-chart .line-avg {
  fill: none;
  stroke: var(--trend-line);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.trend-chart .vacancy .line-avg {
  stroke: var(--accent);
}

.trend-chart .area-vacancy {
  fill: var(--accent);
  opacity: 0.14;
}

.trend-chart .fill-cheaper {
  fill: var(--cheaper);
  opacity: 0.3;
}

.trend-chart .fill-pricier {
  fill: var(--pricier);
  opacity: 0.3;
}

.trend-chart .holiday-tick {
  fill: var(--pricier);
}

.trend-chart .note-dot {
  fill: var(--text);
  stroke: var(--surface);
  stroke-width: 2;
}

.trend-chart .note-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.trend-chart .crosshair {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.trend-chart .hover-dot {
  stroke: var(--surface);
  stroke-width: 2;
  fill: var(--trend-line);
}

.trend-chart .vacancy .hover-dot {
  fill: var(--accent);
}

.trend-chart .overlay {
  fill: transparent;
  cursor: crosshair;
}

.tooltip {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  max-width: 260px;
}

.footer {
  font-size: 0.85rem;
  padding-bottom: 32px;
}