/* ========================================
   HR매니저 - 모바일 우선 통합관리 앱
   ======================================== */

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #eff6ff;
  --secondary: #64748b;
  --success: #16a34a;
  --success-light: #f0fdf4;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --warning: #d97706;
  --warning-light: #fffbeb;
  --info: #0891b2;
  --info-light: #ecfeff;
  --bg: #f1f5f9;
  --bg-card: #ffffff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --text-main: #1e293b;
  --text-sub: #64748b;
  --text-light: #94a3b8;
  --header-h: 56px;
  --bottom-nav-h: 64px;
  --sidebar-w: 270px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
  --transition: 0.2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 14px; }
body {
  font-family: 'Noto Sans KR', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-main);
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ========= 로딩 ========= */
#loading-screen {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity .5s;
}
.loading-inner { text-align: center; color: white; }
.loading-logo {
  font-size: 3rem; margin-bottom: 1rem;
  animation: pulse 1.5s ease-in-out infinite;
}
.loading-title { font-size: 1.8rem; font-weight: 700; }
.loading-sub { font-size: .9rem; opacity: .8; margin: .3rem 0 1.5rem; }
.loading-spinner {
  width: 40px; height: 40px; border: 3px solid rgba(255,255,255,.3);
  border-top-color: white; border-radius: 50%;
  animation: spin .8s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* ========= 로그인 ========= */
#login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 60%, #3b82f6 100%);
  padding: 1rem;
  z-index: 1000;
}
.login-card {
  background: white; border-radius: 20px;
  padding: 2rem 1.8rem; width: 100%; max-width: 380px;
  box-shadow: var(--shadow-lg);
}
.login-logo { text-align: center; margin-bottom: 1.5rem; }
.login-logo i { font-size: 2.5rem; color: var(--primary); }
.login-logo h1 { font-size: 1.6rem; font-weight: 700; color: var(--text-main); }
.login-logo p { font-size: .85rem; color: var(--text-sub); margin-top: .3rem; }
.role-label { font-size: .8rem; color: var(--text-sub); margin-bottom: .5rem; text-align: center; }
.role-buttons { display: flex; gap: .6rem; margin-bottom: 1.2rem; }
.role-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem; border: 2px solid var(--border); border-radius: var(--radius-sm);
  background: white; cursor: pointer; font-size: .9rem; font-weight: 500;
  transition: var(--transition); color: var(--text-sub);
}
.role-btn.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.role-btn i { font-size: 1rem; }
.login-form { margin-bottom: 1rem; }
.login-demo-hint {
  text-align: center; font-size: .78rem; color: var(--text-light);
  margin-top: .8rem;
}

/* ========= 앱 레이아웃 ========= */
#app { min-height: 100dvh; display: flex; flex-direction: column; }

/* 헤더 */
#app-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: white; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 .8rem;
  z-index: 100; box-shadow: var(--shadow);
}
.header-icon-btn {
  width: 40px; height: 40px; border: none; background: transparent;
  border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--text-main); transition: background var(--transition);
}
.header-icon-btn:hover { background: var(--bg); }
.header-title {
  flex: 1; text-align: center; font-size: 1rem; font-weight: 700;
  color: var(--text-main);
}
.header-right { display: flex; align-items: center; gap: .4rem; }
.role-badge {
  font-size: .7rem; padding: .2rem .5rem; border-radius: 20px; font-weight: 600;
}
.admin-badge { background: #fee2e2; color: #dc2626; }
.emp-badge { background: #dbeafe; color: #2563eb; }

/* 사이드바 */
#sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 200; backdrop-filter: blur(2px);
}
#sidebar {
  position: fixed; top: 0; left: -280px; bottom: 0;
  width: var(--sidebar-w); background: white;
  z-index: 300; transition: left .3s ease;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); overflow-y: auto;
}
#sidebar.open { left: 0; }
.sidebar-header {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  padding: 1.2rem 1rem 1rem; color: white;
}
.sidebar-logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.1rem; }
.sidebar-logo i { font-size: 1.4rem; }
.sidebar-company { font-size: .78rem; opacity: .85; margin-top: .3rem; }
.sidebar-user {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem; border-bottom: 1px solid var(--border);
}
.user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.user-name { font-weight: 600; font-size: .95rem; }
.user-role { font-size: .78rem; color: var(--text-sub); }
.sidebar-menu { list-style: none; padding: .5rem 0; flex: 1; }
.sidebar-menu li a, .menu-section-title {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.2rem; color: var(--text-sub);
  text-decoration: none; font-size: .9rem;
  transition: background var(--transition);
  cursor: pointer; border-radius: 0;
}
.sidebar-menu li a:hover { background: var(--bg); color: var(--primary); }
.sidebar-menu li a.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.sidebar-menu li a i { width: 18px; text-align: center; font-size: .95rem; }
.menu-section-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  color: var(--text-light); letter-spacing: .05em;
  padding: 1rem 1.2rem .4rem; cursor: default;
}

