/* =============================================================
   업무지원 › 타임마일리지 — 맥 고밀도형 (사용자 2026-11-03 "1": 복지 다음)
   범위: #work_support-content #ws-panel-timemileage 안쪽만. 화면에서만. (업무지원 머리 · 하위 탭은 ui-skin-attendance.css)
   - 채운 단추 2개(추가근무 등록 보라 · 사용 주황) → 채운 파랑은 '추가근무 등록' 하나, '타임마일리지 사용'은 흰 단추
   - 직원 카드: 파란 그라데이션 머리 · 보라/주황/초록 큰 숫자 칸(24px) → 흰 묶음, 한 줄 숫자(적립 · 사용 · 잔여)
   - 추가근무 · 사용 내역: 두 줄 보라/주황 상자(약 50px) → 28px 한 줄(날짜 · 시간 · +시간 · 내용 · 삭제). 내용 전체는 마우스 올림
   - 10px 글자 → 11px. 레이트인 · 패스트아웃 그림문자(🌅 🌇) → 아이콘(ws-timemileage.js, 글자 그대로)
   - 사용률 막대 색(80% 빨강 · 50% 노랑)과 잔여 초록 · 사용 주황 숫자는 그대로(뜻이 있는 색)
   등록 · 사용 · 삭제 동작 그대로. 값은 ui-tokens.css 토큰만.
   ============================================================= */
