/* =============================================================
   업무지원 › 지각 관리 — 맥 고밀도형 (사용자 2026-11-03 "1": 근태 다음)
   범위: #work_support-content #ws-panel-tardiness 안쪽만. 화면에서만. (업무지원 머리 · 하위 탭은 ui-skin-attendance.css)
   - 채운 단추 2개(경위서 양식 인쇄 파랑 · 지각 기록 추가 주황) → 채운 파랑은 '지각 기록 추가' 하나, 인쇄 · PM/SM 설정은 흰 단추
   - 노란 안내 상자 · 주황 등록 상자 · 주황 표 머리 → 흰 묶음(안내는 주의 아이콘만 주황), 28px 입력칸
   - 두 표: 줄 32px 한 줄(휴대폰 44px, 옆으로 밀기), 머리 31px. 10px 패널티 칩 → 11px
   - 이행 · 경위서 칩의 그림문자(✅ ⏳ 📄) → 아이콘(ws-tardiness.js, 글자 그대로)
   - 지각 횟수 · 시간 · 패널티 색(3회 이상 · 30분 이상 = 빨강, 그 아래 = 주황), 이행완료 초록 · 제출완료 파랑은 그대로(뜻이 있는 색)
   누르면 하는 일 · 저장 · 토글 · 삭제 그대로. 값은 ui-tokens.css 토큰만.
   ============================================================= */
@media screen{
html #work_support-content #ws-panel-tardiness{ padding:16px 20px 20px !important; font-family:var(--ui-font); color:var(--ui-text-1) }

/* ① 안내 */
html #work_support-content #ws-panel-tardiness #td-notice-box{ margin-bottom:12px !important; padding:10px 14px !important; border:1px solid var(--ui-line) !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface) !important }
html #work_support-content #ws-panel-tardiness #td-notice-box .font-bold{ margin-bottom:4px !important; gap:6px !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-tardiness #td-notice-box .font-bold > i{ color:var(--ui-warning-dot) !important }
html #work_support-content #ws-panel-tardiness #td-notice-text{ color:var(--ui-text-2) !important; font-family:var(--ui-font) !important; font-size:var(--ui-text-footnote) !important; line-height:1.55 !important }

/* ② 도구 줄 */
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.flex.flex-wrap{ gap:6px !important; margin-bottom:12px !important }
html #work_support-content #ws-panel-tardiness :is(button[onclick^="_tdPrintDocTemplate"],button[onclick^="_tdOpenDocTemplateSettings"],button[onclick^="_tdOpenSettings"],button[onclick^="_tdOpenNoticeEdit"]){
  box-sizing:border-box; height:28px; min-height:0 !important; display:inline-flex; align-items:center; gap:5px !important; padding:0 12px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important }
html #work_support-content #ws-panel-tardiness :is(button[onclick^="_tdPrintDocTemplate"],button[onclick^="_tdOpenDocTemplateSettings"],button[onclick^="_tdOpenSettings"],button[onclick^="_tdOpenNoticeEdit"]):hover{ background:var(--ui-fill-subtle) !important }
html #work_support-content #ws-panel-tardiness :is(button[onclick^="_tdPrintDocTemplate"],button[onclick^="_tdOpenDocTemplateSettings"],button[onclick^="_tdOpenSettings"],button[onclick^="_tdOpenNoticeEdit"]) > i{ margin:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #work_support-content #ws-panel-tardiness button[onclick^="_tdOpenDocTemplateSettings"]{ width:28px; padding:0 !important; justify-content:center }
html #work_support-content #ws-panel-tardiness button[onclick^="_tdOpenNoticeEdit"]{ height:24px; padding:0 9px !important; font-size:var(--ui-text-footnote) !important }
/* PM · SM 칩 */
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.flex.flex-wrap > div.ml-auto{ gap:6px !important }
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.flex.flex-wrap > div.ml-auto > span{ height:24px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 9px !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }

/* ③ 지각 기록 추가 */
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.bg-white.border{ margin-bottom:16px !important; padding:12px 14px !important; border:1px solid var(--ui-line) !important; border-radius:var(--ui-radius-group) !important; box-shadow:none !important }
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.bg-white.border > div.font-bold:first-child{ margin-bottom:8px !important; gap:6px !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.bg-white.border > div.font-bold:first-child > i{ color:var(--ui-text-2) !important }
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.bg-white.border > div.grid{ gap:8px 10px !important; margin-bottom:8px !important }
html #work_support-content #ws-panel-tardiness .ws-label{ margin-bottom:3px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #work_support-content #ws-panel-tardiness .ws-input{ box-sizing:border-box; min-height:0 !important; height:28px !important; padding:0 9px !important; border:1px solid var(--ui-line-control) !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:none !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important }
html #work_support-content #ws-panel-tardiness .ws-input::placeholder{ color:var(--ui-text-3) }
html #work_support-content #ws-panel-tardiness .ws-input:focus{ outline:0; border-color:var(--ui-accent) !important; box-shadow:var(--ui-focus-ring) !important }
html #work_support-content #ws-panel-tardiness #td-penalty-guide{ margin-bottom:8px !important; padding:7px 10px !important; border-radius:var(--ui-radius-card) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #work_support-content #ws-panel-tardiness #td-penalty-guide.bg-yellow-50{ background:var(--ui-warning-tint) !important; border-color:transparent !important; color:var(--ui-warning) !important }
html #work_support-content #ws-panel-tardiness #td-penalty-guide.bg-red-50{ background:var(--ui-danger-tint) !important; border-color:transparent !important; color:var(--ui-danger) !important }
html #work_support-content #ws-panel-tardiness #td-fixed-report-area > div{ padding:6px 10px !important; border:0 !important; border-radius:var(--ui-radius-card) !important; background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-tardiness #td-fixed-report-area > div > i{ color:var(--ui-accent-text) !important }
html #work_support-content #ws-panel-tardiness #td-choice-area label span{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #work_support-content #ws-panel-tardiness #td-choice-area input[type="radio"]{ accent-color:var(--ui-accent) }
/* 채운 파랑: '지각 기록 추가' 하나 */
html #work_support-content #ws-panel-tardiness #td-save-btn{ box-sizing:border-box; height:28px; display:inline-flex; align-items:center; gap:5px !important; padding:0 14px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-tardiness #td-save-btn:hover{ background:var(--ui-accent-hover) !important }
html #work_support-content #ws-panel-tardiness #td-save-btn > i{ font-size:var(--ui-text-caption) !important }

/* ④ ⑤ 표 */
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.mb-5 > div.font-bold,
html #work_support-content #ws-panel-tardiness #td-record-list-wrap > div.font-bold{ margin-bottom:6px !important; gap:6px !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-bold) !important }
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.mb-5 > div.font-bold > i,
html #work_support-content #ws-panel-tardiness #td-record-list-wrap > div.font-bold i{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-tardiness #td-record-list-wrap > div.font-bold .text-xs{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-tardiness #td-record-list-wrap > div.font-bold button,
html #work_support-content #ws-panel-tardiness .ws-td button[onclick^="_tdFilterUser"]{ color:var(--ui-accent-text) !important; font-size:var(--ui-text-footnote) !important; text-decoration:none !important }
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.mb-5{ margin-bottom:16px !important }
html #work_support-content #ws-panel-tardiness .overflow-x-auto{ border:1px solid var(--ui-line) !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface) !important }
html #work_support-content #ws-panel-tardiness .overflow-x-auto > table{ font-size:var(--ui-text-body) !important }
html #work_support-content #ws-panel-tardiness .overflow-x-auto > table > thead{ background:var(--ui-surface-alt) !important }
html #work_support-content #ws-panel-tardiness .overflow-x-auto > table > thead tr{ height:31px }
html #work_support-content #ws-panel-tardiness .ws-th{ padding:0 10px !important; border:0 !important; border-bottom:1px solid var(--ui-line) !important; background:transparent !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; white-space:nowrap }
html #work_support-content #ws-panel-tardiness .overflow-x-auto > table > tbody > tr{ height:32px; border-bottom:1px solid var(--ui-line) !important; font-size:var(--ui-text-body) !important }
html #work_support-content #ws-panel-tardiness .overflow-x-auto > table > tbody > tr:last-child{ border-bottom:0 !important }
html #work_support-content #ws-panel-tardiness .overflow-x-auto > table > tbody > tr:hover{ background:var(--ui-fill-subtle) !important }
html #work_support-content #ws-panel-tardiness .ws-td{ padding:0 10px !important; border:0 !important; white-space:nowrap; vertical-align:middle; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important }
html #work_support-content #ws-panel-tardiness .ws-td.text-gray-500,
html #work_support-content #ws-panel-tardiness .ws-td.text-gray-400{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-tardiness .ws-td.font-semibold{ font-weight:var(--ui-weight-semibold) !important }
/* 뜻 있는 색: 횟수 · 시간 · 패널티 */
html #work_support-content #ws-panel-tardiness .td-count{ min-width:24px !important; height:20px; box-sizing:border-box; display:inline-flex !important; align-items:center; justify-content:center; padding:0 7px !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums }
html #work_support-content #ws-panel-tardiness .td-count--low{ background:var(--ui-warning-tint) !important; color:var(--ui-warning) !important }
html #work_support-content #ws-panel-tardiness .td-count--high{ background:var(--ui-danger-tint) !important; color:var(--ui-danger) !important }
html #work_support-content #ws-panel-tardiness .td-min{ color:var(--ui-warning) !important; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums }
html #work_support-content #ws-panel-tardiness .td-min--heavy{ color:var(--ui-danger) !important }
html #work_support-content #ws-panel-tardiness .td-pen{ height:20px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 8px !important; background:var(--ui-warning-tint) !important; color:var(--ui-warning) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-tardiness .td-pen--heavy{ background:var(--ui-danger-tint) !important; color:var(--ui-danger) !important }
/* 이행 · 경위서 칩 단추 */
html #work_support-content #ws-panel-tardiness :is(button[onclick^="_tdToggleDone"],button[onclick^="_tdToggleReport"]){ height:22px; box-sizing:border-box; display:inline-flex; align-items:center; gap:4px; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap }
html #work_support-content #ws-panel-tardiness :is(button[onclick^="_tdToggleDone"],button[onclick^="_tdToggleReport"]):hover{ background:var(--ui-fill-hover) !important }
html #work_support-content #ws-panel-tardiness :is(button[onclick^="_tdToggleDone"],button[onclick^="_tdToggleReport"]) > i{ font-size:var(--ui-text-caption) }
html #work_support-content #ws-panel-tardiness button[onclick^="_tdToggleDone"].bg-green-100{ background:var(--ui-success-tint) !important; color:var(--ui-success) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-tardiness button[onclick^="_tdToggleReport"].bg-blue-100{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-tardiness .ws-btn-del{ width:24px; height:24px; padding:0 !important; border-radius:var(--ui-radius-row) !important; color:var(--ui-danger) !important; font-size:var(--ui-text-caption) !important }
html #work_support-content #ws-panel-tardiness .ws-btn-del:hover{ background:var(--ui-danger-tint) !important }
}
@media screen and (max-width:768px){
html #work_support-content #ws-panel-tardiness{ padding:12px !important }
html #work_support-content #ws-panel-tardiness .overflow-x-auto > table > tbody > tr{ height:44px }
html #work_support-content #ws-panel-tardiness .ws-input{ height:36px !important; font-size:16px !important }
html #work_support-content #ws-panel-tardiness :is(#td-save-btn,button[onclick^="_tdPrintDocTemplate"],button[onclick^="_tdOpenSettings"]){ height:36px }
html #work_support-content #ws-panel-tardiness :is(button[onclick^="_tdToggleDone"],button[onclick^="_tdToggleReport"]){ height:32px }
html #work_support-content #ws-panel-tardiness .ws-btn-del{ width:32px; height:32px }
html #work_support-content #ws-panel-tardiness #ws-tardiness-wrap > div.flex.flex-wrap > div.ml-auto{ margin-left:0 !important; justify-content:flex-start !important }
}