/* =============================================
   COMPONENTS — 컬러풀 테마 전체 컴포넌트
   ============================================= */

/* ─── 앱 레이아웃 ─── */
.app-layout { display:flex; height:100dvh; overflow:hidden; }

/* ─── 사이드바 ─── */
.sidebar {
  width:var(--sidebar-width); flex-shrink:0;
  display:flex; flex-direction:column;
  background:var(--color-bg);
  border-right:1px solid var(--color-border);
  overflow-y:auto; overflow-x:hidden;
  transition:transform var(--ease-base);
  z-index:100;
  box-shadow: 2px 0 12px rgba(99,102,241,.06);
}
.sidebar-logo {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
  font-size:var(--text-md); font-weight:var(--fw-bold);
  color:var(--color-text); border-bottom:1px solid var(--color-border);
  margin-bottom:var(--sp-2);
}
.sidebar-logo-icon {
  width:28px; height:28px; border-radius:var(--radius-base);
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:var(--text-sm); font-weight:var(--fw-bold);
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
}
.sidebar-section-label {
  padding:var(--sp-2) var(--sp-3) var(--sp-1);
  font-size:10px; font-weight:var(--fw-bold);
  color:var(--color-sub); letter-spacing:.08em; text-transform:uppercase;
}
.sidebar-nav { padding:0 var(--sp-2); }
.sidebar-nav-item {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:7px var(--sp-3); border-radius:var(--radius-base);
  font-size:var(--text-sm); font-weight:var(--fw-medium);
  color:var(--color-sub); cursor:pointer;
  transition:background var(--ease-fast),color var(--ease-fast);
}
.sidebar-nav-item:hover  { background:var(--color-surface); color:var(--color-text); }
.sidebar-nav-item.active {
  background:var(--color-accent-light); color:var(--color-accent);
  font-weight:var(--fw-bold);
}
.sidebar-bottom { margin-top:auto; padding:var(--sp-3) var(--sp-2); border-top:1px solid var(--color-border); }
.sidebar-user {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-base); cursor:pointer;
  transition:background var(--ease-fast);
}
.sidebar-user:hover { background:var(--color-surface); }
.sidebar-user-name  { font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--color-text); }
.sidebar-user-role  { font-size:var(--text-xs); color:var(--color-sub); }

/* ─── 메인 영역 ─── */
.main-area { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--color-surface); }

/* ─── 탑바 ─── */
.topbar {
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-6); border-bottom:1px solid var(--color-border);
  flex-shrink:0; background:var(--color-bg);
  box-shadow:0 1px 4px rgba(99,102,241,.06);
}
.topbar-left  { display:flex; align-items:center; gap:var(--sp-3); }
.topbar-title { font-size:var(--text-md); font-weight:var(--fw-bold); color:var(--color-text); }
.topbar-right { display:flex; align-items:center; gap:var(--sp-2); }

/* ─── 알림 버튼 ─── */
.notif-btn {
  position:relative; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-base); color:var(--color-sub);
  transition:background var(--ease-fast);
}
.notif-btn:hover { background:var(--color-surface); color:var(--color-accent); }
.notif-badge {
  position:absolute; top:4px; right:4px;
  width:16px; height:16px; font-size:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-danger); color:#fff;
  border-radius:var(--radius-full); font-weight:var(--fw-bold);
  border:2px solid var(--color-bg);
}

/* 모바일 햄버거 */
.menu-toggle {
  display:none; width:36px; height:36px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-base); color:var(--color-sub);
  transition:background var(--ease-fast);
}
.menu-toggle:hover { background:var(--color-surface); }

