* { box-sizing: border-box; }
body { margin: 0; color: #242424; background: #fff; font-family: sans-serif; font-size: 14px; }
.month-calendar { width: 100%; max-width: 620px; margin: 0 auto; padding: 12px 8px; }
h1 { margin: 0 0 12px; font-size: 17px; }
nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; margin-bottom: 10px; }
nav span:last-child { text-align: right; }
h2 { margin: 0; font-size: 17px; }
a { color: #174d63; }
nav a { display: inline-block; padding: 10px 4px; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; }
th { padding: 7px 0; background: #f1f5f5; font-weight: normal; }
td { padding: 0; border: 1px solid #d4dddd; text-align: center; }
td a, td > span { display: block; padding: 6px 0; min-height: 55px; text-decoration: none; }
td a:hover { background: #e8f3f5; }
a:focus-visible { outline: 3px solid #174d63; outline-offset: -3px; }
time { display: block; font-size: 12px; }
.symbol { display: block; font-size: 22px; line-height: 1.25; }
.unavailable { color: #616161; background: #f6f6f6; }
.empty { background: #fafafa; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; list-style: none; padding: 0; margin: 12px 0; font-size: 12px; }
.guide { margin: 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
td a[aria-current="date"] { background: #dceff3; box-shadow: inset 0 0 0 2px #174d63; font-weight: bold; }
#slots { margin-top: 16px; padding: 12px 0; border-top: 2px solid #174d63; scroll-margin-top: 8px; }
#slots p { font-size: 13px; line-height: 1.6; }
.slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slot-grid a { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #174d63; border-radius: 4px; text-decoration: none; font-weight: bold; }
.slot-grid a:hover { background: #e8f3f5; }
#slots .week-link { margin-bottom: 0; font-size: 12px; }
@media (min-width: 480px) { .slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 600px) { .slot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }