:root {
    /* Brand Colors - Lifestyle Service Tone (Clean Indigo) */
    --primary-color: #4f46e5;
    /* Vibrant Indigo 600 - Single Main Color */
    --primary-gradient: #4f46e5;
    /* No complex gradient, solid brand color */

    --secondary-color: #4f46e5;
    /* Unify secondary to main for consistency */

    --background-color: #ffffff;
    /* Clean White Surface */
    --bg-sub: #f8fafc;
    /* Subtle Gray for cards/sections */

    --text-main: #111827;
    /* Gray 900 - Sharp */
    --text-sub: #64748b;
    /* Gray 500 */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    --surface: #ffffff;
    --border: rgba(226, 232, 240, 0.9);
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

    /* Spacing */
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --header-height: 60px;
    /* Reduced from 72px */
    --max-content: 720px;
    --page-pad: 16px;
    --thumb-mobile: 92px;
    --thumb-desktop: 120px;
}


.announcement-bar {
    width: 100%;
    /* Height handled by content padding or min-height if needed, but flex handles it. */
    min-height: 0;
    /* Neutral Tone for Announcement */
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 500;
    /* Lighter weight for "info" feel */
    color: #475569;
    /* Slate 600 - Neutral text */
    letter-spacing: -0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    /* No longer sticky */
    z-index: 10;
    /* Lower z-index, just needs to be above background */
    text-align: center;
    padding: 12px 16px;
    margin-bottom: 20px;
    /* Space between filters and content */
    opacity: 1;
    white-space: pre-wrap;
    line-height: 1.5;
}

.announcement-bar.hidden {
    min-height: 0;
    height: 0;
    padding: 0;
    margin-bottom: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

/* Remove body offset logic */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    background-color: var(--background-color);
    color: var(--text-main);
    padding-bottom: calc(20px + var(--safe-area-bottom));
}

/* Glassmorphism Utilities */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Layout */
.app-container {
    max-width: var(--max-content);
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
    padding: 0 var(--page-pad);
}

/* Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 16px;
}

.top-shell {
    position: sticky;
    top: 0;
    z-index: 110;
    padding-top: var(--safe-area-top);
    background: linear-gradient(to bottom, var(--background-color) 0%, rgba(248, 250, 252, 0.92) 60%, rgba(248, 250, 252, 0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Brand Link */
.brand-link {
    text-decoration: none;
    cursor: pointer;
}

.brand-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: var(--primary-color);
    letter-spacing: -0.5px;
    transition: opacity 0.2s;
    /* Removed gradient clip for solid clean look */
}

.brand-link:hover .brand-title {
    opacity: 0.8;
}

.header-actions {
    display: flex;
    gap: 8px;
    /* Compact gap */
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Space between button and stats */
}

/* Enhanced Report Button (Primary CTA) */
/* Simple Action Button */
.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 99px;
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.action-btn:active {
    transform: scale(0.96);
    background: #f8fafc;
}

/* Enhanced CTA Button Style (Matching User Image) */
.report-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 14px;
    /* Refined Report Button: Simple Outline Style */
    background: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    box-shadow: none;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    width: auto;
    height: 32px;
    line-height: normal;
    white-space: nowrap;
    /* Prevent wrapping */
}

@media (max-width: 400px) {
    .report-cta-btn {
        font-size: 12px;
        padding: 0 10px;
        letter-spacing: -0.5px;
    }

    .header-actions {
        gap: 6px;
    }

    .header-right {
        gap: 8px;
    }
}

.report-cta-btn:active {
    transform: scale(0.96);
    background: rgba(99, 102, 241, 0.05);
    /* Slight tint on press */
    box-shadow: none;
}


/* Removed .cta-icon, .cta-content, .cta-title, .cta-subtext as they are no longer used */

/* Stats Pills - Stylish */
.stats-pills {
    display: flex;
    gap: 6px;
}

.stat-pill {
    font-size: 11px;
    /* Slightly larger */
    font-weight: 600;
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: #475569;
    /* Slate 600 - dark enough to be visible */
    border: none;
    white-space: nowrap;
}

.stat-pill strong {
    color: var(--primary-color);
    /* Restore point color for numbers */
    font-weight: 800;
    margin-left: 2px;
}

/* Sticky Controls Section - Compact */
.controls-section {
    margin-top: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 16px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compact Controls Row */
.controls-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Reduced gap */
    min-width: 0;
}

.controls-search-row .search-container {
    flex: 1 1 auto;
    min-width: 0;
}

