/**
 * ================================================================
 *  KT&G 본사 노동조합 분회 — Design Tokens (공통 디자인 변수)
 *  모든 페이지에서 이 파일을 import하여 일관된 디자인을 유지합니다.
 *  수정 시 이 파일 하나만 변경하면 전 페이지에 자동 반영됩니다.
 * ================================================================
 */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ── Brand Colors ── */
  --navy:      #0a1628;   /* 메인 네이비 (헤더, 배경 등) */
  --blue:      #1e3a5f;   /* 서브 블루 */
  --blue2:     #2558a8;   /* 강조 블루 */
  --sky:       #2563eb;   /* 액션 블루 (버튼, 링크) */
  --gold:      #f59e0b;   /* 메인 골드 (배지, 포인트) */
  --gold2:     #fbbf24;   /* 라이트 골드 */

  /* ── UI Colors ── */
  --bg:        #f1f5f9;   /* 페이지 배경 */
  --bg2:       #e8edf7;   /* 세컨드 배경 */
  --card:      #ffffff;   /* 카드 배경 */
  --border:    #dde4ef;   /* 테두리 */
  --text:      #0f172a;   /* 본문 텍스트 */
  --text2:     #5a6a82;   /* 보조 텍스트 */
  --mute:      #64748b;   /* 흐린 텍스트 */

  /* ── Sidebar ── */
  --sidebar:   #0f1f3d;

  /* ── Semantic Colors ── */
  --success:   #16a34a;
  --warning:   #d97706;
  --danger:    #dc2626;
  --info:      #0284c7;

  /* ── Shape ── */
  --r:         12px;      /* 기본 border-radius */
  --r2:        20px;      /* 큰 border-radius (카드 등) */
  --r-sm:      8px;       /* 작은 border-radius (버튼 등) */
  --r-xs:      6px;       /* 아주 작은 border-radius */

  /* ── Shadows ── */
  --sh1:       0 2px 12px rgba(0,0,0,.07);
  --sh2:       0 4px 20px rgba(0,0,0,.12);
  --sh3:       0 8px 32px rgba(0,0,0,.16);
  --sh-gold:   0 4px 20px rgba(245,158,11,.35);
  --sh-blue:   0 4px 14px rgba(37,99,235,.25);

  /* ── Typography ── */
  --font:      'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;

  /* ── Layout ── */
  --hh:        64px;      /* 헤더 높이 */
  --side-w:    240px;     /* 사이드바 너비 */

  /* ── Transitions ── */
  --tr:        .22s cubic-bezier(.4, 0, .2, 1);
}

/* ── 공통 리셋 ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font-family: var(--font);
}

button { cursor: pointer; border: none; background: none; }

/* ── 공통 스크롤바 ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue2); }

/* ── 공통 토스트 ── */
#toastBox {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--navy); color: #fff;
  padding: 12px 18px; border-radius: var(--r-sm);
  font-size: .85rem; font-weight: 600;
  box-shadow: var(--sh2);
  animation: toastIn .25s ease;
  max-width: 320px;
}
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
.toast.warn    { background: var(--warning); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 공통 로딩 스피너 ── */
.spin-wrap {
  text-align: center; padding: 40px;
  color: var(--mute); font-size: .9rem;
}
.spin-wrap i { margin-right: 6px; }

/* ── 공통 빈 상태 ── */
.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--mute);
}
.empty-state i { font-size: 2.5rem; margin-bottom: 12px; opacity: .4; display: block; }
.empty-state p { font-size: .9rem; }

/* ── 공통 배지 ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700;
}
.badge-gold  { background: rgba(245,158,11,.15); color: #92400e; }
.badge-blue  { background: rgba(37,99,235,.12);  color: #1e40af; }
.badge-green { background: rgba(22,163,74,.12);  color: #15803d; }
.badge-red   { background: rgba(220,38,38,.12);  color: #b91c1c; }
.badge-gray  { background: rgba(100,116,139,.1); color: #475569; }

/* ── 공통 버튼 ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--sky), #1d4ed8);
  color: #fff; font-size: .875rem; font-weight: 700;
  box-shadow: var(--sh-blue);
  transition: opacity var(--tr), transform var(--tr);
  border: none; cursor: pointer;
}
.btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.btn-gold {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--r-sm);
  background: var(--gold); color: var(--navy);
  font-size: .875rem; font-weight: 700;
  box-shadow: var(--sh-gold);
  transition: opacity var(--tr), transform var(--tr);
  border: none; cursor: pointer;
}
.btn-gold:hover { opacity: .9; transform: translateY(-1px); }

/* ── 공통 카드 ── */
.card {
  background: var(--card);
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: var(--sh1);
  padding: 20px;
}

/* ── 공통 섹션 헤더 ── */
.sec-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
  color: #92400e; font-size: .75rem; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
  margin-bottom: 10px;
}

/* ── 공통 오버레이/모달 ── */
.overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 500;
  align-items: center; justify-content: center;
  padding: 20px;
}
.overlay.open { display: flex; }
.modal {
  background: var(--card); border-radius: var(--r2);
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  padding: 28px; position: relative;
  box-shadow: var(--sh3);
}

/* ── 모바일 공통 ── */
@media (max-width: 768px) {
  .modal { padding: 20px; }
}

/* ── 접근성: 포커스 링 ── */
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}