/* ==========================================================================
   components.css - Reusable UI Components (Scrollbar, Loader, Modal, Toast, Skeleton)
   ========================================================================== */

/* 1. Custom Scrollbar (?뱁궥 釉뚮씪?곗? 而ㅼ뒪?€ ?붿옄?? */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* 2. Top Progress Bar (?곷떒 ?좏뒠釉??ㅽ???濡쒕뵫 諛? */
.top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
}

.top-progress-bar.loading {
    opacity: 1;
}

/* 3. Theme Toggle Button Details */
.theme-toggle-btn .theme-icon {
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

/* ?쇱씠??紐⑤뱶?????€截??④린怨??뙔 蹂댁엫 */
.theme-toggle-btn .icon-sun {
    display: none;
}
.theme-toggle-btn .icon-moon {
    display: block;
    color: var(--text-muted);
}

/* ?ㅽ겕 紐⑤뱶?????뙔 ?④린怨??€截?蹂댁엫 */
body.dark-mode .theme-toggle-btn .icon-sun {
    display: block;
    color: #fbbf24;
}
body.dark-mode .theme-toggle-btn .icon-moon {
    display: none;
}

/* 4. 怨듯넻 紐⑤떖 (Modal) Component */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-container {
    background-color: var(--bg-card);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.3s ease, border-color 0.3s ease;
}

.modal-overlay.is-active .modal-container {
    transform: translateY(0) scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--deep-sea-dark);
}

.modal-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
    color: var(--text-muted);
    border-radius: 50%;
    transition: var(--transition-smooth);
}
.modal-close-btn:hover {
    color: var(--deep-sea-dark);
    background-color: var(--bg-primary);
    transform: rotate(90deg);
}

.modal-body {
    padding: 2rem 1.5rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background-color: var(--bg-sidebar);
    border-top: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-modal-cancel {
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-muted);
}
.btn-modal-cancel:hover {
    background-color: var(--bg-primary);
    color: var(--deep-sea-dark);
}

.btn-modal-confirm {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px var(--primary-glow);
}
.btn-modal-confirm:hover {
    background-color: var(--primary-hover);
}

/* 5. ?좎뒪???뚮┝ (Toast Notification) Component */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast-item {
    pointer-events: auto;
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 300px;
    max-width: 450px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.4s ease, background-color 0.3s ease, border-color 0.3s ease;
}

body.dark-mode .toast-item {
    background-color: var(--bg-sidebar);
}

.toast-item.show {
    transform: translateX(0);
    opacity: 1;
}