/* ─── 큰 날짜 바 ─── */
.big-date-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-5) var(--sp-6) var(--sp-4);
  background:linear-gradient(135deg, #6366F1 0%, #8B5CF6 60%, #A78BFA 100%);
  flex-shrink:0;
}
.big-date     { font-size:var(--text-xl); font-weight:var(--fw-bold); color:#fff; letter-spacing:-.02em; }
.big-date-sub { font-size:var(--text-sm); color:rgba(255,255,255,.75); margin-top:3px; }
.big-date-right { display:flex; gap:var(--sp-2); }

/* ─── 탭 바 ─── */
.tab-bar {
  display:flex; align-items:center; gap:0;
  border-bottom:1px solid var(--color-border);
  background:var(--color-bg);
  flex-shrink:0;
}
.tab-item {
  padding:var(--sp-3) var(--sp-5);
  font-size:var(--text-sm); font-weight:var(--fw-medium);
  color:var(--color-sub); cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color var(--ease-fast),border-color var(--ease-fast);
  display:flex; align-items:center; gap:var(--sp-2);
}
.tab-item:hover { color:var(--color-text); }
.tab-item.active { color:var(--color-accent); border-bottom-color:var(--color-accent); font-weight:var(--fw-bold); }

/* ─── 그룹 카테고리 필터 ─── */
.group-filter-bar {
  display:flex; align-items:center; gap:var(--sp-2);
  margin-bottom:var(--sp-4);
}
.group-filter-label { font-size:var(--text-xs); color:var(--color-sub); font-weight:var(--fw-bold); }
.group-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 14px; border-radius:var(--radius-full);
  font-size:var(--text-sm); font-weight:var(--fw-medium);
  cursor:pointer; border:2px solid transparent;
  transition:all var(--ease-fast);
  background:var(--color-bg); color:var(--color-sub);
  border-color:var(--color-border);
}
.group-chip:hover { background:var(--color-hover); color:var(--color-text); }
.group-chip.active { border-color:currentColor; }
.group-chip.chip-all    { }
.group-chip.chip-all.active    { background:#EEF2FF; color:var(--color-accent); border-color:var(--color-accent); }
.group-chip.chip-bunyeo { }
.group-chip.chip-bunyeo.active { background:var(--bunyeo-light); color:var(--bunyeo-color); border-color:var(--bunyeo-color); }
.group-chip.chip-cheong { }
.group-chip.chip-cheong.active { background:var(--cheong-light); color:var(--cheong-color); border-color:var(--cheong-color); }
.group-chip.chip-etc    { }
.group-chip.chip-etc.active    { background:var(--etc-light); color:var(--etc-color); border-color:var(--etc-color); }

/* ─── 콘텐츠 영역 ─── */
.content-area { flex:1; overflow-y:auto; padding:var(--sp-5) var(--sp-6); }

/* ─── 단계 카드 (6색) ─── */
.stage-cards {
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:var(--sp-2); margin-bottom:var(--sp-4);
}
.stage-card {
  border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-2); text-align:center;
  border:1.5px solid transparent;
  transition:transform var(--ease-fast), box-shadow var(--ease-fast);
}
.stage-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.stage-card-name { font-size:var(--text-xs); font-weight:var(--fw-bold); margin-bottom:var(--sp-1); }
.stage-card-val  { font-size:var(--text-xl); font-weight:var(--fw-bold); line-height:1; }
.stage-card-sub  { font-size:10px; margin-top:2px; opacity:.7; }

/* ─── 소속×단계 집계 그리드 테이블 ─── */
.grid-table-wrap {
  overflow-x:auto; margin-bottom:var(--sp-5);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-bg);
  box-shadow:var(--shadow-xs);
}
.grid-caption {
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--text-sm); font-weight:var(--fw-bold);
  border-bottom:1px solid var(--color-border);
  background:var(--color-bg);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  color:var(--color-text);
}
.grid-table {
  width:100%; border-collapse:collapse; table-layout:auto;
}
.grid-table th, .grid-table td {
  padding:0; border:1px solid var(--color-border);
  font-size:var(--text-base); text-align:center; white-space:nowrap;
}
.grid-table th { font-size:var(--text-sm); font-weight:var(--fw-bold); }

.gt-label, .gt-foot-label {
  text-align:left; padding:10px var(--sp-3);
  font-weight:var(--fw-bold); min-width:110px;
  background:var(--color-surface);
}
.gt-foot-label { font-size:var(--text-sm); color:var(--color-sub); }

.gt-stage-th {
  padding:10px var(--sp-3); min-width:68px;
  border:none !important;
}
.gt-stage-inner {
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.gt-stage-label { font-size:var(--text-sm); font-weight:var(--fw-bold); }
.gt-stage-total { font-size:11px; font-weight:var(--fw-bold); }

.gt-group-cell { text-align:left; padding:10px var(--sp-3); font-size:var(--text-base); font-weight:var(--fw-medium); background:var(--color-bg); }
.gt-cat-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:middle; }

