/* ==========================================
   Nexus Design Tokens
   ==========================================
   노바얼라이언스 Nexus 플랫폼 디자인 시스템.
   모노톤 + 채도 낮춘 파랑.

   ──────────────────────────────────────────
   🎨 디자인(테마) 바꾸기 → "nexus-theme.css" 파일에서!
   ──────────────────────────────────────────
   색·배경·폰트·라운드 같은 테마는 nexus-theme.css 의 [활성 테마] 블록에서 바꿉니다.
   이 파일(nexus-tokens.css)은 그 테마 변수를 받아 쓰는 세부 토큰·간격이라
   보통은 건드릴 필요 없습니다.
   상세 가이드: docs/NEXUS_DESIGN_GUIDE.md §"디자인 바꾸는 법 (비개발자용)"
   ──────────────────────────────────────────

   로드 순서 (base.html): nexus-theme.css → nexus-tokens.css → nexus-base.css
   ========================================== */

:root {
  /* ==========================================================
     공식 브랜드 토큰 — NEXUS_DESIGN_SYSTEM.md §2 / §4.1 기준.
     HEX 값은 디자인 가이드(A03 기업 컬러 시스템) 공식 수치.
     임의 변경 금지. 테마 전환 시 Primary 계열만 교체된다.
     ========================================================== */

  /* ===== Primary Deep Blue (공식) — [data-theme] 에서 교체 ===== */
  --nova-primary:       #123499;   /* Deep Blue — 사이드바·히어로·CTA·활성탭 */
  --nova-primary-dark:  #0C2680;   /* Primary 버튼 hover */
  --nova-primary-mid:   #1A4BC4;   /* 링크·강조 텍스트 */
  --nova-primary-light: #E8EEF9;   /* 활성 탭 배경·카드 hover 포커스 링 */
  --nova-beige:         #F5EEE6;   /* 페이지 배경 (Soft Beige) */

  /* ===== UI 확장 팔레트 (§2 — Gray/White/Beige, 테마 불변) ===== */
  --color-bg-page:         var(--nova-beige);  /* 페이지 배경 = Beige */
  --color-bg-card:         #FFFFFF;            /* 카드·탑바·테이블 */
  --color-bg-table-header: #F7F7F5;            /* 테이블 헤더 (Gray 1) */
  --color-border:          #E2DED8;            /* 카드·인풋 기본 테두리 */
  --color-border-row:      #F2EFEA;            /* 테이블 행 구분선 */
  --color-text-primary:    #0C0C0C;            /* 주요 텍스트 (Black) */
  --color-text-secondary:  #4A4A48;            /* 일반 텍스트 (Gray 5) */
  --color-text-muted:      #9A9890;            /* 보조 텍스트·레이블 (Gray 4) */
  --color-negative:        #C84B3A;            /* 출금·마이너스 */
  --color-positive:        #2A7A4E;            /* 입금·플러스 */

  /* ===== Gray 스케일 보조 (§2 확장 팔레트) ===== */
  --color-gray-1: #F7F7F5;   /* 테이블 헤더 배경 */
  --color-gray-2: #EEECE8;   /* 구분선 */
  --color-gray-3: #D0CEC9;   /* 비활성 보더 */
  --color-gray-4: #9A9890;   /* 보조 텍스트·레이블 */
  --color-gray-5: #4A4A48;   /* 일반 텍스트 */

  /* ==========================================================
     하위호환 alias — 기존 --nexus-* / --theme-* 를 공식 값에 매핑.
     변수명은 유지하되 값은 전부 공식 팔레트로 통일한다.
     ========================================================== */
  --nexus-blue-900: var(--nova-primary-dark);
  --nexus-blue-700: var(--nova-primary);      /* ⭐ 핵심 액션 = 공식 Deep Blue */
  --nexus-blue-500: var(--nova-primary-mid);
  --nexus-blue-300: #8B98B5;
  --nexus-blue-100: var(--nova-primary-light);
  --nexus-blue-50:  #F4F6FA;

  --nexus-ink-900: var(--color-text-primary);   /* #0C0C0C */
  --nexus-ink-700: var(--color-text-secondary); /* #4A4A48 */
  --nexus-ink-500: var(--color-text-muted);     /* #9A9890 */
  --nexus-ink-300: var(--color-gray-3);         /* #D0CEC9 */

  --nexus-paper-white: var(--color-bg-card);    /* #FFFFFF */
  --nexus-paper-50:    var(--color-bg-page);    /* Beige */
  --nexus-paper-100:   var(--color-gray-1);     /* #F7F7F5 */
  --nexus-paper-200:   var(--color-border-row); /* #F2EFEA */
  --nexus-paper-300:   var(--color-border);     /* #E2DED8 */

  /* ===== Semantic (공식 Negative/Positive 매핑) ===== */
  --nexus-success: var(--color-positive);  /* #2A7A4E */
  --nexus-warning: #B8741C;
  --nexus-error:   var(--color-negative);  /* #C84B3A */
  --nexus-info:    var(--nova-primary);

  /* ===== Module Accent ===== */
  --module-calendar: #4A7C7E;
  --module-noms:     var(--nova-primary);
  --module-blogpay:  #B8741C;
  --module-settle:   #6B5B95;
  --module-crawl:    #A66B5A;

  /* ===== Spacing (§6 스페이싱 시스템) ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* §6 의미 단위 간격 토큰 */
  --gap-card:        9px;             /* 카드↔카드 / 그리드 gap */
  --gap-stat-table:  22px;           /* 스탯↔테이블 */
  --padding-card:    14px 16px;       /* 일반 카드 내부 */
  --padding-hero:    24px 28px;       /* 히어로 카드 내부 */
  --padding-content: 26px 28px 36px;  /* 페이지 콘텐츠 */
  --padding-row:     9px 14px;        /* 테이블 행 */

  /* ===== Radius (§4.1) ===== */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ===== Ledger 룩 토큰 (자금관리 디자인 표준 — 전역 승격) =====
     .nx-* 컴포넌트가 참조한다. 라운드는 ledger 고유값(부드러운 14/9px). */
  --radius-card:  14px;   /* .nx-card / .nx-hero 큰 라운드 */
  --radius-pill:  9px;    /* .nx-tab / .nx-btn-pill 라운드 */
  --radius-chip:  10px;   /* .nx-chip 라운드 */
  --nx-line:      var(--color-border);  /* 공식 테두리색으로 통일 */
  --nx-surface-soft: #FAFBFC;  /* acct-card / ded.info 연한 면 */

  /* ===== Border ===== */
  --border-subtle:  1px solid var(--color-border-row);
  --border-default: 1px solid var(--color-border);
  --border-strong:  1px solid var(--color-gray-3);

  /* ===== Shadow ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.08);

  /* ===== Motion ===== */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   300ms;

  /* ===== Typography ===== */
  --font-body: var(--theme-font-body, 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --font-mark: var(--theme-font-mark, 'Georgia', 'Times New Roman', serif);
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ===== Layout ===== */
  --nexus-bar-height: 48px;
  --module-header-height: 56px;
  --content-max-width: 1280px;
}

/* ==========================================
   테마 확장 (NEXUS_DESIGN_SYSTEM.md §8)
   ==========================================
   Primary 계열 변수만 교체한다.
   Gray / White / Beige · 타이포 · 간격은 테마 불변(여기서 손대지 않음).
   ========================================== */

/* 기본 테마 — Nova Blue (브랜드 공식 #123499) */
[data-theme="nova"] {
  --nova-primary:       #123499;
  --nova-primary-dark:  #0C2680;
  --nova-primary-mid:   #1A4BC4;
  --nova-primary-light: #E8EEF9;
}

/* 확장 테마 — Dark */
[data-theme="dark"] {
  --nova-primary:       #1E2028;
  --nova-primary-dark:  #16181C;
  --nova-primary-mid:   #3A3D48;
  --nova-primary-light: #2A2D38;
}

/* 확장 테마 — Slate */
[data-theme="slate"] {
  --nova-primary:       #1C1C1E;
  --nova-primary-dark:  #111113;
  --nova-primary-mid:   #3A3A3C;
  --nova-primary-light: #F0EFED;
}

/* ==========================================
   Base Reset
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--nexus-ink-900);
  background: var(--nexus-paper-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--nexus-ink-900);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

p { margin: 0; color: var(--nexus-ink-700); }

a {
  color: var(--nexus-blue-700);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--nexus-blue-900); }

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: 14px;
}

/* ==========================================
   Components — Button
   ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--nexus-blue-700);
  color: white;
}
.btn-primary:hover { background: var(--nexus-blue-900); }

.btn-secondary {
  background: white;
  color: var(--nexus-ink-900);
  border-color: var(--nexus-paper-300);
}
.btn-secondary:hover {
  background: var(--nexus-paper-100);
  border-color: var(--nexus-ink-300);
}

.btn-ghost {
  background: transparent;
  color: var(--nexus-ink-700);
}
.btn-ghost:hover {
  background: var(--nexus-paper-100);
  color: var(--nexus-ink-900);
}

.btn-danger {
  background: white;
  color: var(--nexus-error);
  border-color: var(--nexus-paper-300);
}
.btn-danger:hover {
  background: rgba(178, 58, 58, 0.06);
  border-color: var(--nexus-error);
}

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 14px; }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================
   Components — Input
   ========================================== */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--nexus-ink-900);
  background: white;
  border: 1px solid var(--nexus-paper-300);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.input:hover, input:hover, textarea:hover, select:hover {
  border-color: var(--nexus-ink-300);
}
.input:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--nexus-blue-700);
  box-shadow: 0 0 0 3px rgba(46, 67, 116, 0.08);
}
.input::placeholder, input::placeholder, textarea::placeholder {
  color: var(--nexus-ink-300);
}
.input:disabled, input:disabled {
  background: var(--nexus-paper-100);
  color: var(--nexus-ink-500);
  cursor: not-allowed;
}

