/* カレンダー専用のラッパ要素 */
.calendar-root {
  --text:#1f2335;
  --muted:#6b7280;
  --border:#e5e7eb;

  margin:0; 
  padding:24px;
  color:var(--text);
  font-family: system-ui, sans-serif;
}

.calendar {
  max-width:1000px; margin:0 auto;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

.calendar__header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--border);
}

.calendar__month {
  font-size:1.4rem;
  font-weight:700;
}

.calendar__location {
  font-size:.95rem;
  color:var(--muted);
}

.btn {
  border:1px solid var(--border);
  background:#fff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}

.weekdays, .grid {
  display:grid;
  grid-template-columns: repeat(7, 1fr);
}

.weekday {
  text-align:center;
  padding:10px;
  font-weight:700;
  color:var(--muted);
}

.day {
  min-height:120px;
  border:1px solid var(--border);
  padding:10px;
  background:#fff;
  text-align:center;
}

.day:hover {
  background:#f0f8ff;
}

a.day {
  text-decoration:none;
  color:inherit;
}

.align-center { text-align:center; }
.align-left   { text-align:left; }
.align-right  { text-align:right; }

.day__top {
  font-size:1.2rem;
  margin-bottom:8px;
}

.date {
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  font-size:1.1rem;
}

.icon {
  width: 36px;
  height: 0px;
  display: inline-block;
  font-size: 28px;
}

.note {
  font-size: 1.2rem;
  color: var(--muted);
  margin-top: 4px;
}