/* ============================================================
   DESIGN SYSTEM — 땡피싱 v2
   ============================================================ */
:root {
    /* ── Brand ── */
    --brand-primary: #2563eb;
    --brand-primary-hover: #1d4ed8;
    --brand-primary-light: #dbeafe;
    --brand-primary-50: #eff6ff;
    --brand-secondary: #0ea5e9;
    --brand-accent: #f59e0b;
    --brand-accent-light: #fef3c7;

    /* ── Neutrals ── */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* ── Semantic ── */
    --success: #10b981;
    --success-light: #d1fae5;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --info: #06b6d4;
    --info-light: #cffafe;

    /* ── Level colors ── */
    --level-beginner: #94a3b8;
    --level-intermediate: #3b82f6;
    --level-advanced: #8b5cf6;
    --level-expert: #ec4899;
    --level-master: #f59e0b;
    --level-legend: #ef4444;
    --level-admin: #10b981;

    /* ── Typography ── */
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* ── Spacing ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* ── Radius ── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Shadow ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

    /* ── Layout ── */
    --header-height: 64px;
    --container-max: 1200px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--gray-800);
    background: var(--gray-50);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

html { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
body.drawer-open { overflow: hidden; }
.hidden { display: none !important; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    height: var(--header-height);
}

.header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 800;
    font-size: var(--text-xl);
    color: var(--brand-primary);
    white-space: nowrap;
}

.header-logo-img { width: 36px; height: 36px; border-radius: var(--radius-md); }
.header-logo-img.is-hidden { display: none; }

.header-nav { display: flex; align-items: center; gap: var(--space-1); flex: 1; }
.nav-item { position: relative; }

.header-nav .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-600);
    border-radius: var(--radius-md);
    transition: all 0.15s;
    cursor: pointer;
    border: none;
    background: none;
}

.header-nav .nav-link:hover,
.nav-item.active > .nav-link { color: var(--brand-primary); background: var(--brand-primary-50); }
.header-nav .nav-link .bi-chevron-down { font-size: 10px; transition: transform 0.2s; }
.nav-item:hover .nav-link .bi-chevron-down { transform: rotate(180deg); }

.nav-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
    z-index: 200;
}

.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--gray-600);
    border-radius: var(--radius-md);
    transition: all 0.15s;
}

.nav-dropdown a:hover,
.nav-dropdown a.active { color: var(--brand-primary); background: var(--brand-primary-50); }
.nav-dropdown a i { font-size: var(--text-base); width: 20px; text-align: center; color: var(--gray-400); }
.nav-dropdown a:hover i,
.nav-dropdown a.active i { color: var(--brand-primary); }

.header-right { display: flex; align-items: center; gap: var(--space-3); }

.header-search {
    display: flex;
    align-items: center;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    width: 220px;
    transition: all 0.2s;
    border: none;
}

.header-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--brand-primary); width: 280px; }
.header-search input { border: none; background: transparent; outline: none; font-size: var(--text-sm); width: 100%; color: var(--gray-800); }
.header-search i { color: var(--gray-400); margin-right: var(--space-2); }

.header-profile {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.header-profile:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }

.header-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--brand-primary-light);
    display: flex; align-items: center; justify-content: center;
    color: var(--brand-primary); font-weight: 600; font-size: var(--text-sm);
}

.header-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.header-user-info { display: flex; flex-direction: column; line-height: 1.2; }
.header-user-name { font-size: var(--text-sm); font-weight: 600; color: var(--gray-800); }
.header-user-level { font-size: var(--text-xs); color: var(--brand-primary); font-weight: 500; }
.level-admin-text { color: var(--brand-primary); }

/* ── Profile dropdown ── */
.profile-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
    z-index: 200;
}

.profile-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--gray-600);
    border-radius: var(--radius-md);
    transition: all 0.15s;
}

.profile-dropdown-item:hover { color: var(--brand-primary); background: var(--brand-primary-50); }
.profile-dropdown-divider { height: 1px; background: var(--gray-100); margin: var(--space-1) 0; }

.btn-login-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--brand-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-login-header:hover { background: var(--brand-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Notification icon + dropdown (PC) ── */
.header-noti {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: var(--text-lg);
    color: var(--gray-600);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: color 0.15s, background 0.15s;
}

.header-noti:hover { color: var(--brand-primary); background: var(--gray-50); }

.noti-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 420px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    overflow: hidden;
}

.noti-dropdown.is-open { display: flex; flex-direction: column; }

.noti-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
}

.noti-dropdown-title { font-size: var(--text-base); font-weight: 700; color: var(--gray-900); }

.noti-dropdown-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.noti-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-5);
    color: var(--gray-400);
}

.noti-empty i { font-size: 2rem; }
.noti-empty p { font-size: var(--text-sm); margin: 0; }

/* ── Mobile user badge (header) ── */
.mobile-user-badge {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-200);
    cursor: pointer;
    background: none;
    color: inherit;
    font-family: inherit;
    transition: all 0.15s;
}

