.attend-calendar { width:100%; max-width:800px; margin:0 auto; font-family:sans-serif; }
.attend-calendar .day-list { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; padding:10px 0; list-style:none; }
.attend-calendar .day { width:30px; height:30px; border:2px solid #ccc; border-radius:50%; text-align:center; line-height:30px; font-size:14px; position:relative; color:#333; }
.attend-calendar .day.checked { border-color:#2b72ff; color:#2b72ff; }
.attend-calendar .day.absent { border-color:#999; color:#999; }
.attend-calendar .day.reward { border-color:#f60; color:#f60; font-weight:bold; }
.attend-calendar .day.today { border-color:#000; font-weight:bold; }
.attend-calendar .day.final { position:relative; }
.attend-calendar .tooltip { position:absolute; top:-25px; left:50%; transform:translateX(-50%); background:#f60; color:#fff; font-size:12px; padding:2px 6px; border-radius:4px; white-space:nowrap; }
.attend-calendar .legend { display:flex; justify-content:center; gap:20px; margin-top:10px; font-size:13px; color:#444; }
.attend-calendar .legend .circle { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; }
.attend-calendar .circle.gray { background:#999; }
.attend-calendar .circle.blue { background:#2b72ff; }
.attend-calendar .circle.orange { background:#f60; }
.attend-calendar .note { text-align:center; font-size:12px; color:#888; margin-top:5px; }


.attend-check { display:flex; border:1px solid #ccc; padding:10px; max-width:500px; margin:0 auto; }
.check-input { flex:1; padding:8px 10px; border:1px solid #ccc; font-size:14px; }
.check-btn { background:#e63300; color:#fff; padding:0 15px; border:none; font-size:14px; cursor:pointer; }