/* ============================================================
   COL. SAKO 予約状況
   デザイン方針:
   - 素材感と奥行きで階層を示す（半透明レイヤー + 段階的な影）
   - 触れるものは押した瞬間に反応する
   - 文字サイズごとにトラッキングと行間を変える
   - 動き・透過・コントラストの設定を尊重する
   ============================================================ */

:root {
  color-scheme: light;

  /* 面: 白を基調に、地とカードのわずかな明度差だけで階層を作る */
  --bg: #f5f5f7;
  --bg-tint: #ffffff;
  --card: #ffffff;
  --card-veil: rgba(255, 255, 255, 0.72);
  --surface-2: #f5f5f7;
  --surface-3: #fafafa;

  /* 文字: 純黒を避けたニュートラルグレー */
  --text: #1d1d1f;
  --muted: #6e6e73;

  /* 差し色: 無彩色の地に対してブルーのみをテーマカラーとして使う */
  --accent: #0071e3;
  --accent-dark: #0058b0;
  --accent-soft: rgba(0, 113, 227, 0.10);
  /* 今日の列の地色。縦一列に効くので、見出しよりさらに薄くする */
  --today-col: rgba(0, 113, 227, 0.05);
  /* アクセント地の上に載せる文字色 */
  --on-accent: #ffffff;

  --line: #06c755;
  --instagram: #e4405f;
  /* 罫線は面ではなく髪の毛のような細線で区切る */
  --border: rgba(0, 0, 0, 0.09);
  --hairline: rgba(0, 0, 0, 0.055);

  --sat: #0071e3;
  --sun: #d70015;
  --sat-tint: #f2f7fd;
  --sun-tint: #fdf3f3;

  /* 記号色: 白地で十分な濃さのある系統色 */
  --ok: #248a3d;
  --warn: #b25000;
  --ng: #d70015;

  /* 奥行き: 面が大きいほど厚く見せる。色味を持たせずニュートラルに */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.07);

  --radius: 16px;
  --radius-sm: 10px;

  /* 動き: 既定は行き過ぎない（critically damped 相当） */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 端末の文字サイズ設定に追従できるよう相対値を基準にする */
  font-size: 100%;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

/* 背景に極めて淡い暖色のグラデーションを敷き、面の前後関係を出す */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--bg-tint) 0%, transparent 60%);
  pointer-events: none;
}

/* ---------- ヘッダー ---------- */
.site-header {
  text-align: center;
  padding: 2.75rem 1rem 0.75rem;
  max-width: 55rem;
  margin: 0 auto;
}

.site-title {
  /* 大きい文字は行間を詰める。和文なので字間はごく僅かに開ける */
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin: 0 0 0.9rem;
  color: var(--text);
}

.site-lead {
  font-size: 0.85rem;
  line-height: 1.9;
  letter-spacing: 0.005em;
  color: var(--muted);
  margin: 0 0 0.6rem;
  text-wrap: pretty;
}

.range {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  margin: 0.6rem 0 0;
}
.range:empty { display: none; }

main {
  max-width: 61rem;
  margin: 0 auto;
  padding: 1rem;
}

/* ---------- カード ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin: 1rem 0;
  box-shadow: var(--shadow-1);
}

/* 大きい面ほど厚く見せる */
.schedule-card { box-shadow: var(--shadow-2); }

.card-title {
  font-size: 1.05rem;
  font-weight: 700;
  /* 見出しはやや大きいので字間を詰める */
  letter-spacing: 0.01em;
  line-height: 1.45;
  margin: 0 0 0.85rem;
  color: var(--text);
}

/* ---------- アイコン (Lucide のスプライト) ---------- */
.icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 見出しの頭に付ける。色は差し色にして、文字より一歩引かせる */
.card-title .icon {
  margin-right: 0.45em;
  vertical-align: -0.17em;
  color: var(--accent);
}

.news-body {
  font-size: 0.9rem;
  line-height: 1.95;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.last-updated {
  margin: 0.9rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.error {
  background: color-mix(in srgb, var(--ng) 10%, var(--card));
  color: var(--ng);
  border: 1px solid color-mix(in srgb, var(--ng) 32%, transparent);
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-sm);
  margin: 0.75rem 0;
  font-size: 0.82rem;
  line-height: 1.7;
}
.error.warn {
  background: color-mix(in srgb, var(--warn) 12%, var(--card));
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  color: color-mix(in srgb, var(--warn) 72%, var(--text));
}

/* ---------- スケジュール表 ---------- */
.schedule-card { padding: 0.7rem; }

.week-view {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: 12px;
  /* 右端だけをぼかし「まだ先がある」ことを線ではなく素材で示す。
     左端は固定表示の時間列があるため、ぼかさない。 */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
}

table.schedule {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 0.8rem;
}

table.schedule th,
table.schedule td {
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  padding: 0.35rem 0.5rem;
  text-align: center;
  background: var(--card);
}

/* 見出し行は半透明の板。表がその下を流れていく */
table.schedule thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card-veil);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: var(--text);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

table.schedule th.time-col,
table.schedule td.time {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card-veil);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}
table.schedule thead th.time-col { z-index: 3; }

table.schedule th.date-head.sat,
table.schedule td.sat { background: var(--sat-tint); }
table.schedule th.date-head.sat { color: var(--sat); }

table.schedule th.date-head.sun,
table.schedule td.sun { background: var(--sun-tint); }
table.schedule th.date-head.sun { color: var(--sun); }

/* 今日の列は「今どこか」がすぐ分かるように示す。
   白基調を濁さないよう、塗りつぶしではなく淡い地色 + 色文字 + 下線で示す。 */
table.schedule th.date-head.today {
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
}
table.schedule td.today { background: var(--today-col); }

tr.hour-start td,
tr.hour-start th { border-top: 1.5px solid var(--border); }

.cell {
  display: inline-block;
  min-width: 1.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}
.cell.available { color: var(--ok); }
.cell.limited { color: var(--warn); }
.cell.unavailable { color: var(--ng); opacity: 0.55; }
.cell.unknown { color: var(--muted); }

/* ---------- 凡例 ---------- */
.legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.legend-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.7;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.badge.available { color: var(--ok); }
.badge.limited { color: var(--warn); }
.badge.unavailable { color: var(--ng); }
.legend-text strong {
  margin-right: 0.4rem;
  letter-spacing: 0.02em;
}

/* ---------- 予約ボタン ---------- */
.reserve-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.reserve-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 0.75rem;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-1);
  /* 押した瞬間に反応する。クリック完了を待たない */
  transition: transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out), opacity 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.reserve-btn:hover { box-shadow: var(--shadow-2); }
.reserve-btn:active { transform: scale(0.97); box-shadow: var(--shadow-1); }
.reserve-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.reserve-btn.instagram {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
}
.reserve-btn.line { background: var(--line); }
.reserve-icon { display: inline-flex; font-size: 1.2rem; }

/* ---------- メニュー表 ---------- */
.menu-section + .menu-section { margin-top: 1.25rem; }
.menu-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
.menu-list { margin: 0; }
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}
.menu-item:last-child { border-bottom: none; }
.menu-name { font-size: 0.95rem; font-weight: 500; }
.menu-price {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.menu-note {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--muted);
}
.menu-footnote {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 登場 ---------- */
/* 素材が現れるように、ほんの少し持ち上げながら実体化させる */
@keyframes surface-in {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: none; }
}
main .card {
  animation: surface-in 420ms var(--ease-out) both;
}
main .card:nth-of-type(1) { animation-delay: 0ms; }
main .card:nth-of-type(2) { animation-delay: 45ms; }
main .card:nth-of-type(3) { animation-delay: 90ms; }
main .card:nth-of-type(4) { animation-delay: 135ms; }

.site-footer {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

/* ---------- 画面幅 ---------- */
@media (max-width: 32.5rem) {
  .reserve-buttons { grid-template-columns: 1fr; }
  .card { padding: 1rem 1.05rem; }
  .schedule-card { padding: 0.55rem; }
  main { padding: 0.75rem; }
  .site-header { padding-top: 2rem; }
}

/* ---------- アクセシビリティ ---------- */
@media (prefers-reduced-motion: reduce) {
  main .card { animation: none; }
  .reserve-btn { transition: opacity 160ms ease; }
  .reserve-btn:active { transform: none; }
  * { scroll-behavior: auto !important; }
}

@media (prefers-reduced-transparency: reduce) {
  table.schedule thead th,
  table.schedule th.time-col,
  table.schedule td.time {
    background: var(--surface-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .card { border-color: var(--accent-dark); }
  table.schedule th,
  table.schedule td { border-color: var(--border); }
  .cell.unavailable { opacity: 1; }
  .site-lead, .last-updated, .site-footer { color: var(--text); }
}