/* ========== Base ========== */
body {
  font-family: 'Noto Sans KR', sans-serif;
  background: #f3f4f6;
  color: #1f2937;
  margin: 0;
  padding: 0;
}
h1 {
  color: #1e3a8a;
  font-weight: 700;
  margin: 20px;
}

/* ========== Top cards ========== */
.cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 20px 20px 20px;
}
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  padding: 18px;
  flex: 1;
  min-width: 200px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

/* ========== Sticky form (상단 입력 폼) ========== */
.form {
  position: sticky;
  top: 0;
  background: #f3f4f6;
  padding: 15px 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 20;
  border-bottom: 1px solid #e5e7eb;
}
input {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  flex: 1;
  min-width: 140px;
  font-weight: 500;
}
button {
  background: #1e40af;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}
button:hover { background: #1d4ed8; }
button:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }

/* ========== List ========== */
#list {
  margin: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#list > .itemRow {
  background: #fff;
  border-left-color: #9ca3af;
  border-radius: 10px;
  padding: 6px 12px;   /* 👈 12px -> 6px로 수정 */
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-left: 4px solid #1e40af;
  font-size: 14px;     /* (선택사항) 글자 크기도 15px -> 14px로 살짝 줄이면 더 균형 잡힘 */
  min-height: 46px;    /* (선택사항) 최소 높이 지정 */
}
.itemRow {
  display: grid;
  grid-template-columns: 0.3fr 1.1fr 1.2fr 1.2fr 0.5fr 1.3fr 0.9fr 0.7fr;
  gap: 10px;
  align-items: center;
}
.cell { 
  font-weight: 500; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}
.cell.date { white-space: nowrap; }
.actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.actions button {
  background: #e5e7eb;
  color: #1f2937;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.actions button:hover { background: #1e40af; color: #fff; }

/* ========== Status badges ========== */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}
.badge.running {
  background: rgba(34,197,94,0.12);
  color: #166534;
  border-color: rgba(34,197,94,0.35);
}
.badge.due-today {
  background: rgba(245,158,11,0.14);
  color: #92400e;
  border-color: rgba(245,158,11,0.35);
}
.badge.ended {
  background: rgba(239,68,68,0.14);
  color: #991b1b;
  border-color: rgba(239,68,68,0.35);
}

/* ========== 오늘 종료 모아보기 ========== */
.today-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 3px 8px rgba(0,0,0,0.08);
  margin:20px;
  padding:16px;
}
.today-header{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid #e5e7eb;padding-bottom:8px;margin-bottom:12px;
}
.today-group{
  border:1px solid #e5e7eb;border-radius:10px;margin:10px 0;overflow:hidden;
}
.today-group .title{
  background: transparent;
  padding: 10px 14px;
  font-weight: 700;
}
.reward-badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: var(--bg, #e5e7eb);
  color: var(--fg, #1f2937);
  box-shadow: 0 1px 2px rgba(0,0,0,.06) inset, 0 1px 3px rgba(0,0,0,.05);
}
.today-items{ padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.today-item{ display:flex; gap:10px; align-items:center; font-size:14px; }
.today-item .dot{ width:8px; height:8px; border-radius:999px; background:#1e40af; }

/* ========== Filters ========== */
.filters {
  margin: 12px 20px 0 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding: 10px 14px;
}
.filters input,
.filters select {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-weight: 500;
  font-size: 14px;
}
.filters input[type="date"] { min-width: 140px; }
.filters select { min-width: 150px; }
.filters button {
  background: #1e40af; color: #fff; border: none;
  border-radius: 6px; padding: 8px 14px; font-weight: 600; cursor: pointer;
  transition: background 0.2s ease;
}
.filters button:hover { background: #1d4ed8; }

/* ✅ 요청일 필터 라벨/그룹 (가독성 업) */
.filters .filter-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}
.filters .filter-group label {
  font-size: 12px;
  color: #111;
  font-weight: 700;
  background: #fff;
  border: 1px solid #cfd4dc;
  border-radius: 6px;
  padding: 4px 8px;
}
.filters .filter-group input[type="date"] {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
}
.filters #stlFilterSearch {
  font-weight: 700;
  background: #111;
  border-color: #111;
}

/* ========== Responsive for list ========== */
@media (max-width: 900px){
  .itemRow {
    grid-template-columns: 1.2fr 1.2fr 1.2fr 0.6fr 1.2fr;
    grid-auto-rows: auto;
    row-gap: 6px;
  }
  .cell.status, .actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ========== D-DAY 강조 ========== */
@keyframes soft-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35); }
  70% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.itemRow.is-dday {
  border-left: 6px solid #f59e0b;
  position: relative;
  animation: soft-pulse 1.6s ease-out infinite;
}
.itemRow.is-dday .badge { font-weight: 900; }
.badge.urgent.u3 { box-shadow: 0 0 0 2px rgba(251, 191, 36, .35) inset; }
.badge.urgent.u2 { box-shadow: 0 0 0 2px rgba(251, 146, 60, .45) inset; }
.badge.urgent.u1 { box-shadow: 0 0 0 2px rgba(248, 113, 113, .55) inset; }
.badge.urgent.uday { box-shadow: 0 0 0 2px rgba(239, 68, 68, .65) inset; transform: scale(1.02); }
.today-item.is-dday .dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.18); }
.today-item.u1 .dot { background: #f97316; }
.today-item.u2 .dot { background: #fb923c; }
.today-item.u3 .dot { background: #fbbf24; }

/* ========== List toolbar / empty ========== */
.list-toolbar {
  margin: 8px 20px 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 28px;
}
.loading {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: #1f2937;
  background: #f3f4f6; border: 1px solid #e5e7eb;
  padding: 4px 10px; border-radius: 999px;
}
.spinner {
  width: 14px; height: 14px;
  border: 2px solid #d1d5db;
  border-top-color: #1e40af;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.result-count { font-size: 14px; color: #6b7280; }
#list .empty {
  margin: 16px 20px;
  background: #fff;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  padding: 22px;
  color: #6b7280;
  text-align: center;
  font-size: 14px;
}

/* ========== 레이아웃 / 사이드바 ========== */
.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
  background: #0f172a; color: #e5e7eb; padding: 16px 12px;
  display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; height: 100vh;
}
.brand { font-weight: 800; letter-spacing: .3px; margin: 6px 8px 10px; }
.nav { display: flex; flex-direction: column; gap: 6px; }
.nav-link {
  color: #cbd5e1; text-decoration: none; padding: 10px 12px; border-radius: 8px; display: block;
}
.nav-link:hover { background: #1f2937; color: white; }
.nav-link.active { background: #1e40af; color: white; }
.content { background: #f3f4f6; }
.page { display: none; }
.page.current { display: block; }
.placeholder {
  margin: 20px; background:#fff; border-radius: 12px; padding: 20px;
  color:#6b7280; border:1px dashed #e5e7eb;
}
@media (max-width: 900px){
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-bottom: 1px solid #1f2937; }
}

/* ========== 담당자별 요약 섹션 ========== */
.owner-summary-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 3px 8px rgba(0,0,0,0.08);
  margin:20px;
  padding:16px;
}
.owner-header{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid #e5e7eb;padding-bottom:8px;margin-bottom:12px;
}
#ownerSummary{ display:flex; flex-direction:column; gap:10px; }
.owner-line{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  padding:10px 12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px;
  font-size:14px;
}
.owner-name{
  font-weight: 800; color: #111827; padding: 4px 10px; border-radius: 8px;
  background-color: var(--bg, #e5e7eb); transition: background 0.3s ease;
}
.owner-metric{ color:#374151; }
.owner-metric b{ color:#111827; }

/* ========== 요청 접수: 탭 버튼(가로 ㅁㅁㅁㅁ) ========== */
.req-tabs {
  display: flex;
  gap: 10px;
  margin: 0 0 12px 3rem;
}
.req-tab {
  min-width: 96px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #111827;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.req-tab:hover { background: #e5e7eb; border-color: #cbd5e1; }
.req-tab:active { transform: translateY(1px); }
.req-tab:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
.req-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }

/* ========== 요청 접수: 세로 정렬 폼 (한 줄 라벨/입력) ========== */
.vertical-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 680px;
  margin-left: 3rem;
  margin-top: 1rem;
  padding: 1.2rem 1.5rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.form-row {
 display: grid;
 grid-template-columns: 140px 420px;
 align-items: center;
 column-gap: 16px;
}
.form-label {
  font-weight: 600;
  color: #333;
  justify-self: end;
}
.form-row input,
.form-row select {
  width: 100%;
  flex-grow: 1;
  height: 40px;
  padding: 0.45rem 0.6rem;
  border: 1px solid #cfd4dc;
  border-radius: 6px;
  font-size: 0.95rem;
  box-sizing: border-box;
  background: #fff;
}
.form-actions {
  display: grid;
  grid-template-columns: 140px 420px;
  margin: 8px 0 0 3rem;
}
.form-actions > * { grid-column: 2; justify-self: end; }
.form-actions button {
  padding: 0.6rem 1.4rem;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.form-actions button:hover { background: #1e40af; }

/* 반응형(좁은 화면) */
@media (max-width: 640px) {
  .req-tabs { margin-left: 0; flex-wrap: wrap; }
  .vertical-form { margin-left: 0; max-width: 100%; }
  .form-row, .form-actions { grid-template-columns: 1fr; }
  .form-label { justify-self: start; margin-bottom: 6px; }
  .form-actions { margin-left: 0; }
}

/* 종료일 자동 계산 버튼 (요청 폼용) */
.date-helper-btn {
  background: #e5e7eb;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 8px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  height: 28px;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.date-helper-btn:hover { background: #d1d5db; border-color: #cbd5e1; }
.date-helper-btn:active { transform: translateY(1px); }
.form-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%; /* ✅ <--- 이 한 줄만 추가하면 됩니다 */
}

/* 기준일 라벨 */
.ref-date {
  margin: 0 0 8px 3rem;
  color: #6b7280;
  font-size: 14px;
}
.ref-date #refDateLabel strong { color: #111827; }

/* ========================================= */
/* ✅ [신규] 상단 가로 타이머바 스타일        */
/* ========================================= */

/* 헤더 영역 (로고 옆 빈 공간 활용) */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 양끝 정렬 */
  padding: 0 20px;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 타이머들이 들어갈 가로 컨테이너 */
#headerTimerBar {
  display: flex;
  gap: 10px;
  flex: 1; /* 남은 공간 차지 */
  justify-content: flex-end; /* 오른쪽 정렬 */
  align-items: center;
  padding-right: 20px;
  overflow: hidden;
}

/* 개별 타이머 카드 (가로형) */
.timer-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px; /* 알약 모양 */
  color: white;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  white-space: nowrap;
  transition: all 0.3s ease;
}
.timer-chip.urgent { background: #dc2626; animation: pulse-red 2s infinite; } /* 10분 미만: 빨강 */
.timer-chip.normal { background: #f59e0b; } /* 기본: 주황 */

@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* 마감 리스트 버튼 (우측 상단 고정) */
#closedListBtn {
  background: #374151;
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
#closedListBtn:hover { background: #1f2937; }

/* ========================================= */
/* ✅ [최종] 정산 테이블 스타일 (v3) */
/* ========================================= */

.stl-wrap {
 background:#fff; border-radius:12px; box-shadow:0 3px 8px rgba(0,0,0,0.08);
 overflow:auto; padding:8px;
}

/* 1. 테이블 최소 너비를 강제로 900px로 줄임 */
.stl-table { 
  width:100%; 
  border-collapse:collapse; 
  min-width: 900px !important; 
  color:#111; 
}

/* 2. 헤더(th)와 셀(td)의 여백(padding) 줄임 */
.stl-table thead th {
 position: sticky; top: 0; z-index: 1;
 background:#f3f4f6; color:#111; font-weight:800;
 border-bottom:1px solid #e5e7eb; 
  padding: 10px 4px !important; 
  white-space:nowrap;
}
.stl-table tbody td { 
  border-bottom:1px solid #f1f5f9; 
  padding: 6px 4px !important; 
  white-space:nowrap; 
}

/* 3. 체크박스 컬럼 너비 강제 지정 */
.stl-table th.sel,
.stl-table td.sel {
 width: 20px !important; 
 padding: 0 !important; 
}
/* (중요) 체크박스 input 자체의 크기 */
.stl-table th.sel input[type="checkbox"],
.stl-table td.sel input[type="checkbox"] {
  width: 14px !important;  /* 👈 (강제) */
  height: 14px !important; /* 👈 (강제) 높이 34px 버그 수정 */
  padding: 0;
  margin: 0;
}

/* 4. input/select 기본 너비 및 크기 강제 수정 */
.stl-table input, 
.stl-table select {
 width: 100px !important;      
 min-width: 50px !important;   
  flex: none !important;        
 height: 34px !important;      
 padding: 6px 5px !important;  
 border: 1px solid #cfd4dc; 
  border-radius: 6px; 
  box-sizing: border-box; 
  color:#111; 
  background:#fff;
}

/* 5. 개별 input 너비 강제 덮어쓰기 */
.stl-table input[type="date"]{ 
  width: 115px !important; 
}
.stl-table input[type="number"]{ 
  text-align:right;
  width: 80px !important;  
}
.stl-table input[data-k="owner"] {
  width: 80px !important;  
}
.stl-table input[data-k="inflow"] {
  width: 70px !important;  
}
.stl-table input[data-k="runDays"] {
  width: 100px !important;  
}
.stl-table input[data-k="depositTotal"] {
  width: 70px !important;  
}
.stl-table select[data-k="requestType"] {
  width: 110px !important; 
}
/* (신규) 업체명 헤더/input 너비 늘리기 */
.stl-table th:nth-child(15), /* 15번째 헤더 */
.stl-table input[data-k="company"] {
  width: 120px !important; /* 👈 업체명 너비 증가 */
}
/* (수정) 작업/환불일수 헤더 너비 살짝 조정 */
.stl-table th#thRunDays {
  width: 80px !important;
}


/* --- (이하는 기존 코드와 동일) --- */
.stl-table .muted { color:#6b7280; }
.stl-table .num { text-align:right; font-variant-numeric: tabular-nums; }
.stl-table .neg { color:#b91c1c; font-weight:700; }
.stl-table .pos { color:#065f46; font-weight:700; }
.stl-table .row-actions button {
 background:#e5e7eb; color:#111; border:none; padding:6px 10px; border-radius:6px; cursor:pointer;
}
.stl-table .row-actions button:hover { background:#1e40af; color:#fff; }

/* 합계 카드 숫자 굵게 */
#sumProductTotal, #sumDepositTotal, #sumCommission, #sumFee {
  font-size:16px; font-weight:700;
}

/* [추가] 담당자 수수료 카드(여러 줄) 폰트/줄간격 조정 */
#sumCommission {
  font-size: 14px;  /* 16px -> 14px로 줄임 */
  line-height: 1.6; /* 줄간격 추가 */
  padding-top: 14px;    /* 위쪽 여백 */
  padding-bottom: 14px; /* 아래쪽 여백 */
}

/* (호환) 일부 구 코드에서 쓰던 클래스 */
.negative { color:#dc2626; font-weight:700; }

/* 정산 필터 결과 수 강조 */
#stlFilterCount { font-variant-numeric: tabular-nums; }

/* 정산 탭 툴바 그룹 */
.tool-row {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ===== 슬롯 목록: 키워드 미입력 행 강조 (특이성 ↑ & 중복 제거) ===== */
#list .itemRow.no-keyword {
  background: #f9fafb !important;
  border-left-color: #9ca3af !important;
}
/* === Settlement: ultra-compact selection column (final) === */
.stl-table th.sel,
.stl-table td.sel {
  width: 20px;                  /* 더 타이트 */
  padding: 0 !important;        /* 여백 완전 제거 (덮어쓰기 방지) */
  text-align: center;
  vertical-align: middle;
}

/* 선택 칸 안의 체크박스만 사이즈 지정 (전역 규칙과 충돌 방지) */
.stl-table th.sel input[type="checkbox"],
.stl-table td.sel input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;                    /* 좌우 여백 0 */
  padding: 0;
  position: relative;
  top: 1px;   /* 렌더링 보정 */
  vertical-align: middle;
}

/* (선택) 전역 체크박스 크기 규칙이 있다면 주석처리하거나 삭제
   .stl-table input[type="checkbox"] { width:16px; height:16px; } */

/* 슬롯 목록: 키워드 미입력 행 강조 (유지) */
#list .itemRow.no-keyword {
  background: #f9fafb !important;
  border-left-color: #9ca3af !important;
}

/* ===== Notices & RewardSpec: 카테고리/팝업 공통 ===== */

/* 상단 카테고리 액션 라인 (두 탭 공용) */
.ntc-cat-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.ntc-cat-actions input[type="text"] { width: 260px; }

/* 카테고리 그리드(공지:#ntcGrid / 스펙:#rwdGrid) */
#ntcGrid, #rwdGrid { display: flex; flex-wrap: wrap; gap: 8px; }
#ntcGrid .ntc-cat, #rwdGrid .ntc-cat { width: 140px; } /* 고정 폭 카드 */
#ntcGrid .ntc-cat-btn,
#rwdGrid .ntc-cat-btn {
  width: 100%; height: 40px; display: block;
  padding: 8px 10px; border-radius: 8px;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid #E5E7EB;
  background: #F5F3FF;      /* 파스텔 라벤더 */
  color: #111;              /* 검정 글자 */
  font-weight: 600;
  cursor: pointer;
}
#ntcGrid .ntc-cat-btn:hover,
#rwdGrid .ntc-cat-btn:hover { filter: brightness(0.97); }
#ntcGrid .dragging, #rwdGrid .dragging { opacity: 0.6; }   /* 드래그 중 투명 처리 */

/* 모달(팝업) 기본 레이아웃 (공통) */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 11000 !important; /* ✅ 헤더(1000)보다 훨씬 높게 설정 */
}
.modal-content {
  width: min(920px, 92vw);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.modal-header, .modal-footer {
  padding: 12px 16px;
  background: #f8fafc;
  display: flex; align-items: center; justify-content: space-between;
}
.modal-body { padding: 16px; max-height: 70vh; overflow: auto; }
.icon-btn { background: none; border: none; font-size: 22px; cursor: pointer; }

/* 페이지 show/hide (공통) */
.page { display: none; }
.page.current { display: block; }

/* 리스트/페이지네이터 (공통 클래스 그대로 사용) */
.ntc-pager-line { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.ntc-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
#ntcList .ntc-title,
#rwdList .ntc-title {
  width: 100%;
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  border: 1px solid #E5E7EB; border-radius: 10px;
  background: #F3F4F6;      /* 옅은 회색 배경 */
  color: #111;              /* 검정 글자 */
  cursor: pointer;
}
#ntcList .ntc-title:hover,
#rwdList .ntc-title:hover { background: #E5E7EB; }

/* 본문(우측) — 두 탭 공용 */
.ntc-content {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed #E5E7EB; border-radius: 8px;
  min-height: 80px;
  white-space: pre-wrap;
  line-height: 1.6;
}
#ntcContent .ntc-view h4, #rwdContent .ntc-view h4 { color: #111; }
#ntcContent .muted, #rwdContent .muted { color: #6B7280; }

/* 버튼 프리셋 (공통) */
.btn { border: 1px solid #E5E7EB; background: #fff; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.btn.primary {
  background: #93C5FD;   /* 밝은 파란색 */
  color: #fff;
  border: 1px solid #60A5FA;
  padding: 8px 12px; border-radius: 8px;
  font-weight: 700;
}
.btn.primary:hover { filter: brightness(0.98); }
.btn.danger  { background: #ef4444; color: #fff; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; }

/* 레이아웃 유틸(한 번만 선언) */
.spacer { flex: 1; }
.muted  { color: #6b7280; }
.req    { color: #ef4444; margin-left: 4px; }

/* 팝업 우상단 닫기(X) 버튼 — 회색 배경 + 검정 글자 */
#ntcClose, #rwdClose {
  background: #E5E7EB;
  color: #111;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
}
#ntcClose:hover, #rwdClose:hover { filter: brightness(0.96); }

/* 좌상단 화살표(뒤로가기) 후보 — 존재하는 요소에만 적용 */
#ntcBack, #ntcBackBtn, .ntc-back,
#rwdBack, #rwdBackBtn, .rwd-back {
  background: #F3F4F6;
  color: #111;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1;
}
#ntcBack:hover, #ntcBackBtn:hover, .ntc-back:hover,
#rwdBack:hover, #rwdBackBtn:hover, .rwd-back:hover { background: #E5E7EB; }

/* === 팝업 주요 버튼 컬러 (공지/스펙 동기화) === */

/* 새 공지/항목 & 수정 버튼 — 진파랑 */
#ntcWriteBtn, #ntcEditBtn,
#rwdWriteBtn, #rwdEditBtn {
  background: #2563EB;
  color: #fff;
  border: 1px solid #1D4ED8;
  border-radius: 10px;
  font-weight: 700;
}
#ntcWriteBtn:hover, #ntcEditBtn:hover,
#rwdWriteBtn:hover, #rwdEditBtn:hover { filter: brightness(1.05); }

/* 정렬 버튼 — 옅은 회색 + 검정 글자 */
#ntcOrderModeBtn, #rwdOrderModeBtn {
  background: #F3F4F6;
  color: #111;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
}
#ntcOrderModeBtn:hover, #rwdOrderModeBtn:hover { background: #E5E7EB; }

/* 카테고리 추가 버튼 — 진파랑 */
#ntcCatAddBtn, #rwdCatAddBtn {
  background: #2563EB;
  color: #fff;
  border: 1px solid #1D4ED8;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
#ntcCatAddBtn:hover, #rwdCatAddBtn:hover { filter: brightness(1.05); }

/* === 탭 헤더 여백 조정 (두 탭 동일) === */
#page-notices .page-header h2,
#page-reward-spec .page-header h2 {
  margin-left: 12px;
}
/* ===== Splash / Login ===== */
.splash {
  position: fixed;
  inset: 0;
  background: #fff;
  display: grid;
  place-items: start center;
  padding-top: 12vh; /* 중앙보다 살짝 위 */
}

#splashTitle {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  color: #111827;
}

.login-card {
  width: min(420px, 92vw);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.06);
  padding: 22px 20px;
}

.login-card .field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.login-card label {
  font-size: 13px;
  color: #374151;
}

.login-card input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  outline: none;
}

.login-card input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.login-card .primary {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.login-card .primary:hover {
  opacity: .95;
}

.login-msg {
  margin-top: 10px;
  min-height: 18px;
  color: #ef4444;
  font-size: 12px;
}
/* ================================== */
/* ✅ [추가] 슬롯 목록 체크박스 스타일 */
/* ================================== */

/* 1. 체크박스를 담는 칸 (cell-check) 정렬 */
.cell.cell-check {
  display: grid;
  place-items: center;
  padding: 0;
}

/* 2. [재수정] 체크박스(input) 자체의 크기와 모양 */
/* 'all: unset;' 대신, 문제가 되는 'min-width', 'flex', 'padding'만 덮어씁니다. */
.itemRow input[type="checkbox"].item-check {
  
  /* ▼ 전역 input 스타일 덮어쓰기 ▼ */
  min-width: 16px;   /* 👈 140px를 16px로 덮어쓰기 */
  flex: none;        /* 👈 flex: 1을 덮어쓰기 */
  padding: 0;      /* 👈 (중요) 전역 padding 덮어쓰기 */
  
  /* ▼ 체크박스 고유 크기 및 모양 ▼ */
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #1e40af; /* (선택) 체크 시 파란색 */

  /* (참고) all: unset; 과 background: #fff; 를 제거했습니다.
     이제 브라우저 기본 체크 모양이 보여야 합니다. */
}

/* (참고: 이 아래에 있던 '정산 탭' 관련 중복 코드는 모두 삭제되었습니다.) */

/* --- ▼ 개별 컬럼 헤더(th) + 입력칸(input) 너비 동시 지정 ▼ --- */

/* 4. 체크박스 (헤더와 셀을 동시에 조절) */
.stl-table th.sel,
.stl-table td.sel {
  width: 20px; 
  padding: 0 !important;
}
/* 체크박스 input 자체의 크기 (기존 코드) */
.stl-table th.sel input[type="checkbox"],
.stl-table td.sel input[type="checkbox"] {
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
}

/* 5. 요청일 (헤더와 input을 동시에 115px로) */
.stl-table th:nth-child(2), /* 2번째 헤더 */
.stl-table input[data-k="requestedAt"] {
  width: 115px;
}

/* 6. 담당자 (헤더와 input을 동시에 80px로) */
.stl-table th:nth-child(3), /* 3번째 헤더 */
.stl-table input[data-k="owner"] {
  width: 80px; 
}

/* 7. 상품 (조금 넓게 120px) */
.stl-table th:nth-child(4), /* 4번째 헤더 */
.stl-table input[data-k="product"] {
  width: 120px; 
}

/* 8. 유입수 (헤더와 input을 동시에 70px로) */
.stl-table th:nth-child(5), /* 5번째 헤더 */
.stl-table input[data-k="inflow"] {
  width: 70px; 
}

/* 9. 작업일수/환불일수 (헤더와 input을 동시에 70px로) */
.stl-table th#thRunDays, /* ID로 헤더 선택 */
.stl-table input[data-k="runDays"] {
  width: 70px; 
}

/* 10. 요청구분 (헤더와 select를 동시에 110px로) */
.stl-table th:nth-child(10), /* 10번째 헤더 */
.stl-table select[data-k="requestType"] {
  width: 110px;      
}

/* 11. 입금총액 (헤더와 input을 동시에 70px로) */
.stl-table th:nth-child(14), /* 14번째 헤더 */
.stl-table input[data-k="depositTotal"] {
  width: 70px; 
}
/* ========================================
   ✅ [추가] Select2 테마 오버라이드 (스타일 맞추기)
   ======================================== */

/* * 1. Select2 박스 자체의 높이와 테두리를
 * .form-row input, .form-row select 와 동일하게 맞춥니다.
 */
.form-field .select2-container .select2-selection--single {
  height: 40px !important;
  border: 1px solid #cfd4dc !important;
  border-radius: 6px !important;
}

/* * 2. 선택된 항목(글자)이 박스 중앙에 오도록 
 * (기존 input의 padding 값 적용)
 */
.form-field .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  padding-left: 0.6rem !important;
  padding-right: 20px !important; /* 글자가 화살표를 덮지 않도록 */
  color: #111827;
  font-size: 0.95rem;
}

/* * 3. 드롭다운 화살표가 박스 중앙에 오도록 
 */
.form-field .select2-container .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}

/* ======================================== */
/* ✅ [신규] 계정 관리 (Admin)                 */
/* ======================================== */

/* price-row 내부의 삭제 버튼 스타일 (기존 .price-row button과 동일) */
#userListBody .user-del-btn {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 13px; /* 폰트 크기 통일 */
  font-weight: 500; /* 폰트 두께 통일 */
}
#userListBody .user-del-btn:hover {
  background: #dc2626;
}

/* 계정 생성 폼: 레이아웃이 깨지지 않도록 */
.filters .field {
  display: flex;
  flex-direction: column;
}
.filters .field input,
.filters .field select {
  min-width: 120px; /* 최소 너비 보장 */
}

/* 권한 배지 (기존 .badge.running / .badge.ended 재활용) */
#userListBody .badge.running {
  font-size: 11px; /* 폰트 살짝 작게 */
}
#userListBody .badge.ended {
  font-size: 11px;
}

/* ======================================== */
/* ✅ [신규] 계정 수정 모달 폼 스타일          */
/* ======================================== */

.user-edit-form {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
}

.user-edit-form .form-label {
  font-weight: 600;
  justify-self: end;
}

.user-edit-form input,
.user-edit-form select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-weight: 500;
  font-size: 14px;
}

/* ======================================== */
/* ✅ [신규] 계정 관리 버튼 스타일          */
/* ======================================== */

/* [신규] 수정 버튼 스타일 (파란색) */
#userListBody .user-edit-btn {
  background: #1e40af;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 8px; /* 수정 버튼 폭 */
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
#userListBody .user-edit-btn:hover {
  background: #1d4ed8;
}

/* ======================================== */
/* ✅ [신규] 단가 정리 (Admin)                 */
/* ======================================== */

