/* ============================================================
   HAEBAN — 해외 네티즌 반응 커뮤니티 Design System
   ============================================================ */
:root {
    --font: 'Noto Sans KR', 'Malgun Gothic', sans-serif;

    /* Brand */
    --brand:         #0f172a;
    --brand-accent:  #38bdf8;

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

    /* Primary (interactive) */
    --primary:       #0ea5e9;
    --primary-hover: #0284c7;
    --primary-light: #e0f2fe;

    /* Hot */
    --hot:           #f43f5e;
    --hot-light:     #fff1f2;

    /* Text */
    --text-1:        #0f172a;
    --text-2:        #334155;
    --text-3:        #64748b;
    --text-4:        #94a3b8;

    /* Borders */
    --border:        #e2e8f0;
    --border-dark:   #cbd5e1;

    /* Shadow */
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
    --shadow:        0 2px 10px rgba(0,0,0,0.08);
    --shadow-md:     0 8px 30px rgba(0,0,0,0.14);
    --shadow-lg:     0 20px 60px rgba(0,0,0,0.18);

    /* Radius */
    --radius:        12px;
    --radius-sm:     8px;
    --radius-xs:     4px;
}

/* Dark mode */
[data-theme="dark"] {
    --brand:         #0f172a;
    --brand-accent:  #38bdf8;
    --bg:            #0f172a;
    --surface:       #1e293b;
    --surface-2:     #1a2332;
    --primary:       #38bdf8;
    --primary-hover: #0ea5e9;
    --primary-light: rgba(56,189,248,0.12);
    --hot:           #fb7185;
    --hot-light:     rgba(251,113,133,0.12);
    --text-1:        #f1f5f9;
    --text-2:        #cbd5e1;
    --text-3:        #94a3b8;
    --text-4:        #64748b;
    --border:        #334155;
    --border-dark:   #475569;
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.2);
    --shadow:        0 2px 10px rgba(0,0,0,0.3);
    --shadow-md:     0 8px 30px rgba(0,0,0,0.4);
    --shadow-lg:     0 20px 60px rgba(0,0,0,0.5);
}

[data-theme="dark"] .article-cmt-reply { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .board-item:hover { background: rgba(56,189,248,0.06); }
[data-theme="dark"] .social-btn { background: var(--surface); color: var(--text-1); border-color: var(--border); }
[data-theme="dark"] .social-btn:hover { background: var(--surface-2); }
[data-theme="dark"] .form-group input { background: var(--surface-2); color: var(--text-1); border-color: var(--border); }
[data-theme="dark"] .bpost-row:hover { background: rgba(56,189,248,0.06); }
[data-theme="dark"] .bhot-section { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); }
[data-theme="dark"] .bhot-label { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.2); color: #fbbf24; }
[data-theme="dark"] .bhot-item { border-color: rgba(245,158,11,0.15); }
[data-theme="dark"] .bhot-item:hover { background: rgba(245,158,11,0.1); }
[data-theme="dark"] .bboard-search select,
[data-theme="dark"] .bboard-search input { background: var(--surface); color: var(--text-1); border-color: var(--border); }
[data-theme="dark"] .edit-profile-form { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .edit-profile-form input { background: var(--surface); color: var(--text-1); border-color: var(--border); }

/* Dark mode toggle */
.theme-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.7);
    transition: background 0.15s, color 0.15s;
    font-size: 16px;
    flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: clamp(14px, 3.2vw, 16px); scroll-behavior: smooth; overflow-x: clip; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text-2);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;          /* flex item 수축 허용 - 긴 컨텐츠로 인한 가로 오버플로우 방지 */
    overflow-x: clip;      /* 안전망: 어떤 경우에도 가로 스크롤 차단 */
    -webkit-font-smoothing: antialiased;
}

/* flex-column body의 페이지 래퍼들이 긴 컨텐츠로 확장되지 않게 수축 허용 */
.article-wrap, .layout, .bwrite-wrap, .bpost-wrap,
.mypage, .legal-page, .error-page {
    min-width: 0;
    width: 100%;            /* flex align-items:stretch + min-content overflow 방지 */
    box-sizing: border-box;
}
.auth-page { min-width: 0; width: 100%; box-sizing: border-box; }

/* 본문/댓글 이미지 안전망 */
.article-screenshot img, .article-media img, .article-media video,
.bpost-img, .user-cmt-item img {
    max-width: 100%;
    height: auto;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img, video, iframe { max-width: 100%; }

/* ── Header ─────────────────────────────────────────────── */
.top-header {
    background: var(--brand);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 16px rgba(0,0,0,0.24);
}

.header-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    height: 62px;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-main {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1.5px;
}

.logo-sub {
    font-size: 9.5px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.1px;
    margin-top: 3px;
    white-space: nowrap;
}

/* ── Nav ──────────────────────────────────────────────── */
.main-nav { display: flex; align-items: center; gap: 4px; }

/* ── Mobile Menu ──────────────────────────────────────── */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,0.1); }
.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform 0.25s, opacity 0.25s;
}
.mobile-menu-btn.active .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-btn.active .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
    display: none;
    flex-direction: column;
    background: var(--brand);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 8px 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.mobile-nav.open {
    max-height: 300px;
    padding: 8px 0;
}
.mobile-nav-link {
    display: block;
    padding: 12px 24px;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.1s, color 0.1s;
}
.mobile-nav-link:hover, .mobile-nav-link.active {
    background: rgba(255,255,255,0.08);
    color: var(--brand-accent);
}
.mobile-nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 24px;
}

@media (max-width: 640px) {
    .main-nav, .search-box { display: none !important; }
    .mobile-menu-btn { display: flex; }
    .mobile-nav { display: flex; }
}

/* ── Nav Dropdown (Board Section) ─────────────────────── */
.nav-dropdown { position: relative; }

.board-cat-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    font-family: var(--font);
    letter-spacing: -0.3px;
    background: none;
    border: none;
    cursor: pointer;
}
.board-cat-btn .chevron { color: var(--text-3); }

.nav-cat-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-sm);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font);
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.nav-cat-btn:hover,
.nav-cat-btn[aria-expanded="true"] {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.3);
}

.chevron {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.75;
    flex-shrink: 0;
}
.nav-cat-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 172px;
    z-index: 300;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.drop-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-2);
    font-family: var(--font);
    transition: background 0.1s, color 0.1s;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

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

.drop-item:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.drop-item.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
}

.drop-icon { font-size: 14px; flex-shrink: 0; }

/* ── Header Right ──────────────────────────────────────── */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.search-box {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s;
}

.search-box:focus-within {
    background: rgba(255,255,255,0.18);
    border-color: var(--brand-accent);
}

.search-box input {
    border: none;
    outline: none;
    padding: 8px 12px;
    width: 180px;
    font-size: 13px;
    font-family: var(--font);
    color: #ffffff;
    background: transparent;
}

.search-box input::placeholder { color: rgba(255,255,255,0.4); }

