.monthly-notice {
  width: min(calc(var(--space-52) * 2 + var(--space-8)), calc(100% - var(--space-8)));
  max-width: 100%;
  max-height: calc(100dvh - var(--space-8));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: var(--border-thin);
  border-radius: var(--radius-dialog);
  background: var(--home-pearl);
  color: var(--home-ink);
  font-family: var(--font-body);
  box-shadow: var(--home-panel-shadow);
}
.monthly-notice[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.monthly-notice::backdrop { background: var(--home-dialog-backdrop); }
.monthly-notice__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-thin);
  color: var(--home-wine-deep);
}
.monthly-notice__brand { margin: 0; font: var(--font-eyebrow) var(--font-editorial-latin); }
.monthly-notice__heading { grid-column: 1; min-width: 0; }
.monthly-notice__heading h2 { margin: 0; font-size: var(--home-font-display-sm); font-weight: 400; line-height: var(--home-leading-heading); word-break: keep-all; }
.monthly-notice__heading p { margin: 0 0 var(--space-1); font-size: var(--font-small); line-height: var(--home-leading-tight); color: var(--ink-600); }
.monthly-notice__close {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.monthly-notice__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; padding: var(--space-4) var(--space-6) var(--space-5); }
.monthly-notice__calendar { min-width: 0; }
.monthly-notice table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0 var(--space-1); table-layout: fixed; text-align: center; }
.monthly-notice :is(th, td) { padding: 0; border: 0; text-align: center; }
.monthly-notice th { height: var(--space-8); font-size: var(--font-small); font-weight: 400; color: var(--ink-600); }
.monthly-notice td { height: var(--space-10); font: var(--font-body-lg) var(--font-editorial-latin); }
.monthly-notice td span { display: inline-grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); }
.monthly-notice :is(.is-closed, .is-sunday) span { background: var(--wine-50); color: var(--home-wine-deep); }
.monthly-notice .is-morning span { background: var(--home-wine-deep); color: var(--home-pearl); border-radius: var(--radius-control); }
.monthly-notice th:first-child { color: var(--home-wine); }
.monthly-notice__legend { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-3) 0 var(--space-5); padding: 0; list-style: none; font-size: var(--font-small); line-height: var(--home-leading-body); }
.monthly-notice__legend li { display: flex; align-items: center; gap: var(--space-2); }
.monthly-notice__legend li[hidden] { display: none; }
.monthly-notice__legend li::before { content: ''; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-round); background: var(--wine-50); }
.monthly-notice__legend .monthly-notice__legend-morning::before { border-radius: var(--line-width); background: var(--home-wine-deep); }
.monthly-notice__information { min-width: 0; }
.monthly-notice__details { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4); background: var(--home-paper); border-radius: var(--radius-control); font-size: var(--font-small); line-height: var(--home-leading-body); }
.monthly-notice__details > div { display: grid; grid-template-columns: var(--space-22) minmax(0, 1fr); gap: var(--space-2); }
.monthly-notice__details :is(dt, dd) { margin: 0; word-break: keep-all; }
.monthly-notice__details dt { color: var(--home-wine-deep); white-space: nowrap; }
.monthly-notice__details span { white-space: nowrap; }
.monthly-notice__note { margin: var(--space-4) 0 0; font-size: var(--font-small); color: var(--ink-600); line-height: var(--home-leading-body); word-break: keep-all; text-align: center; }
.monthly-notice__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-5); border-top: var(--border-thin); }
.monthly-notice__actions button { min-width: 0; min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: var(--border-thin); border-radius: var(--radius-control); background: transparent; color: var(--home-wine-deep); font: inherit; font-size: var(--font-small); line-height: var(--home-leading-tight); word-break: keep-all; cursor: pointer; }
.monthly-notice__actions button span { white-space: nowrap; }
.monthly-notice__actions [data-notice-close] { border-color: transparent; background: var(--home-wine-deep); color: var(--home-pearl); }
.monthly-notice__close:hover, .monthly-notice__actions [data-notice-dismiss]:hover { background: var(--wine-50); }
.monthly-notice__close:active, .monthly-notice__actions [data-notice-dismiss]:active { background: var(--wine-100); }
.monthly-notice__actions [data-notice-close]:hover { background: var(--home-wine); }
.monthly-notice__actions [data-notice-close]:active { background: var(--wine-850); }
.monthly-notice button:focus-visible { outline: var(--focus-ring) solid var(--key-700); outline-offset: var(--focus-separation); }
@media (max-width: 900px) {
  .monthly-notice { width: min(calc(var(--space-52) * 3), 100%); max-height: calc(100dvh - var(--space-4) - env(safe-area-inset-top, 0px)); margin: auto auto 0; border-bottom: 0; border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; }
  .monthly-notice__header { padding-top: var(--space-4); }
  .monthly-notice__actions { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 599px) {
  .monthly-notice__header, .monthly-notice__body, .monthly-notice__actions { padding-inline: var(--space-4); }
  .monthly-notice__details > div { grid-template-columns: var(--space-16) minmax(0, 1fr); gap: var(--space-3); }
}
@media (min-width: 600px) and (max-width: 900px) and (max-height: 30rem) {
  .monthly-notice__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
  .monthly-notice__details > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .monthly-notice__header { padding-block: var(--space-3); }
  .monthly-notice__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
  .monthly-notice__heading p { margin: 0; }
  .monthly-notice__close { align-self: center; }
  .monthly-notice__legend { margin-bottom: 0; }
  .monthly-notice__actions { padding-top: var(--space-3); }
}