/* price-row 내부의 삭제 버튼 스타일 (기존 .price-row button과 동일) */
#plListBody .pl-del-btn {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
#plListBody .pl-del-btn:hover {
  background: #dc2626;
}

/* ======================================== */
/* ✅ [신규] 메인 페이지 2단 레이아웃         */
/* ======================================== */

.main-layout-wrapper {
  display: flex;
  flex-wrap: wrap; /* 좁은 화면에서 줄바꿈 */
  gap: 20px;
  margin: 0 20px 20px 20px; /* 상단 카드(.cards)와 동일한 여백 적용 */
}

.main-col-left {
  flex: 6; /* 왼쪽 컬럼 (약 60% 비율) */
  min-width: 450px; /* 좁아질 때 최소 너비 */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 담당자 요약 카드와 오늘 종료 카드 사이의 간격 */
}

.main-col-right {
  flex: 4; /* 오른쪽 컬럼 (약 40% 비율) */
  min-width: 300px; /* 좁아질 때 최소 너비 */
}

/* [중요] 
  기존 카드(.owner-summary-card, .today-card)가 
  margin: 20px를 가지고 있었습니다.
  새로운 flex 래퍼의 gap을 사용하기 위해 이 margin을 0으로 덮어씁니다.
*/
.owner-summary-card,
.today-card {
  margin: 0;
}