@media screen{
html #work_support-content #ws-panel-timemileage{ padding:16px 20px 20px !important; font-family:var(--ui-font); color:var(--ui-text-1) }
/* 머리 */
html #work_support-content #ws-panel-timemileage .tm-head{ margin-bottom:12px !important; gap:8px !important }
html #work_support-content #ws-panel-timemileage .tm-head h4{ gap:6px !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-bold) !important }
html #work_support-content #ws-panel-timemileage .tm-head h4 > i{ color:var(--ui-text-2) !important; font-size:var(--ui-text-callout) !important }
html #work_support-content #ws-panel-timemileage .tm-head p{ margin-top:2px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-timemileage .tm-head > div:last-child{ gap:6px !important }
html #work_support-content #ws-panel-timemileage :is(#btn-open-overtime,#btn-open-use-mileage){ box-sizing:border-box; min-height:0 !important; height:28px; display:inline-flex; align-items:center; padding:0 12px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-control) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important }
html #work_support-content #ws-panel-timemileage :is(#btn-open-overtime,#btn-open-use-mileage) > i{ font-size:var(--ui-text-caption) !important; margin-right:5px !important }
html #work_support-content #ws-panel-timemileage #btn-open-overtime{ background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-timemileage #btn-open-overtime:hover{ background:var(--ui-accent-hover) !important }
html #work_support-content #ws-panel-timemileage #btn-open-use-mileage{ background:var(--ui-surface) !important; color:var(--ui-text-1) !important }
html #work_support-content #ws-panel-timemileage #btn-open-use-mileage:hover{ background:var(--ui-fill-subtle) !important }
html #work_support-content #ws-panel-timemileage #btn-open-use-mileage > i{ color:var(--ui-text-2) !important }

/* 직원 카드 */
html #work_support-content #ws-panel-timemileage .tm-grid{ gap:10px !important; align-items:start }
html #work_support-content #ws-panel-timemileage .tm-card{ border:1px solid var(--ui-line) !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface) !important; box-shadow:none !important }
html #work_support-content #ws-panel-timemileage .tm-card-head{ padding:8px 14px !important; background:var(--ui-surface-alt) !important; border-bottom:1px solid var(--ui-line) }
html #work_support-content #ws-panel-timemileage .tm-card-head > div{ display:flex; align-items:baseline; flex-wrap:wrap; column-gap:10px }
html #work_support-content #ws-panel-timemileage .tm-card-head .font-bold{ 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-timemileage .tm-card-head .font-bold > i{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-timemileage .tm-card-head .tm-me{ height:18px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 6px !important; background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-timemileage .tm-card-head .text-xs{ margin:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
/* 숫자: 한 줄 */
html #work_support-content #ws-panel-timemileage .tm-stats{ gap:0 !important; padding:8px 14px 4px !important }
html #work_support-content #ws-panel-timemileage .tm-stats > div{ display:flex; align-items:baseline; justify-content:flex-start; flex-direction:row; gap:6px; padding:0 !important; border-radius:0 !important; background:transparent !important; text-align:left !important }
html #work_support-content #ws-panel-timemileage .tm-stats > div + div{ padding-left:12px !important; border-left:1px solid var(--ui-line) }
html #work_support-content #ws-panel-timemileage .tm-stats > div > div:first-child{ color:var(--ui-text-1) !important; font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-bold) !important; font-variant-numeric:tabular-nums; line-height:1.2 !important }
html #work_support-content #ws-panel-timemileage .tm-stats > div > div:first-child span{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-timemileage .tm-stats > div > div:first-child.text-orange-500{ color:var(--ui-warning) !important }
html #work_support-content #ws-panel-timemileage .tm-stats > div > div:first-child.text-green-600{ color:var(--ui-success) !important }
html #work_support-content #ws-panel-timemileage .tm-stats > div > div:last-child{ order:-1; margin:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; white-space:nowrap }
/* 사용률 막대 */
html #work_support-content #ws-panel-timemileage .tm-bar{ padding:4px 14px 10px !important }
html #work_support-content #ws-panel-timemileage .tm-bar > div:first-child{ margin-bottom:3px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #work_support-content #ws-panel-timemileage .tm-bar > div:last-child{ height:4px !important; background:var(--ui-fill) !important }
html #work_support-content #ws-panel-timemileage .tm-bar > div:last-child > div{ height:4px !important }
html #work_support-content #ws-panel-timemileage .tm-bar .bg-violet-400{ background:var(--ui-accent) !important }
/* 내역 */
html #work_support-content #ws-panel-timemileage .tm-sec{ padding:8px 14px 10px !important; border-top:1px solid var(--ui-line) !important }
html #work_support-content #ws-panel-timemileage .tm-sec-title{ margin-bottom:4px !important; gap:5px !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-timemileage .tm-sec-title > i{ color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #work_support-content #ws-panel-timemileage .tm-sec .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ margin-top:0 !important }
html #work_support-content #ws-panel-timemileage .tm-sec .text-gray-300{ padding:6px 0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; text-align:left !important }
html #work_support-content #ws-panel-timemileage :is(.tm-ot-row,.tm-use-row){ display:flex !important; align-items:center; gap:8px !important; min-height:28px; box-sizing:border-box; padding:0 2px !important; border:0 !important; border-top:1px solid var(--ui-line) !important; border-radius:0 !important; background:transparent !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-timemileage :is(.tm-ot-row,.tm-use-row):first-child{ border-top:0 !important }
html #work_support-content #ws-panel-timemileage .tm-ot-row > div:first-child{ display:contents }
html #work_support-content #ws-panel-timemileage .tm-ot-row > div:first-child > span{ order:1; flex:none }
html #work_support-content #ws-panel-timemileage .tm-ot-row > div:first-child > div{ display:contents }
html #work_support-content #ws-panel-timemileage .tm-ot-row > div:first-child > div > span.text-gray-400{ order:2; flex:none; color:var(--ui-text-2) !important; font-variant-numeric:tabular-nums }
html #work_support-content #ws-panel-timemileage .tm-ot-row .tm-plus{ order:3; flex:none }
html #work_support-content #ws-panel-timemileage .tm-ot-row .tm-ot-content{ order:4; flex:1 1 auto; min-width:0; color:var(--ui-text-2) !important }
html #work_support-content #ws-panel-timemileage .tm-ot-row button{ order:5; flex:none }
html #work_support-content #ws-panel-timemileage :is(.tm-ot-row,.tm-use-row) span.font-semibold:first-child,
html #work_support-content #ws-panel-timemileage .tm-ot-row > div:first-child > span.font-semibold{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums }
html #work_support-content #ws-panel-timemileage :is(.tm-plus,.tm-type){ height:18px; box-sizing:border-box; display:inline-flex; align-items:center; gap:3px; padding:0 7px !important; border-radius:var(--ui-radius-pill) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important; white-space:nowrap }
html #work_support-content #ws-panel-timemileage#ws-panel-timemileage .tm-plus{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important }
html #work_support-content #ws-panel-timemileage#ws-panel-timemileage .tm-type{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important }
html #work_support-content #ws-panel-timemileage .tm-use-row > span.font-bold{ color:var(--ui-warning) !important; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums }
html #work_support-content #ws-panel-timemileage :is(.tm-ot-row,.tm-use-row) button{ width:22px; height:22px; display:inline-grid; place-items:center; margin:0 !important; padding:0 !important; border-radius:var(--ui-radius-row); color:var(--ui-danger) !important }
html #work_support-content #ws-panel-timemileage :is(.tm-ot-row,.tm-use-row) button:hover{ background:var(--ui-danger-tint) }
html #work_support-content #ws-panel-timemileage :is(.tm-ot-row,.tm-use-row) button i{ font-size:var(--ui-text-caption) !important }
}
@media screen and (max-width:768px){
html #work_support-content #ws-panel-timemileage{ padding:12px !important }
html #work_support-content #ws-panel-timemileage :is(#btn-open-overtime,#btn-open-use-mileage){ height:36px }
html #work_support-content #ws-panel-timemileage :is(.tm-ot-row,.tm-use-row){ min-height:44px }
html #work_support-content #ws-panel-timemileage :is(.tm-ot-row,.tm-use-row) button{ width:32px; height:32px }
html #work_support-content #ws-panel-timemileage .tm-stats > div{ flex-direction:column; gap:0 }
}