.controls-search-row .filter-summary-btn {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 10px;
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.controls-search-row .filter-summary-text {
    font-size: 12px;
    /* Slightly smaller */
    font-weight: 800;
}

.controls-search-row .filter-summary-meta {
    font-size: 10px;
    /* Slightly smaller */
    font-weight: 800;
    color: #64748b;
    white-space: nowrap;
}

.controls-search-row .search-input {
    padding: 0 10px 0 32px;
    font-size: 13px;
    border-radius: 10px;
    height: 32px;
    box-sizing: border-box;
    line-height: normal;
    width: 100%;
    transition: width 0.3s ease;
}

.controls-search-row .search-input:focus {
    width: 240px;
    /* Expand on focus */
}

.controls-search .search-icon {
    left: 12px;
    font-size: 14px;
}

/* Collapsible Filters Panel (CSS-only) */
.filters-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.filters-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2300;
    background: transparent;
}

.controls-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-summary-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-main);
}

.filter-summary-text {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}

.filter-summary-chevron {
    transition: transform 0.2s ease;
    color: #64748b;
}

.filters-panel {
    display: none;
    background: #fff;
    isolation: isolate;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2400;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 -16px 40px rgba(15, 23, 42, 0.18);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 14px 14px calc(18px + var(--safe-area-bottom));
    max-height: calc(100dvh - 12px - var(--safe-area-top));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Open state (toggled by JS for iOS fixed/backdrop-filter issues) */
.filters-open .filters-panel {
    display: block;
}

.filters-open .filters-backdrop {
    display: block;
}

.filters-open .filter-summary-chevron {
    transform: rotate(180deg);
}

.filters-panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding-bottom: 10px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group-title {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: -0.2px;
}

.filters-actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.period-search {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    display: flex;
    align-items: center;
    gap: 10px;
}

.period-title {
    display: none;
}

.period-chips {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.period-chip {
    flex: 0 0 auto;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.period-chip.active {
    background: #818cf8;
    border-color: #818cf8;
    color: #fff;
}

.period-chip:active {
    transform: scale(0.98);
}

.period-range {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.period-date {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
}

.period-tilde {
    flex: 0 0 auto;
    color: #64748b;
    font-weight: 800;
}

@media (max-width: 480px) {
    .period-search {
        gap: 8px;
    }

    .period-chip {
        padding: 7px 10px;
        font-size: 12px;
    }

    .period-date {
        height: 30px;
        padding: 0 8px;
        font-size: 12px;
    }
}

.filters-apply-btn {
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 800;
    color: white;
    background: var(--primary-gradient);
    box-shadow: 0 10px 22px rgba(99, 102, 241, 0.22);
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.filters-apply-btn:active {
    transform: scale(0.98);
    filter: brightness(0.98);
}

.filters-reset-btn {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 999px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 800;
    color: #334155;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.filters-reset-btn:active {
    transform: scale(0.98);
    filter: brightness(0.98);
}

/* Search Bar (First) */
.search-container {
    position: relative;
    width: 100%;
}


.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.filters-panel .search-input {
    padding-right: 16px;
}

.filters-close-btn {
    position: static;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    font-size: 16px;
    font-weight: 900;
    color: #64748b;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.filters-close-btn:active {
    transform: scale(0.96);
}

.filters-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.filters-panel-title {
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.2px;
}

.filters-panel-search {
    margin-bottom: 10px;
}

/* When search input is moved into the panel (mobile) */
.filters-panel .search-container {
    width: 100%;
}

/* Compact Mode Toggle */
.mode-toggle {
    display: flex;
    gap: 4px;
    width: 100%;
    margin-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

/* Compact Toggle Button */
.toggle-btn {
    flex: 1;
    border: 1px solid var(--border);
    background: white;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 32px;
}

.toggle-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
    /* Soft Indigo Shadow */
    font-weight: 700;
}


/* Filters (Stacked) */
.filters-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    /* Wrap chips */
    gap: 8px;
}

.filter-chip {
    flex: 0 0 auto;
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-chip.active {
    /* Changed from black to soft Primary/Secondary mix */
    background: #818cf8;
    /* Soft Indigo */
    color: white;
    border-color: #818cf8;
    font-weight: 600;
}

.filter-chip.active-special {
    background: var(--primary-gradient);
    color: white;
    border: none;
}

/* 모바일에서 필터칩 4개씩 한 줄 고정 */
@media (max-width: 480px) {
    .filter-row .filter-chip {
        flex: 0 0 calc(25% - 6px);
        max-width: calc(25% - 6px);
        text-align: center;
        justify-content: center;
    }
}

/* Desktop: dropdown (wide + fine pointer) */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .filters-panel {
        top: calc(12px + var(--safe-area-top) + 66px);
        bottom: auto;
        left: 50%;
        transform: translateX(-50%);
        width: min(720px, calc(100vw - 24px));
        border: 1px solid rgba(148, 163, 184, 0.35);
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
        border-radius: 18px;
        padding: 14px;
    }
}

/* Content Area */
.content-area {
    padding: 10px 0 24px;
}

/* Filter summary chips (below search bar) */
.summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 2px 2px;
    align-items: center;
}

.summary-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(79, 70, 229, 0.2);
    /* Subtle Brand Border */
    background: #eef2ff;
    /* Filter Highlight (Hongdae) */
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    height: 32px;
}

.summary-chip.count {
    border: 1px solid #e2e8f0;
    /* Neutral Border */
    background: #f8fafc;
    /* Neutral bg */
    color: #64748b;
    /* Neutral text */
    font-weight: 500;
}

/* Glassmorphism Base Class */
.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    /* Softer base shadow */
    border-radius: 20px;
}

/* Card List Container */
.card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    align-items: center;
}