.search-box button {
    padding: 0 12px;
    height: 36px;
    color: rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.search-box button:hover { color: var(--brand-accent); }

.login-btn {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    padding: 7px 15px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    transition: all 0.15s;
    white-space: nowrap;
}

.login-btn:hover {
    background: var(--brand-accent);
    color: var(--brand);
    border-color: var(--brand-accent);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
}
.user-name-link {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}
.user-name-link:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* ── Layout ─────────────────────────────────────────────── */
.layout {
    width: 100%;
    max-width: 1280px;
    margin: 28px auto 80px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 288px;
    gap: 24px;
    align-items: start;
    box-sizing: border-box;
}

/* ── Board Section ──────────────────────────────────────── */
.board-section {
    min-width: 0;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.board-header {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.board-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.board-header h2 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.3px;
}

.board-count {
    font-size: 11.5px;
    color: var(--text-4);
    font-weight: 500;
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 20px;
}

.board-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.board-tabs button {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    padding: 5px 12px;
    border-radius: 6px;
    transition: all 0.15s;
    font-family: var(--font);
}

.board-tabs button.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* ── Board Items (해외반응 목록) ────────────────────────── */
.board-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
    color: inherit;
}

.board-item:last-child { border-bottom: none; }
.board-item:hover { background: var(--primary-light); }

img.item-flag {
    width: 24px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 2px;
    object-fit: cover;
}

span.item-flag.globe {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.item-title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.5;
}

.board-item:hover .item-title { color: var(--primary); }

.item-reaction {
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}

.item-cmt-count {
    font-size: 12px;
    color: var(--hot);
    font-weight: 700;
    white-space: nowrap;
}

.item-category {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
}
.item-category.cat-entertainment { background: #fdf2f8; color: #db2777; }
.item-category.cat-sports       { background: #fff7ed; color: #ea580c; }
.item-category.cat-politics     { background: #eff6ff; color: #2563eb; }
.item-category.cat-society      { background: #ecfdf5; color: #059669; }
.item-category.cat-military     { background: #fef2f2; color: #dc2626; }
[data-theme="dark"] .item-category.cat-entertainment { background: rgba(219,39,119,0.22); color: #fbcfe8; }
[data-theme="dark"] .item-category.cat-sports       { background: rgba(234,88,12,0.22); color: #fed7aa; }
[data-theme="dark"] .item-category.cat-politics     { background: rgba(37,99,235,0.22); color: #bfdbfe; }
[data-theme="dark"] .item-category.cat-society      { background: rgba(5,150,105,0.22); color: #a7f3d0; }
[data-theme="dark"] .item-category.cat-military     { background: rgba(220,38,38,0.22); color: #fecaca; }

.item-date {
    font-size: 12px;
    color: var(--text-4);
    white-space: nowrap;
    flex-shrink: 0;
}

.hot-cmt {
    font-size: 11px;
    color: var(--hot);
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Loading / Empty / Error ────────────────────────────── */
.loading-state,
.empty-state,
.error-state {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-3);
}

.loading-state p,
.empty-state p {
    font-size: 14px;
    margin-top: 14px;
    color: var(--text-3);
}

.empty-state .sub {
    font-size: 12.5px;
    color: var(--text-4);
    margin-top: 6px;
}

.empty-item {
    font-size: 12.5px;
    color: var(--text-4);
    padding: 6px 0;
}

.spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
    margin: 0 auto;
}

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

/* ── Pagination ─────────────────────────────────────────── */
.pagination {
    padding: 18px;
    display: flex;
    justify-content: center;
    gap: 4px;
    border-top: 1px solid var(--border);
}

.pagination button {
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-3);
    padding: 0 8px;
    transition: all 0.15s;
    font-family: var(--font);
}

.pagination button:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.pagination button:disabled { opacity: 0.3; cursor: not-allowed; }

.pagination button.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    font-weight: 700;
}

.page-ellipsis {
    display: flex;
    align-items: center;
    padding: 0 4px;
    color: var(--text-4);
    font-size: 13px;
    user-select: none;
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.widget-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.widget-header h3 {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 5px;
}

.hot-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
}

.hot-list li:last-child { border-bottom: none; padding-bottom: 0; }
.hot-list li:first-child { padding-top: 0; }

.hot-list .rank {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-4);
    min-width: 16px;
    padding-top: 1px;
    flex-shrink: 0;
}

.hot-list .rank.top { color: var(--hot); }

.hot-list .title {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.48;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.12s;
}

.hot-list li:hover .title { color: var(--primary); }

/* CTA Widget */
.cta-widget {
    text-align: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-color: #1e3a5f;
    padding: 24px 18px;
}

.cta-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.cta-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.cta-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
    margin-bottom: 16px;
    word-break: keep-all;
}

.primary-btn {
    width: 100%;
    background: var(--brand-accent);
    color: var(--brand);
    padding: 10px;
    font-size: 13px;
    font-weight: 800;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    transition: all 0.15s;
    letter-spacing: -0.2px;
}

.primary-btn:hover {
    background: #7dd3fc;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56,189,248,0.35);
}

/* Ad Widget */
.ad-widget {
    height: 250px;
    background: var(--bg);
    border: 1.5px dashed var(--border-dark);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-4);
    font-size: 12.5px;
    font-weight: 500;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
    background: var(--brand);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 24px 24px 20px;
    margin-top: auto;
}

.footer-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-logo {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.6);
    letter-spacing: 1.5px;
}

.footer-links {
    display: flex;
    gap: 16px;
}
.footer-links a {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    transition: color 0.15s;
}
.footer-links a:hover { color: rgba(255,255,255,0.8); }

.footer-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.25);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
    .layout { grid-template-columns: 1fr; padding: 0 16px; margin-top: 20px; }
    .sidebar { flex-direction: row; flex-wrap: wrap; }
    .sidebar .widget { flex: 1; min-width: 240px; }
    .ad-widget { display: none; }
}

@media (max-width: 640px) {
    .header-inner { padding: 0 16px; gap: 12px; }
    .logo-sub { display: none; }
    .search-box input { width: 120px; font-size: 12px; }
    .login-btn { font-size: 11px; padding: 5px 10px; }
    .layout { margin: 14px auto 60px; gap: 14px; }
    .board-item { padding: 9px 14px; gap: 8px; }
    img.item-flag { width: 20px; height: 15px; }
    span.item-flag.globe { font-size: 16px; width: 20px; }
    .item-title { font-size: 12.5px; }
    .item-reaction { font-size: 11px; }
    .item-category { font-size: 10px; padding: 1px 6px; }
    .item-date { display: none; }
    .board-count { display: none; }
    .footer-inner { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 400px) {
    .logo-main { font-size: 14px; letter-spacing: 0.5px; }
    .search-box input { width: 90px; }
    .nav-cat-btn { padding: 7px 10px; font-size: 12.5px; }
}

/* ============================================================
   커뮤니티 — 공통 nav 텍스트 링크
   ============================================================ */
.nav-text-btn {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.nav-text-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-text-btn.nav-active { color: var(--brand-accent); background: rgba(56,189,248,0.12); }

/* ============================================================
   커뮤니티 목록 (board.html)
   ============================================================ */

/* 보드 헤더 — 제목 + 글쓰기 + 정렬 */
.board-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px; gap: 10px; flex-wrap: wrap;
}
.board-header-left {
    display: flex; align-items: center; gap: 8px;
}
.bboard-heading {
    font-size: 17px; font-weight: 800; color: var(--text-1);
    letter-spacing: -0.4px;
}
.board-count {
    font-size: 12.5px; color: var(--text-4); font-weight: 500;
}
.board-header-right {
    display: flex; align-items: center; gap: 8px;
}

/* 정렬 드롭다운 */
.bsort-select {
    padding: 7px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 12.5px;
    font-family: var(--font); color: var(--text-2);
    background: var(--surface); outline: none;
    transition: border-color 0.15s;
}
.bsort-select:focus { border-color: var(--primary); }

.bboard-write-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px;
    background: var(--primary); color: #fff;
    border-radius: var(--radius-sm);
    font-size: 13.5px; font-weight: 700;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(14,165,233,0.25);
}
.bboard-write-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14,165,233,0.35); }

