/* =============================================================
   업무지원 › 복지신청 — 맥 고밀도형 (사용자 2026-11-03 "1": 지각 다음)
   범위: #work_support-content #ws-panel-welfare 안쪽만. 화면에서만. (업무지원 머리 · 하위 탭은 ui-skin-attendance.css)
   - 채운 단추 7개(머리 '복지 신청' · 카드마다 '신청하기' · 아래 '복지 신청하기') → 채운 파랑은 머리 '복지 신청' 하나,
     나머지는 흰 단추(누르면 같은 신청 창)
   - 안내 머리(106px · 영문 꼬리표 · 큰 아이콘) → 한 줄 띠 + 숫자 칩
   - 안내 카드(높이 521~719px, 최소 338px): 여백 · 항목 간격을 줄이고 경조사 비교표를 한 줄씩(근속 1년 이상 | 미만)
     카테고리 색 아이콘(빨강 · 노랑 · 초록 · 보라 · 파랑, 장식) → 회색 아이콘. '신청 가능' 초록 · '안내 전용' 회색 칩은 그대로
   - 신청 내역 표: 48~63px(휴대폰 159~318px) → 32px 한 줄(휴대폰 44px, 옆으로 밀기). 분홍 머리 · 분홍 종류 칩 → 회색.
     상태 색(대기 · 승인 · 반려)은 그대로
   더보기 · 신청 · 수정 · 삭제 · 승인 동작 그대로. 값은 ui-tokens.css 토큰만.
   ============================================================= */