/* 메인 컨텐츠 */
#main-content {
  margin-top: var(--header-h);
  padding-bottom: calc(var(--bottom-nav-h) + 1rem);
  min-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}

/* 하단 네비게이션 */
#bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  background: white; border-top: 1px solid var(--border);
  display: flex; z-index: 100;
  box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
.bottom-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .15rem; border: none; background: transparent;
  cursor: pointer; color: var(--text-sub); font-size: .65rem; font-family: inherit;
  padding: .4rem .2rem; transition: color var(--transition);
}
.bottom-nav-btn i { font-size: 1.1rem; transition: transform .2s; }
.bottom-nav-btn.active { color: var(--primary); }
.bottom-nav-btn.active i { transform: scale(1.15); }

/* ========= 페이지 공통 ========= */
.page { padding: .8rem; animation: fadeIn .25s ease; }
.page.hidden { display: none; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding: 0 .2rem;
}
.page-header h2 { font-size: 1.2rem; font-weight: 700; color: var(--text-main); }

.date-nav { display: flex; align-items: center; gap: .4rem; }
.date-nav span { font-size: .9rem; font-weight: 600; color: var(--text-main); min-width: 100px; text-align: center; }

/* ========= 카드 ========= */
.card {
  background: white; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1rem;
}
.card-header {
  padding: .9rem 1rem .6rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
}
.card-header h3 { font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.card-header h3 i { color: var(--primary); }
.card-badge {
  font-size: .75rem; padding: .2rem .6rem; background: var(--primary-light);
  color: var(--primary); border-radius: 20px; font-weight: 600;
}

/* ========= 요약 카드 ========= */
.summary-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1rem;
}
.summary-card {
  background: white; border-radius: var(--radius); padding: 1rem .9rem;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: .8rem;
  min-width: 0; overflow: hidden;
}
.summary-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  flex-shrink: 0;
}
.summary-info { min-width: 0; }
.summary-value { font-size: 1.3rem; font-weight: 700; color: var(--text-main); line-height: 1.2; }
.summary-label { font-size: .72rem; color: var(--text-sub); margin-top: .1rem; }
.bg-blue { background: #dbeafe; color: #2563eb; }
.bg-green { background: #dcfce7; color: #16a34a; }
.bg-orange { background: #ffedd5; color: #ea580c; }
.bg-purple { background: #ede9fe; color: #7c3aed; }

/* ========= 대시보드 그리드 ========= */
.dashboard-grid { display: flex; flex-direction: column; gap: 0; }
.chart-area { padding: .8rem; min-height: 140px; }

.attendance-legend { display: flex; flex-wrap: wrap; gap: .4rem .8rem; padding: 0 1rem .8rem; }
.legend-item { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--text-sub); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-dot.bg-success { background: var(--success); }
.legend-dot.bg-danger { background: var(--danger); }
.legend-dot.bg-primary { background: var(--primary); }
.legend-dot.bg-warning { background: var(--warning); }
.legend-dot.bg-gray { background: #94a3b8; }

.leave-list, .payroll-list, .approval-list { padding: .6rem 1rem .8rem; }
.leave-item, .payroll-item, .approval-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 0; border-bottom: 1px solid var(--border-light);
  font-size: .85rem;
}
.leave-item:last-child, .payroll-item:last-child, .approval-item:last-child { border-bottom: none; }
.leave-name { font-weight: 600; }
.leave-days { color: var(--success); font-weight: 700; }
.leave-days.low { color: var(--warning); }
.leave-days.zero { color: var(--danger); }

/* ========= 검색/필터 바 ========= */
.search-filter-bar {
  display: flex; gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap;
}
.search-box {
  flex: 1; min-width: 180px; display: flex; align-items: center; gap: .4rem;
  background: white; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .5rem .8rem;
}
.search-box i { color: var(--text-light); font-size: .9rem; }
.search-box input { border: none; outline: none; flex: 1; font-size: .9rem; font-family: inherit; }
.filter-select {
  padding: .5rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: white; font-size: .85rem; font-family: inherit; color: var(--text-main);
  outline: none; cursor: pointer;
}

/* ========= 테이블 ========= */
.table-container {
  overflow-x: auto; margin: 0 -.8rem;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%; border-collapse: collapse; white-space: nowrap; font-size: .82rem;
}
.data-table th {
  background: #f8fafc; color: var(--text-sub); font-weight: 600;
  padding: .75rem .8rem; text-align: left; font-size: .78rem;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1;
  vertical-align: middle; line-height: 1.5;
}
.data-table td {
  padding: .75rem .8rem; border-bottom: 1px solid var(--border-light);
  color: var(--text-main); vertical-align: middle; line-height: 1.5;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f8fafc; }
.data-table tfoot td {
  background: #f0f9ff; font-weight: 700; border-top: 2px solid var(--border);
  color: var(--primary); border-bottom: none;
}

/* ========= 버튼 ========= */
.btn-primary {
  background: var(--primary); color: white; border: none;
  padding: .6rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background var(--transition); font-family: inherit;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary {
  background: white; color: var(--text-sub); border: 1px solid var(--border);
  padding: .6rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: all var(--transition); font-family: inherit;
}
.btn-secondary:hover { background: var(--bg); }
.btn-success {
  background: var(--success); color: white; border: none;
  padding: .6rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: inherit; transition: background var(--transition);
}
.btn-success:hover { background: #15803d; }
.btn-danger {
  background: var(--danger); color: white; border: none;
  padding: .4rem .8rem; border-radius: var(--radius-sm);
  font-size: .78rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-sm { padding: .4rem .8rem; font-size: .8rem; }
.btn-xs { 
  padding: .25rem .5rem; font-size: .72rem; 
  vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.btn-full { width: 100%; justify-content: center; padding: .8rem; }
.btn-icon {
  width: 32px; height: 32px; border: 1px solid var(--border); background: white;
  border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: .9rem; color: var(--text-sub);
  transition: all var(--transition);
}
.btn-icon:hover { background: var(--bg); }

/* ========= 폼 ========= */
.form-group { margin-bottom: .9rem; }
.form-group label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-sub); margin-bottom: .3rem; }
.form-control {
  width: 100%; padding: .6rem .8rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit;
  color: var(--text-main); background: white; outline: none;
  transition: border-color var(--transition);
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.required { color: var(--danger); }
.input-with-unit { display: flex; align-items: center; gap: .4rem; }
.input-with-unit span { color: var(--text-sub); font-size: .85rem; white-space: nowrap; }

/* ========= 모달 ========= */
.modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 600px) { .modal { align-items: center; } }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.modal-content {
  background: white; border-radius: 20px 20px 0 0; width: 100%; max-width: 560px;
  position: relative; z-index: 1; max-height: 90dvh; display: flex; flex-direction: column;
  animation: slideUp .3s ease;
}
@media (min-width: 600px) { .modal-content { border-radius: 20px; } }
.modal-sm { max-width: 420px; }
@keyframes slideUp { from{transform:translateY(50px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h3 { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.modal-header h3 i { color: var(--primary); }
.modal-close {
  width: 32px; height: 32px; border: none; background: var(--bg);
  border-radius: 50%; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: .9rem; color: var(--text-sub);
}
.modal-body { padding: 1.1rem 1.2rem; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: .9rem 1.2rem; border-top: 1px solid var(--border);
  display: flex; gap: .6rem; justify-content: flex-end; flex-shrink: 0;
}
.payslip-content { max-width: 480px; }

/* ========= 근태 달력 ========= */
.att-calendar {
  background: white; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.att-cal-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: #f8fafc; border-bottom: 1px solid var(--border);
}
.att-cal-dayname {
  text-align: center; padding: .5rem .2rem;
  font-size: .72rem; font-weight: 700; color: var(--text-sub);
}
.att-cal-dayname.sun { color: var(--danger); }
.att-cal-dayname.sat { color: var(--primary); }
.att-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.att-cal-cell {
  min-height: 56px; border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light); padding: .3rem .2rem;
  cursor: pointer; transition: background var(--transition); position: relative;
}
.att-cal-cell:hover { background: #f8fafc; }
.att-cal-cell.empty { background: #fafafa; cursor: default; }
.att-cal-cell.today { background: #eff6ff; }
.att-cal-cell.today .cal-day-num { color: var(--primary); font-weight: 800; }
.att-cal-cell.holiday { background: #fef9f9; }
.cal-day-num {
  font-size: .8rem; font-weight: 600; text-align: center;
  color: var(--text-main); line-height: 1.2;
}
.cal-day-num.sun { color: var(--danger); }
.cal-day-num.sat { color: var(--primary); }
.cal-day-num.holiday { color: var(--danger); }
.cal-status-tag {
  display: block; text-align: center; font-size: .65rem; font-weight: 700;
  padding: .1rem .15rem; border-radius: 4px; margin-top: .2rem;
  line-height: 1.2;
}
.status-출근 { background: #dcfce7; color: #16a34a; }
.status-결근 { background: #fee2e2; color: #dc2626; }
.status-연차 { background: #dbeafe; color: #2563eb; }
.status-반차 { background: #fed7aa; color: #ea580c; }
.status-조퇴 { background: #fef9c3; color: #ca8a04; }
.status-출장 { background: #e0e7ff; color: #4f46e5; }
.status-휴일 { background: #f1f5f9; color: #94a3b8; }
.status-공휴일 { background: #ffe4e6; color: #f43f5e; }
.status-경조사 { background: #f3e8ff; color: #7c3aed; font-weight: 800; }
/* 출근부 경조사 버튼 강조 */
.status-kyungjo { background: #f3e8ff !important; color: #7c3aed !important; border: 1.5px solid #a78bfa !important; }
.att-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; flex-wrap: wrap; gap: .5rem; }
.legend-row { display: flex; align-items: center; gap: .5rem; font-size: .75rem; flex-wrap: wrap; }
.legend-row .legend-dot { font-size: .8rem; }
.bg-success { color: #16a34a; }
.bg-danger { color: #dc2626; }
.bg-primary { color: #2563eb; }
.bg-warning { color: #d97706; }
.bg-gray { color: #94a3b8; }
.attendance-mode-btns { display: flex; gap: .4rem; margin-bottom: .8rem; }
.mode-btn {
  padding: .4rem .9rem; border: 1px solid var(--border); background: white;
  border-radius: var(--radius-sm); font-size: .82rem; cursor: pointer;
  color: var(--text-sub); display: flex; align-items: center; gap: .3rem;
  font-family: inherit; transition: all var(--transition);
}
.mode-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* 근태 통계 바 */
.att-stats-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .8rem; background: white; border-radius: var(--radius);
  box-shadow: var(--shadow); margin-top: .8rem;
}
.att-stat-item { display: flex; align-items: center; gap: .3rem; font-size: .8rem; }
.att-stat-label { color: var(--text-sub); }
.att-stat-val { font-weight: 700; }

/* 근태 입력 모달 */
.att-date-info {
  background: var(--primary-light); color: var(--primary);
  padding: .6rem .8rem; border-radius: var(--radius-sm);
  font-weight: 700; font-size: .95rem; margin-bottom: .8rem; text-align: center;
}
.att-emp-info {
  color: var(--text-sub); font-size: .85rem; margin-bottom: .8rem;
  text-align: center;
}
.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.status-option {
  padding: .5rem .3rem; border: 2px solid var(--border); border-radius: var(--radius-sm);
  background: white; font-size: .82rem; cursor: pointer; text-align: center;
  font-family: inherit; transition: all var(--transition);
}
.status-option.selected { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 700; }

/* ========= 초과근무 ========= */
.ot-table th, .ot-table td { font-size: .78rem; padding: .5rem .6rem; }
.ot-total { color: var(--primary); font-weight: 700; }

/* ========= 4대보험 요율 그리드 ========= */
.insurance-rates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; padding: 1rem; }
@media (min-width: 600px) { .insurance-rates-grid { grid-template-columns: repeat(4, 1fr); } }
.rate-card {
  background: var(--bg); border-radius: var(--radius-sm);
  padding: .8rem; text-align: center;
}
.rate-name { font-size: .78rem; color: var(--text-sub); font-weight: 600; }
.rate-value { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-top: .2rem; }
.rate-note { font-size: .7rem; color: var(--text-light); margin-top: .1rem; }

/* ========= 급여명세서 ========= */
#payslip-body { padding: 1.2rem; }
.payslip-company { text-align: center; font-size: 1rem; font-weight: 700; margin-bottom: .3rem; }
.payslip-title { text-align: center; font-size: 1.2rem; font-weight: 800; margin-bottom: 1rem; }
.payslip-info { background: #f8fafc; border-radius: var(--radius-sm); padding: .8rem; margin-bottom: 1rem; }
.payslip-info-row { display: flex; justify-content: space-between; font-size: .85rem; padding: .2rem 0; }
.payslip-section-title { font-size: .82rem; font-weight: 700; color: var(--primary); margin: .8rem 0 .4rem; border-left: 3px solid var(--primary); padding-left: .5rem; }
.payslip-row { display: flex; justify-content: space-between; font-size: .85rem; padding: .3rem 0; border-bottom: 1px solid var(--border-light); }
.payslip-total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 700; padding: .6rem 0; background: var(--primary-light); margin: .6rem -.1rem 0; padding: .6rem .5rem; border-radius: var(--radius-sm); }
.payslip-net { text-align: center; background: linear-gradient(135deg, var(--primary), #3b82f6); color: white; padding: 1rem; border-radius: var(--radius-sm); margin-top: .8rem; }
.payslip-net-label { font-size: .85rem; opacity: .85; }
.payslip-net-amount { font-size: 1.6rem; font-weight: 800; margin-top: .2rem; }

/* ========= 연차 ========= */
.tab-bar { display: flex; gap: .3rem; margin-bottom: .8rem; overflow-x: auto; padding-bottom: .2rem; }
.tab-btn {
  padding: .45rem .9rem; border: 1px solid var(--border); background: white;
  border-radius: 20px; font-size: .82rem; cursor: pointer; font-family: inherit;
  color: var(--text-sub); white-space: nowrap; transition: all var(--transition);
}
.tab-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.leave-tab-content { }
.my-leave-list { padding: .6rem 1rem .8rem; }
.my-leave-item { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 0; border-bottom: 1px solid var(--border-light); font-size: .85rem; }
.my-leave-item:last-child { border-bottom: none; }
.leave-apply-form { padding: 1rem; }

/* ========= 퇴사정산 ========= */
.resign-preview-row { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .9rem; border-bottom: 1px solid var(--border-light); }
.resign-preview-row.highlight { background: var(--primary-light); padding: .6rem .5rem; border-radius: var(--radius-sm); border: none; margin-top: .3rem; }

/* ========= 설정 ========= */
.settings-grid { display: grid; gap: .8rem; }
.settings-form { padding: 1rem; }
.holidays-list { padding: .5rem 1rem; max-height: 200px; overflow-y: auto; }
.holiday-row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border-light); }
.holiday-row input { flex: 1; border: none; border-bottom: 1px solid var(--border); background: transparent; padding: .2rem .3rem; font-size: .85rem; font-family: inherit; outline: none; }
.holiday-del { width: 24px; height: 24px; border: none; background: var(--danger-light); color: var(--danger); border-radius: 50%; cursor: pointer; font-size: .7rem; display: flex; align-items: center; justify-content: center; }
.toggle-group { display: flex; align-items: center; gap: .6rem; }
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 24px;
  cursor: pointer; transition: .3s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  left: 3px; top: 3px; background: white; border-radius: 50%; transition: .3s;
}
.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ========= 급여정산 툴바 ========= */
.payroll-toolbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .8rem; padding: .8rem; background: white;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.work-days-input { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.work-days-input label { font-weight: 600; color: var(--text-sub); }
.work-days-input input { width: 60px; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9rem; text-align: center; }

.payroll-table th, .payroll-table td { font-size: .75rem; padding: .75rem .5rem; vertical-align: middle; }

/* ========= 상태 뱃지 ========= */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .2rem .5rem; border-radius: 20px; font-size: .72rem; font-weight: 600;
  vertical-align: middle; line-height: 1; margin: 1px 0;
}
.badge-success { background: var(--success-light); color: var(--success); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-info { background: var(--info-light); color: var(--info); }
.badge-gray { background: #f1f5f9; color: var(--text-sub); }
.badge-purple { background: #f3e8ff; color: #7c3aed; }
.badge-orange { background: #fff7ed; color: #c2410c; }

/* ========= 정보 배너 ========= */
.info-banner {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius-sm);
  padding: .6rem .9rem; font-size: .82rem; color: #1d4ed8; margin-bottom: .8rem;
  display: flex; align-items: flex-start; gap: .4rem; line-height: 1.5;
}
.info-banner i { margin-top: .1rem; flex-shrink: 0; }

/* ========= 토스트 알림 ========= */
#toast-container {
  position: fixed; bottom: calc(var(--bottom-nav-h) + 10px); left: 50%;
  transform: translateX(-50%); z-index: 9999;
  display: flex; flex-direction: column; gap: .4rem; pointer-events: none;
  width: calc(100% - 2rem); max-width: 400px;
}
.toast {
  background: #1e293b; color: white; padding: .75rem 1rem;
  border-radius: var(--radius-sm); font-size: .875rem;
  display: flex; align-items: center; gap: .5rem;
  box-shadow: var(--shadow-lg); animation: toastIn .3s ease;
  pointer-events: auto;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.warning { background: var(--warning); }
@keyframes toastIn { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ========= 유틸 ========= */
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }
.text-sub { color: var(--text-sub); }
.fw-bold { font-weight: 700; }
.mt-1 { margin-top: .5rem; }
.empty-state {
  text-align: center; padding: 2rem; color: var(--text-light);
}
.empty-state i { font-size: 2.5rem; margin-bottom: .6rem; display: block; }
.empty-state p { font-size: .9rem; }

/* ========= 반응형 ========= */
@media (min-width: 768px) {
  .summary-cards { grid-template-columns: repeat(4, 1fr); }
  .dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 1.2rem 1.5rem; }
  .table-container { margin: 0; }
  .modal { align-items: center; }
  .modal-content { border-radius: 20px; }
  #main-content { padding-bottom: 1rem; }
  #bottom-nav { display: none; }
}

@media (min-width: 1024px) {
  #sidebar { left: 0; position: fixed; }
  #sidebar-overlay { display: none !important; }
  #sidebar-toggle { display: none; }
  #main-content { margin-left: var(--sidebar-w); }
  #app-header { left: var(--sidebar-w); }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 숫자 포맷 */
.num-cell { text-align: right; font-variant-numeric: tabular-nums; vertical-align: middle; white-space: nowrap; }
.amount-cell { text-align: right; font-weight: 600; color: var(--text-main); }
.amount-positive { color: var(--success); font-weight: 700; }
.amount-negative { color: var(--danger); font-weight: 700; }

/* 직원명부 상태 */
.emp-status-active { color: var(--success); }
.emp-status-resigned { color: var(--danger); }

/* 스크롤바 */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ═══════════════════════════════════════════════
   [5] 직원/관리자 권한별 UI 분리
   ═══════════════════════════════════════════════ */
body.role-employee [data-admin-only] { display: none !important; }
body.role-employee #btn-add-employee { display: none !important; }
body.role-employee .admin-only       { display: none !important; }

/* 비활성/퇴사 직원 행 */
.emp-row-inactive { opacity: .45; background: #f9fafb !important; }
.emp-row-resigned { opacity: .6; }

/* 계정 관리 모달 */
#account-mgmt-emp-info {
  background: #f8fafc;
  border-radius: 8px;
  padding: .7rem .9rem;
  margin-bottom: .8rem;
  font-size: .85rem;
}

/* ═══════════════════════════════════════════════════════
   [4] 모바일 안정화 — 실사용 수준 UI 보강
   ═══════════════════════════════════════════════════════ */

/* 검색/필터 바 모바일 줄바꿈 안정화 */
.search-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}

/* 테이블 모바일 가로 스크롤 */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  min-width: 600px;
}
.payroll-table {
  min-width: 900px;
}

/* 버튼 최소 터치 영역 */
.btn-xs {
  min-width: 28px;
  min-height: 28px;
  padding: .25rem .45rem;
}

/* 모달 모바일 최대 높이 + 스크롤 */
.modal-content {
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 카드 그리드 모바일 1열 */
@media (max-width: 480px) {
  .dashboard-cards,
  .settings-grid {
    grid-template-columns: 1fr !important;
  }
  .summary-card {
    padding: .75rem;
  }
  .summary-value {
    font-size: 1.4rem;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }
  /* 급여정산 툴바 세로 정렬 */
  .payroll-toolbar {
    flex-wrap: wrap;
    gap: .4rem;
  }
  .payroll-toolbar > * {
    flex: 1 1 auto;
    min-width: 100px;
  }
  /* 직원명부 헤더 */
  .page-header {
    flex-wrap: wrap;
    gap: .5rem;
  }
}

@media (max-width: 640px) {
  /* 사이드바 오버레이 개선 */
  #sidebar {
    width: 260px;
  }
  /* 헤더 타이틀 말줄임 */
  .header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
  }
  /* 계정 관리 모달 */
  #account-mgmt-modal .modal-content {
    max-width: calc(100vw - 2rem);
  }
}

/* 엑셀 버튼 색상 */
.btn-secondary i.fa-file-excel {
  color: #217346;
}

/* 대시보드 카드 클릭 가능 표시 */
.summary-card[style*="cursor:pointer"]:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transform: translateY(-1px);
  transition: all .15s;
}

/* 비밀번호 강도 바 컨테이너 */
#pw-strength-bar { transition: width .3s, background .3s; }

/* 로그인 화면 모바일 */
@media (max-width: 400px) {
  .login-card {
    padding: 1.5rem 1rem;
  }
}

/* 인쇄 스타일 — 명세서 인쇄 시 앱 UI 숨김 */
@media print {
  #app > header,
  #sidebar,
  #sidebar-overlay,
  #bottom-nav,
  .modal-overlay,
  .modal-footer,
  .modal-close,
  .page-header .btn-primary,
  .payroll-toolbar {
    display: none !important;
  }
  .modal-content {
    box-shadow: none;
    max-height: none;
  }
  body {
    background: #fff;
  }
}

/* ═══════════════════════════════════════════════════════
   다중 GPS 근무지 관리 스타일 (v7)
   ═══════════════════════════════════════════════════════ */

/* 퇴근 버튼 hover */
#gps-checkout-btn:hover:not(:disabled) {
  background: #334155 !important;
}
#gps-checkout-btn:disabled {
  cursor: not-allowed;
  opacity: .85;
}

/* 근무지 관리 폼 */
#ws-form-card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 560px) {
  #ws-form-card .form-row {
    grid-template-columns: 1fr;
  }
}

/* 근무지 테이블 상태 배지 클릭 가능 */
#work-sites-tbody .badge {
  cursor: pointer;
  user-select: none;
  transition: opacity .15s;
}
#work-sites-tbody .badge:hover { opacity: .8; }

/* 출근 달력 GPS 인증 배지 */
.cal-status-tag + span[style*="gps"] {
  display: block;
  font-size: .55rem;
  text-align: center;
}

/* GPS 결과 카드 애니메이션 */
#gps-result {
  transition: all .2s ease;
}

/* 근무지 관리 info 박스 */
#page-work-sites .form-group code {
  background: #e5e7eb;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .78rem;
  font-family: monospace;
}

/* GPS 카드 퇴근 버튼 모바일 */
@media (max-width: 480px) {
  #gps-checkin-btn,
  #gps-checkout-btn {
    font-size: .9rem !important;
    padding: .7rem !important;
  }
}


/* ===============================
   STEP5-5f 공통 테이블 정렬 최종 보정
   - 연차 / 근로계약서 / 급여명세 테이블 오른쪽 밀림 방지
   - 버튼 영역 줄바꿈 방지
   =============================== */
.table-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
.data-table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.data-table th,
.data-table td {
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.data-table td.num-cell,
.data-table th.text-right,
.data-table td.text-right {
  text-align: right !important;
}
.data-table .table-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.data-table .table-actions button {
  flex: 0 0 auto !important;
}

/* ===============================
   STEP5-5g 관리자 초과근무 / 급여기본설정 정렬 보정
   - STEP5-5f의 공통 num-cell 우측정렬이 관리자 설정표까지 과하게 적용되는 문제 보정
   - 대상: 초과근무, 급여기본설정 화면만
   =============================== */
#page-overtime .table-container,
#page-salary-settings .table-container {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: auto !important;
}

#page-overtime .data-table,
#page-salary-settings .data-table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

#page-overtime .data-table th,
#page-overtime .data-table td,
#page-salary-settings .data-table th,
#page-salary-settings .data-table td {
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  padding: .55rem .45rem !important;
}

/* 관리자 설정표에서는 num-cell도 가운데 기준으로 맞춤 */
#page-overtime .data-table .num-cell,
#page-salary-settings .data-table .num-cell {
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}

/* 금액/합계처럼 강조가 필요한 숫자도 오른쪽 끝으로 밀리지 않게 중앙 정렬 */
#page-overtime .ot-total,
#page-salary-settings .fw-bold,
#page-salary-settings .text-danger {
  text-align: center !important;
}

/* 급여기본설정의 편집 버튼 위치 안정화 */
#page-salary-settings .btn-xs,
#page-overtime .btn-xs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}