/* 모바일 드로어 근태 카드 (2026-09-12, C안 «오늘 타임라인 + 행동») — attendances/_widget variant: :mobile
 * 자리 = 셸 C 드로어 머리 바로 아래(_shell_m.css .m-drawer-att). 상태 한 줄 → 출근·외출·퇴근 타임라인 → 행동 버튼.
 * 행동 = 주(출근하기/퇴근하기) 차콜 채움 · 보조(외출·외출취소·외출종료) 흰 · 조퇴 앰버(경고 유지). 컨트롤러·모달 경로는 종전 그대로. */
.attm { background: var(--ord-panel); border: 1px solid var(--ord-line); border-radius: 12px; padding: 10px 12px 10px; }
.attm-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; min-width: 0; }
.attm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.attm-title { font-size: 12px; font-weight: 800; color: var(--ord-text-2); white-space: nowrap; }
.attm-type { font-size: 10px; font-weight: 600; color: var(--ord-text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.attm-home { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ord-tint-cyan-fg); background: var(--ord-band); border: 1px solid var(--ord-tint-cyan-line); border-radius: 10px; padding: 1px 7px; white-space: nowrap; flex-shrink: 0; }

.attm-tl { display: flex; align-items: flex-start; margin: 2px 0 10px; }
.attm-n { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.attm-n::after { content: ""; position: absolute; top: 5px; left: 50%; width: 100%; height: 2px; background: var(--ord-line); }
.attm-n:last-child::after { display: none; }
.attm-n.is-on::after { background: var(--ord-tint-blue-line); }
.attm-c { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ord-line-2); background: var(--ord-panel); z-index: 1; box-sizing: border-box; }
.attm-n.is-on .attm-c { border-color: var(--ord-accent); background: var(--ord-accent); }
.attm-s { font-size: 10px; font-weight: 600; color: var(--ord-text-4); }
.attm-n.is-on .attm-s { color: var(--ord-accent-strong); font-weight: 700; }
.attm-t { font-size: 10px; color: var(--ord-text-3); font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; }

.attm-acts { display: flex; gap: 6px; align-items: stretch; }
.attm-form { display: contents; }
.attm-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 12px;
  border: 1px solid var(--ord-line-2); border-radius: 9px; background: var(--ord-panel); color: var(--ord-text-2);
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.attm-btn svg { width: 16px; height: 16px; }
.attm-btn--pri { flex: 1 1 auto; background: var(--ord-head-bg); border-color: var(--ord-head-bg); color: var(--ord-on-solid); }
.attm-btn--warn { color: var(--ord-tint-amber-fg); border-color: var(--ord-tint-amber-fg); background: var(--ord-tint-amber-bg); }
.attm-acts .attm-btn:only-child { flex: 1 1 auto; }
.attm-note { font-size: 11px; color: var(--ord-tint-indigo-fg); background: var(--ord-tint-indigo-bg); border-radius: 8px; padding: 8px 10px; }
.attm-note--warn { color: var(--ord-tint-red-fg); background: var(--ord-tint-red-bg); }