@charset "utf-8";

#attendance_wrap { max-width:720px; margin:0 auto 20px; padding:26px 30px 30px; background:#fff; border:1px solid #e5e5e5; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.05); }

.att_head { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:20px; }
.att_title { margin:0; color:#111; font-size:22px; font-weight:800; }
.att_nav { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #ddd; border-radius:50%; color:#555; text-decoration:none; }
.att_nav:hover { border-color:#3a8afd; color:#3a8afd; }

.att_cal { width:100%; border-collapse:collapse; table-layout:fixed; }
.att_cal th { padding:10px 0; color:#555; font-size:14px; font-weight:700; text-align:center; border-bottom:2px solid #eee; }
.att_cal th.att_sun { color:#e0304a; }
.att_cal th.att_sat { color:#3a8afd; }

.att_cal td { position:relative; height:64px; text-align:center; vertical-align:middle; border-bottom:1px solid #f2f2f2; color:#333; font-size:15px; }
.att_cal td.att_empty { background:#fafafa; }
.att_cal td.att_sun .att_day { color:#e0304a; }
.att_cal td.att_sat .att_day { color:#3a8afd; }

.att_day { position:relative; z-index:1; display:inline-block; }

.att_cal td.att_today .att_day { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#111; color:#fff !important; font-weight:800; }

.att_cal td.att_checked { background:#eef6ff; }
.att_check_icon { position:absolute; z-index:5; bottom:6px; left:50%; transform:translateX(-50%); display:block; width:48px; height:48px; }

.att_footer { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:26px; padding-top:22px; border-top:1px solid #eee; text-align:center; }
.att_desc { margin:0; color:#666; font-size:14px; }
.att_desc strong { color:#ff3061; }

.att_btn { display:inline-flex; align-items:center; justify-content:center; min-width:180px; height:48px; padding:0 24px; border:0; border-radius:999px; background:#3a8afd; color:#fff; font-size:16px; font-weight:800; text-decoration:none; cursor:pointer; }
.att_btn:hover { background:#2172f8; color:#fff; }
.att_btn_done { background:#ccc; cursor:default; }
.att_btn_done:hover { background:#ccc; }

.att_point { margin:0; color:#333; font-size:14px; }
.att_point strong { color:#3a8afd; font-size:18px; }

@media (max-width:600px) {
    #attendance_wrap { padding:20px 15px 22px; }
    .att_cal td { height:48px; font-size:13px; }
    .att_cal td.att_today .att_day { width:26px; height:26px; }
}