.mobile-user-badge:hover { border-color: var(--gray-300); background: var(--gray-50); }

.mobile-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-weight: 600;
    font-size: var(--text-xs);
}

.mobile-user-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.mobile-user-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-700);
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   POST DETAIL — LAYOUT
   ============================================================ */
.detail-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

/* ── Breadcrumb ── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--gray-400);
    margin-bottom: var(--space-6);
    padding: 0;
    background: none;
}

.breadcrumb a { color: var(--gray-500); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--brand-primary); }
.breadcrumb-sep { font-size: var(--text-xs); }

/* ── Post article card ── */
.post-article {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* ── Post head ── */
.post-head {
    padding: var(--space-8) var(--space-8) var(--space-5);
}

.post-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.badge-board {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    background: var(--brand-primary-50);
    color: var(--brand-primary);
}

.badge-notice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: var(--radius-full);
    background: var(--danger-light);
    color: var(--danger);
}

.badge-event-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: var(--radius-full);
}

.badge-event-status.active { background: var(--success-light); color: var(--success); }
.badge-event-status.ended { background: var(--gray-100); color: var(--gray-500); }

.badge-inactive {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: var(--radius-full);
    background: #fff3cd;
    color: #856404;
}

.badge-blind {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--gray-500);
}

.badge-top {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: var(--radius-full);
    background: var(--warning-light);
    color: var(--warning);
}

.post-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.4;
    margin-bottom: var(--space-5);
    word-break: break-word;
}

.post-author-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.post-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.author-avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.author-avatar-initial {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: 600;
    background: var(--gray-100);
    color: var(--gray-500);
}

.author-avatar-initial.admin { background: var(--success-light); color: var(--success); }
.author-avatar-initial.level-beginner { background: var(--gray-100); color: var(--gray-500); }
.author-avatar-initial.level-intermediate { background: var(--brand-primary-light); color: var(--brand-primary); }
.author-avatar-initial.level-advanced { background: #ede9fe; color: #8b5cf6; }
.author-avatar-initial.level-expert { background: #fce7f3; color: #ec4899; }
.author-avatar-initial.level-master { background: var(--warning-light); color: var(--warning); }
.author-avatar-initial.level-legend { background: var(--danger-light); color: var(--danger); }

.author-info { display: flex; flex-direction: column; }

.author-name-row { display: flex; align-items: center; gap: var(--space-2); }

.author-name { font-size: var(--text-sm); font-weight: 600; color: var(--gray-800); }
.author-name[data-user-id] { cursor: pointer; }
.author-name[data-user-id]:hover { color: var(--brand-primary); }

.author-level {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 1px 6px;
    border-radius: var(--radius-full);
}

.author-level.admin { background: var(--success-light); color: var(--success); }
.author-level.beginner { background: var(--gray-100); color: var(--gray-500); }
.author-level.intermediate { background: var(--brand-primary-light); color: var(--brand-primary); }
.author-level.advanced { background: #ede9fe; color: #8b5cf6; }
.author-level.expert { background: #fce7f3; color: #ec4899; }
.author-level.master { background: var(--warning-light); color: var(--warning); }
.author-level.legend { background: var(--danger-light); color: var(--danger); }

.author-date { font-size: var(--text-xs); color: var(--gray-400); }

.post-edited-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    color: var(--brand-primary);
    background: var(--brand-primary-50);
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
    cursor: default;
}

.post-stats-inline {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--gray-400);
}

.post-stat-item { display: flex; align-items: center; gap: var(--space-1); }

/* ── Event period bar ── */
.event-period-bar {
    margin: 0 var(--space-8);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--warning-light) 0%, #fff7ed 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.period-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--gray-700);
    font-weight: 500;
}

.period-info i { color: var(--warning); font-size: var(--text-lg); }

.period-dday {
    padding: var(--space-1) var(--space-4);
    background: var(--danger);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    border-radius: var(--radius-full);
}

/* ── Post body / content ── */
.post-body {
    padding: var(--space-8);
    border-top: 1px solid var(--gray-100);
    overflow: hidden;
    min-width: 0;
}

.post-content {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--gray-700);
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    max-width: 100%;
}

.post-content p { margin-bottom: var(--space-5); }
.post-content h2 { font-size: var(--text-xl); font-weight: 700; color: var(--gray-900); margin: var(--space-8) 0 var(--space-4); }
.post-content h3 { font-size: var(--text-lg); font-weight: 700; color: var(--gray-900); margin: var(--space-6) 0 var(--space-3); }

.post-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    border-radius: var(--radius-lg);
    margin: var(--space-4) 0;
    display: block;
    box-sizing: border-box;
}

.post-content blockquote {
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--brand-primary);
    background: var(--brand-primary-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--gray-600);
    font-style: italic;
}

.post-content ul, .post-content ol { margin: var(--space-4) 0; padding-left: var(--space-6); }
.post-content li { margin-bottom: var(--space-2); list-style: disc; }
.post-content ol li { list-style: decimal; }
.post-content a { color: var(--brand-primary); text-decoration: underline; }
.post-content a:hover { color: var(--brand-primary-hover); }
.post-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-content pre { overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: var(--text-sm); }
.post-content iframe, .post-content video { max-width: 100%; width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: var(--radius-md); }

