/* ══════════════════════════════════════════════════════════════
   v490 — 출퇴근 기록 (시안 「41 출퇴근 기록」) — 클래스 접두사 at-*
   토큰은 #attv 안에서만 정의 (다른 화면에 영향 없음)
   ══════════════════════════════════════════════════════════════ */
#attv {
  --panel:#ffffff; --panel-sub:#fbfaf2; --panel-alt:#f6f5ec;
  --line:#dcd8c0; --line-soft:#e8e5d1; --line-faint:#edebdb;
  --text:#1c2430; --text-mid:#3a4030; --sub:#6b7160; --muted:#98a08a; --faint:#c6c8b4; --slate:#4f5644;
  --accent:#5a6636; --accent-hover:#4d5434; --accent-fg:#4d5434;
  --accent-bg:#ecead7; --accent-bg-2:#f5f4e7; --accent-line:#c9c5a1;
  --ok-fg:#3f6626; --ok-bg:#e9f0e0; --warn:#b8860b; --warn-fg:#8f6708; --warn-bg:#faf1dc;
  --danger-fg:#8c3721; --danger-bg:#f7e7e1; --info:#5b6b4a; --info-bg:#eef0e6; --neutral-bg:#eceade;
  color:var(--text);
}
#attv .at-head { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; padding:2px 0 0; }
#attv .at-head h2 { margin:0; font-size:18px; font-weight:800; letter-spacing:-.3px; }
#attv .at-chip { font-size:11px; font-weight:800; padding:2px 8px; background:var(--accent-bg); color:var(--accent-fg); white-space:nowrap; }
#attv .at-head__d { flex:1 1 320px; min-width:0; padding-left:11px; border-left:1px solid var(--line-soft); font-size:11.5px; line-height:1.5; color:var(--sub); }
#attv .at-head__b { display:flex; align-items:center; gap:7px; }
.at-wrap { max-width:1480px; margin:0 auto; padding:12px 0 34px; }
.at-top { display:grid; grid-template-columns:340px minmax(0,1fr); gap:11px; margin-bottom:11px; }
@media (max-width:1020px) { .at-top { grid-template-columns:minmax(0,1fr); } }

.at-panel { border:1px solid var(--line); background:var(--panel); min-width:0; }
.at-panel__h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px;
               border-bottom:1px solid var(--line-soft); background:var(--panel-sub); }
.at-panel__h b { font-size:12.5px; }
.at-panel__h span { font-size:10.5px; color:var(--muted); }
.at-panel__f { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:9px 12px;
               border-top:1px solid var(--line-soft); background:var(--panel-sub); }
.at-panel__f > span:first-child { flex:1 1 220px; min-width:0; font-size:10.5px; color:var(--sub); line-height:1.55; }