/* Date Grouping (Milonga) */
.day-group {
    width: 100%;
    max-width: var(--max-content);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.day-group-header {
    width: 100%;
    padding: 4px 4px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.day-group-title {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 900;
    letter-spacing: -0.4px;
    color: var(--text-main);
}

.day-group-relative {
    font-size: 18px;
    font-weight: 900;
}

.day-group-relative.label-today {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.day-group-relative.label-tomorrow {
    color: var(--primary-color);
}

.day-group-relative.label-dafter {
    color: #64748b;
    font-size: 16px;
}

.day-group-date {
    font-size: 16px;
    color: #334155;
    font-weight: 700;
}

.day-group-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* Month Grouping (EVENT) */
.month-group {
    width: 100%;
    max-width: var(--max-content);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.month-group-header {
    width: 100%;
    padding: 6px 4px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.month-group-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.4px;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.month-group-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* Event Card (Renamed from .event-card to match JS .card) */
.card {
    width: 100%;
    max-width: var(--max-content);
    display: grid;
    grid-template-columns: var(--thumb-mobile) 1fr;
    align-items: center;
    padding: 12px;
    gap: 12px;
    background: var(--surface);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Hover Effect */
.card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
}

/* Card Badges Container (Renamed from .card-badges-wrapper to .card-badge match JS) */
.card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

/* Legacy badge styles (kept for compatibility if rendered) */
.card-badge-area,
.card-badge-cat,
.card-badge-day {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 8px;
    border-radius: 6px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
}

/* Specific Badge Colors */
.card-badge-area {
    background: #64748b;
    /* Slate 500 */
}

.card-badge-cat {
    background: #8b5cf6;
    /* Violet 500 */
}

.card-badge-day {
    background: var(--primary-gradient);
    font-size: 22px;
    min-width: 28px;
    height: 28px;
}

.card-badge .card-exposure-badges {
    margin: 0;
    gap: 6px;
    flex-direction: column;
    align-items: flex-end;
}

.card-badge .card-exposure-badge {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.card-exposure-badge--more {
    background: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.45);
    color: #475569;
}

@media (max-width: 480px) {
    .card-exposure-badges {
        gap: 5px;
    }

    .card-exposure-badge {
        height: 18px;
        padding: 0 6px;
        font-size: 10px;
    }

    .card-badge {
        top: 10px;
        right: 10px;
        gap: 4px;
    }
}

/* Card Image */
.card-img {
    width: var(--thumb-mobile);
    height: var(--thumb-mobile);
    border-radius: 14px;
    object-fit: contain;
    background-color: #f1f5f9;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    flex-shrink: 0;
}

/* Card Info */
.card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 3px;
    padding-right: 20px;
}

.card-brand {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.card-date {
    display: none;
    /* We moved date info to badge mostly, or just showing time now */
}

/* Update Title to avoid badge overlap if needed, but flex layout handles vertical center.
   Badges are absolute. Let's add padding-top to card-info just in case or ensure title doesn't hit badges.
   Actually, with absolute badges, we might want to push content down or limit width.
   Let's just keep simple for now. */

/* Title */
.card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 480px) {
    .card-title {
        font-size: 14px;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-right: 60px;
        /* Space for badges */
    }
}

.card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.card-exposure-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-top: 2px;
}

.card-exposure-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: -0.2px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(241, 245, 249, 0.85);
    color: #334155;
    white-space: nowrap;
}

.card-exposure-badge[data-badge="HOT"] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #b91c1c;
}

.card-exposure-badge[data-badge="NEW"] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
    color: #047857;
}

