/* =============================================================
   인프라관리 — 맥 고밀도형 (사용자 2026-11-03 "1")
   범위: #infra-content 안쪽만(카페리스트 · 네이버계정 · 발행기록 · 월간현황 + 카페 · 계정 편집 창). 화면에서만.
   큰 탭 카드 · 인디고 채운 칩 · 굵은 글씨 · 10px 글자 · 48px 줄(지역 · 침투 칸이 두 줄로 꺾임) →
   세그먼트 탭 · 흰 단추 · 32px 한 줄(휴대폰 44px) · 11px 이상. 채운 파랑은 하위 탭마다 하나(카페 추가 · 계정 추가 · 행 추가 · 직원 추가).
   발행기록 엑셀식 표는 25px 줄 · 칸 편집 · 끌어 선택 · 붙여넣기 그대로 — 칸 안 입력 상자 두 겹 테두리만 걷음.
   등급 · 구분 · 상태 색(뜻이 있는 색)은 그대로. 누르면 하는 일 · 저장 · 열람(계정 정보 클릭 시 보기)은 그대로.
   ============================================================= */
@media screen{
html #infra-content #infra-main{ font-family:var(--ui-font); color:var(--ui-text-1) }

/* ---------- 하위 탭: 큰 탭 카드 → 세그먼트 ---------- */
html #infra-content #infra-main > .flex:first-child{ gap:2px !important; margin-bottom:12px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important }
html #infra-content [id^="inf-sub-"]{ height:28px; padding:0 12px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important; transform:none !important }
html #infra-content [id^="inf-sub-"]::after{ display:none !important }
html #infra-content [id^="inf-sub-"]:hover{ background:var(--ui-fill-subtle) !important; color:var(--ui-text-1) !important }
html #infra-content [id^="inf-sub-"].bg-indigo-600{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content [id^="inf-sub-"] > i{ display:none !important }
html #infra-content #inf-cafe-monitor-launch{ height:28px; display:inline-flex; align-items:center; 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-accent-text) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important; transform:none !important }
html #infra-content #inf-cafe-monitor-launch:hover{ background:var(--ui-fill-subtle) !important }
html #infra-content #inf-cafe-monitor-launch > i{ margin-right:5px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) }

/* ---------- 도구 줄 (카페 · 계정 · 월간현황) ---------- */
html #infra-content #inf-content-area > .flex:first-child{ gap:6px !important; margin-bottom:8px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important }
html #infra-content #inf-content-area > .flex:first-child > .flex{ gap:6px !important }
/* 등급 거르기: 인디고 칩 → 세그먼트 */
html #infra-content #inf-cafe-grade-filters{ gap:0 !important; padding:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #infra-content #inf-cafe-grade-filters > button{ height:24px; padding:0 9px !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; font-variant-numeric:tabular-nums; transform:none !important }
html #infra-content #inf-cafe-grade-filters > button.bg-indigo-600{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content #inf-cafe-search{ height:28px; width:200px !important; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill) !important; box-shadow:none !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important }
html #infra-content #inf-cafe-search::placeholder{ color:var(--ui-text-3) }
html #infra-content #inf-cafe-search:focus{ outline:0; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
/* 흰 단추(등업조건 · 업무행 추가 등) */
html #infra-content #inf-cafe-levelup-btn{ box-sizing:border-box; display:inline-flex; align-items:center; height:28px; 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-callout) !important; font-weight:var(--ui-weight-regular) !important; transform:none !important }
html #infra-content #inf-cafe-levelup-btn.bg-purple-600{ background:var(--ui-accent-tint) !important; box-shadow:none !important; color:var(--ui-accent-text) !important }
html #infra-content #inf-cafe-levelup-btn > i{ margin-right:5px !important; font-size:var(--ui-text-caption) }
/* 채운 파랑: 하위 탭마다 하나 */
html #infra-content :is(button[onclick^="infAddCafe"],button[onclick^="infAddAccount"],#inf-content-area > .flex:first-child > button[onclick^="_infraAddStatsEmployee"]){ height:28px; 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-callout) !important; font-weight:var(--ui-weight-semibold) !important; transform:none !important }
html #infra-content :is(button[onclick^="infAddCafe"],button[onclick^="infAddAccount"],#inf-content-area > .flex:first-child > button[onclick^="_infraAddStatsEmployee"]):hover{ background:var(--ui-accent-hover) !important }
html #infra-content :is(button[onclick^="infAddCafe"],button[onclick^="infAddAccount"],button[onclick^="_infraAddStatsEmployee"]) > i{ margin-right:5px !important; font-size:var(--ui-text-caption) }
/* 계정 수 · 월간현황 건수 */
html #infra-content #inf-content-area > .flex:first-child > .text-sm{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #infra-content #inf-content-area > .flex:first-child > .text-sm > span{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content #inf-stats-month{ height:28px; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important }
html #infra-content #inf-content-area > .flex:first-child .text-xs{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }

/* ---------- 카페 · 계정 표: 48px 줄 → 32px 한 줄 ---------- */
html #infra-content #inf-content-area > .bg-white.rounded-2xl{ border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:0 0 0 .5px var(--ui-line) !important; background:var(--ui-surface) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto{ max-height:calc(100vh - 220px) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] table{ border-collapse:separate; border-spacing:0 }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] thead tr{ background:var(--ui-surface) !important; color:var(--ui-text-2) !important; text-transform:none !important; letter-spacing:0 !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] thead th{ height:31px; padding:0 8px !important; border:0 !important; background:var(--ui-surface) !important; box-shadow:inset 0 -.5px var(--ui-line); color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] thead th span{ color:var(--ui-text-2) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody tr{ border:0 !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody tr:hover{ background:var(--ui-fill-subtle) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td{ height:32px; padding:0 8px !important; border:0 !important; box-shadow:inset 0 -.5px var(--ui-line); color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody tr:last-child td{ box-shadow:none }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td:first-child{ color:var(--ui-text-3) !important; font-variant-numeric:tabular-nums }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td.font-mono{ font-family:var(--ui-font) !important; font-variant-numeric:tabular-nums }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td a{ color:var(--ui-accent-text) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td.inf-levelup-col{ max-width:220px; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
/* 침투 상태 '가능 · 협의후 진행': 굵은 초록 → 초록 점 + 글자 */
html #infra-content #inf-cafe-tbody td > span.text-green-600{ display:inline-flex; align-items:center; gap:5px; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #infra-content #inf-cafe-tbody td > span.text-green-600::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ui-success); flex:0 0 auto }
/* 등급 · 상태 알약: 뜻 색은 두고 글자만 11px · 600 */
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td span.rounded{ padding:1px 6px !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content #inf-cafe-tbody td i.fa-check{ color:var(--ui-text-2) !important }
/* 수정 · 삭제 아이콘 */
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td button{ width:24px; height:24px; margin:0 !important; border-radius:var(--ui-radius-row); color:var(--ui-accent-text) !important; font-size:var(--ui-text-footnote) !important; transform:none !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td button[onclick*="Delete"]{ color:var(--ui-danger) !important; opacity:.75 }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td button:hover{ background:var(--ui-fill) !important; opacity:1 }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td[colspan]:only-child{ height:auto; padding:20px 8px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #infra-content .inf-cred-cell{ color:var(--ui-text-2) !important; letter-spacing:.06em }

/* ---------- 발행기록: 도구 줄 · 엑셀식 표 ---------- */
html #infra-content .inf-post-toolbar{ gap:6px }
html #infra-content .inf-post-month-input{ height:28px; padding:0 10px; border:0; border-radius:var(--ui-radius-control); box-shadow:var(--ui-elev-field); color:var(--ui-text-1); font-size:var(--ui-text-callout); font-weight:var(--ui-weight-regular) }
html #infra-content .inf-post-badges{ gap:12px }
html #infra-content .inf-post-badge{ display:inline-flex; align-items:center; gap:5px; padding:0; border-radius:0; background:transparent; color:var(--ui-text-1); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); font-variant-numeric:tabular-nums }
html #infra-content .inf-post-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ui-text-3) }
html #infra-content .inf-post-badge-blue::before{ background:var(--ui-info) }
html #infra-content .inf-post-badge-red::before{ background:var(--ui-danger) }
html #infra-content .inf-post-badge-green::before{ background:var(--ui-success) }
html #infra-content .inf-post-badge-gray{ color:var(--ui-text-2) }
html #infra-content .inf-post-badge-gray::before{ display:none }
html #infra-content .inf-post-filter-select{ height:28px; padding:0 22px 0 8px; border:0; border-radius:var(--ui-radius-control); background-color:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-footnote) }
html #infra-content .inf-post-refresh-btn{ border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-2) }
html #infra-content .inf-post-refresh-btn:hover{ border-color:transparent; background:var(--ui-fill-subtle); color:var(--ui-text-1) }
html #infra-content .inf-post-add-btn{ border-radius:var(--ui-radius-control); background:var(--ui-accent) }
html #infra-content .inf-post-add-btn:hover{ background:var(--ui-accent-hover) }
html #infra-content .inf-post-clipboard-bar{ border:0; border-radius:var(--ui-radius-control); background:var(--ui-accent-tint); color:var(--ui-accent-text); font-size:var(--ui-text-footnote) }
html #infra-content .inf-sheet-wrap{ border:0; border-radius:var(--ui-radius-group); box-shadow:0 0 0 .5px var(--ui-line) }
html #infra-content .inf-sheet-th{ background:var(--ui-surface-alt); color:var(--ui-text-2); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-regular); border-bottom:.5px solid var(--ui-line-control) }
html #infra-content :is(.inf-sheet-th-row,.inf-sheet-th-act,.inf-sheet-rownum){ background:var(--ui-surface-alt) }
html #infra-content .inf-sheet-rownum{ color:var(--ui-text-3); font-size:var(--ui-text-caption) }
/* 칸 안 입력 상자: 앱 공용 입력칸 테두리 · 그림자가 칸 선과 겹쳐 두 겹으로 보이던 것 → 칸 자체가 입력칸 */
html #infra-content .inf-sheet-table :is(input,select).inf-sheet-input, html #infra-content .inf-sheet-table select.inf-sheet-select{ height:100% !important; min-height:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important; background-color:transparent !important; box-shadow:none !important; font-size:var(--ui-text-caption) !important }
html #infra-content .inf-sheet-table :is(input,select).inf-sheet-input:focus, html #infra-content .inf-sheet-table select.inf-sheet-select:focus{ background-color:var(--ui-surface) !important; box-shadow:inset 0 0 0 1.5px var(--ui-accent) !important }
html #infra-content .inf-sheet-table .inf-sheet-input::placeholder{ color:var(--ui-text-3) }
html #infra-content .inf-ae-text{ font-size:var(--ui-text-caption) }
html #infra-content .inf-sheet-del-btn{ font-size:var(--ui-text-caption) }

/* ---------- 월간현황 ---------- */
/* 수당가이드: 주황 그라데이션 상자 · 큰 주황 숫자 → 흰 묶음 · 6칸 한 줄 */
html #infra-content #inf-content-area > .bg-gradient-to-r{ padding:0 !important; border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface) !important; box-shadow:0 0 0 .5px var(--ui-line) !important; overflow:hidden }
html #infra-content #inf-content-area > .bg-gradient-to-r > .flex:first-child{ margin:0 !important; padding:8px 12px !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #infra-content #inf-content-area > .bg-gradient-to-r h3{ color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content #inf-content-area > .bg-gradient-to-r h3 > i{ display:none !important }
html #infra-content #inf-content-area > .bg-gradient-to-r > .flex:first-child > span{ color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #infra-content #inf-content-area > .bg-gradient-to-r > .grid{ gap:0 !important }
html #infra-content #inf-content-area > .bg-gradient-to-r > .grid > div{ padding:6px 8px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important }
html #infra-content #inf-content-area > .bg-gradient-to-r > .grid > div + div{ box-shadow:inset .5px 0 var(--ui-line) !important }
html #infra-content #inf-content-area > .bg-gradient-to-r > .grid > div > div:first-child{ margin:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #infra-content #inf-content-area > .bg-gradient-to-r > .grid > div > .text-lg{ color:var(--ui-text-1) !important; font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums }
html #infra-content #inf-content-area > .bg-gradient-to-r > .grid > div > div:last-child:not(.text-lg){ margin-top:1px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important; line-height:1.3 }
/* 직원별 표 · 빈 화면 */
html #infra-content #inf-content-area > .bg-white.rounded-2xl.p-12{ padding:24px 12px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl.p-12 > i{ display:none !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl.p-12 > br:first-of-type{ display:none }
html #infra-content #inf-content-area > .bg-white.rounded-2xl.p-12 > button{ height:28px; margin-top:8px !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-callout) !important; font-weight:var(--ui-weight-regular) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .bg-gray-50:first-child{ padding:6px 12px !important; border:0 !important; background:var(--ui-surface-alt) !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .bg-gray-50:first-child > span{ color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .bg-gray-50:first-child > span > i{ display:none !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .bg-gray-50:first-child button{ height:24px; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-row) !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 #infra-content #inf-content-area > .bg-white.rounded-2xl > .bg-gray-50:first-child button:hover{ background:var(--ui-fill-subtle) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\]{ font-size:var(--ui-text-caption) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\] :is(th,td){ font-size:var(--ui-text-caption) !important }
/* 직원별 날짜 표: 칸 선 + 입력 상자 두 겹 → 칸 자체가 입력칸, 굵은 인디고 → 회색 · 600 */
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\] thead tr{ background:var(--ui-surface-alt) !important; color:var(--ui-text-2) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\] thead th{ height:28px; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important; background-color:var(--ui-surface-alt) !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\] thead th.bg-red-50{ color:var(--ui-danger) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\] :is(th,td).bg-indigo-50{ background:var(--ui-fill-subtle) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\] tbody td{ height:28px; box-shadow:inset 0 -.5px var(--ui-line) }
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\] tbody td:first-child{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\] tbody input[type="number"]{ height:28px !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background-color:transparent !important; box-shadow:none !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; font-variant-numeric:tabular-nums }
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\] tbody input[type="number"].font-semibold{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl table.text-\[10px\] tbody input[type="number"]:focus{ background-color:var(--ui-surface) !important; box-shadow:inset 0 0 0 1.5px var(--ui-accent) !important }
/* 월간 지급액 산정: 고정폭 굵은 숫자 · 파랑 그라데이션 → 보통 숫자, 합계 줄만 600 */
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r{ padding:10px 12px 12px !important; border-top:0 !important; background:var(--ui-surface) !important; box-shadow:inset 0 .5px var(--ui-line) }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r h4{ color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r h4 > i{ display:none !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r table :is(th,td){ height:26px; padding-top:0 !important; padding-bottom:0 !important; border:0 !important; font-family:var(--ui-font) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; font-variant-numeric:tabular-nums }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r table th{ color:var(--ui-text-2) !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r table tbody td{ box-shadow:inset 0 -.5px var(--ui-line) }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r table tbody tr.text-gray-300 td{ color:var(--ui-text-3) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r table td.text-blue-700{ color:var(--ui-text-1) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r table td.text-red-500{ color:var(--ui-danger) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r table :is(tr.font-bold, tr.bg-indigo-50\/50) td{ height:32px; background:var(--ui-surface) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r table :is(.inf-pay-total,.inf-pay-net){ font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .border-t.bg-gradient-to-r table td i.fa-won-sign{ display:none }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .bg-gray-50:first-child button > i{ margin-right:3px !important; font-size:var(--ui-text-caption) }

/* ---------- 카페 · 계정 편집 창 ---------- */
html #infra-content :is(#inf-cafe-modal,#inf-account-modal){ background:var(--ui-scrim) !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-content{ border:0 !important; border-radius:var(--ui-radius-sheet) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-sheet) !important; overflow:hidden }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) :is(.modal-header,.modal-footer){ border:0 !important; background:var(--ui-surface) !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-header{ padding:14px 18px 6px !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-header h3{ color:var(--ui-text-1) !important; font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-header h3 > i{ display:none !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-close{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:50% !important; background:var(--ui-fill) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-footer{ gap:6px; padding:10px 18px 14px !important; box-shadow:inset 0 .5px var(--ui-line) }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-footer :is(.btn-cancel,.btn-primary){ height:28px; padding:0 14px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-callout) !important; transform:none !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-footer .btn-cancel{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-footer .btn-primary{ min-width:72px; background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-footer .btn-primary > i{ display:none }
html #infra-content :is(#inf-cafe-form,#inf-account-form) label{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #infra-content :is(#inf-cafe-form,#inf-account-form) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){ min-height:28px; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-field) !important; background-color:var(--ui-surface) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important }
html #infra-content :is(#inf-cafe-form,#inf-account-form) :is(input,select,textarea):focus{ outline:0; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #infra-content :is(#inf-cafe-form,#inf-account-form) :is(h4,.font-bold){ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #infra-content :is(#inf-cafe-form,#inf-account-form) :is(.text-\[10px\],.text-\[9px\]){ font-size:var(--ui-text-caption) !important }
}

/* ---------- 휴대폰 ---------- */
@media screen and (max-width:768px){
html #infra-content #infra-main > .flex:first-child{ flex-wrap:nowrap !important; overflow-x:auto }
html #infra-content [id^="inf-sub-"], html #infra-content #inf-cafe-monitor-launch{ height:36px; flex:0 0 auto; white-space:nowrap }
html #infra-content #inf-cafe-grade-filters{ max-width:100%; overflow-x:auto }
/* 옆으로 미는 탭 · 등급 줄: 회색 스크롤 막대 숨김(손가락으로 밀기는 그대로) */
html #infra-content #infra-main > .flex:first-child, html #infra-content #inf-cafe-grade-filters{ scrollbar-width:none }
html #infra-content #infra-main > .flex:first-child::-webkit-scrollbar, html #infra-content #inf-cafe-grade-filters::-webkit-scrollbar{ display:none }
html #infra-content #inf-cafe-grade-filters > button{ height:32px; flex:0 0 auto }
html #infra-content #inf-cafe-search{ flex:1 1 auto; width:auto !important; height:36px }
html #infra-content :is(#inf-cafe-levelup-btn,button[onclick^="infAddCafe"],button[onclick^="infAddAccount"],#inf-content-area > .flex:first-child > button[onclick^="_infraAddStatsEmployee"]){ height:36px }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td{ height:44px }
html #infra-content #inf-content-area > .bg-white.rounded-2xl > .overflow-x-auto[style] tbody td button{ width:32px; height:32px }
html #infra-content #inf-content-area > .bg-gradient-to-r > .grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important }
html #infra-content #inf-content-area > .bg-gradient-to-r > .grid > div:nth-child(4){ box-shadow:inset 0 .5px var(--ui-line) !important }
html #infra-content #inf-content-area > .bg-gradient-to-r > .grid > div:nth-child(n+5){ box-shadow:inset .5px .5px var(--ui-line) !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal){ align-items:flex-end !important; padding:0 !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-content{ width:100% !important; max-width:none !important; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-footer{ padding-bottom:calc(14px + env(safe-area-inset-bottom)) !important }
html #infra-content :is(#inf-cafe-modal,#inf-account-modal) .modal-footer :is(.btn-cancel,.btn-primary){ height:40px; flex:1 1 0 }
}