/* ============================================================
 * V2 Base — 디자인 토큰 + 배지·카드 통일
 * (모든 레이아웃 변형 A/B/C 공통)
 * ============================================================ */

/* ============================================================
 * [1] DESIGN TOKENS — 색은 인디고 그대로 유지
 * ============================================================ */
:root {
    --brand: #4f46e5;
    --brand-hover: #4338ca;
    --brand-soft: rgba(79, 70, 229, 0.08);
    --brand-ring: rgba(79, 70, 229, 0.22);

    /* 의미별 액센트는 최소화 — 강조가 정말 필요한 곳만 */
    --accent-alert: #dc2626;            /* SOLD OUT, 취소 */
    --accent-alert-soft: rgba(220, 38, 38, 0.08);

    /* Surface */
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #f1f5f9;

    /* Text */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    /* Border */
    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    /* Radius */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-pill: 999px;

    /* Spacing */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;

    /* Shadow */
    --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --sh-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --sh-lg: 0 10px 30px rgba(15, 23, 42, 0.08);

    /* 호환 매핑 */
    --primary-color: var(--brand);
    --primary-gradient: var(--brand);
    --secondary-color: var(--brand);
    --background-color: var(--surface);
    --bg-sub: var(--surface-2);
    --text-main: var(--text-primary);
    --text-sub: var(--text-secondary);
    --shadow: var(--sh-md);
}

body { background: var(--bg); }
.app-container { background: var(--bg); }

/* ============================================================
 * [1.5] FONT — Wanted Sans (모던, 둥글고 친근)
 * 모든 요소에 적용 (인라인 스타일 제외)
 * ============================================================ */
html, body,
button, input, textarea, select,
.brand-title, .card, .card-title, .card-meta-row, .card-meta-item,
.toggle-btn, .quick-nav-btn, .week-jump-day, .week-jump-info-bar,
.search-input, .filter-summary-btn, .report-cta-btn, .i18n-toggle-btn,
.card-exposure-badge, .card-badge-area, .card-badge-cat, .card-badge-day,
.summary-chip, .tn-footer-credit, .announcement-card, .announcement-action-btn {
    font-family: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard', 'Apple SD Gothic Neo', sans-serif !important;
}

/* ============================================================
 * [2] BADGES — 현재 인디고/화이트 디자인에 맞춘 절제된 톤
 *
 * 디자인 매칭 원칙:
 *  - 글래스 패널 + 인디고 액센트 + 화이트 표면이 메인
 *  - 카드는 차분한 종이 같은 느낌 → 배지가 시끄러우면 안 됨
 *  - 배지는 "메타데이터" 일뿐 → 라벨로 의미 구분, 색은 위계만
 *
 * 색 시스템 (단 3단계, 모두 brand 인디고 패밀리 + 알림 1):
 *   1. NEUTRAL  — 대부분의 정보 배지 (무채 ink-tint)
 *                 요일·지역·워크샵·페스티벌·대회·기본·레벨·HOT·SPECIAL·SHOW·ANNIVERSARY
 *   2. ACCENT   — 시선 유도 가치 있는 정보 (brand soft)
 *                 NEW · 상시운영
 *   3. ALERT    — 경고/금지 정보 (red soft)
 *                 SOLD OUT · 취소(canceled)
 *
 * 모양 (모두 동일):
 *   - 높이 20px · 모서리 6px · 폰트 10px · 굵기 700
 *   - 패딩 좌우 8px · letter-spacing 0.3px
 *   - 테두리 없음 · 그림자 없음
 *   - 배경: 8% 알파 색 / 글씨: 짙은 동계열 600~700
 * ============================================================ */

.card-exposure-badge,
.card-badge-area,
.card-badge-cat,
.card-badge-day {
    height: 20px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    line-height: 20px !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-transform: none !important;
    font-family: 'Pretendard', 'Inter', sans-serif !important;
}

/* ---- [1] NEUTRAL — 기본 (대부분의 배지) ----
 * 파스텔 slate(#f1f5f9) + slate-700 — 또렷하면서 부드러움 */
.card-exposure-badge,
.card-badge-area,
.card-badge-cat {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

/* 명시 적용 — 인라인 스타일 덮어쓰기 */
.card-exposure-badge[data-badge="REGION"],
.card-exposure-badge[data-badge="LEVEL"],
.card-exposure-badge[data-badge="WORKSHOP"],
.card-exposure-badge[data-badge="FESTIVAL"],
.card-exposure-badge[data-badge="COMPETITION"],
.card-exposure-badge[data-badge="BASIC"],
.card-exposure-badge[data-badge="HOT"],
.card-exposure-badge[data-badge="SPECIAL"],
.card-exposure-badge[data-badge="SHOW"],
.card-exposure-badge[data-badge="ANNIVERSARY"] {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

/* 요일 — 인디고 파스텔(#e0e7ff) + indigo-900. 또렷하지만 부드러움 */
.card-exposure-badge[data-badge="DAY"] {
    min-width: 22px !important;
    font-weight: 800 !important;
    background: #e0e7ff !important;
    color: #312e81 !important;
}

/* ---- [2] ACCENT — NEW(브랜드 풀) · 상시(브랜드 연) ---- */
.card-exposure-badge[data-badge="NEW"] {
    background: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}
.card-exposure-badge[data-badge="STATUS"] {
    background: #ddd6fe !important;
    color: #5b21b6 !important;
    font-weight: 800 !important;
}

/* ---- [3] ALERT — red 파스텔 (SOLD OUT · CANCELED) ---- */
.card-exposure-badge[data-badge="SOLD OUT"],
.card-exposure-badge[data-badge="SOLDOUT"],
.card-exposure-badge[data-badge="CANCELED"],
.card-exposure-badge[data-badge="CLOSED"] {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    font-weight: 800 !important;
}

/* ---- More chip (+N 더보기) ---- */
.card-exposure-badge--more {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 0 4px !important;
}

/* ---- legacy card-badge-day (혹시 남아있는 경우) ---- */
.card-badge-day {
    background: #e0e7ff !important;
    color: #312e81 !important;
    min-width: 22px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
}

/* canceled card */
.card.is-canceled,
.card[data-status="canceled"] { opacity: 0.6; }

/* ============================================================
 * [3] CARDS — 통일된 모양·여백
 * ============================================================ */
.card-list {
    gap: var(--s-2) !important;
    padding: var(--s-3) var(--s-3) var(--s-6) !important;
}

.card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-sm) !important;
    padding: var(--s-3) !important;
    gap: var(--s-3) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--sh-md) !important;
}

.card-thumb,
.card img.card-thumb { border-radius: var(--r-md) !important; }

.card-info { gap: 2px !important; min-width: 0; }

.card-title {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px;
}

.card-meta-row,
.card-meta-item {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
}
.card-meta-item .icon { color: var(--text-muted) !important; }

/* card-badge container (배지 wrapper) — 정렬·간격 통일 */
.card-badge { gap: 4px !important; }
.card-badge .card-exposure-badges { gap: 4px !important; }

/* ============================================================
 * [4] CHIPS / SUMMARY
 * ============================================================ */
.summary-chip {
    height: 22px;
    padding: 0 var(--s-2);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ============================================================
 * [5] FOOTER
 * ============================================================ */
.tn-footer-credit {
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    padding: var(--s-4) 0 var(--s-6);
}