.card-exposure-badge[data-badge="SPECIAL"] {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.25);
    color: #6d28d9;
}

.card-exposure-badge[data-badge="SHOW"] {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    color: #1d4ed8;
}

.card-exposure-badge[data-badge="ANNIVERSARY"] {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.28);
    color: #92400e;
}

.card-note {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Time Row */
.card-time {
    font-size: 12px;
    color: #334155;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta Row (Org / DJ) */
.card-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: #6b7280;
    margin-top: 1px;
}

.card-meta-item {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Community / Open chat micro links */
.card-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.2;
    color: #6b7280;
}

.card-mini-link {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.25);
    background: rgba(139, 92, 246, 0.08);
    color: #5b21b6;
    font-weight: 800;
    text-decoration: none;
}

.card-mini-link:hover {
    background: rgba(139, 92, 246, 0.12);
}

.card-mini-text {
    display: inline-flex;
    align-items: center;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* View Details Action Cue (Subtle Shape) */
/* View Details Action Cue (Subtle Shape) - Visible by default on Mobile $(<768px) */
.card-action-cue {
    position: absolute;
    right: 12px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 16px;
    font-weight: 900;
    opacity: 0.28;
    background: transparent;
    border: none;
    pointer-events: none;
}

/* Hide action cue on Desktop */
@media (min-width: 768px) {
    .card-action-cue {
        display: none !important;
    }
}

.action-label {
    display: inline;
}

.header-left {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.brand-title {
    font-size: 22px;
}

.card {
    grid-template-columns: var(--thumb-desktop) 1fr;
    padding: 14px;
}

.card-img {
    width: var(--thumb-desktop);
    height: var(--thumb-desktop);
}

.card-title {
    font-size: 16px;
}
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    display: flex;
    animation: fadeIn 0.15s ease-out;
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 400px;
    border-radius: 20px;
    padding: 24px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

/* Mobile: use dynamic viewport + safe areas */
@media (hover: none),
(pointer: coarse) {
    #modal-report .modal-content {
        max-height: calc(100dvh - 24px - var(--safe-area-top));
        padding-bottom: calc(18px + var(--safe-area-bottom));
    }

    #modal-detail .modal-content {
        max-height: calc(100dvh - 24px - var(--safe-area-top));
        padding-bottom: calc(18px + var(--safe-area-bottom));
    }
}

.modal-content #detail-content {
    color: #0f172a;
}

/* Detail Modal (Milonga / Event) */
#modal-detail .modal-content {
    max-width: var(--max-content);
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

#modal-detail .close-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.9);
    display: grid;
    place-items: center;
    line-height: 1;
}

#modal-detail #detail-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

#modal-detail #detail-content h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.3px;
}

#modal-detail #detail-content h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.2px;
}

#modal-detail #detail-content p {
    margin: 0;
}

#modal-detail #detail-content strong {
    color: #0f172a;
    font-weight: 900;
    display: inline-block;
    min-width: 44px;
}

#modal-detail #detail-content a.action-btn,
#modal-detail #detail-content a.map-btn {
    border-radius: 999px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    background: #fff !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

#modal-detail #detail-content a.map-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

#modal-detail #detail-content a.map-btn::before {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.9);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    flex: 0 0 auto;
}

#modal-detail #detail-content a.map-btn.naver::before {
    background-image: url('/assets/icons/naver-map.svg');
}

#modal-detail #detail-content a.map-btn.google::before {
    background-image: url('/assets/icons/google-maps.svg');
}

#modal-detail #detail-content>div[style*="margin-top:20px"] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* brand info 내부에서 지도 버튼을 맨 아래로 */
#modal-detail #detail-content>div[style*="margin-top:20px"]>div:nth-of-type(2) {
    order: 3;
    margin-bottom: 0 !important;
}

#modal-detail #detail-content>div[style*="margin-top:20px"]>div:nth-of-type(3) {
    order: 4;
}

#modal-detail #detail-content a.action-btn:active,
#modal-detail #detail-content a.map-btn:active {
    transform: scale(0.98);
}

@media (min-width: 768px) {
    #modal-detail .modal-content {
        padding: 22px;
    }

    #modal-detail #detail-content h2 {
        font-size: 20px;
    }
}

.close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
}

/* Report form (from backup) */
.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.form-group input {
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.drop-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: 0.2s;
}

.drop-zone.dragover {
    border-color: #667eea;
    background: #eef2ff;
}

