.cal-legend{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin:0 0 22px;font-size:.9rem;font-weight:600;color:#0b2540}
.cal-legend span{display:inline-flex;align-items:center;gap:8px}
.cal-legend em{font-style:normal}
.cal-legend .lg{width:18px;height:18px;border-radius:50%;display:inline-block;border:2px solid #0b2a5c;box-sizing:border-box}
.cal-legend .lg.ph-new{background:#0b2a5c}
.cal-legend .lg.ph-full{background:#fff}
.cal-legend .lg.ph-q1{background:linear-gradient(90deg,#0b2a5c 50%,#fff 50%)}
.cal-legend .lg.peri{border:0;background:#f28a1e;width:10px;height:10px}
.cal-legend .lg.tide{border:0;border-radius:6px;background:#bfe6f5;width:26px;height:14px}
.cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cal-month{background:#fff;border:2px solid #cfe9f6;border-radius:18px;padding:12px 12px 10px;break-inside:avoid}
.cal-month h3{margin:0 0 6px;text-align:center;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#0b2a5c;font-weight:800}
.cal-month table{width:100%;border-collapse:separate;border-spacing:0 2px;table-layout:fixed}
.cal-month th{font-size:.62rem;color:#6a86a0;font-weight:700;padding:2px 0;text-align:center}
.cal-month td{height:27px;text-align:center;font-size:.74rem;font-weight:700;color:#0b2540;padding:0;position:relative;background:transparent}
.cal-month td span{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;box-sizing:border-box;position:relative;z-index:1}
.cal-month td.tide{background:#bfe6f5}
.cal-month td.tide + td:not(.tide){}
.cal-month td.ph-new span{background:#0b2a5c;color:#fff}
.cal-month td.ph-full span{background:#fff;border:2px solid #0b2a5c}
.cal-month td.ph-q1 span,.cal-month td.ph-q3 span{border:2px solid #0b2a5c;background:linear-gradient(90deg,#0b2a5c 50%,#fff 50%);color:#0b2540;text-shadow:0 0 3px #fff}
.cal-month td.peri::after{content:"";position:absolute;right:3px;top:2px;width:7px;height:7px;border-radius:50%;background:#f28a1e;z-index:2}
.cal-sum{text-align:center;margin:20px 0 0;font-size:.9rem;color:#4a6580}
@media (max-width:980px){.cal-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.cal-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.cal-grid{grid-template-columns:1fr}}