:root{
  --cell-min-h: 124px;
  --radius: 16px;
}
body { background: #f6f7fb; }

.page-header{
  background: linear-gradient(135deg, rgba(13,110,253,.12), rgba(25,135,84,.10));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px 14px;
}
.month-title { letter-spacing: .02em; }

.cal-dow{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:10px;
}
.cal-days{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 992px){
  .cal-days{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 576px){
  :root{ --cell-min-h:110px; }
  .cal-days{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
  .cal-dow{ gap:8px; }
}

.dow{
  text-align:center;
  font-weight:700;
  padding:10px 8px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
}
.dow.sun{ color:#dc3545; }
.dow.sat{ color:#0d6efd; }

.day{
  min-height: var(--cell-min-h);
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:10px;
  box-shadow: 0 6px 20px rgba(15,23,42,.04);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.day.out-month{ background:#fbfbfd; opacity:.75; }
.day.today{ outline:2px solid rgba(13,110,253,.25); }

.day-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.day-num{ font-weight:800; font-size:1.05rem; line-height:1; }
.day-badge{
  font-size:.75rem;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  color:#495057;
  white-space:nowrap;
}

.slot{
  border-radius:12px;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.08);
  background:#f8f9fa;
  font-size:.92rem;
  line-height:1.2;
}
.slot .time{ font-weight:700; white-space:nowrap; }
.slot .time-sub{
  font-weight: 700;
  white-space: nowrap;
}
.slot .meta{ font-size:.78rem; opacity:.85; margin-top:2px; }

.slot.open{ background:#d1fae5; border-color: rgba(25,135,84,.35); }
.slot.open a{ color:#0f5132; text-decoration:none; display:block; }
.slot.open:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(25,135,84,.14);
  transition:.15s ease;
}
.slot.booked{ background:#f1f3f5; border-color: rgba(108,117,125,.25); color:#6c757d; }
.slot.too-soon{ background:#fff3cd; border-color: rgba(255,193,7,.35); color:#664d03; }

@media (max-width: 576px){
  .day{ padding:9px; border-radius:14px; }
  .dow{ padding:9px 6px; border-radius:12px; font-size:.92rem; }
  .slot{ padding:8px 9px; font-size:.90rem; }
}

/* 土日祝の色分け（セルの上部を色で示す） */
.day.sun { border-color: rgba(220,53,69,.25); }
.day.sat { border-color: rgba(13,110,253,.25); }
.day.holiday { border-color: rgba(255,193,7,.35); }

/* 上部帯を付ける（見やすい） */
.day.sun::before,
.day.sat::before,
.day.holiday::before{
  content:"";
  display:block;
  height:6px;
  border-radius: 14px;
  margin-bottom:8px;
}

.day.sun::before { background: rgba(220,53,69,.25); }
.day.sat::before { background: rgba(13,110,253,.25); }
.day.holiday::before { background: rgba(255,193,7,.35); }

/* 祝日が最優先（sun/satより上書き） */
.day.holiday::before { background: rgba(255,193,7,.45); }
.day.holiday { background: rgba(255,193,7,.05); }

/* admin tables: column widths (CSP対応でinline style禁止なのでクラスで指定) */
.col-dt { width: 170px; white-space: nowrap; }
.col-status { width: 90px; white-space: nowrap; }
.col-cnt { width: 90px; white-space: nowrap; text-align: center; }
.col-op { width: 150px; white-space: nowrap; }

/* 過去日（昨日より前）は薄く、クリックしたくならない感じに */
.day.past{
  opacity: .55;
  filter: grayscale(0.25);
}
.day.past .slot a{
  pointer-events: none;
}