.gt-cell    { padding:10px var(--sp-3); color:var(--color-sub); background:var(--color-bg); }
.gt-has-val { color:var(--color-text); font-weight:var(--fw-bold); }

.gt-row-total { padding:10px var(--sp-3); font-weight:var(--fw-bold); background:var(--color-surface); }
.gt-total-head { padding:10px var(--sp-3); min-width:60px; background:var(--color-surface); }
.gt-total-cell { padding:10px var(--sp-3); font-weight:var(--fw-bold); }
.gt-grand {
  padding:10px var(--sp-3); font-weight:var(--fw-bold);
  background:var(--color-accent); color:#fff; font-size:var(--text-md);
}
.grid-table tfoot { background:var(--color-surface-2); }

/* ─── 입력 그리드 ─── */
.wg-cell { padding:3px; background:var(--color-bg); }
.wg-input {
  width:52px; height:32px; text-align:center;
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  font-size:var(--text-sm); font-weight:var(--fw-medium);
  color:var(--color-text); background:var(--color-bg);
  outline:none; transition:border-color var(--ease-fast),box-shadow var(--ease-fast);
}
.wg-input:focus { border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.wg-input::-webkit-inner-spin-button, .wg-input::-webkit-outer-spin-button { opacity:.5; }

/* ─── 오늘 배너 ─── */
.today-banner {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  background:var(--color-bg); border:1.5px solid var(--color-border);
  border-radius:var(--radius-md); margin-bottom:var(--sp-4);
  box-shadow:var(--shadow-xs);
}
.today-banner-label { font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--color-sub); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.today-banner-stat  { font-size:var(--text-lg); font-weight:var(--fw-bold); color:var(--color-text); display:flex; align-items:baseline; gap:var(--sp-2); }
.today-banner-sub   { font-size:var(--text-sm); font-weight:var(--fw-regular); color:var(--color-sub); }
.today-submitters   { display:flex; margin-top:var(--sp-2); }

/* ─── 카테고리 섹션 분리 헤더 ─── */
.cat-section-header {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  font-size:var(--text-sm); font-weight:var(--fw-bold);
}
.cat-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:var(--fw-bold);
}