/* ── Blind post content ── */
.post-content-blind {
    padding: var(--space-8);
    border-top: 1px solid var(--gray-100);
}

.post-content-blind .blind-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-10);
    text-align: center;
    color: var(--gray-500);
}

.post-content-blind .blind-notice i { font-size: 2rem; color: var(--gray-400); }
.post-content-blind .blind-notice h3 { font-size: var(--text-lg); font-weight: 600; color: var(--gray-700); margin: 0; }

.post-content-blind .blind-reason {
    font-size: var(--text-sm);
    color: var(--gray-400);
    font-style: italic;
}

.btn-show-blind-content {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-5);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-show-blind-content:hover { background: var(--gray-200); color: var(--gray-800); }

.post-content-hidden { padding: var(--space-5) 0; }

/* ── Vote section ── */
.vote-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
    border-top: 1px solid var(--gray-100);
}

.vote-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-200);
    background: #fff;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all 0.2s;
    min-width: 100px;
    justify-content: center;
    font-family: inherit;
}

.vote-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.vote-btn.like { color: var(--brand-primary); }
.vote-btn.like:hover { background: var(--brand-primary-50); border-color: var(--brand-primary); }
.vote-btn.like.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

.vote-btn.dislike { color: var(--gray-500); }
.vote-btn.dislike:hover { background: var(--gray-50); border-color: var(--gray-400); }
.vote-btn.dislike.active { background: var(--gray-600); color: #fff; border-color: var(--gray-600); }

.vote-btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.vote-btn.active:disabled { opacity: 1; pointer-events: none; }

.vote-count { font-weight: 700; }

/* ── Author actions ── */
.author-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 0 var(--space-8) var(--space-5);
    flex-wrap: wrap;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--gray-500);
    background: none;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.action-btn:hover { color: var(--gray-700); border-color: var(--gray-300); background: var(--gray-50); }
.action-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-light); }
.action-btn.edit-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); background: var(--brand-primary-50); }
.action-btn.blind-btn:hover { color: var(--gray-600); border-color: var(--gray-400); background: var(--gray-100); }
.action-btn.unblind-btn:hover { color: var(--info); border-color: var(--info); background: var(--info-light); }

/* ============================================================
   POST NAVIGATION
   ============================================================ */
.post-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.nav-prev, .nav-next, .nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.15s;
    cursor: pointer;
    min-width: 0;
    color: inherit;
}

.nav-prev:hover, .nav-next:hover, .nav-list:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-sm);
}

.nav-prev { justify-content: flex-start; }
.nav-next { justify-content: flex-end; text-align: right; }
.nav-list { justify-content: center; }

.nav-label { font-size: var(--text-xs); color: var(--gray-400); font-weight: 500; }

.nav-title-text {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-info { min-width: 0; flex: 1; }
.nav-icon { color: var(--gray-400); flex-shrink: 0; }
.nav-disabled { opacity: 0.4; pointer-events: none; }

/* ============================================================
   COMMENTS SECTION
   ============================================================ */
.comments-section {
    margin-top: var(--space-6);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
}

.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-8);
    border-bottom: 1px solid var(--gray-100);
}

.comments-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.comments-count { font-size: var(--text-sm); color: var(--brand-primary); font-weight: 700; }

/* ── Best comments ── */
.best-comments-section {
    border-bottom: 1px solid var(--gray-100);
}

.best-comment-item {
    padding: var(--space-5) var(--space-8);
    background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%);
    border-bottom: 1px solid var(--gray-100);
    position: relative;
}

.best-comment-item:last-child { border-bottom: 1px solid var(--gray-100); }

.best-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--warning);
    margin-bottom: var(--space-3);
}

.best-comment-content {
    display: flex;
    gap: var(--space-3);
}

.best-comment-author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.best-comment-author .comment-avatar-img,
.best-comment-author .comment-avatar-initial { flex-shrink: 0; }
.best-comment-author .comment-name { font-size: var(--text-sm); font-weight: 600; }
.best-comment-author .comment-time { font-size: var(--text-xs); color: var(--gray-400); margin-left: var(--space-2); }

.best-comment-text {
    font-size: var(--text-sm);
    color: var(--gray-700);
    line-height: 1.7;
}

.best-comment-likes {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--brand-primary);
    font-weight: 600;
    margin-top: var(--space-2);
}

.go-to-comment-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    color: var(--gray-400);
    background: none;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    margin-top: var(--space-2);
}

.go-to-comment-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); }

/* ── Comment items ── */
.comment-item {
    padding: var(--space-5) var(--space-8);
    border-bottom: 1px solid var(--gray-100);
    position: relative;
}

.comment-item:last-child { border-bottom: none; }

.comment-item.best-comment { background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%); }

.comment-best-indicator { margin-bottom: var(--space-2); }

