.grace-calendar {
  --grace-ink: #34413f;
  --grace-muted: #6f7976;
  --grace-line: #d8ddda;
  --grace-surface: #fbfaf7;
  --grace-head: #566b67;
  --grace-weekday: #eee7d2;
  --grace-saturday: #a9c4cf;
  --grace-sunday: #abc5b2;
  --grace-closed: #bf7d83;
  --grace-partial: #c69b65;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 30px);
  color: var(--grace-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background: var(--grace-surface);
  border: 1px solid var(--grace-line);
  box-shadow: 0 14px 38px rgba(48, 62, 59, .09);
  transition: opacity .2s ease;
  box-sizing: border-box;
}
.grace-calendar *, .grace-calendar *::before, .grace-calendar *::after { box-sizing: border-box; }
.grace-calendar.is-loading { opacity: .55; pointer-events: none; }
.grace-calendar__header {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  min-height: 66px;
  color: #fff;
  background: var(--grace-head);
}
.grace-calendar__header strong {
  padding: 12px 8px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(21px, 5vw, 30px);
  font-weight: 500;
  letter-spacing: .08em;
  text-align: center;
}
.grace-calendar__nav {
  appearance: none;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease;
}
.grace-calendar__nav:hover,
.grace-calendar__nav:focus-visible {
  background: rgba(255, 255, 255, .12);
  outline: none;
}
.grace-calendar__table {
  width: 100%;
  margin: 0;
  border: 1px solid var(--grace-line);
  border-top: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
}
.grace-calendar__table th {
  padding: 10px 2px;
  border: 1px solid #e3e6e4;
  color: var(--grace-ink);
  background: #eef0ee;
  font-size: clamp(15px, 3vw, 19px);
  font-weight: 600;
  text-align: center;
}
.grace-calendar__table th.is-sunday { color: #a35960; }
.grace-calendar__table th.is-saturday { color: #587d8c; }
.grace-calendar__table td {
  height: 56px;
  padding: 0;
  border: 2px solid #fff;
  color: var(--grace-ink);
  font-size: clamp(17px, 3.8vw, 24px);
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
}
.grace-calendar__table td span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.grace-calendar__table .is-empty { background: #f8f8f6; }
.grace-calendar__day.is-weekday { background: var(--grace-weekday); }
.grace-calendar__day.is-saturday { background: var(--grace-saturday); }
.grace-calendar__day.is-sunday { background: var(--grace-sunday); }
.grace-calendar__day.is-closed { color: #fff; background: var(--grace-closed); }
.grace-calendar__day.is-partial { color: #fff; background: var(--grace-partial); }
.grace-calendar__day.is-today span {
  box-shadow: inset 0 0 0 2px var(--grace-ink);
  font-weight: 700;
}
.grace-calendar__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--grace-line);
}
.grace-calendar__legend span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--grace-muted);
  font-size: 15px;
  line-height: 1.5;
}
.grace-calendar__legend i {
  flex: 0 0 24px;
  width: 24px;
  height: 16px;
  border: 1px solid rgba(52, 65, 63, .08);
}
.grace-calendar__legend .is-closed { background: var(--grace-closed); }
.grace-calendar__legend .is-saturday { background: var(--grace-saturday); }
.grace-calendar__legend .is-weekday { background: var(--grace-weekday); }
.grace-calendar__legend .is-sunday { background: var(--grace-sunday); }
@media (max-width: 520px) {
  .grace-calendar { padding: 14px; }
  .grace-calendar__header { min-height: 58px; }
  .grace-calendar__table td { height: 45px; border-width: 1px; }
  .grace-calendar__legend { grid-template-columns: 1fr; gap: 8px; }
  .grace-calendar__legend span { font-size: 14px; }
}