label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--nexus-ink-700);
}

/* ==========================================
   Components — Card
   ========================================== */
.card {
  background: white;
  border: 1px solid var(--nexus-paper-200);
  border-radius: var(--radius-md);
  padding: 24px;
}

.card-flat {
  background: var(--nexus-paper-50);
  padding: 24px;
  border-radius: var(--radius-md);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nexus-paper-200);
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--nexus-ink-900);
}

/* ==========================================
   Components — Tag
   ========================================== */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  background: var(--nexus-paper-100);
  color: var(--nexus-ink-700);
  border: 1px solid var(--nexus-paper-300);
}
.tag-blue  { background: var(--nexus-blue-100); color: var(--nexus-blue-700); border-color: transparent; }
.tag-green { background: rgba(45, 122, 79, 0.10); color: var(--nexus-success); border-color: transparent; }
.tag-amber { background: rgba(184, 116, 28, 0.10); color: var(--nexus-warning); border-color: transparent; }
.tag-red   { background: rgba(178, 58, 58, 0.10); color: var(--nexus-error); border-color: transparent; }

/* ==========================================
   Components — Tab (module internal nav)
   ========================================== */
.tab {
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--nexus-ink-500);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.tab:hover {
  color: var(--nexus-ink-900);
  background: var(--nexus-paper-100);
}
.tab.is-active {
  color: var(--nexus-ink-900);
  background: var(--nexus-paper-100);
  font-weight: 600;
}