.best-ribbon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--warning);
    background: var(--warning-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* ── Comment depth styles ── */
.comment-item[data-depth="1"] { padding-left: calc(var(--space-5) + 20px); background: var(--gray-50); }
.comment-item[data-depth="2"] { padding-left: calc(var(--space-5) + 36px); background: rgba(241, 245, 249, 0.8); }
.comment-item[data-depth="3"] { padding-left: calc(var(--space-5) + 48px); background: rgba(241, 245, 249, 0.6); }
.comment-item[data-depth="4"] { padding-left: calc(var(--space-5) + 56px); background: rgba(241, 245, 249, 0.5); }
.comment-item[data-depth="5"] { padding-left: calc(var(--space-5) + 64px); background: rgba(241, 245, 249, 0.4); }

/* ── Comment top (author + meta) ── */
.comment-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.reply-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--gray-400);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.comment-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.comment-avatar-initial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--gray-100);
    color: var(--gray-500);
}

.comment-avatar-initial.admin { background: var(--success-light); color: var(--success); }
.comment-avatar-initial.level-beginner { background: var(--gray-100); color: var(--gray-500); }
.comment-avatar-initial.level-intermediate { background: var(--brand-primary-light); color: var(--brand-primary); }
.comment-avatar-initial.level-advanced { background: #ede9fe; color: #8b5cf6; }
.comment-avatar-initial.level-expert { background: #fce7f3; color: #ec4899; }
.comment-avatar-initial.level-master { background: var(--warning-light); color: var(--warning); }
.comment-avatar-initial.level-legend { background: var(--danger-light); color: var(--danger); }

.comment-author-info { display: flex; flex-direction: column; min-width: 0; }

.comment-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.comment-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.comment-name.admin { color: var(--success); }
.comment-name.deleted { color: var(--gray-400); }

.comment-author-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--brand-primary-light);
    color: var(--brand-primary);
}

.comment-author-badge.admin-badge {
    background: var(--warning);
    color: #fff;
}

.comment-level {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: var(--radius-full);
}

