/* calendar.css — 탭 캘린더 전용 스타일 (2026-08-05 신설)
 * 규칙: 색·간격·폰트·radius 하드코딩 금지 → tokens.css 변수만 사용.
 *       다크모드는 토큰 재정의로 자동 대응하므로 [data-theme="dark"] 분기는 최소.
 *       충돌 방지를 위해 커스텀 클래스는 전부 cal- 접두사.
 */

/* 탭 패널 악센트 (components.css의 패널별 상단 보더 관례와 동일) */
#panel-calendar .card { border-top: 3px solid var(--brand); }

/* 캘린더 로컬 토큰 — 컬러 바 위 텍스트 색 (팔레트 색이 모두 진한 채도라 흰색 고정) */
.cal-grid, .cal-legend { --cal-on-accent: #ffffff; }

/* ── 월 이동 내비 ─────────────────────────────────────────────── */
.cal-nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cal-nav-btn { min-width: 40px; font-size: var(--fs-small); }
.cal-nav-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; min-width: 120px; text-align: center; }

/* ── 그리드 ───────────────────────────────────────────────────── */
.cal-scroll { overflow-x: auto; }
.cal-grid-wrap { min-width: 720px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cal-grid-head { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.cal-grid-head + .cal-grid { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

.cal-dow { background: var(--surface-sub); color: var(--ink-2); font-size: var(--fs-caption); font-weight: 700; text-align: center; padding: var(--sp-2) 0; }
.cal-dow.cal-weekend { color: var(--ink-3); }

.cal-cell { background: var(--surface); min-height: 92px; padding: var(--sp-1) var(--sp-1) var(--sp-2); display: flex; flex-direction: column; gap: 2px; }
.cal-cell.cal-blank { background: var(--surface-sub); }
.cal-cell.cal-weekend { background: var(--surface-sub); }
.cal-cell.cal-has { cursor: help; }
.cal-cell.cal-has:hover { box-shadow: inset 0 0 0 1px var(--primary); }
.cal-cell.cal-today { background: var(--info-bg); box-shadow: inset 0 0 0 2px var(--primary); }

.cal-date { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: var(--sp-1); padding-left: 2px; }
.cal-weekend .cal-date { color: var(--ink-3); }
.cal-today .cal-date { color: var(--primary); }
.cal-today-tag { font-size: 9.5px; font-weight: 700; color: var(--primary); background: var(--surface); border-radius: var(--radius-pill); padding: 0 6px; }

/* ── 기획전 기간 바 ───────────────────────────────────────────── */
.cal-bars { display: flex; flex-direction: column; gap: 2px; }
.cal-bar { height: 15px; line-height: 15px; border-radius: 0; overflow: hidden; }
.cal-bar.cal-bar-empty { background: transparent; }
.cal-bar-start { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.cal-bar-end { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.cal-bar-txt { display: block; font-size: 10px; font-weight: 700; color: var(--cal-on-accent); padding: 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 발송 마커 ────────────────────────────────────────────────── */
.cal-sends { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.cal-send { display: flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; border-radius: var(--radius-sm); padding: 1px 4px; overflow: hidden; }
.cal-send-email { color: var(--info); background: var(--info-bg); }
/* PUSH는 다크모드 대비 확보를 위해 잉크 톤 + 표면색 (채널 구분은 아이콘이 담당) */
.cal-send-push { color: var(--ink-2); background: var(--surface-sub); box-shadow: inset 0 0 0 1px var(--border); }
.cal-send.cal-send-plan { opacity: .62; }
.cal-send-ico { flex: none; }
.cal-send-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-send-rate { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ── 범례 ─────────────────────────────────────────────────────── */
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--ink-2); }
.cal-legend-item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.cal-note { color: var(--ink-3); font-weight: 400; }

/* ── 기획전 팔레트 (기획전 명 기준 순환 — 토큰 색 재사용) ─────── */
.cal-c0 { background: var(--ch-google); }
.cal-c1 { background: var(--ch-meta); }
.cal-c2 { background: var(--ch-criteo); }
.cal-c3 { background: var(--acc-revenue); }
.cal-c4 { background: var(--ch-reddit); }
.cal-c5 { background: var(--ch-snapchat); }
.cal-c6 { background: var(--brand-strong); }
.cal-c7 { background: var(--acc-kpi); }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cal-cell { min-height: 76px; }
  .cal-nav-title { font-size: var(--fs-body); min-width: 96px; }
}