/* ======================================== */
/* ✅ [신규] 메인 페이지 - 이번달 요약 카드    */
/* ======================================== */

.summary-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  padding: 16px 20px;
}

.summary-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 10px;
  font-size: 1.1rem;
}

.summary-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-row span {
  color: #374151;
  font-weight: 500;
}
.summary-row strong {
  color: #111827;
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.summary-hr {
  border: none;
  border-top: 1px dashed #d1d5db;
  margin: 4px 0;
}

.summary-row.highlight strong {
  color: #1e40af; /* 파란색 강조 */
  font-size: 1.25rem;
}

/* ======================================== */
/* ✅ [신규] 메인 페이지 - 신규 알람 카드     */
/* ======================================== */

.alarm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 12px 14px;
  border-radius: 10px;
}

.alarm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #111827;
}

.alarm-icon {
  font-size: 1.2rem;
}

.alarm-count {
  font-size: 1.15rem;
  font-weight: 800;
  color: #b91c1c; /* 빨간색 강조 */
  font-variant-numeric: tabular-nums;
}
/* [신규] 안 읽은 공지 알람 카운트 (파란색) */
#alarmUnreadNoticesCount {
  color: #1e40af; /* 파란색 */
}
/* [신규] 알람 미리보기 (제목...) */
.alarm-preview {
  font-size: 13px;
  color: #6b7280;
  padding: 8px 14px 0 14px;
  line-height: 1.5;
  border-top: 1px solid #f3f4f6;
  margin-top: 10px;
}
.alarm-preview-item {
  display: inline;
  margin-right: 6px;
  padding: 2px 4px;
  background: #f3f4f6;
  border-radius: 4px;
}