.comment-level.admin { background: var(--success-light); color: var(--success); }
.comment-level.beginner { background: var(--gray-100); color: var(--gray-500); }
.comment-level.intermediate { background: var(--brand-primary-light); color: var(--brand-primary); }
.comment-level.advanced { background: #ede9fe; color: #8b5cf6; }
.comment-level.expert { background: #fce7f3; color: #ec4899; }
.comment-level.master { background: var(--warning-light); color: var(--warning); }
.comment-level.legend { background: var(--danger-light); color: var(--danger); }

.edited-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    color: var(--gray-500);
}

.user-grade {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.user-grade i { font-size: 9px; }

.grade-gold { background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%); color: #b8860b; }
.grade-silver { background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%); color: #696969; }
.grade-bronze { background: linear-gradient(135deg, #cd7f32 0%, #a0522d 100%); color: #654321; }

.comment-time { font-size: var(--text-xs); color: var(--gray-400); }

/* ── Comment right side (votes) ── */
.comment-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.comment-vote-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    color: var(--gray-400);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    font-family: inherit;
}

.comment-vote-btn:hover { background: var(--gray-100); }
.comment-vote-btn.liked,
.comment-vote-btn.active { color: var(--brand-primary); }
.comment-vote-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.comment-vote-btn.active:disabled { opacity: 1; }

/* ── Comment text / images ── */
.comment-text {
    font-size: var(--text-sm);
    color: var(--gray-700);
    line-height: 1.7;
    word-break: break-word;
}

.comment-text .reply-to {
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 13px;
    margin-right: 4px;
    cursor: default;
}

.comment-text img {
    max-width: 300px;
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
}

.comment-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.comment-image-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.comment-image {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    cursor: pointer;
    object-fit: cover;
}

/* ── Comment bottom (actions) ── */
.comment-bottom {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.comment-action-btn {
    font-size: var(--text-xs);
    color: var(--gray-400);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}

.comment-action-btn:hover { color: var(--gray-600); background: var(--gray-100); }
.comment-action-btn.danger:hover { color: var(--danger); background: var(--danger-light); }
.comment-action-btn .bi-reply { display: inline-block; transform: scale(-1, -1); }

/* ── Comment vote mobile ── */
.comment-vote-mobile {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* ── No comments ── */
.no-comments {
    padding: var(--space-10) var(--space-8);
    text-align: center;
    color: var(--gray-400);
}

.no-comments p { margin: 0; }
.no-comments i { font-size: 1.5rem; margin-bottom: var(--space-2); display: block; }

.comments-disabled {
    margin-top: var(--space-6);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
}

.disabled-notice {
    text-align: center;
    padding: var(--space-10) var(--space-8);
    color: var(--gray-400);
}

.disabled-notice i { font-size: 1.5rem; margin-bottom: var(--space-2); display: block; }

/* ── Deleted / blind comments ── */
.deleted-comment-wrapper {
    background: var(--gray-50);
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}

.deleted-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--gray-500);
    font-size: var(--text-sm);
}

.deleted-notice i { color: var(--gray-400); }
.deleted-text { color: var(--gray-400); }

.blind-comment-wrapper {
    border-radius: var(--radius-md);
    padding: var(--space-4);
    position: relative;
}

.blind-comment-wrapper.dislike-blind {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.blind-comment-wrapper.admin-blind {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.blind-notice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-500);
    font-size: var(--text-sm);
}

.blind-notice i { font-size: var(--text-base); }
.dislike-blind .blind-notice i { color: var(--warning); }
.admin-blind .blind-notice i { color: var(--gray-500); }

.view-blind-btn, .hide-blind-btn {
    margin-left: auto;
    padding: var(--space-1) var(--space-3);
    background: transparent;
    color: var(--gray-500);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-blind-btn:hover, .hide-blind-btn:hover { background: var(--gray-100); color: var(--gray-700); }

.blind-content {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: rgba(255,255,255,0.7);
    border-radius: var(--radius-md);
    border-top: 1px solid var(--gray-200);
}

/* ── Comment write section ── */
.comment-write-section {
    padding: var(--space-5) var(--space-8);
    border-top: 2px solid var(--gray-100);
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.comment-input-wrap {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.comment-input-wrap:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-light);
}

.comment-textarea,
.comment-input {
    width: 100%;
    min-height: 100px;
    padding: var(--space-4);
    border: none;
    resize: none;
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: 1.6;
    outline: none;
    background: transparent;
    color: var(--gray-800);
}

.comment-textarea::placeholder,
.comment-input::placeholder {
    color: var(--gray-400);
}

.comment-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}

.comment-tools { display: flex; align-items: center; gap: var(--space-3); }

.image-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.15s;
    font-size: var(--text-sm);
    position: relative;
    overflow: hidden;
}

.image-upload-btn:hover { background: var(--gray-50); color: var(--brand-primary); border-color: var(--brand-primary); }

.image-upload-btn input[type="file"] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.comment-submit {
    padding: var(--space-2) var(--space-5);
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
}

.comment-submit:hover { background: var(--brand-primary-hover); }
.comment-submit:disabled { background: var(--gray-300); cursor: not-allowed; }

/* ── Image preview ── */
.image-preview-container {
    padding: var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.image-preview-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.image-preview-item {
    position: relative;
    display: inline-block;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.image-preview-img { width: 120px; height: 120px; object-fit: cover; display: block; }

.image-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.image-remove-btn:hover { background: var(--danger); }

/* ── Login required ── */
.login-required {
    padding: var(--space-8);
    text-align: center;
    color: var(--gray-400);
}

.login-required p { margin: 0; }

.login-link { color: var(--brand-primary); font-weight: 600; }
.login-link:hover { text-decoration: underline; }

/* ============================================================
   REPLY FORM
   ============================================================ */
.reply-form-container {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    animation: slideDown 0.3s ease-out;
}

.reply-form-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--gray-500);
    font-weight: 500;
}

.reply-form-header i { color: var(--brand-primary); }

.reply-input-group { position: relative; }

.reply-textarea {
    width: 100%;
    min-height: 80px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    resize: none;
    background: white;
    transition: border-color 0.15s;
    font-family: inherit;
    outline: none;
}

.reply-textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-light); }

.reply-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
}

.reply-tools { display: flex; align-items: center; gap: var(--space-3); }

.reply-image-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: white;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: all 0.15s;
    color: var(--gray-500);
    font-size: var(--text-sm);
    position: relative;
    overflow: hidden;
}

.reply-image-upload-btn:hover { background: var(--gray-50); border-color: var(--brand-primary); color: var(--brand-primary); }
.reply-image-upload-btn .upload-text { font-size: var(--text-xs); }
.reply-image-upload-btn input[type="file"] { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.reply-buttons { display: flex; gap: var(--space-2); }
.reply-buttons .btn { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

.reply-image-preview-container { margin-top: var(--space-3); }

.reply-image-preview {
    position: relative;
    display: inline-block;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.reply-image-preview .preview-image { max-width: 200px; max-height: 150px; display: block; }

.reply-image-preview .remove-image-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.reply-image-preview .remove-image-btn:hover { background: rgba(0, 0, 0, 0.8); }

/* ============================================================
   EDIT FORM
   ============================================================ */
.edit-form-container {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--warning-light);
    border-radius: var(--radius-lg);
    border: 1px solid #fde68a;
    animation: slideDown 0.3s ease-out;
}

.edit-form-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: #92400e;
    font-weight: 500;
}

.edit-form-header i { color: var(--warning); }

.edit-input-group { position: relative; }

.edit-textarea {
    width: 100%;
    min-height: 80px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid #fbbf24;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    resize: none;
    background: white;
    transition: border-color 0.15s;
    font-family: inherit;
    outline: none;
}

.edit-textarea:focus { border-color: var(--warning); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2); }

.edit-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
}

.edit-tools { display: flex; align-items: center; }

.edit-image-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.15s;
    font-size: var(--text-xs);
    position: relative;
}

