月間カレンダー(固定表示・今日強調)

<div class="cal">
          <div class="week"><span>日</span><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span>土</span></div>
          <div class="days">
            <span class="day empty"></span><span class="day empty"></span><span class="day empty"></span>
            <span class="day">1</span><span class="day">2</span><span class="day">3</span><span class="day">4</span>
            <span class="day">5</span><span class="day">6</span><span class="day">7</span><span class="day">8</span><span class="day">9</span><span class="day">10</span><span class="day">11</span>
            <span class="day">12</span><span class="day">13</span><span class="day">14</span><span class="day today">15</span><span class="day">16</span><span class="day">17</span><span class="day">18</span>
            <span class="day">19</span><span class="day">20</span><span class="day">21</span><span class="day">22</span><span class="day">23</span><span class="day">24</span><span class="day">25</span>
            <span class="day">26</span><span class="day">27</span><span class="day">28</span><span class="day">29</span><span class="day">30</span><span class="day empty"></span>
          </div>
        </div>

.d10-09-01 .cal{ width:100%; max-width:260px; }
        .d10-09-01 .week{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; }
        .d10-09-01 .week span{ font-size:10px; color:#9098a3; text-align:center; }
        .d10-09-01 .days{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
        .d10-09-01 .day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:11px; color:#3a3f47; background:#f4f5f7; border-radius:5px; }
        .d10-09-01 .day.empty{ background:transparent; }
        .d10-09-01 .day.today{ background:#3f6fe0; color:#fff; font-weight:700; }