/* [신규] 안 읽은 공지 팝업 (모달) */
.unread-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
}
.unread-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background 0.1s ease;
}
.unread-list-item:hover {
  background: #f9fafb;
}
.unread-list-item:first-child {
  border-top: 1px solid #e5e7eb;
}
.unread-list-item .title {
  font-weight: 600;
  color: #111827;
}
.unread-list-item .date {
  font-size: 13px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}
/* [신규] 안 읽은 리워드 알람 카운트 (초록색) */
#alarmUnreadRewardsCount {
  color: #059669; /* 에메랄드 그린 */
}

/* [신규] 요청 처리 버튼 스타일 */
.btn-proc {
  padding: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-proc:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
/* [신규] 요청 처리 버튼 스타일 */
.btn-proc {
  padding: 10px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-proc:hover {
  background: #e5e7eb;
}
.btn-proc.selected {
  background-color: #1e40af; /* 선택 시 파란색 */
  color: white;
  border-color: #1e40af;
}
/* [신규] 처리 완료 요청 알람 카운트 (강한 파란색) */
#alarmCompletedRequestsCount {
  color: #1e40af; 
}
/* ========================================= */
/* ✅ [신규] 공지/리워드 탭 (대/소 카테고리)  */
/* ========================================= */

/* --- 1. 상단 2단 폼 래퍼 --- */
.cat-forms-wrapper {
  margin: 0 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
}
.cat-forms-wrapper .ntc-cat-actions {
  margin: 0; /* 기존 여백 제거 */
}
.cat-forms-wrapper .ntc-cat-actions strong {
  min-width: 180px; /* 라벨 정렬 */
}

/* --- 2. 대 카테고리 그룹 래퍼 (내부 여백 조정) --- */
.cat-group-wrapper {
  margin-bottom: 0; /* ✅ 세로 마진 제거 */
  padding-bottom: 20px; /* 그룹 내 세로 여백 확보 */
}
.cat-group-wrapper:last-child {
  padding-bottom: 0;
}

/* --- 3. 대 카테고리 제목 (예: "쇼핑 리워드") --- */
h2.cat-group-title {
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
  font-size: 1.25rem;
  color: #111;
  border-bottom: 2px solid #e5e7eb;
}

/* --- 4. 소 카테고리 그리드 --- */
.cat-sub-grid {
  display: grid;
  gap: 8px;
}

/* --- 5. 공지사항 (5열) / 리워드 (6열) --- */
/* --- [수정] ntcGrid와 rwdGrid를 2/3열 그리드로 변경 --- */
#ntcGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ✅ 공지 탭은 2열로 부모 그룹 분할 */
  gap: 30px 20px; /* 세로/가로 간격 */
  margin: 0 20px;
}
#rwdGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ✅ 리워드 탭은 3열로 부모 그룹 분할 */
  gap: 30px 20px;
  margin: 0 20px;
}