/* 출퇴근 버튼 카드 */
.at-punch { background:#2a3020; color:#f2eeda; border-color:#2a3020; }
.at-punch__h { display:flex; align-items:center; gap:7px; padding:10px 14px 0; font-size:11px; color:#b9bda6; }
.at-clock { padding:4px 14px 0; font-size:38px; font-weight:800; letter-spacing:-1px;
            font-variant-numeric:tabular-nums; line-height:1.15; }
.at-date { padding:0 14px; font-size:11.5px; color:#b9bda6; }
.at-state { display:flex; gap:12px; padding:11px 14px; }
.at-state span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.at-state b { font-size:9.5px; font-weight:800; color:#8e937c; }
.at-state em { font-style:normal; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.at-btns { display:grid; grid-template-columns:1fr; gap:6px; padding:0 14px 12px; }
.at-go { height:52px; border:1px solid #4d5434; background:#3f4a2b; color:#f2eeda; font:inherit;
         font-size:15px; font-weight:800; cursor:pointer; }
.at-go:hover:not(:disabled) { background:#4d5434; }
.at-go--in { background:#8faf6a; border-color:#8faf6a; color:#1c2410; }
.at-go--in:hover:not(:disabled) { background:#a3c07f; }
.at-go--out { background:#f2eeda; border-color:#f2eeda; color:#2a3020; }
.at-go--out:hover:not(:disabled) { background:#fff; }
.at-go:disabled { opacity:.35; cursor:default; }
.at-sub { display:flex; gap:6px; padding:0 14px 12px; }
.at-sub button { flex:1; height:32px; border:1px solid #4d5434; background:none; color:#b9bda6;
                 font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.at-sub button:hover:not(:disabled) { background:#3f4a2b; color:#f2eeda; }
.at-sub button.is-on { background:#d97706; border-color:#d97706; color:#fff; }
.at-sub button:disabled { opacity:.35; cursor:default; }

/* KPI */
.at-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:8px; padding:11px 12px; }
.at-kpi { border:1px solid var(--line-soft); background:var(--panel); padding:8px 10px; min-width:0; }
.at-kpi__l { font-size:10.5px; font-weight:800; color:var(--muted); white-space:nowrap; }
.at-kpi__v { font-size:20px; font-weight:800; letter-spacing:-.5px; margin-top:2px; font-variant-numeric:tabular-nums; }
.at-kpi__u { font-size:11px; font-weight:700; color:var(--sub); margin-left:2px; }
.at-kpi__d { display:block; font-size:10px; color:var(--muted); margin-top:1px; }
.at-week { padding:0 12px 12px; }
.at-week__t { display:flex; align-items:baseline; gap:8px; font-size:11px; color:var(--sub); margin-bottom:5px; }
.at-week__bar { position:relative; height:10px; background:var(--panel-alt); border:1px solid var(--line-soft); }
.at-week__bar > i { position:absolute; left:0; top:0; bottom:0; background:var(--accent); }
.at-week__bar > i.is-over { background:var(--warn); }
.at-week__bar > s { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--warn-fg); }
.at-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:8px; }
.at-day { border:1px solid var(--line-soft); padding:5px 6px; font-size:10px; color:var(--muted); min-width:0; }
.at-day b { display:block; font-size:12px; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-day.is-today { border-color:var(--accent-hover); background:var(--accent-bg-2); }
.at-day.is-we { background:var(--panel-sub); }

/* 탭 · 표 */
.at-tabs { display:flex; gap:2px; border-bottom:1px solid var(--line-soft); margin-top:8px; }
.at-tab { padding:9px 12px 10px; border:0; background:none; font:inherit; font-size:12.5px; font-weight:800;
          color:var(--muted); cursor:pointer; box-shadow:inset 0 -2px 0 0 transparent; display:flex; align-items:center; gap:6px; }
.at-tab:hover { color:var(--text); }
.at-tab.is-on { color:var(--text); box-shadow:inset 0 -2px 0 0 var(--accent); }
.at-tab__n { font-size:10.5px; color:var(--muted); }
.at-tab.is-on .at-tab__n { color:var(--accent-fg); }
.at-tb { width:100%; border-collapse:collapse; background:var(--panel); }
.at-tb th { text-align:left; font-size:10.5px; font-weight:800; color:var(--sub); white-space:nowrap;
            background:var(--panel-alt); border-bottom:1px solid var(--line-soft); padding:7px 10px; position:sticky; top:0; }
.at-tb td { font-size:12px; color:var(--text-mid); border-bottom:1px solid var(--line-faint); padding:7px 10px; vertical-align:middle; }
.at-tb tr.is-we td { background:var(--panel-sub); color:var(--muted); }
.at-tb tr.is-today td { background:var(--accent-bg-2); }
.at-tb th.at-num, .at-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.at-mono { font-family:'SFMono-Regular',Menlo,monospace; font-weight:700; }
.at-scroll { max-height:calc(100vh - 420px); min-height:260px; overflow:auto; }
.at-empty { padding:34px 12px; text-align:center; font-size:12px; color:var(--muted); }

.at-tag { font-size:10px; font-weight:800; padding:2px 7px; white-space:nowrap; }
.at-tag--ok { background:var(--ok-bg); color:var(--ok-fg); }
.at-tag--warn { background:var(--warn-bg); color:var(--warn-fg); }
.at-tag--no { background:var(--danger-bg); color:var(--danger-fg); }
.at-tag--mute { background:var(--neutral-bg); color:var(--slate); }
.at-tag--info { background:var(--info-bg); color:var(--info); }

.at-btn { border:1px solid var(--line); background:var(--panel); color:var(--text-mid); font:inherit;
          font-size:11.5px; font-weight:700; padding:6px 11px; cursor:pointer; display:inline-flex;
          align-items:center; gap:6px; white-space:nowrap; text-decoration:none; }
.at-btn:hover { background:var(--panel-alt); }
.at-btn--pri { border-color:var(--accent-hover); background:var(--accent); color:#f2eeda; font-weight:800; }
.at-btn--pri:hover { background:var(--accent-hover); }
.at-btn--sm { font-size:11px; padding:4px 9px; }
.at-btn:disabled { color:var(--muted); background:var(--panel-alt); cursor:default; }
.at-in { border:1px solid var(--line); background:var(--panel); font:inherit; font-size:12px;
         padding:6px 8px; outline:none; color:var(--text); box-sizing:border-box; }
.at-in:focus { border-color:var(--accent); }

/* 이카운트 이전 */
.at-steps { display:flex; }
.at-step { flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:9px 12px;
           border:1px solid var(--line); border-left:0; background:var(--panel); font-size:11.5px; font-weight:700; }
.at-step:first-child { border-left:1px solid var(--line); }
.at-step i { font-style:normal; width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center;
             font-size:10px; font-weight:800; background:var(--panel-alt); color:var(--muted); }
.at-step.is-done i { background:var(--accent); color:#fff; }
.at-step.is-on { background:var(--accent-bg-2); border-color:var(--accent-line); }
.at-map { display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) auto; gap:8px; align-items:center;
          padding:7px 12px; border-bottom:1px solid var(--line-faint); font-size:11.5px; }
.at-map:last-child { border-bottom:0; }
.at-map__x { color:var(--faint); text-align:center; font-size:10px; }
.at-note { margin:0 12px 11px; padding:9px 11px; border:1px solid var(--accent-line); background:var(--accent-bg-2); font-size:11.5px; line-height:1.6; }
.at-note--warn { border-color:#e6d3a3; background:var(--warn-bg); color:var(--warn-fg); }

.at-modal-ov { position:fixed; inset:0; z-index:120; background:rgba(16,24,40,.45);
               display:flex; align-items:center; justify-content:center; padding:24px; }
.at-modal { width:460px; max-width:100%; max-height:calc(100vh - 48px); overflow:auto; background:var(--panel); border:1px solid var(--line);
            box-shadow:0 18px 44px rgba(16,24,40,.3); }
.at-modal--wide { width:640px; }
.at-modal__h { display:flex; align-items:center; gap:8px; padding:11px 14px; background:#2a3020; color:#f2eeda; font-size:13px; font-weight:800; }
.at-modal__b { padding:14px; display:flex; flex-direction:column; gap:10px; }
.at-lbl { display:block; font-size:10.5px; font-weight:800; color:var(--muted); margin-bottom:4px; }