/* ─── 공통 버튼 ─── */
.btn {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:7px 16px; border-radius:var(--radius-base);
  font-size:var(--text-sm); font-weight:var(--fw-medium);
  transition:all var(--ease-fast); white-space:nowrap; cursor:pointer; border:none;
  font-family:var(--font-family);
}
.btn-primary { background:var(--color-accent); color:#fff; box-shadow:0 2px 8px rgba(99,102,241,.3); }
.btn-primary:hover { background:var(--color-accent-hover); box-shadow:0 4px 12px rgba(99,102,241,.4); }
.btn-ghost   { background:transparent; color:var(--color-sub); border:1.5px solid var(--color-border); }
.btn-ghost:hover { background:var(--color-surface); color:var(--color-text); }
.btn-surface { background:var(--color-surface); color:var(--color-text); }
.btn-surface:hover { background:var(--color-surface-2); }
.btn-white   { background:#fff; color:var(--color-accent); border:1.5px solid rgba(255,255,255,.4); }
.btn-white:hover { background:rgba(255,255,255,.9); }
.btn-sm  { padding:4px 12px; font-size:var(--text-xs); }
.btn-lg  { padding:10px 22px; font-size:var(--text-base); }

/* ─── 공통 입력 ─── */
.input, .textarea {
  width:100%; padding:8px 12px;
  border:1.5px solid var(--color-border); border-radius:var(--radius-base);
  background:var(--color-bg); color:var(--color-text); font-size:var(--text-base);
  transition:border-color var(--ease-fast),box-shadow var(--ease-fast);
  outline:none; font-family:var(--font-family);
}
.input:focus, .textarea:focus { border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.input::placeholder, .textarea::placeholder { color:var(--color-border); }
.textarea { resize:vertical; min-height:80px; line-height:var(--lh-base); }

/* ─── 아바타 ─── */
.avatar {
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-full); font-weight:var(--fw-bold); flex-shrink:0;
  background:var(--color-surface-2); color:var(--color-sub); font-size:var(--text-sm);
}
.avatar-sm { width:28px; height:28px; font-size:var(--text-xs); }
.avatar-md { width:36px; height:36px; font-size:var(--text-sm); }
.avatar-lg { width:48px; height:48px; font-size:var(--text-md); }
.avatar-xl { width:72px; height:72px; font-size:var(--text-xl); }

/* ─── 배지 ─── */
.badge { display:inline-flex; align-items:center; justify-content:center; height:18px; min-width:18px; padding:0 5px; font-size:var(--text-xs); font-weight:var(--fw-bold); border-radius:var(--radius-full); line-height:1; }
.badge-danger  { background:var(--color-danger); color:#fff; }
.badge-accent  { background:var(--color-accent); color:#fff; }
.badge-surface { background:var(--color-surface-2); color:var(--color-sub); }

/* ─── 상태 칩 ─── */
.status-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:var(--fw-medium); }
.status-done    { background:var(--color-success-light); color:var(--color-success); }
.status-pending { background:var(--color-warning-light); color:var(--color-warning); }
.status-draft   { background:var(--color-surface-2); color:var(--color-sub); }
.status-review  { background:var(--color-accent-light); color:var(--color-accent); }

/* ─── 구분선 ─── */
.divider { border:none; border-top:1px solid var(--color-border); margin:var(--sp-4) 0; }

/* ─── 모달 ─── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(30,27,75,.4);
  z-index:200; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4); opacity:0; pointer-events:none;
  transition:opacity var(--ease-base);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--color-bg); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); width:100%; max-width:600px;
  max-height:90dvh; overflow-y:auto;
  transform:translateY(16px) scale(.97);
  transition:transform var(--ease-base);
}
.modal-overlay.open .modal { transform:none; }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom:1px solid var(--color-border);
  position:sticky; top:0; background:var(--color-bg); z-index:1;
}
.modal-title { font-size:var(--text-md); font-weight:var(--fw-bold); color:var(--color-text); }
.modal-close {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-base); color:var(--color-sub); cursor:pointer;
  transition:background var(--ease-fast);
}
.modal-close:hover { background:var(--color-surface); color:var(--color-text); }
.modal-body   { padding:var(--sp-5) var(--sp-6); }
.modal-footer {
  display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-6) var(--sp-5);
  border-top:1px solid var(--color-border);
  position:sticky; bottom:0; background:var(--color-bg);
}

/* ─── 폼 ─── */
.form-group  { margin-bottom:var(--sp-4); }
.form-label  { display:block; font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--color-text); margin-bottom:var(--sp-2); }
.form-hint   { font-size:var(--text-xs); color:var(--color-sub); margin-top:var(--sp-1); }

/* ─── 알림 패널 ─── */
.notif-panel {
  position:fixed; top:calc(var(--header-h) + 8px); right:16px;
  width:340px; max-height:440px;
  background:var(--color-bg); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  overflow:hidden; z-index:300;
  opacity:0; pointer-events:none;
  transform:translateY(-8px) scale(.97); transform-origin:top right;
  transition:opacity var(--ease-base),transform var(--ease-base);
}
.notif-panel.open { opacity:1; pointer-events:all; transform:none; }
.notif-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--color-border);
}
.notif-panel-title { font-size:var(--text-sm); font-weight:var(--fw-bold); }
.notif-mark-all    { font-size:var(--text-xs); color:var(--color-accent); cursor:pointer; }
.notif-list { overflow-y:auto; max-height:360px; }
.notif-item {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--color-border);
  cursor:pointer; transition:background var(--ease-fast);
}
.notif-item:hover { background:var(--color-surface); }
.notif-item.unread { background:var(--color-accent-light); }
.notif-item-icon {
  width:30px; height:30px; border-radius:var(--radius-full);
  background:var(--color-surface-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.notif-item-body { flex:1; min-width:0; }
.notif-item-text { font-size:var(--text-sm); line-height:1.4; }
.notif-item-time { font-size:var(--text-xs); color:var(--color-sub); margin-top:2px; }
.notif-unread-dot { width:7px; height:7px; border-radius:50%; background:var(--color-accent); flex-shrink:0; margin-top:6px; }

/* ─── 댓글 ─── */
.comment-item { display:flex; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--color-border); }
.comment-body { flex:1; min-width:0; }
.comment-header { display:flex; align-items:center; gap:var(--sp-2); margin-bottom:3px; }
.comment-author { font-size:var(--text-sm); font-weight:var(--fw-bold); }
.comment-time   { font-size:var(--text-xs); color:var(--color-sub); }
.comment-text   { font-size:var(--text-sm); line-height:var(--lh-base); }
.comment-input-row { display:flex; gap:var(--sp-3); padding-top:var(--sp-3); }
.comment-input { flex:1; }

/* ─── 보고 카드 ─── */
.report-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.report-card {
  background:var(--color-bg); border:1.5px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--sp-4) var(--sp-5);
  transition:box-shadow var(--ease-fast),border-color var(--ease-fast);
  cursor:pointer;
}
.report-card:hover { box-shadow:var(--shadow-sm); border-color:var(--color-surface-2); }
.report-card-header { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.report-card-meta   { flex:1; min-width:0; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.report-card-author { font-size:var(--text-sm); font-weight:var(--fw-bold); }
.report-card-time   { font-size:var(--text-xs); color:var(--color-sub); }
.report-mini-summary { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.mini-stage {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:var(--radius-full); font-size:var(--text-xs);
}
.mini-stage-name { font-weight:var(--fw-medium); }
.mini-stage-val  { font-weight:var(--fw-bold); }
.report-card-footer {
  display:flex; align-items:center; gap:var(--sp-3);
  padding-top:var(--sp-3); border-top:1px solid var(--color-border);
}
.report-action-btn {
  display:flex; align-items:center; gap:var(--sp-1);
  font-size:var(--text-xs); color:var(--color-sub);
  padding:3px 8px; border-radius:var(--radius-base);
  transition:background var(--ease-fast),color var(--ease-fast); cursor:pointer; border:none; background:none;
  font-family:var(--font-family);
}
.report-action-btn:hover { background:var(--color-surface); color:var(--color-text); }
.report-action-btn.liked { color:var(--color-danger); }

/* ─── 상세 모달 ─── */
.detail-modal { max-width:700px; }

/* ─── 보고 내역 날짜 그룹 ─── */
.history-date-group { margin-bottom:var(--sp-6); }
.history-date-label {
  font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--color-sub);
  text-transform:uppercase; letter-spacing:.06em;
  padding:var(--sp-2) 0; margin-bottom:var(--sp-2);
  border-bottom:1px solid var(--color-border);
}

/* ─── 차트 카드 ─── */
.chart-card {
  background:var(--color-bg); border:1.5px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--sp-5); margin-bottom:var(--sp-4);
  box-shadow:var(--shadow-xs);
}
.chart-card-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4);
}
.chart-card-title { font-size:var(--text-sm); font-weight:var(--fw-bold); }
.bar-chart { display:flex; align-items:flex-end; gap:var(--sp-3); height:120px; }
.bar-col   { flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); }
.bar-fill  {
  width:100%; border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  min-height:3px; position:relative; transition:height .5s ease;
  background:var(--color-surface-2);
}
.bar-fill.today { background:linear-gradient(180deg,#6366F1,#8B5CF6); }
.bar-label { font-size:var(--text-xs); color:var(--color-sub); }

/* ─── 기간 선택 ─── */
.period-picker {
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);
  background:var(--color-bg); border:1.5px solid var(--color-border);
  border-radius:var(--radius-md); margin-bottom:var(--sp-4);
  box-shadow:var(--shadow-xs);
}
.period-picker-label { font-size:var(--text-sm); font-weight:var(--fw-bold); }

/* ─── 섹션 레이블 ─── */
.section-label {
  font-size:var(--text-sm); font-weight:var(--fw-bold);
  margin:var(--sp-5) 0 var(--sp-3);
  padding-bottom:var(--sp-2); border-bottom:1px solid var(--color-border);
}

/* ─── 빈 상태 ─── */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--sp-10) var(--sp-6); text-align:center; color:var(--color-sub);
}
.empty-state-title { font-size:var(--text-md); font-weight:var(--fw-medium); margin-bottom:var(--sp-2); }