/* --- [수정] 기존 그리드 CSS 덮어쓰기 --- */
/* (이제 그리드 항목이 대제목 래퍼 안에 있으므로 #ntcGrid 직접 선택자 제거) */
.cat-sub-grid .ntc-cat {
  width: 100%;
}
.cat-sub-grid .ntc-cat-btn {
  width: 100%; height: 40px; display: block;
  padding: 8px 10px; border-radius: 8px;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid #E5E7EB;
  background: #F5F3FF;
  color: #111;
  font-weight: 600;
  cursor: pointer;
}
.cat-sub-grid .ntc-cat-btn:hover { 
  filter: brightness(0.97); 
}

/* --- [기존] ntcGrid 자체의 여백 (기존 5열/6열 코드 제거) --- */
#ntcGrid, #rwdGrid {
  display: block; /* display: grid/flex 제거 */
  margin: 0 20px; /* 좌우 여백 */
}

/* --- [신규] 최종 컬럼 헤더 스타일 --- */
.ntc-cat-cell {
    padding: 2px 0 2px 12px; /* ✅ 좌측 12px 패딩 추가 */
    min-height: 40px; 
}
/* ✅ [신규] 자식 카테고리 2열 컨테이너 */
.ntc-two-col-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1 비율로 2열 분할 */
    gap: 8px; /* 버튼 사이의 간격 */
}

.ntc-cat-dummy {
    /* 버튼이 하나만 있을 때 빈 공간을 차지할 더미 요소 */
    visibility: hidden;
    height: 40px; /* 버튼과 동일한 높이 유지 */
}
.ntc-empty-cell {
    /* 빈 셀은 배경색을 없애고 높이를 유지 */
    background: none !important;
    visibility: hidden;
}

.cat-column-header {
    font-weight: 800;
    font-size: 1.1rem;
    color: #1e3a8a; /* 헤더 색상 */
    margin-bottom: 15px;
    padding: 10px 0 10px 12px; /* ✅ 좌측 12px 패딩 추가 */
    border-bottom: 2px solid #e5e7eb;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ========================================= */
/* ✅ [신규] 대행사 정산 카드 스타일 (최종)   */
/* ========================================= */

/* 컨테이너: 카드들이 꽉 차게 배치 */
#agencyCardsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* 반응형 그리드 */
  gap: 16px;
  padding: 0 20px 20px 20px;
}

.agency-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
}

/* 카드 헤더 (파란색 배경) */
.agency-card .ag-header {
  background: #5e5ce6; /* 파란-보라색 */
  color: white;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
}

/* 카드 본문 */
.agency-card .ag-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

/* ✅ [수정] 3단 그리드 레이아웃 (라벨 - 일수 - 값) */
.agency-card .ag-row {
  display: grid; 
  grid-template-columns: 60px 1fr 100px; /* [라벨] [가운데(일수)] [우측(값)] */
  align-items: center;
  color: #374151;
}

.agency-card .ag-label {
  text-align: left;
}

.agency-card .ag-days {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

.agency-card .ag-val {
  text-align: right;
  font-size: 15px;
  color: #111;
}

/* 구분선 */
.agency-card .ag-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0;
}

/* 금액 강조 행 */
.agency-card .ag-row.highlight {
  margin-top: 4px;
}
.agency-card .ag-row.highlight .ag-label,
.agency-card .ag-row.highlight .ag-val {
  color: #1e40af;
  font-weight: 800;
}
.agency-card .ag-row.highlight .ag-val {
  font-size: 17px;
}

/* 필터 영역 스타일 보정 */
.stl-ag-filters input[type="date"] {
  height: 36px;
}
/* ✅ [신규] 링크 모음용 3열 컨테이너 */
.ntc-three-col-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 1:1:1 비율로 3열 분할 */
    gap: 8px; /* 버튼 사이 간격 */
}

/* 버튼 크기 및 텍스트 정렬 개선 */
.ntc-three-col-buttons .ntc-cat-btn {
    width: 100%;
    min-width: 0;
    height: 48px;              /* ✅ 높이를 48px로 살짝 늘려 두 줄도 여유롭게 */
    
    /* ✅ 텍스트 중앙 정렬의 핵심 (Flexbox) */
    display: flex;
    align-items: center;       /* 세로 중앙 정렬 */
    justify-content: center;   /* 가로 중앙 정렬 */
    
    /* ✅ 텍스트 줄바꿈 설정 */
    white-space: normal;       /* 줄바꿈 허용 */
    word-break: keep-all;      /* 단어 중간이 뚝 끊기지 않게 설정 (한글 최적화) */
    line-height: 1.2;          /* 줄 간격을 좁게 하여 두 줄일 때도 보기 좋게 */
    font-size: 13px;           /* 글자 크기를 살짝 줄여 긴 단어도 한 줄에 잘 들어가게 */
    padding: 2px 4px;          /* 내부 여백을 줄여 글자 공간 확보 */
    text-align: center;
}

/* ========================================= */
/* ✅ [통합] 관리자 페이지 공통 테이블 스타일 */
/* ========================================= */

/* 테이블 전체 컨테이너 */
.admin-table-wrap {
  margin: 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  overflow: hidden; /* 둥근 모서리 유지 */
}

/* 헤더 & 데이터 행 공통 레이아웃 */
.admin-row {
  display: grid; /* 반드시 그리드로 배치 */
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  color: #374151;
}