/* 6. ?ㅼ펷?덊넠 UI (Skeleton Loading) Component */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-card {
    background-color: var(--bg-card);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.skeleton-item {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}

body.dark-mode .skeleton-item {
    background: linear-gradient(90deg, #1e293b 25%, #334155 37%, #1e293b 63%);
    background-size: 200% 100%;
}

.skeleton-header-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.skeleton-title {
    height: 24px;
    width: 35%;
}

.skeleton-content-box {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-text-line {
    height: 16px;
    width: 100%;
}

.skeleton-text-line.short {
    width: 60%;
}

/* 7. Components Responsive Media queries */
@media (max-width: 768px) {
    .toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
    .toast-item {
        min-width: unset;
        width: 100%;
    }
    .skeleton-card {
        padding: 2rem 1.5rem;
    }
}

/* 8. MyPage Dashboard Components */
.mypage-dashboard {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Chat analytics predictive operations */
.chat-prediction-report{margin:18px 0;padding:24px;border:1px solid var(--border-color);border-top:3px solid #7c3aed;border-radius:8px;background:var(--bg-card,var(--card-bg));box-shadow:0 12px 30px rgba(15,23,42,.06)}
.chat-prediction-report>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.chat-prediction-report h2,.chat-prediction-report h3,.chat-prediction-report p{margin:0}.chat-prediction-report>header h2{font-size:1.35rem}.chat-prediction-report>header p{margin-top:5px;color:var(--text-secondary);font-size:.9rem;line-height:1.6}.chat-prediction-confidence{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:6px;background:color-mix(in srgb,#7c3aed 10%,var(--bg-card,#fff));color:#6d28d9;font-size:.78rem;font-weight:900;white-space:nowrap}
.chat-prediction-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}.chat-prediction-overview article{padding:18px;border:1px solid var(--border-color);border-radius:7px;background:var(--soft-bg,#f8fafc)}.chat-prediction-overview span{display:flex;align-items:center;gap:7px;color:var(--text-secondary);font-size:.82rem;font-weight:800}.chat-prediction-overview span i{color:#7c3aed}.chat-prediction-overview strong{display:block;margin-top:10px;font-size:1.55rem}.chat-prediction-overview small{display:block;margin-top:5px;color:var(--text-secondary);font-size:.74rem}
.chat-prediction-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);gap:14px;margin-top:14px}.chat-prediction-layout>section,.chat-prediction-layout>aside{padding:18px;border:1px solid var(--border-color);border-radius:7px}.chat-prediction-layout>section>header{display:flex;justify-content:space-between;gap:12px}.chat-prediction-layout h3{font-size:.95rem}.chat-prediction-layout header p,.chat-prediction-layout>aside>p{margin-top:4px;color:var(--text-secondary);font-size:.76rem;line-height:1.6}.chat-prediction-layout>section>header>span{color:#7c3aed;font-size:.78rem;font-weight:900}
.chat-inactivity-forecast{display:grid;gap:8px;margin-top:14px}.chat-inactivity-forecast article{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.45fr);align-items:center;gap:14px;padding:10px 12px;border-radius:6px;background:var(--soft-bg,#f8fafc)}.chat-inactivity-forecast strong{display:block;font-size:.82rem}.chat-inactivity-forecast small{color:var(--text-secondary);font-size:.7rem}.chat-inactivity-forecast article>div:last-child{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:8px}.chat-inactivity-forecast b{color:#7c3aed;font-size:.78rem;text-align:right}.chat-inactivity-forecast article>div:last-child>span{height:6px;overflow:hidden;border-radius:999px;background:var(--border-color)}.chat-inactivity-forecast article>div:last-child>span i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f59e0b,#ef4444)}
.chat-prediction-layout aside dl{display:grid;gap:8px;margin:15px 0}.chat-prediction-layout aside dl>div{display:flex;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--border-color);font-size:.76rem}.chat-prediction-layout dt{color:var(--text-secondary)}.chat-prediction-layout dd{margin:0;font-weight:900}.chat-prediction-caution{padding:10px;border-left:3px solid #f59e0b;background:color-mix(in srgb,#f59e0b 8%,transparent);color:var(--text-primary)!important;font-weight:700}
@media(max-width:900px){.chat-prediction-layout{grid-template-columns:1fr}.chat-prediction-overview{grid-template-columns:1fr 1fr}.chat-prediction-overview article:first-child{grid-column:1/-1}}
@media(max-width:600px){.chat-prediction-report{padding:16px}.chat-prediction-report>header{flex-direction:column}.chat-prediction-overview{grid-template-columns:1fr}.chat-prediction-overview article:first-child{grid-column:auto}.chat-inactivity-forecast article{grid-template-columns:1fr}.chat-inactivity-forecast article>div:last-child{grid-template-columns:44px 1fr}}

/* Home dashboard */
.home-page {
    width: min(100%, 1240px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
    gap: 1rem;
    align-items: stretch;
    padding: 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(13, 148, 136, 0.11), rgba(249, 115, 22, 0.08)),
        var(--bg-card);
    box-shadow: var(--shadow-md);
}

.home-hero-copy {
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.home-kicker,
.home-widget-head p {
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.home-hero-copy h1 {
    color: var(--text-primary);
    font-size: clamp(2rem, 4vw, 3.7rem);
    line-height: 1.12;
    letter-spacing: 0;
}

.home-hero-copy > p {
    max-width: 660px;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.home-primary-btn,
.home-secondary-btn,
.home-hero-panel a,
.home-widget-head a,
.home-login-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.78rem 1rem;
    border-radius: 12px;
    font-weight: 800;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.home-primary-btn {
    color: #fff;
    background: var(--primary-color);
    box-shadow: 0 14px 30px var(--primary-glow);
}

.home-secondary-btn,
.home-widget-head a,
.home-login-card a {
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.home-primary-btn:hover,
.home-secondary-btn:hover,
.home-hero-panel a:hover,
.home-widget-head a:hover,
.home-login-card a:hover {
    transform: translateY(-1px);
}

.home-hero-panel {
    border-radius: 20px;
    padding: 1.35rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}

body.dark-mode .home-hero-panel {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.18);
}

.home-panel-label {
    width: fit-content;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    color: var(--primary-color);
    background: var(--primary-light);
    font-size: 0.78rem;
    font-weight: 900;
}

.home-hero-panel strong {
    font-size: 1.3rem;
    line-height: 1.35;
}

.home-hero-panel p {
    color: var(--text-muted);
    line-height: 1.65;
}

.home-hero-panel a {
    width: fit-content;
    color: #fff;
    background: var(--deep-sea-medium);
}

.home-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.home-stat-card,
.home-widget {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.home-stat-card {
    min-height: 132px;
    padding: 1.1rem;
    display: grid;
    gap: 0.35rem;
}

.home-stat-card span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    background: var(--primary-light);
}

.home-stat-card strong {
    color: var(--text-primary);
    font-size: 1.55rem;
    line-height: 1;
}

.home-stat-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.home-widget-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.home-widget-large {
    grid-row: span 2;
}

.home-widget {
    padding: 1.15rem;
    overflow: hidden;
}

.home-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.home-widget-head h2 {
    color: var(--text-primary);
    font-size: 1.28rem;
    line-height: 1.35;
}

.home-widget-head a {
    min-height: 36px;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.home-list,
.home-meetup-stack,
.home-action-list {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}

.home-list-item,
.home-meetup-card,
.home-action-item {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-primary);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-list-item:hover,
.home-meetup-card:hover,
.home-action-item:hover {
    transform: translateY(-1px);
    border-color: rgba(13, 148, 136, 0.42);
    box-shadow: var(--shadow-md);
}

.home-list-item {
    min-height: 74px;
    padding: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.home-list-main {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.home-list-main strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-list-main > span {
    display: flex;
    gap: 0.35rem;
}

.home-badge,
.home-dday-badge,
.home-tag-row em {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 900;
}

.home-badge {
    padding: 0.22rem 0.5rem;
    color: var(--primary-color);
    background: var(--primary-light);
}

.home-badge.is-important {
    color: #fff;
    background: #ef4444;
}

.home-list-meta {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.86rem;
    white-space: nowrap;
}

.home-meetup-card {
    padding: 1rem;
    display: grid;
    gap: 0.62rem;
}

.home-meetup-top,
.home-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.home-meetup-top > span:last-child {
    color: #fff;
    background: var(--deep-sea-medium);
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
}

.home-dday-badge {
    padding: 0.28rem 0.55rem;
    color: #fff;
    background: var(--accent-color);
}

.home-dday-badge.is-today {
    background: #ef4444;
}

.home-dday-badge.is-ended {
    color: var(--text-muted);
    background: var(--border-color);
}

.home-meetup-card strong {
    color: var(--text-primary);
    font-size: 1.06rem;
    line-height: 1.4;
}

.home-meetup-card p,
.home-progress-meta {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.home-progress-meta b {
    color: var(--text-primary);
}

.home-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.home-tag-row em {
    padding: 0.22rem 0.5rem;
    color: var(--accent-text);
    background: var(--accent-light);
}

.home-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border-color);
}

.home-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-color);
}

.home-action-item {
    padding: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.home-action-item i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    background: var(--primary-light);
}

.home-action-item span {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.home-action-item strong {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-action-item small {
    color: var(--text-muted);
}

.home-login-card,
.home-empty {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1.25rem;
    border-radius: 18px;
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
    text-align: center;
}

.home-login-card i,
.home-empty i {
    color: var(--primary-color);
    font-size: 1.55rem;
}

.home-login-card strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.home-login-card p {
    color: var(--text-muted);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .home-hero,
    .home-widget-grid {
        grid-template-columns: 1fr;
    }

    .home-widget-large {
        grid-row: auto;
    }

    .home-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .home-page {
        gap: 1rem;
    }

    .home-hero {
        padding: 0.85rem;
        border-radius: 20px;
    }

    .home-hero-copy {
        padding: 0.65rem;
    }

    .home-hero-copy h1 {
        font-size: 2rem;
    }

    .home-hero-copy > p {
        font-size: 0.98rem;
    }

    .home-hero-actions,
    .home-list-item,
    .home-widget-head {
        align-items: stretch;
        flex-direction: column;
    }

    .home-primary-btn,
    .home-secondary-btn,
    .home-widget-head a,
    .home-hero-panel a,
    .home-login-card a {
        width: 100%;
    }

    .home-stat-grid {
        grid-template-columns: 1fr;
    }

    .home-list-meta {
        white-space: normal;
    }
}

.mypage-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.35rem;
    color: var(--text-primary);
    font-size: 1.08rem;
    font-weight: 900;
}

.mypage-help-text {
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.65;
    text-align: center;
}

.mypage-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: min(760px, 100%);
    margin: 0 auto;
}

.mypage-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-card);
    border-radius: 20px;
    padding: 3rem 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mypage-avatar-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 4px solid var(--bg-sidebar);
    background-color: var(--bg-input);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.mypage-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mypage-avatar-icon {
    font-size: 5rem;
    color: var(--text-muted);
}

.mypage-nickname {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.mypage-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    background-color: rgba(16, 185, 129, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    margin-bottom: 2rem;
}

.mypage-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 2rem;
}

.mypage-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background-color: var(--bg-sidebar);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mypage-info-icon {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.mypage-info-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mypage-info-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.mypage-actions {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-mypage-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
}

.btn-mypage-action:hover {
    background-color: var(--bg-sidebar);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* MyPage Edit Mode Styles */
.mypage-edit-form {
    width: 100%;
}

.mypage-edit-field {
    display: none;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.mypage-edit-mode .mypage-info-value span {
    display: none;
}

.mypage-edit-mode .mypage-edit-field {
    display: block;
}

.mypage-edit-mode .mypage-nickname span {
    display: none;
}

.mypage-nickname-input {
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    border: 1px solid var(--primary-color);
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    width: 200px;
}

.mypage-avatar-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem 0;
    cursor: pointer;
    display: none;
    transition: background-color 0.2s ease;
}

.mypage-avatar-overlay:hover {
    background-color: rgba(16, 185, 129, 0.8);
}

.mypage-edit-mode .mypage-avatar-overlay {
    display: block;
}

/* MyPage Danger Zone & Additional Forms */
.btn-mypage-action.btn-danger {
    color: var(--error-color, #ef4444);
    border-color: rgba(239, 68, 68, 0.2);
}

.btn-mypage-action.btn-danger:hover {
    background-color: rgba(239, 68, 68, 0.05);
    border-color: var(--error-color, #ef4444);
}

.mypage-password-form-container {
    display: none;
    width: 100%;
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--border-color);
}

.mypage-password-form-container.is-active {
    display: block;
}

.password-form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.mypage-danger-zone {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    padding-right: 1rem;
}

.btn-delete-account {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-delete-account:hover {
    color: var(--error-color, #ef4444);
}

/* -------------------------------------------
   ?ㅻ뜑 ?꾨줈??留곹겕 ?몃쾭 ?댄럺??   ------------------------------------------- */
.user-profile-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
}

.user-profile-link:hover {
    background-color: var(--bg-secondary);
    transform: translateY(-1px);
    cursor: pointer;
}

/* -------------------------------------------
   留덉씠?섏씠吏€ 濡쒓렇???대젰 ?뚯씠釉?(?ㅽ겕紐⑤뱶 吏€??
   ------------------------------------------- */
.mypage-security-section {
    margin-top: 2rem;
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.mypage-security-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.login-history-table th,
.login-history-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.login-history-table th {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 500;
}

.login-history-table tr:last-child td {
    border-bottom: none;
}

.login-history-table tbody tr:hover {
    background-color: var(--bg-secondary);
}

.ip-address-badge {
    display: inline-block;
    background-color: var(--bg-body);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
    border: 1px solid var(--border-color);
}

/* 9. Profile Dropdown Menu Components */
.profile-dropdown-container {
    position: relative;
    display: inline-block;
}

.header-admin-indicator {
    position: absolute;
    top: -0.55rem;
    right: -0.35rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 20px;
    padding: 0 0.45rem;
    border: 2px solid var(--bg-card);
    border-radius: 999px;
    background: linear-gradient(135deg, #0f766e, #f59e0b);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    pointer-events: none;
}

.header-admin-indicator i {
    font-size: 0.65rem;
}

.profile-dropdown-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    outline: none;
    display: flex;
    align-items: center;
}

.profile-dropdown-trigger .user-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.profile-dropdown-trigger:hover .user-profile {
    background-color: var(--bg-secondary);
    transform: translateY(-1px);
}

.profile-dropdown-trigger .profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid var(--border-color);
}

.profile-dropdown-trigger .dropdown-arrow {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.profile-dropdown-container.is-active .dropdown-arrow {
    transform: rotate(180deg);
}

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    transform-origin: top right;
    
    /* ?뮟 遺€?쒕윭??Fade-in & Slide-down ?④낵 ?곸슜 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.95);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s ease;
    pointer-events: none;
}

.profile-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.dropdown-header {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
}

.dropdown-nickname {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.dropdown-admin-chip {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    font-size: 0.72rem;
    font-weight: 950;
}

.dropdown-email {
    font-size: 0.8rem;
    color: var(--text-muted);
    word-break: break-all;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 0.4rem 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: left;
}

.dropdown-item i {
    font-size: 0.95rem;
    color: var(--text-secondary);
    width: 16px;
    text-align: center;
}

.dropdown-item:hover {
    background-color: var(--bg-secondary);
    color: var(--primary-color);
}

.dropdown-item:hover i {
    color: var(--primary-color);
}

.dropdown-logout {
    color: var(--error-color, #ef4444);
}

.dropdown-logout i {
    color: var(--error-color, #ef4444);
}

.dropdown-logout:hover {
    background-color: rgba(239, 68, 68, 0.05);
    color: var(--error-color, #ef4444);
}

.dropdown-logout:hover i {
    color: var(--error-color, #ef4444);
}

/* 10. MyPage Activity Stats Mini Dashboard */
.mypage-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    width: 100%;
    margin-bottom: 2rem;
}

.mypage-stat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mypage-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mypage-stat-card:nth-child(2) .stat-card-icon {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.mypage-stat-card:nth-child(3) .stat-card-icon {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stat-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}

.stat-card-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-card-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .mypage-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .mypage-stat-card {
        padding: 1.25rem;
    }
}

/* 10.5 MyPage Progress Bar Styles */
.stat-progress-bar-bg {
    width: 100%;
    height: 6px;
    background-color: var(--bg-body);
    border-radius: 3px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.stat-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.mypage-meetup-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mypage-meetup-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.mypage-meetup-summary-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: var(--primary-light);
    color: var(--primary-color);
    font-size: 1rem;
}

.mypage-meetup-summary-card strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.3rem;
    line-height: 1;
}

.mypage-meetup-summary-card span:last-child {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.mypage-meetup-section {
    margin-bottom: 1.5rem;
    padding: 1.4rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.mypage-meetup-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mypage-meetup-section-head h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.mypage-meetup-section-head p {
    color: var(--text-muted);
    font-size: 0.84rem;
    margin: 0;
}

.mypage-meetup-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 0.85rem;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
}

.mypage-meetup-action.is-secondary {
    border: 1px solid var(--border-color);
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
}

.mypage-meetup-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mypage-meetup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-sidebar);
}

.mypage-meetup-main {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.mypage-meetup-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background-color: var(--primary-light);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 900;
}

.mypage-meetup-badge.is-warning {
    background-color: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.mypage-meetup-badge.is-ended {
    background-color: rgba(100, 116, 139, 0.14);
    color: #64748b;
}

.mypage-meetup-item.is-ended {
    opacity: 0.92;
}

.mypage-meetup-title {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mypage-meetup-meta {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.mypage-meetup-links {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mypage-meetup-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 900;
}

.mypage-meetup-links a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.mypage-meetup-empty {
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 0.88rem;
    text-align: center;
}

@media (max-width: 768px) {
    .mypage-form-grid {
        grid-template-columns: 1fr;
    }

    .mypage-meetup-summary {
        grid-template-columns: 1fr;
    }

    .mypage-meetup-section-head,
    .mypage-meetup-item {
        align-items: stretch;
        flex-direction: column;
    }

    .mypage-meetup-links {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   11. MyPage Tab Navigation System
   ========================================================================== */
.mypage-tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 2rem;
    width: 100%;
}

.mypage-tab-btn {
    background: none;
    border: none;
    padding: 1rem 0.5rem;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mypage-tab-btn:hover {
    color: var(--text-primary);
}

.mypage-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.mypage-tab-content {
    display: none;
    width: 100%;
    animation: fadeInTab 0.3s ease forwards;
}

.mypage-tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .mypage-tabs {
        gap: 0.5rem;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.5rem;
    }
    .mypage-tab-btn {
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   12. Sidebar Login Widget & Profile Mini Dashboard
   ========================================================================== */
.sidebar-login-widget {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 誘몃땲 濡쒓렇????*/
.sidebar-login-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar-input-group {
    position: relative;
    width: 100%;
}

.sidebar-input-group i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.sidebar-input {
    width: 100%;
    padding: 0.65rem 0.85rem 0.65rem 2.25rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.sidebar-btn-submit {
    width: 100%;
    padding: 0.7rem;
    background-color: var(--primary-color);
    color: #ffffff;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.sidebar-btn-submit:hover {
    background-color: var(--primary-hover);
}

.sidebar-btn-submit:active {
    transform: scale(0.98);
}

.sidebar-widget-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.sidebar-widget-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sidebar-widget-links a:hover {
    color: var(--primary-color);
}

.sidebar-widget-links span {
    color: var(--border-color);
    user-select: none;
}

/* 濡쒓렇????誘몃땲 ?€?쒕낫??*/
.sidebar-profile-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sidebar-widget-avatar-wrapper {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.5rem;
    border: 2px solid var(--border-color);
    background-color: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease;
}

.sidebar-widget-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-widget-avatar-initial {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    background-color: var(--primary-light-bg);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-widget-nickname {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.sidebar-widget-tier {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background-color: var(--bg-input);
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background-color 0.3s ease;
}

/* Chat group dynamics analysis */
.chat-faction-report {
    margin: 14px 0;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card, var(--card-bg));
    box-shadow: 0 10px 28px rgba(15,23,42,.05);
}
.chat-faction-report > header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:16px; border-bottom:1px solid var(--border-color); }
.chat-faction-report h2,.chat-faction-report h3,.chat-faction-report p { margin:0; }
.chat-faction-report h2 { font-size:1.18rem; }
.chat-faction-report header p { margin-top:5px; color:var(--text-secondary); font-size:.78rem; line-height:1.5; }
.chat-faction-balance { padding:7px 10px; border-radius:6px; background:color-mix(in srgb,var(--primary-color,#169c91) 10%,var(--bg-card,#fff)); color:var(--primary-color,#169c91); font-size:.76rem; font-weight:900; white-space:nowrap; }

.chat-faction-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:18px 0; }
.chat-faction-metrics article { min-height:88px; padding:15px; border:1px solid var(--border-color); border-radius:7px; }
.chat-faction-metrics span { color:var(--text-secondary); font-size:.74rem; font-weight:700; }
.chat-faction-metrics strong { display:block; margin-top:10px; font-size:1.16rem; }

.chat-faction-share { display:flex; width:100%; height:12px; margin-bottom:14px; overflow:hidden; border-radius:6px; background:var(--soft-bg,#f1f5f9); }
.chat-faction-share span { display:block; min-width:3px; height:100%; border-right:2px solid var(--bg-card,#fff); }
.group-1 { background:#169c91!important; }.group-2 { background:#4f46e5!important; }.group-3 { background:#f59e0b!important; }.group-4 { background:#e11d48!important; }.group-5 { background:#0ea5e9!important; }.group-6 { background:#8b5cf6!important; }

.chat-faction-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.chat-faction-groups > article { min-width:0; padding:16px; border:1px solid var(--border-color); border-radius:7px; }
.chat-faction-groups article > header { display:grid; grid-template-columns:10px minmax(0,1fr); align-items:center; gap:9px; }
.chat-faction-groups article > header > b { grid-column:2; color:var(--primary-color,#169c91); font-size:.7rem; }
.chat-faction-dot { width:9px; height:34px; border-radius:4px; }
.chat-faction-groups h3 { font-size:.86rem; }
.chat-faction-groups header p { margin-top:3px; font-size:.68rem; }
.chat-faction-groups article > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.chat-faction-groups article > div span { padding:5px 7px; border-radius:5px; background:var(--soft-bg,#f1f5f9); color:var(--text-secondary); font-size:.7rem; font-weight:700; }

.chat-faction-insights,.chat-faction-member-lists { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.chat-faction-insights > article,.chat-faction-member-lists > article { min-width:0; padding:16px; border:1px solid var(--border-color); border-radius:7px; }
.chat-faction-insights h3,.chat-faction-member-lists h3 { font-size:.88rem; }
.chat-faction-insights h3 i { margin-right:6px; color:var(--primary-color,#169c91); }
.chat-faction-insights ul { display:grid; gap:6px; margin:11px 0 0; padding-left:18px; color:var(--text-secondary); font-size:.76rem; line-height:1.55; }
.chat-faction-member-lists article > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:11px; }
.chat-faction-member-lists span { display:flex; justify-content:space-between; gap:8px; padding:8px; border-radius:5px; background:var(--soft-bg,#f1f5f9); }
.chat-faction-member-lists b { min-width:0; font-size:.75rem; overflow-wrap:anywhere; }
.chat-faction-member-lists small { color:var(--text-secondary); font-size:.66rem; white-space:nowrap; }
.chat-faction-member-lists em { color:var(--text-secondary); font-size:.74rem; font-style:normal; }
.chat-faction-note { margin-top:12px!important; padding:10px 12px; border-left:3px solid var(--primary-color,#169c91); background:var(--soft-bg,#f1f5f9); color:var(--text-secondary); font-size:.73rem; line-height:1.55; }
.chat-faction-note i { margin-right:5px; color:var(--primary-color,#169c91); }

@media (max-width:1100px) {
    .chat-faction-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .chat-faction-groups { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
    .chat-faction-report { padding:16px; }
    .chat-faction-report > header { align-items:flex-start; }
    .chat-faction-groups,.chat-faction-insights,.chat-faction-member-lists { grid-template-columns:minmax(0,1fr); }
    .chat-faction-member-lists article > div { grid-template-columns:minmax(0,1fr); }
}

/* Operator database assistant */
.chat-operator-assistant { margin:14px 0; padding:22px; border:1px solid var(--border-color); border-top:3px solid var(--primary-color,#169c91); border-radius:8px; background:var(--bg-card,var(--card-bg)); box-shadow:0 12px 30px rgba(15,23,42,.06); }
.chat-operator-assistant > header,.chat-assistant-title { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.chat-assistant-title { justify-content:flex-start; }
.chat-assistant-title > span { display:flex; flex:0 0 auto; align-items:center; justify-content:center; width:46px; height:46px; border-radius:8px; background:color-mix(in srgb,var(--primary-color,#169c91) 10%,var(--bg-card,#fff)); color:var(--primary-color,#169c91); font-size:1.1rem; }
.chat-operator-assistant h2,.chat-operator-assistant p { margin:0; }
.chat-operator-assistant h2 { font-size:1.16rem; }
.chat-operator-assistant header p { margin-top:4px; color:var(--text-secondary); font-size:.76rem; }
.chat-assistant-security { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border-radius:6px; background:#dcfce7; color:#166534; font-size:.7rem; font-weight:900; white-space:nowrap; }
.chat-assistant-suggestions { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.chat-assistant-suggestions button { padding:8px 10px; border:1px solid var(--border-color); border-radius:6px; background:var(--soft-bg,#f1f5f9); color:var(--text-secondary); font:inherit; font-size:.72rem; font-weight:700; cursor:pointer; }
.chat-assistant-suggestions button:hover { border-color:var(--primary-color,#169c91); color:var(--primary-color,#169c91); }
.chat-assistant-conversation { display:grid; gap:11px; max-height:460px; margin-top:14px; padding:15px; overflow-y:auto; border:1px solid var(--border-color); border-radius:7px; background:color-mix(in srgb,var(--text-primary) 2%,var(--bg-card,#fff)); }
.chat-assistant-conversation > article { display:flex; align-items:flex-start; gap:10px; max-width:88%; }
.chat-assistant-conversation > article.is-user { justify-self:end; flex-direction:row-reverse; }
.chat-assistant-conversation > article > span { display:flex; flex:0 0 auto; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--primary-color,#169c91); color:#fff; font-size:.72rem; }
.chat-assistant-conversation > article.is-user > span { background:#334155; }
.chat-assistant-conversation > article > div { min-width:0; padding:11px 13px; border:1px solid var(--border-color); border-radius:7px; background:var(--bg-card,#fff); }
.chat-assistant-conversation > article.is-user > div { background:color-mix(in srgb,var(--primary-color,#169c91) 9%,var(--bg-card,#fff)); }
.chat-assistant-conversation strong { font-size:.74rem; }
.chat-assistant-conversation p { margin-top:5px; font-size:.8rem; line-height:1.65; white-space:pre-wrap; }
.chat-assistant-highlights { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:10px; }
.chat-assistant-highlights span { padding:7px 8px; border-radius:5px; background:var(--soft-bg,#f1f5f9); }
.chat-assistant-highlights small,.chat-assistant-highlights b { display:block; }
.chat-assistant-highlights small { color:var(--text-secondary); font-size:.64rem; }
.chat-assistant-highlights b { margin-top:2px; font-size:.76rem; }
.chat-assistant-sources { display:block; margin-top:9px; color:var(--text-secondary); font-size:.64rem; line-height:1.5; }
.chat-assistant-form { margin-top:12px; }
.chat-assistant-form > label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.chat-assistant-form > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.chat-assistant-form input { width:100%; min-width:0; padding:12px 13px; border:1px solid var(--border-color); border-radius:6px; background:var(--input-bg,var(--bg-card,#fff)); color:var(--text-primary); font:inherit; }
.chat-assistant-form input:focus { outline:2px solid color-mix(in srgb,var(--primary-color,#169c91) 24%,transparent); border-color:var(--primary-color,#169c91); }
.chat-assistant-form button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:108px; border:0; border-radius:6px; background:var(--primary-color,#169c91); color:#fff; font:inherit; font-size:.8rem; font-weight:900; cursor:pointer; }
.chat-assistant-form button:disabled { opacity:.65; cursor:wait; }
.chat-assistant-form > small { display:block; margin-top:7px; color:var(--text-secondary); font-size:.66rem; }

@media (max-width:768px) {
    .chat-operator-assistant { padding:16px; }
    .chat-operator-assistant > header { align-items:flex-start; }
    .chat-assistant-title { align-items:flex-start; gap:10px; }
    .chat-assistant-title > span { width:40px; height:40px; }
    .chat-assistant-suggestions { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; }
    .chat-assistant-suggestions button { flex:0 0 auto; scroll-snap-align:start; }
    .chat-assistant-conversation > article { max-width:96%; }
    .chat-assistant-highlights { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .chat-assistant-form > div { grid-template-columns:minmax(0,1fr); }
    .chat-assistant-form input { font-size:16px; }
    .chat-assistant-form button { min-height:46px; }
}

/* Meetup success rate analysis */
.chat-success-report { margin:14px 0; padding:22px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-card,var(--card-bg)); box-shadow:0 10px 28px rgba(15,23,42,.05); }
.chat-success-report > header,.chat-success-categories article > header,.chat-success-recommendation > header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.chat-success-report > header { padding-bottom:16px; border-bottom:1px solid var(--border-color); }
.chat-success-report h2,.chat-success-report h3,.chat-success-report p { margin:0; }
.chat-success-report h2 { font-size:1.18rem; }
.chat-success-report header p { margin-top:5px; color:var(--text-secondary); font-size:.78rem; line-height:1.5; }
.chat-success-period { color:var(--text-secondary); font-size:.74rem; font-weight:800; white-space:nowrap; }
.chat-success-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:18px 0; }
.chat-success-metrics article { min-height:88px; padding:15px; border:1px solid var(--border-color); border-radius:7px; }
.chat-success-metrics span { color:var(--text-secondary); font-size:.74rem; font-weight:700; }
.chat-success-metrics strong { display:block; margin-top:10px; font-size:1.12rem; overflow-wrap:anywhere; }

.chat-success-categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.chat-success-categories > article { min-width:0; padding:16px; border:1px solid var(--border-color); border-radius:7px; }
.chat-success-categories h3 { font-size:.9rem; }
.chat-success-categories header p { font-size:.69rem; }
.chat-success-categories header > strong { color:var(--primary-color,#169c91); font-size:1rem; }
.chat-success-rate { margin-top:14px; }
.chat-success-rate > div:first-child { display:flex; justify-content:space-between; gap:10px; color:var(--text-secondary); font-size:.72rem; }
.chat-success-rate b { color:var(--text-primary); }
.chat-success-track { width:100%; height:7px; margin-top:6px; overflow:hidden; border-radius:4px; background:var(--soft-bg,#e2e8f0); }
.chat-success-track span { display:block; height:100%; border-radius:inherit; background:var(--primary-color,#169c91); }
.chat-success-track.is-occupancy span { background:#4f46e5; }
.chat-success-categories footer { display:flex; justify-content:space-between; gap:8px; margin-top:15px; padding-top:10px; border-top:1px solid var(--border-color); color:var(--text-secondary); font-size:.68rem; }

.chat-success-recommendation { margin-top:12px; padding:17px; border:1px solid var(--border-color); border-radius:7px; }
.chat-success-recommendation h3 { font-size:.92rem; }
.chat-success-recommendation h3 i { margin-right:6px; color:#d97706; }
.chat-success-recommendation > article { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--border-color); }
.chat-success-recommendation > article > span { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--soft-bg,#f1f5f9); color:var(--primary-color,#169c91); font-size:.68rem; font-weight:900; }
.chat-success-recommendation article strong { font-size:.8rem; }
.chat-success-recommendation article p { margin-top:3px; color:var(--text-secondary); font-size:.72rem; line-height:1.5; }
.chat-success-recommendation article > b { padding:5px 7px; border-radius:5px; font-size:.68rem; white-space:nowrap; }
.chat-success-recommendation article > b.is-recommended { background:#dcfce7; color:#166534; }
.chat-success-recommendation article > b.is-learning { background:#e2e8f0; color:#475569; }
.chat-success-note { margin-top:12px!important; padding:10px 12px; border-left:3px solid var(--primary-color,#169c91); background:var(--soft-bg,#f1f5f9); color:var(--text-secondary); font-size:.72rem; line-height:1.55; }
.chat-success-note i { margin-right:5px; color:var(--primary-color,#169c91); }

@media (max-width:1100px) {
    .chat-success-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .chat-success-categories { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
    .chat-success-report { padding:16px; }
    .chat-success-report > header { align-items:flex-start; flex-direction:column; gap:8px; }
    .chat-success-categories { grid-template-columns:minmax(0,1fr); }
    .chat-success-recommendation > article { grid-template-columns:26px minmax(0,1fr); }
    .chat-success-recommendation article > b { grid-column:2; justify-self:start; }
}

/* Chat relationship and influence analysis */
.chat-relationship-report {
    margin: 14px 0;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card, var(--card-bg));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.chat-relationship-report > header,
.chat-network-panel > header,
.chat-influence-panel > header,
.chat-top-relations > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chat-relationship-report > header { padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.chat-relationship-report h2,
.chat-relationship-report h3,
.chat-relationship-report p { margin: 0; }
.chat-relationship-report h2 { font-size: 1.18rem; }
.chat-relationship-report header p { margin-top: 5px; color: var(--text-secondary); font-size: 0.78rem; line-height: 1.5; }
.chat-network-density { color: var(--text-secondary); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.chat-network-density strong { display: block; margin-top: 2px; color: var(--primary-color, #169c91); font-size: 1.14rem; text-align: right; }

.chat-relationship-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 18px 0; }
.chat-relationship-metrics article { min-height: 88px; padding: 15px; border: 1px solid var(--border-color); border-radius: 7px; }
.chat-relationship-metrics span { color: var(--text-secondary); font-size: 0.74rem; font-weight: 700; }
.chat-relationship-metrics strong { display: block; margin-top: 10px; font-size: 1.02rem; overflow-wrap: anywhere; }

.chat-relationship-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.72fr); gap: 12px; }
.chat-network-panel,
.chat-influence-panel,
.chat-top-relations { min-width: 0; padding: 17px; border: 1px solid var(--border-color); border-radius: 7px; }
.chat-network-panel h3,
.chat-influence-panel h3,
.chat-top-relations h3 { font-size: .9rem; }
.chat-network-panel h3 i,
.chat-influence-panel h3 i { margin-right: 6px; color: var(--primary-color,#169c91); }
.chat-network-panel header span,
.chat-top-relations header span { color: var(--text-secondary); font-size: .7rem; }
.chat-network-canvas { width: 100%; min-height: 390px; margin-top: 10px; overflow: hidden; border-radius: 6px; background: color-mix(in srgb,var(--primary-color,#169c91) 3%,var(--soft-bg,#f8fafc)); }
.chat-network-canvas svg { display: block; width: 100%; height: auto; min-height: 390px; }
.chat-network-edge { stroke: color-mix(in srgb,var(--primary-color,#169c91) 45%,var(--border-color)); stroke-linecap: round; opacity: .58; }
.chat-network-node circle { fill: var(--bg-card,#fff); stroke: var(--primary-color,#169c91); stroke-width: 3; filter: drop-shadow(0 3px 5px rgba(15,23,42,.15)); }
.chat-network-node circle.is-core { fill: var(--primary-color,#169c91); stroke: color-mix(in srgb,var(--primary-color,#169c91) 65%,#0f172a); stroke-width: 4; }
.chat-network-node text { fill: var(--text-primary); font-size: 12px; font-weight: 800; pointer-events: none; }
.chat-network-note { margin-top: 10px!important; color: var(--text-secondary); font-size: .72rem; line-height: 1.55; }

.chat-influence-panel > div { display: grid; gap: 6px; max-height: 410px; margin-top: 11px; overflow-y: auto; }
.chat-influence-panel > div > article { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 6px; background: var(--soft-bg,#f1f5f9); }
.chat-influence-rank { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-card,#fff); color: var(--primary-color,#169c91); font-size: .68rem; font-weight: 900; }
.chat-influence-panel article div { min-width: 0; }
.chat-influence-panel article strong { display: block; font-size: .77rem; overflow-wrap: anywhere; }
.chat-influence-panel article small { color: var(--text-secondary); font-size: .66rem; }
.chat-influence-panel article > b { color: var(--primary-color,#169c91); font-size: .76rem; }

.chat-top-relations { margin-top: 12px; }
.chat-top-relations > div { display: grid; margin-top: 12px; }
.chat-top-relations article { display: grid; grid-template-columns: 28px minmax(180px,1fr) minmax(180px,.8fr) auto; align-items: center; gap: 10px; padding: 10px 5px; border-bottom: 1px solid var(--border-color); }
.chat-top-relations article:last-child { border-bottom: 0; }
.chat-top-relations article > b { color: var(--text-secondary); font-size: .72rem; text-align: center; }
.chat-top-relations article > span { min-width: 0; font-size: .8rem; font-weight: 800; overflow-wrap: anywhere; }
.chat-top-relations article > span i { margin: 0 5px; color: var(--primary-color,#169c91); font-size: .68rem; }
.chat-top-relations article > small { color: var(--text-secondary); font-size: .7rem; }
.chat-top-relations article > strong { color: var(--primary-color,#169c91); font-size: .8rem; }

@media (max-width: 1100px) {
    .chat-relationship-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .chat-relationship-layout { grid-template-columns: minmax(0,1fr); }
    .chat-influence-panel > div { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; }
}

@media (max-width: 768px) {
    .chat-relationship-report { padding: 16px; }
    .chat-relationship-report > header { align-items: flex-start; }
    .chat-network-density strong { text-align: left; }
    .chat-network-canvas,
    .chat-network-canvas svg { min-height: 300px; }
    .chat-influence-panel > div { grid-template-columns: minmax(0,1fr); }
    .chat-top-relations article { grid-template-columns: 26px minmax(0,1fr) auto; }
    .chat-top-relations article > small { grid-column: 2 / -1; }
}

/* Automated weekly and monthly operations briefing */
.chat-ai-report {
    margin: 14px 0;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card, var(--card-bg));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.chat-ai-report > header,
.chat-review-draft > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.chat-ai-report > header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.chat-ai-report h2,
.chat-ai-report h3,
.chat-ai-report p { margin: 0; }
.chat-ai-report h2 { font-size: 1.18rem; }
.chat-ai-report header p { margin-top: 5px; color: var(--text-secondary); font-size: 0.76rem; line-height: 1.5; }

.chat-ai-tabs {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--soft-bg, #f1f5f9);
}

.chat-ai-tabs button {
    min-width: 66px;
    padding: 8px 11px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.chat-ai-tabs button.is-active {
    background: var(--primary-color, #169c91);
    color: #fff;
}

.chat-ai-panel { display: none; padding-top: 18px; }
.chat-ai-panel.is-active { display: block; }
.chat-ai-summary {
    padding: 18px;
    border-left: 3px solid var(--primary-color, #169c91);
    background: color-mix(in srgb, var(--primary-color, #169c91) 5%, var(--bg-card, #fff));
}
.chat-ai-summary > span { color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; }
.chat-ai-summary h3 { margin-top: 4px; font-size: 1rem; }
.chat-ai-summary > p { margin-top: 10px; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.72; }

.chat-ai-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}
.chat-ai-metrics span { padding: 9px 10px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-secondary); font-size: 0.72rem; }
.chat-ai-metrics b { float: right; color: var(--text-primary); }

.chat-ai-decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.chat-ai-decision-grid > section { padding: 16px; border: 1px solid var(--border-color); border-radius: 7px; }
.chat-ai-decision-grid > section > h3 { margin-bottom: 11px; font-size: 0.9rem; }
.chat-ai-decision-grid > section > h3 i { margin-right: 6px; color: var(--primary-color, #169c91); }
.chat-ai-decision-grid article { margin-top: 7px; padding: 10px 11px; border-left: 3px solid var(--border-color); background: var(--soft-bg, #f1f5f9); }
.chat-ai-decision-grid article.is-high { border-left-color: #e11d48; }
.chat-ai-decision-grid article.is-medium { border-left-color: #f59e0b; }
.chat-ai-decision-grid article.is-normal,
.chat-ai-decision-grid article.is-low { border-left-color: var(--primary-color, #169c91); }
.chat-ai-decision-grid article strong { font-size: 0.78rem; }
.chat-ai-decision-grid article p { margin-top: 4px; color: var(--text-secondary); font-size: 0.73rem; line-height: 1.5; }

.chat-review-draft {
    margin-top: 14px;
    padding: 17px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}
.chat-review-draft h3 { font-size: 0.92rem; }
.chat-review-draft h3 i { margin-right: 6px; color: var(--primary-color, #169c91); }
.chat-review-draft button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card, #fff); color: var(--text-primary); font: inherit; font-size: 0.74rem; font-weight: 800; cursor: pointer; }
.chat-review-draft textarea { width: 100%; min-height: 120px; margin-top: 12px; padding: 13px; resize: vertical; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--soft-bg, #f8fafc)); color: var(--text-primary); font: inherit; font-size: 0.82rem; line-height: 1.65; }

@media (max-width: 768px) {
    .chat-ai-report { padding: 16px; }
    .chat-ai-report > header { align-items: stretch; flex-direction: column; }
    .chat-ai-tabs { width: 100%; }
    .chat-ai-tabs button { flex: 1; }
    .chat-ai-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chat-ai-decision-grid { grid-template-columns: minmax(0, 1fr); }
    .chat-review-draft > header { align-items: flex-start; }
    .chat-review-draft button { flex: 0 0 auto; }
}

/* Chat safety and atmosphere report */
.chat-safety-report {
    margin: 14px 0;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card, var(--card-bg));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.chat-safety-report > header,
.chat-risk-intervals > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.chat-safety-report > header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.chat-safety-report h2,
.chat-safety-report h3,
.chat-safety-report p { margin: 0; }
.chat-safety-report h2 { font-size: 1.18rem; }
.chat-safety-report header p { margin-top: 5px; color: var(--text-secondary); font-size: 0.78rem; line-height: 1.5; }

.chat-risk-status {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
}
.chat-risk-status.is-safe { background: #dcfce7; color: #166534; }
.chat-risk-status.is-watch { background: #dbeafe; color: #1e40af; }
.chat-risk-status.is-warning { background: #fef3c7; color: #92400e; }
.chat-risk-status.is-danger { background: #ffe4e6; color: #be123c; }

.chat-safety-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 0;
}

.chat-safety-metrics article {
    min-height: 88px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}
.chat-safety-metrics span { color: var(--text-secondary); font-size: 0.75rem; font-weight: 700; }
.chat-safety-metrics strong { display: block; margin-top: 10px; font-size: 1.2rem; }

.chat-safety-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.chat-safety-summary > article,
.chat-risk-intervals,
.chat-safety-method {
    padding: 17px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

.chat-safety-summary h3,
.chat-risk-intervals h3 { font-size: 0.9rem; }
.chat-safety-summary h3 i,
.chat-risk-intervals h3 i { margin-right: 6px; color: #e11d48; }
.chat-safety-summary article > strong { display: block; margin-top: 15px; font-size: 1.12rem; }
.chat-safety-summary article > p { margin-top: 7px; color: var(--text-secondary); font-size: 0.78rem; line-height: 1.55; }

.chat-heated-members { display: grid; gap: 7px; margin-top: 13px; max-height: 220px; overflow-y: auto; }
.chat-heated-members span { display: flex; justify-content: space-between; gap: 10px; padding: 8px 9px; border-radius: 5px; background: var(--soft-bg, #f1f5f9); }
.chat-heated-members b { font-size: 0.78rem; overflow-wrap: anywhere; }
.chat-heated-members small { color: var(--text-secondary); font-size: 0.69rem; text-align: right; }
.chat-heated-members em { color: var(--text-secondary); font-size: 0.76rem; font-style: normal; }

.chat-risk-intervals { margin-top: 10px; }
.chat-risk-intervals > header > span { color: #be123c; font-size: 0.86rem; font-weight: 900; }
.chat-risk-intervals > div { display: grid; gap: 8px; margin-top: 13px; }
.chat-risk-intervals article { padding: 11px 12px; border-left: 3px solid #f59e0b; background: var(--soft-bg, #f1f5f9); }
.chat-risk-intervals article.is-high { border-left-color: #e11d48; }
.chat-risk-intervals article > div { display: flex; justify-content: space-between; gap: 10px; }
.chat-risk-intervals article strong { font-size: 0.8rem; }
.chat-risk-intervals article span { color: #be123c; font-size: 0.7rem; font-weight: 900; }
.chat-risk-intervals article p { margin-top: 5px; color: var(--text-secondary); font-size: 0.72rem; }

.chat-safety-method { margin-top: 10px; }
.chat-safety-method summary { cursor: pointer; font-size: 0.82rem; font-weight: 800; }
.chat-safety-method ul { display: grid; gap: 5px; margin: 12px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 0.76rem; line-height: 1.55; }
.chat-safety-method p { margin-top: 12px; padding: 10px; border-left: 3px solid #f59e0b; background: color-mix(in srgb, #f59e0b 8%, transparent); color: var(--text-primary); font-size: 0.76rem; font-weight: 700; line-height: 1.55; }

@media (max-width: 900px) {
    .chat-safety-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .chat-safety-report { padding: 16px; }
    .chat-safety-report > header,
    .chat-risk-intervals > header { align-items: flex-start; }
    .chat-safety-summary { grid-template-columns: minmax(0, 1fr); }
    .chat-heated-members span,
    .chat-risk-intervals article > div { align-items: flex-start; flex-direction: column; gap: 4px; }
    .chat-heated-members small { text-align: left; }
}

/* Meetup operation keyword report */
.chat-meeting-keyword-report {
    margin: 14px 0;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card, var(--card-bg));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.chat-meeting-keyword-report > header,
.chat-unanswered-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.chat-meeting-keyword-report > header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.chat-meeting-keyword-report h2,
.chat-meeting-keyword-report h3,
.chat-meeting-keyword-report p {
    margin: 0;
}

.chat-meeting-keyword-report h2 { font-size: 1.18rem; }
.chat-meeting-keyword-report header p {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
}

.chat-response-rate {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.chat-response-rate strong {
    display: block;
    margin-top: 2px;
    color: var(--primary-color, #169c91);
    font-size: 1.2rem;
    text-align: right;
}

.chat-analysis-upgrade-note {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--soft-bg, #f1f5f9);
}

.chat-analysis-upgrade-note > i { color: var(--primary-color, #169c91); }
.chat-analysis-upgrade-note strong { font-size: 0.88rem; }
.chat-analysis-upgrade-note p { margin-top: 4px; color: var(--text-secondary); font-size: 0.78rem; }

.chat-meeting-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 0;
}

.chat-meeting-metrics article {
    min-height: 88px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

.chat-meeting-metrics span { color: var(--text-secondary); font-size: 0.75rem; font-weight: 700; }
.chat-meeting-metrics strong { display: block; margin-top: 10px; font-size: 1.14rem; overflow-wrap: anywhere; }

.chat-keyword-groups,
.chat-operation-keyword-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.chat-keyword-groups > article,
.chat-operation-keyword-row > article {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

.chat-keyword-groups h3,
.chat-operation-keyword-row h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
}

.chat-keyword-groups h3 i { color: var(--primary-color, #169c91); }
.chat-keyword-groups article > div,
.chat-operation-keyword-row article > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.chat-keyword-groups article span,
.chat-operation-keyword-row article span {
    padding: 6px 8px;
    border-radius: 5px;
    background: var(--soft-bg, #f1f5f9);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.chat-keyword-groups article span b,
.chat-operation-keyword-row article span b { color: var(--text-primary); }
.chat-keyword-groups em,
.chat-operation-keyword-row em { color: var(--text-secondary); font-size: 0.75rem; font-style: normal; }
.chat-operation-keyword-row { margin-top: 10px; }

.chat-unanswered-panel {
    margin-top: 14px;
    padding: 17px;
    border: 1px solid var(--border-color);
    border-left: 3px solid #f59e0b;
    border-radius: 7px;
}

.chat-unanswered-panel h3 { font-size: 0.94rem; }
.chat-unanswered-panel h3 i { margin-right: 6px; color: #d97706; }
.chat-unanswered-panel > header > span { color: #b45309; font-size: 1.05rem; font-weight: 900; }
.chat-unanswered-list { display: grid; gap: 8px; margin-top: 14px; }
.chat-unanswered-list article {
    display: grid;
    grid-template-columns: minmax(160px, .8fr) auto minmax(220px, 1.4fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--soft-bg, #f1f5f9);
}

.chat-unanswered-list article > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.chat-unanswered-list article strong { min-width: 0; font-size: 0.8rem; overflow-wrap: anywhere; }
.chat-unanswered-list article span { padding: 4px 6px; border-radius: 4px; background: #fef3c7; color: #92400e; font-size: 0.68rem; font-weight: 800; white-space: nowrap; }
.chat-unanswered-list time,
.chat-unanswered-list p { color: var(--text-secondary); font-size: 0.72rem; }
.chat-empty-inline { padding: 18px; color: var(--text-secondary); font-size: 0.78rem; text-align: center; }

@media (min-width: 769px) and (max-width: 1100px) {
    .chat-meeting-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chat-keyword-groups { grid-template-columns: 1fr 1fr; }
    .chat-keyword-groups > article:last-child { grid-column: 1 / -1; }
    .chat-unanswered-list article { grid-template-columns: minmax(150px, .8fr) auto minmax(160px, 1fr); }
}

@media (max-width: 768px) {
    .chat-meeting-keyword-report { padding: 16px; }
    .chat-meeting-keyword-report > header,
    .chat-unanswered-panel > header { align-items: flex-start; }
    .chat-response-rate strong { text-align: left; }
    .chat-meeting-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chat-keyword-groups,
    .chat-operation-keyword-row { grid-template-columns: minmax(0, 1fr); }
    .chat-unanswered-list article { grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .chat-unanswered-list article > div { flex-wrap: wrap; }
}

/* Chat member change tracking */
.chat-member-change-report {
    margin: 14px 0;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card, var(--card-bg));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.chat-member-change-report > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.chat-member-change-report h2,
.chat-member-change-report h3,
.chat-member-change-report p {
    margin: 0;
}

.chat-member-change-report h2 { font-size: 1.18rem; }
.chat-member-change-report header p,
.chat-change-columns article > p {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
}

.chat-change-period {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.chat-change-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 0;
}

.chat-change-metrics article {
    position: relative;
    min-height: 96px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

.chat-change-metrics i {
    position: absolute;
    right: 14px;
    top: 14px;
    color: color-mix(in srgb, var(--primary-color, #169c91) 72%, var(--text-secondary));
}

.chat-change-metrics span {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
}

.chat-change-metrics strong {
    display: block;
    margin-top: 12px;
    font-size: 1.28rem;
}

.chat-change-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.chat-change-columns > article {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

.chat-change-columns h3 {
    font-size: 0.94rem;
}

.chat-change-list {
    display: grid;
    gap: 7px;
    max-height: 270px;
    margin-top: 14px;
    overflow-y: auto;
}

.chat-change-list > span {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 6px;
    background: var(--soft-bg, #f1f5f9);
}

.chat-change-list b {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.chat-change-list small {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 0.7rem;
    text-align: right;
}

.chat-change-list em {
    padding: 20px 8px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-style: normal;
    text-align: center;
}

@media (min-width: 769px) and (max-width: 1200px) {
    .chat-change-columns {
        grid-template-columns: 1fr 1fr;
    }

    .chat-change-columns > article:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .chat-member-change-report {
        padding: 16px;
    }

    .chat-member-change-report > header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .chat-change-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-change-metrics article {
        min-height: 86px;
        padding: 13px;
    }

    .chat-change-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .chat-change-list > span {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .chat-change-list small {
        text-align: left;
    }
}

/* Chat operation decision report */
.chat-operation-report {
    margin: 14px 0;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card, var(--card-bg));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.chat-operation-report > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.chat-operation-report h2,
.chat-operation-report h3,
.chat-operation-report p {
    margin: 0;
}

.chat-operation-report h2 {
    font-size: 1.18rem;
}

.chat-operation-report header p {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.chat-health-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 900;
}

.chat-health-status.is-good { background: #dcfce7; color: #166534; }
.chat-health-status.is-stable { background: #dbeafe; color: #1e40af; }
.chat-health-status.is-warning { background: #fef3c7; color: #92400e; }
.chat-health-status.is-critical { background: #ffe4e6; color: #be123c; }

.chat-operation-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.7fr);
    gap: 20px;
    padding: 20px 0;
}

.chat-health-score {
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: color-mix(in srgb, var(--primary-color, #169c91) 5%, var(--bg-card, #fff));
}

.chat-health-score > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.chat-health-score strong {
    color: var(--text-primary);
    font-size: 2.25rem;
    line-height: 1;
}

.chat-health-score span,
.chat-health-score p {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.chat-health-score p {
    margin-top: 9px;
}

.chat-health-track {
    width: 100%;
    height: 7px;
    margin-top: 17px;
    overflow: hidden;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text-secondary) 15%, transparent);
}

.chat-health-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-color, #169c91);
}

.chat-operation-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.chat-operation-metrics article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

.chat-operation-metrics span {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
}

.chat-operation-metrics strong {
    margin-top: 8px;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.chat-operation-advice {
    padding: 17px 18px;
    border-left: 3px solid var(--primary-color, #169c91);
    background: color-mix(in srgb, var(--text-primary) 3%, var(--bg-card, #fff));
}

.chat-operation-advice h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.94rem;
}

.chat-operation-advice h3 i {
    color: var(--primary-color, #169c91);
}

.chat-operation-advice ul {
    display: grid;
    gap: 7px;
    margin: 12px 0 0;
    padding-left: 19px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.55;
}

.chat-attention-members {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--border-color);
}

.chat-attention-members > span {
    margin-right: 3px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
}

.chat-attention-members b,
.chat-member-state {
    padding: 5px 8px;
    border-radius: 5px;
    background: var(--soft-bg, #f1f5f9);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
}

.chat-operation-method {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-card, var(--card-bg));
}

.chat-operation-method h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.chat-operation-method h4 i {
    color: var(--primary-color, #169c91);
}

.chat-operation-method > p {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.6;
}

.chat-operation-method > ul {
    margin-top: 11px;
    padding-left: 19px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.62;
}

.chat-operation-method .chat-operation-caution {
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 3px solid #f59e0b;
    background: color-mix(in srgb, #f59e0b 8%, transparent);
    color: var(--text-primary);
    font-weight: 700;
}

.chat-member-state.is-low { background: #fef3c7; color: #92400e; }
.chat-member-state.is-dormant { background: #e2e8f0; color: #475569; }
.chat-member-state.is-declined { background: #ffe4e6; color: #be123c; }
.chat-member-state.is-active { background: #dcfce7; color: #166534; }

@media (min-width: 769px) and (max-width: 1200px) {
    .chat-operation-layout {
        grid-template-columns: 1fr;
    }

    .chat-operation-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .chat-operation-report {
        padding: 16px;
    }

    .chat-operation-report > header {
        align-items: flex-start;
    }

    .chat-operation-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 14px 0;
    }

    .chat-operation-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-operation-metrics article {
        min-height: 88px;
        padding: 13px;
    }

    .chat-operation-advice {
        padding: 15px;
    }
}

.sidebar-admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: -0.45rem auto 0.9rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(245, 158, 11, 0.14));
    color: #d97706;
    font-size: 0.74rem;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.sidebar-admin-badge.is-hidden {
    display: none !important;
}

body.dark-mode .sidebar-admin-badge {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
}

.sidebar-widget-progress {
    width: 100%;
    margin-bottom: 1.25rem;
}

.sidebar-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.sidebar-progress-bar-bg {
    width: 100%;
    height: 6px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.sidebar-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-widget-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.4rem;
}

.sidebar-widget-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-input);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.sidebar-widget-btn span {
    white-space: nowrap;
}

.sidebar-widget-btn i {
    font-size: 0.95rem;
    width: 1.2rem;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-widget-btn:hover {
    background-color: var(--bg-card);
    border-color: var(--text-muted);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.sidebar-widget-btn.btn-logout:hover {
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

body.dark-mode .sidebar-widget-btn.btn-logout:hover {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}

/* ==========================================================================
   13. Sidebar AJAX 濡쒓렇????Caps Lock 寃쎄퀬 諛곕꼫
   ========================================================================== */

/*
 * ?뱦 ?묐룞 ?먮━:
 *   湲곕낯 ?곹깭(display: none)?먯꽌 ?꾩쟾???④꺼???덈떎媛€,
 *   JS媛€ .is-visible ?대옒?ㅻ? 異붽??섎㈃ max-height?€ opacity媛€
 *   ?몃옖吏€?섏쑝濡?遺€?쒕읇寃??쇱퀜吏묐땲??(CSS max-height ?몃┃).
 */
.sidebar-capslock-warning {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ef4444;                      /* 媛뺣젹??寃쎄퀬 鍮④컯 */
    background-color: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 6px;
    padding: 0 0.65rem;
    overflow: hidden;

    /* 湲곕낯: ?묓??덉쓬 (?믪씠 0, ?щ챸) */
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease,
                opacity    0.3s ease,
                padding    0.3s ease;
}

/* JS媛€ .is-visible 異붽? ???먯뿰?ㅻ읇寃??쇱퀜吏?*/
.sidebar-capslock-warning.is-visible {
    max-height: 2.5rem;
    opacity: 1;
    pointer-events: auto;
    padding: 0.45rem 0.65rem;
}

.sidebar-capslock-warning i {
    font-size: 0.8rem;
    flex-shrink: 0;
}

body.dark-mode .sidebar-capslock-warning {
    color: #fca5a5;
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
}

/* ==========================================================================
   14. Sidebar AJAX 濡쒓렇?????먮윭 硫붿떆吏€ ?곸뿭
   ========================================================================== */
.sidebar-ajax-error {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ef4444;
    text-align: center;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.2s ease;
    border-radius: 6px;
}

.sidebar-ajax-error.is-visible {
    max-height: 4rem;
    opacity: 1;
    padding: 0.45rem 0.65rem;
    background-color: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

body.dark-mode .sidebar-ajax-error.is-visible {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

/* ==========================================================================
   15. Sidebar AJAX 濡쒓렇????踰꾪듉 濡쒕뵫 ?ㅽ뵾??   ========================================================================== */

/*
 * ?뱦 援ъ“:
 *   <button>
 *     <span class="btn-text">濡쒓렇??/span>      ???됱냼??蹂댁엫
 *     <span class="btn-spinner"></span>          ???됱냼???④?
 *   </button>
 *
 *   .is-loading ?대옒?ㅺ? button??遺숈쑝硫??띿뒪?멸? ?④퀬 ?ㅽ뵾?덇? ?뚯쟾?⑸땲??
 */

/* ?ㅽ뵾??湲곕낯 ?④? */
.sidebar-btn-submit .btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: sidebar-spin 0.7s linear infinite;
}

/* 濡쒕뵫 以? ?띿뒪???④린怨??ㅽ뵾???쒖떆 */
.sidebar-btn-submit.is-loading .btn-text {
    display: none;
}
.sidebar-btn-submit.is-loading .btn-spinner {
    display: inline-block;
}

/* 濡쒕뵫 以? 踰꾪듉 鍮꾪솢?깊솕 ?명삎 */
.sidebar-btn-submit.is-loading {
    cursor: not-allowed;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes sidebar-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   16. Sidebar ?뚮┝ 諛곗? (Notification Badge)
   ========================================================================== */

/*
 * ?뱦 援ъ“:
 *   <div class="sidebar-badge-wrapper">       ??position: relative 湲곗??? *     <div class="sidebar-widget-avatar-wrapper">...</div>
 *     <span class="sidebar-notif-badge">3</span>  ??absolute 諛곗튂
 *   </div>
 *
 *   ?꾨컮?€ ?곗륫 ?곷떒 紐⑥꽌由ъ뿉 ?뺥솗??怨좎젙?⑸땲??
 */
.sidebar-badge-wrapper {
    position: relative;    /* 諛곗???absolute ?꾩튂 湲곗????섎뒗 而⑦뀒?대꼫 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.sidebar-notif-badge {
    position: absolute;
    top: -4px;             /* ?꾨컮?€ ?곷떒?먯꽌 ?댁쭩 ?꾨줈 ?€?대굹?ㅺ쾶 */
    right: -4px;           /* ?꾨컮?€ ?곗륫?먯꽌 ?댁쭩 ?ㅻⅨ履쎌쑝濡??€?대굹?ㅺ쾶 */
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border-radius: 999px;  /* ?꾩쟾???먰삎 ?먮뒗 pill ?뺥깭 */
    border: 2px solid var(--bg-card);   /* 諛곗??€ ?꾨컮?€ ?ъ씠 ???뚮몢由щ줈 '遺€?? ?④낵 */
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.55);  /* 鍮④컯 湲€濡쒖슦 */
    
    /* 誘몄꽭 吏꾨룞 ?좊땲硫붿씠?섏쑝濡?二쇱쓽 吏묒쨷 ?좊룄 */
    animation: badge-pulse 2.5s ease-in-out infinite;
    
    /* ?レ옄媛€ ?놁쑝硫??④? 泥섎━ (JS ?곕룞 ?⑸룄) */
    transition: transform 0.2s ease, opacity 0.2s ease;
}

button.sidebar-notif-badge {
    appearance: none;
    font-family: inherit;
    cursor: pointer;
}

/* 諛곗? ?놁쓬 (?レ옄 0 ?먮뒗 JS媛€ hide) */
.sidebar-notif-badge[data-count="0"],
.sidebar-notif-badge.is-hidden {
    display: none;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

/* ?ㅽ겕 紐⑤뱶: 諛곗? ?뚮몢由щ? ?ъ씠?쒕컮 諛곌꼍?됯낵 留욎땄 */
body.dark-mode .sidebar-notif-badge {
    border-color: var(--bg-sidebar);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.7);
}

/* 諛곗? 吏꾨룞(pulse) ?ㅽ봽?덉엫 */
@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* AJAX 濡쒓렇?????숈쟻?쇰줈 ?앹꽦??諛곗????숈씪?섍쾶 ?ㅽ????곸슜 */
#sidebar-profile-widget .sidebar-badge-wrapper {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   17. Sidebar ?뚮┝ ?앹삤踰?(Notification Popover)
   ========================================================================== */
.notification-popover {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 280px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg), 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 1rem;
    text-align: left;
}

.notification-popover.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(5px);
}

.notif-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.notif-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-primary);
}

.notif-read-all {
    font-size: 0.72rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.notif-read-all:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.notif-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notif-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease,
                opacity 0.28s ease,
                transform 0.28s ease,
                max-height 0.28s ease,
                margin 0.28s ease,
                padding 0.28s ease;
    max-height: 96px;
    overflow: hidden;
}

.notif-list li:hover {
    background-color: var(--bg-input);
}

.notif-list li.is-unread {
    color: var(--text-primary);
    font-weight: 700;
    background-color: rgba(239, 68, 68, 0.04);
}

.notif-list li.is-read {
    color: var(--text-muted);
    opacity: 0.68;
}

.notif-empty {
    min-height: 108px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.45rem;
    color: var(--text-muted);
    text-align: center;
}

.notif-empty i {
    font-size: 1.25rem;
    color: var(--text-muted);
    opacity: 0.65;
}

.notif-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
    line-height: 1;
    color: var(--primary-color);
}

.notif-text {
    flex: 1;
    min-width: 0;
}

.notif-message {
    display: block;
}

.notif-time {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 500;
}

.notif-delete-btn {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.notif-delete-btn:hover {
    background-color: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    transform: scale(1.05);
}

.notif-delete-btn:disabled {
    cursor: wait;
    opacity: 0.55;
}

.notif-list li.is-removing {
    opacity: 0;
    transform: translateX(28px);
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

/* ?ㅽ겕 紐⑤뱶 ?앹삤踰??몃? ?쒕떇 */
body.dark-mode .notification-popover {
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.4), 0 10px 15px -6px rgba(0, 0, 0, 0.4);
    background-color: var(--bg-sidebar);
}

/* Sidebar Navigation */
.sidebar-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 1.25rem;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    border-radius: 8px;
    color: var(--text-secondary, var(--text-muted));
    font-size: 0.92rem;
    font-weight: 800;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sidebar-nav-item i {
    width: 1.1rem;
    text-align: center;
    color: var(--primary-color);
}

.sidebar-nav-item:hover,
.sidebar-nav-item.active {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Notice Board */
.notice-board,
.notice-detail {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 2rem;
}

.notice-board-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.notice-kicker {
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.notice-board-header h1,
.notice-detail-header h1 {
    color: var(--text-primary);
    font-size: 1.65rem;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}

.notice-board-header p {
    color: var(--text-muted);
    font-size: 0.94rem;
}

.notice-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}

.notice-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: background-color 0.2s ease, padding 0.2s ease;
}

.notice-row:hover {
    background-color: var(--bg-sidebar);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.notice-row.is-pinned {
    background-color: rgba(13, 148, 136, 0.08);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.notice-main {
    flex: 1 1 auto;
    min-width: 0;
}

.notice-title-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.notice-badge-line,
.notice-detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.35rem;
}

.notice-pin-badge,
.notice-important-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
}

.notice-pin-badge {
    color: var(--primary-color);
    background-color: var(--primary-light);
}

.notice-important-badge {
    color: #ffffff;
    background-color: #ef4444;
}

.notice-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-new-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.42rem;
    border-radius: 999px;
    background: #10b981;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
}

.notice-meta,
.notice-detail-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.notice-pagination {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
}

.notice-pagination a {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-weight: 800;
}

.notice-pagination a.active,
.notice-pagination a:hover {
    color: #ffffff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.notice-empty-state {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.notice-empty-state i {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.notice-write-button,
.notice-submit-button,
.notice-cancel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 900;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.notice-write-button,
.notice-submit-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 2px 4px var(--primary-glow);
}

.notice-write-button:hover,
.notice-submit-button:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
}

.notice-cancel-button {
    color: var(--text-muted);
    background-color: var(--bg-card);
}

.notice-cancel-button:hover {
    color: var(--text-primary);
    background-color: var(--bg-sidebar);
}

.notice-write {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 2rem;
}

.notice-write-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.notice-write-header h1 {
    color: var(--text-primary);
    font-size: 1.65rem;
    margin-bottom: 0.35rem;
}

.notice-write-header p {
    color: var(--text-muted);
    font-size: 0.94rem;
}

.notice-write-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.notice-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 1rem;
}

.notice-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 800;
}

.notice-form-field input,
.notice-form-field select,
.notice-form-field textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 0.8rem 0.9rem;
    font: inherit;
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.notice-form-field textarea {
    resize: vertical;
    min-height: 260px;
    line-height: 1.7;
}

.notice-form-field input:focus,
.notice-form-field select:focus,
.notice-form-field textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.notice-check-field {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-primary);
    font-weight: 800;
    font-size: 0.9rem;
}

.notice-check-field input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.notice-search-form {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1.25rem 0;
}

.notice-search-box {
    position: relative;
    flex: 1;
    min-width: 0;
}

.notice-search-box i {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.notice-search-box input {
    width: 100%;
    min-height: 42px;
    padding: 0 1rem 0 2.55rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.notice-search-box input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.notice-search-button,
.notice-search-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 900;
}

.notice-search-button {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    color: #ffffff;
    cursor: pointer;
}

.notice-search-reset {
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-muted);
}

.notice-search-summary {
    margin: 0 0 0.85rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.notice-option-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
}

.notice-radio-group {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--text-primary);
}

.notice-radio-group legend {
    margin-right: 0.25rem;
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--text-muted);
}

.notice-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.notice-radio-group input {
    accent-color: var(--primary-color);
}

.notice-write-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding-top: 0.5rem;
}

.notice-attachment-field {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notice-attachment-field input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.notice-attachment-drop,
.upload-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 132px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.notice-attachment-drop:hover,
.upload-drop-zone:hover,
.upload-drop-zone.is-dragover {
    border-color: var(--primary-color);
    background-color: var(--primary-glow);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.notice-attachment-drop i,
.upload-drop-zone i {
    color: var(--primary-color);
    font-size: 1.35rem;
}

.notice-attachment-drop strong,
.upload-drop-zone strong {
    font-size: 0.98rem;
    font-weight: 900;
}

.notice-attachment-drop span,
.upload-drop-zone span {
    max-width: 540px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.upload-drop-zone small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.notice-attachment-preview {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice-attachment-preview li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.notice-attachment-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-attachment-preview em {
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.82rem;
}

.notice-detail {
    color: var(--text-primary);
}

.notice-detail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.notice-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 800;
}

.notice-back-link:hover {
    color: var(--primary-color);
}

.notice-detail-header {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.notice-detail-content {
    padding: 2rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.85;
    white-space: normal;
}

.notice-attachments {
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid var(--border-color);
}

.notice-attachments h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 900;
}

.notice-attachments h2 i {
    color: var(--primary-color);
}

.notice-attachments ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice-attachments a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.notice-attachments a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
}

.notice-attachments span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-attachments em {
    color: var(--text-muted);
    font-size: 0.84rem;
    font-style: normal;
}

.notice-admin-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.notice-delete-form {
    margin: 0;
}

.notice-admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.notice-admin-edit {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.notice-admin-edit:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
}

.notice-admin-delete {
    background-color: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

.notice-admin-delete:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    transform: translateY(-1px);
}

.meetup-board {
    width: min(1080px, 100%);
}

@media (min-width: 1025px) {
    .notice-board,
    .notice-detail,
    .notice-write {
        width: min(1280px, 100%);
    }

    .meetup-board {
        width: min(1440px, 100%);
    }

    .notice-write.meetup-create-page,
    .notice-write.meetup-edit {
        width: min(1360px, 100%);
    }

    .meetup-view-page {
        width: 100%;
        max-width: 1500px !important;
    }

    .mypage-dashboard,
    .mypage-danger-zone {
        width: min(1360px, 100%);
        max-width: 1360px;
    }

    #meetup-list-container > .grid,
    #meetup-list-container > .animate-fade-in > .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1500px) {
    #meetup-list-container > .grid,
    #meetup-list-container > .animate-fade-in > .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.meetup-create-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-width: 168px;
    min-height: 54px;
    padding: 0 1.15rem;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.24);
    transform: translateY(0);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    overflow: hidden;
    white-space: nowrap;
}

/* Meetup detail final mobile polish */
@media (max-width: 640px) {
    .meetup-view-page {
        width: 100%;
        max-width: 100vw;
        padding: 1rem 0.85rem 1.5rem !important;
        overflow-x: hidden;
    }

    .meetup-view-page > .flex:first-child {
        align-items: stretch !important;
        gap: 0.85rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.9rem !important;
    }

    .meetup-view-page > .flex:first-child > .space-y-2\.5 {
        display: grid;
        gap: 0.7rem;
        min-width: 0;
    }

    .meetup-view-page > .flex:first-child .inline-flex {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.5rem !important;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2 > span {
        justify-content: flex-start;
        min-height: 38px;
        padding: 0.55rem 0.75rem !important;
        font-size: 0.84rem !important;
        line-height: 1.35;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 > *,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 form {
        width: 100%;
        min-width: 0;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 a,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 button,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 span {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        padding: 0.6rem 0.5rem !important;
        font-size: 0.82rem !important;
        line-height: 1.25;
        white-space: normal;
    }

    .meetup-view-page > .w-full.bg-white\/60 {
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        border-radius: 18px !important;
        gap: 0.8rem !important;
    }

    .meetup-view-page > .w-full.bg-white\/60 .flex.justify-between {
        align-items: flex-start;
        gap: 0.7rem;
    }

    .meetup-view-page > .w-full.bg-white\/60 .flex.justify-between span:first-child {
        min-width: 0;
        line-height: 1.4;
        word-break: keep-all;
    }

    .meetup-view-page > .w-full.bg-white\/60 > .flex.items-center {
        width: 100%;
        justify-content: stretch;
    }

    .meetup-view-page > .w-full.bg-white\/60 > .flex.items-center > span {
        width: 100%;
        min-height: 42px;
        justify-content: center;
        font-size: 0.9rem !important;
    }

    .meetup-view-page .grid.grid-cols-1.lg\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .meetup-view-page .lg\:col-span-2,
    .meetup-view-page .lg\:col-span-1,
    .meetup-view-page .meetup-review-section,
    .meetup-view-page .meetup-side-column {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0;
    }

    .meetup-view-page .meetup-card {
        min-height: 0;
        padding: 1rem !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
    }

    .meetup-view-page .meetup-card h3,
    .meetup-view-page .meetup-card h4 {
        font-size: 0.98rem !important;
        line-height: 1.45 !important;
        word-break: keep-all;
    }

    .meetup-view-page .meetup-card .whitespace-pre-line {
        min-height: 0 !important;
        padding: 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.85 !important;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .meetup-view-page .meetup-card .flex.flex-wrap.gap-2\.5 {
        gap: 0.5rem !important;
    }

    .meetup-view-page .meetup-card .inline-flex.items-center.gap-1\.5 {
        max-width: 100%;
        min-height: 34px;
        font-size: 0.84rem !important;
    }

    .meetup-view-page .sticky-panel {
        position: static !important;
    }

    .meetup-view-page #rsvp-form {
        display: grid;
        gap: 0.7rem !important;
    }

    .meetup-view-page #rsvp-form .rsvp-option-card {
        min-height: 58px;
        padding: 0.85rem !important;
        border-radius: 16px !important;
        align-items: center;
    }

    .meetup-view-page #rsvp-form button[type="submit"],
    .meetup-view-page #rsvp-reset-form button {
        width: 100%;
        min-height: 48px;
        font-size: 0.95rem !important;
    }

    .meetup-review-form {
        padding: 0.85rem;
        border-radius: 16px;
    }

    .meetup-review-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .meetup-review-images {
        gap: 0.45rem;
    }

    .meetup-review-delete {
        justify-content: stretch;
    }

    .meetup-review-delete button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 {
        grid-template-columns: 1fr;
    }

    .meetup-view-page .meetup-card {
        padding: 0.95rem !important;
    }
}

.meetup-create-button span {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 950;
    line-height: 1.2;
}

.meetup-create-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.meetup-create-button i {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.meetup-create-button::after {
    content: none;
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 950;
    line-height: 1;
}

.meetup-create-button:hover {
    filter: brightness(1.03);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 118, 110, 0.3);
}

.meetup-overview-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.15rem;
}

.meetup-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(255, 255, 255, 0)),
        var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.meetup-stat-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 1rem;
}

.meetup-stat-card strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.32rem;
    font-weight: 950;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meetup-stat-card span:last-child {
    display: block;
    margin-top: 0.24rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
}

.meetup-stat-note {
    display: block;
    margin-top: 0.18rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    opacity: 0.82;
}

.meetup-tag-help {
    display: block;
    margin-top: 0.45rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.45;
}

.meetup-tag-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: -0.15rem 0 0.85rem;
}

.meetup-tag-list.is-compact {
    margin: 0.05rem 0 0.1rem;
}

.meetup-tag-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.55rem;
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.1);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.meetup-tag-pill.is-more {
    border-color: var(--border-color);
    background: var(--bg-soft);
    color: var(--text-muted);
}

.meetup-tag-pill.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.18);
}

.meetup-region-filter {
    margin-top: 1.15rem;
    padding: 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.06), rgba(255, 255, 255, 0));
    box-shadow: var(--shadow-sm);
}

.meetup-region-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.meetup-region-filter-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 900;
}

.meetup-region-filter-head i {
    color: var(--primary-color);
}

.meetup-region-filter-head small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

#region-filter-bar {
    padding: 0;
    border: 0;
}

#region-filter-bar .filter-region-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 0.95rem !important;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px !important;
    background: var(--bg-card);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    white-space: nowrap;
}

#region-filter-bar .filter-region-btn.bg-red-500 {
    border-color: transparent;
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.24);
}

.meetup-topic-filter {
    margin-top: 0.8rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.meetup-topic-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.meetup-topic-filter-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 900;
}

.meetup-topic-filter-head i {
    color: var(--primary-color);
}

.meetup-topic-filter-head small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

#topic-filter-bar {
    padding: 0;
    border: 0;
}

#topic-filter-bar .filter-topic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 0.85rem !important;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px !important;
    background: var(--bg-soft);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#topic-filter-bar .filter-topic-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

#topic-filter-bar .filter-topic-btn.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.24);
}

.meetup-status-filter {
    margin-top: 0.8rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.meetup-status-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.meetup-status-filter-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 900;
}

.meetup-status-filter-head i {
    color: #111827;
}

.meetup-status-filter-head small {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

#status-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem !important;
    padding: 0;
    border: 0;
}

#status-filter-bar .filter-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 0.85rem !important;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px !important;
    background: var(--bg-soft);
    color: var(--text-muted);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    white-space: nowrap;
}

#status-filter-bar .filter-status-btn.bg-gray-900 {
    border-color: transparent;
    background: #111827 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18);
}

.meetup-create-page {
    width: min(860px, 100%);
}

.meetup-create-page .notice-write-header {
    align-items: center;
    padding-bottom: 1.25rem;
}

.meetup-create-page .notice-write-form {
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.meetup-create-page .notice-form-field > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.45;
}

.meetup-create-page .notice-form-field input,
.meetup-create-page .notice-form-field select,
.meetup-create-page .notice-form-field textarea {
    min-height: 48px;
    border-radius: 14px;
    background-color: var(--bg-input);
    font-size: 0.95rem;
}

.meetup-create-page .notice-form-field textarea {
    min-height: 190px;
}

.meetup-create-page .notice-write-form > .border-t {
    padding: 1rem;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.05), transparent);
}

.meetup-create-page .notice-write-actions {
    gap: 0.75rem;
}

.meetup-view-page .sticky-panel > .meetup-card,
.meetup-view-page #rsvp-form,
.meetup-view-page #rsvp-form .rsvp-option-card {
    position: relative;
    z-index: 2;
}

.meetup-view-page .sticky-panel > .meetup-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

.meetup-view-page #rsvp-form .rsvp-option-card {
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #111827 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.dark .meetup-view-page #rsvp-form .rsvp-option-card {
    background: #111827 !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: #f9fafb !important;
}

.meetup-view-page #rsvp-form .rsvp-option-card span,
.meetup-view-page #rsvp-form .rsvp-option-card p,
.meetup-view-page #rsvp-form .rsvp-option-card div {
    color: inherit;
}

.meetup-view-page #rsvp-form .rsvp-option-card:has(input[type="radio"]:checked) {
    background: #fff7f8 !important;
    border-color: #f43f5e !important;
    color: #111827 !important;
}

.dark .meetup-view-page #rsvp-form .rsvp-option-card:has(input[type="radio"]:checked) {
    background: rgba(244, 63, 94, 0.16) !important;
    border-color: #fb7185 !important;
    color: #ffffff !important;
}

.meetup-view-page #late-round-container {
    background: #fffbeb !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

.dark .meetup-view-page #late-round-container {
    background: rgba(120, 53, 15, 0.42) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

.meetup-review-section {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.meetup-review-form {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), transparent);
}

.meetup-review-form label {
    display: grid;
    gap: 0.45rem;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 900;
}

.meetup-review-form select,
.meetup-review-form textarea,
.meetup-review-form input[type="file"] {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-input);
    color: var(--text-primary);
    padding: 0.8rem 0.9rem;
    font-size: 0.92rem;
    box-sizing: border-box;
}

.meetup-review-form textarea {
    min-height: 130px;
    line-height: 1.65;
    resize: vertical;
}

.meetup-review-form small {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.meetup-review-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-weight: 950;
    cursor: pointer;
}

.meetup-review-list {
    display: grid;
    gap: 0.85rem;
}

.meetup-review-item {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.meetup-review-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.meetup-review-head strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 950;
}

.meetup-review-head span {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.meetup-review-stars {
    color: #f59e0b;
    font-size: 0.9rem;
    font-weight: 950;
    white-space: nowrap;
}

.meetup-review-stars span {
    margin-left: 0.35rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.meetup-review-item p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

.meetup-review-images {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.meetup-review-images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

.meetup-review-delete {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.meetup-review-delete button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0 0.75rem;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .meetup-view-page .meetup-review-section {
        grid-column: 1 / span 2;
    }

    .meetup-view-page .meetup-side-column {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

.meetup-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.meetup-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.meetup-filter-group {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.meetup-filter-label {
    flex: 0 0 42px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 900;
}

.meetup-filter-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.meetup-filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--bg-sidebar);
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 800;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.meetup-filter-chip:hover,
.meetup-filter-chip.active {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: #ffffff;
    transform: translateY(-1px);
}

.meetup-search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.2rem;
}

.meetup-search-box {
    flex: 1 1 auto;
    min-width: 220px;
}

.meetup-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 220px;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.meetup-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.meetup-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.meetup-region-badge,
.meetup-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.meetup-region-badge {
    color: var(--primary-color);
    background-color: var(--primary-light);
}

.meetup-status-badge.is-open {
    color: #ffffff;
    background-color: #10b981;
}

.meetup-status-badge.is-closed {
    color: var(--text-muted);
    background-color: var(--bg-sidebar);
}

.meetup-card h2 {
    color: var(--text-primary);
    font-size: 1.08rem;
    line-height: 1.35;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meetup-author {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.meetup-card p {
    flex: 1 1 auto;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
}

.meetup-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.84rem;
}

.meetup-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.meetup-debug-message {
    display: block;
    margin-top: 10px;
    color: var(--text-muted);
    word-break: break-word;
}

/* Meetup list mobile readability polish */
.meetup-board .meetup-create-button::after {
    content: none;
}

@media (max-width: 768px) {
    .app-main {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .meetup-board {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
        padding: 1.4rem 1.1rem;
    }

    .meetup-board .notice-board-header {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .meetup-board .notice-board-header > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .meetup-overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        margin-top: 1rem;
    }

    .meetup-stat-card {
        gap: 0.65rem;
        padding: 0.85rem;
        border-radius: 16px;
    }

    .meetup-stat-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 0.9rem;
    }

    .meetup-stat-card strong {
        font-size: 1.08rem;
    }

    .meetup-stat-card span:last-child {
        font-size: 0.72rem;
    }

    .meetup-board .notice-board-header h1 {
        font-size: 2rem;
        line-height: 1.22;
    }

    .meetup-board .notice-board-header p {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.75;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .meetup-board .meetup-create-button {
        display: inline-flex;
        width: 100%;
        max-width: 100%;
        min-height: 56px;
        margin-top: 0.1rem;
        font-size: 0.95rem;
    }

    .meetup-board .meetup-create-button span {
        display: inline;
        white-space: normal;
    }

    .meetup-region-filter {
        margin-top: 1rem;
        margin-left: -0.1rem;
        margin-right: -0.1rem;
        padding: 0.85rem 0.8rem;
        border-radius: 16px;
        overflow: hidden;
    }

    .meetup-region-filter-head {
        margin-bottom: 0.65rem;
    }

    .meetup-region-filter-head span {
        font-size: 0.86rem;
    }

    .meetup-region-filter-head small {
        font-size: 0.72rem;
    }

    #region-filter-bar {
        flex-wrap: nowrap !important;
        gap: 0.55rem !important;
        margin-left: -0.15rem;
        margin-right: -0.15rem;
        padding: 0.1rem 0.15rem 0.25rem !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    #region-filter-bar::-webkit-scrollbar {
        display: none;
    }

    #region-filter-bar .filter-region-btn {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 1rem !important;
        border-radius: 999px !important;
        font-size: 0.88rem !important;
        scroll-snap-align: start;
    }

    .meetup-topic-filter {
        margin-top: 0.75rem;
        margin-left: -0.1rem;
        margin-right: -0.1rem;
        padding: 0.8rem;
        border-radius: 16px;
        overflow: hidden;
    }

    .meetup-topic-filter-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.65rem;
    }

    .meetup-topic-filter-head span {
        font-size: 0.86rem;
    }

    .meetup-topic-filter-head small {
        font-size: 0.72rem;
    }

    #topic-filter-bar {
        flex-wrap: nowrap !important;
        gap: 0.55rem !important;
        margin-left: -0.15rem;
        margin-right: -0.15rem;
        padding: 0.1rem 0.15rem 0.25rem !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    #topic-filter-bar::-webkit-scrollbar {
        display: none;
    }

    #topic-filter-bar .filter-topic-btn {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 1rem !important;
        font-size: 0.86rem !important;
        scroll-snap-align: start;
    }

    .meetup-status-filter {
        margin-top: 0.75rem;
        margin-left: -0.1rem;
        margin-right: -0.1rem;
        padding: 0.8rem;
        border-radius: 16px;
    }

    .meetup-status-filter-head {
        margin-bottom: 0.6rem;
    }

    .meetup-status-filter-head span {
        font-size: 0.86rem;
    }

    .meetup-status-filter-head small {
        font-size: 0.72rem;
    }

    #status-filter-bar {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem !important;
        padding-bottom: 0 !important;
        overflow: visible;
    }

    #status-filter-bar .filter-status-btn {
        min-height: 40px;
        padding: 0 0.55rem !important;
        border-radius: 999px !important;
        font-size: 0.86rem !important;
    }

    #search-filter-form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
        padding: 0.9rem !important;
        border-radius: 16px !important;
        gap: 0.75rem !important;
        box-shadow: var(--shadow-sm);
    }

    #search-filter-form input[type="text"],
    #search-filter-form select,
    #search-filter-form button {
        min-height: 44px;
        font-size: 0.9rem !important;
        border-radius: 12px !important;
    }

    #search-filter-form .relative.flex-1 {
        max-width: none !important;
        width: 100%;
        min-width: 0;
    }

    #search-filter-form > .flex {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.55rem !important;
    }

    #search-filter-form > .flex > * {
        flex: 1 1 calc(50% - 0.55rem);
        min-width: 130px;
        justify-content: center;
    }

    #search-filter-form input[type="text"],
    #search-filter-form select,
    #search-filter-form button {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #meetup-list-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    #search-filter-form > .flex button[type="submit"],
    #search-filter-form > .flex #reset-filters-btn {
        flex-basis: 100%;
    }

    #meetup-list-container > .grid,
    #meetup-list-container > .animate-fade-in > .grid {
        gap: 1rem !important;
        margin-top: 1.1rem !important;
    }

    #meetup-list-container > .grid > .relative,
    #meetup-list-container > .animate-fade-in > .grid > .relative {
        min-height: 0;
        padding: 1rem !important;
        border-radius: 16px !important;
        border-color: var(--border-color) !important;
        box-shadow: var(--shadow-sm) !important;
    }

    #meetup-list-container > .grid > .relative h3,
    #meetup-list-container > .animate-fade-in > .grid > .relative h3 {
        margin-bottom: 0.55rem !important;
        font-size: 1.04rem !important;
        line-height: 1.42 !important;
        white-space: normal;
    }

    #meetup-list-container > .grid > .relative > div:first-child > p,
    #meetup-list-container > .animate-fade-in > .grid > .relative > div:first-child > p {
        height: auto !important;
        min-height: 2.4rem;
        margin-bottom: 1rem !important;
        font-size: 0.86rem !important;
        line-height: 1.55 !important;
    }

    #meetup-list-container > .grid > .relative .text-xs,
    #meetup-list-container > .animate-fade-in > .grid > .relative .text-xs {
        font-size: 0.8rem !important;
    }

    #meetup-list-container > .grid > .relative .text-\[10px\],
    #meetup-list-container > .animate-fade-in > .grid > .relative .text-\[10px\] {
        font-size: 0.72rem !important;
    }

    #meetup-list-container > .grid > .relative .w-5.h-5,
    #meetup-list-container > .animate-fade-in > .grid > .relative .w-5.h-5 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    #meetup-list-container > .grid > .relative .h-1\.5,
    #meetup-list-container > .animate-fade-in > .grid > .relative .h-1\.5 {
        height: 0.42rem !important;
    }

    #meetup-list-container > .grid > .relative a[href*="meetup_view.php"],
    #meetup-list-container > .grid > .relative button,
    #meetup-list-container > .animate-fade-in > .grid > .relative a[href*="meetup_view.php"],
    #meetup-list-container > .animate-fade-in > .grid > .relative button {
        min-height: 36px;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        border-radius: 10px !important;
    }
}

/* Meetup detail/edit mobile readability polish */
@media (max-width: 768px) {
    .meetup-view-page {
        padding: 1.35rem 1rem !important;
    }

    .meetup-view-page > .flex:first-child {
        gap: 1rem !important;
        margin-bottom: 1.25rem !important;
        padding-bottom: 1rem !important;
    }

    .meetup-view-page > .flex:first-child a {
        min-height: 38px;
        font-size: 0.9rem !important;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.55rem !important;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 > * {
        width: 100%;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 a,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 button,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 span {
        width: 100%;
        justify-content: center;
        min-height: 42px;
        font-size: 0.9rem !important;
    }

    .meetup-view-page .meetup-card {
        padding: 1.15rem !important;
        border-radius: 18px !important;
        box-shadow: var(--shadow-md) !important;
    }

    .meetup-view-page .sticky-panel > .meetup-card {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
    }

    .meetup-view-page .rsvp-option-card {
        min-height: 64px;
        padding: 1rem !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
    }

    .dark .meetup-view-page .rsvp-option-card {
        background: #111827 !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
    }

    .meetup-view-page .rsvp-option-card input[type="radio"] {
        flex: 0 0 auto;
        width: 1.15rem !important;
        height: 1.15rem !important;
    }

    .meetup-view-page .meetup-card h3 {
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    .meetup-view-page .meetup-card h4 {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    .meetup-view-page .meetup-card p,
    .meetup-view-page .meetup-card div,
    .meetup-view-page .meetup-card span,
    .meetup-view-page .meetup-card label {
        font-size: 0.9rem;
    }

    .meetup-view-page .meetup-card .text-\[13px\],
    .meetup-view-page .meetup-card .text-\[12px\],
    .meetup-view-page .meetup-card .text-\[11px\],
    .meetup-view-page .meetup-card .text-\[10px\],
    .meetup-view-page .meetup-card .text-\[9\.5px\],
    .meetup-view-page .meetup-card .text-\[9px\] {
        font-size: 0.86rem !important;
    }

    .meetup-view-page .meetup-card .leading-relaxed {
        line-height: 1.75 !important;
    }

    .meetup-view-page .meetup-card input,
    .meetup-view-page .meetup-card select,
    .meetup-view-page .meetup-card button,
    .meetup-view-page .meetup-card a {
        min-height: 42px;
        font-size: 0.9rem !important;
        border-radius: 12px !important;
    }

    .meetup-view-page .rsvp-option-card {
        padding: 1rem !important;
        gap: 0.85rem !important;
    }

    .meetup-view-page .rsvp-option-card input[type="radio"] {
        width: 1.15rem;
        height: 1.15rem;
    }

    .meetup-view-page .w-10.h-10 {
        width: 3rem !important;
        height: 3rem !important;
    }

    .meetup-view-page .w-4\.5.h-4\.5 {
        width: 1.55rem !important;
        height: 1.55rem !important;
    }

    .meetup-view-page .grid.grid-cols-1.lg\:grid-cols-3 {
        gap: 1rem !important;
    }

    .meetup-view-page .sticky-panel {
        position: static !important;
    }

    .meetup-edit {
        padding: 1.25rem !important;
    }

    .meetup-edit .notice-write-header {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
    }

    .meetup-edit .notice-write-header h1 {
        font-size: 1.85rem;
        line-height: 1.25;
    }

    .meetup-edit .notice-write-header p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .meetup-edit .notice-back-link {
        width: 100%;
        min-height: 42px;
        justify-content: center;
    }

    .meetup-edit .notice-write-form {
        padding: 1rem;
        border-radius: 18px;
    }

    .meetup-edit .notice-form-field > span,
    .meetup-edit .notice-form-field label {
        font-size: 0.95rem;
    }

    .meetup-edit .notice-form-field input,
    .meetup-edit .notice-form-field select,
    .meetup-edit .notice-form-field textarea,
    .meetup-edit input,
    .meetup-edit select,
    .meetup-edit textarea {
        min-height: 46px;
        font-size: 0.95rem !important;
        border-radius: 13px !important;
    }

    .meetup-edit textarea {
        min-height: 170px;
        line-height: 1.7;
    }

    .meetup-edit .notice-write-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 0.75rem;
    }

    .meetup-edit .notice-cancel-button,
    .meetup-edit .notice-submit-button {
        width: 100%;
        min-height: 48px;
        font-size: 0.95rem;
    }

    .meetup-create-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 1.2rem 1rem !important;
        overflow: hidden;
    }

    .meetup-create-page .notice-write-header {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .meetup-create-page .notice-write-header h1 {
        font-size: 1.9rem;
        line-height: 1.25;
    }

    .meetup-create-page .notice-write-header p {
        max-width: 100%;
        font-size: 0.98rem;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    .meetup-create-page .notice-back-link {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        border-radius: 14px;
    }

    .meetup-create-page .notice-write-form {
        gap: 1rem;
        padding: 1rem;
        border-radius: 20px;
        box-sizing: border-box;
    }

    .meetup-create-page .notice-form-field {
        gap: 0.5rem;
        font-size: 0.95rem;
    }

    .meetup-create-page .notice-form-field input,
    .meetup-create-page .notice-form-field select,
    .meetup-create-page .notice-form-field textarea {
        width: 100%;
        max-width: 100%;
        min-height: 48px;
        padding: 0.9rem 0.95rem;
        border-radius: 14px !important;
        box-sizing: border-box;
        font-size: 0.95rem !important;
    }

    .meetup-create-page .notice-form-field textarea {
        min-height: 180px;
        line-height: 1.65;
    }

    .meetup-create-page .grid {
        gap: 0.9rem !important;
    }

    .meetup-create-page .notice-write-form > .border-t {
        margin-top: 0.5rem;
        padding: 0.9rem;
        border-radius: 18px;
    }

    .meetup-create-page .notice-write-form > .border-t h3 {
        align-items: flex-start;
        font-size: 0.98rem;
        line-height: 1.45;
    }

    .meetup-create-page .notice-write-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 0.75rem;
        margin-top: 0.35rem;
    }

    .meetup-create-page .notice-cancel-button,
    .meetup-create-page .notice-submit-button {
        width: 100%;
        min-height: 50px;
        border-radius: 14px;
        font-size: 0.96rem;
    }
}

/* Notice board UI polish */
.notice-board > .notice-board-header {
    position: relative;
    align-items: center;
    padding: 0 0 1.35rem;
    margin-bottom: 1.15rem;
}

.notice-board > .notice-board-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), transparent 72%);
    opacity: 0.8;
}

.notice-board > .notice-board-header .notice-kicker {
    color: var(--text-muted);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
}

.notice-board > .notice-board-header h1 {
    font-size: clamp(1.65rem, 5vw, 2.15rem);
    font-weight: 950;
    letter-spacing: 0;
}

.notice-board > .notice-board-header p {
    max-width: 520px;
    line-height: 1.7;
}

.notice-board > .notice-board-header .notice-write-button {
    position: relative;
    min-width: 132px;
    min-height: 52px;
    padding: 0 1.05rem;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.22);
    overflow: hidden;
}

.notice-board > .notice-board-header .notice-write-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.notice-board > .notice-board-header .notice-write-button i,
.notice-board > .notice-board-header .notice-write-button span {
    position: relative;
    z-index: 1;
}

.notice-board .notice-search-form {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.notice-board .notice-search-box input {
    min-height: 48px;
    border-radius: 12px;
    background-color: var(--bg-sidebar);
    font-weight: 750;
}

.notice-board .notice-search-button {
    min-height: 48px;
    min-width: 104px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), #0f766e);
    box-shadow: 0 10px 20px rgba(15, 118, 110, 0.16);
}

.notice-board .notice-search-reset {
    min-height: 48px;
    border-radius: 12px;
}

.notice-board .notice-list {
    gap: 0.75rem;
    border-top: 0;
}

.notice-board .notice-row {
    position: relative;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.notice-board .notice-row:hover {
    padding-left: 1rem;
    padding-right: 1rem;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.notice-board .notice-row.is-pinned {
    border-color: rgba(20, 184, 166, 0.32);
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.02)),
        var(--bg-card);
}

.notice-board .notice-title-line {
    gap: 0.45rem;
}

.notice-board .notice-title {
    font-size: 0.98rem;
    font-weight: 950;
    line-height: 1.4;
}

.notice-board .notice-pin-badge,
.notice-board .notice-important-badge,
.notice-board .notice-new-badge {
    min-height: 23px;
    padding: 0 0.55rem;
}

.notice-board .notice-meta {
    align-items: center;
    gap: 0.65rem;
    font-size: 0.8rem;
    font-weight: 750;
}

.notice-board .notice-meta span,
.notice-board .notice-meta time {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

@media (max-width: 768px) {
    .notice-board > .notice-board-header {
        align-items: stretch;
        flex-direction: column;
    }

    .notice-board > .notice-board-header .notice-write-button {
        width: 100%;
    }

    .notice-board .notice-search-form {
        padding: 0.65rem;
        gap: 0.55rem;
    }

    .notice-board .notice-row {
        padding: 0.95rem;
    }

    .notice-board .notice-row:hover {
        padding-left: 0.95rem;
        padding-right: 0.95rem;
        transform: none;
    }

    .notice-board .notice-title-line {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .notice-board .notice-title {
        flex-basis: 100%;
        order: 5;
        white-space: normal;
    }

    .notice-board .notice-new-badge {
        order: 4;
    }

    .notice-board .notice-meta {
        width: 100%;
        justify-content: flex-start;
    }
}

/* MyPage Meetup Hub UI polish */
#tab-meetups {
    width: 100%;
}

#tab-meetups .mypage-meetup-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.15rem;
}

#tab-meetups .mypage-meetup-summary-card {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 0.85rem;
    min-height: 86px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(255, 255, 255, 0)),
        var(--bg-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

#tab-meetups .mypage-meetup-summary-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    opacity: 0.9;
}

#tab-meetups .mypage-meetup-summary-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background-color: var(--primary-light);
    color: var(--primary-color);
    font-size: 1.05rem;
}

#tab-meetups .mypage-meetup-summary-card strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.45rem;
    font-weight: 950;
    line-height: 1;
    margin-bottom: 0.25rem;
}

#tab-meetups .mypage-meetup-summary-card span:last-child {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 850;
}

#tab-meetups .mypage-meetup-focus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

#tab-meetups .mypage-meetup-focus-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.07), transparent), var(--bg-card);
    box-shadow: var(--shadow-sm);
}

#tab-meetups .mypage-meetup-focus-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(20, 184, 166, 0.12);
    color: var(--primary-color);
}

#tab-meetups .mypage-meetup-focus-icon.is-warm {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

#tab-meetups .mypage-meetup-focus-card small {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
}

#tab-meetups .mypage-meetup-focus-card strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tab-meetups .mypage-meetup-focus-card p {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

#tab-meetups .mypage-meetup-focus-card a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.8rem;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 950;
    white-space: nowrap;
}

#tab-meetups .mypage-anchor {
    position: relative;
    top: -90px;
    display: block;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

#tab-meetups .mypage-meetup-section {
    margin-bottom: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

#tab-meetups .mypage-meetup-section-head {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

#tab-meetups .mypage-meetup-section-head h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 950;
    margin: 0 0 0.3rem;
}

#tab-meetups .mypage-meetup-section-head h3 i {
    color: var(--primary-color);
}

#tab-meetups .mypage-meetup-section-head p {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
    margin: 0;
}

#tab-meetups .mypage-meetup-action {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 0.85rem;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 950;
    box-shadow: var(--shadow-sm);
}

#tab-meetups .mypage-meetup-action.is-secondary {
    border: 1px solid var(--border-color);
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
}

#tab-meetups .mypage-meetup-list {
    display: flex !important;
    flex-direction: column;
    gap: 0.7rem;
}

#tab-meetups .mypage-meetup-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background-color: var(--bg-sidebar);
}

#tab-meetups .mypage-meetup-main {
    display: flex !important;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

#tab-meetups .mypage-meetup-badge {
    width: fit-content;
    display: inline-flex !important;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background-color: var(--primary-light);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 950;
}

#tab-meetups .mypage-meetup-badge.is-warning {
    background-color: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

#tab-meetups .mypage-meetup-title {
    display: block;
    max-width: 100%;
    color: var(--text-primary);
    font-size: 0.96rem;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tab-meetups .mypage-meetup-meta {
    color: var(--text-muted);
    font-size: 0.79rem;
    font-weight: 750;
    line-height: 1.45;
}

#tab-meetups .mypage-meetup-links {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
}

#tab-meetups .mypage-meetup-links a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 900;
}

#tab-meetups .mypage-meetup-empty {
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 13px;
    background-color: var(--bg-sidebar);
    color: var(--text-muted);
    font-size: 0.88rem;
    text-align: center;
}

#tab-meetups .mypage-spot-report-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

#tab-meetups .mypage-spot-report-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-left: 4px solid #f59e0b;
    border-radius: 13px;
    background: var(--bg-sidebar);
}

#tab-meetups .mypage-spot-report-item.is-approved { border-left-color: #10b981; }
#tab-meetups .mypage-spot-report-item.is-rejected { border-left-color: #ef4444; }

#tab-meetups .mypage-spot-report-main {
    min-width: 0;
    display: grid;
    gap: 0.3rem;
}

#tab-meetups .mypage-spot-report-status {
    width: fit-content;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
    font-size: 0.7rem;
    font-weight: 950;
}

#tab-meetups .is-approved .mypage-spot-report-status { color: #047857; background: rgba(16, 185, 129, 0.14); }
#tab-meetups .is-rejected .mypage-spot-report-status { color: #b42318; background: rgba(239, 68, 68, 0.12); }

#tab-meetups .mypage-spot-report-main strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tab-meetups .mypage-spot-report-main small { color: var(--text-muted); font-weight: 750; }

#tab-meetups .mypage-spot-report-main p {
    margin-top: 0.25rem;
    padding: 0.6rem;
    border-radius: 9px;
    color: var(--text-secondary);
    background: var(--bg-card);
    font-size: 0.8rem;
    line-height: 1.55;
}

#tab-meetups .mypage-spot-report-main p i { margin-right: 0.35rem; color: var(--primary-color); }
#tab-meetups .mypage-spot-report-link { flex: 0 0 auto; }

#tab-meetups .mypage-spot-report-link a,
#tab-meetups .mypage-spot-report-link span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-muted);
    background: var(--bg-card);
    font-size: 0.76rem;
    font-weight: 900;
}

#tab-meetups .mypage-spot-report-link a { color: #fff; border-color: transparent; background: var(--primary-color); }

@media (max-width: 768px) {
    #tab-meetups .mypage-meetup-summary {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    #tab-meetups .mypage-meetup-summary-card {
        min-height: 74px;
        padding: 0.9rem;
    }

    #tab-meetups .mypage-meetup-focus {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    #tab-meetups .mypage-meetup-focus-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #tab-meetups .mypage-meetup-focus-card a {
        grid-column: 1 / -1;
        width: 100%;
    }

    #tab-meetups .mypage-meetup-section {
        padding: 1rem;
        border-radius: 14px;
    }

    #tab-meetups .mypage-meetup-section-head,
    #tab-meetups .mypage-meetup-item {
        align-items: stretch;
        flex-direction: column;
    }

    #tab-meetups .mypage-meetup-action,
    #tab-meetups .mypage-meetup-links a {
        width: 100%;
    }

    #tab-meetups .mypage-meetup-links {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }

    #tab-meetups .mypage-spot-report-list { grid-template-columns: 1fr; }
    #tab-meetups .mypage-spot-report-item { align-items: stretch; flex-direction: column; }
    #tab-meetups .mypage-spot-report-link a,
    #tab-meetups .mypage-spot-report-link span { width: 100%; }
}

@media (max-width: 768px) {
    .notice-board,
    .notice-detail {
        padding: 1.25rem;
    }

    .meetup-board .notice-board-header {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
    }

    .meetup-board .meetup-create-button {
        width: 100%;
        min-height: 50px;
        border-radius: 14px;
    }

    .notice-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .notice-meta {
        justify-content: flex-start;
    }

    .notice-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .notice-search-button,
    .notice-search-reset {
        width: 100%;
    }

    .notice-option-panel,
    .notice-admin-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .notice-admin-button,
    .notice-delete-form {
        width: 100%;
    }
}

/* Meetup detail mobile override - keep this at the bottom */
@media (max-width: 640px) {
    .meetup-view-page {
        max-width: 100vw;
        padding: 1rem 0.85rem 1.5rem !important;
        overflow-x: hidden;
    }

    .meetup-view-page > .flex:first-child {
        align-items: stretch !important;
        gap: 0.85rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.9rem !important;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.5rem !important;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2 > span {
        justify-content: flex-start;
        min-height: 38px;
        padding: 0.55rem 0.75rem !important;
        font-size: 0.84rem !important;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 > *,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 form {
        width: 100%;
        min-width: 0;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 a,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 button,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 span {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        padding: 0.6rem 0.5rem !important;
        font-size: 0.82rem !important;
        line-height: 1.25;
        white-space: normal;
    }

    .meetup-view-page > .w-full.bg-white\/60 {
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        border-radius: 18px !important;
        gap: 0.8rem !important;
    }

    .meetup-view-page > .w-full.bg-white\/60 > .flex.items-center,
    .meetup-view-page > .w-full.bg-white\/60 > .flex.items-center > span {
        width: 100%;
        justify-content: center;
    }

    .meetup-view-page .grid.grid-cols-1.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .meetup-view-page .lg\:col-span-2,
    .meetup-view-page .lg\:col-span-1,
    .meetup-view-page .meetup-review-section,
    .meetup-view-page .meetup-side-column {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0;
    }

    .meetup-view-page .meetup-card {
        min-height: 0;
        padding: 1rem !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
    }

    .meetup-view-page .meetup-card .whitespace-pre-line {
        min-height: 0 !important;
        padding: 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.85 !important;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .meetup-view-page .meetup-card h3,
    .meetup-view-page .meetup-card h4 {
        font-size: 0.98rem !important;
        line-height: 1.45 !important;
        word-break: keep-all;
    }

    .meetup-view-page #rsvp-form .rsvp-option-card {
        min-height: 58px;
        padding: 0.85rem !important;
        border-radius: 16px !important;
        align-items: center;
    }

    .meetup-view-page #rsvp-form button[type="submit"],
    .meetup-view-page #rsvp-reset-form button,
    .meetup-review-submit,
    .meetup-review-delete button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        font-size: 0.95rem !important;
    }

    .meetup-review-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }
}

@media (max-width: 480px) {
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 {
        grid-template-columns: 1fr;
    }
}

/* Meetup detail readability guard */
.meetup-view-page .meetup-card,
.meetup-view-page .meetup-review-section,
.meetup-view-page .sticky-panel > .meetup-card {
    position: relative;
    z-index: 1;
    background: #ffffff !important;
    color: #111827 !important;
}

.dark .meetup-view-page .meetup-card,
.dark .meetup-view-page .meetup-review-section,
.dark .meetup-view-page .sticky-panel > .meetup-card {
    background: #111827 !important;
    color: #f9fafb !important;
}

body.dark-mode .meetup-view-page .meetup-card,
body.dark-mode .meetup-view-page .meetup-review-section,
body.dark-mode .meetup-view-page .sticky-panel > .meetup-card {
    background: #111827 !important;
    color: #f9fafb !important;
}

.meetup-view-page .meetup-card *,
.meetup-view-page .meetup-review-section * {
    position: relative;
}

.meetup-view-page .meetup-card p,
.meetup-view-page .meetup-card span,
.meetup-view-page .meetup-card div,
.meetup-view-page .meetup-card label,
.meetup-view-page .meetup-review-section p,
.meetup-view-page .meetup-review-section span,
.meetup-view-page .meetup-review-section label {
    text-shadow: none !important;
}

.meetup-view-page .bg-white\/60,
.meetup-view-page .dark\:bg-gray-800\/40 {
    backdrop-filter: none !important;
}

/* Meetup list light-mode readability guard */
body:not(.dark-mode) .meetup-board .meetup-region-filter,
body:not(.dark-mode) .meetup-board .meetup-topic-filter,
body:not(.dark-mode) .meetup-board .meetup-status-filter,
body:not(.dark-mode) .meetup-board #search-filter-form,
body:not(.dark-mode) .meetup-board .meetup-list-card {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07) !important;
}

body:not(.dark-mode) .meetup-board #search-filter-form input[type="text"],
body:not(.dark-mode) .meetup-board #search-filter-form select {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(203, 213, 225, 0.95) !important;
}

body:not(.dark-mode) .meetup-board #search-filter-form input[type="text"]::placeholder {
    color: #64748b !important;
    opacity: 1;
}

body:not(.dark-mode) .meetup-board .meetup-list-card h3,
body:not(.dark-mode) .meetup-board .meetup-list-card h3 a,
body:not(.dark-mode) .meetup-board .meetup-list-card .text-gray-800,
body:not(.dark-mode) .meetup-board .meetup-list-card .text-gray-900 {
    color: #111827 !important;
}

body:not(.dark-mode) .meetup-board .meetup-list-card p,
body:not(.dark-mode) .meetup-board .meetup-list-card .text-gray-500,
body:not(.dark-mode) .meetup-board .meetup-list-card .text-gray-600 {
    color: #475569 !important;
}

body:not(.dark-mode) .meetup-board .meetup-list-card.is-recruit-closed {
    background: #ffffff !important;
    opacity: 1 !important;
}

body:not(.dark-mode) .meetup-board .meetup-list-card.is-recruit-closed::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.035), transparent 48%);
}

body:not(.dark-mode) .meetup-board .filter-region-btn:not(.bg-red-500),
body:not(.dark-mode) .meetup-board .filter-topic-btn:not(.is-active),
body:not(.dark-mode) .meetup-board .filter-status-btn:not(.bg-gray-900) {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid rgba(226, 232, 240, 0.95);
}

/* Meetup spots list */
.meetup-spots-page {
    width: min(1180px, 100%);
}

.meetup-spots-page .spot-ready-button {
    cursor: pointer;
}

.spot-overview-stats {
    margin-bottom: 0.95rem;
}

.spot-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

@media (max-width: 768px) {
    .meetup-spots-page .meetup-region-filter {
        overflow: hidden;
    }

    #spot-region-scroll {
        flex-wrap: nowrap;
        gap: 0.55rem;
        margin-inline: -0.25rem;
        padding: 0.1rem 0.25rem 0.45rem;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
    }

    #spot-region-scroll::-webkit-scrollbar {
        display: none;
    }

    #spot-region-scroll .filter-region-btn {
        flex: 0 0 auto;
        min-height: 42px;
        padding-inline: 1rem;
        scroll-snap-align: start;
        white-space: nowrap;
    }
}

.meetup-spots-page .filter-region-btn,
.meetup-spots-page .filter-topic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--bg-card);
    font-size: 0.82rem;
    font-weight: 850;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.meetup-spots-page .filter-region-btn:hover,
.meetup-spots-page .filter-topic-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(13, 148, 136, 0.45);
}

.meetup-spots-page .filter-region-btn.is-active,
.meetup-spots-page .filter-topic-btn.is-active {
    color: #ffffff;
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 10px 18px var(--primary-glow);
}

.spot-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px auto auto;
    gap: 0.65rem;
    align-items: center;
    margin: 1rem 0 1.2rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.spot-search-box {
    position: relative;
}

.spot-search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.spot-search-box input,
.spot-sort-select {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    outline: none;
}

.spot-search-box input {
    padding: 0 1rem 0 2.75rem;
}

.spot-sort-select {
    padding: 0 0.8rem;
}

.spot-search-form button,
.spot-reset-link,
.spot-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 46px;
    padding: 0 1rem;
    border-radius: 13px;
    font-weight: 900;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.spot-search-form button {
    border: 0;
    color: #ffffff;
    background: var(--deep-sea-medium);
}

.spot-reset-link {
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.spot-search-form button:hover,
.spot-reset-link:hover,
.spot-map-link:hover {
    transform: translateY(-1px);
}

.spot-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.spot-card {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.58rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(13, 148, 136, 0.07), rgba(249, 115, 22, 0.035)),
        var(--bg-card);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.spot-view-toolbar { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin:.85rem 0 1rem; }
.spot-view-switch { display:inline-flex; padding:4px; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-card); }
.spot-view-switch a,.spot-favorite-filter { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:38px; padding:0 .85rem; border-radius:9px; color:var(--text-muted); font-weight:850; font-size:.86rem; }
.spot-view-switch a.is-active,.spot-favorite-filter.is-active { color:#fff; background:var(--primary-color); }
.spot-favorite-filter { border:1px solid var(--border-color); background:var(--bg-card); }
.spot-card-cover { height:132px; margin:-1rem -1rem .18rem; overflow:hidden; border-radius:19px 19px 0 0; background:var(--primary-light); }
.spot-card-cover img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.spot-card:hover .spot-card-cover img { transform:scale(1.035); }
.spot-card-cover span { display:grid; width:100%; height:100%; place-items:center; color:var(--primary-color); font-size:2rem; }
.spot-card-signals { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; }
.spot-card-signals > span { display:inline-flex; align-items:center; gap:.25rem; min-height:26px; padding:.2rem .48rem; border-radius:999px; font-size:.73rem; font-weight:850; background:var(--bg-primary); color:var(--text-muted); }
.spot-card-signals .spot-rating { color:#b45309; }
.spot-card-signals .spot-rating small { color:var(--text-muted); }
.spot-card-signals .spot-business-status.is-open { color:#047857; background:#d1fae5; }
.spot-card-signals .spot-business-status.is-closed { color:#b91c1c; background:#fee2e2; }
.spot-map-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); min-height:580px; overflow:hidden; border:1px solid var(--border-color); border-radius:18px; background:var(--bg-card); }
.spot-map-canvas { min-height:580px; background:var(--bg-secondary); }
.spot-map-list { max-height:580px; overflow:auto; padding:.75rem; border-left:1px solid var(--border-color); }
.spot-map-list a { display:flex; flex-direction:column; gap:.3rem; padding:.8rem; border-bottom:1px solid var(--border-color); color:var(--text-primary); }
.spot-map-list span { color:var(--text-muted); font-size:.82rem; line-height:1.45; }
.spot-map-message { display:grid; height:100%; place-items:center; padding:2rem; color:var(--text-muted); text-align:center; }
.spot-duplicate-warning { margin-bottom:1rem; padding:1rem; border:1px solid #f59e0b; border-radius:12px; background:#fffbeb; color:#92400e; }
.spot-duplicate-warning > strong,.spot-duplicate-warning a,.spot-duplicate-warning span,.spot-duplicate-warning label { display:flex; align-items:center; gap:.45rem; }
.spot-duplicate-warning > div { display:grid; gap:.35rem; margin:.65rem 0; }
.spot-duplicate-warning a { color:#0f766e; font-weight:800; }

.spot-review-section { margin-top:1.25rem; padding:1.25rem; border:1px solid var(--border-color); border-radius:18px; background:var(--bg-card); }
.spot-review-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.spot-review-header span { color:var(--primary-color); font-size:.76rem; font-weight:900; }
.spot-review-header h2 { margin-top:.25rem; color:var(--text-primary); font-size:1.18rem; }
.spot-review-header > strong { display:flex; align-items:center; gap:.35rem; color:#b45309; font-size:1.35rem; }
.spot-review-header small { color:var(--text-muted); font-size:.75rem; }
.spot-review-form { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.75rem; padding:1rem; border-radius:14px; background:var(--bg-secondary); }
.spot-review-form textarea { width:100%; min-height:82px; padding:.8rem; border:1px solid var(--border-color); border-radius:10px; resize:vertical; color:var(--text-primary); background:var(--bg-card); }
.spot-review-form button { min-height:44px; padding:0 1rem; border:0; border-radius:10px; color:#fff; background:var(--primary-color); font-weight:850; }
.spot-rating-input { display:flex; flex-direction:row-reverse; justify-content:flex-end; }
.spot-rating-input input { position:absolute; opacity:0; pointer-events:none; }
.spot-rating-input label { padding:.1rem; color:#cbd5e1; cursor:pointer; font-size:1.25rem; }
.spot-rating-input input:checked ~ label,.spot-rating-input label:hover,.spot-rating-input label:hover ~ label { color:#f59e0b; }
.spot-review-guide,.spot-review-empty { padding:1rem; border-radius:12px; color:var(--text-muted); background:var(--bg-secondary); }
.spot-review-list { display:grid; gap:.75rem; margin-top:1rem; }
.spot-review-list article { position:relative; padding:1rem 0; border-top:1px solid var(--border-color); }
.spot-review-list article > div { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; }
.spot-review-list article span { color:#f59e0b; letter-spacing:1px; }
.spot-review-list article time { color:var(--text-muted); font-size:.78rem; }
.spot-review-list article p { margin-top:.55rem; color:var(--text-secondary); line-height:1.7; }
.spot-review-list article form { position:absolute; top:1rem; right:0; }
.spot-review-list article form button { border:0; color:#dc2626; background:none; cursor:pointer; }

.spot-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 148, 136, 0.45);
    box-shadow: var(--shadow-md);
}

.spot-card .spot-card-top {
    position: absolute;
    z-index: 2;
    top: .7rem;
    left: .7rem;
    right: .7rem;
    justify-content: space-between;
    pointer-events: none;
}

.spot-card .spot-category-badge,
.spot-card .spot-region-badge {
    box-shadow: 0 3px 12px rgba(15, 23, 42, .14);
    backdrop-filter: blur(8px);
}

.spot-card-top,
.spot-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.spot-category-badge,
.spot-region-badge,
.spot-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.spot-category-badge {
    padding: 0.32rem 0.62rem;
    color: var(--primary-color);
    background: var(--primary-light);
}

.spot-region-badge {
    padding: 0.32rem 0.62rem;
    color: var(--accent-text);
    background: var(--accent-light);
}

.spot-card h2 {
    color: var(--text-primary);
    font-size: 1.18rem;
    line-height: 1.35;
    font-weight: 950;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.spot-address {
    display: flex;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.55;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.spot-description {
    flex: 1 1 auto;
    color: var(--text-muted);
    font-size: 0.91rem;
    line-height: 1.72;
}

.spot-card-meta {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
}

.spot-card-meta span {
    padding: 0.25rem 0.5rem;
    background: var(--bg-primary);
}

.spot-map-link {
    width: 100%;
    color: #ffffff;
    background: var(--primary-color);
    box-shadow: 0 10px 20px var(--primary-glow);
}

.spot-empty-state {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem;
    border: 1px dashed var(--border-color);
    border-radius: 22px;
    color: var(--text-muted);
    background: var(--bg-card);
    text-align: center;
}

.spot-empty-state i {
    color: var(--primary-color);
    font-size: 2rem;
}

.spot-empty-state h3 {
    color: var(--text-primary);
    font-size: 1.08rem;
}

.spot-empty-state p {
    max-width: 520px;
    line-height: 1.7;
}

body:not(.dark-mode) .meetup-spots-page .meetup-region-filter,
body:not(.dark-mode) .meetup-spots-page .meetup-topic-filter,
body:not(.dark-mode) .meetup-spots-page .spot-search-form,
body:not(.dark-mode) .meetup-spots-page .spot-card,
body:not(.dark-mode) .meetup-spots-page .spot-empty-state {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07) !important;
}

body:not(.dark-mode) .meetup-spots-page .spot-search-box input,
body:not(.dark-mode) .meetup-spots-page .spot-sort-select {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(203, 213, 225, 0.95) !important;
}

body:not(.dark-mode) .meetup-spots-page .spot-card h2,
body:not(.dark-mode) .meetup-spots-page .spot-empty-state h3 {
    color: #111827 !important;
}

body:not(.dark-mode) .meetup-spots-page .spot-description,
body:not(.dark-mode) .meetup-spots-page .spot-address {
    color: #475569 !important;
}

@media (max-width: 1024px) {
    .spot-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spot-search-form {
        grid-template-columns: 1fr 150px;
    }
}

@media (max-width: 640px) {
    .meetup-spots-page {
        padding: 1rem;
    }

    .spot-search-form,
    .spot-card-grid {
        grid-template-columns: 1fr;
    }

    .spot-search-form button,
    .spot-reset-link {
        width: 100%;
    }

    .meetup-spots-page .filter-region-btn,
    .meetup-spots-page .filter-topic-btn {
        min-height: 40px;
        padding: 0 0.9rem;
        font-size: 0.86rem;
    }

    .spot-view-toolbar { align-items:stretch; }
    .spot-view-switch,.spot-favorite-filter { flex:1 1 auto; }
    .spot-view-switch a { flex:1; }
    .spot-map-layout { grid-template-columns:1fr; }
    .spot-map-canvas { min-height:430px; }
    .spot-map-list { max-height:260px; border-left:0; border-top:1px solid var(--border-color); }
    .spot-review-form { grid-template-columns:1fr; }
    .spot-review-header { flex-direction:column; }
}

.spot-wizard-lock {
    overflow: hidden;
}

.spot-wizard-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.spot-wizard-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.spot-wizard-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.64);
    backdrop-filter: blur(6px);
}

.spot-wizard-dialog {
    position: relative;
    width: min(620px, 100%);
    max-height: min(760px, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: var(--bg-card);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
    transform: translateY(18px) scale(0.98);
    transition: transform 0.22s ease;
}

.spot-wizard-modal.is-open .spot-wizard-dialog {
    transform: translateY(0) scale(1);
}

.spot-wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

.spot-wizard-count {
    display: inline-flex;
    margin-bottom: 0.3rem;
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 950;
}

.spot-wizard-header h2 {
    color: var(--text-primary);
    font-size: 1.18rem;
    line-height: 1.35;
}

.spot-wizard-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--bg-primary);
}

.spot-wizard-progress {
    height: 5px;
    background: var(--border-color);
}

.spot-wizard-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 0.25s ease;
}

.spot-wizard-step {
    display: none;
    flex: 1 1 auto;
    min-height: 420px;
    overflow-y: auto;
    padding: 1.35rem;
}

.spot-wizard-step.is-active {
    display: block;
}

.spot-wizard-step h3 {
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1.35;
    margin-bottom: 0.8rem;
}

.spot-wizard-step p {
    color: var(--text-muted);
    line-height: 1.75;
}

.spot-wizard-intro-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 22px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    box-shadow: 0 16px 30px var(--primary-glow);
    font-size: 1.45rem;
}

.spot-type-grid,
.spot-region-grid {
    display: grid;
    gap: 0.75rem;
}

.spot-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spot-type-card,
.spot-region-grid label {
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.spot-type-card input,
.spot-region-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.spot-type-card i {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    background: var(--primary-light);
}

.spot-type-card:has(input:checked),
.spot-region-grid label:has(input:checked) {
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: translateY(-1px);
}

.spot-region-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spot-region-grid label {
    min-height: 54px;
    justify-content: center;
    font-weight: 900;
}

.spot-wizard-field {
    display: grid;
    gap: 0.45rem;
    color: var(--text-primary);
    font-weight: 850;
}

.spot-wizard-field input,
.spot-wizard-field textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0.82rem 0.95rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
    outline: none;
}

.spot-wizard-field textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.65;
}

.spot-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}

.spot-field-wide {
    grid-column: 1 / -1;
}

.spot-conditional-help {
    display: none;
    padding: 0.85rem;
    border-radius: 16px;
    color: var(--text-primary);
    background: var(--primary-light);
    font-size: 0.92rem;
}

.spot-wizard-dialog.is-food-type .spot-conditional-help.is-food,
.spot-wizard-dialog.is-general-type .spot-conditional-help.is-general {
    display: block;
}

.spot-wizard-dialog.is-food-type .is-general-field,
.spot-wizard-dialog.is-general-type .is-food-field {
    display: none;
}

.spot-upload-box {
    margin-top: 1rem;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1.5px dashed var(--border-color);
    border-radius: 18px;
    color: var(--text-muted);
    background: var(--bg-primary);
    text-align: center;
    cursor: pointer;
}

.spot-upload-box input {
    display: none;
}

.spot-upload-box i {
    color: var(--primary-color);
    font-size: 1.45rem;
}

.spot-upload-box strong {
    color: var(--text-primary);
}

.spot-photo-preview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.spot-photo-thumb {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-primary);
}

.spot-photo-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.spot-photo-thumb span {
    display: block;
    padding: 0.35rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spot-summary-list {
    display: grid;
    gap: 0.65rem;
}

.spot-summary-list div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-primary);
}

.spot-summary-list dt {
    color: var(--text-muted);
    font-weight: 900;
}

.spot-summary-list dd {
    color: var(--text-primary);
    font-weight: 750;
    line-height: 1.6;
    word-break: break-word;
}

.spot-wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.95rem 1.25rem 1.15rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

.spot-wizard-btn {
    min-height: 46px;
    padding: 0 1rem;
    border-radius: 14px;
    font-weight: 950;
}

.spot-wizard-btn.is-ghost {
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.spot-wizard-btn.is-primary,
.spot-wizard-btn.is-submit {
    color: #ffffff;
    border: 0;
    background: var(--primary-color);
    box-shadow: 0 12px 24px var(--primary-glow);
}

.spot-wizard-btn.is-submit {
    display: none;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
}

.spot-title-link {
    color: inherit;
}

.spot-title-link:hover {
    color: var(--primary-color);
}

.spot-detail-link {
    width: 100%;
    min-height: 38px;
    margin-top: .15rem;
    padding: 0 .2rem 0 .72rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--primary-color);
    background: transparent;
    font-size: .84rem;
    font-weight: 900;
}

.spot-detail-link i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: var(--primary-color);
}

.admin-spot-card-controls {
    margin-top: 0 !important;
    padding-top: .45rem !important;
}

/* Regional events */
.event-page-shell{width:min(1240px,100%);margin:0 auto;padding:clamp(1rem,2.5vw,2rem);color:var(--text-primary)}
.event-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;padding-bottom:1.2rem;margin-bottom:1rem;border-bottom:2px solid var(--primary-color)}
.event-page-head>div:first-child>span,.event-form-head>span{color:var(--primary-color);font-size:.76rem;font-weight:950;letter-spacing:0}
.event-page-head h1,.event-form-head h1{margin:.28rem 0;color:var(--text-primary);font-size:clamp(1.65rem,3vw,2.3rem);line-height:1.2}
.event-page-head p,.event-form-head p{color:var(--text-muted);line-height:1.65}
.event-head-actions,.event-view-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem}
.event-primary-btn,.event-secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:42px;padding:0 .9rem;border:1px solid var(--border-color);border-radius:8px;font-size:.86rem;font-weight:900;text-decoration:none}
.event-primary-btn{border-color:var(--primary-color);color:#fff;background:var(--primary-color)}
.event-secondary-btn{color:var(--text-primary);background:var(--bg-card)}
.event-secondary-btn em{display:grid;min-width:20px;height:20px;place-items:center;border-radius:50%;color:#fff;background:#ef4444;font-size:.7rem;font-style:normal}
.event-filter-panel{display:grid;grid-template-columns:repeat(3,minmax(120px,.7fr)) minmax(220px,1.4fr) auto auto;gap:.65rem;align-items:end;margin-bottom:1rem;padding:1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card)}
.event-filter-panel label,.event-editor-form label{display:flex;min-width:0;flex-direction:column;gap:.38rem;color:var(--text-secondary);font-size:.78rem;font-weight:850}
.event-filter-panel select,.event-filter-panel input,.event-editor-form input,.event-editor-form select,.event-editor-form textarea{width:100%;min-height:42px;padding:.65rem .75rem;border:1px solid var(--border-color);border-radius:7px;color:var(--text-primary);background:var(--bg-primary);font:inherit}
.event-search-field>div{position:relative}.event-search-field i{position:absolute;left:.75rem;top:50%;color:var(--text-muted);transform:translateY(-50%)}.event-search-field input{padding-left:2.2rem}
.event-filter-panel>button,.event-reset-btn{display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:.35rem;padding:0 .85rem;border:0;border-radius:7px;color:#fff;background:#111827;font-weight:900;cursor:pointer}.event-reset-btn{border:1px solid var(--border-color);color:var(--text-muted);background:var(--bg-primary)}
.event-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.event-card{overflow:hidden;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}.event-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.event-card-poster{position:relative;display:block;height:190px;overflow:hidden;background:#e5f4f2}.event-card-poster img{width:100%;height:100%;object-fit:cover}.event-card-poster>span{display:grid;width:100%;height:100%;place-items:center;color:var(--primary-color);font-size:2.3rem}
.event-status{display:inline-flex;align-items:center;width:max-content;padding:.3rem .55rem;border-radius:999px;color:#475569;background:#e2e8f0;font-size:.73rem;font-style:normal;font-weight:900}.event-card-poster>.event-status{position:absolute;right:.7rem;bottom:.7rem;box-shadow:0 4px 12px rgba(15,23,42,.15)}
.event-status.is-scheduled{color:#92400e;background:#fef3c7}.event-status.is-ongoing{color:#fff;background:#dc2626}.event-status.is-ended{color:#475569;background:#e2e8f0}.event-status.is-cancelled{color:#991b1b;background:#fee2e2}.event-status.is-postponed{color:#5b21b6;background:#ede9fe}.event-status.is-unknown{color:#075985;background:#e0f2fe}
.event-card-body{display:flex;min-height:250px;flex-direction:column;gap:.65rem;padding:1rem}.event-card-tags{display:flex;flex-wrap:wrap;gap:.35rem}.event-card-tags span{padding:.25rem .48rem;border-radius:999px;color:#0f766e;background:#ccfbf1;font-size:.7rem;font-weight:900}.event-card h2{overflow:hidden;color:var(--text-primary);font-size:1.08rem;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}.event-card h2 a{color:inherit}.event-card-date,.event-card-location{display:flex;align-items:flex-start;gap:.4rem;color:var(--text-muted);font-size:.84rem;line-height:1.5}.event-card-location{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.event-stale{display:flex;align-items:flex-start;gap:.4rem;color:#b45309;font-size:.75rem;line-height:1.45}.event-card-actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:.45rem;margin-top:auto}.event-card-actions a{display:flex;min-height:38px;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:7px;color:var(--text-primary);background:var(--bg-primary);font-size:.78rem;font-weight:900}.event-card-actions a.is-primary{border-color:var(--primary-color);color:#fff;background:var(--primary-color)}
.event-empty{display:flex;min-height:260px;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:2rem;border:1px dashed var(--border-color);border-radius:8px;color:var(--text-muted);background:var(--bg-card);text-align:center}.event-empty>i{color:var(--primary-color);font-size:2rem}
.event-pagination{margin-top:1.25rem}.event-back-link{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1rem;color:var(--text-muted);font-size:.84rem;font-weight:900}
.event-view-hero{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);overflow:hidden;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card)}.event-view-poster{min-height:420px;background:#e5f4f2}.event-view-poster img{width:100%;height:100%;object-fit:cover}.event-view-poster>span{display:grid;width:100%;height:100%;place-items:center;color:var(--primary-color);font-size:4rem}.event-view-summary{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;padding:clamp(1.2rem,3vw,2rem)}.event-view-summary h1{font-size:clamp(1.55rem,3vw,2.2rem);line-height:1.3}.event-view-summary dl{display:grid;width:100%;gap:.1rem}.event-view-summary dl>div{display:grid;grid-template-columns:145px 1fr;gap:.75rem;padding:.72rem 0;border-bottom:1px solid var(--border-color)}.event-view-summary dt{color:var(--text-muted);font-size:.82rem;font-weight:850}.event-view-summary dt i{width:20px}.event-view-summary dd{color:var(--text-primary);font-weight:800}
.event-view-content{display:grid;grid-template-columns:1.4fr .6fr;gap:1rem;margin-top:1rem}.event-view-content section{padding:1.25rem;border-top:1px solid var(--border-color);background:transparent}.event-view-content h2{display:flex;align-items:center;gap:.45rem;margin-bottom:.8rem;font-size:1.05rem}.event-view-content section>div{color:var(--text-secondary);line-height:1.85}.event-correction-panel{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:1.1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card)}.event-correction-panel p{margin-top:.25rem;color:var(--text-muted);font-size:.83rem}.event-admin-inline{display:flex;justify-content:flex-end;margin-top:.75rem}.event-admin-inline a{color:#2563eb;font-weight:850}
.event-form-shell{width:min(1050px,100%)}.event-form-head{margin-bottom:1rem}.event-form-error{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.85rem;border:1px solid #fecaca;border-radius:7px;color:#b91c1c;background:#fef2f2;font-weight:800}.event-editor-form{padding:1.2rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card)}.event-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.event-form-grid .is-wide{grid-column:1/-1}.event-editor-form textarea{resize:vertical;line-height:1.6}.event-check-field{flex-direction:row!important;align-items:center!important;align-self:end;min-height:42px;padding:.6rem .75rem;border:1px solid var(--border-color);border-radius:7px}.event-check-field input{width:18px!important;min-height:18px!important}.event-file-field small{color:var(--text-muted)}.event-current-poster{width:180px;max-height:220px;object-fit:cover;border-radius:7px}.event-submit-btn{margin-top:1rem;border:0;cursor:pointer}.event-linked-create-banner{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;padding:1rem;border:1px solid #99f6e4;border-radius:8px;color:#115e59;background:#f0fdfa}.event-linked-create-banner>i{font-size:1.35rem}.event-linked-create-banner>div{display:flex;min-width:0;flex:1;flex-direction:column;gap:.2rem}.event-linked-create-banner span{font-size:.8rem}.event-linked-create-banner a{font-weight:900;color:#0f766e}
.event-admin-shell{width:min(1480px,100%)}.event-admin-filter{grid-template-columns:repeat(5,minmax(105px,.65fr)) minmax(180px,1.2fr) auto}.event-admin-table-wrap{overflow:auto;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card)}.event-admin-table{width:100%;min-width:1100px;border-collapse:collapse}.event-admin-table th,.event-admin-table td{padding:.8rem;border-bottom:1px solid var(--border-color);text-align:left;font-size:.78rem;vertical-align:middle}.event-admin-table th{position:sticky;top:0;color:var(--text-muted);background:var(--bg-secondary);font-weight:900}.event-admin-table td strong,.event-admin-table td small{display:block}.event-admin-table td small{margin-top:.2rem;color:var(--text-muted)}.event-table-actions{display:flex;align-items:center;gap:.35rem}.event-table-actions form{display:flex;gap:.3rem}.event-table-actions a,.event-table-actions button{padding:.35rem .5rem;border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);background:var(--bg-primary);font-size:.72rem;font-weight:850;white-space:nowrap;cursor:pointer}.event-table-empty{text-align:center!important;color:var(--text-muted)}
.event-status-tabs{display:flex;gap:.4rem;margin-bottom:1rem;overflow:auto}.event-status-tabs a{flex:0 0 auto;padding:.55rem .75rem;border:1px solid var(--border-color);border-radius:7px;color:var(--text-muted);background:var(--bg-card);font-size:.78rem;font-weight:900}.event-status-tabs a.active{border-color:#111827;color:#fff;background:#111827}.event-suggestion-list{display:grid;gap:.8rem}.event-suggestion-card{display:grid;grid-template-columns:180px 1fr;overflow:hidden;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card)}.event-suggestion-card>img{width:100%;height:100%;min-height:260px;object-fit:cover}.event-suggestion-content{padding:1rem}.event-suggestion-content h2{margin:.5rem 0;font-size:1.15rem}.event-suggestion-content dl{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.event-suggestion-content dt{color:var(--text-muted);font-size:.7rem}.event-suggestion-content dd{font-size:.82rem;font-weight:850}.event-suggestion-description{margin:.8rem 0;color:var(--text-secondary);line-height:1.65}.event-text-link{color:#0f766e;font-weight:850}.event-review-actions{display:grid;gap:.5rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--border-color)}.event-review-actions textarea{padding:.6rem;border:1px solid var(--border-color);border-radius:7px;color:var(--text-primary);background:var(--bg-primary)}.event-review-actions>div{display:flex;gap:.4rem}.event-review-actions button{padding:.5rem .7rem;border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);background:var(--bg-primary);font-weight:850;cursor:pointer}.event-review-actions .is-approve{border-color:#0f766e;color:#fff;background:#0f766e}.event-review-actions .is-reject{color:#b91c1c}.event-admin-memo{padding:.6rem;color:var(--text-muted);background:var(--bg-secondary)}.sidebar-nav-admin{margin-left:.65rem;width:calc(100% - .65rem);font-size:.82rem}

@media(max-width:1024px){.event-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.event-filter-panel,.event-admin-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.event-search-field{grid-column:1/-1}.event-view-content{grid-template-columns:1fr}.event-suggestion-content dl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.event-page-shell{padding:1rem}.event-page-head{align-items:stretch;flex-direction:column}.event-head-actions>*{flex:1}.event-filter-panel,.event-admin-filter,.event-card-grid,.event-form-grid{grid-template-columns:1fr}.event-filter-panel .event-search-field,.event-form-grid .is-wide{grid-column:auto}.event-view-hero{grid-template-columns:1fr}.event-view-poster{min-height:0;aspect-ratio:4/3}.event-view-summary dl>div{grid-template-columns:1fr;gap:.25rem}.event-view-actions{width:100%}.event-view-actions>*{width:100%}.event-correction-panel{align-items:stretch;flex-direction:column}.event-correction-panel a{width:100%}.event-suggestion-card{grid-template-columns:1fr}.event-suggestion-card>img{height:210px;min-height:0}.event-suggestion-content dl{grid-template-columns:1fr 1fr}.event-review-actions>div{display:grid;grid-template-columns:1fr 1fr}.event-linked-create-banner{align-items:flex-start;flex-wrap:wrap}.event-linked-create-banner a{width:100%;padding-left:2.15rem}}

@media(max-width:1366px), (hover:none) and (pointer:coarse){
  .meetup-spots-page .spot-card-grid,
  .event-page-shell .event-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .event-page-shell:not(.event-admin-shell) .event-page-head{align-items:stretch;flex-direction:column}
  .event-page-shell:not(.event-admin-shell) .event-head-actions{width:100%}
  .event-page-shell:not(.event-admin-shell) .event-head-actions>*{flex:1}
  .meetup-spots-page .meetup-region-filter,
  .meetup-spots-page .spot-category-filter{overflow:hidden}
  .meetup-spots-page #spot-region-scroll,
  .meetup-spots-page .spot-category-filter .spot-filter-row{flex-wrap:nowrap;padding:.15rem .1rem .5rem;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x;-webkit-overflow-scrolling:touch}
  .meetup-spots-page #spot-region-scroll::-webkit-scrollbar,
  .meetup-spots-page .spot-category-filter .spot-filter-row::-webkit-scrollbar{display:none}
  .meetup-spots-page #spot-region-scroll>a,
  .meetup-spots-page .spot-category-filter .spot-filter-row>a{flex:0 0 auto;min-height:42px;scroll-snap-align:start;white-space:nowrap}
  .meetup-spots-page .spot-search-form{grid-template-columns:minmax(0,1fr) 160px}
  .meetup-spots-page .spot-search-form button:last-child{grid-column:1/-1}
  .meetup-spots-page .spot-map-layout{grid-template-columns:1fr;min-height:0}
  .meetup-spots-page .spot-map-canvas{min-height:480px}
  .meetup-spots-page .spot-map-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:280px;border-top:1px solid var(--border-color);border-left:0}
  .event-page-shell:not(.event-admin-shell) .event-filter-panel{grid-template-columns:repeat(4,minmax(0,1fr))}
  .event-page-shell:not(.event-admin-shell) .event-search-field{grid-column:span 2}
  .event-page-shell:not(.event-admin-shell) .event-filter-panel>button{grid-column:span 2}
  .event-page-shell:not(.event-admin-shell) .event-filter-panel>button:last-child{grid-column:1/-1}
  .event-page-shell:not(.event-admin-shell) .event-reset-btn{grid-column:span 2}
  .spot-detail-page .spot-detail-grid{grid-template-columns:1fr}
  .spot-detail-page .spot-detail-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spot-detail-page .spot-review-form{grid-template-columns:1fr}
  .spot-detail-page .spot-review-header{align-items:flex-start;flex-direction:column}
  .spot-detail-page .spot-correction-panel{align-items:stretch;flex-direction:column}
  .spot-detail-page .spot-correction-button{width:100%}
  .event-view-shell .event-view-hero{grid-template-columns:1fr}
  .event-view-shell .event-view-poster{min-height:0;height:clamp(280px,38vw,420px)}
  .event-view-shell .event-view-content{grid-template-columns:1fr}
  .event-view-shell .event-view-summary dl>div{grid-template-columns:135px minmax(0,1fr)}
}

@media(max-width:1366px), (hover:none) and (pointer:coarse){
  .event-admin-shell .event-page-head{align-items:stretch;flex-direction:column}
  .event-admin-shell .event-head-actions{width:100%}
  .event-admin-shell .event-head-actions>*{flex:1}
  .event-admin-filter{grid-template-columns:repeat(3,minmax(0,1fr))}
  .event-admin-filter .event-search-field{grid-column:span 2}
  .event-admin-table-wrap{overflow:visible;border:0;background:transparent}
  .event-admin-table{display:block;width:100%;min-width:0}
  .event-admin-table thead{display:none}
  .event-admin-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .event-admin-table tr{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);box-shadow:var(--shadow-sm)}
  .event-admin-table tr:has(.event-table-empty){grid-column:1/-1}
  .event-admin-table td{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:.65rem;padding:.62rem .8rem;border-bottom:1px solid var(--border-color);font-size:.8rem;overflow-wrap:anywhere}
  .event-admin-table td:last-child{border-bottom:0}
  .event-admin-table td[data-label]::before{content:attr(data-label);color:var(--text-muted);font-size:.7rem;font-weight:900}
  .event-admin-table td[data-label="행사"]{padding-top:.85rem;padding-bottom:.85rem;background:var(--bg-secondary)}
  .event-admin-table td[data-label="행사"] strong{font-size:.95rem;line-height:1.35}
  .event-admin-table td[data-label="관리"]{display:block;padding:.75rem}
  .event-admin-table td[data-label="관리"]::before{display:block;margin-bottom:.55rem}
  .event-table-actions,.event-table-actions form{display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
  .event-table-actions form{display:contents}
  .event-table-actions a,.event-table-actions button{display:flex;min-height:38px;align-items:center;justify-content:center;gap:.3rem;padding:.4rem;font-size:.73rem}
  .event-table-empty{display:block!important;grid-column:1/-1!important;padding:2rem!important}
  .event-table-empty::before{display:none!important}
  .event-visibility{display:inline-flex;width:max-content;padding:.25rem .45rem;border-radius:999px;font-size:.72rem}
  .event-visibility.is-visible{color:#047857;background:#d1fae5}
  .event-visibility.is-hidden{color:#b91c1c;background:#fee2e2}
}

@media(max-width:700px){
  .event-admin-filter{grid-template-columns:repeat(2,minmax(0,1fr));padding:.8rem}
  .event-admin-filter .event-search-field{grid-column:1/-1}
  .event-admin-filter>button{grid-column:1/-1;width:100%}
  .event-admin-table tbody{grid-template-columns:1fr}
  .event-admin-table td{grid-template-columns:92px minmax(0,1fr)}
}

@media(max-width:420px){
  .event-admin-shell{padding:.75rem}
  .event-admin-filter{grid-template-columns:1fr}
  .event-admin-filter .event-search-field{grid-column:auto}
  .event-admin-table td{grid-template-columns:82px minmax(0,1fr);padding:.58rem .68rem}
  .event-table-actions{grid-template-columns:1fr}
}

@media(max-width:900px){
  .meetup-spots-page .spot-card-grid,
  .event-page-shell .event-card-grid{grid-template-columns:1fr}
}

@media(max-width:700px){
  .meetup-spots-page .spot-search-form{grid-template-columns:1fr}
  .meetup-spots-page .spot-search-form button,
  .meetup-spots-page .spot-reset-link{grid-column:auto;width:100%}
  .meetup-spots-page .spot-view-toolbar{align-items:stretch;flex-direction:column}
  .meetup-spots-page .spot-view-switch,
  .meetup-spots-page .spot-favorite-filter{width:100%}
  .meetup-spots-page .spot-view-switch>a{flex:1}
  .meetup-spots-page .spot-map-canvas{min-height:390px}
  .meetup-spots-page .spot-map-list{grid-template-columns:1fr;max-height:260px}
  .event-page-shell:not(.event-admin-shell) .event-filter-panel{grid-template-columns:1fr}
  .event-page-shell:not(.event-admin-shell) .event-search-field,
  .event-page-shell:not(.event-admin-shell) .event-filter-panel>button,
  .event-page-shell:not(.event-admin-shell) .event-reset-btn{grid-column:auto;width:100%}
  .event-view-shell .event-view-poster{height:auto;aspect-ratio:4/3}
  .event-view-shell .event-view-summary dl>div{grid-template-columns:1fr;gap:.25rem}
}

.spot-detail-page {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.spot-detail-back {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 850;
}

.spot-detail-hero,
.spot-detail-card,
.spot-correction-panel {
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.spot-detail-hero {
    padding: clamp(1.3rem, 4vw, 2.4rem);
    background:
        linear-gradient(135deg, rgba(13, 148, 136, 0.11), rgba(249, 115, 22, 0.06)),
        var(--bg-card);
}

.spot-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.spot-detail-hero h1 {
    color: var(--text-primary);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.spot-detail-hero > p {
    max-width: 760px;
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.8;
}

.spot-detail-gallery,
.spot-admin-images {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.spot-detail-gallery a,
.spot-admin-images a {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
}

.spot-detail-gallery a > span {
    position: absolute;
    left: 0.65rem;
    bottom: 0.65rem;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    color: #fff;
    background: rgba(15, 23, 42, 0.78);
    font-size: 0.75rem;
    font-weight: 900;
}

.spot-detail-gallery img,
.spot-admin-images img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.spot-detail-gallery a:hover img,
.spot-admin-images a:hover img {
    transform: scale(1.025);
}

.spot-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
    gap: 1rem;
}

.spot-detail-card {
    padding: 1.25rem;
}

.spot-detail-card h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.spot-detail-card h2 i {
    color: var(--primary-color);
}

.spot-detail-card dl {
    display: grid;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.spot-detail-card dl div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 0.7rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border-color);
}

.spot-detail-card dt {
    color: var(--text-muted);
    font-weight: 850;
}

.spot-detail-card dd {
    color: var(--text-primary);
    font-weight: 750;
    word-break: break-word;
}

.spot-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 0.7rem;
}

.spot-detail-stats h2 {
    grid-column: 1 / -1;
}

.spot-detail-stats > div {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 16px;
    background: var(--bg-primary);
}

.spot-detail-stats strong {
    color: var(--primary-color);
    font-size: 1.7rem;
}

.spot-detail-stats span {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.spot-correction-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.25rem;
}

.spot-correction-panel > div > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 900;
}

.spot-correction-panel h2 {
    margin: 0.3rem 0;
    color: var(--text-primary);
    font-size: 1.18rem;
}

.spot-correction-panel p {
    color: var(--text-muted);
    line-height: 1.65;
}

.spot-correction-button {
    flex: 0 0 auto;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 1rem;
    border: 1px solid #f59e0b;
    border-radius: 14px;
    color: #b45309;
    background: #fffbeb;
    font-weight: 950;
}

body.dark-mode .spot-correction-button {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.12);
}

.spot-correction-modal {
    position: fixed;
    inset: 0;
    z-index: 2550;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.spot-correction-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.spot-correction-dialog {
    position: relative;
    width: min(650px, 100%);
    max-height: min(800px, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: var(--bg-card);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.3);
}

.spot-correction-dialog > header,
.spot-correction-dialog > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border-color);
}

.spot-correction-dialog > header span {
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 900;
}

.spot-correction-dialog > header h2 {
    color: var(--text-primary);
    font-size: 1.2rem;
}

.spot-correction-dialog > header > button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text-muted);
    background: var(--bg-primary);
}

.spot-correction-body {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
    overflow-y: auto;
}

.spot-correction-error {
    display: flex;
    gap: 0.5rem;
    padding: 0.8rem;
    border-radius: 14px;
    color: #b91c1c;
    background: #fef2f2;
    font-weight: 800;
}

.spot-correction-dialog fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.spot-correction-dialog legend {
    margin-bottom: 0.65rem;
    color: var(--text-primary);
    font-weight: 900;
}

.spot-correction-dialog b {
    color: #ef4444;
}

.spot-correction-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.spot-correction-types label {
    position: relative;
    cursor: pointer;
}

.spot-correction-types input {
    position: absolute;
    opacity: 0;
}

.spot-correction-types span {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font-size: 0.86rem;
    font-weight: 800;
}

.spot-correction-types input:checked + span {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.spot-correction-dialog > footer {
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
    border-bottom: 0;
}

.spot-correction-submit {
    display: inline-flex !important;
}

body:not(.dark-mode) .spot-detail-hero,
body:not(.dark-mode) .spot-detail-card,
body:not(.dark-mode) .spot-correction-panel,
body:not(.dark-mode) .spot-correction-dialog {
    background-color: #ffffff;
    color: #111827;
}

.spot-header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.spot-admin-review-link {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-primary);
    background: var(--bg-card);
    font-weight: 900;
}

.spot-admin-review-link em {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: #ef4444;
    font-size: 0.72rem;
    font-style: normal;
}

.spot-admin-page {
    width: min(1480px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.spot-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--border-color);
}

.spot-admin-header p {
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 950;
}

.spot-admin-header h1 {
    color: var(--text-primary);
    font-size: clamp(1.65rem, 4vw, 2.2rem);
}

.spot-admin-header span {
    color: var(--text-muted);
}

.spot-admin-header > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    background: var(--bg-card);
    font-weight: 850;
}

.spot-admin-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
}

.spot-admin-tabs a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 12px;
    color: var(--text-muted);
    font-weight: 900;
}

.spot-admin-tabs a.is-active {
    color: #ffffff;
    background: var(--deep-sea-medium);
}

.spot-admin-tabs em {
    min-width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    font-size: 0.72rem;
    font-style: normal;
}

.spot-admin-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    align-items: start;
    gap: 1rem;
}

.spot-admin-report {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.spot-admin-report[open] {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.09);
}

.spot-admin-report > summary {
    list-style: none;
    cursor: pointer;
}

.spot-admin-report > summary::-webkit-details-marker { display: none; }

.spot-admin-report-body {
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid var(--border-color);
}

.spot-admin-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    transition: background-color 0.2s ease;
}

.spot-admin-report-head:hover { background: var(--bg-primary); }

.spot-admin-report-head > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.spot-admin-report-head h2 {
    flex-basis: 100%;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.spot-admin-report-head > div:first-child > p {
    flex-basis: 100%;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spot-admin-report-head > div:last-child {
    display: grid;
    justify-items: end;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.spot-admin-report-head > div:last-child > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.spot-admin-toggle-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin-top: 0.25rem;
    padding: 0 0.65rem;
    border-radius: 9px;
    color: var(--primary-color);
    background: var(--primary-light);
    font-size: 0.75rem;
    font-weight: 900;
}

.spot-admin-toolbar {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.spot-admin-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(170px, 230px) auto auto;
    gap: 0.6rem;
}

.spot-admin-search {
    position: relative;
}

.spot-admin-search i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    z-index: 1;
    color: var(--text-muted);
    transform: translateY(-50%);
}

.spot-admin-filter-form input,
.spot-admin-filter-form select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
}

.spot-admin-filter-form input { padding-left: 2.65rem; }

.spot-admin-filter-form button,
.spot-admin-filter-reset,
.spot-admin-list-tools button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.9rem;
    border-radius: 11px;
    font-weight: 900;
}

.spot-admin-filter-form button {
    color: #fff;
    background: var(--deep-sea-medium);
}

.spot-admin-filter-reset {
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-primary);
}

.spot-admin-list-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-color);
}

.spot-admin-list-tools p { color: var(--text-muted); font-size: 0.86rem; }
.spot-admin-list-tools p strong { margin-right: 0.2rem; color: var(--text-primary); font-size: 1rem; }
.spot-admin-list-tools > div { display: flex; gap: 0.4rem; }
.spot-admin-list-tools button { border: 1px solid var(--border-color); color: var(--text-muted); background: var(--bg-primary); font-size: 0.78rem; }

.spot-admin-origin {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem 0;
}

.spot-admin-origin > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 0.75rem;
}

.spot-admin-origin span {
    color: var(--text-muted);
    font-weight: 850;
}

.spot-admin-origin strong,
.spot-admin-origin p {
    color: var(--text-primary);
}

.spot-admin-origin > a {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--primary-color);
    font-weight: 850;
}

.spot-admin-images {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.spot-admin-approval-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 18px;
    background: var(--bg-primary);
}

.spot-admin-form-section.is-wide { grid-column: 1 / -1; }

.spot-admin-approval-form label {
    display: grid;
    gap: 0.35rem;
}

.spot-admin-approval-form label.is-wide,
.spot-admin-actions {
    grid-column: 1 / -1;
}

.spot-admin-approval-form label > span {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 900;
}

.spot-admin-form-section {
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
}

.spot-admin-form-section h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
    color: var(--text-primary);
    font-size: 0.98rem;
}

.spot-admin-form-section h3 i {
    color: var(--primary-color);
}

.spot-admin-section-help {
    margin: -0.35rem 0 0.75rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.spot-admin-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.spot-admin-form-grid > *,
.spot-admin-amenity-grid > *,
.spot-admin-image-types > * {
    min-width: 0;
}

.spot-admin-form-grid .is-wide {
    grid-column: 1 / -1;
}

.spot-admin-amenity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.spot-admin-amenity-grid label {
    padding: 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-primary);
}

.spot-admin-amenity-grid label > span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.spot-admin-amenity-grid label > span i {
    color: var(--primary-color);
}

.spot-admin-full-field {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.spot-admin-approval-form.is-food-category .spot-admin-general-fields,
.spot-admin-approval-form.is-general-category .spot-admin-food-fields {
    display: none;
}

.spot-admin-approval-form input,
.spot-admin-approval-form select,
.spot-admin-approval-form textarea,
.spot-admin-reject-form input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    background: var(--bg-card);
    font: inherit;
}

.spot-admin-approval-form textarea {
    resize: vertical;
    line-height: 1.65;
}

.spot-admin-actions {
    display: flex;
    justify-content: flex-end;
}

.spot-admin-actions button,
.spot-admin-reject-form button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1rem;
    border-radius: 12px;
    font-weight: 900;
}

.spot-admin-actions .is-approve {
    color: #ffffff;
    background: var(--primary-color);
}

.spot-admin-reject-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.spot-admin-reject-form button {
    color: #ffffff;
    background: #ef4444;
}

.spot-admin-reviewed {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.8rem;
    padding: 0.85rem;
    border-radius: 14px;
    color: var(--text-muted);
    background: var(--bg-primary);
}

.spot-admin-reviewed p {
    flex-basis: 100%;
    color: var(--text-primary);
}

.spot-admin-reviewed a {
    color: var(--primary-color);
    font-weight: 900;
}

.spot-detail-secondary-link {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font-weight: 900;
}

.spot-detail-wide {
    width: 100%;
}

.spot-amenity-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.spot-amenity-list > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.1rem 0.55rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-primary);
}

.spot-amenity-list i {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--text-muted);
    background: var(--bg-card);
}

.spot-amenity-list span {
    color: var(--text-primary);
    font-weight: 850;
}

.spot-amenity-list strong {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.spot-amenity-list .is-available {
    border-color: rgba(13, 148, 136, 0.35);
    background: var(--primary-light);
}

.spot-amenity-list .is-available i,
.spot-amenity-list .is-available strong {
    color: var(--primary-color);
}

.spot-amenity-list .is-unavailable {
    opacity: 0.72;
}

.spot-facility-notes {
    margin-top: 0.8rem;
    padding: 0.8rem;
    border-radius: 13px;
    color: var(--text-muted);
    background: var(--bg-primary);
    line-height: 1.65;
}

.spot-detail-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem !important;
    margin: 0 !important;
}

.spot-detail-info-grid > div {
    grid-template-columns: 110px minmax(0, 1fr) !important;
    padding: 0.75rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 13px;
    background: var(--bg-primary);
}

.spot-business-status {
    display: inline-flex;
    width: fit-content;
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    color: var(--text-muted);
    background: var(--bg-primary);
    font-size: 0.78rem;
    font-weight: 900;
}

.spot-business-status.is-open {
    color: #087f5b;
    background: #dff7ed;
}

.spot-business-status.is-temporarily_closed,
.spot-business-status.is-closed {
    color: #b42318;
    background: #fee4e2;
}

.spot-external-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.spot-external-links a {
    min-height: 48px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font-weight: 850;
}

.spot-external-links a > i:first-child { color: var(--primary-color); }
.spot-external-links a > i:last-child { color: var(--text-muted); font-size: 0.72rem; }

.spot-admin-image-types {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
}

.spot-admin-image-types label {
    overflow: hidden;
    padding: 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-primary);
}

.spot-admin-image-types img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 9px;
    object-fit: cover;
}

@media (min-width: 761px) and (max-width: 1180px) {
    .spot-admin-form-grid,
    .spot-admin-amenity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spot-admin-image-types {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .spot-admin-filter-form {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 0.45fr) auto;
    }

    .spot-admin-filter-reset { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .spot-header-actions,
    .spot-admin-header,
    .spot-admin-report-head {
        align-items: stretch;
        flex-direction: column;
    }

    .spot-header-actions > *,
    .spot-admin-header > a {
        width: 100%;
    }

    .spot-admin-report-head > div:last-child {
        justify-items: start;
    }

    .spot-admin-origin > div,
    .spot-admin-approval-form,
    .spot-admin-reject-form,
    .spot-admin-form-grid,
    .spot-admin-amenity-grid,
    .spot-admin-image-types,
    .spot-amenity-list,
    .spot-detail-info-grid,
    .spot-external-links {
        grid-template-columns: 1fr;
    }

    .spot-admin-images,
    .spot-detail-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spot-admin-actions button,
    .spot-admin-reject-form button {
        width: 100%;
    }

    .spot-admin-filter-form {
        grid-template-columns: 1fr;
    }

    .spot-admin-list-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .spot-admin-list-tools > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .spot-admin-report-head > div:first-child > p {
        white-space: normal;
    }
}

@media (max-width: 720px) {
    .spot-detail-page {
        padding: 0.25rem;
    }

    .spot-detail-grid {
        grid-template-columns: 1fr;
    }

    .spot-correction-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .spot-correction-button {
        width: 100%;
    }

    .spot-correction-modal {
        align-items: flex-end;
        padding: 0;
    }

    .spot-correction-dialog {
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
    }

    .spot-correction-types {
        grid-template-columns: 1fr;
    }

    .spot-correction-dialog > footer .spot-wizard-btn {
        flex: 1 1 0;
    }
}

@media (max-width: 640px) {
    .spot-wizard-modal {
        padding: 0;
        align-items: flex-end;
    }

    .spot-wizard-dialog {
        width: 100%;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
    }

    .spot-wizard-header {
        padding: 1rem;
    }

    .spot-wizard-step {
        min-height: 430px;
        padding: 1rem;
    }

    .spot-type-grid,
    .spot-region-grid,
    .spot-extra-grid,
    .spot-photo-preview {
        grid-template-columns: 1fr;
    }

    .spot-type-card {
        min-height: 82px;
    }

    .spot-summary-list div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .spot-wizard-actions {
        padding: 0.8rem 1rem 1rem;
    }

    .spot-wizard-btn {
        flex: 1 1 0;
    }
}

/* Meetup progress timeline */
.meetup-flow-card {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(255, 255, 255, 0.02));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.meetup-flow-summary {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.meetup-flow-kicker {
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0;
}

.meetup-flow-summary h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 950;
}

.meetup-flow-summary p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
    font-weight: 750;
}

.meetup-flow-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
}

.meetup-flow-step {
    position: relative;
    min-width: 0;
    padding: 0.75rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    color: var(--text-muted);
}

.meetup-flow-dot {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.55rem;
    border-radius: 11px;
    background: var(--bg-soft);
    color: var(--text-muted);
}

.meetup-flow-step strong {
    display: block;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 950;
    line-height: 1.35;
}

.meetup-flow-step small {
    display: block;
    margin-top: 0.18rem;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 850;
}

.meetup-flow-step.is-active {
    border-color: rgba(20, 184, 166, 0.42);
    background: rgba(20, 184, 166, 0.1);
    box-shadow: 0 12px 26px rgba(20, 184, 166, 0.14);
}

.meetup-flow-step.is-active .meetup-flow-dot {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
}

.meetup-flow-step.is-active strong {
    color: #0f766e;
}

.meetup-flow-step.is-done .meetup-flow-dot {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.meetup-flow-step.is-done strong {
    color: var(--text-primary);
}

.meetup-flow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
}

.meetup-flow-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 0.9rem;
    border-radius: 13px;
    background: #111827;
    color: #fff !important;
    font-size: 0.78rem;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}

body:not(.dark-mode) .meetup-flow-card,
body:not(.dark-mode) .meetup-flow-step {
    background-color: #ffffff;
    color: #111827;
}

@media (max-width: 640px) {
    .meetup-flow-card {
        padding: 0.95rem;
        border-radius: 18px;
    }

    .meetup-flow-steps {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .meetup-flow-step {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.7rem;
    }

    .meetup-flow-dot {
        flex: 0 0 30px;
        margin-bottom: 0;
    }

    .meetup-flow-action {
        width: 100%;
    }
}

/* Settlement wizard */
.settlement-wizard-card {
    overflow: hidden;
}

.settlement-wizard-intro {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

.settlement-wizard-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    box-shadow: 0 10px 22px rgba(99, 102, 241, 0.22);
}

.settlement-wizard-copy h3 {
    margin: 0 0 0.25rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 950;
}

.settlement-wizard-copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.settlement-wizard-open,
.settlement-submit-btn,
.settlement-next-btn,
.settlement-back-btn {
    min-height: 42px;
    border: 0;
    border-radius: 13px;
    font-size: 0.78rem;
    font-weight: 950;
    cursor: pointer;
}

.settlement-wizard-open,
.settlement-submit-btn,
.settlement-next-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    box-shadow: 0 12px 24px rgba(99, 102, 241, 0.22);
}

.settlement-back-btn {
    background: var(--bg-sidebar);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.settlement-wizard-form {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.settlement-wizard-form.hidden,
.settlement-wizard-step {
    display: none;
}

.settlement-wizard-step.is-active {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.settlement-wizard-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.settlement-wizard-steps span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg-sidebar);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 950;
    border: 1px solid var(--border-color);
}

.settlement-wizard-steps span.is-active {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.35);
}

.settlement-step-title,
.settlement-field-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 950;
}

.settlement-field-label {
    display: block;
    margin-bottom: 0.35rem;
}

.settlement-field {
    width: 100%;
    min-height: 42px;
    padding: 0 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 800;
    outline: none;
}

.settlement-field:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.settlement-round-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.settlement-round-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 0.65rem;
    align-items: center;
    padding: 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-sidebar);
}

.settlement-round-title {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settlement-amount-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.settlement-amount-input {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 1.9rem;
    text-align: right;
}

.settlement-amount-wrap span {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.settlement-confirm-box {
    padding: 0.9rem;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.08);
}

.settlement-confirm-box strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 950;
}

.settlement-confirm-box p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.6;
}

.settlement-wizard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.settlement-wizard-actions .settlement-next-btn:only-child {
    grid-column: 1 / -1;
}

body:not(.dark-mode) .settlement-wizard-card,
body:not(.dark-mode) .settlement-field,
body:not(.dark-mode) .settlement-round-row {
    background: #ffffff !important;
    color: #111827 !important;
}

body:not(.dark-mode) .settlement-back-btn,
body:not(.dark-mode) .settlement-wizard-steps span {
    background: #f8fafc;
}

.meetup-detail-card .meetup-author-profile {
    min-width: 0;
}

.meetup-detail-card .meetup-content-body {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.meetup-detail-card .meetup-round-item {
    gap: 0.75rem;
}

.meetup-detail-card .meetup-round-item > span:first-child {
    min-width: 0;
    word-break: keep-all;
}

@media (max-width: 640px) {
    .meetup-detail-card {
        padding: 1.1rem !important;
    }

    .meetup-detail-card .meetup-author-strip {
        align-items: flex-start !important;
        gap: 0.85rem !important;
        padding-bottom: 1rem !important;
    }

    .meetup-detail-card .meetup-author-profile {
        width: 100%;
    }

    .meetup-detail-card .meetup-content-body {
        min-height: 0 !important;
        padding: 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.75 !important;
    }

    .meetup-detail-card .meetup-round-item {
        align-items: flex-start !important;
        flex-direction: column;
        padding: 0.95rem !important;
    }

    .meetup-detail-card .meetup-round-item > span:last-child {
        align-self: flex-start;
    }

    .settlement-wizard-intro {
        align-items: center;
    }

    .settlement-wizard-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .settlement-wizard-steps {
        gap: 0.3rem;
    }

    .settlement-wizard-steps span {
        min-height: 32px;
        font-size: 0.66rem;
    }

    .settlement-round-row {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        padding: 0.85rem;
    }

    .settlement-round-title {
        white-space: normal;
        line-height: 1.45;
    }

    .settlement-amount-wrap {
        width: 100%;
    }

    .settlement-wizard-actions {
        grid-template-columns: 1fr;
    }
}

/* Desktop spacious meetup forms and detail readability */
@media (min-width: 1025px) {
    .notice-write.meetup-create-page {
        width: min(1360px, 100%) !important;
    }

    .meetup-create-page .notice-write-header {
        align-items: flex-start;
        gap: 2rem;
        padding-bottom: 1.75rem;
        margin-bottom: 1.75rem;
    }

    .meetup-create-page .notice-write-header h1 {
        font-size: 2.25rem;
        line-height: 1.2;
        font-weight: 950;
    }

    .meetup-create-page .notice-write-header p {
        max-width: 680px;
        font-size: 1rem;
        line-height: 1.75;
    }

    .meetup-create-page .notice-write-form {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 1.35rem;
        padding: 2rem;
        border-radius: 26px;
    }

    .meetup-create-page .notice-write-form > .notice-form-field:nth-of-type(1) {
        grid-column: span 4;
    }

    .meetup-create-page .notice-write-form > .notice-form-field:nth-of-type(2) {
        grid-column: span 8;
    }

    .meetup-create-page .notice-write-form > .notice-form-field:nth-of-type(3),
    .meetup-create-page .notice-write-form > .notice-form-field:nth-of-type(4),
    .meetup-create-page .notice-write-form > div.grid,
    .meetup-create-page .notice-write-form > .border-t,
    .meetup-create-page .notice-write-actions {
        grid-column: 1 / -1;
    }

    .meetup-create-page .notice-form-field > span {
        font-size: 0.98rem;
        font-weight: 900;
    }

    .meetup-create-page .notice-form-field input,
    .meetup-create-page .notice-form-field select,
    .meetup-create-page .notice-form-field textarea {
        min-height: 54px;
        padding: 0.9rem 1rem;
        font-size: 1rem !important;
    }

    .meetup-create-page .notice-form-field textarea {
        min-height: 240px;
        line-height: 1.75;
        width: 100%;
        resize: vertical;
    }

    .meetup-create-page .notice-write-form > .border-t {
        padding: 1.35rem;
    }

    .meetup-create-page .notice-write-form > .border-t h3 {
        font-size: 1.02rem !important;
    }

    .meetup-view-page {
        font-size: 1rem;
    }

    .meetup-view-page > .flex:first-child {
        align-items: flex-start !important;
    }

    .meetup-view-page .meetup-card {
        padding: 2rem !important;
        border-radius: 24px;
    }

    .meetup-view-page .meetup-card h3 {
        font-size: 1.08rem !important;
        line-height: 1.45 !important;
    }

    .meetup-view-page .meetup-card h4 {
        font-size: 0.98rem !important;
        line-height: 1.45 !important;
    }

    .meetup-detail-card .meetup-content-body {
        min-height: 190px;
        font-size: 1.05rem !important;
        line-height: 1.85 !important;
        padding: 0.3rem 0.2rem !important;
    }

    .meetup-detail-card .meetup-author-profile p:first-child {
        font-size: 0.95rem !important;
    }

    .meetup-detail-card .meetup-author-profile p:last-child {
        font-size: 0.82rem !important;
    }

    .meetup-detail-card .meetup-round-item {
        padding: 1rem 1.15rem !important;
        font-size: 0.95rem !important;
    }

    .meetup-view-page .meetup-card .text-\[13px\],
    .meetup-view-page .meetup-card .text-\[12px\],
    .meetup-view-page .meetup-card .text-\[11px\],
    .meetup-view-page .meetup-card .text-\[10\.5px\],
    .meetup-view-page .meetup-card .text-\[10px\],
    .meetup-view-page .meetup-card .text-\[9\.5px\],
    .meetup-view-page .meetup-card .text-\[9px\],
    .meetup-view-page .meetup-review-section .text-\[11px\],
    .meetup-view-page .meetup-review-section .text-\[10px\] {
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
    }

    .meetup-view-page .meetup-card button,
    .meetup-view-page .meetup-card a,
    .meetup-view-page .meetup-card select,
    .meetup-view-page .meetup-card input {
        font-size: 0.92rem !important;
    }
}

/* Spot list: respond to the actual content width, including tablet desktop mode. */
.meetup-spots-main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.meetup-spots-main .meetup-spots-page {
    width: 100%;
    min-width: 0;
    max-width: 1180px;
    box-sizing: border-box;
}

.meetup-spots-main .meetup-spots-page > *,
.meetup-spots-main .meetup-spots-page .meetup-overview-stats,
.meetup-spots-main .meetup-spots-page .spot-card-grid,
.meetup-spots-main .meetup-spots-page .spot-search-form,
.meetup-spots-main .meetup-spots-page .spot-map-layout {
    min-width: 0;
    max-width: 100%;
}

.meetup-spots-page.spot-layout-tablet .meetup-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meetup-spots-page.spot-layout-tablet .spot-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meetup-spots-page.spot-layout-tablet .notice-board-header {
    align-items: flex-start;
    flex-direction: column;
}

.meetup-spots-page.spot-layout-tablet .spot-header-actions {
    width: 100%;
    flex-wrap: wrap;
}

.meetup-spots-page.spot-layout-tablet .spot-header-actions > * {
    flex: 1 1 180px;
}

.meetup-spots-page.spot-layout-tablet .meetup-region-filter,
.meetup-spots-page.spot-layout-tablet .spot-category-filter {
    overflow: hidden;
}

.meetup-spots-page.spot-layout-tablet #spot-region-scroll,
.meetup-spots-page.spot-layout-tablet .spot-category-filter .spot-filter-row {
    flex-wrap: nowrap;
    padding: 0.15rem 0.1rem 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.meetup-spots-page.spot-layout-tablet #spot-region-scroll::-webkit-scrollbar,
.meetup-spots-page.spot-layout-tablet .spot-category-filter .spot-filter-row::-webkit-scrollbar {
    display: none;
}

.meetup-spots-page.spot-layout-tablet #spot-region-scroll > a,
.meetup-spots-page.spot-layout-tablet .spot-category-filter .spot-filter-row > a {
    flex: 0 0 auto;
    min-height: 42px;
    scroll-snap-align: start;
    white-space: nowrap;
}

.meetup-spots-page.spot-layout-tablet .spot-search-form {
    grid-template-columns: minmax(0, 1fr) 160px;
}

.meetup-spots-page.spot-layout-tablet .spot-search-form button:last-child {
    grid-column: 1 / -1;
}

.meetup-spots-page.spot-layout-tablet .spot-map-layout {
    grid-template-columns: 1fr;
    min-height: 0;
}

.meetup-spots-page.spot-layout-tablet .spot-map-canvas {
    min-height: 480px;
}

.meetup-spots-page.spot-layout-tablet .spot-map-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 280px;
    border-top: 1px solid var(--border-color);
    border-left: 0;
}

.meetup-spots-page.spot-layout-compact .meetup-overview-stats,
.meetup-spots-page.spot-layout-compact .spot-card-grid,
.meetup-spots-page.spot-layout-compact .spot-search-form,
.meetup-spots-page.spot-layout-compact .spot-map-list {
    grid-template-columns: 1fr;
}

.meetup-spots-page.spot-layout-compact .spot-search-form button,
.meetup-spots-page.spot-layout-compact .spot-reset-link {
    grid-column: auto;
    width: 100%;
}

.meetup-spots-page.spot-layout-compact .spot-view-toolbar {
    align-items: stretch;
    flex-direction: column;
}

.meetup-spots-page.spot-layout-compact .spot-view-switch,
.meetup-spots-page.spot-layout-compact .spot-favorite-filter {
    width: 100%;
}

.meetup-spots-page.spot-layout-compact .spot-view-switch > a {
    flex: 1;
}

/* Kakao open-chat analytics */
.header-admin-tools{display:inline-flex;align-items:center;gap:7px}.header-admin-tool-link{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--primary-color,#169c91) 35%,var(--border-color));border-radius:7px;background:color-mix(in srgb,var(--primary-color,#169c91) 9%,var(--card-bg));color:var(--primary-color,#169c91);font-size:.82rem;font-weight:800;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}.header-admin-tool-link:hover{background:var(--primary-color,#169c91);border-color:var(--primary-color,#169c91);color:#fff}.user-member-area{display:flex;align-items:center;gap:10px}@media(max-width:768px){.header-admin-tools{gap:5px}.header-admin-tool-link{width:36px;height:36px;padding:0;justify-content:center}.header-admin-tool-link span{display:none}}
.chat-page-shell{width:min(1480px,calc(100% - 48px));margin:0 auto;padding:40px 0 72px;color:var(--text-primary);min-width:0}.chat-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:22px;border-bottom:2px solid var(--primary-color,#169c91)}.chat-page-head span{font-size:.76rem;font-weight:800;letter-spacing:.12em;color:var(--primary-color,#169c91)}.chat-page-head h1{margin:6px 0;font-size:clamp(1.65rem,3vw,2.35rem);letter-spacing:0}.chat-page-head p{margin:0;color:var(--text-secondary)}.chat-privacy-chip,.chat-export-actions a{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--border-color);background:var(--card-bg);border-radius:7px;font-weight:700;color:var(--text-secondary)}.chat-error{margin-top:18px;padding:14px;border:1px solid #fecaca;background:#fff1f2;color:#be123c;border-radius:7px}.chat-upload-panel{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);gap:32px;margin-top:24px;padding:26px;border:1px solid var(--border-color);background:var(--card-bg);border-radius:8px}.chat-upload-copy{display:flex;gap:15px}.chat-upload-copy>i{font-size:1.6rem;color:var(--primary-color,#169c91)}.chat-upload-copy h2,.chat-history-section h2,.chat-table-panel h2{margin:0 0 5px;font-size:1.15rem}.chat-upload-copy p,.chat-history-section p,.chat-table-panel p{margin:0;color:var(--text-secondary);line-height:1.6}.chat-upload-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.chat-upload-form label{display:flex;flex-direction:column;gap:7px;font-weight:700}.chat-upload-form input,.chat-upload-form textarea,.chat-history-section input,.chat-period-filter input,.chat-table-panel input{width:100%;padding:12px 13px;border:1px solid var(--border-color);background:var(--input-bg,var(--card-bg));color:var(--text-primary);border-radius:6px;font:inherit}.chat-file-drop{grid-row:span 2;align-items:center!important;justify-content:center;border:1px dashed var(--primary-color,#169c91);background:color-mix(in srgb,var(--primary-color,#169c91) 7%,var(--card-bg));border-radius:7px;cursor:pointer}.chat-file-drop input{position:absolute;width:1px;height:1px;opacity:0}.chat-file-drop i{font-size:2rem;color:var(--primary-color,#169c91)}.chat-file-drop small{color:var(--text-secondary)}.chat-upload-form button,.chat-period-filter button{border:0;border-radius:6px;background:var(--primary-color,#169c91);color:#fff;font-weight:800;padding:13px;cursor:pointer}.chat-history-section{margin-top:36px}.chat-history-section>header,.chat-table-panel>header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.chat-history-section>header form,.chat-table-panel>header form{position:relative;display:flex;align-items:center}.chat-history-section>header form i{position:absolute;left:12px;color:var(--text-secondary)}.chat-history-section>header input{padding-left:36px}.chat-history-list{display:grid;gap:10px}.chat-history-list article{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:24px;padding:18px 20px;border:1px solid var(--border-color);background:var(--card-bg);border-radius:7px}.chat-history-main>span{font-size:.75rem;color:var(--text-secondary)}.chat-history-main h3{margin:4px 0}.chat-history-main h3 a{color:var(--text-primary)}.chat-history-main p{font-size:.85rem}.chat-history-stats{display:flex;gap:20px}.chat-history-stats span{text-align:center;color:var(--text-secondary);font-size:.75rem}.chat-history-stats strong{display:block;color:var(--text-primary);font-size:1.12rem}.chat-history-stats .is-ghost strong{color:#e11d48}.chat-history-actions{display:flex;align-items:center;gap:8px}.chat-history-actions>a,.chat-history-actions button{padding:9px 12px;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-primary);border-radius:6px;font-weight:700}.chat-history-actions button{color:#e11d48}.chat-empty{padding:40px;text-align:center;color:var(--text-secondary)}.chat-empty i{display:block;font-size:2rem;margin-bottom:10px}.chat-back{display:inline-flex;gap:7px;align-items:center;color:var(--text-secondary);font-weight:700}.chat-export-actions{display:flex;gap:8px}.chat-period-filter{display:flex;align-items:end;gap:12px;margin:20px 0;padding:16px;border:1px solid var(--border-color);background:var(--card-bg);border-radius:7px}.chat-period-filter label{display:grid;gap:5px;font-size:.8rem;font-weight:700}.chat-period-filter a{padding:12px;color:var(--text-secondary);font-weight:700}.chat-stat-grid,.chat-highlight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}.chat-stat-grid article,.chat-highlight-grid article{padding:18px;border:1px solid var(--border-color);background:var(--card-bg);border-radius:7px}.chat-stat-grid i{color:var(--primary-color,#169c91);margin-right:6px}.chat-stat-grid span,.chat-highlight-grid span{color:var(--text-secondary);font-size:.82rem}.chat-stat-grid strong,.chat-highlight-grid strong{display:block;margin-top:8px;font-size:1.35rem;overflow-wrap:anywhere}.chat-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.chat-chart-grid article,.chat-table-panel,.chat-participant-detail{padding:18px;border:1px solid var(--border-color);background:var(--card-bg);border-radius:7px;min-width:0}.chat-chart-grid h2{margin:0;font-size:1rem}.chat-chart-box{height:280px;margin-top:14px;position:relative}.chat-insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0}.chat-insight-grid article{padding:20px;border-left:3px solid var(--primary-color,#169c91);background:var(--card-bg);box-shadow:0 4px 18px rgba(15,23,42,.06)}.chat-insight-grid h2{font-size:1rem;margin:0 0 10px}.chat-insight-grid p{margin:0;line-height:1.7;color:var(--text-secondary)}.chat-topic-list{display:flex;gap:8px;flex-wrap:wrap}.chat-topic-list span,.chat-side-data span{padding:8px 10px;background:var(--soft-bg,#f1f5f9);border-radius:6px}.chat-data-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px}.chat-table-scroll{overflow:auto}.chat-table-panel table{width:100%;border-collapse:collapse}.chat-table-panel th,.chat-table-panel td{padding:12px 10px;border-bottom:1px solid var(--border-color);text-align:left;white-space:nowrap}.chat-table-panel th{font-size:.76rem;color:var(--text-secondary)}.chat-table-panel td a{color:var(--primary-color,#169c91);font-weight:700}.chat-ghost-badge{padding:4px 7px;border-radius:5px;background:#fff1f2;color:#e11d48;font-size:.75rem;font-weight:800}.chat-side-data{padding:18px;border:1px solid var(--border-color);background:var(--card-bg);border-radius:7px}.chat-side-data h2{font-size:1rem;margin:0 0 10px}.chat-side-data h2:not(:first-child){margin-top:24px}.chat-side-data>div{display:flex;flex-direction:column;gap:7px}.chat-side-data span{display:flex;justify-content:space-between;font-size:.82rem}.chat-participant-detail{margin:14px 0}.chat-participant-detail>header{display:flex;justify-content:space-between;align-items:center}.chat-participant-detail h2{margin:3px 0}.chat-date-chart{height:340px}.chat-detail-page>.chat-table-panel{margin-top:14px}
@media(max-width:1100px){.chat-page-shell{width:min(100% - 32px,980px)}.chat-upload-panel{grid-template-columns:1fr}.chat-data-layout{grid-template-columns:1fr}.chat-side-data>div{display:grid;grid-template-columns:repeat(3,1fr)}.chat-history-list article{grid-template-columns:minmax(0,1fr) auto}.chat-history-actions{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:700px){.chat-page-shell{width:calc(100% - 24px);padding:24px 0 48px}.chat-page-head{align-items:stretch;flex-direction:column}.chat-privacy-chip{align-self:flex-start}.chat-export-actions{display:grid;grid-template-columns:1fr 1fr}.chat-export-actions a{justify-content:center;font-size:.82rem}.chat-upload-panel{padding:18px}.chat-upload-form{grid-template-columns:1fr}.chat-file-drop{grid-row:auto;min-height:150px}.chat-history-section>header,.chat-table-panel>header{align-items:stretch;flex-direction:column}.chat-history-list article{grid-template-columns:1fr;gap:13px}.chat-history-stats{justify-content:space-around}.chat-history-actions{grid-column:auto}.chat-history-actions>a{flex:1;text-align:center}.chat-period-filter{display:grid;grid-template-columns:1fr 1fr}.chat-period-filter button,.chat-period-filter a{grid-column:span 2;text-align:center}.chat-stat-grid,.chat-highlight-grid{grid-template-columns:1fr 1fr}.chat-chart-grid,.chat-insight-grid{grid-template-columns:1fr}.chat-chart-box{height:240px}.chat-side-data>div{grid-template-columns:1fr 1fr}.chat-table-panel{padding:14px}.chat-table-panel th,.chat-table-panel td{padding:10px 8px}.chat-stat-grid strong,.chat-highlight-grid strong{font-size:1.12rem}}

/* Chat analytics desktop and tablet workspace */
.chat-page-shell {
    width: 100%;
    max-width: 1320px;
    padding: 0 0 56px;
}

.chat-page-head {
    align-items: center;
    min-height: 116px;
    padding: 22px 26px;
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary-color, #169c91);
    border-radius: 8px;
    background: var(--bg-card, var(--card-bg));
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.chat-head-primary {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.chat-head-icon,
.chat-panel-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid color-mix(in srgb, var(--primary-color, #169c91) 26%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color, #169c91) 10%, var(--bg-card, #fff));
    color: var(--primary-color, #169c91);
    font-size: 1.25rem;
}

.chat-head-primary > div:last-child {
    min-width: 0;
}

.chat-head-primary h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-section-label {
    display: block;
    margin-bottom: 6px;
    color: var(--primary-color, #169c91);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.chat-upload-panel {
    grid-template-columns: minmax(260px, 0.72fr) minmax(520px, 1.5fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.chat-upload-copy {
    padding: 28px;
    border-right: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--primary-color, #169c91) 5%, var(--bg-card, #fff));
}

.chat-upload-copy > i {
    display: none;
}

.chat-upload-copy p {
    max-width: 34ch;
}

.chat-safety-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 18px;
}

.chat-safety-list span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
}

.chat-safety-list i {
    color: var(--primary-color, #169c91);
}

.chat-upload-form {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr);
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
    padding: 28px;
}

.chat-upload-form > label:first-of-type {
    grid-column: 1;
}

.chat-file-drop {
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 168px;
}

.chat-upload-form > label:nth-of-type(3) {
    grid-column: 1;
}

.chat-upload-form > button {
    grid-column: 1 / -1;
    min-height: 48px;
    font-size: 0.94rem;
}

.chat-upload-form input:focus,
.chat-upload-form textarea:focus,
.chat-period-filter input:focus,
.chat-history-section input:focus,
.chat-table-panel input:focus {
    outline: 2px solid color-mix(in srgb, var(--primary-color, #169c91) 24%, transparent);
    border-color: var(--primary-color, #169c91);
}

.chat-history-section {
    margin-top: 30px;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card, var(--card-bg));
}

.chat-history-section > header {
    padding-bottom: 17px;
    border-bottom: 1px solid var(--border-color);
}

.chat-history-section > header form {
    width: min(340px, 100%);
}

.chat-history-list article {
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.chat-history-list article:last-child {
    border-bottom: 0;
}

.chat-history-list article:hover {
    background: color-mix(in srgb, var(--primary-color, #169c91) 4%, transparent);
}

.chat-detail-page .chat-period-filter {
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.chat-detail-page .chat-stat-grid {
    margin-top: 20px;
    gap: 16px;
}

.chat-detail-page .chat-stat-grid article {
    position: relative;
    min-height: 130px;
    padding: 24px 22px;
    overflow: hidden;
}

.chat-detail-page .chat-stat-grid span {
    font-size: 0.9rem;
}

.chat-detail-page .chat-stat-grid strong {
    font-size: 1.9rem;
    margin-top: 10px;
}

.chat-detail-page .chat-stat-grid article::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    background: var(--primary-color, #169c91);
}

.chat-highlight-grid {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-card, #fff));
}

.chat-highlight-grid span {
    font-size: 0.9rem;
}

.chat-highlight-grid strong {
    font-size: 1.4rem;
    margin-top: 8px;
}

.chat-highlight-grid article {
    border: 0;
    border-right: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
}

.chat-highlight-grid article:last-child {
    border-right: 0;
}

.chat-chart-grid article,
.chat-table-panel,
.chat-participant-detail,
.chat-side-data {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.chat-chart-grid article > header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.chat-chart-box {
    height: 340px;
}

.chat-insight-grid article {
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

/* ── PC 상세 분석 페이지 전용 가독성 개선 ── */
.chat-detail-page .chat-page-head h1 {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}

.chat-detail-page .chat-page-head p {
    font-size: 0.95rem;
    margin-top: 4px;
    line-height: 1.6;
}

.chat-detail-page .chat-period-filter {
    font-size: 0.93rem;
    padding: 18px 22px;
    gap: 16px;
}

.chat-detail-page .chat-period-filter label {
    font-size: 0.88rem;
}

.chat-detail-page .chat-period-filter input,
.chat-detail-page .chat-period-filter button,
.chat-detail-page .chat-period-filter a {
    font-size: 0.9rem;
    padding: 10px 14px;
}

/* 섹션 헤더 h2 크기 */
.chat-detail-page section > header h2,
.chat-detail-page section header h2 {
    font-size: 1.65rem;
    margin: 0;
    font-weight: 800;
}

.chat-detail-page section > header p {
    font-size: 1rem;
    margin-top: 6px;
    line-height: 1.6;
}

/* 카드 그리드 패딩·여백 */
.chat-detail-page .chat-chart-grid article,
.chat-detail-page .chat-table-panel,
.chat-detail-page .chat-participant-detail {
    padding: 24px;
    border-radius: 10px;
}

.chat-detail-page .chat-chart-grid article h2,
.chat-detail-page .chat-chart-grid article header h2 {
    font-size: 1.2rem;
    font-weight: 800;
}

.chat-detail-page .chat-chart-box {
    height: 340px;
}

.chat-detail-page .chat-date-chart {
    height: 400px;
}

.chat-detail-page .chat-table-panel th {
    font-size: 0.92rem;
    padding: 15px 13px;
    letter-spacing: 0.02em;
}

.chat-detail-page .chat-table-panel td {
    font-size: 1rem;
    padding: 15px 13px;
}

.chat-detail-page .chat-table-panel > header h2 {
    font-size: 1.35rem;
    font-weight: 800;
}

.chat-detail-page .chat-table-panel > header p {
    font-size: 0.95rem;
    margin-top: 5px;
}

/* 데이터 레이아웃 사이드 */
.chat-detail-page .chat-data-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
}

.chat-detail-page .chat-side-data {
    padding: 22px;
}

.chat-detail-page .chat-side-data h2 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.chat-detail-page .chat-side-data span {
    font-size: 0.97rem;
    padding: 10px 12px;
}

/* insight 카드 */
.chat-detail-page .chat-insight-grid {
    gap: 18px;
}

.chat-detail-page .chat-insight-grid article {
    padding: 24px;
}

.chat-detail-page .chat-insight-grid h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.chat-detail-page .chat-insight-grid p {
    font-size: 1rem;
    line-height: 1.8;
}

/* 하이라이트 그리드 */
.chat-detail-page .chat-highlight-grid article {
    padding: 20px;
}

/* 멤버 상태 뱃지 */
.chat-member-state {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
}
.chat-member-state.is-active   { background: #d1fae5; color: #065f46; }
.chat-member-state.is-low      { background: #fef3c7; color: #92400e; }
.chat-member-state.is-dormant  { background: #ffe4e6; color: #9f1239; }
.chat-member-state.is-declined { background: #fee2e2; color: #7f1d1d; }

/* 유령회원 / 사이드 리스트 */
.chat-side-data > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-detail-page .chat-data-layout .chat-side-data > div span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--soft-bg, #f8fafc);
    border-radius: 8px;
    font-size: 0.92rem;
    white-space: normal;
    word-break: break-word;
}
.chat-detail-page .chat-data-layout .chat-side-data > div span b {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* 더보기 버튼 (참여자 테이블) */
.chat-show-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 13px;
    background: transparent;
    border: 1.5px dashed var(--border-color);
    border-radius: 10px;
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
}
.chat-show-more-btn:hover {
    background: color-mix(in srgb, var(--primary-color, #169c91) 6%, transparent);
    border-color: var(--primary-color, #169c91);
    color: var(--primary-color, #169c91);
}
.chat-show-more-btn i { font-size: 0.85rem; }

@media (min-width: 769px) and (max-width: 1366px) {
    .chat-page-shell {
        max-width: none;
    }

    .chat-page-head {
        min-height: 104px;
        padding: 18px 20px;
    }

    .chat-head-icon {
        width: 46px;
        height: 46px;
    }

    .chat-upload-panel {
        grid-template-columns: 1fr;
    }

    .chat-upload-copy {
        align-items: center;
        padding: 20px 22px;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .chat-upload-copy p {
        max-width: none;
    }

    .chat-safety-list {
        margin-top: 12px;
    }

    .chat-upload-form {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 0.72fr);
        padding: 22px;
    }

    .chat-stat-grid,
    .chat-highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-highlight-grid article:nth-child(2) {
        border-right: 0;
    }

    .chat-highlight-grid article:nth-child(-n+2) {
        border-bottom: 1px solid var(--border-color);
    }

    .chat-detail-page .chat-data-layout {
        grid-template-columns: 1fr;
    }

    .chat-detail-page .chat-side-data > div {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .chat-history-list article {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .chat-history-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .chat-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .chat-export-actions {
        width: 100%;
    }

    .chat-export-actions a {
        flex: 1;
        justify-content: center;
    }

    .chat-period-filter {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .chat-period-filter button,
    .chat-period-filter a {
        text-align: center;
    }

    .chat-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .chat-page-shell {
        width: 100%;
        padding-top: 0;
    }

    .chat-page-head {
        min-height: 0;
        padding: 18px;
    }

    .chat-head-primary {
        align-items: flex-start;
        gap: 12px;
    }

    .chat-head-icon {
        width: 42px;
        height: 42px;
    }

    .chat-head-primary h1 {
        white-space: normal;
    }

    .chat-upload-copy,
    .chat-upload-form,
    .chat-history-section {
        padding: 18px;
    }

    .chat-upload-form {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .chat-upload-form > label:first-of-type,
    .chat-file-drop,
    .chat-upload-form > label:nth-of-type(3),
    .chat-upload-form > button {
        grid-column: 1;
        grid-row: auto;
    }

    .chat-panel-icon {
        width: 44px;
        height: 44px;
    }

    .chat-highlight-grid {
        padding: 8px;
    }

    .chat-highlight-grid article {
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .chat-highlight-grid article:nth-last-child(-n+2) {
        border-bottom: 0;
    }
}

/* Chat analytics mobile layout follows the shared 768px breakpoint. */
@media (max-width: 768px) {
    .app-main:has(.chat-page-shell) {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        padding: 16px 12px 36px;
        overflow-x: clip;
    }

    .chat-page-shell,
    .chat-page-shell * {
        min-width: 0;
        box-sizing: border-box;
    }

    .chat-page-shell {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 0 36px;
        overflow: visible;
    }

    .chat-page-head {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
        min-height: 0;
        padding: 17px;
    }

    .chat-head-primary {
        align-items: flex-start;
        gap: 11px;
        width: 100%;
    }

    .chat-head-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .chat-page-head h1 {
        margin-top: 4px;
        font-size: 1.45rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .chat-page-head p {
        font-size: 0.84rem;
        line-height: 1.55;
    }

    .chat-privacy-chip {
        width: 100%;
        justify-content: center;
        padding: 9px 10px;
        font-size: 0.78rem;
    }

    .chat-export-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .chat-export-actions a {
        width: 100%;
        justify-content: center;
        padding: 10px 7px;
        font-size: 0.76rem;
    }

    .chat-upload-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        margin-top: 14px;
    }

    .chat-upload-copy {
        align-items: flex-start;
        padding: 17px;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .chat-panel-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .chat-upload-copy h2 {
        font-size: 1.05rem;
    }

    .chat-upload-copy p {
        max-width: none;
        font-size: 0.82rem;
    }

    .chat-safety-list {
        gap: 6px 9px;
        margin-top: 11px;
    }

    .chat-safety-list span {
        font-size: 0.68rem;
    }

    .chat-upload-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        width: 100%;
        padding: 17px;
        gap: 13px;
    }

    .chat-upload-form > label:first-of-type,
    .chat-upload-form > label:nth-of-type(3),
    .chat-upload-form > button,
    .chat-file-drop {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
    }

    .chat-file-drop {
        min-height: 132px;
    }

    .chat-upload-form input,
    .chat-upload-form textarea {
        max-width: 100%;
        font-size: 16px;
    }

    .chat-upload-form button {
        min-height: 48px;
    }

    .chat-history-section {
        width: 100%;
        margin-top: 16px;
        padding: 16px;
    }

    .chat-history-section > header,
    .chat-table-panel > header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .chat-history-section > header form,
    .chat-table-panel > header form {
        width: 100%;
    }

    .chat-history-section > header input,
    .chat-table-panel > header input {
        width: 100%;
        font-size: 16px;
    }

    .chat-history-list article {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
        width: 100%;
        padding: 17px 2px;
    }

    .chat-history-main h3,
    .chat-history-main p {
        overflow-wrap: anywhere;
    }

    .chat-history-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
        padding: 10px 0;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .chat-history-actions {
        grid-column: 1;
        width: 100%;
        justify-content: stretch;
    }

    .chat-history-actions > a {
        flex: 1;
        text-align: center;
    }

    .chat-period-filter {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        padding: 14px;
        gap: 10px;
    }

    .chat-period-filter label,
    .chat-period-filter button,
    .chat-period-filter a {
        grid-column: 1;
        width: 100%;
    }

    .chat-period-filter input {
        font-size: 16px;
    }

    .chat-period-filter a {
        padding: 8px;
        text-align: center;
    }

    .chat-stat-grid,
    .chat-highlight-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .chat-stat-grid article,
    .chat-highlight-grid article {
        min-height: 96px;
        padding: 14px;
    }

    .chat-stat-grid strong,
    .chat-highlight-grid strong {
        font-size: 1.06rem;
        line-height: 1.35;
    }

    .chat-highlight-grid {
        padding: 8px;
    }

    .chat-highlight-grid article {
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .chat-highlight-grid article:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .chat-chart-grid,
    .chat-insight-grid,
    .chat-data-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .chat-chart-grid article,
    .chat-insight-grid article,
    .chat-table-panel,
    .chat-side-data,
    .chat-participant-detail {
        width: 100%;
    }

    .chat-chart-grid article,
    .chat-insight-grid article {
        padding: 15px;
    }

    .chat-chart-box,
    .chat-date-chart {
        width: 100%;
        height: 230px;
        overflow: hidden;
    }

    .chat-chart-box canvas {
        max-width: 100% !important;
    }

    .chat-table-panel {
        padding: 14px;
        overflow: hidden;
    }

    .chat-table-scroll {
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .chat-table-panel table {
        width: max-content;
        min-width: 650px;
    }

    .chat-side-data {
        padding: 15px;
    }

    .chat-side-data > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .chat-side-data span {
        gap: 10px;
        overflow-wrap: anywhere;
    }

    .chat-participant-detail > header {
        align-items: flex-start;
        gap: 12px;
    }

    /* 모바일 상세페이지 전용 레이아웃 및 폰트 오버라이드 */
    .chat-detail-page .chat-data-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .chat-detail-page .chat-side-data > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .chat-detail-page .chat-table-panel th {
        font-size: 0.82rem;
        padding: 12px 10px;
    }

    .chat-detail-page .chat-table-panel td {
        font-size: 0.9rem;
        padding: 12px 10px;
    }
}

@media(min-width:1024px){
 .chat-detail-page{font-size:16px;line-height:1.65}
 .chat-detail-page .chat-section-label{font-size:.82rem}
 .chat-detail-page section>header p,.chat-detail-page section header p{font-size:.95rem}
 .chat-detail-page section h3{font-size:1.05rem}
 .chat-detail-page section h4{font-size:.98rem}
 .chat-detail-page section li,.chat-detail-page section>p{font-size:.93rem;line-height:1.7}
 .chat-detail-page .chat-operation-metrics span,.chat-detail-page .chat-change-metrics span,.chat-detail-page .chat-meeting-metrics span,.chat-detail-page .chat-safety-metrics span,.chat-detail-page .chat-relationship-metrics span,.chat-detail-page .chat-faction-metrics span,.chat-detail-page .chat-success-metrics span{font-size:.86rem}
 .chat-detail-page .chat-operation-metrics strong,.chat-detail-page .chat-change-metrics strong,.chat-detail-page .chat-meeting-metrics strong,.chat-detail-page .chat-safety-metrics strong,.chat-detail-page .chat-relationship-metrics strong,.chat-detail-page .chat-faction-metrics strong,.chat-detail-page .chat-success-metrics strong{font-size:1.3rem}
 .chat-detail-page .chat-change-list b,.chat-detail-page .chat-heated-members b,.chat-detail-page .chat-unanswered-list strong,.chat-detail-page .chat-top-relations article>span,.chat-detail-page .chat-influence-panel article strong{font-size:.9rem}
 .chat-detail-page .chat-change-list small,.chat-detail-page .chat-heated-members small,.chat-detail-page .chat-risk-intervals article p,.chat-detail-page .chat-unanswered-list p,.chat-detail-page .chat-faction-groups header p,.chat-detail-page .chat-success-recommendation article p{font-size:.82rem}
 .chat-detail-page .chat-operator-assistant header p,.chat-detail-page .chat-assistant-conversation p,.chat-detail-page .chat-assistant-form>small{font-size:.88rem}
 .chat-detail-page .chat-assistant-suggestions button,.chat-detail-page .chat-assistant-form button{font-size:.86rem}
 .chat-detail-page .chat-prediction-report>header h2{font-size:1.65rem}.chat-detail-page .chat-prediction-overview span{font-size:.9rem}.chat-detail-page .chat-prediction-overview small{font-size:.82rem}.chat-detail-page .chat-prediction-layout header p,.chat-detail-page .chat-prediction-layout>aside>p,.chat-detail-page .chat-prediction-layout aside dl>div{font-size:.86rem}.chat-detail-page .chat-inactivity-forecast strong{font-size:.92rem}.chat-detail-page .chat-inactivity-forecast small{font-size:.8rem}
}

/* Meetup attendance experience comparison */
.chat-meetup-experience-report{margin:14px 0;padding:24px;border:1px solid var(--border-color);border-top:3px solid #f59e0b;border-radius:8px;background:var(--bg-card,var(--card-bg));box-shadow:0 10px 28px rgba(15,23,42,.05)}
.chat-meetup-experience-report>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.chat-meetup-experience-report h2,.chat-meetup-experience-report h3,.chat-meetup-experience-report p{margin:0}.chat-meetup-experience-report>header h2{font-size:1.3rem}.chat-meetup-experience-report>header p{margin-top:5px;color:var(--text-secondary);font-size:.86rem}.chat-experience-rule{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:6px;background:#fffbeb;color:#b45309;font-size:.76rem;font-weight:900;white-space:nowrap}
.chat-experience-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.chat-experience-comparison>article{padding:18px;border:1px solid var(--border-color);border-radius:7px;background:var(--soft-bg,#f8fafc)}.chat-experience-comparison>article.is-experienced{border-color:color-mix(in srgb,#f59e0b 45%,var(--border-color));background:color-mix(in srgb,#f59e0b 6%,var(--bg-card,#fff))}.chat-experience-comparison article>header{display:flex;align-items:center;gap:10px}.chat-experience-comparison article>header>span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:7px;background:var(--bg-card,#fff);color:#f59e0b}.chat-experience-comparison h3{font-size:.92rem}.chat-experience-comparison header p{margin-top:2px;color:var(--text-secondary);font-size:.7rem}.chat-experience-comparison article>strong{display:block;margin:14px 0;font-size:1.65rem}.chat-experience-comparison dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}.chat-experience-comparison dl>div{padding:9px;border-radius:6px;background:var(--bg-card,#fff)}.chat-experience-comparison dt{color:var(--text-secondary);font-size:.7rem}.chat-experience-comparison dd{margin:3px 0 0;font-size:.84rem;font-weight:900}
.chat-experience-lists,.chat-experience-guidance{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.chat-experience-lists>section,.chat-experience-guidance>div{padding:16px;border:1px solid var(--border-color);border-radius:7px}.chat-experience-lists section>header{display:flex;justify-content:space-between;gap:12px}.chat-experience-lists h3,.chat-experience-guidance h3{font-size:.9rem}.chat-experience-lists header p{margin-top:3px;color:var(--text-secondary);font-size:.7rem}.chat-experience-lists header>b{color:var(--primary-color,#169c91);font-size:.8rem}.chat-experience-lists section>div{display:grid;gap:6px;margin-top:12px}.chat-experience-lists section>div>span{display:flex;justify-content:space-between;gap:10px;padding:8px 9px;border-radius:6px;background:var(--soft-bg,#f8fafc)}.chat-experience-lists strong{min-width:0;font-size:.78rem;overflow-wrap:anywhere}.chat-experience-lists small{color:var(--text-secondary);font-size:.7rem;white-space:nowrap}.chat-experience-lists em{color:var(--text-secondary);font-size:.76rem}.chat-experience-guidance ul{display:grid;gap:6px;margin:10px 0 0;padding-left:18px;color:var(--text-secondary);font-size:.76rem;line-height:1.6}.chat-experience-note{display:flex;gap:7px;margin-top:12px!important;padding:11px 12px;border-left:3px solid #f59e0b;background:#fffbeb;color:#78350f;font-size:.73rem;line-height:1.6}
@media(max-width:760px){.chat-meetup-experience-report{padding:16px}.chat-meetup-experience-report>header{flex-direction:column}.chat-experience-comparison,.chat-experience-lists,.chat-experience-guidance{grid-template-columns:1fr}.chat-experience-comparison dl{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.chat-detail-page .chat-meetup-experience-report>header h2{font-size:1.65rem}.chat-detail-page .chat-meetup-experience-report>header p{font-size:.95rem}.chat-detail-page .chat-experience-comparison h3,.chat-detail-page .chat-experience-lists h3,.chat-detail-page .chat-experience-guidance h3{font-size:1.05rem}.chat-detail-page .chat-experience-comparison header p,.chat-detail-page .chat-experience-lists header p{font-size:.82rem}.chat-detail-page .chat-experience-comparison dt,.chat-detail-page .chat-experience-lists small{font-size:.8rem}.chat-detail-page .chat-experience-comparison dd,.chat-detail-page .chat-experience-lists strong{font-size:.92rem}.chat-detail-page .chat-experience-guidance ul,.chat-detail-page .chat-experience-note{font-size:.86rem}}

/* Live participant search */
#participantSearchForm{position:relative;display:grid;grid-template-columns:minmax(190px,300px) 34px minmax(118px,145px);align-items:center;gap:7px;min-width:min(100%,490px)}
#participantLiveSearch{grid-column:1/3;grid-row:1;width:100%;padding-right:42px}
#participantSearchClear{grid-column:2;grid-row:1;z-index:1;display:flex;width:30px;height:30px;align-items:center;justify-content:center;border:0;border-radius:5px;background:transparent;color:var(--text-secondary);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s,background-color .15s}
#participantSearchClear.is-visible{opacity:1;pointer-events:auto}#participantSearchClear:hover{background:var(--soft-bg,#f1f5f9);color:var(--text-primary)}
#participantStatusFilter{grid-column:3;grid-row:1;width:100%;min-height:44px;padding:0 34px 0 11px;border:1px solid var(--border-color);border-radius:6px;background-color:var(--input-bg,var(--bg-card));color:var(--text-primary);font:inherit;font-size:.8rem;font-weight:800;cursor:pointer}
#participantStatusFilter:focus{outline:2px solid color-mix(in srgb,var(--primary-color,#169c91) 25%,transparent);border-color:var(--primary-color,#169c91)}
.chat-participant-search-status{grid-column:1/-1;min-height:18px;margin-top:4px;color:var(--text-secondary);font-size:.72rem;font-weight:700;text-align:right}
.chat-participant-search-empty td{padding:28px!important;color:var(--text-secondary);text-align:center!important}.chat-show-more-btn[hidden]{display:none!important}
.chat-show-more-btn span{font-weight:500;opacity:.7}
@media(max-width:700px){#participantSearchForm{width:100%;min-width:0;grid-template-columns:minmax(0,1fr) 34px;gap:7px 0}#participantStatusFilter{grid-column:1/-1;grid-row:2;min-height:46px}.chat-participant-search-status{grid-row:3;text-align:left}}

/* Chat report visibility controls */
.chat-detail-page>[data-report-hidden="true"]{display:none!important}
.chat-report-controls{margin:14px 0;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card,var(--card-bg));box-shadow:0 8px 24px rgba(15,23,42,.04)}
.chat-report-controls>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:62px;padding:14px 18px;cursor:pointer;list-style:none}.chat-report-controls>summary::-webkit-details-marker{display:none}.chat-report-controls>summary>span{display:grid;grid-template-columns:34px auto;align-items:center;column-gap:10px}.chat-report-controls>summary>span>i{grid-row:1/3;display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:7px;background:color-mix(in srgb,var(--primary-color,#169c91) 10%,var(--bg-card,#fff));color:var(--primary-color,#169c91)}.chat-report-controls>summary b{font-size:.94rem}.chat-report-controls>summary small{margin-top:2px;color:var(--text-secondary);font-size:.72rem}.chat-report-controls>summary>strong{padding:6px 9px;border-radius:5px;background:var(--soft-bg,#f1f5f9);color:var(--text-secondary);font-size:.72rem;white-space:nowrap}.chat-report-controls[open]>summary{border-bottom:1px solid var(--border-color)}
.chat-report-controls-body{padding:16px 18px}.chat-report-presets{display:flex;align-items:center;gap:7px;overflow-x:auto;padding-bottom:12px}.chat-report-presets>span{margin-right:5px;color:var(--text-secondary);font-size:.72rem;font-weight:800;white-space:nowrap}.chat-report-presets button{flex:0 0 auto;padding:7px 11px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-card,#fff);color:var(--text-secondary);font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}.chat-report-presets button.is-active{border-color:var(--primary-color,#169c91);background:var(--primary-color,#169c91);color:#fff}
.chat-report-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.chat-report-options label{min-width:0;cursor:pointer}.chat-report-options input{position:absolute;width:1px;height:1px;opacity:0}.chat-report-options label>span{display:flex;min-height:42px;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--border-color);border-radius:6px;background:var(--soft-bg,#f8fafc);color:var(--text-secondary);font-size:.77rem;font-weight:800;transition:border-color .15s,background-color .15s,color .15s}.chat-report-options label>span i{width:17px;color:var(--text-secondary);text-align:center}.chat-report-options input:checked+span{border-color:color-mix(in srgb,var(--primary-color,#169c91) 45%,var(--border-color));background:color-mix(in srgb,var(--primary-color,#169c91) 8%,var(--bg-card,#fff));color:var(--text-primary)}.chat-report-options input:checked+span i{color:var(--primary-color,#169c91)}.chat-report-options input:focus-visible+span{outline:2px solid color-mix(in srgb,var(--primary-color,#169c91) 30%,transparent);outline-offset:2px}
.chat-report-control-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color)}.chat-report-control-footer p{margin:0;color:var(--text-secondary);font-size:.7rem}.chat-report-control-footer button{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-card,#fff);color:var(--text-secondary);font:inherit;font-size:.72rem;font-weight:800;cursor:pointer;white-space:nowrap}
@media(max-width:1000px){.chat-report-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.chat-report-controls>summary{padding:12px 14px}.chat-report-controls>summary small{display:none}.chat-report-controls-body{padding:14px}.chat-report-options{grid-template-columns:1fr 1fr}.chat-report-options label>span{min-height:44px}.chat-report-control-footer{align-items:flex-start;flex-direction:column}.chat-report-control-footer button{align-self:flex-end}}

/* Meetup detail and edit: tablet workspace */
@media (min-width: 769px) and (max-width: 1180px) {
    .app-main:has(.meetup-view-page),
    .app-main:has(.meetup-edit) {
        min-width: 0;
        padding-right: clamp(18px, 3vw, 32px);
        padding-left: clamp(18px, 3vw, 32px);
    }

    .meetup-view-page {
        width: 100%;
        max-width: 980px !important;
        padding: 1.75rem 0 3rem !important;
        overflow-x: hidden;
    }

    .meetup-view-page > .flex:first-child {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 1.15rem !important;
        margin-bottom: 1.4rem !important;
    }

    .meetup-view-page > .flex:first-child > .space-y-2\.5,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 {
        min-width: 0;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2 {
        flex-wrap: wrap;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2 > * {
        max-width: 100%;
        min-height: 38px;
        align-items: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem !important;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 > *,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 form,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 a,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 button,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 span {
        width: 100%;
        min-width: 0;
    }

    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 a,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 button,
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5 span {
        min-height: 44px;
        justify-content: center;
        padding: 0.7rem 0.65rem !important;
        font-size: 0.88rem !important;
        line-height: 1.3;
        white-space: normal;
    }

    .meetup-flow-card {
        padding: 1.25rem;
        border-radius: 18px;
    }

    .meetup-flow-summary h2 {
        font-size: 1.25rem;
    }

    .meetup-flow-summary p {
        font-size: 0.92rem;
    }

    .meetup-flow-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .meetup-flow-step {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        min-height: 70px;
        padding: 0.8rem;
    }

    .meetup-flow-dot {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        margin-bottom: 0;
    }

    .meetup-flow-step strong {
        font-size: 0.86rem;
    }

    .meetup-flow-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meetup-flow-action {
        width: 100%;
        min-height: 44px;
    }

    .meetup-view-page > .w-full.bg-white\/60 {
        padding: 1.25rem !important;
        border-radius: 18px !important;
    }

    .meetup-view-page .grid.grid-cols-1.lg\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.25rem !important;
    }

    .meetup-view-page .lg\:col-span-2,
    .meetup-view-page .lg\:col-span-1,
    .meetup-view-page .meetup-review-section,
    .meetup-view-page .meetup-side-column {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0;
    }

    .meetup-view-page .meetup-card,
    .meetup-view-page .meetup-review-section {
        padding: 1.5rem !important;
        border-radius: 18px !important;
    }

    .meetup-view-page .meetup-card h3,
    .meetup-view-page .meetup-review-section h3 {
        font-size: 1.05rem !important;
    }

    .meetup-view-page .meetup-card h4 {
        font-size: 0.95rem !important;
    }

    .meetup-detail-card .meetup-content-body {
        min-height: 0 !important;
        padding: 0.25rem 0 !important;
        font-size: 1rem !important;
        line-height: 1.8 !important;
    }

    .meetup-view-page .meetup-card .text-\[13px\],
    .meetup-view-page .meetup-card .text-\[12px\],
    .meetup-view-page .meetup-card .text-\[11px\],
    .meetup-view-page .meetup-card .text-\[10px\],
    .meetup-view-page .meetup-review-section .text-\[11px\],
    .meetup-view-page .meetup-review-section .text-\[10px\] {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    .meetup-view-page .sticky-panel {
        position: static !important;
        top: auto !important;
    }

    .meetup-view-page #rsvp-form .rsvp-option-card {
        min-height: 64px;
        padding: 1rem !important;
    }

    .meetup-view-page #rsvp-form button[type="submit"],
    .meetup-view-page #rsvp-reset-form button,
    .meetup-review-submit {
        min-height: 48px;
        font-size: 0.95rem !important;
    }

    .notice-write.meetup-edit {
        width: 100% !important;
        max-width: 980px;
        padding: 1.75rem 0 3rem;
    }

    .meetup-edit .notice-write-header {
        align-items: flex-start;
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .meetup-edit .notice-write-header h1 {
        font-size: 2rem;
        line-height: 1.25;
    }

    .meetup-edit .notice-write-header p {
        max-width: 620px;
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .meetup-edit .notice-back-link {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 1rem;
    }

    .meetup-edit .notice-write-form {
        gap: 1.25rem;
        padding: 1.5rem;
        border: 1px solid var(--border-color);
        border-radius: 18px;
        background: var(--bg-card);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    }

    .meetup-edit .notice-write-form > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    .meetup-edit .notice-form-field {
        min-width: 0;
        gap: 0.55rem;
        font-size: 0.96rem;
    }

    .meetup-edit .notice-form-field input,
    .meetup-edit .notice-form-field select,
    .meetup-edit .notice-form-field textarea,
    .meetup-edit #spot_search_input {
        min-height: 50px;
        padding: 0.85rem 0.95rem !important;
        font-size: 1rem !important;
    }

    .meetup-edit .notice-form-field textarea {
        min-height: 220px;
        line-height: 1.75;
    }

    .meetup-edit #spot_dropdown_results {
        max-height: 320px;
    }

    .meetup-edit .notice-write-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin-top: 0.35rem;
    }

    .meetup-edit .notice-cancel-button,
    .meetup-edit .notice-submit-button {
        width: 100%;
        min-height: 50px;
        font-size: 0.98rem;
    }
}

@media (min-width: 769px) and (max-width: 860px) {
    .meetup-view-page > .flex:first-child .flex.items-center.gap-2\.5,
    .meetup-flow-steps,
    .meetup-edit .notice-write-form > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.chat-detail-page .chat-export-actions{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:700px){.chat-detail-page .chat-export-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.chat-detail-page .chat-export-actions a{min-width:0;padding:10px 7px;font-size:.76rem;text-align:center}}

/* --- 카카오톡 대화분석 아코디언 공통 UI --- */
.chat-section-accordion {
    margin: 20px 0;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card, var(--card-bg));
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.chat-section-accordion:hover {
    border-color: color-mix(in srgb, var(--primary-color, #169c91) 40%, var(--border-color));
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.07);
    transform: translateY(-2px);
}

.chat-section-accordion[open] {
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
}

.chat-accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.2s ease;
}

.chat-accordion-summary::-webkit-details-marker {
    display: none;
}

.chat-accordion-summary:hover {
    background-color: color-mix(in srgb, var(--primary-color, #169c91) 4%, transparent);
}

.chat-accordion-summary-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.chat-accordion-summary-content > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-accordion-summary-content h2 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
}

.chat-accordion-summary-content p {
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
}

.chat-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--soft-bg, #f1f5f9);
    color: var(--text-secondary);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    transition: all 0.25s ease;
}

.chat-accordion-summary:hover .chat-accordion-icon {
    background: color-mix(in srgb, var(--primary-color, #169c91) 12%, var(--soft-bg, #f1f5f9));
    color: var(--primary-color, #169c91);
    transform: scale(1.05);
}

.chat-section-accordion[open] .chat-accordion-icon {
    transform: rotate(180deg);
    background: var(--primary-color, #169c91);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(22, 156, 145, 0.3);
}

.chat-accordion-body {
    padding: 28px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card, var(--card-bg));
    animation: slideDownAccordion 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDownAccordion {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-section-accordion.chat-operator-assistant { border-top: 4px solid #10b981; }
.chat-section-accordion.chat-prediction-report { border-top: 4px solid #8b5cf6; }
.chat-section-accordion.chat-summary-report { border-top: 4px solid #3b82f6; }
.chat-section-accordion.chat-meetup-experience-report { border-top: 4px solid #f59e0b; }
.chat-section-accordion.chat-member-change-report { border-top: 4px solid #06b6d4; }
.chat-section-accordion.chat-meeting-keyword-report { border-top: 4px solid #6366f1; }
.chat-section-accordion.chat-safety-report { border-top: 4px solid #ef4444; }
.chat-section-accordion.chat-ai-report { border-top: 4px solid #ec4899; }
.chat-section-accordion.chat-relationship-report { border-top: 4px solid #f97316; }
.chat-section-accordion.chat-faction-report { border-top: 4px solid #84cc16; }
.chat-section-accordion.chat-success-report { border-top: 4px solid #14b8a6; }
.chat-section-accordion.chat-charts-report { border-top: 4px solid #64748b; }
.chat-section-accordion.chat-participants-report { border-top: 4px solid #0f172a; }

.chat-section-accordion.chat-operator-assistant,
.chat-section-accordion.chat-prediction-report,
.chat-section-accordion.chat-member-change-report,
.chat-section-accordion.chat-meeting-keyword-report,
.chat-section-accordion.chat-safety-report,
.chat-section-accordion.chat-ai-report,
.chat-section-accordion.chat-relationship-report,
.chat-section-accordion.chat-faction-report,
.chat-section-accordion.chat-success-report,
.chat-section-accordion.chat-charts-report,
.chat-section-accordion.chat-participants-report {
    padding: 0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03) !important;
}

.chat-section-accordion.chat-charts-report .chat-accordion-body,
.chat-section-accordion.chat-participants-report .chat-accordion-body {
    padding: 22px !important;
}

.chat-section-accordion.chat-operator-assistant:hover,
.chat-section-accordion.chat-prediction-report:hover,
.chat-section-accordion.chat-member-change-report:hover,
.chat-section-accordion.chat-meeting-keyword-report:hover,
.chat-section-accordion.chat-safety-report:hover,
.chat-section-accordion.chat-ai-report:hover,
.chat-section-accordion.chat-relationship-report:hover,
.chat-section-accordion.chat-faction-report:hover,
.chat-section-accordion.chat-success-report:hover,
.chat-section-accordion.chat-charts-report:hover,
.chat-section-accordion.chat-participants-report:hover {
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.07) !important;
}

.chat-section-accordion.chat-operator-assistant > header,
.chat-section-accordion.chat-prediction-report > header,
.chat-section-accordion.chat-member-change-report > header,
.chat-section-accordion.chat-meeting-keyword-report > header,
.chat-section-accordion.chat-safety-report > header,
.chat-section-accordion.chat-ai-report > header,
.chat-section-accordion.chat-relationship-report > header,
.chat-section-accordion.chat-faction-report > header,
.chat-section-accordion.chat-success-report > header,
.chat-section-accordion.chat-charts-report > header,
.chat-section-accordion.chat-participants-report > header {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

/* --- 상단 퀵 네비게이션 프리미엄 Glassmorphism UI --- */
.chat-quick-nav {
    position: sticky;
    top: 60px;
    z-index: 100;
    margin: 20px 0;
    padding: 10px 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px) saturate(190%);
    -webkit-backdrop-filter: blur(14px) saturate(190%);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .chat-quick-nav {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.chat-quick-nav-inner {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 18px;
    scrollbar-width: none;
}

.chat-quick-nav-inner::-webkit-scrollbar {
    display: none;
}

.chat-quick-nav-inner button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--border-color);
    border-radius: 40px;
    background: var(--bg-card, #ffffff);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.chat-quick-nav-inner button i {
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.chat-quick-nav-inner button:hover {
    border-color: var(--primary-color, #169c91);
    color: var(--primary-color, #169c91);
    background: color-mix(in srgb, var(--primary-color, #169c91) 4%, var(--bg-card, #ffffff));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 156, 145, 0.1);
}

.chat-quick-nav-inner button:hover i {
    transform: scale(1.15);
}

.chat-quick-nav-inner button.is-active {
    background: linear-gradient(135deg, var(--primary-color, #169c91), color-mix(in srgb, var(--primary-color, #169c91) 82%, #000000));
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(22, 156, 145, 0.35);
}

.chat-quick-nav-inner button.is-active:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(22, 156, 145, 0.42);
}

@media (max-width: 1366px) {
    .chat-detail-page .chat-data-layout {
        grid-template-columns: 1fr !important;
    }
    .chat-detail-page .chat-side-data {
        width: 100% !important;
        margin-top: 14px;
    }
}

/* --- 참여자 분석 테이블 기본 스타일 --- */
.chat-participant-table {
    width: 100%;
    border-collapse: collapse;
}

.chat-participant-table th,
.chat-participant-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
    font-size: 0.875rem;
}

.chat-participant-table th {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--soft-bg, #f8fafc);
    position: sticky;
    top: 0;
    z-index: 1;
}

.chat-participant-table td strong {
    font-weight: 700;
    color: var(--text-primary);
}

.chat-participant-detail-btn {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary-color, #169c91) 12%, transparent);
    color: var(--primary-color, #169c91);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.chat-participant-detail-btn:hover {
    background: var(--primary-color, #169c91);
    color: #fff;
}

/* --- 참여자 분석 검색창 및 레이아웃 깨짐 방지 및 반응형 튜닝 --- */
.chat-participants-report .chat-table-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 0 !important;
}

.chat-participants-report .chat-table-panel > header > div {
    flex: 1 1 300px;
}

.chat-participants-report .chat-table-panel > header h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 4px 0;
}

#participantSearchForm {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 2 1 400px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 0;
    position: relative;
    max-width: 100%;
}

.chat-search-input-wrapper {
    position: relative;
    flex: 1 1 240px;
    max-width: 360px;
    min-width: 180px;
}

.chat-search-input-wrapper .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 0.9rem;
}

#participantLiveSearch {
    width: 100% !important;
    padding: 11px 36px 11px 38px !important;
    border: 1px solid var(--border-color);
    background: var(--input-bg, var(--card-bg));
    color: var(--text-primary);
    border-radius: 8px;
    height: 44px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#participantLiveSearch:focus {
    border-color: var(--primary-color, #169c91);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #169c91) 15%, transparent);
}

#participantSearchClear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: color 0.2s;
}

#participantSearchClear.is-visible {
    display: flex;
}

#participantSearchClear:hover {
    color: var(--text-primary);
}

.chat-filter-select-wrapper {
    position: relative;
    flex: 0 0 130px;
}

#participantStatusFilter {
    width: 100% !important;
    height: 44px;
    padding: 0 32px 0 14px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--input-bg, var(--card-bg)) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 12px center/14px !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-family: inherit !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

#participantStatusFilter:focus {
    border-color: var(--primary-color, #169c91);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #169c91) 15%, transparent);
}

.chat-participant-search-status {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: 6px;
    align-self: center;
    white-space: nowrap;
}

/* --- 카카오톡 대화분석 모바일(768px 이하) 대응 강화 --- */
@media (max-width: 768px) {
    /* 퀵 네비게이션 모바일 최적화 */
    .chat-quick-nav {
        top: 50px !important; /* 모바일 탑 헤더 고려 */
        padding: 6px 0 !important;
        margin: 10px 0 !important;
    }
    
    .chat-quick-nav-inner {
        padding: 2px 12px !important;
        gap: 8px !important;
    }
    
    .chat-quick-nav-inner button {
        flex-shrink: 0 !important; /* 찌그러짐 방지의 핵심 */
        padding: 7px 13px !important;
        font-size: 0.78rem !important;
        border-radius: 30px !important;
    }
    
    .chat-quick-nav-inner button i {
        font-size: 0.82rem !important;
    }
    
    /* 아코디언 모바일 패딩 축소 */
    .chat-section-accordion {
        margin: 12px 0 !important;
        border-radius: 12px !important;
    }
    
    .chat-accordion-summary {
        padding: 14px 16px !important;
        gap: 12px !important;
    }
    
    .chat-accordion-summary-content {
        gap: 10px !important;
    }
    
    .chat-accordion-summary-content h2 {
        font-size: 1.05rem !important;
    }
    
    .chat-accordion-summary-content p {
        font-size: 0.75rem !important;
    }
    
    .chat-accordion-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }
    
    .chat-accordion-body {
        padding: 14px !important;
    }
    
    /* 요약 통계 & 그리드 레이아웃 모바일 2열 정렬 */
    .chat-stat-grid,
    .chat-highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 8px 0 !important;
    }
    
    .chat-stat-grid article,
    .chat-highlight-grid article {
        padding: 12px !important;
        border-radius: 8px !important;
    }
    
    .chat-stat-grid strong,
    .chat-highlight-grid strong {
        font-size: 1.15rem !important;
        margin-top: 4px !important;
    }
    
    /* 차트 및 대화 분석 그리드 1열 정렬 */
    .chat-chart-grid,
    .chat-insight-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .chat-chart-box {
        height: 220px !important;
    }
    
    .chat-date-chart {
        height: 260px !important;
    }
    
    /* AI 브리핑 모바일 레이아웃 */
    .chat-ai-metrics {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px !important;
    }
    
    .chat-ai-decision-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 14px !important;
    }
    
    /* 운영 예측 시스템 모바일 */
    .chat-prediction-overview {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .chat-prediction-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
    /* 모임 참가 경험 비교 모바일 */
    .chat-experience-comparison {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .chat-experience-lists {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .chat-experience-guidance {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* 회원 변화 추적 모바일 */
    .chat-change-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    
    .chat-change-columns {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
    /* 위험 감지 모바일 */
    .chat-safety-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    
    .chat-safety-summary {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* 관계도 및 세력 분석 모바일 */
    .chat-relationship-metrics,
    .chat-faction-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    
    .chat-relationship-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .chat-network-panel {
        padding: 10px !important;
    }
    
    .chat-network-canvas svg {
        height: 280px !important;
    }
    
    .chat-faction-groups {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .chat-faction-insights {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .chat-faction-member-lists {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* 성공률 분석 모바일 */
    .chat-success-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
        /* 참여자 분석 테이블 모바일 */
    .chat-participants-report .chat-table-panel > header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .chat-participants-report .chat-table-panel > header > div {
        flex: none !important;
    }
    
    #participantSearchForm {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
        flex: none !important;
    }
    .chat-search-input-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .chat-search-input-wrapper .search-icon {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
    }

    #participantLiveSearch {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .chat-filter-select-wrapper {
        width: 100% !important;
        flex: none !important;
    }

    #participantStatusFilter {
        width: 100% !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }

    .chat-participant-search-status {
        text-align: left !important;
        margin-top: 4px !important;
        display: block !important;
    }
    
    .chat-side-data > div {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    
    /* 참여자 분석 테이블 모바일 데이터 카드 형태 변환 */
    .chat-participant-table thead {
        display: none !important;
    }
    
    .chat-participant-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        border: none !important;
    }

    .chat-participant-table tbody {
        display: block !important;
        width: 100% !important;
    }
    
    .chat-participant-table tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 8px !important;
        padding: 12px !important;
        background: var(--bg-card, #ffffff) !important;
        box-sizing: border-box !important;
    }
    
    .chat-participant-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent) !important;
        text-align: right !important;
        box-sizing: border-box !important;
        width: 100% !important;
        white-space: normal !important;
    }
    
    .chat-participant-table td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        justify-content: flex-end !important;
    }
    
    .chat-participant-table td::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        color: var(--text-secondary) !important;
        font-size: 0.8rem !important;
        text-align: left !important;
        margin-right: 8px !important;
    }

    .chat-participant-search-empty td::before {
        display: none !important;
    }
    
    .chat-participant-search-empty td {
        display: block !important;
        text-align: center !important;
        padding: 24px 0 !important;
        color: var(--text-secondary) !important;
    }
    
    /* AI 비서 모바일 폼 */
    .chat-assistant-form label {
        font-size: 0.8rem !important;
    }
    
    .chat-assistant-form div {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .chat-assistant-form input {
        width: 100% !important;
    }
    
    .chat-assistant-form button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .chat-assistant-suggestions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .chat-assistant-suggestions button {
        font-size: 0.78rem !important;
        padding: 6px 10px !important;
    }
}

/* --- 아침 인사 요정 프리미엄 테마 스타일 --- */
.chat-section-accordion.chat-morning-greeting-report {
    border-top: 4px solid #eab308; /* 요정 골드 테마 */
    padding: 0 !important;
}

.chat-morning-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.chat-morning-metrics article {
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-card, var(--card-bg));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
}

.chat-morning-metrics article span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.chat-morning-metrics article strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
}

.chat-morning-metrics article small {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* 요약 레이아웃 */
.chat-morning-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
    margin-top: 20px;
}

/* 요정 랭킹 리스트 */
.chat-morning-ranking {
    min-width: 0;
}

.chat-morning-ranking header {
    margin-bottom: 12px;
}

.chat-morning-ranking h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.chat-morning-ranking p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
}

.chat-morning-fairy-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 요정 개별 카드 */
.chat-fairy-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card, var(--card-bg));
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.chat-fairy-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
}

/* 등수별 브랜딩 border 및 왼쪽 악센트 */
.chat-fairy-card.rank-1 { border-color: rgba(234, 179, 8, 0.4); background: linear-gradient(90deg, rgba(234, 179, 8, 0.04), transparent); }
.chat-fairy-card.rank-1::before { background: #eab308; }
.chat-fairy-card.rank-2 { border-color: rgba(148, 163, 184, 0.4); background: linear-gradient(90deg, rgba(148, 163, 184, 0.03), transparent); }
.chat-fairy-card.rank-2::before { background: #94a3b8; }
.chat-fairy-card.rank-3 { border-color: rgba(180, 83, 9, 0.4); background: linear-gradient(90deg, rgba(180, 83, 9, 0.03), transparent); }
.chat-fairy-card.rank-3::before { background: #b45309; }

.chat-fairy-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--soft-bg, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.chat-fairy-card.rank-1 .chat-fairy-rank { background: #eab308; color: #ffffff; }
.chat-fairy-card.rank-2 .chat-fairy-rank { background: #94a3b8; color: #ffffff; }
.chat-fairy-card.rank-3 .chat-fairy-rank { background: #b45309; color: #ffffff; }

.chat-fairy-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-fairy-info strong {
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-fairy-info small {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.chat-fairy-score {
    flex-shrink: 0;
    text-align: right;
}

.chat-fairy-score strong {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-color, #169c91);
}

.chat-fairy-card.rank-1 .chat-fairy-score strong {
    color: #eab308;
}

/* 자주 쓰인 표현 게이지바 */
.chat-morning-keywords {
    border-left: 1px solid var(--border-color);
    padding-left: 20px;
    min-width: 0;
}

.chat-morning-keywords h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.chat-morning-keywords p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

.chat-morning-keyword-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-morning-gauge-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-gauge-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}

.chat-gauge-label span {
    font-weight: 700;
    color: var(--text-primary);
}

.chat-gauge-label b {
    color: var(--text-secondary);
}

.chat-gauge-bar {
    height: 8px;
    background: var(--soft-bg, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
}

.chat-gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color, #169c91), #eab308);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-morning-note {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin: 18px 0 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 태블릿 반응형 (1024px 이하) */
@media (max-width: 1024px) {
    .chat-morning-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .chat-morning-keywords {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--border-color);
        padding-top: 20px;
    }
}

/* 모바일 추가 스타일 (768px 이하) */
@media (max-width: 768px) {
    .chat-morning-metrics {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .chat-morning-metrics article {
        padding: 12px 16px !important;
    }
    
    .chat-fairy-card {
        padding: 10px 14px !important;
        gap: 10px !important;
    }
    
    .chat-fairy-info strong {
        font-size: 0.88rem !important;
    }
    
    .chat-fairy-score strong {
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   Reaction Fairy Section Styles (리액션왕)
   ========================================================================== */
.chat-section-accordion.chat-reaction-report {
    border-top: 4px solid #f43f5e;
}

.chat-reaction-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.chat-reaction-metrics article {
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--soft-bg, #f8fafc);
}

.chat-reaction-metrics article span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.chat-reaction-metrics article strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    margin-top: 6px;
    color: var(--text-primary);
}

.chat-reaction-metrics article small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.chat-reaction-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
    margin-top: 20px;
}

.chat-reaction-ranking {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    background: var(--bg-card, #fff);
}

.chat-reaction-ranking header {
    margin-bottom: 18px;
}

.chat-reaction-ranking h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.chat-reaction-ranking header p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
}

.chat-reaction-fairy-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-reactor-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-reactor-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.chat-reactor-card.rank-1 {
    border-color: #f43f5e;
    background: color-mix(in srgb, #f43f5e 4%, var(--bg-card, #fff));
}

.chat-reactor-rank {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 900;
}

.rank-1 .chat-reactor-rank {
    background: #f43f5e;
    color: #fff;
}

.chat-reactor-info {
    flex: 1;
    min-width: 0;
}

.chat-reactor-info strong {
    display: block;
    font-size: 0.92rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reactor-info small {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.chat-reactor-score {
    text-align: right;
}

.chat-reactor-score strong {
    font-size: 1.1rem;
    color: #e11d48;
    font-weight: 800;
}

.chat-reaction-keywords {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    background: var(--bg-card, #fff);
}

.chat-reaction-keywords h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.chat-reaction-keywords p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

.chat-reaction-keyword-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-reaction-gauge-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-reaction-gauge-item .chat-gauge-fill {
    background: linear-gradient(90deg, var(--primary-color, #169c91), #f43f5e);
}

.chat-reaction-note {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin: 18px 0 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 태블릿 반응형 (1024px 이하) */
@media (max-width: 1024px) {
    .chat-reaction-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* 모바일 추가 스타일 (768px 이하) */
@media (max-width: 768px) {
    .chat-reaction-metrics {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .chat-reaction-metrics article {
        padding: 12px 16px !important;
    }
    
    .chat-reactor-card {
        padding: 10px 14px !important;
        gap: 10px !important;
    }
    
    .chat-reactor-info strong {
        font-size: 0.88rem !important;
    }
    
    .chat-reactor-score strong {
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   Bait Retrieval Failure Section Styles (미끼 회수 실패 분석)
   ========================================================================== */
.chat-section-accordion.chat-bait-report {
    border-top: 4px solid #06b6d4;
}

.chat-bait-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.chat-bait-metrics.row-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
}

.chat-bait-metrics article {
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--soft-bg, #f8fafc);
}

.chat-bait-metrics article span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.chat-bait-metrics article strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    margin-top: 6px;
    color: var(--text-primary);
}

.chat-bait-metrics article small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.chat-bait-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.chat-bait-ranking {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    background: var(--bg-card, #fff);
}

.chat-bait-ranking header {
    margin-bottom: 18px;
}

.chat-bait-ranking h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.chat-bait-ranking header p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
}

.chat-bait-fairy-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-bait-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-bait-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.chat-bait-card.rank-1 {
    border-color: #06b6d4;
    background: color-mix(in srgb, #06b6d4 4%, var(--bg-card, #fff));
}

.chat-bait-rank {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 900;
}

.rank-1 .chat-bait-rank {
    background: #06b6d4;
    color: #fff;
}

.chat-bait-info {
    flex: 1;
    min-width: 0;
}

.chat-bait-info strong {
    display: block;
    font-size: 0.92rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-bait-info small {
    font-size: 0.72rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 2px;
}

.chat-bait-score {
    text-align: right;
}

.chat-bait-score strong {
    font-size: 1.1rem;
    color: #0891b2;
    font-weight: 800;
}

.chat-bait-score small {
    display: block;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.chat-bait-table-wrapper {
    margin-top: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.chat-bait-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.chat-bait-table th, .chat-bait-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.chat-bait-table th {
    background: var(--soft-bg, #f8fafc);
    font-weight: 800;
    color: var(--text-primary);
}

.chat-bait-table tr:last-child td {
    border-bottom: none;
}

.chat-bait-table td {
    color: var(--text-secondary);
}

.chat-bait-table td strong {
    color: var(--text-primary);
}

.chat-bait-charts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.chat-bait-chart-box {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    background: var(--bg-card, #fff);
    min-height: 260px;
    display: flex;
    flex-direction: column;
}

.chat-bait-chart-box h4 {
    font-size: 0.88rem;
    font-weight: 800;
    margin: 0 0 12px 0;
    color: var(--text-primary);
}

.chat-bait-chart-canvas-wrapper {
    flex: 1;
    position: relative;
    height: 200px;
}

.chat-bait-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--soft-bg, #f8fafc);
    margin-top: 20px;
}

.chat-bait-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.chat-bait-filter-form input, .chat-bait-filter-form select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    font-size: 0.82rem;
    min-width: 160px;
}

.chat-bait-filter-form input[type="search"] {
    flex: 1;
    min-width: 240px;
}

.chat-bait-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.chat-bait-result-badge.is-fail {
    background: #fee2e2;
    color: #b91c1c;
}

.chat-bait-result-badge.is-weak {
    background: #fef3c7;
    color: #b45309;
}

.chat-bait-result-badge.is-success {
    background: #ecfdf5;
    color: #047857;
}

.chat-bait-result-badge.is-explosion {
    background: #ede9fe;
    color: #6d28d9;
}

.chat-bait-funny-box {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-bait-funny-box.is-fail { background: #fef2f2; color: #dc2626; border-left: 4px solid #ef4444; }
.chat-bait-funny-box.is-weak { background: #fffbeb; color: #d97706; border-left: 4px solid #f59e0b; }
.chat-bait-funny-box.is-success { background: #ecfdf5; color: #059669; border-left: 4px solid #10b981; }
.chat-bait-funny-box.is-explosion { background: #f5f3ff; color: #7c3aed; border-left: 4px solid #8b5cf6; }

.chat-bait-privacy-alert {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 6px;
    background: color-mix(in srgb, #06b6d4 8%, transparent);
    border-left: 4px solid #06b6d4;
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.chat-bait-privacy-alert i {
    color: #0891b2;
    margin-right: 6px;
}

/* 태블릿/모바일 반응형 */
@media (max-width: 1024px) {
    .chat-bait-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .chat-bait-charts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .chat-bait-metrics, .chat-bait-metrics.row-2 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .chat-bait-filter-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .chat-bait-filter-form input, .chat-bait-filter-form select {
        width: 100%;
        min-width: unset;
    }
}