.edit-image-upload-btn:hover { background: var(--gray-50); color: var(--brand-primary); border-color: var(--brand-primary); }
.edit-image-upload-btn input[type="file"] { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.edit-buttons { display: flex; gap: var(--space-2); }
.edit-buttons .btn { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

.edit-existing-images {
    margin: var(--space-2) 0;
    padding: var(--space-2);
    background: rgba(255,255,255,0.7);
    border-radius: var(--radius-sm);
}

.existing-image-label { font-size: var(--text-xs); color: var(--gray-500); margin-bottom: var(--space-1); }

.existing-image-item {
    position: relative;
    display: inline-block;
    margin-right: var(--space-2);
}

.existing-image { max-width: 150px; max-height: 100px; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); }

.remove-existing-image-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.remove-existing-image-btn:hover { background: #dc2626; }

.edit-image-preview-container { margin-top: var(--space-2); }

.edit-image-preview {
    position: relative;
    display: inline-block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.edit-image-preview .preview-image { max-width: 150px; max-height: 100px; display: block; }

.remove-new-image-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.remove-new-image-btn:hover { background: rgba(0, 0, 0, 0.8); }

/* ============================================================
   REPORT MODAL
   ============================================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    overflow: auto;
}

.modal.show {
    display: block;
    background-color: rgba(0,0,0,0.5);
}

.modal-dialog {
    position: relative;
    margin: 50px auto;
    max-width: 500px;
    animation: slideDown 0.3s ease;
    padding: 0 var(--space-4);
}

.modal-content {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h5 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-900);
}

.modal-header .close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all 0.15s;
}

.modal-header .close:hover { color: var(--gray-700); background: var(--gray-100); }

.modal-body { padding: var(--space-5); }

.report-target {
    background: var(--gray-50);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; margin-bottom: var(--space-2); font-weight: 600; font-size: var(--text-sm); color: var(--gray-700); }
.form-group .required { color: var(--danger); }

.form-control {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-light); }

.form-group small { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--gray-400); text-align: right; }

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.alert-warning { background: var(--warning-light); border: 1px solid #fde68a; color: #92400e; }

.modal-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--gray-100);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.btn {
    padding: var(--space-2) var(--space-5);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-secondary { background: var(--gray-100); color: var(--gray-600); }
.btn-secondary:hover { background: var(--gray-200); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-primary { background: var(--brand-primary); color: white; }
.btn-primary:hover { background: var(--brand-primary-hover); }

.modal--open { overflow: hidden; }

/* ============================================================
   USER CONTEXT MENU
   ============================================================ */
.user-context-menu {
    position: fixed;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    min-width: 200px;
    display: none;
}

.user-context-menu.show { display: block; animation: fadeIn 0.2s ease; }

.context-menu-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.context-avatar-container { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.context-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.context-avatar-icon { font-size: 32px; color: var(--gray-400); }
.context-nickname { font-weight: 600; font-size: var(--text-sm); }

.context-menu-list { list-style: none; margin: 0; padding: var(--space-2) 0; }

.context-menu-list li {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    transition: background 0.15s;
}

.context-menu-list li:hover { background: var(--gray-50); }

.context-menu-list li.divider {
    height: 1px;
    background: var(--gray-100);
    margin: var(--space-2) 0;
    padding: 0;
    cursor: default;
}

.context-menu-list li.divider:hover { background: var(--gray-100); }
.context-menu-list li.danger { color: var(--danger); }
.context-menu-list li.danger:hover { background: var(--danger-light); }

/* ============================================================
   NOTIFICATION TOAST
   ============================================================ */
.notification-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 10001;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    color: white;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.notification-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.notification-toast.success { background: var(--success); }
.notification-toast.error { background: var(--danger); }
.notification-toast.warning { background: var(--warning); color: var(--gray-800); }
.notification-toast.info { background: var(--info); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--gray-800);
    color: var(--gray-400);
    padding: var(--space-6) 0;
    margin-top: auto;
    font-size: var(--text-xs);
}

.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-700);
    gap: var(--space-6);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.footer-phone {
    font-size: var(--text-sm);
    font-weight: 700;
    color: #fff;
}

.footer-hours {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-4);
}

.footer-nav a {
    font-size: var(--text-xs);
    color: var(--gray-400);
    transition: color 0.15s;
    white-space: nowrap;
}

.footer-nav a:hover { color: #fff; }

/* ── Comment hash highlight ── */
.comment-highlight {
    animation: commentHighlight 2s ease;
}

@keyframes commentHighlight {
    0%, 30% {
        background-color: var(--brand-accent-light);
        box-shadow: 0 0 0 3px var(--brand-accent);
        transform: scale(1.01);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
        transform: scale(1);
    }
}

.footer-social {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.footer-social a {
    display: flex;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.footer-social a:hover { opacity: 1; }

.footer-social-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.footer-bottom { padding-top: var(--space-4); }

.footer-business-info {
    line-height: 1.8;
    margin-bottom: var(--space-1);
}

.footer-biz-link { color: var(--brand-primary-light); }
.footer-biz-link:hover { color: #fff; }

.footer-copyright { color: var(--gray-500); }

/* ============================================================
   HAMBURGER BUTTON
   ============================================================ */
.hamburger-btn {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-md);
    transition: background 0.15s;
}

.hamburger-btn:hover { background: var(--gray-100); }

.hamburger-btn .bar {
    display: block; width: 20px; height: 2px;
    background: var(--gray-700); border-radius: 2px;
    transition: all 0.3s; position: relative;
}

.hamburger-btn .bar::before,
.hamburger-btn .bar::after {
    content: ''; position: absolute; left: 0; width: 100%; height: 2px;
    background: var(--gray-700); border-radius: 2px; transition: all 0.3s;
}

.hamburger-btn .bar::before { top: -6px; }
.hamburger-btn .bar::after { top: 6px; }
.hamburger-btn.is-active .bar { background: transparent; }
.hamburger-btn.is-active .bar::before { top: 0; transform: rotate(45deg); }
.hamburger-btn.is-active .bar::after { top: 0; transform: rotate(-45deg); }

/* ============================================================
   MOBILE: SIDE DRAWER
   ============================================================ */
.mobile-drawer-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 300;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}

.mobile-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.mobile-drawer {
    position: fixed; top: 0; right: 0;
    width: 300px; max-width: 85vw; height: 100%;
    background: #fff; z-index: 301;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.mobile-drawer.is-open { transform: translateX(0); }

.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--gray-200); }
.drawer-user { display: flex; align-items: center; gap: var(--space-3); }
.drawer-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary-light); display: flex; align-items: center; justify-content: center; color: var(--brand-primary); font-weight: 700; font-size: var(--text-sm); }
.drawer-user-name { font-size: var(--text-sm); font-weight: 600; color: var(--gray-800); }
.drawer-user-level { font-size: var(--text-xs); color: var(--brand-primary); font-weight: 500; }
.drawer-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; border-radius: var(--radius-md); color: var(--gray-500); font-size: var(--text-lg); }
.drawer-close:hover { background: var(--gray-100); }
.drawer-nav { flex: 1; padding: var(--space-3); }
.drawer-section { margin-bottom: var(--space-2); }
.drawer-section-title { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.05em; }
.drawer-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); font-size: var(--text-sm); font-weight: 500; color: var(--gray-700); border-radius: var(--radius-md); transition: all 0.15s; min-height: 44px; }
.drawer-link:hover, .drawer-link.active { color: var(--brand-primary); background: var(--brand-primary-50); }
.drawer-link i { width: 20px; text-align: center; color: var(--gray-400); font-size: var(--text-base); }
.drawer-link:hover i, .drawer-link.active i { color: var(--brand-primary); }
.drawer-divider { height: 1px; background: var(--gray-100); margin: var(--space-2) var(--space-3); }
.drawer-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--gray-200); }
.drawer-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.drawer-footer-links a { font-size: var(--text-xs); color: var(--gray-400); }