/* ─── 토스트 ─── */
.toast-container { position:fixed; bottom:var(--sp-5); right:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); z-index:9999; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--color-text); color:#fff;
  border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  font-size:var(--text-sm); pointer-events:all;
  animation:fadeIn .2s ease both; max-width:320px;
}
.toast-success { background:var(--color-success); }
.toast-danger  { background:var(--color-danger); }

/* ─── 프로필 카드 ─── */
.profile-card {
  background:var(--color-bg); border:1.5px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--sp-8) var(--sp-6);
  display:flex; align-items:center; gap:var(--sp-6); margin-bottom:var(--sp-6);
}
.profile-info   { flex:1; }
.profile-name   { font-size:var(--text-xl); font-weight:var(--fw-bold); margin-bottom:var(--sp-1); }
.profile-role   { font-size:var(--text-sm); color:var(--color-sub); margin-bottom:var(--sp-4); }
.profile-stats  { display:flex; gap:var(--sp-6); }
.profile-stat-num   { font-size:var(--text-lg); font-weight:var(--fw-bold); }
.profile-stat-label { font-size:var(--text-xs); color:var(--color-sub); }

/* ─── 관리자 ─── */
.admin-stat-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-bottom:var(--sp-6); }
.admin-stat-card  { background:var(--color-bg); border:1.5px solid var(--color-border); border-radius:var(--radius-md); padding:var(--sp-4) var(--sp-5); }
.admin-stat-label { font-size:var(--text-xs); font-weight:var(--fw-medium); color:var(--color-sub); margin-bottom:4px; }
.admin-stat-value { font-size:var(--text-xl); font-weight:var(--fw-bold); }
.admin-stat-change { font-size:var(--text-xs); margin-top:4px; }
.change-up   { color:var(--color-success); }
.change-down { color:var(--color-danger); }

