.attendance-page { padding:28px 24px 48px; }
.attendance-container { max-width:1220px; margin:0 auto; }
.attendance-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:27px 30px; margin-bottom:18px; border:1px solid #e3eaf3; border-radius:17px; background:linear-gradient(120deg,#fff,#f1f6ff); box-shadow:0 7px 22px rgba(24,49,83,.04); }
.attendance-eyebrow { display:block; margin-bottom:5px; color:#718096; font-size:12px; font-weight:700; }
.attendance-hero h1 { margin:0; color:#172338; font-size:27px; }
.attendance-hero p { margin:7px 0 0; color:#7b8798; font-size:13px; }
.attendance-hero-actions { display:flex; gap:8px; }
.attendance-primary-button,.attendance-secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px; border:0; border-radius:9px; font:inherit; font-size:13px; font-weight:650; text-decoration:none; cursor:pointer; }
.attendance-primary-button { color:#fff; background:#2863c7; box-shadow:0 3px 7px rgba(40,99,199,.17); }
.attendance-primary-button:hover { background:#1f55b0; }
.attendance-secondary-button { color:#45556d; border:1px solid #dfe5ec; background:#fff; }
.attendance-secondary-button:hover { background:#f8fafc; }
.attendance-alert { padding:12px 15px; margin:0 0 14px; border-radius:9px; font-size:13px; }
.attendance-alert.is-success { color:#176b48; background:#eaf8f0; }
.attendance-alert.is-error { color:#a33b36; background:#fff0ee; }
.attendance-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.attendance-summary>div { padding:16px 19px; border:1px solid #e6ebf1; border-radius:13px; background:#fff; }
.attendance-summary span { display:block; margin-bottom:7px; color:#7b8798; font-size:12px; }
.attendance-summary strong { color:#1f2e43; font-size:22px; }
.attendance-summary small { margin-left:4px; color:#8994a5; font-size:11px; font-weight:500; }
.attendance-panel { overflow:hidden; margin-bottom:17px; border:1px solid #e5eaf0; border-radius:15px; background:#fff; box-shadow:0 5px 17px rgba(24,49,83,.03); }
.attendance-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px 23px 15px; }
.attendance-panel-heading h2 { margin:0; color:#1d2939; font-size:17px; }
.attendance-panel-heading p { margin:5px 0 0; color:#8792a3; font-size:12px; }
.attendance-panel-heading>span { color:#68778c; font-size:12px; }
.attendance-filters { display:flex; align-items:flex-end; gap:10px; padding:0 23px 17px; }
.attendance-filters label,.attendance-form-grid label { display:flex; flex:1; flex-direction:column; gap:6px; color:#647187; font-size:11px; font-weight:650; }
.attendance-filters input,.attendance-filters select,.attendance-form-grid input,.attendance-form-grid select,.attendance-form-grid textarea { width:100%; min-height:40px; padding:0 11px; border:1px solid #dfe5ec; border-radius:8px; outline:0; color:#344054; background:#fff; font:inherit; font-size:12px; box-sizing:border-box; }
.attendance-filters input:focus,.attendance-filters select:focus,.attendance-form-grid input:focus,.attendance-form-grid select:focus,.attendance-form-grid textarea:focus { border-color:#83a8ee; box-shadow:0 0 0 3px rgba(67,119,214,.09); }
.attendance-search { flex:1.4!important; }
.attendance-filters button { min-height:40px; padding:0 18px; }
.attendance-table-wrap { overflow:auto; border-top:1px solid #edf0f4; }
.attendance-table { width:100%; min-width:820px; border-collapse:collapse; text-align:left; }
.attendance-table th { padding:12px 13px; color:#8591a2; background:#fafbfd; font-size:11px; font-weight:600; white-space:nowrap; }
.attendance-table td { padding:13px; border-top:1px solid #f0f2f5; color:#536176; font-size:12px; white-space:nowrap; }
.attendance-table tbody tr:hover { background:#f8faff; }
.attendance-table td strong { color:#28384e; font-size:13px; }
.attendance-memo { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.attendance-status { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:650; }
.status-present { color:#17794f; background:#e9f8f0; }
.status-late { color:#986200; background:#fff5dc; }
.status-absent { color:#b23c36; background:#fff0ee; }
.status-leave { color:#5d6590; background:#f0efff; }
.status-incomplete { color:#a05c16; background:#fff1e2; }
.attendance-next-day { display:block; margin-top:3px; color:#9a650b; font-size:10px; }
.attendance-row-link { color:#2863c7; font-weight:650; text-decoration:none; }
.attendance-row-link:hover { text-decoration:underline; }
.attendance-empty { padding:47px 20px 53px; border-top:1px solid #edf0f4; text-align:center; }
.attendance-empty>span { font-size:27px; }
.attendance-empty h3 { margin:10px 0 5px; color:#29384d; font-size:15px; }
.attendance-empty p { margin:0; color:#8792a3; font-size:12px; }
.attendance-create { margin-bottom:20px; border:1px solid #e5eaf0; border-radius:14px; background:#fff; box-shadow:0 5px 17px rgba(24,49,83,.03); }
.attendance-create>summary { padding:17px 21px; color:#2b4f87; font-size:13px; font-weight:700; cursor:pointer; list-style:none; }
.attendance-create>summary::-webkit-details-marker { display:none; }
.attendance-create[open]>summary { border-bottom:1px solid #edf0f4; }
.attendance-create-form { padding:20px 22px; }
.attendance-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.attendance-form-grid textarea { padding-top:10px; resize:vertical; }
.attendance-form-wide { grid-column:1/-1; }
.attendance-form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.attendance-detail-panel { padding-bottom:15px; }
.attendance-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 22px; margin:0; padding:0 23px; }
.attendance-detail-grid>div { padding:14px 0; border-top:1px solid #eff2f5; }
.attendance-detail-grid dt { margin-bottom:6px; color:#8490a1; font-size:11px; }
.attendance-detail-grid dd { margin:0; color:#26364c; font-size:13px; font-weight:600; }
.attendance-detail-wide { grid-column:1/-1; }
.attendance-history-empty { padding:18px 23px 24px; color:#8994a5; font-size:12px; }
.attendance-history-list { padding:0 23px 8px; }
.attendance-history-list article { padding:14px 0; border-top:1px solid #eff2f5; }
.attendance-history-top { display:flex; justify-content:space-between; gap:14px; color:#56657a; font-size:12px; }
.attendance-history-top span { color:#7b8798; }
.attendance-history-list p { margin:8px 0 0; color:#344054; font-size:12px; }
.attendance-correction-form { padding-bottom:22px; }
.attendance-required { color:#d04438; }
@media(max-width:800px) { .attendance-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .attendance-filters { flex-wrap:wrap; } .attendance-filters label { min-width:calc(50% - 6px); } .attendance-filters .attendance-search { flex:1!important; } .attendance-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .attendance-page { padding:18px 13px 34px; } .attendance-hero { align-items:flex-start; flex-direction:column; padding:21px; } .attendance-hero h1 { font-size:23px; } .attendance-hero .attendance-primary-button { width:100%; } .attendance-summary { gap:8px; } .attendance-summary>div { padding:13px; } .attendance-summary strong { font-size:19px; } .attendance-panel-heading { padding:18px 16px 14px; } .attendance-filters { padding:0 16px 15px; } .attendance-filters label { min-width:100%; } .attendance-filters button { flex:1; } .attendance-create-form { padding:16px; } .attendance-form-grid { grid-template-columns:1fr; } .attendance-form-wide { grid-column:auto; } .attendance-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 16px; } .attendance-detail-wide { grid-column:1/-1; } .attendance-history-list { padding:0 16px 8px; } .attendance-history-top { flex-direction:column; gap:5px; } }

/* Attendance list refinements */
.attendance-hero { position:relative; overflow:hidden; }
.attendance-hero::after { position:absolute; right:205px; bottom:-74px; width:180px; height:180px; border:1px solid rgba(61,106,177,.09); border-radius:50%; content:""; pointer-events:none; }
.attendance-hero .attendance-eyebrow { color:#5273a7; letter-spacing:.045em; }
.attendance-hero .attendance-primary-button { position:relative; z-index:1; min-height:44px; padding:0 19px; }
.attendance-stat-card { display:flex; align-items:center; gap:13px; min-height:78px; }
.attendance-stat-icon { display:grid!important; place-items:center; flex:none; width:40px; height:40px; margin:0!important; border-radius:12px; color:#3569c2!important; background:#edf3ff; font-size:17px!important; font-weight:800; }
.attendance-stat-icon.is-green { color:#168052!important; background:#e9f8f0; }
.attendance-stat-icon.is-orange { color:#b96a18!important; background:#fff3e5; }
.attendance-stat-icon.is-red { color:#b5473e!important; background:#fff0ee; }
.attendance-stat-card>div>span { margin:0 0 5px!important; color:#7b8798; font-size:11px; }
.attendance-stat-card>div>strong { color:#1f2e43; font-size:21px; }
.attendance-filters { padding:14px 18px 16px; margin:0 16px 16px; border:1px solid #edf0f4; border-radius:11px; background:#fafbfd; }
.attendance-table { min-width:900px; }
.attendance-table th,.attendance-table td { text-align:center; }
.attendance-table th:first-child,.attendance-table td:first-child { padding-left:20px; text-align:left; }
.attendance-table th:last-child,.attendance-table td:last-child { padding-right:20px; }
.attendance-table td:nth-child(3),.attendance-table td:nth-child(4) { color:#33445d; font-variant-numeric:tabular-nums; font-weight:650; }
.attendance-row-link { display:inline-flex; align-items:center; justify-content:center; min-width:46px; min-height:29px; padding:0 9px; border-radius:7px; background:#eff4fc; }
.attendance-row-link:hover { background:#e5edfb; text-decoration:none; }
.attendance-create { transition:border-color .15s ease,box-shadow .15s ease; scroll-margin-top:18px; }
.attendance-create[open] { border-color:#d8e4f6; box-shadow:0 7px 22px rgba(36,78,138,.06); }
.attendance-create>summary { position:relative; display:flex; align-items:center; justify-content:space-between; }
.attendance-create>summary::after { content:"열기"; color:#8490a1; font-size:11px; font-weight:500; }
.attendance-create[open]>summary::after { content:"접기"; }
.attendance-empty { background:linear-gradient(180deg,#fff,#fbfcfe); }
@media(max-width:800px) { .attendance-filters { margin:0 13px 14px; padding:13px; } }
@media(max-width:560px) { .attendance-hero::after { right:-40px; } .attendance-stat-card { gap:9px!important; } .attendance-stat-icon { width:32px; height:32px; border-radius:10px; } .attendance-stat-card>div>strong { font-size:18px; } .attendance-filters { margin:0 10px 13px; padding:12px; } }
.attendance-summary { grid-template-columns:repeat(5,minmax(0,1fr)); }
.attendance-stat-icon.is-purple { color:#7754bd!important; background:#f2edff; }
.attendance-table { min-width:1120px; }
.attendance-row-missing { background:#fffaf4; }
.attendance-row-missing:hover { background:#fff5e8!important; }
.attendance-no-schedule { color:#98a2b3; font-size:11px; }
.attendance-comparison { min-width:150px; white-space:normal!important; }
.attendance-check-badge { display:inline-flex; align-items:center; margin:2px; padding:4px 7px; border-radius:7px; font-size:10px; font-weight:650; white-space:nowrap; }
.attendance-check-badge.is-ok { color:#16794e; background:#eaf8f0; }
.attendance-check-badge.is-late { color:#a55d00; background:#fff2d8; }
.attendance-check-badge.is-early { color:#a34b2a; background:#fff0e8; }
.attendance-check-badge.is-missing { color:#a33b36; background:#fff0ee; }
.attendance-check-badge.is-neutral { color:#68778c; background:#f0f2f5; }
.status-missing { color:#a33b36; background:#fff0ee; }
.status-upcoming { color:#526b91; background:#eef3fb; }
.attendance-row-link.attendance-open-prefilled { border:0; font:inherit; font-size:11px; cursor:pointer; }
@media(max-width:1050px) { .attendance-summary { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:800px) { .attendance-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.attendance-heading-actions { display:flex; align-items:center; gap:13px; }
.attendance-heading-actions .attendance-row-link { white-space:nowrap; }
.monthly-filter-panel { padding:17px 21px; }
.monthly-filters { display:flex; align-items:flex-end; gap:12px; }
.monthly-filters label { display:flex; flex:1; flex-direction:column; gap:6px; color:#647187; font-size:11px; font-weight:650; }
.monthly-filters input,.monthly-filters select { width:100%; min-height:41px; padding:0 11px; border:1px solid #dfe5ec; border-radius:8px; color:#344054; background:#fff; font:inherit; font-size:12px; box-sizing:border-box; }
.monthly-filters .attendance-primary-button,.monthly-filters .attendance-secondary-button { min-height:41px; }
.monthly-table { min-width:980px; }
.monthly-table th:first-child,.monthly-table td:first-child { padding-left:22px; text-align:left; }
.monthly-person { display:flex; flex-direction:column; gap:4px; color:#26364c; text-decoration:none; }
.monthly-person:hover strong { color:#2863c7; }
.monthly-person small,.monthly-subnote { color:#909aaa; font-size:10px; }
.monthly-subnote { display:block; margin-top:4px; }
.monthly-report-note { margin:3px 2px 0; color:#8792a3; font-size:11px; line-height:1.6; }
.monthly-detail-table { min-width:700px; }
@media(max-width:650px) { .monthly-filter-panel { padding:15px; } .monthly-filters { align-items:stretch; flex-direction:column; } .monthly-filters .attendance-primary-button,.monthly-filters .attendance-secondary-button { width:100%; } .attendance-heading-actions { gap:8px; flex-direction:column; align-items:flex-end; } }
.attendance-modal { width:min(620px,calc(100vw - 28px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; overflow:auto; border:0; border-radius:17px; color:#263449; background:transparent; box-shadow:0 22px 75px rgba(20,37,63,.25); }
.attendance-modal::backdrop { background:rgba(19,31,50,.48); backdrop-filter:blur(3px); }
.attendance-modal-card { overflow:hidden; border:1px solid rgba(229,234,240,.9); border-radius:17px; background:#fff; }
.attendance-modal-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:23px 25px 18px; border-bottom:1px solid #eef1f5; background:linear-gradient(120deg,#fff,#f5f8ff); }
.attendance-modal-heading .attendance-eyebrow { color:#5273a7; font-size:10px; letter-spacing:.07em; }
.attendance-modal-heading h2 { margin:0; color:#1c2a3d; font-size:20px; }
.attendance-modal-heading p { margin:6px 0 0; color:#8490a1; font-size:12px; }
.attendance-modal-close { display:grid; place-items:center; flex:none; width:34px; height:34px; padding:0; border:0; border-radius:9px; color:#6d7889; background:#eef2f7; font:inherit; font-size:24px; line-height:1; cursor:pointer; }
.attendance-modal-close:hover { color:#344054; background:#e3e9f1; }
.attendance-modal .attendance-create-form { padding:22px 25px 23px; }
.attendance-modal .attendance-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 13px; }
.attendance-modal .attendance-form-wide { grid-column:1/-1; }
.attendance-modal .attendance-form-actions { justify-content:flex-end; margin-top:21px; }
.attendance-modal .attendance-secondary-button,.attendance-modal .attendance-primary-button { min-width:100px; }
@media(max-width:560px) { .attendance-modal { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:14px; } .attendance-modal-card { border-radius:14px; } .attendance-modal-heading { padding:19px 18px 15px; } .attendance-modal .attendance-create-form { padding:17px 18px 19px; } .attendance-modal .attendance-form-grid { grid-template-columns:1fr; gap:12px; } .attendance-modal .attendance-form-wide { grid-column:auto; } }