/* 카테고리 탭 — 필 스타일 */
.bcat-tabs {
    display: flex; gap: 5px;
    padding: 0 20px 12px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bcat-tabs::-webkit-scrollbar { display: none; }
.bcat-tab {
    padding: 6px 14px;
    font-size: 12.5px; font-weight: 600; font-family: var(--font);
    color: var(--text-3);
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.bcat-tab:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }
.bcat-tab.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

/* 인기글 섹션 (본문 내) */
.bhot-section {
    margin: 0;
    padding: 12px 24px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-bottom: 1px solid #fed7aa;
    display: flex; align-items: center; gap: 14px;
    overflow-x: auto;
}
[data-theme="dark"] .bhot-section { background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.04)); border-color: rgba(245,158,11,0.2); }
.bhot-label {
    font-size: 12px; font-weight: 800;
    color: #b45309;
    background: rgba(245,158,11,0.18);
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}
[data-theme="dark"] .bhot-label { color: #fbbf24; background: rgba(245,158,11,0.2); }
.bhot-items {
    display: flex; gap: 8px;
    overflow-x: auto; flex: 1;
}
.bhot-items::-webkit-scrollbar { display: none; }
.bhot-item {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 8px;
    transition: all 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
}
[data-theme="dark"] .bhot-item { background: rgba(255,255,255,0.05); border-color: rgba(245,158,11,0.15); }
.bhot-item:hover { background: #fef3c7; border-color: #f59e0b; transform: translateY(-1px); }
[data-theme="dark"] .bhot-item:hover { background: rgba(245,158,11,0.12); }
.bhot-flame { font-size: 12px; flex-shrink: 0; }
.bhot-title {
    font-size: 13px; color: var(--text-1); font-weight: 600;
    max-width: 200px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.bhot-cnt { font-size: 11px; color: #d97706; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
[data-theme="dark"] .bhot-cnt { color: #fbbf24; }

/* 글 목록 테이블 */
.bpost-table {
    background: var(--surface);
    overflow: hidden;
    width: 100%;
}
.bpost-thead {
    display: flex; align-items: center;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 9px 20px;
    font-size: 11.5px; font-weight: 700;
    color: var(--text-4);
    letter-spacing: 0.3px;
}
.bpost-row {
    display: flex; align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
    gap: 0;
    text-decoration: none;
    color: inherit;
}
.bpost-row:last-child { border-bottom: none; }
.bpost-row:hover { background: var(--primary-light); }

/* 컬럼 너비 */
.bcol-cat    { width: 60px; flex-shrink: 0; text-align: center; }
.bcol-title  { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; }
.bcol-author { width: 80px; flex-shrink: 0; font-size: 12.5px; color: var(--text-3); text-align: center; }
.bcol-date   { width: 65px; flex-shrink: 0; font-size: 12px; color: var(--text-4); text-align: center; }
.bcol-view   { width: 44px; flex-shrink: 0; font-size: 12px; color: var(--text-4); text-align: center; }
.bcol-like   { width: 44px; flex-shrink: 0; font-size: 12px; color: var(--text-4); text-align: center; }
.bcol-like.has-like { color: var(--primary); font-weight: 700; }

/* 카테고리 배지 */
.bcat-badge {
    display: inline-block;
    padding: 3px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.bcat-free     { background: #e0f2fe; color: #0369a1; }
.bcat-question { background: #dcfce7; color: #166534; }
.bcat-info     { background: #f3e8ff; color: #7e22ce; }
.bcat-humor    { background: #fff7ed; color: #c2410c; }
.bcat-notice   { background: #fef2f2; color: #b91c1c; }
[data-theme="dark"] .bcat-free     { background: rgba(14,165,233,0.22); color: #bae6fd; }
[data-theme="dark"] .bcat-question { background: rgba(34,197,94,0.22); color: #bbf7d0; }
[data-theme="dark"] .bcat-info     { background: rgba(168,85,247,0.22); color: #ddd6fe; }
[data-theme="dark"] .bcat-humor    { background: rgba(251,146,60,0.22); color: #fed7aa; }
[data-theme="dark"] .bcat-notice   { background: rgba(244,63,94,0.22); color: #fecdd3; }

/* 제목 */
.bpost-title-text {
    font-size: 14px; font-weight: 500; color: var(--text-1);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    transition: color 0.12s;
}
.bpost-row:hover .bpost-title-text { color: var(--primary); }

/* 댓글 수 / 배지 */
.bcmt-badge { font-size: 12px; color: var(--primary); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.bbadge { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; line-height: 1; }
.bbadge-new { background: var(--hot); color: #fff; min-width: 16px; min-height: 16px; border-radius: 4px; }
.bbadge-hot { background: none; font-size: 13px; }

/* 빈 상태 */
.bboard-placeholder {
    padding: 80px 20px; text-align: center;
    color: var(--text-4); font-size: 14px;
}
.bboard-empty-icon {
    font-size: 48px; display: block; margin-bottom: 16px; opacity: 0.5;
}
.bboard-empty-cta {
    display: inline-block;
    margin-top: 12px; padding: 8px 20px;
    background: var(--primary); color: #fff;
    border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600;
    transition: background 0.15s;
}
.bboard-empty-cta:hover { background: var(--primary-hover); }

/* 하단 바 (검색 + 페이지네이션) */
.bboard-footer {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px 20px 18px;
    gap: 12px;
    flex-wrap: wrap;
}
.bboard-search { display: flex; gap: 6px; align-items: center; }
.bboard-search select {
    padding: 7px 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 12.5px;
    font-family: var(--font); color: var(--text-2);
    background: var(--surface); outline: none;
}
.bboard-search input {
    padding: 7px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 13px;
    font-family: var(--font); color: var(--text-1);
    width: 200px; outline: none;
    transition: border-color 0.15s;
}
.bboard-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,0.08); }
.bsearch-btn {
    padding: 7px 16px;
    background: var(--primary); color: #fff;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
    font-family: var(--font); transition: all 0.15s;
}
.bsearch-btn:hover { background: var(--primary-hover); }

.bpagination { display: flex; gap: 4px; align-items: center; }
.bpage-btn {
    min-width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500;
    color: var(--text-2);
    font-family: var(--font);
    transition: all 0.12s;
    background: var(--surface);
}
.bpage-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.bpage-btn.active {
    background: var(--primary); color: #fff;
    border-color: var(--primary); font-weight: 700;
}

/* ============================================================
   글쓰기 (write.html) — 프리미엄 에디터
   ============================================================ */
.bwrite-wrap {
    max-width: 820px; margin: 32px auto 80px; padding: 0 20px;
}
.bwrite-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* 글쓰기 헤더 */
.bwrite-header {
    padding: 24px 32px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.bwrite-header h2 {
    font-size: 20px; font-weight: 800; color: var(--text-1);
    display: flex; align-items: center; gap: 8px;
}
.bwrite-header-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--primary-light);
    border-radius: 10px;
    font-size: 18px;
}
.bwrite-autosave-badge {
    font-size: 11.5px; font-weight: 600;
    color: var(--text-4);
    display: flex; align-items: center; gap: 4px;
}
.bwrite-autosave-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e;
    display: inline-block;
}

/* 에러 메시지 */
.bwrite-error {
    background: #fef2f2; color: #dc2626;
    border: 1px solid #fecaca; border-radius: 8px;
    padding: 12px 16px; font-size: 13px;
    margin: 16px 32px 0; display: none;
    font-weight: 500;
}

/* 카테고리 + 제목 영역 */
.bwrite-meta-row {
    display: flex; gap: 16px; padding: 20px 32px 0;
    align-items: flex-start;
}
.bwrite-meta-cat {
    flex-shrink: 0; width: 130px;
}
.bwrite-meta-title {
    flex: 1; min-width: 0;
}

.bwrite-field { margin-bottom: 0; }
.bwrite-field label {
    display: block; font-size: 12px; font-weight: 700;
    color: var(--text-3); margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.bwrite-field select,
.bwrite-field input {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 14px; font-family: var(--font);
    color: var(--text-1); background: var(--surface);
    outline: none; box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: 44px;
}
.bwrite-field select:focus,
.bwrite-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.1);
}
.bwrite-char {
    font-size: 11px; color: var(--text-4); text-align: right; margin-top: 4px;
    transition: color 0.15s;
}
.bwrite-char.near-limit { color: var(--hot); font-weight: 600; }

/* 에디터 영역 */
.bwrite-editor-wrap {
    margin: 20px 32px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bwrite-editor-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.1);
}

/* 에디터 탭 (작성/미리보기) */
.bwrite-tabs {
    display: flex; background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.bwrite-tab {
    padding: 9px 20px;
    font-size: 13px; font-weight: 600;
    color: var(--text-3);
    font-family: var(--font);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    display: flex; align-items: center; gap: 5px;
}
.bwrite-tab:hover { color: var(--primary); }
.bwrite-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--surface);
}
.bwrite-tab svg { width: 14px; height: 14px; }

/* 에디터 툴바 */
.bwrite-toolbar {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.bwrite-tool-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12.5px; font-weight: 600;
    color: var(--text-2); background: transparent;
    font-family: var(--font);
    transition: all 0.12s;
}
.bwrite-tool-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.bwrite-tool-sep {
    width: 1px; height: 20px;
    background: var(--border); margin: 0 4px;
}
.bwrite-tool-status { font-size: 12px; color: var(--primary); font-weight: 600; margin-left: auto; }

/* textarea */
.bwrite-content-ta {
    width: 100%; padding: 16px;
    border: none !important; border-radius: 0 !important;
    font-size: 15px; font-family: var(--font);
    color: var(--text-1); background: var(--surface);
    outline: none; box-sizing: border-box;
    min-height: 400px; resize: vertical;
    line-height: 1.8;
    box-shadow: none !important;
}
.bwrite-content-ta::placeholder { color: var(--text-4); }

/* 미리보기 */
.bwrite-preview {
    min-height: 400px; padding: 20px;
    font-size: 15px; line-height: 1.85;
    color: var(--text-1);
    display: none;
    word-break: break-word;
}
.bwrite-preview.active { display: block; }
.bwrite-preview p { margin-bottom: 8px; }

/* 에디터 하단 정보 */
.bwrite-editor-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    font-size: 11.5px; color: var(--text-4);
}

/* 드래그 드롭 오버레이 */
.bwrite-dropzone {
    display: none;
    position: absolute; inset: 0;
    background: rgba(14,165,233,0.08);
    border: 2px dashed var(--primary);
    border-radius: var(--radius-sm);
    z-index: 10;
    align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
    color: var(--primary);
}
.bwrite-editor-wrap.dragover .bwrite-dropzone {
    display: flex;
}
.bwrite-editor-wrap { position: relative; }

/* 액션 버튼 */
.bwrite-actions {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 32px 24px;
    gap: 10px;
}
.bwrite-actions-left {
    font-size: 12px; color: var(--text-4);
}
.bwrite-actions-right {
    display: flex; gap: 10px;
}
.bwrite-cancel {
    padding: 11px 24px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 14px; font-weight: 500;
    color: var(--text-2); font-family: var(--font); transition: all 0.15s;
}
.bwrite-cancel:hover { background: var(--border); }
.bwrite-submit {
    padding: 11px 32px;
    background: var(--primary); color: #fff;
    border-radius: var(--radius-sm); font-size: 14px; font-weight: 700;
    font-family: var(--font); transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(14,165,233,0.25);
}
.bwrite-submit:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14,165,233,0.35); }
.bwrite-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================================
   게시글 상세 (post.html)
   ============================================================ */
.bpost-wrap { max-width: 860px; margin: 32px auto 80px; padding: 0 20px; display: flex; flex-direction: column; gap: 16px; }

.bpost-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.bpost-loading {
    padding: 60px 20px; text-align: center;
    color: var(--text-4); font-size: 14px;
}

/* 글 헤더 */
.bpost-head {
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--border);
}
.bpost-head-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.bpost-own-actions { display: flex; gap: 8px; }
.bpost-edit-btn {
    font-size: 12.5px; color: var(--text-3);
    padding: 4px 10px; border: 1px solid var(--border);
    border-radius: 5px; transition: all 0.12s;
}
.bpost-edit-btn:hover { color: var(--primary); border-color: var(--primary); }
.bpost-delete-btn {
    font-size: 12.5px; color: var(--text-3);
    padding: 4px 10px; border: 1px solid var(--border);
    border-radius: 5px; font-family: var(--font);
    transition: all 0.12s;
}
.bpost-delete-btn:hover { color: var(--hot); border-color: var(--hot); }

.bpost-title {
    font-size: 20px; font-weight: 800;
    color: var(--text-1); line-height: 1.4;
    letter-spacing: -0.4px; margin-bottom: 10px;
    word-break: break-word;
}
.bpost-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-4);
}
.bpost-author { font-weight: 600; color: var(--text-2); }

/* 본문 */
.bpost-body {
    padding: 24px 28px;
    font-size: 15px; line-height: 1.85;
    color: var(--text-1);
    min-height: 160px;
    word-break: break-word;
    border-bottom: 1px solid var(--border);
}

/* 추천/비추 버튼 */
.bvote-section {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; padding: 28px 20px;
    border-bottom: 1px solid var(--border);
}
.bvote-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 28px;
    border-radius: 40px;
    font-size: 15px; font-weight: 700;
    font-family: var(--font);
    border: 2px solid var(--border);
    color: var(--text-2);
    background: var(--surface-2);
    transition: all 0.15s;
    min-width: 130px; justify-content: center;
}
.bvote-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.bvote-like:hover  { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.bvote-like.active  { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 12px rgba(14,165,233,0.3); }

.bpost-footer-nav { padding: 16px 28px; }
.bpost-back-btn {
    font-size: 13px; color: var(--text-3);
    padding: 7px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); display: inline-block;
    transition: all 0.12s;
}
.bpost-back-btn:hover { color: var(--primary); border-color: var(--primary); }

/* ============================================================
   댓글 (post.html)
   ============================================================ */
.bcomments-card {}

.bcmt-title {
    font-size: 15px; font-weight: 800;
    color: var(--text-1); padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
}

/* 댓글 입력 폼 */
.bcmt-form { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.bcmt-reply-tag {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--primary-light); border-radius: 6px;
    padding: 7px 12px; margin-bottom: 8px;
    font-size: 12.5px; color: var(--primary); font-weight: 600;
}
.bcmt-reply-tag button {
    color: var(--text-3); font-size: 13px;
    padding: 0 4px; font-family: var(--font);
    transition: color 0.1s;
}
.bcmt-reply-tag button:hover { color: var(--hot); }
.bcmt-input-row { display: flex; gap: 10px; align-items: flex-end; }
.bcmt-input-row textarea {
    flex: 1; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13.5px; font-family: var(--font);
    color: var(--text-1); resize: none; outline: none;
    line-height: 1.6; transition: border-color 0.15s;
}
.bcmt-input-row textarea:focus { border-color: var(--primary); }
.bcmt-submit-btn {
    padding: 10px 20px;
    background: var(--primary); color: #fff;
    border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700;
    font-family: var(--font); white-space: nowrap;
    transition: background 0.15s; align-self: flex-end;
}
.bcmt-submit-btn:hover { background: var(--primary-hover); }

.bcmt-login-prompt {
    padding: 20px 24px; text-align: center;
    font-size: 13.5px; color: var(--text-3);
    border-bottom: 1px solid var(--border);
}
.bcmt-login-prompt a { color: var(--primary); font-weight: 600; }

/* 댓글 아이템 */
.bcmt-item {
    display: flex; gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
    position: relative;
}
.bcmt-item:last-child { border-bottom: none; }
.bcmt-reply {
    background: var(--surface-2);
    padding-left: 48px;
}
.bcmt-reply-arrow {
    position: absolute; left: 28px; top: 16px;
    color: var(--text-4); font-size: 13px;
}
.bcmt-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    flex-shrink: 0;
}
.bcmt-reply .bcmt-avatar { width: 28px; height: 28px; font-size: 12px; }
.bcmt-body { flex: 1; min-width: 0; }
.bcmt-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.bcmt-nick { font-size: 13px; font-weight: 700; color: var(--text-1); }
.bcmt-date { font-size: 12px; color: var(--text-4); }
.bcmt-content {
    font-size: 14px; color: var(--text-1); line-height: 1.65;
    word-break: break-word; margin-bottom: 8px;
}
.bcmt-actions { display: flex; align-items: center; gap: 10px; }
.bcmt-like-btn {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--text-3);
    padding: 3px 8px; border: 1px solid var(--border);
    border-radius: 20px; font-family: var(--font);
    transition: all 0.12s;
}
.bcmt-like-btn:hover { border-color: var(--primary); color: var(--primary); }
.bcmt-like-btn.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary); font-weight: 700; }
.bcmt-reply-btn {
    font-size: 12px; color: var(--text-3); font-family: var(--font);
    padding: 3px 8px; border: 1px solid var(--border); border-radius: 20px;
    transition: all 0.12s;
}
.bcmt-reply-btn:hover { color: var(--primary); border-color: var(--primary); }
.bcmt-del-btn {
    font-size: 12px; color: var(--text-4); font-family: var(--font);
    padding: 3px 8px; border: 1px solid transparent; border-radius: 20px;
    transition: all 0.12s;
}
.bcmt-del-btn:hover { color: var(--hot); border-color: var(--hot); }
.bcmt-empty {
    padding: 32px 24px; text-align: center;
    color: var(--text-4); font-size: 13.5px;
}