/* ─── 테이블 ─── */
.table-card { background:var(--color-bg); border:1.5px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; margin-bottom:var(--sp-6); }
.table-card-header { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--color-border); }
.table-card-title  { font-size:var(--text-sm); font-weight:var(--fw-bold); }
table { width:100%; border-collapse:collapse; }
th, td { padding:var(--sp-3) var(--sp-4); text-align:left; font-size:var(--text-sm); border-bottom:1px solid var(--color-border); }
th { font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--color-sub); text-transform:uppercase; letter-spacing:.04em; background:var(--color-surface); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--color-surface); }

/* ─── 검색 ─── */
.search-box {
  display:flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-3);
  border:1.5px solid var(--color-border); border-radius:var(--radius-base);
  background:var(--color-bg); height:36px;
  transition:border-color var(--ease-fast),box-shadow var(--ease-fast);
}
.search-box:focus-within { border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.search-box input { flex:1; border:none; outline:none; background:transparent; font-size:var(--text-sm); font-family:var(--font-family); }
.search-box input::placeholder { color:var(--color-border); }

/* ─── 사이드바 오버레이 ─── */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(30,27,75,.4); z-index:99; }

/* ─── 애니메이션 ─── */
@keyframes fadeIn  { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes slideIn { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }

/* ─── 반응형 ─── */
@media (max-width:1024px) {
  .stage-cards { grid-template-columns:repeat(3,1fr); }
  .admin-stat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .sidebar { position:fixed; top:0; left:0; height:100%; transform:translateX(-100%); }
  .sidebar.open { transform:none; }
  .sidebar-overlay.visible { display:block; }
  .menu-toggle { display:flex; }
  .content-area { padding:var(--sp-4); }
  .topbar { padding:0 var(--sp-4); }
  .big-date-bar { padding:var(--sp-4); }
  .tab-bar { padding:0 var(--sp-4) !important; overflow-x:auto; }
  .stage-cards { grid-template-columns:repeat(3,1fr); }
  .profile-card { flex-direction:column; text-align:center; }
  .profile-stats { justify-content:center; }
  .notif-panel { width:calc(100vw - 32px); right:16px; }
  .modal { max-width:100%; }
  .period-picker { flex-wrap:wrap; }
  .today-banner { flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
  .admin-stat-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .stage-cards { grid-template-columns:repeat(2,1fr); }
}