@media screen{
html #work_support-content #ws-panel-welfare{ padding:16px 20px 20px !important; font-family:var(--ui-font); color:var(--ui-text-1) }
html #work_support-content #ws-panel-welfare#ws-panel-welfare > .flex:first-child{ margin-bottom:12px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important }
html #work_support-content #ws-panel-welfare#ws-panel-welfare > .flex:first-child h3{ font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important }
html #work_support-content #ws-panel-welfare#ws-panel-welfare > .flex:first-child h3 > i{ margin-right:6px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-callout) !important }
/* 채운 파랑: 머리 '복지 신청' 하나 */
html #work_support-content #ws-panel-welfare#ws-panel-welfare button[onclick="openWelfareModal()"]:not(.welfare-apply-btn){ box-sizing:border-box; min-height:0 !important; height:28px; 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-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-welfare#ws-panel-welfare button[onclick="openWelfareModal()"]:not(.welfare-apply-btn):hover{ background:var(--ui-accent-hover) !important }
html #work_support-content #ws-panel-welfare#ws-panel-welfare button[onclick="openWelfareModal()"]:not(.welfare-apply-btn) > i{ margin:0 !important; font-size:var(--ui-text-caption) !important }

html #work_support-content #ws-panel-welfare .welfare-section,
html #work_support-content #ws-panel-welfare .welfare-requests{ gap:10px !important }
/* 안내 머리 → 한 줄 띠 */
html #work_support-content #ws-panel-welfare .welfare-hero{ align-items:center !important; gap:12px !important; padding:8px 14px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-fill-subtle) !important }
html #work_support-content #ws-panel-welfare .welfare-hero-main{ align-items:center !important }
html #work_support-content #ws-panel-welfare :is(.welfare-hero-icon,.welfare-eyebrow){ display:none !important }
html #work_support-content #ws-panel-welfare .welfare-hero h3{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #work_support-content #ws-panel-welfare .welfare-hero p{ margin:1px 0 0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-welfare .welfare-hero-stats{ gap:4px !important; flex-shrink:0 }
html #work_support-content #ws-panel-welfare .welfare-hero-stats span{ height:22px; box-sizing:border-box; display:inline-flex; align-items:center; gap:3px; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-surface) !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap }
html #work_support-content #ws-panel-welfare .welfare-hero-stats strong{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums }

/* 안내 카드 */
html #work_support-content #ws-panel-welfare .welfare-policy-grid{ gap:10px !important; align-items:start }
html #work_support-content #ws-panel-welfare .welfare-card{ min-height:0 !important; padding:12px 14px !important; gap:0 !important; 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-welfare .welfare-card-head{ gap:10px !important; align-items:flex-start !important }
html #work_support-content #ws-panel-welfare .welfare-card .welfare-card-icon{ width:28px !important; height:28px !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-welfare .welfare-card-title-line{ gap:6px !important }
html #work_support-content #ws-panel-welfare .welfare-card h4{ margin:0 !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-bold) !important; line-height:1.3 !important }
html #work_support-content #ws-panel-welfare .welfare-card-title p{ margin:2px 0 0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; line-height:1.4 !important }
html #work_support-content #ws-panel-welfare .welfare-card .toss-mini-chip{ height:20px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 7px !important; border:0 !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-welfare .welfare-card .toss-mini-chip.green{ background:var(--ui-success-tint) !important; color:var(--ui-success) !important }
html #work_support-content #ws-panel-welfare .welfare-card .toss-mini-chip.gray{ background:var(--ui-fill) !important; color:var(--ui-text-2) !important }
html #work_support-content #ws-panel-welfare .welfare-card-meta{ gap:4px !important; margin:8px 0 6px !important }
html #work_support-content #ws-panel-welfare .welfare-card-meta span{ height:20px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 7px !important; border:0 !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill-subtle) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important }
/* 세부 항목 */
html #work_support-content #ws-panel-welfare .welfare-policy-list{ gap:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important }
html #work_support-content #ws-panel-welfare .welfare-policy-row{ padding:7px 0 !important; margin:0 !important; border:0 !important; border-top:1px solid var(--ui-line) !important; border-radius:0 !important; background:transparent !important }
html #work_support-content #ws-panel-welfare .welfare-policy-row-head{ gap:6px !important; align-items:center !important }
html #work_support-content #ws-panel-welfare .welfare-policy-row-head > div{ display:flex; align-items:baseline; gap:6px; min-width:0 }
html #work_support-content #ws-panel-welfare .welfare-policy-row strong{ 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-welfare .welfare-policy-row span{ display:inline !important; margin:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #work_support-content #ws-panel-welfare .welfare-policy-row em{ display:block; margin:1px 0 0 !important; color:var(--ui-accent-text) !important; font-style:normal !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #work_support-content #ws-panel-welfare .welfare-policy-row p{ margin:2px 0 0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; line-height:1.45 !important }
html #work_support-content #ws-panel-welfare .welfare-policy-row.muted{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-welfare :is(.welfare-policy-edit-btn){ width:24px !important; height:24px !important; min-height:0 !important; flex:none; display:inline-grid; place-items:center; padding:0 !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #work_support-content #ws-panel-welfare .welfare-policy-edit-btn:hover{ background:var(--ui-fill) !important }
/* 경조사 비교표: 한 줄씩 */
html #work_support-content #ws-panel-welfare .welfare-consolation-grid{ gap:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important }
html #work_support-content #ws-panel-welfare .welfare-consolation-row{ display:grid !important; grid-template-columns:minmax(84px, 30%) 1fr; align-items:center; gap:8px !important; padding:6px 0 !important; margin:0 !important; border:0 !important; border-top:1px solid var(--ui-line) !important; border-radius:0 !important; background:transparent !important }
html #work_support-content #ws-panel-welfare .welfare-consolation-row strong{ 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-welfare .welfare-consolation-cols{ gap:6px !important; margin:0 !important }
html #work_support-content #ws-panel-welfare .welfare-consolation-cols div{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:4px; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important }
html #work_support-content #ws-panel-welfare .welfare-consolation-cols span{ display:block !important; width:100%; margin:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important }
html #work_support-content #ws-panel-welfare .welfare-consolation-cols b{ margin:0 !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-welfare .welfare-consolation-cols p{ margin:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; line-height:1.35 !important }
html #work_support-content #ws-panel-welfare .welfare-consolation-note{ margin:6px 0 0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
/* 카드 아래 단추 */
html #work_support-content #ws-panel-welfare .welfare-card-actions{ gap:6px !important; margin-top:8px !important; padding-top:8px !important; border-top:1px solid var(--ui-line) !important }
html #work_support-content #ws-panel-welfare :is(.welfare-apply-btn,.welfare-admin-edit-card){ box-sizing:border-box; min-height:0 !important; height:28px !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-welfare .welfare-apply-btn{ color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-welfare :is(.welfare-apply-btn,.welfare-admin-edit-card):hover{ background:var(--ui-fill-subtle) !important }
html #work_support-content #ws-panel-welfare :is(.welfare-apply-btn,.welfare-admin-edit-card) > i{ margin:0 !important; font-size:var(--ui-text-caption) !important }
html #work_support-content #ws-panel-welfare .welfare-text-btn{ min-height:0 !important; height:28px; display:inline-flex; align-items:center; gap:4px !important; padding:0 6px !important; border:0 !important; background:transparent !important; color:var(--ui-accent-text) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #work_support-content #ws-panel-welfare .welfare-text-btn > i{ font-size:var(--ui-text-caption) !important }
/* 바로 신청 띠 */
html #work_support-content #ws-panel-welfare .welfare-quick-apply{ margin:12px 0 !important; gap:12px !important; padding:8px 8px 8px 14px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-fill-subtle) !important; box-shadow:none !important }
html #work_support-content #ws-panel-welfare .welfare-quick-apply strong{ 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-welfare .welfare-quick-apply p{ margin:1px 0 0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }

/* 신청 내역 */
html #work_support-content #ws-panel-welfare .welfare-section-title{ gap:8px !important; align-items:flex-end !important }
html #work_support-content #ws-panel-welfare .welfare-section-title h3{ display:flex; align-items:center; gap:6px; margin:0 !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-welfare .welfare-section-title h3 > i{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-welfare .welfare-section-title p{ margin:2px 0 0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-welfare .welfare-list-filters{ gap:0 !important; padding:2px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill) !important }
html #work_support-content #ws-panel-welfare .welfare-list-filter-btn{ min-height:0 !important; height:24px; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:transparent !important; box-shadow:none !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-welfare .welfare-list-filter-btn.active{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table{ 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-welfare .welfare-request-table > table{ font-size:var(--ui-text-body) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table > table > thead{ background:var(--ui-surface-alt) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table > table > thead tr{ height:31px }
html #work_support-content #ws-panel-welfare .welfare-request-table .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-welfare .welfare-request-table > table > tbody > tr{ height:32px; border-bottom:1px solid var(--ui-line) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table > table > tbody > tr:last-child{ border-bottom:0 !important }
html #work_support-content #ws-panel-welfare .welfare-request-table > table > tbody > tr:hover{ background:var(--ui-fill-subtle) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table .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-welfare .welfare-request-table .ws-td.max-w-xs{ max-width:360px !important; overflow:hidden; text-overflow:ellipsis; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table .ws-td.text-xs{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-variant-numeric:tabular-nums }
html #work_support-content #ws-panel-welfare .welfare-who{ display:flex !important; flex-direction:row !important; align-items:center; gap:6px !important }
html #work_support-content #ws-panel-welfare .welfare-who-top{ gap:4px !important }
html #work_support-content #ws-panel-welfare .welfare-who-top b{ font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-welfare :is(.welfare-proxy-chip){ height:18px; box-sizing:border-box; display:inline-flex; align-items:center; gap:3px; padding:0 6px !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-caption) !important; font-weight:var(--ui-weight-regular) !important }
html #work_support-content #ws-panel-welfare .welfare-who-by{ margin:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #work_support-content #ws-panel-welfare .welfare-row-proxy{ background:transparent !important }
html #work_support-content #ws-panel-welfare .welfare-request-table .ws-td > span.bg-pink-100{ height:20px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 7px !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-welfare .welfare-request-table .ws-td > span[class*="rounded"]:not(.bg-pink-100){ height:20px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 8px !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table :is(.ws-btn-edit,.ws-btn-del,.ws-btn-approve){ width:24px; height:24px; min-height:0 !important; display:inline-grid; place-items:center; padding:0 !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:transparent !important; box-shadow:none !important; font-size:var(--ui-text-caption) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table .ws-btn-edit{ color:var(--ui-text-2) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table .ws-btn-del{ color:var(--ui-danger) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table .ws-btn-approve{ color:var(--ui-success) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table :is(.ws-btn-edit,.ws-btn-del,.ws-btn-approve):hover{ background:var(--ui-fill) !important }
}
@media screen and (max-width:768px){
html #work_support-content #ws-panel-welfare{ padding:12px !important }
html #work_support-content #ws-panel-welfare .welfare-hero{ flex-wrap:wrap }
html #work_support-content #ws-panel-welfare .welfare-hero-stats{ justify-content:flex-start !important }
html #work_support-content #ws-panel-welfare .welfare-consolation-cols{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important }
html #work_support-content #ws-panel-welfare .welfare-request-table > table > tbody > tr{ height:44px }
html #work_support-content #ws-panel-welfare :is(.welfare-apply-btn,.welfare-admin-edit-card){ height:36px !important; justify-content:center }
html #work_support-content #ws-panel-welfare#ws-panel-welfare button[onclick="openWelfareModal()"]:not(.welfare-apply-btn){ height:32px }
html #work_support-content #ws-panel-welfare .welfare-request-table :is(.ws-btn-edit,.ws-btn-del,.ws-btn-approve){ width:32px; height:32px }
}