/* ============================================================
   MOBILE: NOTIFICATION & SEARCH
   ============================================================ */
.mobile-noti-btn {
    display: none; width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--gray-600); font-size: var(--text-lg);
    border-radius: var(--radius-md); position: relative;
}

.mobile-noti-btn:hover { color: var(--gray-800); }
.mobile-noti-dropdown { display: none; }

.mobile-search-btn {
    display: none; width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--gray-600); font-size: var(--text-lg);
    border-radius: var(--radius-md);
}

.mobile-search-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0;
    background: #fff; z-index: 250;
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-search-overlay.is-open { transform: translateY(0); pointer-events: auto; }
.mobile-search-inner { display: flex; align-items: center; gap: var(--space-3); }

.mobile-search-input {
    flex: 1; height: 44px;
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    padding: 0 var(--space-4); font-size: var(--text-base);
    outline: none; font-family: inherit;
}

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

.mobile-search-cancel {
    padding: var(--space-2) var(--space-3);
    background: none; border: none;
    font-size: var(--text-sm); font-weight: 500;
    color: var(--gray-600); cursor: pointer;
    white-space: nowrap; min-height: 44px;
}

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE — TABLET (1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .header-nav { display: none; }
    .header-search { display: none; }
    .header-profile { display: none; }
    .header-noti { display: none; }
    .btn-login-header { display: none; }
    .profile-dropdown { display: none; }
    .noti-dropdown { display: none !important; }
    .hamburger-btn { display: flex; }
    .mobile-noti-btn { display: flex; }
    .mobile-search-btn { display: flex; }
    .mobile-search-overlay { display: block; }
    .mobile-drawer-overlay { display: block; }
    .header-logo-text { display: none; }
    .mobile-user-badge { display: flex; }

    .mobile-noti-dropdown {
        display: none;
        position: fixed;
        top: 60px;
        left: var(--space-3);
        right: var(--space-3);
        max-height: 420px;
        z-index: 1100;
        background: #fff;
        flex-direction: column;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--gray-200);
        overflow: hidden;
        animation: notiSlideDown 0.2s ease;
    }
    .mobile-noti-dropdown.is-open { display: flex; }

    @keyframes notiSlideDown {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .mobile-noti-dropdown .noti-dropdown-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--gray-100);
    }

    .mobile-noti-dropdown .noti-dropdown-body {
        flex: 1; overflow-y: auto; overscroll-behavior: contain;
    }

    .header-inner { gap: var(--space-2); }
    .header-logo { font-size: var(--text-lg); }
    .header-logo-img { width: 30px; height: 30px; }

    .detail-container { padding: var(--space-6) var(--space-5); }
}