/* ==========================================
   Components — Table
   ========================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}
.table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--nexus-ink-500);
  background: var(--nexus-paper-50);
  border-bottom: 1px solid var(--nexus-paper-200);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.table td {
  padding: 12px;
  font-size: 14px;
  color: var(--nexus-ink-700);
  border-bottom: 1px solid var(--nexus-paper-200);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--nexus-paper-50); }

/* ==========================================
   Components — Toast
   ========================================== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(200%);
  background: var(--nexus-ink-900);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity 200ms ease-out,
              visibility 0s linear var(--duration-slow);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.toast.success { background: var(--nexus-success); }
.toast.error   { background: var(--nexus-error); }

/* ==========================================
   Components — Stat Card (위젯용)
   ========================================== */
.stat-card {
  background: white;
  border: 1px solid var(--nexus-paper-200);
  border-radius: var(--radius-md);
  padding: 16px;
}
.stat-label {
  font-size: 11px;
  color: var(--nexus-ink-500);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--nexus-ink-900);
  letter-spacing: -0.02em;
}
.stat-delta {
  font-size: 11px;
  margin-top: 4px;
}
.stat-delta.up   { color: var(--nexus-success); }
.stat-delta.down { color: var(--nexus-error); }

/* ==========================================
   Components — Widget (메인 페이지 위젯)
   ========================================== */
