モバイルカレンダー画面(予定ドット・固定表示)

<div class="d11-06-11-frame">
          <div class="d11-06-11-head">7月</div>
          <div class="d11-06-11-week"><span>日</span><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span>土</span></div>
          <div class="d11-06-11-days">
            <span></span><span></span><span>1</span><span class="d11-06-11-ev">2</span><span>3</span><span>4</span><span>5</span>
            <span>6</span><span class="d11-06-11-ev">7</span><span>8</span><span class="d11-06-11-today">9</span><span>10</span><span>11</span><span>12</span>
            <span>13</span><span>14</span><span class="d11-06-11-ev">15</span><span>16</span><span>17</span><span>18</span><span>19</span>
            <span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span>
          </div>
        </div>

.d11-06-11-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#fff; padding:14px 12px; }
        .d11-06-11-head{ font-size:12px; font-weight:700; color:#1f2328; margin-bottom:8px; text-align:center; }
        .d11-06-11-week{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; }
        .d11-06-11-week span{ font-size:8px; color:#9aa1ab; text-align:center; }
        .d11-06-11-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
        .d11-06-11-days span{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:9px; color:#334155; position:relative; }
        .d11-06-11-days span.d11-06-11-ev::after{ content:""; position:absolute; bottom:2px; width:3px; height:3px; border-radius:50%; background:#2f6fed; }
        .d11-06-11-days span.d11-06-11-today{ background:#2f6fed; color:#fff; border-radius:50%; font-weight:700; }