/* ── 글쓰기 툴바 ─────────────────────────────────────────── */
.bwrite-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.bwrite-tool-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12.5px; font-weight: 600;
    color: var(--text-2); background: var(--surface);
    font-family: var(--font);
    transition: all 0.12s;
}
.bwrite-tool-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.bwrite-tool-status { font-size: 12px; color: var(--primary); font-weight: 600; }
.bwrite-content-ta { border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; }

/* ── 본문 내 YouTube / 이미지 ───────────────────────────── */
.bpost-yt {
    position: relative; width: 100%; padding-bottom: 56.25%;
    height: 0; overflow: hidden;
    border-radius: var(--radius-sm); margin: 16px 0;
    background: #000;
}
.bpost-yt iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border: none;
}
.bpost-img-wrap { margin: 12px 0; text-align: center; }
.bpost-img {
    max-width: 100%; max-height: 600px;
    border-radius: var(--radius-sm);
    cursor: zoom-in;
    box-shadow: var(--shadow);
    transition: max-height 0.25s ease;
}
.bpost-img-full { max-height: none !important; cursor: zoom-out; }

/* bcmt-item에 relative 추가 (답글 화살표 위치용) */
.bcmt-item { position: relative; }

/* ============================================================
   게시판 반응형
   ============================================================ */
@media (max-width: 960px) {
    /* 태블릿/모바일: 조회/추천 컬럼 숨기고 글쓴이 공간 확보 */
    .bcol-view, .bcol-like { display: none; }
    .bcol-author { width: 110px; }
    .bcol-author .lvl-badge { white-space: nowrap; }
    .bcol-author { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 768px) {
    .board-header { padding: 14px 14px 10px; }
    .bboard-heading { font-size: 15px; }
    .bcat-tabs { padding: 0 14px 10px; gap: 4px; }
    .bcat-tab { padding: 5px 10px; font-size: 11.5px; }
    .bpost-thead { padding: 8px 14px; }
    .bpost-row { padding: 10px 14px; }
    .bwrite-meta-row { flex-direction: column; gap: 12px; padding: 16px 20px 0; }
    .bwrite-meta-cat { width: 100%; }
    .bwrite-header { padding: 20px 20px 16px; }
    .bwrite-editor-wrap { margin: 16px 20px 0; }
    .bwrite-actions { padding: 16px 20px 20px; }
    .bwrite-error { margin: 12px 20px 0; }
}
@media (max-width: 640px) {
    .bpost-wrap, .bwrite-wrap { padding: 0 10px; margin-top: 16px; }
    .bcol-view, .bcol-like { display: none; }
    .bcol-cat { width: 50px; }
    .bcol-author { width: 55px; font-size: 11.5px; }
    .bcol-date   { width: 42px; font-size: 11px; }
    .bpost-title-text { font-size: 13px; }
    .bpost-title { font-size: 17px; }
    .bpost-head, .bpost-body, .bpost-footer-nav { padding-left: 16px; padding-right: 16px; }
    .bcmt-item { padding: 12px 16px; }
    .bcmt-reply { padding-left: 36px; }
    .bcmt-form { padding: 12px 16px; }
    .bcmt-title { padding: 16px 16px 12px; }
    .bvote-btn { padding: 10px 18px; font-size: 14px; min-width: 110px; }
    .bboard-footer { flex-direction: column; align-items: stretch; padding: 12px 16px 16px; }
    .bboard-search { flex-wrap: wrap; }
    .bboard-search input { flex: 1; min-width: 120px; }
    .bpagination { justify-content: center; }
    .board-header-right { flex-wrap: wrap; }
    .bwrite-header { padding: 16px 16px 12px; }
    .bwrite-meta-row { padding: 12px 16px 0; }
    .bwrite-editor-wrap { margin: 12px 16px 0; }
    .bwrite-actions { padding: 12px 16px 16px; flex-direction: column; }
    .bwrite-actions-right { width: 100%; }
    .bwrite-cancel, .bwrite-submit { flex: 1; text-align: center; }
    .bwrite-error { margin: 12px 16px 0; }
    .bwrite-content-ta { min-height: 300px; font-size: 14px; }
}

/* ============================================================
   해외반응 상세 (article.html)
   ============================================================ */
.article-wrap {
    max-width: 1040px;
    margin: 32px auto 80px;
    padding: 0 20px;
}
.article-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.article-loading {
    padding: 80px 20px;
    text-align: center;
    color: var(--text-4);
    font-size: 14px;
}

/* ─── 스켈레톤 로딩 UI (공용) ───────────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton {
    display: block;
    background: linear-gradient(90deg, var(--hover) 0%, var(--border) 40%, var(--hover) 80%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.09) 40%, rgba(255,255,255,0.04) 80%);
    background-size: 200% 100%;
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* 기사 상세 스켈레톤 (article.html) */
.skeleton-article { padding: 24px 28px; }
.skeleton-article .sk-region { width: 140px; height: 14px; margin-bottom: 18px; }
.skeleton-article .sk-title  { width: 85%;   height: 26px; margin-bottom: 12px; }
.skeleton-article .sk-title2 { width: 55%;   height: 22px; margin-bottom: 18px; }
.skeleton-article .sk-meta   { width: 200px; height: 12px; margin-bottom: 28px; }
.skeleton-article .sk-line   { width: 100%;  height: 14px; margin-bottom: 10px; }
.skeleton-article .sk-line-short { width: 45%; height: 14px; margin-bottom: 24px; }
.skeleton-article .sk-media  { width: 100%;  height: 180px; border-radius: 8px; margin-bottom: 18px; }

/* 기사 목록 스켈레톤 (index.html / script.js) */
.skeleton-board-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}
.skeleton-board-item .sk-flag   { width: 26px; height: 20px; border-radius: 3px; flex-shrink: 0; }
.skeleton-board-item .sk-title  { flex: 1; height: 14px; }
.skeleton-board-item .sk-cat    { width: 52px; height: 18px; border-radius: 10px; flex-shrink: 0; }
.skeleton-board-item .sk-date   { width: 42px; height: 12px; flex-shrink: 0; }