.drop-zone-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.drop-zone-text {
    color: #64748b;
    font-size: 13px;
}

.image-thumbs {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 8px;
}

.image-thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
}

.image-thumbs img[data-primary="true"] {
    outline: 3px solid rgba(245, 158, 11, 0.95);
    outline-offset: 2px;
}

/* Ensure many thumbnails are accessible on mobile */
@media (hover: none),
(pointer: coarse) {
    .image-thumbs {
        max-height: 200px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

/* 지도 버튼 */
.map-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: white;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.map-btn.naver {
    color: #0eca63;
}

.map-btn.google {
    color: #ea4335;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile Tweaks */
@media (max-width: 480px) {
    .card-list {
        gap: 12px;
    }
}

/* Info Popover */
.info-popover {
    position: absolute;
    top: 60px;
    right: 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 2500;
    width: 220px;
    animation: fadeIn 0.15s ease-out;
}

.info-content h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
}

.info-content p {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-sub);
}

.info-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s;
}

.info-link:hover {
    background: #f1f5f9;
    color: var(--primary-color);
}

.info-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    color: #cbd5e1;
    text-align: center;
}

/* Image Modal Specifics for Zooming */
#modal-image {
    background: rgba(0, 0, 0, 0.9);
    cursor: zoom-out;
}

#modal-image .modal-content {
    background: transparent;
    box-shadow: none;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Contain the image but allow transform to exceed */
}

#modal-img-full {
    width: auto;
    height: auto;
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    touch-action: none;
    /* Essential for custom pinch/pan */
    user-select: none;
    -webkit-user-drag: none;
    cursor: grab;
}

#modal-img-full:active {
    cursor: grabbing;
}

#modal-image .close-btn {
    color: white;
    z-index: 3100;
}

/* Event Type Badges & Special Mode Filters */
.card-exposure-badge[data-badge="FESTIVAL"] {
    background: #ef4444;
    /* Red */
    color: #fff;
    font-weight: 800;
}

.card-exposure-badge[data-badge="WORKSHOP"] {
    background: #3b82f6;
    /* Blue */
    color: #fff;
    font-weight: 800;
}

.filter-chip.active-special {
    background: var(--primary-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
    font-weight: 800;
}

.month-group-title {
    font-size: 19px;
    font-weight: 900;
    color: #1e293b;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    padding-left: 4px;
}

/* Service Description below Logo */
.brand-desc {
    margin: 4px 0 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    /* Slate 600 - Visible but subtitle */
    letter-spacing: -0.3px;
    line-height: 1.3;
    white-space: nowrap;
}

/* --- Announcement Section (Dual Cards) --- */
.announcement-section {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Desktop: 2 columns */
    gap: 12px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

/* Mobile: Stack vertically */
@media (max-width: 640px) {
    .announcement-section {
        grid-template-columns: 1fr;
    }
}

.announcement-section.hidden {
    display: none;
}

.announcement-card {
    background: #f8fafc;
    /* Soft Slate Fill */
    border: none;
    /* No Border for cleaner look */
    border-radius: 16px;
    padding: 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    /* Slightly Darker Text for readability */
    line-height: 1.5;
    white-space: pre-wrap;
    text-align: left;
    word-break: break-word;
    display: flex;
    align-items: center;
    min-height: 60px;
    /* Removed shadow for flat clean design or use extremely subtle one */
}

@media (max-width: 640px) {
    .announcement-section {
        grid-template-columns: 1fr;
        gap: 8px;
        /* Tighter gap on mobile */
        margin-bottom: 16px;
        /* Reduced bottom margin */
    }

    .announcement-card {
        padding: 12px;
        /* Compact padding */
        min-height: auto;
        /* Allow smaller height */
        font-size: 13px;
    }
}

.announcement-card.hidden {
    display: none;
}

/* Ensure full width if only one card is visible? 
   User said "Dashboard control on/off". 
   If layout is strict 2-col, hiding one leaves a gap. 
   We will handle this via JS or CSS has-selector logic if possible, 
   but grid is simplest. If card2 is hidden, card1 is just one side.
   If user wants "Single card fills width", we need dynamic class.
   For now, strictly following "2 cards split structure" request.
*/

/* --- Bottom Report Banner --- */
.report-bottom-banner {
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 32px 20px;
    background: #f8fafc;
    /* Match announcement card bg */
    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.banner-text {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    /* Slate 700 */
    margin: 0;
    line-height: 1.4;
}

.banner-btn {
    background: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.banner-btn:active {
    transform: scale(0.96);
    background: #eff6ff;
}