/* ============================================================
   RESPONSIVE — MOBILE (768px)
   ============================================================ */
@media (max-width: 768px) {
    .detail-container { padding: var(--space-4) var(--space-3); }
    .post-head { padding: var(--space-5) var(--space-5) var(--space-4); }
    .post-title { font-size: var(--text-xl); }
    .post-author-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .post-body { padding: var(--space-5); }
    .post-content { font-size: var(--text-sm); }
    .post-content-blind { padding: var(--space-5); }
    .vote-section { padding: var(--space-6) var(--space-5); }
    .event-period-bar { margin: 0 var(--space-5); }
    .author-actions { padding: 0 var(--space-5) var(--space-4); flex-wrap: wrap; }

    .post-navigation { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .nav-list { order: -1; grid-column: 1 / -1; padding: var(--space-3); }
    .nav-prev, .nav-next { padding: var(--space-3) var(--space-4); }
    .nav-title-text { font-size: var(--text-xs); }

    .comments-header { padding: var(--space-4) var(--space-5); }
    .comment-item { padding: var(--space-4) var(--space-5); }
    .comment-item[data-depth="1"] { padding-left: calc(var(--space-4) + 16px); }
    .comment-item[data-depth="2"] { padding-left: calc(var(--space-4) + 28px); }
    .comment-item[data-depth="3"] { padding-left: calc(var(--space-4) + 36px); }
    .comment-item[data-depth="4"],
    .comment-item[data-depth="5"] { padding-left: calc(var(--space-4) + 42px); }
    .comment-write-section { padding: var(--space-4) var(--space-5); }
    .best-comment-item { padding: var(--space-4) var(--space-5); }
    .comment-input-wrap { flex-direction: column; }
    .comment-submit { align-self: flex-end; }

    .comment-right { display: none; }
    .comment-vote-mobile { display: flex; }

    .reply-form-container { padding: var(--space-3); }
    .reply-form-actions { flex-direction: column; gap: var(--space-2); align-items: stretch; }
    .reply-buttons { justify-content: flex-end; }

    .edit-form-container { padding: var(--space-3); }
    .edit-form-actions { flex-direction: column; gap: var(--space-2); align-items: stretch; }
    .edit-buttons { justify-content: flex-end; }

    .footer-top { flex-direction: column; align-items: center; gap: var(--space-4); }
    .footer-contact { align-items: center; }
    .footer-nav { justify-content: center; }

    .comment-image { max-width: 150px; max-height: 150px; }
    .comment-text img { max-width: 100%; }
    .image-preview-img { width: 80px; height: 80px; }

    .post-content img { max-height: 60vh; }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (480px)
   ============================================================ */
@media (max-width: 480px) {
    .detail-container { padding: var(--space-3) var(--space-2); }
    .post-head { padding: var(--space-4); }
    .post-title { font-size: var(--text-lg); }
    .post-body { padding: var(--space-4); }
    .post-content { font-size: var(--text-sm); }
    .post-content-blind { padding: var(--space-4); }
    .vote-section { padding: var(--space-5) var(--space-4); gap: var(--space-2); }
    .vote-btn { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); min-width: 80px; }
    .event-period-bar { margin: 0 var(--space-4); padding: var(--space-3); flex-direction: column; align-items: flex-start; }
    .author-actions { padding: 0 var(--space-4) var(--space-3); }

    .comment-item { padding: var(--space-3) var(--space-4); }
    .comment-item[data-depth="1"] { padding-left: calc(var(--space-3) + 10px); }
    .comment-item[data-depth="2"] { padding-left: calc(var(--space-3) + 18px); }
    .comment-item[data-depth="3"],
    .comment-item[data-depth="4"],
    .comment-item[data-depth="5"] { padding-left: calc(var(--space-3) + 24px); }
    .comment-write-section { padding: var(--space-3) var(--space-4); }
    .best-comment-item { padding: var(--space-3) var(--space-4); }
    .comments-header { padding: var(--space-3) var(--space-4); }
    .breadcrumb { font-size: var(--text-xs); }

    .footer-top { text-align: center; align-items: center; }
    .footer-nav { justify-content: center; }
    .footer-bottom { text-align: center; }

    .comment-avatar-img,
    .comment-avatar-initial { width: 30px; height: 30px; font-size: 10px; }
    .author-avatar,
    .author-avatar-img,
    .author-avatar-initial { width: 36px; height: 36px; }

    .post-content img { max-height: 50vh; max-width: 100% !important; }
    .comment-image { max-width: 120px; max-height: 120px; }
}