.widget {
  background: white;
  border: 1px solid var(--nexus-paper-200);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.widget:hover { border-color: var(--nexus-paper-300); }

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.widget-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nexus-ink-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.widget-icon { font-size: 14px; }
.widget-action {
  color: var(--nexus-ink-300);
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.widget-action:hover {
  background: var(--nexus-paper-100);
  color: var(--nexus-ink-700);
}
.widget-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--nexus-paper-200);
  font-size: 12px;
}
.widget-footer a {
  color: var(--nexus-blue-700);
  font-weight: 500;
}

.widget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) {
  .widget-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .widget-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   Layout — Nexus Bar (검정 상단)
   ========================================== */
.nexus-bar {
  background: var(--nexus-ink-900);
  color: rgba(255, 255, 255, 0.9);
  height: var(--nexus-bar-height);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.nexus-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nexus-brand-name {
  font-family: var(--font-mark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
}
.nexus-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 4px;
}
.nexus-wordmark {
  font-family: var(--font-mark);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #FAFAFA;
}

.module-switcher {
  margin-left: 32px;
  display: flex;
  gap: 2px;
}
.switcher-item {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--duration-fast) var(--ease-out);
}
.switcher-item:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}
.switcher-item.is-active {
  color: var(--nexus-ink-900);
  background: #FAFAFA;
  font-weight: 600;
}
.switcher-item.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nexus-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nexus-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nexus-blue-500);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================
   Layout — Module Header (흰색)
   ========================================== */
.module-header {
  background: white;
  border-bottom: 1px solid var(--nexus-paper-200);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--module-header-height);
}

.module-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.module-brand-tag {
  font-size: 10px;
  font-weight: 500;
  color: var(--nexus-ink-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.module-brand-name {
  font-family: var(--font-mark);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--nexus-ink-900);
}
.module-version {
  padding: 2px 8px;
  background: var(--nexus-paper-100);
  color: var(--nexus-ink-500);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
}

.module-nav {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

/* ==========================================
   Layout — Page
   ========================================== */
.page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 32px 24px;
}

.page-header {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--nexus-paper-200);
  margin-bottom: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--nexus-ink-900);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.page-subtitle {
  font-size: 13px;
  color: var(--nexus-ink-500);
}

.page-actions {
  display: flex;
  gap: 8px;
}

/* ==========================================
   Layout — Module Cards (홈 진입용)
   ========================================== */
.module-card {
  background: white;
  border: 1px solid var(--nexus-paper-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
  color: inherit;
  display: block;
}
.module-card:hover {
  border-color: var(--nexus-ink-300);
  transform: translateY(-1px);
}
.module-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--nexus-paper-50);
}