/* 커뮤니티 게시판 행 스켈레톤 (board.html) */
.skeleton-bpost-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
}
.skeleton-bpost-row .sk-cat    { width: 38px; height: 18px; border-radius: 10px; flex-shrink: 0; }
.skeleton-bpost-row .sk-title  { flex: 1; height: 14px; }
.skeleton-bpost-row .sk-author { width: 60px; height: 12px; flex-shrink: 0; }
.skeleton-bpost-row .sk-date   { width: 42px; height: 12px; flex-shrink: 0; }

/* 게시글 상세 스켈레톤 (post.html) */
.skeleton-bpost-detail { padding: 24px 28px; }
.skeleton-bpost-detail .sk-cat     { width: 50px; height: 18px; margin-bottom: 14px; border-radius: 10px; }
.skeleton-bpost-detail .sk-title   { width: 80%; height: 22px; margin-bottom: 10px; }
.skeleton-bpost-detail .sk-meta    { width: 180px; height: 12px; margin-bottom: 22px; }
.skeleton-bpost-detail .sk-line    { width: 100%; height: 14px; margin-bottom: 10px; }
.skeleton-bpost-detail .sk-line-short { width: 60%; height: 14px; margin-bottom: 10px; }

/* mypage 탭 아이템 스켈레톤 */
.skeleton-my-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.skeleton-my-item .sk-line       { height: 14px; margin-bottom: 8px; }
.skeleton-my-item .sk-line-short { width: 40%; height: 12px; margin-bottom: 0; }
.article-error {
    padding: 80px 20px;
    text-align: center;
}
.article-error p {
    color: var(--hot);
    font-weight: 700;
    margin-bottom: 18px;
    font-size: 15px;
}
.article-error-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.article-retry-btn {
    padding: 10px 22px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.15s;
}
.article-retry-btn:hover { background: var(--primary-dark, #2563eb); }
.article-back-link {
    color: var(--text-3);
    font-size: 13px;
    text-decoration: none;
}
.article-back-link:hover { color: var(--primary); }
.article-error a {
    color: var(--primary);
    font-size: 13px;
}

.article-region-bar {
    padding: 20px 28px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.3px;
}
.article-region-flag {
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.article-region-flag-img {
    width: 26px;
    height: 19px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.article-region-flag-globe {
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.article-region-name { color: var(--text-1); }
.article-region-label { color: var(--text-3); font-weight: 700; }

/* 플랫폼별 소스 뱃지 */
.article-source-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--hover);
    color: var(--text-2);
    margin-left: auto;
}
.article-source-badge.source-reddit   { background: rgba(255,69,0,0.12);   color: #ff4500; }
.article-source-badge.source-yahoo    { background: rgba(96,1,210,0.12);   color: #6001d2; }
.article-source-badge.source-youtube  { background: rgba(255,0,0,0.12);    color: #d70000; }
.article-source-badge.source-5ch      { background: rgba(43,122,43,0.15);  color: #2b7a2b; }
.article-source-badge.source-hn       { background: rgba(255,102,0,0.12);  color: #ff6600; }
.article-source-badge.source-ptt      { background: rgba(26,58,115,0.12);  color: #1a3a73; }
.article-source-badge.source-bilibili { background: rgba(0,161,214,0.12);  color: #0089b5; }
.article-source-badge.source-4chan    { background: rgba(17,119,67,0.12);  color: #117743; }
.article-source-badge.source-bluesky  { background: rgba(0,133,255,0.12);  color: #0085ff; }

[data-theme="dark"] .article-source-badge.source-reddit   { background: rgba(255,69,0,0.22);   color: #ffa07a; }
[data-theme="dark"] .article-source-badge.source-yahoo    { background: rgba(147,89,221,0.22); color: #c4b5fd; }
[data-theme="dark"] .article-source-badge.source-youtube  { background: rgba(255,0,0,0.22);    color: #fca5a5; }
[data-theme="dark"] .article-source-badge.source-5ch      { background: rgba(43,122,43,0.25);  color: #86efac; }
[data-theme="dark"] .article-source-badge.source-hn       { background: rgba(255,102,0,0.22);  color: #fdba74; }
[data-theme="dark"] .article-source-badge.source-ptt      { background: rgba(96,130,190,0.22); color: #bfdbfe; }
[data-theme="dark"] .article-source-badge.source-bilibili { background: rgba(0,161,214,0.22);  color: #7dd3fc; }
[data-theme="dark"] .article-source-badge.source-4chan    { background: rgba(17,119,67,0.25);  color: #86efac; }
[data-theme="dark"] .article-source-badge.source-bluesky  { background: rgba(0,133,255,0.22);  color: #93c5fd; }

.article-head {
    padding: 16px 28px 20px;
    border-bottom: 1px solid var(--border);
}
.article-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--text-1);
    margin-bottom: 14px;
    word-break: keep-all;
    letter-spacing: -0.4px;
}
.article-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-size: 13px;
    color: var(--text-3);
    padding: 10px 0 0;
    border-top: 1px solid var(--border);
}
.article-info-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text-2);
    margin-right: 14px;
}
.article-info-item {
    position: relative;
    margin-right: 14px;
    padding-right: 14px;
}
.article-info-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: var(--border);
}
.article-info-item:last-child::after { display: none; }
.article-info-item:last-child { margin-right: 0; padding-right: 0; }

/* 본문 */
.article-body {
    padding: 28px 32px;
    font-size: 17px;
    line-height: 1.9;
    color: var(--text-1);
    word-break: keep-all;
}
.article-intro {
    padding: 0 0 24px;
    font-size: 17px;
    line-height: 1.9;
    color: var(--text-1);
    word-break: keep-all;
}
.article-source-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 11px;
    color: var(--text-4);
    text-decoration: none;
    word-break: break-all;
    transition: color 0.15s;
}
.article-source-link:hover {
    color: var(--text-3);
    text-decoration: underline;
}

/* 미디어 */
.article-media {
    margin: 24px 0;
    text-align: center;
}
.article-media-ratio {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: #000;
}
.article-media-ratio iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}
.article-media img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.article-media video {
    max-width: 100%;
    max-height: 600px;
    background: #000;
    border-radius: var(--radius-sm);
}

/* 원본 기사 캡처 — 박스/라벨 없이 이미지만 (사람이 글에 넣은 느낌) */
.article-screenshot {
    margin: 28px 0;
}
.article-screenshot img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 댓글 */
.article-cmt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 32px 14px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
}
.article-toggle-lang {
    font-size: 12px;
    padding: 5px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    color: var(--text-3);
    font-weight: 600;
    font-family: var(--font);
    transition: all 0.15s;
}
.article-toggle-lang:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.article-cmt-item {
    padding: 18px 32px;
}
.article-cmt-item:last-child { }
.article-cmt-reply {
    margin-left: 28px;
}
.article-cmt-reply-icon {
    color: var(--text-secondary);
    font-size: 14px;
    margin-right: 2px;
}
.article-cmt-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 10px;
}
.article-cmt-upvotes {
    color: var(--hot);
    font-weight: 700;
}
.article-cmt-downvotes {
    color: #6b7280;
    font-weight: 700;
}
.article-cmt-kr {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-1);
    word-break: keep-all;
}
.article-cmt-en {
    display: none;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-3);
    word-break: break-word;
    font-style: italic;
}

.article-footer-nav {
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.article-back-btn {
    font-size: 13px;
    color: var(--text-3);
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: inline-block;
    transition: all 0.12s;
}
.article-back-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.article-share-btn {
    font-size: 13px; color: var(--text-3); padding: 8px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; font-family: var(--font); font-weight: 500;
    transition: all 0.12s; background: none;
}
.article-share-btn:hover { color: var(--primary); border-color: var(--primary); }

.article-prev-next {
    display: flex; gap: 12px; padding: 0 28px 16px;
    border-bottom: 1px solid var(--border);
}
.article-nav-link {
    flex: 1; display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); transition: all 0.15s;
    min-width: 0;
}
.article-nav-link:hover { border-color: var(--primary); background: var(--primary-light); }
.article-nav-link.next { text-align: right; }
.article-nav-label { font-size: 11px; color: var(--text-4); font-weight: 600; }
.article-nav-title {
    font-size: 13px; color: var(--text-2); font-weight: 500;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* 유저 댓글 섹션 */
.user-cmt-section {
    border-top: 2px solid var(--border);
}
.user-cmt-header {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 28px;
    font-size: 15px; font-weight: 800; color: var(--text-1);
    border-bottom: 1px solid var(--border);
}
.user-cmt-form {
    padding: 16px 28px;
    border-bottom: 1px solid var(--border);
}
.user-cmt-form textarea {
    width: 100%; min-height: 80px; padding: 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font); font-size: 14px; color: var(--text-1);
    background: var(--surface); resize: vertical; outline: none;
    line-height: 1.6;
}
.user-cmt-form textarea:focus { border-color: var(--primary); }
.user-cmt-form-actions {
    display: flex; justify-content: flex-end; margin-top: 10px;
}
.user-cmt-submit {
    padding: 8px 20px; background: var(--primary); color: #fff;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
    font-family: var(--font); cursor: pointer; border: none;
    transition: background 0.15s;
}
.user-cmt-submit:hover { background: var(--primary-hover); }
.user-cmt-submit:disabled { opacity: 0.5; cursor: default; }
.user-cmt-login {
    padding: 20px 28px; text-align: center;
    color: var(--text-3); font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.user-cmt-login a { color: var(--primary); font-weight: 600; }
.user-cmt-item {
    padding: 14px 28px;
    border-bottom: 1px solid var(--border);
}
.user-cmt-item:last-child { border-bottom: none; }
.user-cmt-meta {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.user-cmt-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--surface-2); object-fit: cover;
}
.user-cmt-nick { font-size: 13px; font-weight: 600; color: var(--text-2); }
.user-cmt-time { font-size: 11px; color: var(--text-4); }
.user-cmt-text {
    font-size: 14px; line-height: 1.65; color: var(--text-1);
    word-break: keep-all; white-space: pre-wrap;
}
.user-cmt-actions {
    display: flex; gap: 12px; margin-top: 6px;
}
.user-cmt-like-btn {
    font-size: 12px; color: var(--text-4); cursor: pointer;
    background: none; border: none; font-family: var(--font);
    padding: 2px 0; transition: color 0.12s;
}
.user-cmt-like-btn:hover { color: var(--primary); }
.user-cmt-like-btn.liked { color: var(--hot); font-weight: 600; }
.user-cmt-delete-btn {
    font-size: 12px; color: var(--text-4); cursor: pointer;
    background: none; border: none; font-family: var(--font);
    padding: 2px 0; transition: color 0.12s;
}
.user-cmt-delete-btn:hover { color: var(--hot); }
.user-cmt-empty {
    padding: 24px 28px; text-align: center;
    color: var(--text-4); font-size: 13px;
}

@media (max-width: 640px) {
    .article-wrap { padding: 0 12px; margin-top: 20px; }
    .article-title { font-size: 18px; }
    .article-head, .article-body, .article-footer-nav { padding-left: 16px; padding-right: 16px; }
    .article-region-bar { padding-left: 16px; padding-right: 16px; }
    .article-cmt-header, .article-cmt-item { padding-left: 16px; padding-right: 16px; }
    .article-cmt-reply { margin-left: 12px; padding-left: 12px; }
    .user-cmt-header, .user-cmt-form, .user-cmt-item, .user-cmt-login, .user-cmt-empty { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   인증 페이지 (login.html, signup.html)
   ============================================================ */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.auth-card { background: var(--surface); border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 40px 36px; width: 100%; max-width: 400px; }
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo a { text-decoration: none; color: var(--brand); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.auth-logo .sub { display: block; font-size: 12px; font-weight: 400; color: var(--text-3); margin-top: 4px; }
.auth-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 24px; color: var(--text-1); }

.social-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; background: #fff; color: var(--text-1); transition: background 0.15s; }
.social-btn:hover { background: #f8fafc; }
.social-btn svg, .social-btn img { width: 20px; height: 20px; }
.btn-google { border-color: #dadce0; }

.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 12px; color: var(--text-4); }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; }
.form-group input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; box-sizing: border-box; font-family: var(--font); }
.form-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(14,165,233,0.15); }
.form-hint { font-size: 11px; color: var(--text-4); margin-top: 3px; }

.auth-submit { width: 100%; padding: 12px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 6px; font-family: var(--font); }
.auth-submit:hover { background: var(--primary-hover); }

.auth-footer { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text-3); }
.auth-footer a { color: var(--primary); text-decoration: none; font-weight: 500; }
.auth-footer a:hover { text-decoration: underline; }

.auth-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: 6px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; display: none; }
.auth-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; border-radius: 6px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; display: none; }
.auth-back { text-align: center; margin-top: 16px; }
.auth-back a { color: var(--text-3); font-size: 13px; text-decoration: none; }
.auth-back a:hover { color: var(--primary); }

.social-consent-note { font-size: 11px; color: var(--text-4); text-align: center; margin: 4px 0 0; line-height: 1.5; }
.social-consent-note a { color: var(--text-3); text-decoration: underline; }
.social-consent-note a:hover { color: var(--primary); }
.auth-terms { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; padding: 12px; background: var(--surface-2, #f8fafc); border-radius: 8px; }
.auth-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; line-height: 1.5; }
.auth-check input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; cursor: pointer; flex-shrink: 0; accent-color: var(--primary); }
.auth-check a { color: var(--primary); text-decoration: underline; font-weight: 500; }
.auth-check a:hover { color: var(--primary-hover); }
.auth-check em { color: var(--text-4); font-style: normal; font-size: 12px; }
.auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
[data-theme="dark"] .auth-terms { background: var(--surface-2); }

/* ============================================================
   마이페이지 (mypage.html)
   ============================================================ */
.mypage { max-width: 700px; margin: 40px auto; padding: 0 20px; }
.mypage-card { background: var(--surface); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 32px; }
.mypage-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: var(--primary); overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info h2 { font-size: 18px; font-weight: 700; color: var(--text-1); margin: 0 0 4px; }
.user-info p { font-size: 13px; color: var(--text-3); margin: 0; }
.badge-admin { display: inline-block; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }

.info-list { list-style: none; padding: 0; margin: 0 0 24px; }
.info-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.info-list li:last-child { border-bottom: none; }
.info-label { color: var(--text-3); }
.info-value { color: var(--text-1); font-weight: 500; }

.mypage-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-admin { display: none; padding: 11px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; }
.btn-admin:hover { background: #fde68a; }
.btn-edit-profile { padding: 11px; background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary); border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; font-family: var(--font); }
.btn-edit-profile:hover { background: var(--primary); color: #fff; }
.edit-profile-form { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.edit-profile-form .form-group { margin-bottom: 0; }
.edit-profile-form input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: var(--font); outline: none; box-sizing: border-box; }
.edit-profile-form input:focus { border-color: var(--primary); }
.btn-logout { padding: 11px; background: #fff; color: var(--hot); border: 1px solid #fecaca; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--font); }
.btn-logout:hover { background: #fef2f2; }
.btn-delete-account { padding: 11px; background: #fff; color: #9ca3af; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-weight: 400; cursor: pointer; font-family: var(--font); margin-top: 4px; }
.btn-delete-account:hover { background: #fef2f2; color: var(--hot); border-color: #fecaca; }
[data-theme="dark"] .btn-delete-account { background: var(--surface-2); border-color: var(--border); color: #6b7280; }
[data-theme="dark"] .btn-delete-account:hover { background: #3f1a1a; color: #f87171; border-color: #7f1d1d; }
.btn-home { padding: 11px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; text-align: center; text-decoration: none; display: block; }
.btn-home:hover { background: #e2e8f0; }

/* ── 레벨 뱃지 시스템 ────────────────────────────────────────── */
.lvl-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; line-height: 1; padding: 2px 7px; border-radius: 10px; white-space: nowrap; vertical-align: middle; letter-spacing: -0.2px; }
.lvl-icon { font-size: 10px; margin-right: 1px; }

/* Lv.1~4 새싹 */
.lvl-seedling { color: #9ca3af; background: none; padding: 0; font-weight: 500; }
/* Lv.5~9 탐험가 */
.lvl-explorer { color: #4d7c0f; background: #f0fdf4; border: 1px solid #bbf7d0; }
/* Lv.10~14 관찰자 */
.lvl-observer { color: #166534; background: #dcfce7; border: 1px solid #86efac; }
/* Lv.15~19 해석가 */
.lvl-analyst { color: #0f766e; background: linear-gradient(135deg, #ccfbf1, #99f6e4); border: 1px solid #5eead4; }
/* Lv.20~29 리포터 */
.lvl-reporter { color: #1d4ed8; background: linear-gradient(135deg, #dbeafe, #bfdbfe); border: 1px solid #93c5fd; }
/* Lv.30~39 특파원 */
.lvl-correspondent { color: #fff; background: linear-gradient(135deg, #6366f1, #4338ca); border: 1px solid #818cf8; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
/* Lv.40~49 분석가 */
.lvl-strategist { color: #fff; background: linear-gradient(135deg, #8b5cf6, #7c3aed); border: 1px solid #a78bfa; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
/* Lv.50~59 칼럼니스트 */
.lvl-columnist { color: #78350f; background: linear-gradient(135deg, #fde68a, #fbbf24, #f59e0b); border: 1px solid #f59e0b; box-shadow: 0 1px 3px rgba(245,158,11,.3); }
/* Lv.60~69 글로벌 에디터 */
.lvl-editor { color: #fff; background: linear-gradient(135deg, #f97316, #ea580c, #dc2626); border: 1px solid #fb923c; text-shadow: 0 1px 2px rgba(0,0,0,.3); box-shadow: 0 1px 4px rgba(234,88,12,.3); }
/* Lv.70~79 원로 평론가 */
.lvl-critic { color: #fff; background: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c); border: 1px solid #f87171; text-shadow: 0 1px 3px rgba(0,0,0,.4); box-shadow: 0 0 8px rgba(239,68,68,.4); }
/* Lv.80~89 전설의 해반인 */
.lvl-legend { color: #fef3c7; background: linear-gradient(135deg, #991b1b, #7f1d1d, #991b1b); border: 1px solid #fca5a5; text-shadow: 0 1px 3px rgba(0,0,0,.5); box-shadow: 0 0 10px rgba(153,27,27,.5), inset 0 1px 0 rgba(255,255,255,.1); }
/* Lv.90~99 해반 총편집장 */
.lvl-supreme { color: #fbbf24; background: linear-gradient(135deg, #1f2937, #111827, #1f2937); border: 2px solid #fbbf24; text-shadow: 0 0 6px rgba(251,191,36,.6); box-shadow: 0 0 12px rgba(251,191,36,.3); }
/* Lv.100 해반의 신 */
.lvl-god { color: #fff; background: linear-gradient(90deg, #f43f5e, #a855f7, #3b82f6, #22c55e, #eab308, #f43f5e); background-size: 200% 100%; animation: lvl-rainbow 3s linear infinite; border: 2px solid rgba(255,255,255,.5); text-shadow: 0 1px 4px rgba(0,0,0,.5); box-shadow: 0 0 15px rgba(168,85,247,.4); }
@keyframes lvl-rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
/* 관리자 */
.lvl-admin { color: #fff; background: #dc2626; border: 1px solid #ef4444; }

/* 큰 뱃지 (마이페이지) */
.lvl-big { font-size: 15px; padding: 6px 14px; border-radius: 14px; }
.lvl-big .lvl-icon { font-size: 14px; }

/* 경험치 프로그레스 바 */
.lvl-progress { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.lvl-rank-big { text-align: center; margin-bottom: 14px; }
.lvl-info-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lvl-lv { font-size: 16px; font-weight: 700; color: var(--text-1); }
.lvl-exp-text { font-size: 13px; color: var(--text-3); }
.lvl-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.lvl-bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease; min-width: 2px; }
.lvl-next { text-align: center; margin-top: 8px; font-size: 12px; color: var(--text-4); }
.lvl-next strong { color: var(--text-2); }

/* 바 색상 */
.lvl-bar-seedling { background: #9ca3af; }
.lvl-bar-explorer { background: #4ade80; }
.lvl-bar-observer { background: #22c55e; }
.lvl-bar-analyst { background: linear-gradient(90deg, #14b8a6, #0d9488); }
.lvl-bar-reporter { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.lvl-bar-correspondent { background: linear-gradient(90deg, #818cf8, #6366f1); }
.lvl-bar-strategist { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.lvl-bar-columnist { background: linear-gradient(90deg, #fde68a, #fbbf24); }
.lvl-bar-editor { background: linear-gradient(90deg, #fb923c, #f97316); }
.lvl-bar-critic { background: linear-gradient(90deg, #f87171, #ef4444); }
.lvl-bar-legend { background: linear-gradient(90deg, #fca5a5, #991b1b); }
.lvl-bar-supreme { background: linear-gradient(90deg, #fbbf24, #d97706); }
.lvl-bar-god { background: linear-gradient(90deg, #f43f5e, #a855f7, #3b82f6, #22c55e, #eab308); background-size: 200% 100%; animation: lvl-rainbow 3s linear infinite; }

/* 다크모드 뱃지 보정 */
[data-theme="dark"] .lvl-seedling { color: #6b7280; }
[data-theme="dark"] .lvl-explorer { color: #86efac; background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.3); }
[data-theme="dark"] .lvl-observer { color: #4ade80; background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); }
[data-theme="dark"] .lvl-analyst { color: #5eead4; background: linear-gradient(135deg, rgba(20,184,166,.15), rgba(13,148,136,.15)); border-color: rgba(94,234,212,.3); }
[data-theme="dark"] .lvl-reporter { color: #93c5fd; background: linear-gradient(135deg, rgba(96,165,250,.15), rgba(59,130,246,.15)); border-color: rgba(96,165,250,.3); }
[data-theme="dark"] .lvl-columnist { color: #fde68a; background: linear-gradient(135deg, rgba(253,230,138,.15), rgba(251,191,36,.2)); border-color: rgba(251,191,36,.4); }
/* Lv.30~39 특파원 */
[data-theme="dark"] .lvl-correspondent { background: linear-gradient(135deg, #4f46e5, #3730a3); border-color: rgba(129,140,248,.5); }
/* Lv.40~49 분석가 */
[data-theme="dark"] .lvl-strategist { background: linear-gradient(135deg, #7c3aed, #6d28d9); border-color: rgba(167,139,250,.5); }
/* Lv.60~69 글로벌 에디터 */
[data-theme="dark"] .lvl-editor { background: linear-gradient(135deg, #ea580c, #c2410c, #b91c1c); border-color: rgba(251,146,60,.5); }
/* Lv.70~79 원로 평론가 */
[data-theme="dark"] .lvl-critic { background: linear-gradient(135deg, #dc2626, #b91c1c, #991b1b); border-color: rgba(248,113,113,.5); box-shadow: 0 0 8px rgba(239,68,68,.3); }
/* Lv.80~89 전설의 해반인 */
[data-theme="dark"] .lvl-legend { background: linear-gradient(135deg, #7f1d1d, #691717, #7f1d1d); border-color: rgba(252,165,165,.4); box-shadow: 0 0 10px rgba(153,27,27,.4), inset 0 1px 0 rgba(255,255,255,.08); }
/* Lv.90~99 해반 총편집장 */
[data-theme="dark"] .lvl-supreme { background: linear-gradient(135deg, #111827, #0a0e17, #111827); border-color: #d97706; text-shadow: 0 0 6px rgba(251,191,36,.5); box-shadow: 0 0 12px rgba(251,191,36,.25); }
/* Lv.100 해반의 신 */
[data-theme="dark"] .lvl-god { border-color: rgba(255,255,255,.4); box-shadow: 0 0 15px rgba(168,85,247,.35); }
/* 관리자 */
[data-theme="dark"] .lvl-admin { background: #b91c1c; border-color: rgba(239,68,68,.5); }

/* 마이페이지 탭 */
.mypage-tabs { display: flex; gap: 0; margin-top: 24px; border-bottom: 2px solid var(--border); }
.mypage-tab { flex: 1; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--text-3); background: none; border: none; cursor: pointer; text-align: center; font-family: var(--font); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
.mypage-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.mypage-tab:hover { color: var(--text-1); }
.mypage-tab-content { display: none; padding: 16px 0 0; }
.mypage-tab-content.active { display: block; }
.my-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.my-item:last-child { border-bottom: none; }
.my-item-body { flex: 1; min-width: 0; }
.my-item-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-item-title a { color: inherit; text-decoration: none; }
.my-item-title a:hover { color: var(--primary); }
.my-item-content { font-size: 13px; color: var(--text-2); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.my-item-meta { font-size: 12px; color: var(--text-4); }
.my-item-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.my-item-actions button { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: var(--font); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.my-item-actions button:hover { background: var(--surface-2); }
.my-item-actions .btn-del { color: var(--hot); border-color: #fecaca; }
.my-item-actions .btn-del:hover { background: #fef2f2; }
.my-empty { text-align: center; padding: 40px 0; color: var(--text-4); font-size: 14px; }
.my-more { display: block; text-align: center; padding: 12px; color: var(--primary); font-size: 13px; font-weight: 500; cursor: pointer; background: none; border: 1px solid var(--border); border-radius: 8px; margin-top: 12px; font-family: var(--font); }
.my-more:hover { background: var(--primary-light); }

/* ============================================================
   관리자 (admin.html)
   ============================================================ */
.admin-wrap { max-width: 900px; margin: 30px auto; padding: 0 16px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.admin-header h1 { font-size: 20px; font-weight: 700; color: var(--text-1); }
.admin-stats { display: flex; gap: 16px; }
.stat-badge { padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.stat-pending { background: #fef3c7; color: #92400e; }
.stat-approved { background: #dcfce7; color: #166534; }
.stat-rejected { background: #fef2f2; color: #991b1b; }

.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-btn { padding: 7px 16px; border: 1px solid var(--border); border-radius: 20px; background: #fff; font-size: 13px; cursor: pointer; color: var(--text-2); font-family: var(--font); transition: all 0.15s; }
.filter-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.admin-item.status-approved { border-left: 3px solid #22c55e; }
.admin-item.status-rejected { border-left: 3px solid #ef4444; opacity: 0.6; }
.admin-item.status-pending { border-left: 3px solid #f59e0b; }

.admin-item-body { flex: 1; min-width: 0; }
.admin-item-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; word-break: keep-all; }
.admin-item-orig { font-size: 12px; color: var(--text-3); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-item-meta { display: flex; gap: 8px; font-size: 12px; color: var(--text-4); flex-wrap: wrap; }
.admin-item-meta span { white-space: nowrap; }
.admin-item-summary { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.5; }

/* 소스 컬러 뱃지 */
.admin-src-badge { padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; }
.admin-src-reddit { background: #ff4500; }
.admin-src-youtube { background: #ff0000; }
.admin-src-yahoo { background: #7b2ff2; }
.admin-src-ch, .admin-src-fivech { background: #009688; }
.admin-src-hn { background: #ff6600; }
.admin-src-ptt { background: #3f51b5; }
.admin-src-bilibili { background: #00a1d6; }
.admin-src-bluesky { background: #0085ff; }
.admin-src-fourchan { background: #117743; }

.admin-item-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.btn-approve, .btn-reject, .btn-reset { padding: 6px 14px; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--font); }
.btn-approve { background: #dcfce7; color: #166534; }
.btn-approve:hover { background: #bbf7d0; }
.btn-reject { background: #fef2f2; color: #991b1b; }
.btn-reject:hover { background: #fecaca; }
.btn-reset { background: #f1f5f9; color: var(--text-3); }
.btn-reset:hover { background: #e2e8f0; }
.btn-preview { background: none; border: 1px solid var(--border); color: var(--text-3); padding: 5px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; font-family: var(--font); }
.btn-preview:hover { border-color: var(--primary); color: var(--primary); }

.empty { text-align: center; padding: 60px 0; color: var(--text-3); font-size: 14px; }
.loading { text-align: center; padding: 60px 0; color: var(--text-3); }
.admin-back { margin-top: 20px; text-align: center; }
.admin-back a { color: var(--text-3); font-size: 13px; text-decoration: none; }

/* 관리자 탭 네비게이션 */
.admin-tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid var(--border); }
.admin-tab { padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--text-3); background: none; border: none; cursor: pointer; font-family: var(--font); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
.admin-tab:hover { color: var(--text-1); }
.admin-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.admin-tab .tab-count { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--text-3); }
.admin-tab.active .tab-count { background: var(--brand); color: #fff; }
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }

/* 관리자 검색바 */
.admin-search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.admin-search-input { flex: 1; padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: var(--font); background: var(--surface); color: var(--text-1); }
.admin-search-input:focus { outline: none; border-color: var(--brand); }
.admin-search-btn { padding: 9px 18px; border: none; border-radius: 8px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); }
.admin-search-btn:hover { opacity: 0.9; }

/* 관리자 테이블 */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--border); font-weight: 600; color: var(--text-2); font-size: 12px; white-space: nowrap; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light, #f1f5f9); color: var(--text-1); vertical-align: middle; }
.admin-table tr:hover td { background: var(--surface-2); }
.admin-table .col-actions { white-space: nowrap; }
.admin-table .col-nick { font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table .col-content { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table .col-content.expanded { white-space: normal; max-width: none; word-break: break-word; }
.admin-table .cmt-expandable:hover { background: var(--surface-2); }

/* 관리자 뱃지 */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-admin { background: #dbeafe; color: #1e40af; }
.badge-user { background: #f1f5f9; color: #64748b; }
.badge-active { background: #dcfce7; color: #166534; }
.badge-banned { background: #fef2f2; color: #991b1b; }
.badge-withdrawn { background: #f3f4f6; color: #6b7280; }
.badge-community { background: #e0e7ff; color: #3730a3; }
.badge-article { background: #fef3c7; color: #92400e; }

/* 관리자 액션 버튼 (소형) */
.btn-sm { padding: 4px 10px; border: none; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: var(--font); transition: all 0.15s; }
.btn-sm-danger { background: #fef2f2; color: #991b1b; }
.btn-sm-danger:hover { background: #fecaca; }
.btn-sm-warn { background: #fef3c7; color: #92400e; }
.btn-sm-warn:hover { background: #fde68a; }
.btn-sm-info { background: #dbeafe; color: #1e40af; }
.btn-sm-info:hover { background: #bfdbfe; }
.btn-sm-success { background: #dcfce7; color: #166534; }
.btn-sm-success:hover { background: #bbf7d0; }
.btn-sm-default { background: #f1f5f9; color: var(--text-2); }
.btn-sm-default:hover { background: #e2e8f0; }

/* 관리자 모달 */
.admin-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.admin-modal { background: var(--surface); border-radius: 14px; width: 100%; max-width: 680px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.admin-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.admin-modal-header h2 { font-size: 16px; font-weight: 700; color: var(--text-1); margin: 0; }
.admin-modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-3); padding: 4px; }
.admin-modal-body { padding: 20px; }
.admin-modal-body label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; margin-top: 14px; }
.admin-modal-body label:first-child { margin-top: 0; }
.admin-modal-body input, .admin-modal-body select, .admin-modal-body textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: var(--font); background: var(--surface); color: var(--text-1); box-sizing: border-box; }
.admin-modal-body textarea { resize: vertical; min-height: 80px; }
.admin-modal-body input:focus, .admin-modal-body select:focus, .admin-modal-body textarea:focus { outline: none; border-color: var(--brand); }
.admin-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
.admin-modal-footer .btn-modal { padding: 9px 20px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); }
.admin-modal-footer .btn-modal-primary { background: var(--brand); color: #fff; }
.admin-modal-footer .btn-modal-primary:hover { opacity: 0.9; }
.admin-modal-footer .btn-modal-cancel { background: var(--surface-2, #f1f5f9); color: var(--text-2); }

/* 관리자 페이지네이션 */
.admin-paging { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
.admin-paging button { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 12px; cursor: pointer; font-family: var(--font); color: var(--text-2); }
.admin-paging button.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.admin-paging button:disabled { opacity: 0.4; cursor: default; }

/* 체크박스 */
.admin-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); }

/* 반응형: 관리자 탭 */
@media (max-width: 640px) {
    .admin-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-tab { padding: 10px 14px; font-size: 13px; flex-shrink: 0; }
    .admin-table { font-size: 12px; }
    .admin-table th, .admin-table td { padding: 8px 6px; }
    .admin-modal { max-width: 100%; }
}

/* ============================================================
   토스트 알림
   ============================================================ */
.hb-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
}
.hb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.hb-toast-info { background: var(--brand); color: #fff; }
.hb-toast-success { background: #16a34a; color: #fff; }
.hb-toast-error { background: #dc2626; color: #fff; }

/* ============================================================
   맨 위로 가기 버튼
   ============================================================ */
.scroll-top-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(10px);
    font-size: 18px;
    border: none;
    cursor: pointer;
}
.scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--primary); }

/* ============================================================
   404 에러 페이지
   ============================================================ */
.error-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.error-code { font-size: 80px; font-weight: 800; color: var(--brand-accent); line-height: 1; margin-bottom: 8px; }
.error-title { font-size: 22px; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }
.error-desc { font-size: 14px; color: var(--text-3); margin-bottom: 28px; }
.error-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.error-home-btn {
    padding: 10px 24px; background: var(--primary); color: #fff;
    border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
    transition: background 0.15s;
}
.error-home-btn:hover { background: var(--primary-hover); }
.error-board-btn {
    padding: 10px 24px; background: var(--surface); color: var(--text-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; transition: all 0.15s;
}
.error-board-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ============================================================
   법적 문서 페이지 (이용약관, 개인정보처리방침)
   ============================================================ */
.legal-page { max-width: 740px; margin: 32px auto 60px; padding: 0 20px; flex: 1; }
.legal-card {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 36px 32px;
}
.legal-card h1 { font-size: 22px; font-weight: 800; color: var(--text-1); margin-bottom: 4px; }
.legal-updated { font-size: 13px; color: var(--text-4); margin-bottom: 28px; }
.legal-card h2 { font-size: 15px; font-weight: 700; color: var(--text-1); margin: 24px 0 8px; }
.legal-card p { font-size: 14px; line-height: 1.75; color: var(--text-2); margin-bottom: 8px; }
.legal-card ul { padding-left: 20px; margin-bottom: 12px; }
.legal-card li { font-size: 14px; line-height: 1.75; color: var(--text-2); margin-bottom: 4px; }
.legal-card a { color: var(--primary); }
.legal-back { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
.legal-back a { color: var(--text-3); font-size: 13px; transition: color 0.15s; }
.legal-back a:hover { color: var(--primary); }