/* 헤더 전용 스타일 */
.admin-header {
  background-color: #1e3a8a; /* 진한 남색 */
  color: #ffffff;
  font-weight: 700;
  border-bottom: 1px solid #1e3a8a;
}

/* 마우스 올렸을 때 효과 */
.admin-body .admin-row:hover {
  background-color: #f9fafb;
}

/* --- 각 페이지별 칸 비율 (Grid Columns) --- */

/* 1. 상품가 관리: 상품명(1.5) | 가격(1) | 마감시간(1) | 관리(140px) */
.cols-products { grid-template-columns: 1.5fr 1fr 1fr 140px; }

/* 2. 단가 정리: 매체사(1) | 상품명(1.5) | 공급가(1) | 셀러가(1) | 관리(100px) */
.cols-pricelist { grid-template-columns: 1fr 1.5fr 1fr 1fr 100px; }

/* 3. 계정 관리: ID | 아이디 | 이름 | 권한 | 수수료 | 생성일 | 관리(120px) */
.cols-users { grid-template-columns: 60px 1fr 1fr 100px 80px 160px 120px; }


/* --- 내부 텍스트 정렬 및 스타일 --- */
.admin-row > div {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}
.admin-row > div:first-child { 
  text-align: left; /* 첫 번째 칸(이름 등)은 왼쪽 정렬 */
  padding-left: 8px;
  font-weight: 600;
}

/* --- 버튼 스타일 --- */
.btn-group {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.mini-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: white;
  transition: opacity 0.2s;
}
.mini-btn:hover { opacity: 0.9; }

.btn-edit { background-color: #2563eb; } /* 파랑 */
.btn-del  { background-color: #ef4444; } /* 빨강 */

/* ========================================= */
/* ✅ 상단 헤더 (ABLE 로고 + 타이머 + 버튼) */
/* ========================================= */

#mainHeader {
  display: flex;            /* 내용물 가로 배치 */
  align-items: center;      /* 세로 중앙 정렬 */
  justify-content: space-between; /* 양쪽 끝으로 벌리기 */
  
  height: 60px;             /* 높이 고정 */
  width: 100%;              /* 너비 꽉 채우기 */
  
  background-color: #fff;   /* 배경 흰색 */
  border-bottom: 1px solid #e5e7eb; /* 하단 회색 선 */
  padding: 0 20px;          /* 좌우 여백 */
  box-sizing: border-box;   /* 테두리 포함 크기 계산 */
  
  /* 화면 맨 위에 고정 (스크롤 내려도 따라오게) */
  position: sticky;
  top: 0;
  z-index: 1000;            /* 다른 요소들보다 위에 뜨게 */
}

/* 타이머 영역 */
#headerTimerBar {
  flex: 1;                  /* 남은 공간 차지 */
  display: flex;
  align-items: center;
  gap: 10px;                /* 칩 사이 간격 */
  overflow-x: auto;         /* 내용 많으면 가로 스크롤 */
  padding: 0 20px;
  
  /* 스크롤바 숨기기 (크롬, 사파리, 엣지 등) */
  scrollbar-width: none;    /* 파이어폭스용 */
  -ms-overflow-style: none; /* IE, 엣지용 */
}
#headerTimerBar::-webkit-scrollbar {
  display: none;            /* 크롬, 사파리용 */
}

/* 마감 리스트 버튼 */
#closedListBtn {
  padding: 6px 12px;
  background-color: #374151; /* 진한 회색 */
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;       /* 줄바꿈 금지 */
  transition: background-color 0.2s;
}

#closedListBtn:hover {
  background-color: #1f2937; /* 마우스 올리면 더 진하게 */
}

/* ================================================== */
/* ✅ [추가] 출근부(Attendance) 전용 스타일 보정 */
/* ================================================== */

/* 1. 사이드바/헤더의 '출근부' 진입 버튼 (강제 파란색) */
#btnOpenSheet {
  background-color: #2563eb !important; /* 진한 파랑 */
  color: #ffffff !important;            /* 흰색 글씨 */
  border: 1px solid #1d4ed8 !important;
  opacity: 1 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  font-weight: 700;
}
#btnOpenSheet:hover {
  background-color: #1e40af !important; /* 마우스 올리면 더 진하게 */
}

/* 2. 팝업 내부 화살표(< >) 및 새로고침 버튼 (강제 진한 회색) */
#attPrevMonth, 
#attNextMonth, 
#attendanceSheetModal .btn {
  background-color: #f3f4f6; /* 연한 회색 배경 */
  color: #374151;            /* 진한 글자 */
  border: 1px solid #d1d5db; /* 진한 테두리 */
}
#attPrevMonth:hover, 
#attNextMonth:hover,
#attendanceSheetModal .btn:hover {
  background-color: #e5e7eb; /* 마우스 올리면 반응 */
  border-color: #9ca3af;
}

/* 3. 출근부 팝업 크기 대폭 확장 (가로 꽉 차게) */
/* 기존 .modal-content의 폭 제한(920px)을 이 팝업에서만 풉니다 */
#attendanceSheetModal .modal-content {
  width: 98vw !important;        /* 화면 너비의 98% */
  max-width: 1800px !important;  /* 최대 1800px까지 허용 */
  height: 92vh !important;       /* 높이도 시원하게 */
  display: flex;
  flex-direction: column;
}

/* 4. 출근부 테이블 가로 스크롤 & 고정 헤더 */
#attSheetBody td {
  vertical-align: middle; /* 셀 내용 수직 중앙 정렬 */
}
/* 토/일요일 색상 강조 */
#attSheetHead th:nth-child(n):has(span[style*="color:red"]),
#attSheetBody td:nth-child(n):has(div[style*="color:red"]) {
    background-color: #fef2f2; /* 일요일 연한 빨강 배경 */
}