.module-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.module-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--nexus-paper-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.module-name {
  font-family: var(--font-mark);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--nexus-ink-900);
  margin-bottom: 4px;
}
.module-desc {
  font-size: 12px;
  color: var(--nexus-ink-500);
  line-height: 1.5;
}

/* ==========================================
   Components — Calendar Event (일정 막대)
   ========================================== */
.event {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  margin-bottom: 2px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--nexus-ink-700);
  background: var(--nexus-paper-100);
  border-left: 3px solid var(--nexus-ink-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 카테고리별 컬러 (왼쪽 띠) */
.event.cat-influencer {
  border-left-color: var(--nexus-blue-700);
}
.event.cat-holiday-kr {
  border-left-color: var(--nexus-error);
  background: rgba(178, 58, 58, 0.05);
}
.event.cat-holiday-cn {
  border-left-color: var(--nexus-warning);
  background: rgba(184, 116, 28, 0.05);
}
.event.cat-delivery {
  border-left-color: var(--nexus-success);
  background: rgba(45, 122, 79, 0.05);
}

/* 멀티데이 이벤트 */
.event.is-multiday {
  border-radius: 0;
  border-left: none;
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.event.is-multiday.cat-influencer {
  border-top-color: var(--nexus-blue-700);
  border-bottom-color: var(--nexus-blue-700);
}
.event.is-multiday.cat-holiday-kr {
  border-top-color: var(--nexus-error);
  border-bottom-color: var(--nexus-error);
}
.event.is-multiday.cat-holiday-cn {
  border-top-color: var(--nexus-warning);
  border-bottom-color: var(--nexus-warning);
}
.event.is-multiday.cat-delivery {
  border-top-color: var(--nexus-success);
  border-bottom-color: var(--nexus-success);
}

/* ==========================================
   Components — Calendar Grid
   ========================================== */
.calendar {
  background: white;
  border: 1px solid var(--nexus-paper-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calendar-toolbar {
  padding: 16px 20px;
  border-bottom: 1px solid var(--nexus-paper-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendar-month {
  font-size: 16px;
  font-weight: 600;
  color: var(--nexus-ink-900);
}

.calendar-legend {
  display: flex;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--nexus-paper-200);
  background: var(--nexus-paper-50);
}
.calendar-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--nexus-ink-500);
}
.calendar-legend-color {
  width: 10px;
  height: 3px;
  border-radius: 1px;
}

.calendar-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--nexus-paper-100);
  padding: 2px;
  border-radius: var(--radius-md);
}
.calendar-view-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--nexus-ink-500);
  border-radius: 4px;
  background: transparent;
}
.calendar-view-btn.is-active {
  background: white;
  color: var(--nexus-ink-900);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-day-header {
  padding: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--nexus-ink-500);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--nexus-paper-200);
}

.calendar-cell {
  min-height: 110px;
  padding: 8px;
  border-right: 1px solid var(--nexus-paper-200);
  border-bottom: 1px solid var(--nexus-paper-200);
  background: white;
}
.calendar-cell:nth-child(7n) { border-right: none; }

.calendar-cell.is-other-month {
  background: var(--nexus-paper-50);
}
.calendar-cell.is-other-month .calendar-cell-date {
  color: var(--nexus-ink-300);
}
.calendar-cell.is-today {
  background: var(--nexus-blue-50);
}
.calendar-cell.is-today .calendar-cell-date {
  color: var(--nexus-blue-700);
  font-weight: 700;
}

.calendar-cell-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--nexus-ink-700);
  margin-bottom: 4px;
}

/* ==========================================
   Utility
   ========================================== */
.muted   { color: var(--nexus-ink-500); }
.subtle  { color: var(--nexus-ink-300); }
.bold    { font-weight: 600; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.flex    { display: flex; }
.flex-1  { flex: 1; }
.gap-2   { gap: 8px; }
.gap-3   { gap: 12px; }
.gap-4   { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }

.hidden-visually {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}