/* ═══════════════════════════════════════
   NuroPlay — Sidebar + Main Integrated
   ═══════════════════════════════════════ */

@font-face {
    font-family: 'Cafe24Surround';
    src: url('/font/Cafe24Ssurround-v2.0.otf') format('opentype');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Dunggeunmiso';
    src: url('/font/Hakgyoansim Dunggeunmiso OTF B.otf') format('opentype');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'NexonMaplestory';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'NexonMaplestory';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

:root {
    --c-primary: #0B7FD4;
    --c-primary-h: #0969B2;
    --c-primary-l: #E8F4FD;
    --c-primary-s: #38BDF8;
    --c-dark: #0B1222;
    --c-text: #111827;
    --c-text-2: #4B5563;
    --c-text-3: #9CA3AF;
    --c-border: #E5E7EB;
    --c-bg: #F3F4F6;
    --c-white: #FFFFFF;
    --sidebar-w: 240px;
    --r: 14px;
    --r-sm: 10px;
    --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--c-white);
    color: var(--c-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* 한글 가독성: 단어 중간에서 끊지 않음 */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 제목/문단 한글 줄바꿈 */
h1, h2, h3, h4, h5, h6, p, li, a, span, button, label, th, td {
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* URL, 경로 등 긴 문자열은 강제 줄바꿈 */
code, pre, .break-anywhere { word-break: break-all; overflow-wrap: anywhere; }

/* 모바일 안전장치: 이미지·미디어·iframe 가로 넘침 방지 */
img, video, iframe, svg { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* 터치 타겟 최소 크기 (모바일 UX) */
@media (hover: none) and (pointer: coarse) {
    button, .btn, a.btn, .sidebar__link { min-height: 40px; }
    input, select, textarea { font-size: 16px !important; } /* iOS 줌 방지 */
}

/* ═══════════════════════════════
   인트로 애니메이션
   ═══════════════════════════════ */
.intro {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-white);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.intro.hide {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.intro__text {
    display: flex; gap: 2px;
    font-family: 'Dunggeunmiso', sans-serif;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    color: var(--c-text);
    letter-spacing: -0.02em;
}
.intro__text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) scale(0.6) rotate(8deg);
    animation: introLetter 0.7s cubic-bezier(.175,.885,.32,1.275) forwards;
}
.intro__text span:nth-child(1) { animation-delay: 0.15s; }
.intro__text span:nth-child(2) { animation-delay: 0.25s; }
.intro__text span:nth-child(3) { animation-delay: 0.35s; }
.intro__text span:nth-child(4) { animation-delay: 0.45s; }
.intro__text span:nth-child(5) { animation-delay: 0.6s; }
.intro__text span:nth-child(6) { animation-delay: 0.7s; }
.intro__text span:nth-child(7) { animation-delay: 0.8s; }
.intro__text span:nth-child(8) { animation-delay: 0.9s; }

@keyframes introLetter {
    0% { opacity: 0; transform: translateY(40px) scale(0.6) rotate(8deg); filter: blur(6px); }
    50% { opacity: 1; transform: translateY(-6px) scale(1.08) rotate(-2deg); filter: blur(0); }
    75% { transform: translateY(2px) scale(0.98) rotate(0.5deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); filter: blur(0); }
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

/* ═══════════════════════════════
   사이드바 (항상 왼쪽 고정)
   ═══════════════════════════════ */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w); background: var(--c-white);
    border-right: 1px solid var(--c-border);
    display: flex; flex-direction: column; z-index: 100;
    transition: transform 0.35s var(--ease);
}
.sidebar__top {
    padding: 20px 20px 16px; border-bottom: 1px solid var(--c-border);
}
.sidebar__logo { display: flex; align-items: center; gap: 10px; }
.sidebar__logo img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.sidebar__logo span { font-family: 'Cafe24Surround', sans-serif; font-size: 1.1rem; color: var(--c-text); }
.sidebar__nav { flex: 1; overflow-y: auto; padding: 8px 10px; font-family: 'NexonMaplestory', sans-serif; }
.sidebar__nav::-webkit-scrollbar { width: 3px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

.sidebar__group { margin-bottom: 1px; }

.sidebar__group-toggle {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 9px 12px; border: none; background: none;
    font-family: inherit; font-size: 0.85rem; font-weight: 700; color: var(--c-text-2);
    text-transform: uppercase; letter-spacing: 0.05em;
    cursor: pointer; border-radius: 8px; transition: all 0.2s var(--ease);
    position: relative;
}
.sidebar__group-toggle:hover { background: rgba(0,0,0,0.04); color: var(--c-text); }
.sidebar__group-toggle.open { color: var(--c-text); }
.sidebar__group-toggle span { flex: 1; text-align: left; }

.sidebar__chevron {
    flex-shrink: 0; transition: transform 0.3s var(--ease); opacity: 0.5;
    width: 14px; height: 14px;
}
.sidebar__group-toggle:hover .sidebar__chevron { opacity: 0.8; }
.sidebar__group-toggle.open .sidebar__chevron { transform: rotate(90deg); opacity: 0.9; }

.sidebar__group-items {
    display: none;
    padding: 2px 0 6px 0;
    margin-left: 12px;
    border-left: 2px solid var(--c-border);
    overflow: hidden;
}
.sidebar__group-items.open {
    display: block;
    animation: sidebarSlideIn 0.25s var(--ease);
}
@keyframes sidebarSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.sidebar__group-label {
    display: block; font-size: 0.68rem; font-weight: 700; color: var(--c-text-3);
    text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 12px 6px;
}

.sidebar__link {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; margin-left: 1px;
    font-family: inherit; font-size: 0.88rem; font-weight: 500; color: var(--c-text-2);
    border-radius: 6px; transition: all 0.15s var(--ease);
    position: relative;
}
.sidebar__link svg { flex-shrink: 0; width: 16px; height: 16px; }
.sidebar__link:hover { background: rgba(11,127,212,0.06); color: var(--c-text); }
.sidebar__link.active {
    background: var(--c-primary-l); color: var(--c-primary); font-weight: 600;
}
.sidebar__link.active::before {
    content: ''; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 16px; border-radius: 2px;
    background: var(--c-primary);
}

.sidebar__link--disabled {
    cursor: default; opacity: 0.55; pointer-events: none;
}
.sidebar__link--disabled:hover { background: none; color: var(--c-text-2); }
.sidebar__link--empty { font-style: italic; font-size: 0.75rem; opacity: 0.45; }

.sidebar__ext {
    margin-left: auto; font-size: 0.6rem; font-weight: 700; color: var(--c-text-3);
    background: var(--c-bg); padding: 2px 6px; border-radius: 4px;
}

.sidebar__dot { width: 6px; height: 6px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.sidebar__dot--green { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }

.sidebar__bottom {
    padding: 14px 16px; border-top: 1px solid var(--c-border);
    background: linear-gradient(to top, rgba(243,244,246,0.5), transparent);
}
.sidebar__login-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; font-size: 0.84rem; font-weight: 500; color: var(--c-text-2);
    border-radius: 8px; transition: all 0.2s var(--ease); margin-bottom: 10px;
}
.sidebar__login-btn svg { flex-shrink: 0; width: 18px; height: 18px; }
.sidebar__login-btn img { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; }
.sidebar__login-btn:hover { background: var(--c-primary-l); color: var(--c-primary); }
.sidebar__status {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.73rem; color: var(--c-text-3); font-weight: 500;
    padding-left: 2px;
}

/* ═══════════════════════════════
   모바일 헤더
   ═══════════════════════════════ */
.m-header {
    display: none; position: fixed; top: 0; left: 0; right: 0;
    height: 56px; background: var(--c-white); border-bottom: 1px solid var(--c-border);
    z-index: 200; padding: 0 16px; align-items: center; justify-content: space-between;
}
.m-header__logo { display: flex; align-items: center; gap: 8px; }
.m-header__logo img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.m-header__logo span { font-family: 'Cafe24Surround', sans-serif; font-size: 1rem; color: var(--c-text); }
.m-header__btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 5px;
}
.m-header__btn span {
    display: block; width: 18px; height: 1.5px; background: var(--c-text);
    border-radius: 2px; transition: all 0.3s var(--ease); transform-origin: center;
}
.m-header__btn.active span:first-child { transform: rotate(45deg) translate(2px, 2px); }
.m-header__btn.active span:last-child { transform: rotate(-45deg) translate(2px, -2px); }

/* ═══════════════════════════════
   콘텐츠 영역
   ═══════════════════════════════ */
.content {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
}

.page { display: none; animation: pageIn 0.4s var(--ease); }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* 대시보드 페이지 패딩 */
.page-pad { padding: 32px; background: var(--c-bg); min-height: 100vh; }
.page-header { margin-bottom: 28px; }
.page-header h1, .page-header h2 { font-family: 'Cafe24Surround', sans-serif; font-size: 1.6rem; color: var(--c-text); margin-bottom: 6px; }
.page-header p { font-size: 0.92rem; color: var(--c-text-3); }
/* 대시보드 페이지 히어로 배너 */
.page-hero {
    position: relative; border-radius: 20px; overflow: hidden;
    padding: 48px 40px; color: var(--c-white); margin-bottom: 28px;
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero h1, .page-hero h2 {
    position: relative; z-index: 1;
    font-family: 'Cafe24Surround', sans-serif; font-size: 1.6rem; margin-bottom: 6px;
}
.page-hero p { position: relative; z-index: 1; font-size: 0.92rem; color: rgba(255,255,255,0.6); }

/* ═══════════════════════════════
   서버 규칙 페이지
   ═══════════════════════════════ */
.guide-rules { max-width: 820px; margin: 0 auto; }

/* guide 페이지는 reveal 애니메이션 없이 즉시 표시 */
#page-guide .page-hero,
#page-guide .guide-rules,
#page-guide [data-reveal],
#page-server-guide .page-hero,
#page-server-guide .guide-rules,
#page-server-guide [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

/* 머리말 */
.guide-notice {
    background: #fff; border: 1px solid #E5E7EB; border-radius: 16px;
    padding: 28px 32px; margin-bottom: 20px; line-height: 1.75;
    color: #374151; font-size: 0.93rem;
}
.guide-notice strong { color: #111827; }
.guide-notice__core {
    display: flex; flex-direction: column; gap: 6px;
    margin: 16px 0; padding: 16px 20px;
    background: linear-gradient(135deg, #EEF2FF, #F0F9FF);
    border-left: 4px solid #5865F2; border-radius: 10px;
}
.guide-notice__core span {
    font-size: 0.9rem; font-weight: 600; color: #1E293B;
}
.guide-notice__core span::before { content: '✦ '; color: #5865F2; }
.guide-notice__sub { margin-top: 12px; font-size: 0.85rem; color: #6B7280; line-height: 1.6; }
.guide-notice__date { margin-top: 12px; font-size: 0.8rem; color: #9CA3AF; }

/* 카테고리 탭 */
.guide-tabs {
    display: flex; gap: 8px; margin-bottom: 20px;
    overflow-x: auto; padding-bottom: 4px;
    -ms-overflow-style: none; scrollbar-width: none;
}
.guide-tabs::-webkit-scrollbar { display: none; }
.guide-tab {
    padding: 8px 18px; border-radius: 20px; border: 1px solid #E5E7EB;
    background: #fff; font-size: 0.85rem; font-weight: 500;
    color: #6B7280; cursor: pointer; white-space: nowrap;
    transition: all 0.2s ease;
}
.guide-tab:hover { border-color: #5865F2; color: #5865F2; }
.guide-tab.active {
    background: #5865F2; border-color: #5865F2;
    color: #fff; font-weight: 600;
}

/* 목차 */
.guide-toc {
    background: #fff; border: 1px solid #E5E7EB; border-radius: 16px;
    padding: 24px 28px; margin-bottom: 24px;
}
.guide-toc h4 {
    font-family: 'Cafe24Surround', sans-serif;
    font-size: 1rem; color: #111827; margin-bottom: 16px;
}
.guide-toc__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.guide-toc__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px;
    font-size: 0.87rem; color: #4B5563;
    text-decoration: none; transition: all 0.2s ease;
    border: 1px solid transparent;
}
.guide-toc__item:hover {
    background: #F3F4F6; border-color: #E5E7EB; color: #111827;
}
.guide-toc__item span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: #EEF2FF; color: #5865F2;
    font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}
.guide-toc__item.hidden { display: none; }

/* 카테고리 라벨 */
.guide-cat-label {
    font-family: 'Cafe24Surround', sans-serif;
    font-size: 0.95rem; color: #5865F2;
    padding: 20px 0 10px; margin-top: 8px;
    border-bottom: 2px solid #EEF2FF;
    margin-bottom: 12px;
}
.guide-cat-label.hidden { display: none; }

/* 규칙 섹션 */
.guide-section {
    background: #fff; border: 1px solid #E5E7EB; border-radius: 14px;
    padding: 28px 28px 24px; margin-bottom: 14px;
    transition: box-shadow 0.3s ease;
    scroll-margin-top: 24px;
}
.guide-section:target { box-shadow: 0 0 0 3px rgba(88,101,242,0.2); }
.guide-section.hidden { display: none; }
.guide-section h3 {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Cafe24Surround', sans-serif;
    font-size: 1.1rem; color: #111827;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 2px solid #F3F4F6;
}
.guide-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 10px;
    background: linear-gradient(135deg, #5865F2, #4752C4);
    color: #fff; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.guide-section h4 {
    font-size: 0.95rem; font-weight: 600; color: #374151; margin-bottom: 10px;
}
.guide-section ul { list-style: none; padding: 0; margin: 0; }
.guide-section ul li {
    position: relative; padding: 7px 0 7px 20px;
    font-size: 0.88rem; color: #4B5563; line-height: 1.65;
}
.guide-section ul li::before {
    content: ''; position: absolute; left: 0; top: 15px;
    width: 6px; height: 6px; border-radius: 50%; background: #5865F2;
}
.guide-section ul li strong { color: #111827; }
.guide-section ul li code {
    background: #F3F4F6; padding: 2px 7px; border-radius: 5px;
    font-size: 0.83rem; color: #5865F2;
}
.guide-section ul li a {
    color: #5865F2; text-decoration: underline; text-underline-offset: 2px;
}
.guide-section > p {
    font-size: 0.88rem; color: #4B5563; line-height: 1.65; margin-bottom: 14px;
}

/* 경고 박스 */
.guide-warn {
    margin-top: 14px; padding: 14px 18px;
    background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px;
    font-size: 0.85rem; color: #92400E; line-height: 1.6;
}
.guide-warn::before { content: '⚠️ '; }
.guide-warn strong { color: #78350F; }

/* 심각 (강하게 제재) */
.guide-severe {
    margin-top: 14px; padding: 18px 20px;
    background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px;
}
.guide-severe h4 {
    font-size: 0.9rem; font-weight: 700; color: #991B1B; margin-bottom: 10px;
}
.guide-severe h4::before { content: '🚨 '; }
.guide-severe ul { list-style: none; padding: 0; margin: 0; }
.guide-severe ul li {
    position: relative; padding: 5px 0 5px 18px;
    font-size: 0.85rem; color: #7F1D1D; line-height: 1.6;
}
.guide-severe ul li::before {
    content: ''; position: absolute; left: 0; top: 13px;
    width: 5px; height: 5px; border-radius: 50%; background: #DC2626;
}
.guide-severe > p {
    margin-top: 10px; font-size: 0.85rem; color: #991B1B; line-height: 1.5;
}

/* 처벌 표 */
.guide-punishment {
    background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px;
    padding: 20px; margin-bottom: 14px;
}
.guide-punishment:last-child { margin-bottom: 0; }
.guide-punishment h4 { margin-bottom: 12px; }
.guide-table {
    width: 100%; border-collapse: collapse; font-size: 0.86rem;
}
.guide-table th {
    background: #F3F4F6; padding: 10px 14px; text-align: left;
    font-weight: 600; color: #374151; border-bottom: 2px solid #E5E7EB;
}
.guide-table td {
    padding: 10px 14px; color: #4B5563; border-bottom: 1px solid #F3F4F6;
}
.guide-table tbody tr:last-child td { border-bottom: none; }
.guide-table tbody tr:hover { background: #F3F4F6; }
.guide-table__note { margin-top: 10px; font-size: 0.8rem; color: #9CA3AF; }

/* 증거 그리드 */
.guide-evidence {
    margin-bottom: 16px; padding: 18px 20px;
    background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 10px;
}
.guide-evidence h4 {
    font-size: 0.9rem; font-weight: 600; color: #0C4A6E; margin-bottom: 12px;
}
.guide-evidence__grid {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.guide-evidence__grid span {
    padding: 6px 14px; background: #fff; border: 1px solid #BAE6FD;
    border-radius: 8px; font-size: 0.82rem; color: #0369A1; font-weight: 500;
}

/* 판단 기준 태그 */
.guide-criteria {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.guide-criteria span {
    padding: 8px 16px; background: #EEF2FF; border: 1px solid #C7D2FE;
    border-radius: 8px; font-size: 0.84rem; color: #4338CA; font-weight: 500;
}

/* 닫는 말 */
.guide-closing {
    text-align: center; padding: 40px 24px 24px;
    border-top: 2px solid #F3F4F6; margin-top: 16px;
}
.guide-closing h3 {
    font-family: 'Cafe24Surround', sans-serif;
    font-size: 1.15rem; color: #111827; margin-bottom: 16px;
}
.guide-closing p {
    font-size: 0.9rem; color: #6B7280; line-height: 1.8; margin-bottom: 12px;
}
.guide-closing p strong { color: #111827; }

/* 모바일 반응형 */
@media (max-width: 768px) {
    .guide-rules { padding: 0 2px; }
    .guide-toc__grid { grid-template-columns: 1fr; }
    .guide-toc { padding: 18px 16px; }
    .guide-toc__item { padding: 9px 10px; font-size: 0.84rem; }
    .guide-toc__item span { width: 24px; height: 24px; font-size: 0.7rem; }
    .guide-notice { padding: 18px 16px; font-size: 0.88rem; }
    .guide-notice__core { padding: 12px 14px; }
    .guide-notice__core span { font-size: 0.84rem; }
    .guide-section { padding: 18px 16px 16px; }
    .guide-section h3 { font-size: 1rem; gap: 10px; }
    .guide-num { width: 28px; height: 28px; font-size: 0.72rem; }
    .guide-section ul li { font-size: 0.84rem; padding-left: 16px; }
    .guide-section ul li::before { top: 13px; width: 5px; height: 5px; }
    .guide-section > p { font-size: 0.84rem; }
    .guide-tabs { gap: 6px; padding-bottom: 6px; }
    .guide-tab { padding: 7px 12px; font-size: 0.8rem; }
    .guide-cat-label { font-size: 0.88rem; padding: 14px 0 8px; }
    .guide-warn { padding: 12px 14px; font-size: 0.82rem; }
    .guide-severe { padding: 14px 16px; }
    .guide-severe h4 { font-size: 0.85rem; }
    .guide-severe ul li { font-size: 0.82rem; padding-left: 16px; }
    .guide-severe > p { font-size: 0.82rem; }
    .guide-punishment { padding: 14px; }
    .guide-table { font-size: 0.8rem; }
    .guide-table th { padding: 8px 10px; }
    .guide-table td { padding: 8px 10px; }
    .guide-table__note { font-size: 0.76rem; }
    .guide-evidence { padding: 14px 16px; }
    .guide-evidence h4 { font-size: 0.85rem; }
    .guide-evidence__grid { gap: 6px; }
    .guide-evidence__grid span { padding: 5px 10px; font-size: 0.78rem; }
    .guide-criteria { gap: 6px; }
    .guide-criteria span { padding: 6px 12px; font-size: 0.8rem; }
    .guide-closing { padding: 28px 16px 16px; }
    .guide-closing h3 { font-size: 1.05rem; }
    .guide-closing p { font-size: 0.85rem; }
}
@media (max-width: 480px) {
    .guide-toc__item { padding: 8px; gap: 8px; font-size: 0.82rem; }
    .guide-section { padding: 16px 14px 14px; margin-bottom: 10px; }
    .guide-section h3 { font-size: 0.95rem; gap: 8px; padding-bottom: 10px; }
    .guide-num { width: 26px; height: 26px; font-size: 0.68rem; border-radius: 8px; }
    .guide-tabs { gap: 4px; }
    .guide-tab { padding: 6px 10px; font-size: 0.76rem; }
    .guide-notice { padding: 16px 14px; }
    .guide-notice__core span { font-size: 0.82rem; }
    .guide-warn { font-size: 0.8rem; padding: 10px 12px; }
    .guide-punishment { padding: 12px; }
    .guide-table { font-size: 0.76rem; display: block; overflow-x: auto; }
    .guide-table th, .guide-table td { padding: 7px 8px; white-space: nowrap; }
    .guide-evidence__grid span { padding: 4px 8px; font-size: 0.76rem; }
    .guide-criteria span { padding: 5px 10px; font-size: 0.76rem; }
    .guide-closing p { font-size: 0.82rem; line-height: 1.7; }
}

/* ═══════════════════════════════
   공통
   ═══════════════════════════════ */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot--green { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; font-size: 0.88rem; font-weight: 600;
    border-radius: var(--r-sm); transition: all 0.3s var(--ease);
    cursor: pointer; border: none; white-space: nowrap;
}
.btn--lg { padding: 14px 30px; font-size: 0.92rem; }
.btn--primary { background: var(--c-primary); color: var(--c-white); box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(11,127,212,0.2); }
.btn--primary:hover { background: var(--c-primary-h); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(11,127,212,0.28); }
.btn--ghost { background: transparent; color: var(--c-text-2); border: 1.5px solid var(--c-border); }
.btn--ghost:hover { border-color: var(--c-text-3); color: var(--c-text); transform: translateY(-2px); }
.btn--white { background: var(--c-white); color: var(--c-primary-h); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.12); }

.heading-2 {
    font-family: 'Cafe24Surround', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.35; color: var(--c-text); letter-spacing: -0.03em;
}
.heading-2--white { color: var(--c-white); }
.tag { display: inline-block; font-family: 'Cafe24Surround', sans-serif; font-size: 0.8rem; color: var(--c-primary); letter-spacing: 0.04em; margin-bottom: 16px; }
.tag--light { color: var(--c-primary-s); }


/* ═══════════════════════════════
   상단 네비게이션 (메인 페이지 내부)
   ═══════════════════════════════ */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0); backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
    transition: all 0.4s var(--ease);
}
.nav--scrolled {
    background: rgba(255,255,255,0.92); backdrop-filter: blur(24px);
    border-bottom-color: rgba(0,0,0,0.06);
}
.nav__inner {
    max-width: 900px; margin: 0 auto; padding: 0 32px;
    height: 64px; display: flex; align-items: center; justify-content: center;
    position: relative;
    transform: translateX(calc(var(--sidebar-w) / -2));
}
.nav__links { display: flex; align-items: center; gap: 28px; margin-right: 24px; }
.nav__links a {
    font-size: 0.85rem; font-weight: 500; color: var(--c-text-2);
    transition: color 0.25s var(--ease); position: relative;
}
.nav__links a::after {
    content: ''; position: absolute; bottom: -4px; left: 50%; right: 50%;
    height: 2px; background: var(--c-primary); border-radius: 2px;
    transition: all 0.3s var(--ease);
}
.nav__links a:hover { color: var(--c-primary); }
.nav__links a:hover::after { left: 0; right: 0; }
.nav__right { display: flex; align-items: center; position: absolute; right: 32px; }
.nav__cta {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 16px; background: var(--c-text); color: var(--c-white);
    font-size: 0.8rem; font-weight: 600; border-radius: 8px;
    transition: all 0.3s var(--ease);
}
.nav__cta:hover { background: var(--c-primary); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(11,127,212,0.25); }

/* ═══════════════════════════════
   메인 히어로
   ═══════════════════════════════ */
.hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero__canvas {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(11,127,212,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 60%, rgba(56,189,248,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.hero__inner {
    position: relative; z-index: 2; max-width: 900px; width: 100%;
    padding: 140px 32px 80px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    transform: translateX(calc(var(--sidebar-w) / -2));
}
.hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px 6px 10px; background: var(--c-primary-l);
    border: 1px solid rgba(11,127,212,0.12); border-radius: 100px;
    font-size: 0.8rem; font-weight: 600; color: var(--c-primary-h); margin-bottom: 32px;
}
.hero__badge-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #10B981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.2); animation: dotPulse 2s ease-in-out infinite;
}
.hero__title {
    font-family: 'Cafe24Surround', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.25;
    color: var(--c-text); letter-spacing: -0.04em; margin-bottom: 24px; max-width: 650px;
}
.hero__desc { font-size: clamp(0.9rem, 1.1vw, 1.05rem); color: var(--c-text-2); line-height: 1.8; margin-bottom: 40px; max-width: 480px; }
.hero__actions { display: flex; align-items: center; gap: 12px; margin-bottom: 56px; }
.hero__logo {
    width: clamp(180px, 22vw, 260px); height: auto;
    filter: drop-shadow(0 24px 48px rgba(11,127,212,0.12));
    animation: float 6s ease-in-out infinite;
}
/* 히어로 파티클 */
.hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__particle {
    position: absolute; left: var(--x); top: var(--y);
    width: calc(6px * var(--s)); height: calc(6px * var(--s));
    background: var(--c-primary); border-radius: 50%;
    opacity: 0.15; animation: particleFloat var(--d) ease-in-out infinite alternate;
}
@keyframes particleFloat {
    0% { transform: translate(0, 0) scale(1); opacity: 0.1; }
    50% { opacity: 0.25; }
    100% { transform: translate(30px, -40px) scale(1.4); opacity: 0.08; }
}
/* 히어로 멤버 아바타 */
.hero__members {
    display: flex; align-items: center; gap: 14px; margin-top: 32px;
}
.hero__avatars { display: flex; }
.hero__avatars img {
    width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--c-white);
    object-fit: cover; margin-left: -10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s var(--ease);
}
.hero__avatars img:first-child { margin-left: 0; }
.hero__avatars img:hover { transform: translateY(-4px) scale(1.1); z-index: 2; }
.hero__members span { font-size: 0.82rem; color: var(--c-text-3); font-weight: 500; }
/* 히어로 스크롤 인디케이터 */
.hero__scroll {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 4;
    display: flex; flex-direction: column; align-items: center;
}
.hero__scroll-line {
    width: 1.5px; height: 40px; background: var(--c-border); border-radius: 2px;
    position: relative; overflow: hidden;
}
.hero__scroll-line::after {
    content: ''; position: absolute; top: -100%; left: 0; right: 0; height: 50%;
    background: var(--c-primary); border-radius: 2px;
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine { 0% { top: -50%; } 100% { top: 120%; } }
.hero__gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to top, var(--c-white), transparent); pointer-events: none; z-index: 3; }

/* ═══════════════════════════════
   메인 섹션 공통
   ═══════════════════════════════ */
.section { padding: 100px 0; }
.section--gray { background: var(--c-bg); }
.section__wrap { max-width: 900px; margin: 0 auto; padding: 0 32px; transform: translateX(calc(var(--sidebar-w) / -2)); }
.section__header { margin-bottom: 56px; }

/* ═══════════════════════════════
   숫자
   ═══════════════════════════════ */
.numbers { padding: 64px 0; border-bottom: 1px solid var(--c-border); }
.numbers__grid { max-width: 900px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; transform: translateX(calc(var(--sidebar-w) / -2)); }
.numbers__item { text-align: center; padding: 20px 16px; }
.numbers__icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--c-primary-l); color: var(--c-primary);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.numbers__value { display: block; font-family: 'Cafe24Surround', sans-serif; font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--c-text); margin-bottom: 4px; }
.numbers__label { font-size: 0.82rem; color: var(--c-text-3); font-weight: 500; }

/* ═══════════════════════════════
   소개 카드
   ═══════════════════════════════ */
.about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.about-card {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r);
    padding: 36px 30px; transition: all 0.35s var(--ease); position: relative; overflow: hidden;
}
.about-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 0;
    background: var(--c-primary); border-radius: 0 2px 2px 0; transition: height 0.4s var(--ease);
}
.about-card:hover { border-color: transparent; box-shadow: 0 8px 32px rgba(0,0,0,0.06); transform: translateY(-2px); }
.about-card:hover::before { height: 100%; }
.about-card__icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--c-primary-l); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
    transition: all 0.3s var(--ease);
}
.about-card:hover .about-card__icon { background: var(--c-primary); color: var(--c-white); }
.about-card__num { font-family: 'Cafe24Surround', sans-serif; font-size: 0.82rem; color: var(--c-primary); margin-bottom: 14px; opacity: 0.7; }
.about-card h3 { font-family: 'Cafe24Surround', sans-serif; font-size: 1.1rem; color: var(--c-text); margin-bottom: 10px; }
.about-card p { font-size: 0.88rem; color: var(--c-text-2); line-height: 1.75; }

/* ═══════════════════════════════
   서버 카드 (메인)
   ═══════════════════════════════ */
.srv-card {
    background: linear-gradient(160deg, #0C2D48, #0B1222);
    border-radius: 24px; overflow: hidden; position: relative; color: var(--c-white);
}
.srv-card__glow {
    position: absolute; top: -100px; right: -100px; width: 400px; height: 400px;
    border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,0.12) 0%, transparent 60%);
    pointer-events: none;
}
.srv-card__head { padding: 48px 48px 0; }
.srv-card__sub { font-size: 0.92rem; color: rgba(255,255,255,0.55); line-height: 1.7; margin-top: 14px; }
.srv-card__body { padding: 32px 48px 48px; }
.srv-ip {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 14px 18px; margin-bottom: 28px;
}
.srv-ip__left { display: flex; align-items: center; gap: 10px; }
.srv-ip__dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.srv-ip__label { font-size: 0.82rem; color: rgba(255,255,255,0.45); font-weight: 500; }
.srv-ip__value { font-family: 'Cafe24Surround', monospace; font-size: 1rem; flex: 1; text-align: right; }
.srv-ip__copy {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7);
    font-size: 0.75rem; font-weight: 600; border-radius: 7px; transition: all 0.2s;
}
.srv-ip__copy:hover { background: rgba(255,255,255,0.14); color: var(--c-white); }
.srv-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.srv-feat {
    display: flex; align-items: center; gap: 12px; padding: 18px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; transition: all 0.3s var(--ease);
}
.srv-feat:hover { background: rgba(255,255,255,0.08); color: var(--c-white); transform: translateY(-2px); }
.srv-feat svg { flex-shrink: 0; color: var(--c-primary-s); }
.srv-feat span { font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.75); }

/* ═══════════════════════════════
   멤버 (메인)
   ═══════════════════════════════ */
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.member-card {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r);
    overflow: hidden; transition: all 0.4s var(--ease); position: relative;
}
.member-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); border-color: transparent; }
.member-card__banner { position: relative; height: 100px; overflow: hidden; background: linear-gradient(135deg, var(--c-primary-l), #F0F0F5); }
.member-card__banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.member-card:hover .member-card__banner img { transform: scale(1.06); }
.member-card__avatar {
    width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--c-white);
    overflow: hidden; margin: -32px auto 0; position: relative; z-index: 2;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.member-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-card__info { padding: 12px 16px 20px; text-align: center; }
.member-card__info h3 { font-family: 'Cafe24Surround', sans-serif; font-size: 0.95rem; color: var(--c-text); margin-bottom: 2px; }
.member-card__info span { font-size: 0.75rem; color: var(--c-primary); font-weight: 600; }

/* ═══════════════════════════════
   공지 (공용)
   ═══════════════════════════════ */
.notice-list { border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden; background: var(--c-white); }
.notice-row {
    display: flex; align-items: center; gap: 14px; padding: 18px 22px;
    border-bottom: 1px solid var(--c-border); transition: background 0.2s;
}
.notice-row:last-child { border-bottom: none; }
.notice-row:hover { background: var(--c-bg); }
.notice-badge { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; }
.notice-badge--blue { background: #DBEAFE; color: #1D4ED8; }
.notice-badge--amber { background: #FEF3C7; color: #B45309; }
.notice-badge--green { background: #D1FAE5; color: #047857; }
.notice-badge--purple { background: #EDE9FE; color: #6D28D9; }

.notice-tabs {
    display: flex; gap: 8px; margin-bottom: 20px;
}
.notice-tab {
    padding: 8px 20px; font-size: 0.84rem; font-weight: 600;
    border-radius: 100px; color: var(--c-text-3); background: var(--c-bg);
    border: 1px solid var(--c-border); transition: all 0.25s var(--ease);
}
.notice-tab:hover { color: var(--c-text-2); border-color: var(--c-text-3); }
.notice-tab.active { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.notice-panel { display: none; animation: panelIn 0.3s var(--ease); }
.notice-panel.active { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.notice-row__title { flex: 1; font-size: 0.88rem; font-weight: 500; color: var(--c-text); }
.notice-row__date { flex-shrink: 0; font-size: 0.78rem; color: var(--c-text-3); }
.notice-row__arrow { flex-shrink: 0; color: var(--c-text-3); transition: all 0.25s var(--ease); }
.notice-row:hover .notice-row__arrow { color: var(--c-primary); transform: translateX(3px); }

/* ═══════════════════════════════
   CTA (메인)
   ═══════════════════════════════ */
.cta-card {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-h));
    border-radius: 24px; padding: 56px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    position: relative; overflow: hidden;
}
.cta-card__bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 40% 50% at 0% 50%, rgba(255,255,255,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 100% 30%, rgba(255,255,255,0.06) 0%, transparent 60%);
}
.cta-card__text { position: relative; z-index: 1; }
.cta-card__text h2 { margin-bottom: 6px; }
.cta-card__text p { font-size: 0.95rem; color: rgba(255,255,255,0.7); }
.cta-card > .btn { position: relative; z-index: 1; }

/* ═══════════════════════════════
   푸터
   ═══════════════════════════════ */
.footer { background: var(--c-bg); border-top: 1px solid var(--c-border); }
.footer .section__wrap { transform: translateX(calc(var(--sidebar-w) / -2)); }
.footer__top { padding: 32px 0; display: flex; align-items: center; justify-content: space-between; }
.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer__brand img { border-radius: 8px; object-fit: cover; }
.footer__brand span { font-family: 'Cafe24Surround', sans-serif; font-size: 1rem; color: var(--c-text); }
.footer__links { display: flex; gap: 20px; }
.footer__links a { font-size: 0.85rem; color: var(--c-text-2); font-weight: 500; transition: color 0.2s; }
.footer__links a:hover { color: var(--c-primary); }
.footer__bottom { padding: 16px 0; border-top: 1px solid var(--c-border); text-align: center; }
.footer__bottom span { font-size: 0.78rem; color: var(--c-text-3); }


/* ═══════════════════════════════
   대시보드 페이지 컴포넌트
   ═══════════════════════════════ */
.dash-srv {
    background: linear-gradient(160deg, #0C2D48, #0B1222);
    border-radius: 20px; overflow: hidden; color: var(--c-white);
}
.dash-srv__ip {
    display: flex; align-items: center; gap: 12px; padding: 24px;
    background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-srv__ip span:nth-child(2) { font-size: 0.82rem; color: rgba(255,255,255,0.45); }
.dash-srv__ip code { font-family: 'Cafe24Surround', monospace; font-size: 1rem; flex: 1; text-align: right; }
.dash-copy {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7);
    font-size: 0.75rem; font-weight: 600; border-radius: 7px; transition: all 0.2s;
}
.dash-copy:hover { background: rgba(255,255,255,0.14); color: var(--c-white); }
.dash-srv__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 24px; }
.dash-srv-feat {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 24px 20px; transition: all 0.3s var(--ease);
}
.dash-srv-feat:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.dash-srv-feat svg { color: var(--c-primary-s); margin-bottom: 12px; }
.dash-srv-feat h3 { font-family: 'Cafe24Surround', sans-serif; font-size: 0.95rem; margin-bottom: 6px; }
.dash-srv-feat p { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.6; }

.dash-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.dash-info {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r);
    padding: 18px; display: flex; justify-content: space-between; align-items: center;
}
.dash-info span { font-size: 0.85rem; color: var(--c-text-3); }
.dash-info strong { font-size: 0.88rem; color: var(--c-text); }

.dash-status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dash-status {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r);
    padding: 20px; display: flex; align-items: center; gap: 10px;
}
.dash-status span:nth-child(2) { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--c-text); }
.dash-status strong { font-size: 0.82rem; font-weight: 700; color: #059669; }

.status-category {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r);
    overflow: hidden; margin-bottom: 16px;
}
.status-category__header {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--c-border);
}
.status-category__header svg { color: var(--c-text-2); flex-shrink: 0; }
.status-category__header h3 { font-family: 'Cafe24Surround', sans-serif; font-size: 0.95rem; color: var(--c-text); flex: 1; }
.status-category__badge {
    font-size: 0.72rem; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; letter-spacing: 0.02em;
}
.status-category__badge--green { background: #ECFDF5; color: #059669; }
.status-category__badge--yellow { background: #FFFBEB; color: #D97706; }
.status-category__badge--red { background: #FEF2F2; color: #DC2626; }
.status-category__items { padding: 6px 0; }
.status-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 22px;
    transition: background 0.15s;
}
.status-item:hover { background: var(--c-bg); }
.status-item > span:first-child { flex: 1; font-size: 0.88rem; color: var(--c-text-2); }
.status-item strong { font-size: 0.82rem; font-weight: 600; color: #059669; }

.dash-section { margin-top: 28px; }
.dash-section h2 { font-family: 'Cafe24Surround', sans-serif; font-size: 1.1rem; color: var(--c-text); margin-bottom: 14px; }

.dash-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-stat {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r);
    padding: 20px; text-align: center;
}
.dash-stat__num { display: block; font-family: 'Cafe24Surround', sans-serif; font-size: 1.4rem; color: var(--c-text); margin-bottom: 4px; }
.dash-stat span { font-size: 0.78rem; color: var(--c-text-3); font-weight: 500; }

.dash-download {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r);
    padding: 24px; display: flex; align-items: center; gap: 16px;
    transition: all 0.25s var(--ease);
}
.dash-download:hover { border-color: var(--c-primary); box-shadow: 0 4px 16px rgba(11,127,212,0.08); transform: translateY(-2px); }
.dash-download svg { flex-shrink: 0; color: var(--c-primary); }
.dash-download h3 { font-family: 'Cafe24Surround', sans-serif; font-size: 0.95rem; color: var(--c-text); margin-bottom: 2px; }
.dash-download span { font-size: 0.78rem; color: var(--c-text-3); }

.dash-members { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dash-member {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r);
    overflow: hidden; transition: all 0.3s var(--ease); position: relative;
}
.dash-member:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.07); border-color: transparent; }
.dash-member__banner { height: 90px; overflow: hidden; background: linear-gradient(135deg, var(--c-primary-l), #F0F0F5); }
.dash-member__banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.dash-member:hover .dash-member__banner img { transform: scale(1.05); }
.dash-member__avatar {
    width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--c-white);
    overflow: hidden; margin: -28px auto 0; position: relative; z-index: 2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.dash-member__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-member div:last-child { padding: 10px 16px 18px; text-align: center; }
.dash-member h3 { font-family: 'Cafe24Surround', sans-serif; font-size: 0.95rem; color: var(--c-text); margin-bottom: 2px; }
.dash-member span { font-size: 0.75rem; color: var(--c-primary); font-weight: 600; }


/* ═══════════════════════════════
   상단 우측 버튼
   ═══════════════════════════════ */
.top-btns {
    position: fixed; top: 16px; right: 16px; z-index: 950;
    display: flex; align-items: center; gap: 8px;
}
.top-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px;
    font-size: 0.82rem; font-weight: 600;
    border: 1px solid var(--c-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.25s var(--ease);
    text-decoration: none;
}
.top-btn--discord {
    background: #5865F2; color: #fff; border-color: #5865F2;
}
.top-btn--discord:hover {
    background: #4752C4; border-color: #4752C4;
    box-shadow: 0 4px 12px rgba(88,101,242,0.35);
    transform: translateY(-1px);
}
.top-btn--login {
    background: var(--c-white); color: var(--c-text);
}
.top-btn--login img { width: 24px; height: 24px; border-radius: 50%; }
.top-btn--login:hover {
    background: var(--c-primary); color: #fff; border-color: var(--c-primary);
    box-shadow: 0 4px 12px rgba(11,127,212,0.25);
    transform: translateY(-1px);
}
.top-btn--login:hover svg { stroke: #fff; }

/* ═══════════════════════════════
   봇 대시보드
   ═══════════════════════════════ */
.bot-dash__login-required {
    display: flex; align-items: center; justify-content: center; min-height: 50vh;
}
.bot-dash__login-card {
    text-align: center; background: var(--c-white); border: 1px solid var(--c-border);
    border-radius: 16px; padding: 48px 40px; max-width: 420px; width: 100%;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.bot-dash__login-card h2 { font-size: 1.2rem; color: var(--c-text); margin: 16px 0 8px; }
.bot-dash__login-card p { font-size: 0.85rem; color: var(--c-text-2); margin-bottom: 24px; }
.bot-dash__discord-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; background: #5865F2; color: #fff; border-radius: 8px;
    font-size: 0.9rem; font-weight: 600; transition: all 0.25s var(--ease);
}
.bot-dash__discord-btn:hover { background: #4752C4; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(88,101,242,0.35); }

.bot-dash__userbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; background: var(--c-white); border: 1px solid var(--c-border);
    border-radius: 12px; margin-bottom: 24px;
}
.bot-dash__user { display: flex; align-items: center; gap: 10px; }
.bot-dash__user img { width: 36px; height: 36px; border-radius: 50%; }
.bot-dash__user span { font-size: 0.95rem; font-weight: 600; color: var(--c-text); }
.bot-dash__logout-btn {
    padding: 8px 18px; border: 1px solid var(--c-border); border-radius: 8px;
    font-size: 0.82rem; font-weight: 600; color: var(--c-text-2); background: var(--c-white);
    cursor: pointer; transition: all 0.2s;
}
.bot-dash__logout-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

.bot-dash__server-grid { margin-bottom: 24px; }
.bot-dash__server-grid h2 { font-size: 1.3rem; color: var(--c-text); margin-bottom: 6px; }
.bot-dash__server-desc { font-size: 0.88rem; color: var(--c-text-3); margin-bottom: 20px; }
.bot-dash__servers {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.bot-dash__server-card {
    position: relative; background: var(--c-white); border: 2px solid var(--c-border);
    border-radius: 16px; overflow: hidden; cursor: pointer;
    transition: all 0.3s var(--ease);
}
.bot-dash__server-card:hover {
    border-color: var(--c-primary); transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(11,127,212,0.18);
}
.bot-dash__server-card--no-bot { opacity: 0.55; filter: saturate(0.5); }
.bot-dash__server-card--no-bot:hover { opacity: 0.85; filter: saturate(0.8); border-color: #fbbf24; box-shadow: 0 8px 24px rgba(251,191,36,0.15); }
.bot-dash__server-card-banner {
    width: 100%; height: 90px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover; background-position: center;
    position: relative;
}
.bot-dash__server-card-banner::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
    background: linear-gradient(transparent, var(--c-white));
}
.bot-dash__server-card-content {
    padding: 0 16px 16px; display: flex; align-items: center; gap: 12px;
    position: relative; z-index: 1;
}
.bot-dash__server-card-icon {
    width: 52px; height: 52px; border-radius: 50%; background: var(--c-bg);
    margin-top: -26px; border: 3px solid var(--c-white); flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); object-fit: cover;
}
.bot-dash__server-card-icon--initials {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700; color: var(--c-text-2);
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}
.bot-dash__server-card-info { flex: 1; min-width: 0; }
.bot-dash__server-card-info h3 {
    font-size: 0.95rem; font-weight: 700; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.bot-dash__server-card-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.7rem; font-weight: 600;
    padding: 3px 10px; border-radius: 20px;
}
.bot-dash__server-card-badge--active { background: #d1fae5; color: #065f46; }
.bot-dash__server-card-badge--inactive { background: #fef3c7; color: #92400e; }

.bot-dash__bot-required {
    display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
.bot-dash__warning-card {
    text-align: center; background: #fffbeb; border: 2px solid #fbbf24;
    border-radius: 16px; padding: 40px 32px; max-width: 480px; width: 100%;
}
.bot-dash__warning-card svg { margin: 0 auto 16px; }
.bot-dash__warning-card h3 { font-size: 1.15rem; color: #92400e; margin-bottom: 8px; }
.bot-dash__warning-card p { font-size: 0.9rem; color: #78350f; margin-bottom: 24px; }
.bot-dash__invite-main-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; background: linear-gradient(135deg, #0b7fd4, #06b6d4);
    color: #fff; border-radius: 10px; font-size: 0.9rem; font-weight: 600;
    transition: all 0.25s var(--ease); text-decoration: none;
}
.bot-dash__invite-main-btn:hover {
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(11,127,212,0.4);
}

.bot-dash__server-header {
    background: var(--c-white); border: 1px solid var(--c-border);
    border-radius: 16px; overflow: hidden; margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.bot-dash__server-banner {
    width: 100%; height: 140px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover; background-position: center;
    position: relative;
}
.bot-dash__server-banner::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50px;
    background: linear-gradient(transparent, var(--c-white));
}
.bot-dash__server-info {
    padding: 0 28px 24px; display: flex; align-items: center; gap: 18px;
    position: relative; z-index: 1;
}
.bot-dash__server-icon {
    width: 72px; height: 72px; border-radius: 50%;
    margin-top: -36px; border: 4px solid var(--c-white);
    background: var(--c-bg); object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.bot-dash__server-info h2 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); margin-bottom: 6px; }
.bot-dash__change-server {
    padding: 7px 16px; background: var(--c-bg); border: 1px solid var(--c-border);
    border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: var(--c-text-2);
    cursor: pointer; transition: all 0.25s var(--ease);
}
.bot-dash__change-server:hover {
    background: var(--c-primary); color: #fff; border-color: var(--c-primary);
    box-shadow: 0 4px 12px rgba(11,127,212,0.25); transform: translateY(-1px);
}

.bot-dash__tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    background: var(--c-white); border: 1px solid var(--c-border);
    border-radius: 12px; padding: 6px; overflow-x: auto;
}
.bot-dash__tab {
    padding: 10px 20px; background: none; border: none; border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; color: var(--c-text-3);
    cursor: pointer; transition: all 0.25s var(--ease); white-space: nowrap;
}
.bot-dash__tab:hover { color: var(--c-text); background: var(--c-bg); }
.bot-dash__tab.active {
    color: #111; background: var(--c-primary-l, #E8F4FD);
    box-shadow: 0 2px 8px rgba(11,127,212,0.15);
    border: 1px solid rgba(11,127,212,0.3);
}

.bot-dash__tab-content { display: none; animation: fadeIn 0.3s ease; }
.bot-dash__tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.bot-dash__invite-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bot-dash__invite-card {
    background: var(--c-white); border: 2px solid var(--c-border); border-radius: 16px;
    padding: 28px 20px; text-align: center; transition: all 0.3s var(--ease);
    text-decoration: none; display: flex; flex-direction: column; align-items: center;
    position: relative; overflow: hidden;
}
.bot-dash__invite-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    opacity: 0; transition: opacity 0.3s;
}
.bot-dash__invite-card--main::before { background: linear-gradient(90deg, #0b7fd4, #06b6d4); }
.bot-dash__invite-card--music::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.bot-dash__invite-card--tts::before { background: linear-gradient(90deg, #10b981, #34d399); }
.bot-dash__invite-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.bot-dash__invite-card:hover::before { opacity: 1; }
.bot-dash__invite-icon {
    width: 68px; height: 68px; border-radius: 16px; display: flex;
    align-items: center; justify-content: center; margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.bot-dash__invite-card--main .bot-dash__invite-icon { background: linear-gradient(135deg, #0b7fd4, #06b6d4); color: #fff; }
.bot-dash__invite-card--main:hover { border-color: #0b7fd4; }
.bot-dash__invite-card--music .bot-dash__invite-icon { background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: #fff; }
.bot-dash__invite-card--music:hover { border-color: #8b5cf6; }
.bot-dash__invite-card--tts .bot-dash__invite-icon { background: linear-gradient(135deg, #10b981, #34d399); color: #fff; }
.bot-dash__invite-card--tts:hover { border-color: #10b981; }
.bot-dash__invite-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--c-text); margin-bottom: 6px; }
.bot-dash__invite-card p { font-size: 0.8rem; color: var(--c-text-3); margin-bottom: 16px; line-height: 1.4; }
.bot-dash__invite-btn-text {
    display: inline-block; padding: 9px 24px; background: var(--c-primary);
    color: #fff; border-radius: 8px; font-size: 0.85rem; font-weight: 600;
    transition: all 0.25s; box-shadow: 0 2px 8px rgba(11,127,212,0.2);
}
.bot-dash__invite-card:hover .bot-dash__invite-btn-text { box-shadow: 0 4px 14px rgba(11,127,212,0.35); }

.bot-dash__settings-list { display: flex; flex-direction: column; gap: 10px; }
.bot-dash__setting-card {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px;
    padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; transition: all 0.25s var(--ease);
}
.bot-dash__setting-card:hover {
    border-color: var(--c-primary); box-shadow: 0 4px 16px rgba(11,127,212,0.08);
    transform: translateX(4px);
}
.bot-dash__setting-label { display: flex; align-items: center; gap: 14px; flex: 1; }
.bot-dash__setting-icon {
    font-size: 1.4rem; flex-shrink: 0; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-bg); border-radius: 10px;
}
.bot-dash__setting-label h4 { font-size: 0.92rem; font-weight: 600; color: var(--c-text); margin-bottom: 2px; }
.bot-dash__setting-label p { font-size: 0.78rem; color: var(--c-text-3); }
.bot-dash__select {
    min-width: 200px; padding: 9px 14px; border: 1px solid var(--c-border);
    border-radius: 8px; font-size: 0.85rem; background: var(--c-bg);
    color: var(--c-text); cursor: pointer; outline: none; transition: all 0.2s;
}
.bot-dash__select:focus { border-color: var(--c-primary); background: var(--c-white); }

.bot-dash__setting-card--multi { flex-wrap: wrap; }
.bot-dash__multi-select { width: 100%; margin-top: 8px; }
.bot-dash__multi-selected {
    display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px;
}
.bot-dash__multi-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; background: var(--c-primary-l); color: var(--c-primary);
    border-radius: 6px; font-size: 0.82rem; font-weight: 600;
}
.bot-dash__multi-tag-remove {
    background: none; border: none; cursor: pointer; font-size: 1rem;
    color: var(--c-primary); opacity: 0.6; padding: 0; line-height: 1;
}
.bot-dash__multi-tag-remove:hover { opacity: 1; }
.bot-dash__multi-add {
    margin-top: 8px; padding: 7px 14px; background: var(--c-bg);
    border: 1px dashed var(--c-border); border-radius: 8px;
    font-size: 0.82rem; font-weight: 600; color: var(--c-text-3);
    cursor: pointer; transition: all 0.2s;
}
.bot-dash__multi-add:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-l); }
.bot-dash__multi-dropdown {
    display: none; position: absolute; z-index: 100; margin-top: 4px;
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 200px; overflow-y: auto;
    min-width: 220px;
}
.bot-dash__multi-dropdown.open { display: block; }
.bot-dash__multi-dropdown-item {
    padding: 9px 14px; font-size: 0.85rem; color: var(--c-text);
    cursor: pointer; transition: background 0.15s;
}
.bot-dash__multi-dropdown-item:hover { background: var(--c-primary-l); color: var(--c-primary); }
.bot-dash__multi-dropdown-item.selected { opacity: 0.4; pointer-events: none; }

.bot-dash__setting-warn {
    padding: 10px 16px; background: #fef3c7; border: 1px solid #fbbf24;
    border-radius: 8px; font-size: 0.82rem; font-weight: 500; color: #92400e;
}

.bot-dash__bot-status-list {
    display: flex; flex-direction: column; gap: 8px;
}
.bot-dash__bot-status-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-radius: 10px;
    background: var(--c-card, #23272e); border: 1px solid var(--c-border, #2d3238);
}
.bot-dash__bot-status-item.joined {
    border-left: 3px solid #22c55e;
}
.bot-dash__bot-status-item.not-joined {
    border-left: 3px solid #ef4444; opacity: 0.7;
}
.bot-dash__bot-status-item.premium-locked {
    border-left: 3px solid #fbbf24; opacity: 0.5;
}
.bot-dash__bot-status-left {
    display: flex; align-items: center; gap: 10px;
}
.bot-dash__bot-status-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.bot-dash__bot-status-dot.online { background: #22c55e; }
.bot-dash__bot-status-dot.offline { background: #ef4444; }
.bot-dash__bot-status-dot.locked { background: #fbbf24; }
.bot-dash__bot-status-name {
    font-weight: 600; font-size: 0.9rem; color: var(--text-primary, #e0e0e0);
}
.bot-dash__bot-status-badge {
    font-size: 0.72rem; padding: 2px 8px; border-radius: 4px; font-weight: 600;
}
.bot-dash__bot-status-badge.joined { background: rgba(34,197,94,0.15); color: #22c55e; }
.bot-dash__bot-status-badge.not-joined { background: rgba(239,68,68,0.15); color: #ef4444; }
.bot-dash__bot-status-badge.locked { background: rgba(251,191,36,0.15); color: #fbbf24; }
.bot-dash__bot-status-invite {
    font-size: 0.78rem; color: var(--c-primary, #7c8aff); text-decoration: none;
    font-weight: 500; margin-left: 8px;
}
.bot-dash__bot-status-invite:hover { text-decoration: underline; }
.bot-dash__bot-status-separator {
    padding: 6px 0; text-align: center; font-size: 0.75rem; font-weight: 600;
    color: #fbbf24; letter-spacing: 1px; border-top: 1px dashed rgba(251,191,36,0.3);
    margin-top: 4px;
}

/* 봇 상태 페이지 카드 */
.bot-status-card {
    background: var(--c-white, #1a1e25); border: 1px solid var(--c-border, #2d3238);
    border-radius: 12px; padding: 18px 20px; margin-bottom: 12px;
}
.bot-status-card__header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.bot-status-card__left {
    display: flex; align-items: center; gap: 12px;
}
.bot-status-card__dot {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.bot-status-card__dot.online { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.bot-status-card__dot.offline { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.5); }
.bot-status-card__name {
    font-weight: 700; font-size: 0.95rem; color: var(--c-text, #e0e0e0);
}
.bot-status-card__right {
    display: flex; align-items: center; gap: 12px; font-size: 0.8rem;
}
.bot-status-card__ping {
    color: var(--c-text-light, #999); font-size: 0.78rem;
}
.bot-status-card__badge {
    padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700;
}
.bot-status-card__badge.online { background: rgba(34,197,94,0.15); color: #22c55e; }
.bot-status-card__badge.offline { background: rgba(239,68,68,0.15); color: #ef4444; }
.bot-status-card__bar {
    display: flex; gap: 2px; height: 28px; align-items: flex-end;
}
.bot-status-card__bar-segment {
    flex: 1; border-radius: 2px; min-width: 3px; transition: opacity 0.2s;
    cursor: default;
}
.bot-status-card__bar-segment.up { background: #22c55e; }
.bot-status-card__bar-segment.down { background: #ef4444; }
.bot-status-card__bar-segment.unknown { background: var(--c-border, #2d3238); }
.bot-status-card__bar-segment:hover { opacity: 0.7; }
.bot-status-card__bar-label {
    display: flex; justify-content: space-between; font-size: 0.68rem;
    color: var(--c-text-light, #777); margin-top: 4px;
}
.bot-status-card__guilds {
    font-size: 0.75rem; color: var(--c-text-light, #999);
}


.bot-dash__section {
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: 12px;
    padding: 24px; margin-bottom: 16px;
}
.bot-dash__section h2 {
    font-family: 'Cafe24Surround', sans-serif; font-size: 1.05rem; color: var(--c-text);
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border);
}

.bot-dash__cmd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.bot-dash__cmd-group {
    background: var(--c-bg); border-radius: 10px; padding: 16px;
}
.bot-dash__cmd-group h3 { font-size: 0.88rem; color: var(--c-text); margin-bottom: 10px; }
.bot-dash__cmd {
    font-size: 0.8rem; color: var(--c-text-2); padding: 5px 10px;
    background: var(--c-white); border-radius: 6px; margin-bottom: 4px;
    font-family: 'Consolas', 'Monaco', monospace; border: 1px solid var(--c-border);
}

.bot-dash__save-bar {
    display: flex; align-items: center; justify-content: flex-end; gap: 16px;
    padding: 24px; position: sticky; bottom: 16px;
    background: var(--c-white); border: 1px solid var(--c-border);
    border-radius: 14px; margin-top: 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}
.bot-dash__save-msg { font-size: 0.85rem; font-weight: 600; }
.bot-dash__save-msg.success { color: #10b981; }
.bot-dash__save-msg.error { color: #ef4444; }
.bot-dash__save-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 32px; background: linear-gradient(135deg, #0b7fd4, #0969b2); color: #fff;
    border-radius: 10px; font-size: 0.9rem; font-weight: 700;
    border: none; cursor: pointer; transition: all 0.3s var(--ease);
    box-shadow: 0 4px 12px rgba(11,127,212,0.25);
}
.bot-dash__save-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(11,127,212,0.4); }
.bot-dash__save-btn:active { transform: translateY(0); }
.bot-dash__save-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════
   로그인 페이지
   ═══════════════════════════════ */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 40px 20px;
}
.login-card {
    width: 100%; max-width: 400px;
    background: var(--c-white); border: 1px solid var(--c-border);
    border-radius: 16px; padding: 40px 36px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.login-card__logo {
    text-align: center; margin-bottom: 32px;
}
.login-card__logo img { margin: 0 auto 12px; }
.login-card__logo h1 {
    font-family: 'Cafe24Surround', sans-serif;
    font-size: 1.4rem; color: var(--c-text); margin-bottom: 4px;
}
.login-card__logo p { font-size: 0.85rem; color: var(--c-text-3); }
.login-form { display: flex; flex-direction: column; gap: 18px; }
.login-field label {
    display: block; font-size: 0.8rem; font-weight: 600;
    color: var(--c-text-2); margin-bottom: 6px;
}
.login-field input {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--c-border); border-radius: 8px;
    font-size: 0.88rem; color: var(--c-text);
    background: var(--c-bg); outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-field input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(11,127,212,0.1);
}
.login-field input::placeholder { color: var(--c-text-3); }
.login-submit {
    width: 100%; padding: 12px;
    background: var(--c-primary); color: #fff;
    border: none; border-radius: 8px;
    font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: all 0.25s var(--ease);
    margin-top: 4px;
}
.login-submit:hover {
    background: var(--c-primary-h);
    box-shadow: 0 4px 14px rgba(11,127,212,0.3);
    transform: translateY(-1px);
}
.login-card__footer {
    text-align: center; margin-top: 20px;
    font-size: 0.8rem; color: var(--c-text-3);
}
.login-card__footer a { color: var(--c-primary); font-weight: 500; }
.login-card__footer a:hover { text-decoration: underline; }
.login-card__footer span { margin: 0 6px; }
.login-divider {
    display: flex; align-items: center; gap: 12px; margin: 20px 0;
}
.login-divider::before, .login-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--c-border);
}
.login-divider span { font-size: 0.75rem; color: var(--c-text-3); font-weight: 500; }
.login-social {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 11px; border-radius: 8px;
    font-size: 0.88rem; font-weight: 600;
    text-decoration: none; transition: all 0.25s var(--ease);
    margin-bottom: 4px;
}
.login-social--discord {
    background: #5865F2; color: #fff; border: 1px solid #5865F2;
}
.login-social--discord:hover {
    background: #4752C4; border-color: #4752C4;
    box-shadow: 0 4px 14px rgba(88,101,242,0.35);
    transform: translateY(-1px);
}
.login-social--email {
    background: #EA4335; color: #fff; border: 1px solid #EA4335;
}
.login-social--email:hover {
    background: #D33426; border-color: #D33426;
    box-shadow: 0 4px 14px rgba(234,67,53,0.35);
    transform: translateY(-1px);
}
.reg-step { display: none; }
.reg-step.active { display: block; }
.reg-email-row { display: flex; gap: 8px; }
.reg-email-row input { flex: 1; }
.reg-send-code {
    padding: 10px 16px; border: none; border-radius: 8px;
    background: var(--c-primary); color: #fff;
    font-size: 0.82rem; font-weight: 700; cursor: pointer;
    white-space: nowrap; transition: all 0.25s var(--ease);
}
.reg-send-code:hover { background: var(--c-primary-h); }
.reg-send-code:disabled { background: var(--c-text-3); cursor: not-allowed; }
.reg-msg {
    text-align: center; font-size: 0.82rem; min-height: 20px;
    margin-top: 12px; font-weight: 500;
}
.reg-msg.success { color: #10B981; }
.reg-msg.error { color: #EF4444; }

/* ═══════════════════════════════
   유저 드롭다운 메뉴
   ═══════════════════════════════ */
.user-menu-wrap { position: relative; }
.user-dropdown {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 0;
    min-width: 160px; background: var(--c-white);
    border: 1px solid var(--c-border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px; z-index: 1000;
    animation: dropFadeIn 0.15s ease;
}
.user-dropdown.active { display: block; }
.user-dropdown__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 7px;
    font-size: 0.85rem; font-weight: 500; color: var(--c-text);
    text-decoration: none; transition: background 0.15s ease;
}
.user-dropdown__item:hover { background: var(--c-bg); }
.user-dropdown__item--danger { color: #ef4444; }
.user-dropdown__item--danger:hover { background: rgba(239,68,68,0.08); }
.user-dropdown__item svg { flex-shrink: 0; }

#topMenuWrap .user-dropdown {
    bottom: auto; top: calc(100% + 8px); left: auto; right: 0;
}

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

/* ═══════════════════════════════
   프로필 페이지
   ═══════════════════════════════ */
.profile-page {
    max-width: 720px; margin: 0 auto; padding-bottom: 60px;
}
.profile-banner {
    position: relative; width: 100%; height: 200px;
    border-radius: 16px 16px 0 0; overflow: hidden;
    background: linear-gradient(135deg, #5865F2, #EB459E);
}
.profile-banner__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(transparent 40%, rgba(0,0,0,0.4));
}
.profile-card {
    background: var(--c-white); border: 1px solid var(--c-border);
    border-top: none; border-radius: 0 0 16px 16px;
    padding: 0 32px 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    margin-top: -1px;
}
.profile-card__header {
    display: flex; align-items: flex-end; gap: 20px;
    padding-top: 60px; margin-top: -48px; padding-bottom: 24px;
    border-bottom: 1px solid var(--c-border);
    flex-wrap: wrap;
}
.profile-avatar-wrap {
    position: relative; flex-shrink: 0;
}
.profile-avatar {
    width: 96px; height: 96px; border-radius: 50%;
    border: 4px solid var(--c-white);
    object-fit: cover; background: var(--c-bg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.profile-badge {
    position: absolute; bottom: 2px; right: 2px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #43B581; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    border: 3px solid var(--c-white);
}
.profile-names { flex: 1; min-width: 0; padding-bottom: 4px; }
.profile-displayname {
    font-size: 1.5rem; font-weight: 800; color: var(--c-text);
    margin: 0; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-username {
    font-size: 0.9rem; color: var(--c-text-3); margin: 4px 0 0;
}
.profile-actions { display: flex; gap: 8px; flex-shrink: 0; }
.profile-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; border: none;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
}
.profile-btn--dashboard {
    background: #5865F2; color: #fff;
}
.profile-btn--dashboard:hover {
    background: #4752C4; transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(88,101,242,0.3);
}
.profile-btn--logout {
    background: var(--c-bg); color: var(--c-text-2);
    border: 1px solid var(--c-border);
}
.profile-btn--logout:hover {
    background: rgba(239,68,68,0.1); color: #ef4444;
    border-color: rgba(239,68,68,0.3);
}

.profile-section {
    margin-top: 28px;
}
.profile-section__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 1rem; font-weight: 700; color: var(--c-text);
    margin: 0 0 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border);
}
.profile-section__title svg { color: var(--c-primary); }

.profile-info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.profile-info-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: var(--c-bg);
    border-radius: 10px; border: 1px solid var(--c-border);
}
.profile-info-label {
    font-size: 0.82rem; color: var(--c-text-3); font-weight: 500;
}
.profile-info-value {
    font-size: 0.88rem; color: var(--c-text); font-weight: 600;
}

.profile-stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.profile-stat-card {
    text-align: center; padding: 20px 12px;
    background: var(--c-bg); border-radius: 12px;
    border: 1px solid var(--c-border);
    transition: all 0.2s ease;
}
.profile-stat-card:hover {
    border-color: var(--c-primary);
    box-shadow: 0 2px 12px rgba(88,101,242,0.1);
    transform: translateY(-2px);
}
.profile-stat-icon { font-size: 1.5rem; margin-bottom: 6px; }
.profile-stat-value {
    font-size: 1.1rem; font-weight: 800; color: var(--c-text);
}
.profile-stat-label {
    font-size: 0.75rem; color: var(--c-text-3); margin-top: 2px;
}

.profile-collection {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.profile-collection__tag {
    display: inline-block; padding: 6px 14px;
    background: linear-gradient(135deg, rgba(88,101,242,0.12), rgba(235,69,158,0.1));
    border: 1px solid rgba(88,101,242,0.2);
    border-radius: 20px; font-size: 0.82rem; font-weight: 600;
    color: #5865F2;
}
.profile-collection__empty {
    font-size: 0.85rem; color: var(--c-text-3);
}

.profile-intro {
    font-size: 0.92rem; color: var(--c-text-2); line-height: 1.6;
    margin: 0; white-space: pre-wrap; word-break: break-word;
}

.profile-edit-btn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 6px; border: 1px solid var(--c-border);
    background: var(--c-bg); color: var(--c-text-2);
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
}
.profile-edit-btn:hover {
    background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}

.profile-socials {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.profile-social-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px;
    font-size: 0.85rem; font-weight: 600;
    text-decoration: none; transition: all 0.2s ease;
    border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text);
}
.profile-social-link:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.profile-social-link--instagram:hover { border-color: #E1306C; color: #E1306C; }
.profile-social-link--tiktok:hover { border-color: #000; color: #000; }
.profile-social-link--twitter:hover { border-color: #1DA1F2; color: #1DA1F2; }
.profile-social-link--youtube:hover { border-color: #FF0000; color: #FF0000; }

/* 프로필 수정 모달 */
.profile-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
}
.profile-modal-overlay.active { display: flex; }
.profile-modal {
    background: var(--c-white); border-radius: 16px;
    width: 90%; max-width: 480px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    animation: dropFadeIn 0.2s ease;
}
.profile-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--c-border);
}
.profile-modal__header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.profile-modal__close {
    background: none; border: none; font-size: 1.5rem;
    color: var(--c-text-3); cursor: pointer; line-height: 1;
}
.profile-modal__close:hover { color: var(--c-text); }
.profile-modal__body { padding: 24px; }
.profile-modal__label {
    display: block; font-size: 0.82rem; font-weight: 600;
    color: var(--c-text-2); margin-bottom: 8px;
}
.profile-modal__textarea {
    width: 100%; min-height: 80px; padding: 12px; border-radius: 10px;
    border: 1px solid var(--c-border); background: var(--c-bg);
    font-size: 0.88rem; color: var(--c-text); resize: vertical;
    font-family: inherit; transition: border-color 0.2s ease;
}
.profile-modal__textarea:focus { outline: none; border-color: var(--c-primary); }
.profile-modal__divider { height: 1px; background: var(--c-border); margin: 20px 0; }
.profile-modal__field {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.profile-modal__icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
}
.profile-modal__icon--instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.profile-modal__icon--tiktok { background: #000; color: #fff; }
.profile-modal__icon--twitter { background: #000; color: #fff; }
.profile-modal__icon--youtube { background: #FF0000; color: #fff; }
.profile-modal__input {
    flex: 1; padding: 10px 14px; border-radius: 8px;
    border: 1px solid var(--c-border); background: var(--c-bg);
    font-size: 0.85rem; color: var(--c-text); font-family: inherit;
    transition: border-color 0.2s ease;
}
.profile-modal__input:focus { outline: none; border-color: var(--c-primary); }
.profile-modal__footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 16px 24px; border-top: 1px solid var(--c-border);
}
.profile-modal__btn {
    padding: 10px 20px; border-radius: 8px; border: none;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
}
.profile-modal__btn--cancel {
    background: var(--c-bg); color: var(--c-text-2);
    border: 1px solid var(--c-border);
}
.profile-modal__btn--cancel:hover { background: var(--c-border); }
.profile-modal__btn--save { background: var(--c-primary); color: #fff; }
.profile-modal__btn--save:hover { background: var(--c-primary-h); transform: translateY(-1px); }

/* ══════════════════════════════════
   커뮤니티
   ══════════════════════════════════ */

/* 전체 레이아웃 */
.cm {
    display: flex; height: calc(100vh - 56px); overflow: hidden;
    border-radius: 16px; border: 1px solid var(--c-border);
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

/* 채널 사이드바 */
.cm-channels {
    width: 250px; flex-shrink: 0; background: var(--c-white);
    border-right: 1px solid var(--c-border); overflow-y: auto;
    display: flex; flex-direction: column;
}
.cm-channels__header {
    padding: 20px 18px 14px; border-bottom: 1px solid var(--c-border);
    background: linear-gradient(180deg, rgba(139,92,246,0.04), transparent);
}
.cm-channels__header h3 {
    margin: 0; font-size: 1rem; font-weight: 800;
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cm-channels__stats {
    display: flex; gap: 4px; font-size: 0.7rem; color: var(--c-text-3); margin-top: 8px;
}
.cm-channels__dot { opacity: 0.4; }
.cm-channels__group { padding: 14px 12px 4px; }
.cm-channels__category {
    display: block; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--c-text-3); padding: 0 6px 8px; user-select: none;
}
.cm-channel {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 14px; border-radius: 8px; border: none;
    background: transparent; color: var(--c-text-2);
    font-size: 0.83rem; font-weight: 500; cursor: pointer;
    transition: all 0.15s ease; text-align: left;
    position: relative;
}
.cm-channel:hover { background: rgba(88,101,242,0.06); color: var(--c-text); }
.cm-channel.active {
    background: rgba(88,101,242,0.1); color: var(--c-primary); font-weight: 600;
}
.cm-channel.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--c-primary);
}
.cm-channel svg { flex-shrink: 0; opacity: 0.5; }
.cm-channel.active svg { opacity: 1; }

/* 인기글 (채널사이드바 내) */
.cm-popular { padding: 0 6px; }
.cm-popular__empty { font-size: 0.75rem; color: var(--c-text-3); padding: 4px 0; }
.cm-popular__item {
    display: flex; align-items: center; gap: 8px; padding: 6px 4px;
    cursor: pointer; font-size: 0.78rem; transition: all 0.15s;
    border-radius: 6px;
}
.cm-popular__item:hover { background: rgba(88,101,242,0.05); color: var(--c-primary); }
.cm-popular__rank {
    width: 20px; height: 20px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 800; flex-shrink: 0;
}
.cm-popular__rank:nth-child(1) { background: linear-gradient(135deg,#F59E0B,#EF4444); color: #fff; }
.cm-popular__item:nth-child(1) .cm-popular__rank { background: linear-gradient(135deg,#F59E0B,#EF4444); color: #fff; }
.cm-popular__item:nth-child(2) .cm-popular__rank { background: var(--c-primary); color: #fff; }
.cm-popular__item:nth-child(n+3) .cm-popular__rank { background: var(--c-border); color: var(--c-text-2); }
.cm-popular__title {
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500;
}
.cm-popular__likes { font-size: 0.7rem; color: var(--c-text-3); flex-shrink: 0; }

/* 메인 컨텐츠 */
.cm-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--c-bg); }

/* 상단 바 */
.cm-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; border-bottom: 1px solid var(--c-border);
    background: var(--c-white); flex-shrink: 0;
}
.cm-topbar__channel {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.92rem; font-weight: 700; color: var(--c-text);
}
.cm-topbar__channel svg { color: var(--c-text-3); }

/* 게시판 뷰 */
.cm-board-view { flex: 1; overflow-y: auto; padding: 20px 24px; }

.fc-write-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, var(--c-primary), #8B5CF6); color: #fff;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(88,101,242,0.25);
}
.fc-write-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(88,101,242,0.35); }

/* ─── 채팅 뷰 (메신저 스타일) ─── */
.cm-chat-view {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; background: #E8E4DF;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(88,101,242,0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139,92,246,0.03) 0%, transparent 50%);
}

/* 메시지 영역 */
.cm-chat-messages {
    flex: 1; overflow-y: auto; padding: 20px 24px;
    display: flex; flex-direction: column; gap: 6px;
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23c8c4bf' fill-opacity='0.25'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='60' height='60'/%3E%3C/svg%3E");
}
.cm-chat-messages::-webkit-scrollbar { width: 6px; }
.cm-chat-messages::-webkit-scrollbar-track { background: transparent; }
.cm-chat-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }

/* 개별 메시지 */
.cm-chat-msg {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 2px 0; position: relative;
    max-width: 85%; animation: msgIn 0.2s ease;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.cm-chat-msg__avatar {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* 말풍선 바디 */
.cm-chat-msg__body {
    min-width: 0; flex: 1;
    background: var(--c-white); border-radius: 18px 18px 18px 4px;
    padding: 10px 14px; position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.cm-chat-msg__head {
    display: flex; align-items: baseline; gap: 6px;
    margin-bottom: 2px;
}
.cm-chat-msg__name {
    font-weight: 700; color: var(--c-primary);
    font-size: 0.78rem; text-decoration: none;
}
.cm-chat-msg__name:hover { text-decoration: underline; }
.cm-chat-msg__time {
    font-size: 0.64rem; color: var(--c-text-3); white-space: nowrap;
}
.cm-chat-msg__text {
    font-size: 0.85rem; color: var(--c-text); word-break: break-word;
    line-height: 1.55; display: block;
}

/* 답장 버튼 — 메시지 우측 부유 */
.cm-chat-msg__reply-btn {
    position: absolute; right: -8px; top: -8px;
    opacity: 0; background: var(--c-white); border: 1px solid var(--c-border);
    border-radius: 20px; padding: 4px 10px; font-size: 0.7rem; font-weight: 600;
    color: var(--c-text-3); cursor: pointer; transition: all 0.18s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: inline-flex; align-items: center; gap: 3px;
    z-index: 2;
}
.cm-chat-msg:hover .cm-chat-msg__reply-btn { opacity: 1; }
.cm-chat-msg__reply-btn:hover {
    color: var(--c-primary); border-color: var(--c-primary);
    background: #fff; box-shadow: 0 3px 12px rgba(88,101,242,0.15);
    transform: scale(1.05);
}

/* 답장 인용 */
.cm-chat-msg__reply-ref {
    font-size: 0.73rem; color: var(--c-text-3); margin-bottom: 4px;
    padding: 5px 10px; background: rgba(88,101,242,0.07); border-radius: 10px;
    border-left: 3px solid var(--c-primary); display: block;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-chat-msg__reply-ref b { color: var(--c-primary); margin-right: 4px; font-size: 0.72rem; }

/* 답장 인디케이터 바 */
.cm-chat-reply-indicator {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 24px; background: var(--c-white);
    border-top: 1px solid var(--c-border);
    font-size: 0.8rem; color: var(--c-text-2);
    animation: slideUp 0.15s ease;
}
.cm-chat-reply-indicator svg { flex-shrink: 0; color: var(--c-primary); }
@keyframes slideUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.cm-chat-reply-indicator span {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-chat-reply-cancel {
    background: none; border: none; color: var(--c-text-3); cursor: pointer;
    font-size: 1.2rem; line-height: 1; padding: 2px 6px; border-radius: 50%;
    transition: all 0.15s;
}
.cm-chat-reply-cancel:hover { color: var(--c-text); background: rgba(0,0,0,0.05); }

/* 입력 바 */
.cm-chat-input-area {
    display: flex; align-items: center; gap: 10px; padding: 12px 20px;
    background: var(--c-white); flex-shrink: 0;
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.03);
}
.cm-chat-input {
    flex: 1; padding: 12px 18px; border-radius: 24px;
    border: 1.5px solid var(--c-border); background: var(--c-bg);
    font-size: 0.85rem; font-family: inherit; color: var(--c-text);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.cm-chat-input::placeholder { color: var(--c-text-3); }
.cm-chat-input:focus {
    outline: none; border-color: var(--c-primary); background: var(--c-white);
    box-shadow: 0 0 0 3px rgba(88,101,242,0.1);
}
.cm-chat-send {
    width: 44px; height: 44px; border-radius: 50%;
    border: none; background: linear-gradient(135deg, var(--c-primary), #8B5CF6); color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s ease;
    box-shadow: 0 3px 12px rgba(88,101,242,0.3);
}
.cm-chat-send:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(88,101,242,0.4); }
.cm-chat-send:active { transform: scale(0.95); }

/* 채팅 웰컴 */
.cm-chat-welcome {
    margin: auto; text-align: center; padding: 40px 20px;
    animation: msgIn 0.4s ease;
}
.cm-chat-welcome__icon {
    font-size: 2.5rem; margin-bottom: 12px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.cm-chat-welcome h4 {
    margin: 0 0 6px; font-size: 1.05rem; font-weight: 700;
    color: var(--c-text);
}
.cm-chat-welcome p {
    margin: 0; font-size: 0.84rem; color: var(--c-text-3);
}

/* 빈 상태 */
.fc-empty {
    text-align: center; padding: 80px 20px;
    color: var(--c-text-3); font-size: 0.92rem;
    grid-column: 1 / -1;
}

/* 자유게시판 리스트 */
.fc-list { display: flex; flex-direction: column; gap: 6px; }
.fc-post-item {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px; background: var(--c-white);
    border-radius: 12px; cursor: pointer;
    border: 1px solid var(--c-border);
    transition: all 0.2s ease;
}
.fc-post-item:hover {
    border-color: rgba(88,101,242,0.3);
    box-shadow: 0 4px 16px rgba(88,101,242,0.08);
    transform: translateY(-1px);
}
.fc-post-item__avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; border: 2px solid var(--c-bg);
}
.fc-post-item__content { flex: 1; min-width: 0; }
.fc-post-item__title {
    font-size: 0.92rem; font-weight: 600; margin: 0 0 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--c-text);
}
.fc-post-item__preview {
    font-size: 0.78rem; color: var(--c-text-3); margin: 0 0 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
}
.fc-post-item__meta {
    display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--c-text-3);
}
.fc-post-item__meta-sep { opacity: 0.3; }
.fc-post-item__thumb {
    width: 60px; height: 60px; border-radius: 10px;
    object-fit: cover; flex-shrink: 0;
}
.fc-post-item__img-count {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.72rem; color: var(--c-text-3);
}

/* 팬아트 갤러리 */
.fc-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.fc-gallery-item {
    border-radius: 14px; overflow: hidden; cursor: pointer;
    background: var(--c-white); border: 1px solid var(--c-border);
    transition: all 0.25s ease; position: relative;
}
.fc-gallery-item:hover {
    border-color: rgba(88,101,242,0.3); transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.fc-gallery-item__img {
    width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
    transition: transform 0.3s ease;
}
.fc-gallery-item:hover .fc-gallery-item__img { transform: scale(1.03); }
.fc-gallery-item__noimg {
    width: 100%; aspect-ratio: 1; display: flex; align-items: center;
    justify-content: center; background: var(--c-bg); color: var(--c-text-3);
}
.fc-gallery-item__overlay {
    position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,0.7));
    opacity: 0; transition: opacity 0.25s; display: flex; flex-direction: column;
    justify-content: flex-end; padding: 16px;
}
.fc-gallery-item:hover .fc-gallery-item__overlay { opacity: 1; }
.fc-gallery-item__overlay-title {
    color: #fff; font-size: 0.88rem; font-weight: 600; margin: 0 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-gallery-item__overlay-stats {
    display: flex; gap: 12px; color: rgba(255,255,255,0.8); font-size: 0.75rem;
}
.fc-gallery-item__info {
    padding: 12px 14px;
}
.fc-gallery-item__info h4 {
    font-size: 0.85rem; font-weight: 600; margin: 0 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-gallery-item__info-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.74rem; color: var(--c-text-3);
}

/* 페이지네이션 */
.fc-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.fc-page-btn {
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--c-border);
    background: var(--c-white); color: var(--c-text-2);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s ease;
}
.fc-page-btn:hover { border-color: var(--c-primary); color: var(--c-primary); background: rgba(88,101,242,0.04); }
.fc-page-btn.active {
    background: linear-gradient(135deg, var(--c-primary), #8B5CF6); color: #fff;
    border-color: transparent; box-shadow: 0 2px 8px rgba(88,101,242,0.3);
}

/* 글 상세 */
.fc-detail__back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 10px; border: 1px solid var(--c-border);
    background: var(--c-white); color: var(--c-text-2);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    margin-bottom: 16px; transition: all 0.2s ease;
}
.fc-detail__back:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateX(-2px); }
.fc-detail__card {
    background: var(--c-white); border-radius: 16px;
    padding: 32px; border: 1px solid var(--c-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.fc-detail__header {
    display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
}
.fc-detail__avatar {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--c-bg);
}
.fc-detail__author { font-weight: 700; font-size: 0.92rem; display: block; }
.fc-detail__date { font-size: 0.76rem; color: var(--c-text-3); }
.fc-detail__delete {
    margin-left: auto; padding: 7px 16px; border-radius: 8px;
    border: 1px solid #EF4444; background: transparent; color: #EF4444;
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
}
.fc-detail__delete:hover { background: #EF4444; color: #fff; transform: translateY(-1px); }
.fc-detail__title {
    font-size: 1.35rem; font-weight: 700; margin: 0 0 20px;
    line-height: 1.4;
}
.fc-detail__body {
    font-size: 0.93rem; line-height: 1.8; color: var(--c-text-2);
    margin-bottom: 24px; word-break: break-word;
}
.fc-detail__images {
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.fc-detail__img {
    max-width: 100%; max-height: 400px; border-radius: 12px;
    cursor: pointer; transition: all 0.25s ease;
    border: 1px solid var(--c-border);
}
.fc-detail__img:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.fc-detail__actions {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 0; border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border); margin-bottom: 24px;
}
.fc-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 20px; border: 1px solid var(--c-border);
    background: var(--c-white); color: var(--c-text-2);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
}
.fc-action-btn:hover, .fc-action-btn.liked {
    border-color: #EF4444; color: #EF4444; background: rgba(239,68,68,0.05);
}
.fc-action-btn.liked svg { fill: #EF4444; stroke: #EF4444; }
.fc-action-info {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.8rem; color: var(--c-text-3);
}

/* 댓글 */
.fc-comments__title { font-size: 0.95rem; font-weight: 700; margin: 0 0 16px; }
.fc-comment {
    display: flex; gap: 12px; padding: 14px 0;
    border-bottom: 1px solid var(--c-border);
}
.fc-comment:last-child { border-bottom: none; }
.fc-comment__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.fc-comment__body { flex: 1; min-width: 0; }
.fc-comment__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fc-comment__name { font-weight: 600; font-size: 0.82rem; }
.fc-comment__date { font-size: 0.75rem; color: var(--c-text-3); }
.fc-comment__del {
    background: none; border: none;
    color: #EF4444; font-size: 0.75rem; cursor: pointer; font-weight: 600;
}
.fc-comment__reply-btn {
    background: none; border: none; color: var(--c-text-3);
    font-size: 0.72rem; cursor: pointer; font-weight: 600; margin-left: auto;
}
.fc-comment__reply-btn:hover { color: var(--c-primary); }
.fc-comment__author-badge {
    font-size: 0.65rem; font-weight: 700; color: var(--c-primary);
    background: rgba(212,165,116,.15); border-radius: 4px;
    padding: 1px 6px; line-height: 1.4;
}
.fc-comment__reply-ref {
    font-size: 0.78rem; color: var(--c-text-3); margin-bottom: 4px;
    padding: 4px 10px; background: var(--c-bg); border-radius: 6px;
    border-left: 2px solid var(--c-primary);
}
.fc-comment__reply-ref b { color: var(--c-text-2); }
.fc-comment__reply-indicator {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 12px; background: var(--c-bg); border-radius: 8px;
    font-size: 0.8rem; color: var(--c-text-2); border-left: 3px solid var(--c-primary);
}
.fc-comment__reply-indicator span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-comment__reply-cancel {
    background: none; border: none; color: var(--c-text-3); cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 0 4px;
}
.fc-comment__reply-cancel:hover { color: var(--c-text); }
.fc-comment__text { font-size: 0.88rem; color: var(--c-text-2); margin: 0; line-height: 1.5; word-break: break-word; }
.fc-comments__write {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
}
.fc-comments__input {
    flex: 1; padding: 12px; border-radius: 10px;
    border: 1px solid var(--c-border); background: var(--c-bg);
    font-size: 0.85rem; font-family: inherit; resize: none;
    min-height: 44px; color: var(--c-text);
    transition: border-color 0.2s ease;
}
.fc-comments__input:focus { outline: none; border-color: var(--c-primary); }
.fc-comments__submit {
    padding: 12px 20px; border-radius: 10px; border: none;
    background: var(--c-primary); color: #fff;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s ease; align-self: flex-end;
}
.fc-comments__submit:hover { background: var(--c-primary-h); }

/* 글쓰기 모달 */
.fc-write-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
    align-items: center; justify-content: center;
}
.fc-write-overlay.active { display: flex; }
.fc-write-modal {
    background: var(--c-white); border-radius: 20px;
    width: 92%; max-width: 560px; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    animation: dropFadeIn 0.25s ease;
}
.fc-write-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 1;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(135deg, rgba(88,101,242,0.04), rgba(139,92,246,0.04));
}
.fc-write-modal__header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.fc-write-modal__close {
    background: none; border: none; font-size: 1.5rem;
    color: var(--c-text-3); cursor: pointer;
}
.fc-write-modal__body { padding: 24px; }
.fc-write-modal__field { margin-bottom: 16px; }
.fc-write-modal__field label {
    display: block; font-size: 0.82rem; font-weight: 600;
    color: var(--c-text-2); margin-bottom: 6px;
}
.fc-write-modal__select,
.fc-write-modal__input {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    border: 1px solid var(--c-border); background: var(--c-bg);
    font-size: 0.85rem; font-family: inherit; color: var(--c-text);
    transition: border-color 0.2s ease;
}
.fc-write-modal__select:focus,
.fc-write-modal__input:focus { outline: none; border-color: var(--c-primary); }
.fc-write-modal__textarea {
    width: 100%; min-height: 160px; padding: 12px; border-radius: 10px;
    border: 1px solid var(--c-border); background: var(--c-bg);
    font-size: 0.88rem; font-family: inherit; resize: vertical;
    color: var(--c-text); transition: border-color 0.2s ease;
}
.fc-write-modal__textarea:focus { outline: none; border-color: var(--c-primary); }
.fc-write-modal__images {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.fc-write-modal__img-item {
    position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden;
}
.fc-write-modal__img-item img { width: 100%; height: 100%; object-fit: cover; }
.fc-write-modal__img-del {
    position: absolute; top: 2px; right: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: #fff; border: none;
    font-size: 14px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}
.fc-write-modal__add-img {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px;
    border: 1px dashed var(--c-border); background: transparent;
    color: var(--c-text-3); font-size: 0.82rem; cursor: pointer;
    transition: all 0.15s ease;
}
.fc-write-modal__add-img:hover { border-color: var(--c-primary); color: var(--c-primary); }
.fc-write-modal__footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 24px; border-top: 1px solid var(--c-border);
    position: sticky; bottom: 0; background: var(--c-white);
    border-radius: 0 0 20px 20px;
}
.fc-write-modal__btn {
    padding: 10px 24px; border-radius: 10px; border: none;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
}
.fc-write-modal__btn--cancel {
    background: var(--c-bg); color: var(--c-text-2);
    border: 1px solid var(--c-border);
}
.fc-write-modal__btn--cancel:hover { background: var(--c-border); }
.fc-write-modal__btn--submit {
    background: linear-gradient(135deg, var(--c-primary), #8B5CF6); color: #fff;
    box-shadow: 0 2px 8px rgba(88,101,242,0.25);
}
.fc-write-modal__btn--submit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(88,101,242,0.35); }

/* 북마크 버튼 */
.fc-action-btn.bookmarked { border-color: #F59E0B; color: #F59E0B; background: rgba(245,158,11,0.05); }
.fc-action-btn.bookmarked svg { fill: #F59E0B; stroke: #F59E0B; }

/* 작성자 링크 */
.fc-detail__author-link {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: inherit;
}
.fc-detail__author-link:hover .fc-detail__author { color: var(--c-primary); }

.fc-comment__name { text-decoration: none; color: inherit; }
.fc-comment__name:hover { color: var(--c-primary); }

/* 게시판 태그 */
.fc-board-tag {
    background: var(--c-primary); color: #fff;
    font-size: 0.68rem; font-weight: 700; padding: 2px 8px;
    border-radius: 4px; white-space: nowrap;
}
.fc-board-tag--photo { background: #10B981; }
.fc-board-tag--fanart { background: #8B5CF6; }

/* 수정 버튼 */
.fc-detail__edit-btn {
    padding: 7px 16px; border-radius: 8px;
    border: 1px solid var(--c-primary); background: transparent; color: var(--c-primary);
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
}
.fc-detail__edit-btn:hover { background: var(--c-primary); color: #fff; }

/* 역할 뱃지 */
.fc-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle; }
.fc-badge--owner { background: #F59E0B; color: #fff; }
.fc-badge--admin { background: #3B82F6; color: #fff; }

/* 채팅 삭제 버튼 */
.cm-chat-msg__del-btn {
    position: absolute; right: -8px; bottom: -6px;
    opacity: 0; background: #fff; border: 1px solid #EF4444;
    border-radius: 20px; padding: 3px 8px; font-size: 0.65rem; font-weight: 600;
    color: #EF4444; cursor: pointer; transition: all 0.18s ease;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08); z-index: 2;
}
.cm-chat-msg:hover .cm-chat-msg__del-btn { opacity: 1; }
.cm-chat-msg__del-btn:hover { background: #EF4444; color: #fff; }

/* 자료방 툴바 */
.fc-res-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.fc-res-sort {
    padding: 8px 14px; border-radius: 8px; border: 1px solid var(--c-border);
    background: var(--c-white); font-size: 0.82rem; font-family: inherit; color: var(--c-text);
    cursor: pointer;
}
.fc-res-search {
    display: flex; align-items: center; gap: 0;
    border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden;
    background: var(--c-white);
}
.fc-res-search input {
    border: none; outline: none; padding: 8px 14px; font-size: 0.82rem;
    font-family: inherit; color: var(--c-text); background: transparent; width: 180px;
}
.fc-res-search button {
    border: none; background: transparent; padding: 8px 12px; cursor: pointer;
    color: var(--c-text-3); display: flex; align-items: center;
}
.fc-res-search button:hover { color: var(--c-primary); }

/* 자료방 리스트 */
.fc-res-list { display: flex; flex-direction: column; gap: 8px; }
.fc-res-item {
    display: flex; gap: 16px; padding: 16px; border-radius: 12px;
    background: var(--c-white); border: 1px solid var(--c-border);
    cursor: pointer; transition: all 0.2s ease;
}
.fc-res-item:hover { border-color: var(--c-primary); box-shadow: 0 4px 16px rgba(88,101,242,0.08); transform: translateY(-1px); }
.fc-res-item__thumb {
    width: 80px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
}
.fc-res-item__nothumb {
    width: 80px; height: 80px; border-radius: 10px; background: var(--c-bg);
    display: flex; align-items: center; justify-content: center; color: var(--c-text-3); flex-shrink: 0;
}
.fc-res-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fc-res-item__title { font-size: 0.95rem; font-weight: 700; margin: 0; }
.fc-res-item__desc { font-size: 0.82rem; color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-res-item__meta { font-size: 0.75rem; color: var(--c-text-3); display: flex; gap: 8px; align-items: center; margin-top: auto; }

/* 자료 첨부파일 */
.fc-res-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.fc-res-file {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: var(--c-bg); border-radius: 10px; border: 1px solid var(--c-border);
    font-size: 0.82rem;
}
.fc-res-file__icon { color: var(--c-primary); flex-shrink: 0; }
.fc-res-file__name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-res-file__size { color: var(--c-text-3); font-size: 0.75rem; flex-shrink: 0; }
.fc-res-file__dl {
    padding: 4px 12px; border-radius: 6px; border: 1px solid var(--c-primary);
    background: transparent; color: var(--c-primary); font-size: 0.75rem;
    font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.fc-res-file__dl:hover { background: var(--c-primary); color: #fff; }

/* 자료 모달 파일리스트 */
.fc-res-filelist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.fc-res-filelist__item {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    background: var(--c-bg); border-radius: 6px; font-size: 0.8rem;
}
.fc-res-filelist__item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-res-filelist__item button {
    background: none; border: none; color: #EF4444; cursor: pointer;
    font-size: 1.1rem; line-height: 1;
}

/* 자료방 모바일 대응 */
@media (max-width: 640px) {
    .fc-res-toolbar { gap: 8px; }
    .fc-res-search { flex: 1; min-width: 0; }
    .fc-res-search input { width: 100%; }
    .fc-res-item { padding: 12px; gap: 10px; }
    .fc-res-item__thumb, .fc-res-item__nothumb { width: 64px; height: 64px; }
    .fc-res-item__title { font-size: 0.88rem; }
    .fc-res-item__desc { font-size: 0.78rem; }
    .fc-res-item__meta { font-size: 0.7rem; flex-wrap: wrap; gap: 4px; }
    .fc-res-item__meta > span:nth-child(2n) { display: none; } /* 구분점 '·' 숨김 */
    .fc-res-file { padding: 8px 10px; font-size: 0.78rem; gap: 8px; }
    .fc-res-file__name { font-size: 0.78rem; }
    .fc-res-file__dl { padding: 4px 8px; font-size: 0.72rem; }
}

/* ════════════════════════════════
   버츄얼 멤버 페이지 (공통)
   ════════════════════════════════ */
.vm-page { position: relative; overflow: hidden; min-height: 100vh; }

/* vm-pad — 페이지 내부 "스크랩북 프레임" */
.vm-page .vm-pad {
    position: relative; z-index: 2;
    max-width: 1050px; margin: 20px auto 32px;
    padding: 20px 22px 24px;
    min-height: 0;
    background:
        radial-gradient(ellipse 600px 280px at 15% 0%, rgba(255,255,255,0.55) 0%, transparent 55%),
        radial-gradient(ellipse 500px 240px at 85% 100%, rgba(255,255,255,0.45) 0%, transparent 55%),
        rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border-radius: 32px;
    border: 1.5px solid rgba(255,255,255,0.85);
    box-shadow:
        0 40px 100px rgba(15, 23, 42, 0.22),
        0 8px 30px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(255,255,255,0.6) inset,
        0 2px 0 rgba(255,255,255,0.8) inset;
}
/* decorative sparkles — top-left */
.vm-pad::before {
    content: '✦ ✧ ✦';
    position: absolute;
    top: 22px; left: 32px;
    color: rgba(15,23,42,0.18);
    font-size: 1.1rem;
    letter-spacing: 6px;
    pointer-events: none;
}
/* decorative sparkles — bottom-right */
.vm-pad::after {
    content: '✧ ✦ ✧';
    position: absolute;
    bottom: 22px; right: 32px;
    color: rgba(15,23,42,0.18);
    font-size: 1.1rem;
    letter-spacing: 6px;
    pointer-events: none;
}
.vm-theme-bg {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, #0B1222, #0B1222);
    transition: background 0.6s ease, opacity 0.6s ease;
}
.vm-theme-bg::before, .vm-theme-bg::after {
    content: ''; position: absolute; inset: 0;
    transition: opacity 0.6s ease;
}

.vm-header { text-align: center; margin-bottom: 20px; position: relative; }
.vm-title {
    font-size: 2.05rem; font-weight: 900; letter-spacing: -0.03em;
    margin: 0 0 6px;
    color: #0f172a;
    text-shadow: none;
    position: relative;
    display: inline-block;
}
.vm-title::before, .vm-title::after {
    content: '✦';
    position: absolute;
    top: 50%; transform: translateY(-50%);
    font-size: 0.9rem; color: rgba(15,23,42,0.25);
    font-weight: 400;
}
.vm-title::before { left: -26px; }
.vm-title::after  { right: -26px; }
.vm-subtitle {
    font-size: 0.88rem;
    color: #475569;
    margin: 0;
    font-weight: 600; letter-spacing: 0.02em;
    text-shadow: none;
}

/* 멤버 탭 */
.vm-tabs {
    display: flex; justify-content: center; gap: 10px;
    margin-bottom: 18px; flex-wrap: wrap;
}
.vm-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.75);
    border: 1.5px solid rgba(15,23,42,0.08);
    color: #0f172a; font-size: 0.82rem; font-weight: 700;
    cursor: pointer; transition: all 0.25s ease;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(15,23,42,0.05);
}
.vm-tab:hover {
    background: rgba(255,255,255,0.95);
    border-color: rgba(15,23,42,0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15,23,42,0.1);
}
.vm-tab.active {
    background: linear-gradient(135deg, #0f172a, #334155);
    color: #fff;
    border-color: #0f172a;
    box-shadow: 0 8px 20px rgba(15,23,42,0.3);
    transform: translateY(-2px);
}
.vm-tab__emoji { font-size: 0.95rem; line-height: 1; }

/* 툴바 */
.vm-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.vm-toolbar__right { display: flex; gap: 8px; }

/* 버튼 공통 */
.vm-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 9px;
    font-size: 0.8rem; font-weight: 600; font-family: inherit;
    cursor: pointer; border: none; transition: all 0.2s ease;
    white-space: nowrap;
}
.vm-btn--primary {
    background: linear-gradient(135deg, #0f172a, #334155); color: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,0.25);
}
.vm-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,0.35); }
.vm-btn--outline {
    background: rgba(255,255,255,0.8); color: #0f172a;
    border: 1.5px solid rgba(15,23,42,0.18);
    box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}
.vm-btn--outline:hover { background: #fff; border-color: rgba(15,23,42,0.3); box-shadow: 0 6px 14px rgba(15,23,42,0.1); }
.vm-btn--ghost {
    background: rgba(255,255,255,0.7); color: #0f172a;
    border: 1px solid rgba(15,23,42,0.1);
    padding: 8px 14px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}
.vm-btn--ghost:hover { background: #fff; border-color: rgba(15,23,42,0.2); box-shadow: 0 6px 14px rgba(15,23,42,0.08); }
.vm-btn--danger {
    background: rgba(239,68,68,0.9); color: #fff;
}
.vm-btn--danger:hover { background: #ef4444; }

/* 콘텐츠 영역 */
.vm-content { position: relative; min-height: 200px; }
.vm-empty {
    text-align: center; padding: 80px 20px;
    color: #64748b;
    font-size: 0.95rem; font-weight: 600;
}

/* 공지 카드 */
.vm-notice {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 16px; padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    animation: vmFadeUp 0.4s ease both;
}
@keyframes vmFadeUp { from { opacity:0; transform: translateY(12px);} to { opacity:1; transform: translateY(0);} }
.vm-notice__head { display:flex; align-items:center; gap:10px; margin-bottom: 12px; }
.vm-notice__date { font-size: 0.78rem; color: #64748b; font-weight: 600; }
.vm-notice__actions { margin-left:auto; display:flex; gap:6px; }
.vm-notice__btn {
    padding: 5px 11px; border-radius: 7px;
    font-size: 0.75rem; font-weight: 600; font-family: inherit;
    background: transparent; cursor: pointer; transition: all 0.15s;
}
.vm-notice__btn--edit { border: 1px solid #3b82f6; color: #3b82f6; }
.vm-notice__btn--edit:hover { background: #3b82f6; color: #fff; }
.vm-notice__btn--del { border: 1px solid #ef4444; color: #ef4444; }
.vm-notice__btn--del:hover { background: #ef4444; color: #fff; }
.vm-notice__title { font-size: 1.3rem; font-weight: 700; margin: 0 0 10px; color:#0B1222; }
.vm-notice__body { font-size: 0.95rem; color: #334155; line-height: 1.7; white-space: pre-wrap; }
.vm-notice__images { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 14px; }
.vm-notice__img {
    width: 100%; aspect-ratio: 16/10; object-fit: cover;
    border-radius: 10px; cursor: pointer; transition: transform 0.2s;
}
.vm-notice__img:hover { transform: scale(1.03); }

/* ── 공지 댓글 ── */
.vm-notice__comments {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1.5px dashed rgba(15,23,42,0.1);
}
.vm-notice__comments-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem; font-weight: 700; color: #334155;
    margin-bottom: 12px;
}
.vm-notice__comments-head svg { color: #64748b; }
.vm-notice__comments-count {
    background: #e0e7ff;
    color: #4338ca;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 4px;
}
.vm-notice__comments-list {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 14px;
}
.vm-notice__comments-empty {
    padding: 14px 0; text-align: center;
    font-size: 0.88rem; color: #94a3b8;
}
.vm-notice__comment {
    display: flex; gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 12px;
    animation: vmFadeUp 0.25s ease both;
}
.vm-notice__comment-avatar-link { flex: 0 0 auto; }
.vm-notice__comment-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #e2e8f0;
    object-fit: cover;
}
.vm-notice__comment-body { flex: 1; min-width: 0; }
.vm-notice__comment-head {
    display: flex; align-items: center;
    gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.vm-notice__comment-name {
    font-weight: 700; font-size: 0.88rem; color: #0f172a;
    text-decoration: none;
}
.vm-notice__comment-name:hover { color: #3b82f6; }
.vm-notice__comment-badge {
    font-size: 0.65rem; font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.vm-notice__comment-date {
    font-size: 0.72rem; color: #94a3b8;
}
.vm-notice__comment-del {
    margin-left: auto;
    font-size: 0.72rem; color: #ef4444;
    background: transparent; border: none;
    cursor: pointer; padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}
.vm-notice__comment-del:hover { background: #fee2e2; }
.vm-notice__comment-text {
    margin: 0; font-size: 0.9rem; color: #334155;
    line-height: 1.55; white-space: pre-wrap;
    word-break: break-word;
}
.vm-notice__comments-write {
    display: flex; gap: 8px;
    align-items: flex-start;
}
.vm-notice__comments-input {
    flex: 1;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 38px;
    max-height: 120px;
    transition: border-color 0.15s;
    background: #fff;
}
.vm-notice__comments-input:focus {
    outline: none; border-color: #3b82f6;
}
.vm-notice__comments-submit {
    padding: 10px 18px;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem; font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
}
.vm-notice__comments-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59,130,246,0.35);
}
.vm-notice__comments-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.vm-notice__comments-login {
    padding: 12px;
    text-align: center;
    font-size: 0.85rem; color: #94a3b8;
    background: #f1f5f9;
    border-radius: 10px;
}
@media (max-width: 560px) {
    .vm-notice__comments-write { flex-direction: column; }
    .vm-notice__comments-submit { align-self: stretch; }
}

/* 소개 카드 */
.vm-intro-grid {
    display: grid; grid-template-columns: 1fr; gap: 18px;
    animation: vmFadeUp 0.5s ease both;
}
.vm-intro-card {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 18px; padding: 28px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.3);
}
.vm-intro-card__head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.vm-intro-card__emoji { font-size: 1.8rem; }
.vm-intro-card__label { font-size: 1.15rem; font-weight: 700; color: #0B1222; margin: 0; }
.vm-intro-card__body { color: #334155; font-size: 0.95rem; line-height: 1.7; white-space: pre-wrap; }
.vm-intro-card__link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px;
    background: #0B1222; color: #fff; text-decoration: none;
    font-weight: 600; font-size: 0.88rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.vm-intro-card__link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.vm-intro-card__link--chzzk { background: #00FFA3; color: #0B1222; }
.vm-intro-card__link--youtube { background: #FF0000; color: #fff; }
.vm-intro-card__empty { color: #94a3b8; font-style: italic; font-size: 0.9rem; }
.vm-intro-edit-btn {
    display: block; margin: 24px auto 0;
}

/* ════════════════════════════════
   일정 보드 — Premium Cute Design
   ════════════════════════════════ */
.vm-week-nav { display: flex; align-items: center; gap: 8px; }
.vm-week-label {
    color: #0f172a; font-weight: 800; font-size: 0.85rem;
    padding: 6px 12px; letter-spacing: -0.01em;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(15,23,42,0.05);
}

/* 보드 프레임 — 보드를 감싸는 스크랩북 프레임 (다운로드 시 함께 캡처됨) */
.vm-board-frame {
    position: relative;
    width: 100%; margin: 0 auto;
    padding: 18px 18px 22px;
    background:
        radial-gradient(ellipse 520px 240px at 12% 0%, rgba(255,255,255,0.6) 0%, transparent 55%),
        radial-gradient(ellipse 420px 200px at 88% 100%, rgba(255,255,255,0.5) 0%, transparent 55%),
        linear-gradient(180deg, #fdfcfa 0%, #f4f6fb 100%);
    border-radius: 36px;
    border: 1.5px solid rgba(15,23,42,0.08);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.14),
        0 2px 0 rgba(255,255,255,0.9) inset;
    overflow: hidden;
}
.vm-board-frame::before {
    content: '✦ ✧ ✦';
    position: absolute; top: 16px; left: 24px;
    color: rgba(15,23,42,0.22);
    font-size: 0.95rem; letter-spacing: 6px;
    pointer-events: none;
}
.vm-board-frame::after {
    content: '✧ ✦ ✧';
    position: absolute; bottom: 16px; right: 24px;
    color: rgba(15,23,42,0.22);
    font-size: 0.95rem; letter-spacing: 6px;
    pointer-events: none;
}
.vm-board-frame > .vm-board {
    box-shadow:
        0 12px 34px rgba(15, 23, 42, 0.10),
        0 2px 0 rgba(255,255,255,0.9) inset;
}

/* 보드 컨테이너 */
.vm-board {
    --vm-acc: #3b82f6;
    --vm-acc-2: #60a5fa;
    --vm-acc-3: #93c5fd;
    --vm-acc-soft: #dbeafe;
    --vm-acc-softer: #eff6ff;
    --vm-acc-ink: #1e3a8a;
    --vm-paper: #ffffff;
    --vm-paper-soft: #fafbff;
    --vm-ink: #0f172a;
    --vm-sub: #64748b;
    --vm-pattern-opacity: 0.05;

    position: relative;
    max-width: 980px; margin: 0 auto;
    padding: 48px 44px 40px;
    background: var(--vm-paper);
    border-radius: 28px;
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.18),
        0 2px 0 rgba(255,255,255,0.9) inset;
    animation: vmFadeUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    overflow: hidden;
    color: var(--vm-ink);
}
/* decorative corner blob — top right */
.vm-board::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: var(--vm-acc-soft);
    opacity: 0.6;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(30px);
}
/* decorative corner blob — bottom left */
.vm-board::after {
    content: '';
    position: absolute; bottom: -60px; left: -60px;
    width: 180px; height: 180px;
    background: var(--vm-acc-softer);
    opacity: 0.7;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(30px);
}

.vm-board__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 36px;
    gap: 20px; flex-wrap: wrap;
    position: relative;
    padding-bottom: 24px;
    border-bottom: 1.5px dashed rgba(15,23,42,0.08);
}
.vm-board__title-group { display: flex; flex-direction: column; gap: 6px; }
.vm-board__title {
    font-size: 1.5rem; font-weight: 900;
    color: var(--vm-ink);
    letter-spacing: -0.03em;
    white-space: nowrap;
    display: flex; align-items: center; gap: 12px;
    line-height: 1.1;
    margin: 0;
}
.vm-board__title-emoji {
    font-size: 1.9rem; line-height: 1;
    display: inline-block;
    animation: vmBoardBounce 2.8s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
}
.vm-board__sub {
    font-size: 0.82rem; font-weight: 600; color: var(--vm-sub);
    letter-spacing: 0.02em;
}
.vm-board__range {
    font-size: 0.8rem; font-weight: 800;
    background: linear-gradient(135deg, var(--vm-acc), var(--vm-acc-2));
    color: #fff;
    padding: 9px 18px;
    border-radius: 999px;
    letter-spacing: 0.05em;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35),
                0 0 0 3px rgba(255,255,255,0.6);
    white-space: nowrap;
}

.vm-board-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 22px;
}

/* 개별 day row */
.vm-day-row {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, var(--vm-paper-soft) 100%);
    border-radius: 20px;
    padding: 24px 26px 52px;
    min-height: 150px;
    border: 1.5px solid rgba(59, 130, 246, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.04);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s;
    overflow: hidden;
    color: var(--vm-ink);
}
/* subtle corner glow */
.vm-day-row::before {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}
.vm-day-row:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(15,23,42,0.05),
        0 16px 32px rgba(59, 130, 246, 0.18);
}

/* 요일 태그 */
.vm-day-row__tag {
    position: absolute; top: 16px; right: 16px;
    background: linear-gradient(135deg, var(--vm-acc), var(--vm-acc-2));
    color: #fff !important;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.03em;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.38);
}

/* 날짜/아이콘 헤더 */
.vm-day-row__icon-wrap {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.vm-day-row__icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--vm-acc-soft), var(--vm-acc-softer));
    color: var(--vm-acc-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}
.vm-day-row__date {
    font-size: 0.78rem; color: var(--vm-sub); font-weight: 700;
    letter-spacing: 0.01em;
}

/* 제목/설명 */
.vm-day-row__title {
    font-size: 1.08rem; font-weight: 900;
    color: var(--vm-ink) !important;
    margin: 0 0 6px;
    line-height: 1.35;
    padding-right: 72px;
    word-break: keep-all;
    letter-spacing: -0.01em;
}
.vm-day-row__desc {
    font-size: 0.85rem;
    color: var(--vm-sub) !important;
    line-height: 1.55;
    margin: 0;
    white-space: pre-wrap; word-break: break-word;
}

/* 시간 뱃지 */
.vm-day-row__time {
    position: absolute; bottom: 14px; right: 16px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.7rem; font-weight: 800;
    color: var(--vm-acc-ink) !important;
    background: var(--vm-acc-soft);
    padding: 5px 12px; border-radius: 999px;
    letter-spacing: 0.06em;
    z-index: 2;
}
.vm-day-row__time strong {
    color: var(--vm-acc-ink);
    font-weight: 900;
    letter-spacing: 0;
}
.vm-day-row__time::before {
    content: '🕒';
    font-size: 0.85rem;
    margin-right: 1px;
}

/* 액션 버튼 */
.vm-day-row__actions {
    position: absolute; bottom: 12px; left: 12px;
    display: none; gap: 6px; z-index: 3;
}
.vm-day-row:hover .vm-day-row__actions { display: flex; }
.vm-day-row__act-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none; cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.vm-day-row__act-btn:hover { transform: scale(1.12); box-shadow: 0 5px 14px rgba(0,0,0,0.2); }
.vm-day-row__act-btn--edit { background: linear-gradient(135deg, var(--vm-acc), var(--vm-acc-2)); }
.vm-day-row__act-btn--del  { background: linear-gradient(135deg, #ef4444, #f87171); }

/* 오늘 하이라이트 */
.vm-day-row--today {
    border: 2.5px solid #f59e0b;
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    box-shadow:
        0 2px 4px rgba(15,23,42,0.05),
        0 12px 28px rgba(245, 158, 11, 0.3),
        inset 0 0 0 1px rgba(251, 191, 36, 0.3);
}
.vm-day-row--today::after {
    content: '✦ TODAY';
    position: absolute; top: 16px; left: 16px;
    background: linear-gradient(135deg, #f59e0b, #fb923c);
    color: #fff;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.66rem; font-weight: 900;
    letter-spacing: 0.1em;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.vm-day-row--today .vm-day-row__icon-wrap { margin-top: 18px; }

/* 이미지 저장 시 TODAY 강조 숨김 */
.vm-capturing .vm-day-row--today {
    border: 1.5px solid rgba(15,23,42,0.08) !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15,23,42,0.06) !important;
}
.vm-capturing .vm-day-row--today::after { display: none !important; }
.vm-capturing .vm-day-row--today.vm-day-row--offline {
    background:
        radial-gradient(circle at 20% 10%, rgba(59,130,246,0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 30%, #fff 0%, var(--vm-acc-softer) 80%) !important;
    border: 2px dashed rgba(59, 130, 246, 0.4) !important;
}
.vm-capturing .vm-day-row--today .vm-day-row__icon-wrap { margin-top: 0 !important; }

/* OFFLINE 카드 */
.vm-day-row--offline {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 28px 16px 44px;
    background:
        radial-gradient(circle at 50% 30%, #fff 0%, var(--vm-acc-softer) 80%);
    border: 2px dashed rgba(59, 130, 246, 0.4);
}
.vm-day-row--offline::before { display: none; }
.vm-day-row--offline .vm-day-row__mascot {
    font-size: 3rem; line-height: 1;
    margin-bottom: 10px;
    filter: drop-shadow(0 6px 14px rgba(59, 130, 246, 0.35));
    animation: vmFloat 3.2s ease-in-out infinite;
}
.vm-day-row--offline .vm-day-row__status {
    font-weight: 900; font-size: 1.05rem;
    color: var(--vm-acc-ink) !important;
    letter-spacing: 0.18em;
    margin-bottom: 4px;
    display: inline-flex; align-items: center; gap: 8px;
}
.vm-day-row--offline .vm-day-row__status::before,
.vm-day-row--offline .vm-day-row__status::after {
    content: '✦';
    color: var(--vm-acc-2); opacity: 0.5;
    font-size: 0.9rem;
}
.vm-day-row--offline .vm-day-row__sub {
    font-size: 0.78rem; color: var(--vm-sub) !important;
    font-weight: 600; letter-spacing: 0.02em;
}

/* 푸터 워터마크 */
.vm-board__footer {
    margin-top: 32px; padding-top: 22px;
    border-top: 1.5px dashed rgba(59, 130, 246, 0.3);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.72rem; color: var(--vm-sub);
    letter-spacing: 0.02em;
}
.vm-board__footer-brand {
    font-weight: 900;
    color: var(--vm-acc);
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}
.vm-board__footer-hashtag {
    font-weight: 700; color: var(--vm-acc-ink);
}

/* ── 애니메이션 ── */
@keyframes vmBoardBounce {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-5px) rotate(3deg); }
}
@keyframes vmFloat {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-8px) rotate(4deg); }
}

/* ── 테마별 컬러 팔레트 ── */
.vm-page[data-theme="ocean"] .vm-board,
.vm-board[data-theme="ocean"] {
    --vm-acc: #0ea5e9;     --vm-acc-2: #38bdf8;   --vm-acc-3: #7dd3fc;
    --vm-acc-soft: #e0f2fe; --vm-acc-softer: #f0f9ff;
    --vm-acc-ink: #0c4a6e; --vm-paper-soft: #f5fbff;
}
.vm-page[data-theme="cafe"] .vm-board,
.vm-board[data-theme="cafe"] {
    --vm-acc: #b45309;     --vm-acc-2: #d97706;   --vm-acc-3: #fbbf24;
    --vm-acc-soft: #fef3c7; --vm-acc-softer: #fffbeb;
    --vm-acc-ink: #78350f; --vm-paper-soft: #fffaf0;
}
.vm-page[data-theme="school"] .vm-board,
.vm-board[data-theme="school"] {
    --vm-acc: #db2777;     --vm-acc-2: #ec4899;   --vm-acc-3: #f9a8d4;
    --vm-acc-soft: #fce7f3; --vm-acc-softer: #fdf2f8;
    --vm-acc-ink: #9d174d; --vm-paper-soft: #fff7fb;
}
.vm-page[data-theme="winter"] .vm-board,
.vm-board[data-theme="winter"] {
    --vm-acc: #3b82f6;     --vm-acc-2: #60a5fa;   --vm-acc-3: #93c5fd;
    --vm-acc-soft: #dbeafe; --vm-acc-softer: #eff6ff;
    --vm-acc-ink: #1e3a8a; --vm-paper-soft: #f8fbff;
}
.vm-page[data-theme="room"] .vm-board,
.vm-board[data-theme="room"] {
    --vm-acc: #8b5cf6;     --vm-acc-2: #a78bfa;   --vm-acc-3: #c4b5fd;
    --vm-acc-soft: #ede9fe; --vm-acc-softer: #f5f3ff;
    --vm-acc-ink: #5b21b6; --vm-paper-soft: #faf9ff;
}
.vm-page[data-theme="night"] .vm-board,
.vm-board[data-theme="night"] {
    --vm-acc: #6366f1;     --vm-acc-2: #818cf8;   --vm-acc-3: #a5b4fc;
    --vm-acc-soft: #e0e7ff; --vm-acc-softer: #eef2ff;
    --vm-acc-ink: #3730a3; --vm-paper-soft: #f7f8ff;
}

/* 모바일 */
@media (max-width: 720px) {
    .vm-board:not(.vm-capturing) { padding: 28px 18px 24px; border-radius: 22px; }
    .vm-board:not(.vm-capturing) .vm-board-grid { grid-template-columns: 1fr; gap: 12px; }
    .vm-board:not(.vm-capturing) .vm-board__title { font-size: 1.25rem; }
    .vm-board:not(.vm-capturing) .vm-board__title-emoji { font-size: 1.6rem; }
    .vm-board:not(.vm-capturing) .vm-day-row__title { padding-right: 68px; font-size: 1rem; }
    .vm-board:not(.vm-capturing) .vm-day-row { padding: 18px 18px 46px; }
}

/* 캡처 중에는 뷰포트 크기와 무관하게 데스크톱 레이아웃 강제 */
.vm-board.vm-capturing {
    width: 980px !important;
    max-width: 980px !important;
    min-width: 980px !important;
    padding: 36px 32px 28px !important;
    border-radius: 28px !important;
}
.vm-board.vm-capturing .vm-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

/* ═══════════════════════════════════════════════
   테마별 장식 레이어 (vm-board__deco)
   ═══════════════════════════════════════════════ */
.vm-board__deco {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.vm-board__head,
.vm-board-grid,
.vm-board__footer { position: relative; z-index: 1; }

.vm-board__deco-item {
    position: absolute;
    font-size: 1.8rem;
    opacity: 0.26;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.08));
    user-select: none;
    line-height: 1;
}
/* 6개 고정 좌표 (2×3 격자처럼 흩뿌림) */
.vm-board__deco-item--p1 { top: 10px;  left: 16px;  font-size: 1.6rem; transform: rotate(-14deg); }
.vm-board__deco-item--p2 { top: 18px;  right: 220px; font-size: 2rem;   transform: rotate(12deg); }
.vm-board__deco-item--p3 { top: 48%;   left: -6px;  font-size: 2.2rem; transform: rotate(-8deg); opacity: 0.18; }
.vm-board__deco-item--p4 { top: 52%;   right: -10px; font-size: 2.4rem; transform: rotate(18deg); opacity: 0.2; }
.vm-board__deco-item--p5 { bottom: 60px; left: 24px; font-size: 1.5rem; transform: rotate(-20deg); }
.vm-board__deco-item--p6 { bottom: 46px; right: 32px; font-size: 1.7rem; transform: rotate(10deg); }

/* ─ Ocean : 반짝이는 물방울 + 푸른 그라데이션 스트라이프 ─ */
.vm-board[data-theme="ocean"] {
    background:
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(125, 211, 252, 0.14) 0%, transparent 45%),
        repeating-linear-gradient(135deg, transparent 0 40px, rgba(14,165,233,0.025) 40px 42px),
        var(--vm-paper);
}
.vm-board[data-theme="ocean"] .vm-board__head {
    border-bottom-style: dotted;
    border-bottom-color: rgba(14, 165, 233, 0.25);
}

/* ─ Cafe : 따스한 크림 그라데이션 + 원두 패턴 ─ */
.vm-board[data-theme="cafe"] {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(251, 191, 36, 0.1) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 100%, rgba(180, 83, 9, 0.08) 0%, transparent 50%),
        var(--vm-paper);
}
.vm-board[data-theme="cafe"] .vm-day-row {
    border-color: rgba(180, 83, 9, 0.18);
    background: linear-gradient(180deg, #fffdf7 0%, #fff8ec 100%);
}

/* ─ School : 공책 가로선 + 분홍 핀 ─ */
.vm-board[data-theme="school"] {
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(219, 39, 119, 0.06) 31px 32px),
        linear-gradient(90deg, transparent 0 60px, rgba(219, 39, 119, 0.2) 60px 61px, transparent 61px),
        var(--vm-paper);
}
.vm-board[data-theme="school"] .vm-board__head::before {
    content: '📌';
    position: absolute; top: -12px; left: 30px;
    font-size: 1.8rem;
    transform: rotate(-15deg);
    filter: drop-shadow(0 4px 8px rgba(219, 39, 119, 0.3));
    z-index: 3;
}

/* ─ Winter : 눈 결정 확산 + 차가운 민트 ─ */
.vm-board[data-theme="winter"] {
    background:
        radial-gradient(circle at 15% 20%, rgba(147, 197, 253, 0.15) 0%, transparent 35%),
        radial-gradient(circle at 85% 75%, rgba(219, 234, 254, 0.35) 0%, transparent 45%),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 80px, rgba(59, 130, 246, 0.03) 80px 82px),
        var(--vm-paper);
}
.vm-board[data-theme="winter"] .vm-day-row {
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    border-color: rgba(147, 197, 253, 0.35);
}

/* ─ Room : 따뜻한 무드등 + 보라 도트 ─ */
.vm-board[data-theme="room"] {
    background:
        radial-gradient(circle at 20% 80%, rgba(196, 181, 253, 0.22) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(237, 233, 254, 0.5) 0%, transparent 45%),
        radial-gradient(circle 3px at 15% 30%, rgba(139, 92, 246, 0.2) 0%, transparent 100%),
        radial-gradient(circle 2px at 75% 65%, rgba(139, 92, 246, 0.15) 0%, transparent 100%),
        radial-gradient(circle 2px at 35% 85%, rgba(139, 92, 246, 0.18) 0%, transparent 100%),
        var(--vm-paper);
}
.vm-board[data-theme="room"] .vm-day-row {
    border-color: rgba(167, 139, 250, 0.25);
}

/* ─ Night : 심야 네이비 + 별빛 ─ */
.vm-board[data-theme="night"] {
    background:
        radial-gradient(circle 2px at 12% 18%, #c7d2fe 0%, transparent 100%),
        radial-gradient(circle 1.5px at 88% 25%, #a5b4fc 0%, transparent 100%),
        radial-gradient(circle 2.5px at 65% 55%, #e0e7ff 0%, transparent 100%),
        radial-gradient(circle 1px at 30% 75%, #818cf8 0%, transparent 100%),
        radial-gradient(circle 2px at 92% 88%, #c7d2fe 0%, transparent 100%),
        radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #fcfcff 0%, #f0f2ff 100%);
}
.vm-board[data-theme="night"] .vm-board__title {
    background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vm-board[data-theme="night"] .vm-board__title > span:not(.vm-board__title-emoji) {
    color: transparent;
}
.vm-board[data-theme="night"] .vm-day-row {
    background: linear-gradient(180deg, #ffffff 0%, #f5f6ff 100%);
    border-color: rgba(129, 140, 248, 0.3);
}

/* 캡처 중 장식 조금 더 선명하게 */
.vm-board.vm-capturing .vm-board__deco-item { opacity: 0.32; }

/* 일정 관리 모드 리스트 */
.vm-sched-manage-list {
    background: rgba(255,255,255,0.95);
    border-radius: 14px; padding: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.vm-sched-manage-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
}
.vm-sched-manage-item:last-child { border-bottom: none; }
.vm-sched-manage-item__date { font-weight: 700; color: #0B1222; min-width: 100px; }
.vm-sched-manage-item__time { color: #64748b; font-size: 0.82rem; min-width: 50px; }
.vm-sched-manage-item__title { flex: 1; color: #334155; }
.vm-sched-manage-item__actions { display: flex; gap: 6px; }

/* 모달 공통 */
.vm-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 10000; display: none;
    align-items: center; justify-content: center;
    animation: vmFade 0.2s ease;
}
.vm-modal-overlay.active { display: flex; }
@keyframes vmFade { from { opacity: 0; } to { opacity: 1; } }
.vm-modal {
    background: #fff; border-radius: 16px;
    max-width: 560px; width: 92%; max-height: 88vh;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: vmSlideUp 0.25s ease;
}
.vm-modal--sm { max-width: 440px; }
@keyframes vmSlideUp { from { opacity:0; transform: translateY(20px) scale(0.97);} to { opacity:1; transform: translateY(0) scale(1);} }
.vm-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid #e2e8f0;
}
.vm-modal__header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #0B1222; }
.vm-modal__close {
    border: none; background: transparent; font-size: 1.6rem;
    cursor: pointer; color: #64748b; line-height: 1; padding: 0 4px;
}
.vm-modal__close:hover { color: #0B1222; }
.vm-modal__body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.vm-modal__field { margin-bottom: 16px; }
.vm-modal__field label { display: block; font-size: 0.82rem; font-weight: 600; color: #334155; margin-bottom: 6px; }
.vm-modal__field input, .vm-modal__field textarea {
    width: 100%; padding: 10px 14px;
    border: 1px solid #cbd5e1; border-radius: 9px;
    font-family: inherit; font-size: 0.92rem; color: #0B1222;
    background: #f8fafc; outline: none;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}
.vm-modal__field input:focus, .vm-modal__field textarea:focus { border-color: #6366f1; background: #fff; }
.vm-modal__field textarea { min-height: 120px; resize: vertical; }
.vm-modal__images { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.vm-modal__img-item { position: relative; width: 80px; height: 80px; }
.vm-modal__img-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.vm-modal__img-del {
    position: absolute; top: -6px; right: -6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #ef4444; color: #fff; border: none;
    cursor: pointer; font-size: 0.9rem; line-height: 1;
}
.vm-modal__footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 24px; border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.vm-modal__footer .vm-btn--ghost { background: #e2e8f0; color: #334155; border: none; }
.vm-modal__footer .vm-btn--ghost:hover { background: #cbd5e1; }

/* ════════════════════════════════
   테마: 바다 (스노)
   ════════════════════════════════ */
.vm-page[data-theme="ocean"] .vm-theme-bg {
    background: linear-gradient(180deg, #0c4a6e 0%, #0891b2 50%, #22d3ee 100%);
}
.vm-page[data-theme="ocean"] .vm-theme-bg::before {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%);
    animation: vmWaveFloat 12s ease-in-out infinite;
}
.vm-page[data-theme="ocean"] .vm-theme-bg::after {
    background-image:
        radial-gradient(circle at 10% 90%, rgba(255,255,255,0.3) 1px, transparent 2px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.25) 1px, transparent 2px),
        radial-gradient(circle at 40% 40%, rgba(255,255,255,0.2) 1px, transparent 2px);
    background-size: 200px 200px, 250px 250px, 180px 180px;
    animation: vmBubbleRise 20s linear infinite;
    opacity: 0.6;
}
@keyframes vmWaveFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } }
@keyframes vmBubbleRise { from { background-position: 0 100%, 0 100%, 0 100%; } to { background-position: 0 -100%, 0 -100%, 0 -100%; } }

/* ════════════════════════════════
   테마: 카페 (만두)
   ════════════════════════════════ */
.vm-page[data-theme="cafe"] .vm-theme-bg {
    background: linear-gradient(180deg, #3e2723 0%, #6d4c41 40%, #a1887f 100%);
}
.vm-page[data-theme="cafe"] .vm-theme-bg::before {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(255,214,170,0.2) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 70%, rgba(255,193,143,0.15) 0%, transparent 50%);
    animation: vmSteamRise 8s ease-in-out infinite alternate;
}
.vm-page[data-theme="cafe"] .vm-theme-bg::after {
    background-image:
        radial-gradient(circle at 25% 15%, rgba(120,65,30,0.35) 3px, transparent 5px),
        radial-gradient(circle at 75% 45%, rgba(120,65,30,0.25) 2px, transparent 4px),
        radial-gradient(circle at 50% 80%, rgba(120,65,30,0.3) 3px, transparent 5px);
    background-size: 350px 350px, 280px 280px, 400px 400px;
    opacity: 0.5;
}
@keyframes vmSteamRise { from { transform: translateY(0); opacity: 0.6; } to { transform: translateY(-30px); opacity: 1; } }

/* ════════════════════════════════
   테마: 학교 (달령)
   ════════════════════════════════ */
.vm-page[data-theme="school"] .vm-theme-bg {
    background: linear-gradient(180deg, #fce7f3 0%, #fbcfe8 50%, #f9a8d4 100%);
}
.vm-page[data-theme="school"] .vm-theme-bg::before {
    background-image:
        linear-gradient(90deg, rgba(236,72,153,0.08) 1px, transparent 1px),
        linear-gradient(rgba(236,72,153,0.08) 1px, transparent 1px);
    background-size: 32px 32px;
}
.vm-page[data-theme="school"] .vm-theme-bg::after {
    background:
        radial-gradient(ellipse at 15% 25%, rgba(255,255,255,0.5) 0%, transparent 30%),
        radial-gradient(ellipse at 85% 75%, rgba(244,114,182,0.3) 0%, transparent 40%);
    animation: vmPetalsFloat 14s ease-in-out infinite;
}
@keyframes vmPetalsFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(3deg); } }

/* ════════════════════════════════
   테마: 겨울 산 (설호)
   ════════════════════════════════ */
.vm-page[data-theme="winter"] .vm-theme-bg {
    background: linear-gradient(180deg, #1e293b 0%, #475569 50%, #cbd5e1 100%);
}
.vm-page[data-theme="winter"] .vm-theme-bg::before {
    background:
        linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.35) 0%, transparent 55%);
    animation: vmMountainShimmer 10s ease-in-out infinite;
}
.vm-page[data-theme="winter"] .vm-theme-bg::after {
    background-image:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,0.9) 1.5px, transparent 2.5px),
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.7) 1px, transparent 2px),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.8) 1.5px, transparent 2.5px),
        radial-gradient(circle at 30% 60%, rgba(255,255,255,0.6) 1px, transparent 2px),
        radial-gradient(circle at 70% 80%, rgba(255,255,255,0.8) 1.5px, transparent 2.5px);
    background-size: 150px 150px, 200px 200px, 180px 180px, 240px 240px, 220px 220px;
    animation: vmSnowfall 18s linear infinite;
}
@keyframes vmMountainShimmer { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes vmSnowfall { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 30px 1000px, -40px 1200px, 20px 900px, -20px 1100px, 40px 1000px; } }

/* ════════════════════════════════
   테마: 방 (루다)
   ════════════════════════════════ */
.vm-page[data-theme="room"] .vm-theme-bg {
    background: linear-gradient(180deg, #2d1b3d 0%, #4c1d95 50%, #7c3aed 100%);
}
.vm-page[data-theme="room"] .vm-theme-bg::before {
    background:
        radial-gradient(circle at 20% 20%, rgba(251,191,36,0.3) 0%, transparent 20%),
        radial-gradient(circle at 80% 15%, rgba(251,191,36,0.25) 0%, transparent 18%),
        radial-gradient(circle at 50% 85%, rgba(236,72,153,0.2) 0%, transparent 35%);
    animation: vmRoomLights 6s ease-in-out infinite alternate;
}
.vm-page[data-theme="room"] .vm-theme-bg::after {
    background:
        linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.3) 100%);
}
@keyframes vmRoomLights { from { opacity: 0.7; } to { opacity: 1; } }

/* ════════════════════════════════
   테마: 밤하늘 (리아)
   ════════════════════════════════ */
.vm-page[data-theme="night"] .vm-theme-bg {
    background: linear-gradient(180deg, #020617 0%, #1e1b4b 50%, #312e81 100%);
}
.vm-page[data-theme="night"] .vm-theme-bg::before {
    background:
        radial-gradient(ellipse at 85% 15%, rgba(248,250,252,0.25) 0%, transparent 8%),
        radial-gradient(ellipse at 85% 15%, rgba(248,250,252,0.1) 0%, transparent 12%);
}
.vm-page[data-theme="night"] .vm-theme-bg::after {
    background-image:
        radial-gradient(circle at 10% 20%, #fff 1px, transparent 1.5px),
        radial-gradient(circle at 25% 50%, #fff 0.5px, transparent 1px),
        radial-gradient(circle at 45% 30%, #fff 1px, transparent 1.5px),
        radial-gradient(circle at 65% 70%, #fff 0.5px, transparent 1px),
        radial-gradient(circle at 80% 40%, #fff 1px, transparent 1.5px),
        radial-gradient(circle at 15% 80%, #fff 0.5px, transparent 1px),
        radial-gradient(circle at 55% 90%, #fff 1px, transparent 1.5px);
    background-size: 300px 300px, 250px 250px, 350px 350px, 280px 280px, 320px 320px, 270px 270px, 340px 340px;
    animation: vmStarTwinkle 4s ease-in-out infinite;
    opacity: 0.9;
}
@keyframes vmStarTwinkle { 0%,100% { opacity: 0.9; } 50% { opacity: 0.5; } }

/* 모바일 대응 */
@media (max-width: 900px) {
    .vm-pad { padding: 32px 16px 60px; }
    .vm-title { font-size: 2rem; }
    .vm-week-grid { grid-template-columns: repeat(2, 1fr); }
    .vm-day-card { min-height: 120px; }
}
@media (max-width: 520px) {
    .vm-tabs { gap: 6px; }
    .vm-tab { padding: 8px 14px; font-size: 0.82rem; }
    .vm-week-grid { grid-template-columns: 1fr; }
    .vm-toolbar { flex-direction: column; align-items: stretch; }
}

/* 라이센스 카드 */
.license-card {
    max-width: 640px; margin: 32px auto; padding: 36px;
    background: var(--c-white); border-radius: 16px;
    border: 1px solid var(--c-border);
}
.license-section { margin-bottom: 24px; }
.license-section:last-of-type { margin-bottom: 20px; }
.license-section h3 {
    font-size: 1.05rem; font-weight: 700; margin: 0 0 12px;
    color: var(--c-text);
}
.license-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.license-list li {
    position: relative; padding-left: 20px;
    font-size: 0.9rem; line-height: 1.6; color: var(--c-text-2);
}
.license-list li::before {
    content: '┊'; position: absolute; left: 0; top: 0;
    color: var(--c-text-3);
}
.license-list li:last-child::before { content: '╰'; }
.license-list li strong { color: var(--c-text); }
.license-footer {
    text-align: center; padding-top: 20px;
    border-top: 1px solid var(--c-border);
}
.license-footer p {
    margin: 0; font-size: 0.78rem; color: var(--c-text-3); font-weight: 500;
}

/* 자료실 인증 카드 */
.archive-verify-card {
    max-width: 560px; margin: 32px auto; padding: 40px;
    background: var(--c-white); border-radius: 16px;
    border: 1px solid var(--c-border); text-align: center;
}
.archive-verify-card__icon { font-size: 3rem; margin-bottom: 16px; }
.archive-verify-card h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; }
.archive-verify-card__desc { color: var(--c-text-2); font-size: 0.9rem; margin: 0 0 28px; }
.archive-verify-card__steps { text-align: left; display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.archive-verify-step {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px; background: var(--c-bg); border-radius: 12px;
}
.archive-verify-step__num {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--c-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 800; flex-shrink: 0;
}
.archive-verify-step__text strong { display: block; font-size: 0.9rem; margin-bottom: 2px; }
.archive-verify-step__text p { margin: 0; font-size: 0.82rem; color: var(--c-text-2); }
.archive-verify-card__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 10px;
    background: #5865F2; color: #fff; font-weight: 600; font-size: 0.9rem;
    text-decoration: none; transition: all 0.15s ease;
}
.archive-verify-card__btn:hover { background: #4752C4; transform: translateY(-1px); }

/* 채널 드로어 토글 버튼 (모바일 전용) */
.cm-drawer-toggle {
    display: none;
    padding: 6px; border-radius: 8px;
    color: var(--c-text-2);
    align-items: center; justify-content: center;
    margin-right: 4px;
}
.cm-drawer-toggle:hover { background: var(--c-bg); color: var(--c-text); }

/* 채널 사이드바 모바일 드로어 */
@media (max-width: 768px) {
    #page-community { padding-top: 56px; }
    .cm { position: relative; height: auto; min-height: calc(100vh - 56px); border-radius: 0; border-left: none; border-right: none; }
    .cm-drawer-toggle { display: inline-flex; }

    /* 왼쪽에서 슬라이드되는 드로어 */
    .cm-channels {
        position: fixed;
        top: 56px; /* m-header 높이 */
        left: 0; bottom: 0;
        width: min(280px, 82vw);
        background: var(--c-white);
        border-right: 1px solid var(--c-border);
        border-bottom: none;
        max-height: none;
        overflow-y: auto;
        z-index: 90;
        transform: translateX(-100%);
        transition: transform 0.3s var(--ease);
        box-shadow: 2px 0 16px rgba(0,0,0,0.06);
    }
    .cm.drawer-open .cm-channels { transform: translateX(0); }

    /* 백드롭 */
    .cm.drawer-open::before {
        content: '';
        position: fixed;
        top: 56px; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 85;
        animation: fadeIn 0.2s ease;
    }
    .cm-channels__group { display: block; padding: 10px 12px; }
    .cm-channels__category { display: block; margin-bottom: 6px; }
    .cm-channel { width: 100%; }
    .cm-content { min-height: 400px; }
}

@media (max-width: 640px) {
    .fc-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .fc-detail__card { padding: 20px; }
    .fc-detail__title { font-size: 1.1rem; }
}

@media (max-width: 640px) {
    .profile-banner { height: 140px; }
    .profile-card { padding: 0 18px 24px; }
    .profile-card__header { gap: 12px; }
    .profile-avatar { width: 72px; height: 72px; }
    .profile-card__header { margin-top: -36px; }
    .profile-displayname { font-size: 1.2rem; }
    .profile-actions { width: 100%; justify-content: stretch; }
    .profile-actions .profile-btn { flex: 1; justify-content: center; }
    .profile-info-grid { grid-template-columns: 1fr; }
    .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════
   소셜 플로팅 아이콘
   ═══════════════════════════════ */
.social-float {
    position: fixed; bottom: 24px; right: 24px; z-index: 900;
    display: flex; flex-direction: column; gap: 10px;
}
.social-float__btn {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--c-white); color: var(--c-text-2);
    border: 1px solid var(--c-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.25s var(--ease);
}
.social-float__btn:hover { transform: translateY(-3px); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.social-float__btn:nth-child(1):hover { color: #FF0000; border-color: #FF0000; }
.social-float__btn:nth-child(2):hover { color: #E4405F; border-color: #E4405F; }
.social-float__btn:nth-child(3):hover { color: #000000; border-color: #000000; }
.social-float__btn:nth-child(4):hover { color: #000000; border-color: #000000; }
.social-float__btn:nth-child(5):hover { color: #5865F2; border-color: #5865F2; }


/* ═══════════════════════════════
   애니메이션
   ═══════════════════════════════ */
[data-anim="fade-up"] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-anim="fade-up"].anim-active { opacity: 1; transform: translateY(0); }
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.2); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0.08); } }


/* ═══════════════════════════════
   반응형
   ═══════════════════════════════ */
@media (max-width: 1024px) {
    .member-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-members { grid-template-columns: repeat(2, 1fr); }
    .srv-feats { grid-template-columns: 1fr 1fr; }
    .cta-card { flex-direction: column; text-align: center; padding: 40px 32px; }
    .dash-srv__feats { grid-template-columns: 1fr; }
    .dash-members { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .m-header { display: flex; }
    .content { margin-left: 0; }

    /* 네비 · 상단 버튼 모바일 숨김 */
    .nav { display: none; }
    .top-btns { display: none !important; }
    .hero__scroll { display: none; }
    .hero__members span { font-size: 0.75rem; }

    /* 사이드바 없으니 오프셋 제거 */
    .hero__inner,
    .nav__inner,
    .numbers__grid,
    .section__wrap,
    .footer .section__wrap { transform: none; }

    /* 메인 페이지 모바일 */
    #page-main .hero__inner { padding: 120px 20px 60px; }
    #page-main .hero__title { font-size: clamp(1.6rem, 5.5vw, 2rem); }
    #page-main .hero__actions { flex-direction: column; width: 100%; }
    #page-main .hero__actions .btn { width: 100%; justify-content: center; }
    .numbers__grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .section { padding: 72px 0; }
    .section__wrap { padding: 0 20px; }
    .about-grid { grid-template-columns: 1fr; }
    .srv-card__head, .srv-card__body { padding-left: 24px; padding-right: 24px; }
    .srv-card__head { padding-top: 32px; }
    .srv-card__body { padding-bottom: 32px; }
    .srv-feats { grid-template-columns: 1fr; }
    .srv-ip { flex-wrap: wrap; }
    .srv-ip__value { text-align: left; flex: unset; }
    .member-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .member-card__banner { height: 80px; }
    .member-card__avatar { width: 52px; height: 52px; margin-top: -26px; }
    .notice-row { flex-wrap: wrap; gap: 6px; padding: 14px 16px; }
    .notice-row__date { width: 100%; }
    .notice-row__arrow { display: none; }
    .page-hero { padding: 36px 24px; }
    .cta-card { padding: 32px 20px; }
    .footer__top { flex-direction: column; gap: 16px; text-align: center; }
    .footer__links { justify-content: center; }

    /* 대시보드 페이지 모바일 */
    .page-pad { padding: 72px 16px 24px; }
    .dash-srv__ip { flex-wrap: wrap; }
    .dash-srv__ip code { text-align: left; flex: unset; width: 100%; }
    .dash-info-grid { grid-template-columns: 1fr; }
    .dash-status-grid { grid-template-columns: 1fr; }
    .dash-members { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .numbers__grid { grid-template-columns: repeat(2, 1fr); }
    .member-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
    .dash-members { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
    .dash-stat-row { grid-template-columns: 1fr; }
    .rank-top1-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════
   랭킹 페이지
   ══════════════════════════════ */

/* 1위 하이라이트 카드 그리드 */
.rank-top1-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}
.rank-top1-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    border: 1px solid var(--c-border);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.rank-top1-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
}
.rank-top1-card--donate::before { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.rank-top1-card--chat::before { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.rank-top1-card--voice::before { background: linear-gradient(90deg, #34d399, #10b981); }
.rank-top1-card--invite::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.rank-top1-card--money::before { background: linear-gradient(90deg, #f472b6, #ec4899); }
.rank-top1-card--level::before { background: linear-gradient(90deg, #fbbf24, #f97316); }
.rank-top1-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.rank-top1-card__icon { font-size: 2rem; margin-bottom: 8px; }
.rank-top1-card__label { font-size: 0.75rem; color: var(--c-text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.rank-top1-card__name { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-top1-card__value { font-size: 0.85rem; color: var(--c-text-2); font-weight: 500; }

/* 탭 */
.rank-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.rank-tab {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid var(--c-border);
    background: #fff;
    color: var(--c-text-2);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.rank-tab:hover { border-color: var(--c-primary); color: var(--c-primary); }
.rank-tab.active {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}

/* 패널 */
.rank-panel { display: none; }
.rank-panel.active { display: block; }

/* 테이블 */
.rank-table {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--c-border);
    overflow: hidden;
}
.rank-table__header {
    display: grid;
    grid-template-columns: 56px 1fr 80px 140px;
    padding: 14px 20px;
    background: #f9fafb;
    border-bottom: 1px solid var(--c-border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.rank-table__row {
    display: grid;
    grid-template-columns: 56px 1fr 80px 140px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
    transition: background 0.1s;
}
.rank-table__row:last-child { border-bottom: none; }
.rank-table__row:hover { background: #f9fafb; }

/* 1,2,3위 배경 */
.rank-table__row--1 { background: linear-gradient(90deg, rgba(250,204,21,0.08), transparent); }
.rank-table__row--2 { background: linear-gradient(90deg, rgba(156,163,175,0.08), transparent); }
.rank-table__row--3 { background: linear-gradient(90deg, rgba(180,83,9,0.06), transparent); }

.rank-table__col--rank {
    font-weight: 700;
    font-size: 1rem;
    color: var(--c-text-2);
}
.rank-table__row--1 .rank-table__col--rank { color: #f59e0b; }
.rank-table__row--2 .rank-table__col--rank { color: #9ca3af; }
.rank-table__row--3 .rank-table__col--rank { color: #b45309; }

.rank-table__col--name { font-weight: 600; color: var(--c-text); font-size: 0.92rem; }
.rank-table__col--level { font-size: 0.82rem; color: var(--c-text-3); }
.rank-table__col--value { font-weight: 600; color: var(--c-primary); text-align: right; font-size: 0.92rem; }

.rank-table__empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--c-text-3);
    font-size: 0.92rem;
}

/* 메달 이모지 */
.rank-medal { margin-right: 4px; }

/* ═══════════════════════════════
   후원 페이지
   ═══════════════════════════════ */
.donate-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.donate-card {
    width: 100%;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.donate-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #D4A574, #E8C9A0, #D4A574);
}
.donate-card__icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
.donate-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 8px;
}
.donate-card__desc {
    font-size: 0.92rem;
    color: var(--c-text-2);
    line-height: 1.6;
    margin-bottom: 0;
}
.donate-card__divider {
    width: 60px;
    height: 2px;
    background: var(--c-border);
    margin: 24px auto;
    border-radius: 1px;
}
.donate-card__bank {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(212, 165, 116, 0.08);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 10px;
    margin-bottom: 20px;
}
.donate-card__bank-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #D4A574;
    background: rgba(212, 165, 116, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
}
.donate-card__bank-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: 1px;
    font-family: 'Inter', monospace;
}
.donate-card__copy {
    background: none;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--c-text-3);
    transition: all 0.2s;
    display: flex;
    align-items: center;
}
.donate-card__copy:hover {
    color: #D4A574;
    border-color: #D4A574;
}
.donate-card__note {
    font-size: 0.85rem;
    color: var(--c-text-3);
    line-height: 1.6;
}
.donate-card__note strong { color: #D4A574; }

.donate-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.donate-info__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    transition: border-color 0.2s;
}
.donate-info__item:hover {
    border-color: rgba(212, 165, 116, 0.3);
}
.donate-info__icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.donate-info__item strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 4px;
}
.donate-info__item p {
    font-size: 0.82rem;
    color: var(--c-text-3);
    margin: 0;
    line-height: 1.5;
}
.donate-footer {
    font-size: 0.85rem;
    color: var(--c-text-3);
    text-align: center;
}

@media (max-width: 900px) {
    .rank-top1-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .rank-top1-grid { grid-template-columns: repeat(2, 1fr); }
    .rank-table__header,
    .rank-table__row { grid-template-columns: 40px 1fr 60px 100px; padding: 12px 14px; }
    .rank-tabs { gap: 4px; }
    .rank-tab { padding: 6px 12px; font-size: 0.82rem; }
}

/* ═══════════════════════════════════════
   제재기록 / 이용제한 / 차단명단  (Light Theme)
   ═══════════════════════════════════════ */

/* ── 스피너 ── */
.sec-spinner {
    width: 24px; height: 24px;
    border: 2.5px solid #E5E7EB;
    border-top-color: #6B7280;
    border-radius: 50%;
    animation: sec-spin 0.8s linear infinite;
    margin: 0 auto 10px;
}
@keyframes sec-spin { to { transform: rotate(360deg); } }

/* ── 검색 ── */
.sec-search-wrap {
    position: relative;
    margin-bottom: 20px;
}
.sec-search-wrap .sec-search {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    color: #111827;
    font-size: 0.9rem;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sec-search-wrap .sec-search:focus { border-color: #5865F2; box-shadow: 0 0 0 3px rgba(88,101,242,0.1); }
.sec-search-wrap .sec-search::placeholder { color: #9CA3AF; }
.sec-search-wrap .sec-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #9CA3AF; pointer-events: none;
}

.modlog-loading { text-align: center; padding: 60px 20px; color: #9CA3AF; font-size: 0.85rem; }

/* ── 제재기록 카드 ── */
.modlog-list { display: flex; flex-direction: column; gap: 10px; }
.modlog-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.25s;
    cursor: default;
}
.modlog-card:hover { border-color: #D1D5DB; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.modlog-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #F3F4F6;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid #E5E7EB;
}
.modlog-info { flex: 1; min-width: 0; }
.modlog-info__name { font-weight: 600; font-size: 0.92rem; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modlog-info__id { font-size: 0.72rem; color: #9CA3AF; margin-top: 1px; font-variant-numeric: tabular-nums; }
.modlog-info__reason { font-size: 0.8rem; color: #6B7280; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modlog-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.modlog-meta__warn {
    font-size: 0.75rem; font-weight: 700;
    color: #DC2626;
    background: #FEF2F2;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #FECACA;
}
.modlog-meta__time { font-size: 0.7rem; color: #9CA3AF; }
.modlog-meta__punishment { font-size: 0.7rem; color: #D97706; font-weight: 600; }
.modlog-detail-btn {
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    color: #4F46E5;
    font-size: 0.76rem; font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    font-family: inherit;
}
.modlog-detail-btn:hover { background: #E0E7FF; border-color: #A5B4FC; color: #4338CA; }

/* ── 빈 상태 ── */
.modlog-empty {
    text-align: center;
    padding: 80px 20px;
    color: #9CA3AF;
    font-size: 0.9rem;
}
.modlog-empty svg { display: block; margin: 0 auto 12px; color: #D1D5DB; }

/* ── 모달 ── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    animation: modalFadeIn 0.2s ease;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 32px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    animation: modalSlideIn 0.25s ease;
}
@keyframes modalSlideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-close {
    position: absolute; top: 16px; right: 18px;
    background: #F3F4F6; border: none; color: #6B7280;
    font-size: 16px; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.modal-close:hover { color: #111827; background: #E5E7EB; }
.modal-body h3 { font-size: 1.1rem; color: #111827; margin-bottom: 20px; font-weight: 700; }
.modal-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #F3F4F6; font-size: 0.86rem; }
.modal-row__label { color: #6B7280; font-weight: 500; }
.modal-row__value { color: #111827; font-weight: 500; text-align: right; max-width: 60%; word-break: break-all; }
.modal-evidence { margin-top: 20px; }
.modal-evidence img { width: 100%; border-radius: 10px; margin-top: 10px; border: 1px solid #E5E7EB; }

/* ── 이용제한 ── */
.restricted-list { display: flex; flex-direction: column; gap: 10px; }
.restricted-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 14px;
    transition: all 0.25s;
}
.restricted-card:hover { border-color: #D1D5DB; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.restricted-info__name { font-weight: 600; font-size: 0.92rem; color: #111827; }
.restricted-info__id { font-size: 0.76rem; color: #9CA3AF; margin-top: 3px; font-variant-numeric: tabular-nums; }
.restricted-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.restricted-right__timer {
    font-size: 0.88rem; font-weight: 700;
    color: #D97706;
    font-variant-numeric: tabular-nums;
    background: #FFFBEB;
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid #FDE68A;
}
.restricted-right__warn { font-size: 0.7rem; color: #DC2626; font-weight: 600; }
.restricted-right__type { font-size: 0.7rem; color: #9CA3AF; }

/* ── 차단명단 ── */
.banlist-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; margin-top: 4px; min-height: 450px; }
.banlist-left {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    max-height: 600px;
}
.banlist-search-wrap { position: relative; }
.banlist-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #9CA3AF; pointer-events: none;
}
.banlist-search {
    width: 100%; padding: 10px 14px 10px 36px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    color: #111827;
    font-size: 0.86rem;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.banlist-search::placeholder { color: #9CA3AF; }
.banlist-search:focus { border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,0.1); background: #fff; }
.banlist-users { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.banlist-users::-webkit-scrollbar { width: 4px; }
.banlist-users::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; }
.banlist-user {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.banlist-user:hover { background: #F3F4F6; }
.banlist-user.active { background: #F5F3FF; border-color: #DDD6FE; }
.banlist-user__avatar { width: 34px; height: 34px; border-radius: 50%; background: #F3F4F6; object-fit: cover; flex-shrink: 0; border: 2px solid #E5E7EB; }
.banlist-user__name { font-size: 0.86rem; color: #111827; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banlist-right {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 28px;
    transition: all 0.3s;
}
.banlist-empty { text-align: center; padding: 80px 20px; color: #9CA3AF; font-size: 0.88rem; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.banlist-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #F3F4F6; }
.banlist-detail-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #F3F4F6; border: 3px solid #DDD6FE; }
.banlist-detail-name { font-size: 1.15rem; font-weight: 700; color: #111827; }
.banlist-detail-id { font-size: 0.76rem; color: #9CA3AF; margin-top: 3px; font-variant-numeric: tabular-nums; }
.banlist-detail-rows { display: flex; flex-direction: column; }
.banlist-detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #F3F4F6;
    font-size: 0.88rem;
}
.banlist-detail-row:last-child { border-bottom: none; }
.banlist-detail-row__label { color: #6B7280; font-weight: 500; }
.banlist-detail-row__value { color: #111827; font-weight: 500; text-align: right; max-width: 60%; word-break: break-all; }

@media (max-width: 800px) {
    .banlist-layout { grid-template-columns: 1fr; }
    .banlist-left { max-height: 300px; }
}

/* ═══════════════════════════════
   NuroPlay 소개 페이지
   ═══════════════════════════════ */
.np-about {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.np-about__hero-card {
    text-align: center;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 48px 32px 40px;
    position: relative;
    overflow: hidden;
}
.np-about__hero-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6366F1, #A78BFA, #6366F1);
}
.np-about__logo {
    margin-bottom: 16px;
}
.np-about__logo img {
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(99,102,241,0.15);
}
.np-about__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-text);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.np-about__desc {
    font-size: 0.95rem;
    color: var(--c-text-2);
    line-height: 1.7;
}
.np-about__section {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 32px;
}
.np-about__section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.np-about__section-icon {
    font-size: 1.1rem;
    color: #6366F1;
}
.np-about__section-header h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}
.np-about__activities {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.np-about__activity {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #F9FAFB;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}
.np-about__activity:hover {
    border-color: rgba(99,102,241,0.2);
    background: #F5F3FF;
}
.np-about__activity-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(99,102,241,0.1);
    color: #6366F1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.np-about__activity-text strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 4px;
}
.np-about__activity-text p {
    font-size: 0.84rem;
    color: var(--c-text-3);
    margin: 0;
    line-height: 1.5;
}
.np-about__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.np-about__card {
    background: #F9FAFB;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 24px 20px;
    transition: all 0.25s ease;
}
.np-about__card:hover {
    border-color: var(--c-border);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.np-about__card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.np-about__card h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 6px;
}
.np-about__card p {
    font-size: 0.82rem;
    color: var(--c-text-3);
    margin: 0;
    line-height: 1.55;
}
.np-about__links {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.np-about__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}
.np-about__link--discord {
    background: #5865F2;
    color: #fff;
}
.np-about__link--discord:hover {
    background: #4752C4;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(88,101,242,0.35);
}
.np-about__link--youtube {
    background: #FF0000;
    color: #fff;
}
.np-about__link--youtube:hover {
    background: #CC0000;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255,0,0,0.3);
}
.np-about__footer {
    font-size: 0.85rem;
    color: var(--c-text-3);
    text-align: center;
}

@media (max-width: 640px) {
    .np-about__cards { grid-template-columns: 1fr; }
    .np-about__links { flex-direction: column; align-items: stretch; }
    .np-about__link { justify-content: center; }
    .np-about__section { padding: 24px 18px; }
    .np-about__hero-card { padding: 36px 20px 32px; }
}

/* ═══════════════════════════════════════════
   전역 모바일 최종 패치 (v2026.04.23)
   ═══════════════════════════════════════════ */

/* 768px 이하 공통 */
@media (max-width: 768px) {
    /* 페이지 내부 패딩 */
    .page-pad { padding: 72px 14px 24px !important; }
    .page-hero { padding: 28px 20px !important; margin-bottom: 20px; }
    .page-hero h1, .page-hero h2 { font-size: 1.25rem !important; }
    .page-hero p { font-size: 0.82rem !important; }

    /* 모달 오버레이 — 작은 화면에서 꽉 차게 */
    .fc-write-overlay,
    .archive-verify-overlay,
    .vm-modal-overlay,
    .modal-overlay {
        padding: 12px;
    }
    .fc-write-modal,
    .vm-modal,
    .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 14px !important;
    }
    .fc-write-modal__header { padding: 14px 18px !important; }
    .fc-write-modal__header h3 { font-size: 1rem !important; }
    .fc-write-modal__body { padding: 16px !important; }

    /* 채팅 입력바 iOS 하단 safe area */
    .cm-chat-input-area {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0)) !important;
        gap: 8px;
    }
    .cm-chat-input { padding: 10px 14px; font-size: 0.85rem; }

    /* 커뮤니티 게시판 패딩 축소 */
    .cm-board-view { padding: 14px 14px !important; }

    /* 게시글 상세 */
    .fc-detail__card { padding: 18px !important; }
    .fc-detail__title { font-size: 1.05rem !important; }
    .fc-detail__body { font-size: 0.9rem; }

    /* 댓글 입력 */
    .fc-comments__write { flex-wrap: wrap; gap: 8px; }
    .fc-comments__write input { min-width: 0; flex: 1; }
    .fc-comments__submit { width: 100%; }

    /* 테이블 — 가로 스크롤 */
    .rank-table,
    .modlog-table,
    .banlist-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 랭킹 테이블 칼럼 압축 */
    .rank-table__header,
    .rank-table__row { grid-template-columns: 36px 1fr 60px 90px !important; padding: 10px 12px !important; font-size: 0.8rem; }

    /* 프로필 */
    .profile-banner { height: 120px !important; }
    .profile-card__avatar { width: 80px !important; height: 80px !important; margin-top: -40px !important; }
    .profile-card__name { font-size: 1.1rem !important; }
    .profile-card__header { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* 자료 상세 */
    .fc-detail__images { gap: 8px; }
    .fc-detail__img { max-width: 100%; height: auto; }
}

/* 480px 이하 추가 조정 */
@media (max-width: 480px) {
    html { font-size: 15px; }
    .page-hero { padding: 22px 16px !important; }
    .page-hero h1, .page-hero h2 { font-size: 1.1rem !important; }
    .fc-write-btn { padding: 8px 14px; font-size: 0.78rem; }
    .fc-res-item__thumb, .fc-res-item__nothumb { width: 56px; height: 56px; }
    .fc-detail__card { padding: 14px !important; border-radius: 12px; }
    .fc-comment { gap: 8px; padding: 10px 0; }
    .fc-comment__avatar { width: 32px !important; height: 32px !important; }
    /* 상단 고정 헤더 높이만큼 페이지 패딩 확보 */
    .page-pad { padding-top: 64px !important; }
}

/* 가로 넘침 디버그 방지: 모든 주요 컨테이너 */
.page, .page-pad, .content, .cm, .cm-content { max-width: 100%; }

/* 포커스 아웃라인 접근성 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════
   임베드 빌더 (eb__*) + 투표 (poll-*)
   ════════════════════════════════════════════════════════════ */
.eb { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 1100px) { .eb { grid-template-columns: 1fr; } }

.eb__left, .eb__right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.eb__section-title { font-size: 0.85rem; font-weight: 700; color: var(--text-secondary, #b9bbbe); text-transform: uppercase; letter-spacing: .5px; margin: 18px 0 4px; }
.eb__section-title:first-child { margin-top: 0; }

.eb__field { display: flex; flex-direction: column; gap: 6px; }
.eb__field label { font-size: 0.8rem; font-weight: 600; color: #dcddde; }
.eb__field .eb__hint { color: #72767d; font-weight: 400; font-size: 0.72rem; margin-left: 6px; }
.eb__field input, .eb__field textarea, .eb__field select {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    color: #fff; border-radius: 8px; padding: 10px 12px; font-size: 0.9rem;
    font-family: inherit; resize: vertical;
}
.eb__field input:focus, .eb__field textarea:focus, .eb__field select:focus {
    border-color: #5865F2; background: rgba(88,101,242,0.08);
}
.eb__row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.eb__field--grow { flex: 1; min-width: 0; }
.eb__color-row { display: flex; gap: 8px; align-items: center; }
.eb__color-row input[type="color"] { width: 42px; height: 38px; padding: 2px; border-radius: 8px; cursor: pointer; }
.eb__color-row input[type="text"] { flex: 1; font-family: monospace; }

.eb__upload-btn {
    background: rgba(88,101,242,0.18); border: 1px solid rgba(88,101,242,0.35);
    color: #fff; padding: 9px 14px; border-radius: 8px; cursor: pointer;
    font-size: 0.82rem; white-space: nowrap; transition: all .15s;
}
.eb__upload-btn:hover { background: rgba(88,101,242,0.3); }
.eb__upload-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.eb__fields { display: flex; flex-direction: column; gap: 10px; }
.eb__field-item { background: var(--c-bg, #F9FAFB); border: 1px solid var(--c-border); border-radius: 10px; padding: 10px; }
.eb__field-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.eb__f-name { flex: 1; }
.eb__inline-label { font-size: 0.78rem; color: var(--c-text-2); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.eb__remove { background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; }
.eb__remove:hover { background: #fca5a5; color: #fff; }

.eb__add-btn {
    background: var(--c-primary-l, #E8F4FD); border: 1px dashed rgba(11,127,212,0.5);
    color: var(--c-primary); padding: 10px; border-radius: 8px; cursor: pointer;
    font-weight: 600; font-size: 0.85rem; transition: all .15s;
}
.eb__add-btn:hover { background: #fff; border-style: solid; border-color: var(--c-primary); box-shadow: 0 2px 8px rgba(11,127,212,0.15); }

.eb__button-row { display: flex; gap: 8px; flex-wrap: wrap; }
.eb__buttons-list { display: flex; flex-direction: column; gap: 10px; }
.eb__btn-item { background: var(--c-bg, #F9FAFB); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.eb__btn-item--verify { border-color: #86efac; background: #f0fdf4; }
.eb__btn-item--link { border-color: #93c5fd; background: #eff6ff; }
.eb__btn-head { display: flex; justify-content: space-between; align-items: center; }
.eb__btn-kind { font-size: 0.82rem; color: var(--c-text); font-weight: 700; }
.eb__btn-row { display: flex; gap: 8px; }
.eb__b-emoji { width: 70px; text-align: center; }
.eb__b-label { flex: 1; }
.eb__btn-item select, .eb__btn-item input { background: #fff; border: 1px solid var(--c-border); color: var(--c-text); border-radius: 6px; padding: 8px 10px; font-size: 0.85rem; }
.eb__btn-item select:focus, .eb__btn-item input:focus { border-color: var(--c-primary); outline: none; }
.eb__btn-item select option { color: var(--c-text); background: #fff; }

.eb__actions { display: flex; gap: 10px; margin-top: 10px; }
.eb__send-btn { flex: 1; background: linear-gradient(135deg, #5865F2, #4752C4); color: #fff; border: none; padding: 12px 20px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 0.95rem; transition: all .15s; }
.eb__send-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(88,101,242,0.4); }
.eb__send-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.eb__clear-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #dcddde; padding: 12px 20px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.eb__clear-btn:hover { background: rgba(255,255,255,0.1); }

.eb__status { min-height: 20px; font-size: 0.85rem; padding: 4px 0; }
.eb__status.ok { color: #86efac; }
.eb__status.error { color: #fca5a5; }

.eb__empty { color: #72767d; font-size: 0.85rem; text-align: center; padding: 16px; background: rgba(255,255,255,0.02); border-radius: 8px; }

.eb__sent-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.eb__sent-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: 6px; font-size: 0.82rem; }
.eb__sent-kind { font-weight: 700; color: #c7d2fe; }
.eb__sent-meta { color: #8e9297; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb__sent-del { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 0.75rem; white-space: nowrap; }
.eb__sent-del:hover { background: rgba(239,68,68,0.3); }

/* ── 미리보기 (Discord 스타일) ── */
.eb__preview { background: #313338; border-radius: 12px; padding: 20px; min-height: 200px; }
.eb__msg { display: flex; gap: 14px; }
.eb__msg-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: #5865F2; object-fit: cover; }
.eb__msg-body { flex: 1; min-width: 0; }
.eb__msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.eb__msg-name { color: #fff; font-weight: 600; font-size: 0.98rem; }
.eb__msg-bot { background: #5865F2; color: #fff; font-size: 0.62rem; padding: 1px 5px; border-radius: 3px; font-weight: 700; letter-spacing: .3px; }
.eb__msg-time { color: #949ba4; font-size: 0.72rem; }
.eb__msg-content { color: #dbdee1; font-size: 0.92rem; margin-bottom: 6px; white-space: pre-wrap; word-break: break-word; }
.eb__embed { background: #2b2d31; border-radius: 4px; display: grid; grid-template-columns: 1fr auto; max-width: 520px; overflow: hidden; position: relative; }
.eb__embed-bar { width: 4px; background: #5865F2; grid-row: 1/-1; position: absolute; left: 0; top: 0; bottom: 0; }
.eb__embed-body { padding: 10px 14px 12px 16px; min-width: 0; }
.eb__embed-author { color: #fff; font-size: 0.82rem; font-weight: 600; margin: 4px 0 4px; }
.eb__embed-title { color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: 6px; word-break: break-word; }
.eb__embed-desc { color: #dbdee1; font-size: 0.88rem; margin-bottom: 8px; word-break: break-word; }
.eb__embed-fields { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
.eb__embed-field.inline { display: inline-block; vertical-align: top; margin-right: 20px; min-width: 150px; }
.eb__embed-fields:has(.inline) { display: block; }
.eb__embed-field-name { color: #fff; font-weight: 700; font-size: 0.82rem; margin-bottom: 2px; }
.eb__embed-field-val { color: #dbdee1; font-size: 0.85rem; word-break: break-word; }
.eb__embed-image { max-width: 100%; max-height: 280px; border-radius: 4px; display: block; object-fit: contain; margin-top: 6px; }
.eb__embed-thumb { grid-column: 2; width: 80px; height: 80px; border-radius: 4px; margin: 10px 14px 0 0; object-fit: cover; }
.eb__embed-footer { color: #949ba4; font-size: 0.72rem; margin-top: 8px; }

.eb__preview-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-width: 520px; }
.eb__pv-btn { background: #4e5058; color: #fff; padding: 7px 14px; border-radius: 3px; font-size: 0.85rem; font-weight: 600; cursor: default; }
.eb__pv-btn--primary { background: #5865F2; }
.eb__pv-btn--success { background: #248046; }
.eb__pv-btn--danger { background: #da373c; }
.eb__pv-btn--link { background: #4e5058; }
.eb__pv-btn--link::after { content: ' ↗'; font-size: 0.7rem; opacity: .7; }

/* ── V2 모드 토글 ── */
.eb__mode-tabs {
  display: flex; gap: 6px; margin-top: 4px;
  background: var(--c-surface-2, #f3f4f6);
  padding: 4px; border-radius: 10px; width: fit-content;
}
.eb__mode-tab {
  padding: 8px 16px; border: none; background: transparent;
  color: var(--c-text-2, #6b7280); font-size: 0.88rem; font-weight: 600;
  border-radius: 7px; cursor: pointer; transition: all .15s;
}
.eb__mode-tab:hover { background: rgba(0,0,0,.04); color: var(--c-text, #111); }
.eb__mode-tab--active {
  background: #fff; color: var(--c-primary, #5865F2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── V2 블록 에디터 ── */
.eb__v2-block {
  border-left: 3px solid var(--c-primary, #5865F2);
  padding-left: 10px;
}
.eb__v2-block--title { border-left-color: #ec4899; }
.eb__v2-block--heading { border-left-color: #8b5cf6; }
.eb__v2-block--separator { border-left-color: #9ca3af; }
.eb__v2-block--field { border-left-color: #10b981; }
.eb__v2-block--image { border-left-color: #f59e0b; }
.eb__v2-block--footer { border-left-color: #6b7280; }
.eb__v2-block-kind {
  font-size: 0.78rem; font-weight: 700;
  color: var(--c-text-2, #6b7280);
  text-transform: uppercase; letter-spacing: .5px;
}
.eb__v2-move {
  padding: 2px 6px; background: var(--c-surface-2, #f3f4f6);
  border: 1px solid var(--c-border, #e5e7eb); border-radius: 5px;
  cursor: pointer; font-size: 0.72rem;
}
.eb__v2-move:hover { background: var(--c-primary-l, #E8F4FD); }
.eb__v2-sep-preview {
  text-align: center; color: var(--c-text-3, #9ca3af);
  letter-spacing: 6px; font-size: 0.85rem; padding: 6px 0;
}
.eb__v2-img-preview {
  max-width: 100%; max-height: 160px; margin-top: 6px;
  border-radius: 6px; border: 1px solid var(--c-border, #e5e7eb);
}

/* ── V2 미리보기 (Discord 실제 렌더에 가깝게) ── */
.eb__v2-preview {
  position: relative; background: #2b2d31;
  border-radius: 8px; max-width: 520px; overflow: hidden;
  margin-top: 2px;
}
.eb__v2-accent {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: #5865F2;
}
.eb__v2-body {
  padding: 12px 14px 12px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.eb__v2-pv-title {
  color: #fff; font-weight: 700; font-size: 1.35rem;
  line-height: 1.3; margin: 2px 0;
}
.eb__v2-pv-heading {
  color: #fff; font-weight: 700; font-size: 1.1rem;
  line-height: 1.3; margin: 2px 0;
}
.eb__v2-pv-text {
  color: #dbdee1; font-size: 0.92rem;
  line-height: 1.45; word-break: break-word;
}
.eb__v2-pv-sep {
  height: 1px; background: #3f4147; margin: 6px 0;
}
.eb__v2-pv-field { margin: 2px 0; }
.eb__v2-pv-field-name {
  color: #fff; font-weight: 700; font-size: 0.92rem;
  margin-bottom: 2px;
}
.eb__v2-pv-field-val {
  color: #dbdee1; font-size: 0.92rem; line-height: 1.45;
}
.eb__v2-pv-image-wrap { margin: 4px 0; }
.eb__v2-pv-image {
  max-width: 100%; max-height: 300px;
  border-radius: 4px; display: block;
}
.eb__v2-pv-footer {
  color: #949ba4; font-size: 0.72rem; margin-top: 4px;
}

/* ── 투표 대시보드 ── */
.poll-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 1100px) { .poll-dash { grid-template-columns: 1fr; } }
.poll-dash__hint { font-size: 0.82rem; color: var(--c-text-2); margin-bottom: 14px; }
.poll-dash__hint code { background: var(--c-primary-l, #E8F4FD); padding: 2px 6px; border-radius: 4px; color: var(--c-primary); font-family: monospace; font-size: 0.88em; font-weight: 600; }
.poll-dash__options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.poll-dash__opt-row { display: flex; gap: 8px; align-items: center; }
.poll-dash__opt-row--with-img { align-items: stretch; gap: 10px; padding: 10px; background: #f9fafb; border: 1px solid var(--c-border); border-radius: 10px; }
.poll-dash__opt-text-col { flex: 1; display: flex; align-items: center; }
.poll-dash__opt-img-col { flex-shrink: 0; width: 100px; }
.poll-dash__opt-img-upload {
  display: flex; align-items: center; justify-content: center;
  width: 100px; height: 100px;
  background: #fff; border: 2px dashed var(--c-primary);
  border-radius: 10px; cursor: pointer; color: var(--c-primary);
  font-size: 0.72rem; font-weight: 600; text-align: center; padding: 4px;
  transition: all .15s;
}
.poll-dash__opt-img-upload:hover { background: var(--c-primary-l, #E8F4FD); border-style: solid; }
.poll-dash__opt-img-wrap { position: relative; width: 100px; height: 100px; }
.poll-dash__opt-img-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--c-border); }
.poll-dash__opt-img-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.7); color: #fff; border: none;
  cursor: pointer; font-size: 0.75rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.poll-dash__opt-img-remove:hover { background: #ef4444; }
.poll-dash__opt-input { flex: 1; background: #fff; border: 1px solid var(--c-border); color: var(--c-text); border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; }
.poll-dash__opt-input:focus { border-color: var(--c-primary); outline: none; }
.poll-dash__checkbox { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--c-text); cursor: pointer; }
.poll-dash__items { display: flex; flex-direction: column; gap: 10px; max-height: 600px; overflow-y: auto; }
.poll-dash__item { background: var(--c-bg, #F9FAFB); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px; }
.poll-dash__item-head { display: flex; justify-content: space-between; align-items: flex-start; color: var(--c-text); font-size: 0.92rem; margin-bottom: 6px; font-weight: 600; gap: 8px; }
.poll-dash__item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.poll-dash__status { font-size: 0.8rem; white-space: nowrap; }
.poll-dash__remaining { font-size: 0.75rem; color: var(--c-primary); font-weight: 500; white-space: nowrap; }
.poll-dash__item-url { display: flex; gap: 8px; align-items: center; font-size: 0.82rem; }
.poll-dash__item-url a { color: var(--c-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-weight: 500; }
.poll-dash__item-url a:hover { text-decoration: underline; }
.poll-dash__copy { background: var(--c-primary-l, #E8F4FD); border: 1px solid rgba(11,127,212,0.3); color: var(--c-primary); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 0.75rem; white-space: nowrap; font-weight: 600; }
.poll-dash__copy:hover { background: var(--c-primary); color: #fff; }
.poll-dash__item-actions { display: flex; gap: 6px; margin-top: 8px; }
.poll-dash__edit-btn, .poll-dash__delete-btn { padding: 5px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; cursor: pointer; border: 1px solid var(--c-border); background: #fff; color: var(--c-text); transition: all .15s; }
.poll-dash__edit-btn:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.poll-dash__delete-btn:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* ── 투표/설문 참여 페이지 추가 스타일 ── */
.poll-view__hero-img { width: 100%; max-height: 280px; object-fit: cover; border-radius: 12px; margin-bottom: 16px; }
.poll-view__opt-img { display: block; width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }

/* 설문 참여 페이지 */
.survey-view__questions { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.survey-view__q { background: var(--c-bg, #F9FAFB); border: 1px solid var(--c-border); border-radius: 12px; padding: 16px; }
.survey-view__q-head { margin-bottom: 8px; }
.survey-view__q-type { font-size: 0.75rem; color: var(--c-primary); font-weight: 700; background: var(--c-primary-l, #E8F4FD); padding: 3px 10px; border-radius: 10px; }
.survey-view__q-label { font-size: 1rem; font-weight: 600; color: var(--c-text); margin-bottom: 12px; }
.survey-view__opt { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border: 1px solid var(--c-border); border-radius: 8px; margin-bottom: 6px; cursor: pointer; color: var(--c-text); font-size: 0.92rem; transition: all .15s; }
.survey-view__opt:hover { border-color: var(--c-primary); }
.survey-view__opt input { cursor: pointer; }
.survey-view__text { width: 100%; min-height: 80px; padding: 10px 12px; background: #fff; border: 1px solid var(--c-border); border-radius: 8px; color: var(--c-text); font-size: 0.92rem; font-family: inherit; resize: vertical; }
.survey-view__text:focus { border-color: var(--c-primary); outline: none; }

/* ── 투표 참여 페이지 (라이트 테마) ── */
.poll-view { max-width: 680px; margin: 40px auto; }
.poll-view__card { background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 32px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.poll-view__title { color: var(--c-text); font-size: 1.6rem; margin: 0 0 12px; word-break: break-word; font-weight: 800; }
.poll-view__desc { color: var(--c-text-2); margin-bottom: 18px; line-height: 1.5; }
.poll-view__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.82rem; color: var(--c-text-2); margin-bottom: 22px; }
.poll-view__badge { background: var(--c-primary-l, #E8F4FD); color: var(--c-primary); padding: 3px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; }
.poll-view__options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.poll-view__option { background: var(--c-bg, #F9FAFB); border: 2px solid var(--c-border); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: all .15s; position: relative; overflow: hidden; }
.poll-view__option:hover:not(.closed) { border-color: var(--c-primary); background: var(--c-primary-l, #E8F4FD); }
.poll-view__option.selected { border-color: var(--c-primary); background: var(--c-primary-l, #E8F4FD); box-shadow: 0 2px 8px rgba(11,127,212,0.15); }
.poll-view__option.closed { cursor: default; }
.poll-view__opt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; position: relative; z-index: 1; }
.poll-view__opt-text { color: var(--c-text); font-weight: 600; font-size: 0.98rem; word-break: break-word; padding-right: 10px; }
.poll-view__opt-stat { color: var(--c-text-2); font-size: 0.82rem; white-space: nowrap; font-weight: 600; }
.poll-view__bar { background: rgba(17,24,39,0.08); height: 6px; border-radius: 3px; overflow: hidden; position: relative; z-index: 1; }
.poll-view__bar-fill { background: linear-gradient(90deg, var(--c-primary), var(--c-primary-s, #38BDF8)); height: 100%; transition: width .4s ease; }
.poll-view__submit { width: 100%; background: linear-gradient(135deg, var(--c-primary), #06b6d4); color: #fff; border: none; padding: 14px; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all .15s; }
.poll-view__submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(11,127,212,0.35); }
.poll-view__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.poll-view__closed-msg { text-align: center; color: #b91c1c; padding: 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; font-weight: 600; }
.poll-view__author { color: var(--c-text-3); font-size: 0.78rem; text-align: right; margin-top: 16px; }
.poll-view__loading, .poll-view__error { text-align: center; padding: 60px 20px; color: var(--c-text-2); }
.poll-view__error { color: #b91c1c; }

/* ════════════════════════════════════════════════════════════
   서버 통계 (stats__*) - 라이트 테마
   ════════════════════════════════════════════════════════════ */
.stats { display: flex; flex-direction: column; gap: 18px; }
.stats__header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.stats__range-select { display: flex; gap: 4px; flex-wrap: wrap; background: var(--c-bg, #F9FAFB); border: 1px solid var(--c-border); border-radius: 10px; padding: 4px; }
.stats__range { background: transparent; border: none; color: var(--c-text-2); padding: 7px 14px; border-radius: 7px; cursor: pointer; font-size: 0.82rem; font-weight: 600; transition: all .15s; }
.stats__range:hover { color: var(--c-text); background: #fff; }
.stats__range.active { background: var(--c-primary); color: #fff; box-shadow: 0 2px 6px rgba(11,127,212,0.25); }
.stats__refresh { background: #fff; border: 1px solid var(--c-border); color: var(--c-text-2); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 600; }
.stats__refresh:hover { background: var(--c-bg); color: var(--c-text); }

.stats__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stats__card { background: #fff; border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary); border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.stats__card--green { border-left-color: #10b981; }
.stats__card--purple { border-left-color: #8b5cf6; }
.stats__card-label { font-size: 0.72rem; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-bottom: 6px; }
.stats__card-value { font-size: 1.8rem; color: var(--c-text); font-weight: 800; line-height: 1.1; }
.stats__card-sub { font-size: 0.78rem; color: var(--c-text-2); margin-top: 6px; font-weight: 500; }

.stats__period { background: var(--c-primary-l, #E8F4FD); border: 1px solid rgba(11,127,212,0.2); border-radius: 10px; padding: 10px 14px; color: var(--c-text); font-size: 0.85rem; }
.stats__period strong { color: var(--c-primary); }

.stats__chart-block { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.stats__chart-block h4 { color: var(--c-text); font-size: 0.95rem; margin: 0 0 12px; font-weight: 700; }
.stats__chart-block canvas { width: 100% !important; height: 260px !important; max-height: 320px; }

.stats__tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.stats__top-block { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.stats__top-block h4 { color: var(--c-text); font-size: 0.9rem; margin: 0 0 10px; font-weight: 700; }
.stats__top-list { list-style: decimal; padding-left: 22px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.stats__top-list li { color: var(--c-text); font-size: 0.85rem; display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--c-border); }
.stats__top-list li:last-child { border-bottom: none; }
.stats__top-list li::marker { color: var(--c-text-3); font-weight: 700; }
.stats__top-name { color: var(--c-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.stats__top-val { color: var(--c-text-2); font-size: 0.78rem; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   관리 탭 (mgmt__*) - 라이트 테마
   ════════════════════════════════════════════════════════════ */
.mgmt { display: flex; flex-direction: column; gap: 20px; }
.mgmt__section { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.mgmt__section .eb__section-title { color: var(--c-text); }
.mgmt__hint { color: var(--c-text-2); font-size: 0.84rem; margin: 0 0 14px; }
.mgmt__hint code { background: var(--c-primary-l, #E8F4FD); padding: 2px 6px; border-radius: 4px; color: var(--c-primary); font-family: monospace; font-size: 0.88em; font-weight: 600; }

.mgmt__cc-form { display: grid; grid-template-columns: 180px 1fr auto; gap: 8px; margin-bottom: 14px; align-items: start; }
@media (max-width: 800px) { .mgmt__cc-form { grid-template-columns: 1fr; } }
.mgmt__cc-form input, .mgmt__cc-form textarea { background: #fff; border: 1px solid var(--c-border); color: var(--c-text); border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; font-family: inherit; resize: vertical; }
.mgmt__cc-form input:focus, .mgmt__cc-form textarea:focus { border-color: var(--c-primary); outline: none; }

.mgmt__cc-list { display: flex; flex-direction: column; gap: 6px; max-height: 400px; overflow-y: auto; }
.mgmt__cc-item { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--c-bg, #F9FAFB); border: 1px solid var(--c-border); border-radius: 8px; font-size: 0.85rem; }
.mgmt__cc-trigger code { background: var(--c-primary-l, #E8F4FD); padding: 3px 8px; border-radius: 5px; color: var(--c-primary); font-family: monospace; font-weight: 600; }
.mgmt__cc-response { color: var(--c-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.mgmt__cc-del { background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
.mgmt__cc-del:hover { background: #fca5a5; color: #fff; }

.mgmt__quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mgmt__quick-card { background: var(--c-bg, #F9FAFB); border: 1px solid var(--c-border); border-radius: 10px; padding: 14px; transition: all .2s; }
.mgmt__quick-card:hover { border-color: var(--c-primary); background: #fff; box-shadow: 0 4px 12px rgba(11,127,212,0.08); }
.mgmt__quick-title { color: var(--c-text); font-weight: 700; margin-bottom: 6px; font-size: 0.95rem; }
.mgmt__quick-desc { color: var(--c-text-2); font-size: 0.82rem; line-height: 1.6; }
.mgmt__quick-desc code { background: var(--c-primary-l, #E8F4FD); padding: 2px 6px; border-radius: 4px; color: var(--c-primary); font-family: monospace; font-size: 0.95em; font-weight: 600; }

/* 임베드 빌더/투표/관리 탭 공용 — 라이트 테마 보정 */
.bot-dash__tab-content .eb__section-title { color: var(--c-text); }
.bot-dash__tab-content .eb__field label { color: var(--c-text); }
.bot-dash__tab-content .eb__field input,
.bot-dash__tab-content .eb__field textarea,
.bot-dash__tab-content .eb__field select { background: #fff; border: 1px solid var(--c-border); color: var(--c-text); }
.bot-dash__tab-content .eb__field input:focus,
.bot-dash__tab-content .eb__field textarea:focus,
.bot-dash__tab-content .eb__field select:focus { border-color: var(--c-primary); background: #fff; outline: none; }
.bot-dash__tab-content .eb__hint { color: var(--c-text-3); }
.bot-dash__tab-content .eb__empty { background: var(--c-bg, #F9FAFB); color: var(--c-text-2); border: 1px dashed var(--c-border); }
.bot-dash__tab-content .eb__status.ok { color: #059669; }
.bot-dash__tab-content .eb__status.error { color: #dc2626; }
.bot-dash__tab-content .poll-dash__hint { color: var(--c-text-2); }
.bot-dash__tab-content .poll-dash__hint code { background: var(--c-primary-l, #E8F4FD); color: var(--c-primary); }
.bot-dash__tab-content .poll-dash__checkbox { color: var(--c-text); }
.bot-dash__tab-content .poll-dash__item { background: var(--c-bg, #F9FAFB); border: 1px solid var(--c-border); }
.bot-dash__tab-content .poll-dash__item-head { color: var(--c-text); }
.bot-dash__tab-content .poll-dash__opt-input { background: #fff; color: var(--c-text); border: 1px solid var(--c-border); }

/* ═══════════════════════════════════════════════════════════ */
/* 무료 기능 패널 (AutoMod / 환영카드 / 버튼역할)              */
/* 사이트 기본이 라이트 모드이므로 라이트용 색상을 기본으로 사용 */
/* ═══════════════════════════════════════════════════════════ */
.ff-panel { max-width: 800px; }
.ff-panel__head h3 { margin: 0 0 4px; font-size: 1.25rem; color: var(--c-text); }
.ff-panel__head p { margin: 0 0 18px; color: var(--c-text-3); font-size: 0.88rem; }
.ff-sub { margin: 22px 0 10px; font-size: 0.95rem; color: var(--c-text); font-weight: 600; }

/* 토글 체크박스 그리드 */
.ff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ff-toggle { display: flex; align-items: flex-start; gap: 10px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color .2s; }
.ff-toggle:hover { border-color: rgba(99,102,241,.5); }
.ff-toggle input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; accent-color: #6366f1; flex-shrink: 0; }
.ff-toggle span { font-size: 0.88rem; line-height: 1.35; color: var(--c-text); }
.ff-toggle small { color: var(--c-text-3); }

/* 입력 필드 행 */
.ff-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.ff-row > label { flex: 1 1 180px; display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: var(--c-text-2); }
.ff-row input, .ff-row select,
.ff-panel textarea { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 8px; padding: 8px 10px; color: var(--c-text); font-size: 0.88rem; transition: border-color .2s; }
.ff-row input:focus, .ff-row select:focus,
.ff-panel textarea:focus { border-color: #6366f1; outline: none; }

/* 버튼 */
.ff-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px; border: none; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.ff-btn--primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.ff-btn--primary:hover { filter: brightness(1.12); }
.ff-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.ff-btn--danger { background: #ef4444; color: #fff; padding: 6px 12px; font-size: 0.8rem; }
.ff-btn--danger:hover { background: #dc2626; }
.ff-btn--ghost { background: transparent; border: 1px dashed var(--c-border); color: var(--c-text-3); padding: 7px 14px; }
.ff-btn--ghost:hover { border-color: #6366f1; color: #6366f1; }

/* 액션 바 */
.ff-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.ff-status { font-size: 0.85rem; }

/* 힌트 텍스트 */
.ff-hint { color: var(--c-text-3); font-size: 0.82rem; margin: 4px 0; }
.ff-hint code { background: rgba(99,102,241,.1); color: #6366f1; padding: 1px 5px; border-radius: 4px; font-size: 0.8rem; }

/* 버튼 역할 — 역할 행 */
.ff-roles-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ff-role-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 8px; padding: 8px 10px; }
.ff-role-row select, .ff-role-row input { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 6px; padding: 6px 8px; color: var(--c-text); font-size: 0.82rem; }
.ff-role-row .ff-role-id { flex: 1 1 160px; }
.ff-role-row .ff-role-label { flex: 1 1 120px; }
.ff-role-row .ff-role-emoji { width: 70px; flex: 0 0 70px; }
.ff-role-row .ff-role-style { width: 80px; flex: 0 0 80px; }
.ff-role-row .ff-role-del { padding: 4px 10px; font-size: 1rem; }

/* 메뉴 목록 */
.ff-menu-list { display: flex; flex-direction: column; gap: 8px; }
.ff-menu-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 16px; }
.ff-menu-item strong { color: var(--c-text); }

/* 빠른 시작 가이드 배너 */
.ff-guide-banner { display: flex; gap: 24px; background: linear-gradient(135deg, rgba(88,101,242,.08), rgba(139,92,246,.05)); border: 1px solid rgba(88,101,242,.2); border-radius: 14px; padding: 22px 26px; margin-bottom: 20px; flex-wrap: wrap; }
.ff-guide-banner__left { flex: 1 1 380px; }
.ff-guide-banner__left h3 { margin: 0 0 14px; font-size: 1.1rem; color: var(--c-text); }
.ff-guide-banner__right { flex: 0 1 260px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 16px; background: rgba(99,102,241,.05); border-radius: 10px; }
.ff-guide-banner__right p { margin: 0; font-size: 0.88rem; color: var(--c-text-2); line-height: 1.5; }
.ff-guide-steps { display: flex; flex-direction: column; gap: 10px; }
.ff-guide-step { display: flex; gap: 12px; align-items: flex-start; }
.ff-guide-num { flex-shrink: 0; width: 28px; height: 28px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.ff-guide-step strong { font-size: 0.9rem; color: var(--c-text); }
.ff-guide-step p { margin: 2px 0 0; font-size: 0.82rem; color: var(--c-text-3); }
.ff-guide-step code { background: rgba(99,102,241,.1); color: #6366f1; padding: 1px 5px; border-radius: 4px; font-size: 0.8rem; }

/* 업로드 영역 & 미리보기 */
.ff-upload-area { padding: 12px 0; }
.ff-upload-thumb { margin-top: 8px; }
.ff-upload-thumb img { max-width: 100%; max-height: 120px; border-radius: 8px; border: 1px solid var(--c-border); object-fit: cover; }
.ff-preview-area { margin-bottom: 14px; }
.ff-preview-img { margin-top: 10px; }
.ff-preview-img img { max-width: 100%; border-radius: 10px; border: 1px solid var(--c-border); box-shadow: 0 2px 12px rgba(0,0,0,0.08); }

/* ═══════════════════════════════
   기능 ON/OFF 토글 탭
   ═══════════════════════════════ */
.feat-toggle-intro { margin-bottom: 20px; }
.feat-toggle-intro h3 { margin: 0 0 6px; color: var(--c-text); font-size: 1.1rem; font-weight: 700; }
.feat-toggle-intro p { margin: 0; color: var(--c-text-3); font-size: 0.86rem; line-height: 1.5; }
.feat-toggle-intro code { background: rgba(99,102,241,.1); color: #6366f1; padding: 1px 6px; border-radius: 4px; font-size: 0.82rem; }

.feat-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.feat-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.feat-card:hover {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 4px 14px rgba(99,102,241,0.08);
    transform: translateY(-1px);
}
.feat-card--on { border-color: rgba(34,197,94,0.45); background: linear-gradient(180deg, rgba(34,197,94,0.04) 0%, var(--c-white) 100%); }
.feat-card--off { opacity: 0.82; }
.feat-card__icon { font-size: 1.7rem; flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(99,102,241,0.08); border-radius: 10px; }
.feat-card--on .feat-card__icon { background: rgba(34,197,94,0.12); }
.feat-card__body { flex: 1; min-width: 0; }
.feat-card__name { margin: 0 0 2px; font-size: 0.95rem; font-weight: 700; color: var(--c-text); }
.feat-card__desc { margin: 0; font-size: 0.78rem; color: var(--c-text-3); line-height: 1.4; }
.feat-card__status { font-size: 0.72rem; font-weight: 700; margin-top: 4px; display: inline-block; padding: 2px 8px; border-radius: 999px; }
.feat-card--on .feat-card__status { background: rgba(34,197,94,0.14); color: #16a34a; }
.feat-card--off .feat-card__status { background: rgba(100,116,139,0.14); color: #64748b; }

/* 토글 스위치 */
.feat-switch {
    position: relative;
    width: 46px; height: 26px;
    flex-shrink: 0;
    cursor: pointer;
    display: inline-block;
}
.feat-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.feat-switch__slider {
    position: absolute; inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.25s ease;
}
.feat-switch__slider::before {
    content: '';
    position: absolute;
    left: 3px; top: 3px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 2px 6px rgba(15,23,42,0.18);
}
.feat-switch input:checked + .feat-switch__slider { background: linear-gradient(135deg, #22c55e, #16a34a); }
.feat-switch input:checked + .feat-switch__slider::before { transform: translateX(20px); }
.feat-switch input:disabled + .feat-switch__slider { opacity: 0.5; cursor: wait; }


/*  서버관리 대시보드  */
.staff-dashboard { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }
.staff-dashboard__header { text-align: center; margin-bottom: 48px; }
.staff-dashboard__title {
    font-size: 2.4rem; font-weight: 800; margin: 0 0 8px;
    background: linear-gradient(135deg, #a78bfa, #7c5cff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.staff-dashboard__subtitle { color: #9ca3af; font-size: 1rem; margin: 0; }
.staff-dashboard__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.staff-card {
    display: block; padding: 24px; border-radius: 16px;
    background: rgba(124, 92, 255, 0.06);
    border: 1px solid rgba(124, 92, 255, 0.18);
    text-decoration: none; color: inherit;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.staff-card:hover {
    transform: translateY(-3px);
    background: rgba(124, 92, 255, 0.12);
    border-color: rgba(167, 139, 250, 0.5);
}
.staff-card__icon { font-size: 2rem; margin-bottom: 12px; }
.staff-card__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.staff-card__desc { font-size: 0.85rem; color: #9ca3af; }

.staff-dashboard__deny {
    max-width: 480px; margin: 120px auto; text-align: center; padding: 48px 24px;
    border-radius: 16px; background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.staff-dashboard__deny-icon { font-size: 3rem; margin-bottom: 16px; }
.staff-dashboard__deny h2 { margin: 0 0 8px; color: #fca5a5; }
.staff-dashboard__deny p { margin: 0; color: #9ca3af; font-size: 0.9rem; }


/*  서버관리 대시보드 (SD)  */
.sd { display: grid; grid-template-columns: 220px 1fr; gap: 24px; max-width: 1400px; margin: 0 auto; padding: 24px; min-height: calc(100vh - 120px); }
.sd__nav {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 8px; border-radius: 16px;
    background: rgba(124, 92, 255, 0.04);
    border: 1px solid rgba(124, 92, 255, 0.12);
    height: fit-content; position: sticky; top: 16px;
}
.sd__nav-title {
    padding: 8px 12px 14px; font-size: 0.95rem; font-weight: 800;
    color: #a78bfa; letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(124, 92, 255, 0.15); margin-bottom: 6px;
}
.sd__tab {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: transparent; border: none; color: #cbd5e1;
    font-size: 0.88rem; font-weight: 500; text-align: left;
    cursor: pointer; transition: background .15s, color .15s;
}
.sd__tab:hover { background: rgba(124, 92, 255, 0.08); color: #fff; }
.sd__tab.active {
    background: linear-gradient(135deg, rgba(167,139,250,.2), rgba(124,92,255,.15));
    color: #fff; font-weight: 600;
}
.sd__tab span { font-size: 1rem; }

.sd__main { min-width: 0; }
.sd__section { display: none; }
.sd__section.active { display: block; animation: sdFade .2s ease; }
@keyframes sdFade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }

.sd__section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sd__section-head h2 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.sd__refresh {
    background: rgba(124, 92, 255, 0.15); border: 1px solid rgba(124, 92, 255, 0.3);
    color: #c4b5fd; padding: 6px 14px; border-radius: 8px;
    font-size: 0.82rem; cursor: pointer;
}
.sd__refresh:hover { background: rgba(124, 92, 255, 0.25); }

.sd__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.sd__card {
    padding: 18px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(124,92,255,0.08), rgba(124,92,255,0.02));
    border: 1px solid rgba(124, 92, 255, 0.15);
}
.sd__card-label { font-size: 0.78rem; color: #9ca3af; margin-bottom: 6px; }
.sd__card-value { font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; }
.sd__card-sub { font-size: 0.72rem; color: #a78bfa; margin-top: 6px; }

.sd__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .sd__row { grid-template-columns: 1fr; } .sd { grid-template-columns: 1fr; } .sd__nav { position: static; flex-direction: row; flex-wrap: wrap; } }

.sd__panel {
    padding: 18px; border-radius: 14px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.sd__panel h3 { margin: 0 0 14px; font-size: 0.95rem; font-weight: 700; color: #e5e7eb; }

.sd__chart { width: 100%; height: auto; display: block; }
.sd__chart--line { min-height: 240px; }

/* Chart.js 라인 차트 */
.sd__chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.sd__chart-toolbar { display: flex; align-items: center; gap: 6px; }
.sd__chart-hint { font-size: 0.72rem; color: #9ca3af; margin-right: 4px; }
.sd__chart-btn {
    padding: 6px 10px; border-radius: 8px; border: 1px solid #e5e7eb;
    background: #fff; color: #374151 !important; font-size: 0.78rem; font-weight: 700;
    cursor: pointer; transition: all .12s;
}
.sd__chart-btn:hover { background: #f3f4f6; border-color: #7c5cff; color: #7c5cff !important; }
.sd__chart-canvas-wrap {
    position: relative; width: 100%; height: 320px;
    padding: 8px 4px; border-radius: 12px;
    background: linear-gradient(180deg, rgba(124,92,255,0.02), transparent);
}

/* 요약 분석 카드 (4개 그리드) */
.sd__chart-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px;
}
@media (max-width: 900px) { .sd__chart-stats { grid-template-columns: repeat(2, 1fr); } }
.sd__cstat {
    padding: 12px 14px; border-radius: 12px;
    background: #fff; border: 1px solid #e5e7eb;
    border-left-width: 4px;
    transition: transform .12s, box-shadow .12s;
}
.sd__cstat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0,0,0,0.12); }
.sd__cstat--joins  { border-left-color: #22c55e; }
.sd__cstat--leaves { border-left-color: #f87171; }
.sd__cstat--chat   { border-left-color: #a78bfa; }
.sd__cstat--voice  { border-left-color: #0ea5e9; }

/* 초대 경로 배지 */
.sd__inv-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700;
    border: 1px solid;
}
.sd__inv--np  { background: rgba(124,92,255,0.1);  color: #7c5cff !important; border-color: rgba(124,92,255,0.3); }
.sd__inv--db  { background: rgba(34,197,94,0.1);   color: #16a34a !important; border-color: rgba(34,197,94,0.3); }
.sd__inv--dc  { background: rgba(245,158,11,0.1);  color: #d97706 !important; border-color: rgba(245,158,11,0.3); }
.sd__inv--etc { background: rgba(107,114,128,0.1); color: #6b7280 !important; border-color: rgba(107,114,128,0.3); }
.sd__cstat--ratio  { border-left-color: #6366f1; }
.sd__cstat-title { font-size: 0.74rem; font-weight: 700; color: #6b7280 !important; margin-bottom: 4px; }
.sd__cstat-main  { font-size: 1.6rem; font-weight: 800; color: #111827 !important; line-height: 1.1; }
.sd__cstat-sub   { font-size: 0.72rem; color: #6b7280 !important; margin-top: 4px; }
.sd__chart .bar { fill: url(#sdBarGrad); }
.sd__chart .bar:hover { fill: #a78bfa; }
.sd__chart .axis { stroke: rgba(255,255,255,0.1); stroke-width: 1; }
.sd__chart .label { fill: #6b7280; font-size: 10px; font-family: Inter, sans-serif; }
.sd__chart .value-label { fill: #cbd5e1; font-size: 10px; font-family: Inter, sans-serif; text-anchor: middle; }

/* 수평 막대 (카테고리별 분포) */
.sd__catbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sd__catbar-name { width: 100px; font-size: 0.82rem; color: #cbd5e1; flex-shrink: 0; }
.sd__catbar-track { flex: 1; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.05); overflow: hidden; }
.sd__catbar-fill { height: 100%; background: linear-gradient(90deg, #a78bfa, #7c5cff); border-radius: 5px; transition: width .4s ease; }
.sd__catbar-val { width: 36px; text-align: right; font-size: 0.82rem; color: #9ca3af; font-variant-numeric: tabular-nums; }

/* 인라인 탭 + TOP 리스트 */
.sd__tabs-inline { display: flex; gap: 6px; margin-bottom: 10px; }
.sd__inline-tab {
    padding: 5px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    color: #9ca3af; font-size: 0.78rem; cursor: pointer;
}
.sd__inline-tab.active { background: rgba(167,139,250,0.15); color: #c4b5fd; border-color: rgba(167,139,250,0.3); }

.sd__top-list { list-style: none; margin: 0; padding: 0; }
.sd__top-list li {
    display: flex; align-items: center; gap: 10px; padding: 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.85rem;
}
.sd__top-rank { width: 22px; text-align: center; font-weight: 800; color: #a78bfa; }
.sd__top-name { flex: 1; color: #e5e7eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd__top-lv { font-size: 0.72rem; color: #6b7280; padding: 2px 6px; border-radius: 4px; background: rgba(124,92,255,0.1); }
.sd__top-val { color: #cbd5e1; font-variant-numeric: tabular-nums; }

/* 서브 탭 */
.sd__sub-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sd__sub-tab {
    padding: 7px 14px; border-radius: 9px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    color: #9ca3af; font-size: 0.82rem; cursor: pointer;
}
.sd__sub-tab.active { background: rgba(124,92,255,0.18); color: #fff; border-color: rgba(124,92,255,0.4); }

/* 검색 */
.sd__search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.sd__search {
    flex: 1; padding: 10px 14px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    color: #e5e7eb; font-size: 0.9rem;
}
.sd__search:focus { outline: none; border-color: rgba(167,139,250,0.5); }
.sd__search-btn {
    padding: 10px 18px; border-radius: 10px;
    background: linear-gradient(135deg, #a78bfa, #7c5cff); border: none;
    color: white; font-weight: 600; cursor: pointer;
}

/* 유저 검색 결과 + 상세 */
.sd__user-split { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
@media (max-width: 900px) { .sd__user-split { grid-template-columns: 1fr; } }
.sd__user-results {
    max-height: 640px; overflow-y: auto;
    padding: 6px; border-radius: 12px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.sd__user-item {
    display: flex; align-items: center; gap: 10px; padding: 10px;
    border-radius: 8px; cursor: pointer; transition: background .15s;
}
.sd__user-item:hover { background: rgba(124,92,255,0.08); }
.sd__user-item.active { background: rgba(124,92,255,0.18); }
.sd__user-item__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #e5e7eb; }
.sd__user-item__nick { flex: 1; font-size: 0.88rem; color: #e5e7eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd__user-item__id { font-size: 0.7rem; color: #6b7280; font-family: monospace; }
.sd__user-item__lv { font-size: 0.68rem; padding: 2px 6px; border-radius: 4px; background: rgba(124,92,255,0.12); color: #a78bfa; }

.sd__user-detail {
    padding: 20px; border-radius: 14px; min-height: 300px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.sd__ud-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sd__ud-avatar { width: 64px; height: 64px; border-radius: 50%; background: #2a2140; object-fit: cover; }
.sd__ud-name { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0; }
.sd__ud-id { font-size: 0.78rem; color: #6b7280; font-family: monospace; margin-top: 4px; }
.sd__ud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sd__ud-stat { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); min-width: 0; }
.sd__ud-stat-label { font-size: 0.7rem; color: #9ca3af; margin-bottom: 3px; }
.sd__ud-stat-value { font-size: 0.92rem; font-weight: 700; color: #e5e7eb; word-break: keep-all; overflow-wrap: break-word; line-height: 1.4; }
.sd__ud-section { margin-top: 18px; }
.sd__ud-section h4 { font-size: 0.85rem; margin: 0 0 8px; color: #a78bfa; font-weight: 700; }
.sd__ud-chip { display: inline-block; padding: 4px 10px; margin: 2px; border-radius: 12px; background: rgba(124,92,255,0.1); color: #c4b5fd; font-size: 0.78rem; }

/* 프로필 섹션 */
.sd__ud-profile { display: flex; flex-direction: column; gap: 8px; }
.sd__ud-profile-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-radius: 10px; background: #f9fafb; border: 1px solid #e5e7eb; }
.sd__ud-profile-label { flex-shrink: 0; width: 80px; font-size: 0.78rem; font-weight: 700; color: #6b7280 !important; padding-top: 2px; }
.sd__ud-profile-value { flex: 1; font-size: 0.88rem; color: #111827 !important; line-height: 1.5; overflow-wrap: anywhere; }

/* 제재 조치 카드 */
.sd__grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.sd__action-card {
    padding: 20px; border-radius: 14px; text-align: center;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.sd__action-icon { font-size: 2rem; margin-bottom: 10px; }
.sd__action-title { font-weight: 700; font-size: 1rem; color: #e5e7eb; margin-bottom: 6px; }
.sd__action-desc { font-size: 0.78rem; color: #9ca3af; line-height: 1.5; }

/* 제재 기록 리스트 */
.sd__modlog-list { display: flex; flex-direction: column; gap: 10px; }
.sd__modlog-item {
    padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid #a78bfa;
}
.sd__modlog-item--ban { border-left-color: #ef4444; }
.sd__modlog-item--restricted { border-left-color: #f59e0b; }
.sd__ml-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sd__ml-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(124,92,255,0.2); background: #e5e7eb;
}
.sd__ml-user { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sd__ml-nick { font-weight: 700; color: #e5e7eb; font-size: 0.9rem; }
.sd__ml-uid { font-size: 0.7rem; color: #9ca3af; font-family: monospace; }
.sd__ml-cat { padding: 2px 8px; border-radius: 5px; background: rgba(239,68,68,0.15); color: #fca5a5; font-size: 0.72rem; }
.sd__ml-date { margin-left: auto; font-size: 0.72rem; color: #6b7280; }
.sd__ml-punish { font-size: 0.78rem; color: #f59e0b; margin-top: 4px; font-weight: 600; }
.sd__ml-mod { font-size: 0.74rem; color: #6b7280; margin-top: 4px; }
.sd__ml-mod b { color: #7c5cff; }
.sd__ml-reason { font-size: 0.82rem; color: #cbd5e1; margin: 4px 0; }

/* 플레이스홀더 */
.sd__placeholder {
    text-align: center; padding: 60px 20px; border-radius: 12px;
    background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.08);
}
.sd__placeholder--small { padding: 30px 20px; }
.sd__placeholder-icon { font-size: 2.5rem; margin-bottom: 10px; opacity: 0.6; }
.sd__placeholder p { color: #9ca3af; margin: 6px 0; }
.sd__hint { font-size: 0.78rem; color: #7c5cff; }

/* Phase 2 — 액션 버튼/폼 */
button.sd__action-card { cursor: pointer; transition: all .15s; }
button.sd__action-card:hover { background: rgba(124,92,255,0.08); border-color: rgba(124,92,255,0.3); transform: translateY(-1px); }
button.sd__action-card:active { transform: translateY(0); }
.sd__action-form { display: flex; flex-direction: column; gap: 8px; }
.sd__form-label { font-size: 0.8rem; color: #9ca3af; margin-top: 6px; font-weight: 600; }
.sd__textarea {
    width: 100%; min-height: 160px; padding: 12px 14px; border-radius: 10px;
    background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
    color: #e5e7eb; font-family: 'SUIT', monospace; font-size: 0.86rem;
    resize: vertical; line-height: 1.55;
}
.sd__textarea:focus { outline: none; border-color: rgba(124,92,255,0.5); }
.sd__result {
    margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 0.85rem;
    background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06);
    color: #cbd5e1; min-height: 20px; white-space: pre-wrap; word-break: break-all;
}
.sd__result--ok { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.08); }
.sd__result--err { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); color: #fecaca; }

/* ═══════════════════════════════════
   로그 리스트 — 타임라인 카드 스타일
   ═══════════════════════════════════ */
.sd__log-list {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 72vh; overflow-y: auto;
    padding-right: 4px;
}
.sd__log-list::-webkit-scrollbar { width: 8px; }
.sd__log-list::-webkit-scrollbar-thumb { background: rgba(124,92,255,0.25); border-radius: 4px; }
.sd__log-list::-webkit-scrollbar-thumb:hover { background: rgba(124,92,255,0.45); }

.sd__log-item {
    display: grid; grid-template-columns: 44px 1fr; gap: 10px;
    padding: 10px 14px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #9ca3af;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
    font-size: 0.86rem; line-height: 1.55;
    position: relative;
}
.sd__log-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(124,92,255,0.28);
    border-color: #c4b5fd;
}

.sd__log-rail {
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 2px;
}
.sd__log-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    background: #f3f4f6;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

.sd__log-content { min-width: 0; }
.sd__log-head {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 4px;
}
.sd__log-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    object-fit: cover; background: #e5e7eb; flex-shrink: 0;
}
.sd__log-user {
    font-weight: 700; color: #111827;
    font-size: 0.88rem;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd__log-time {
    margin-left: auto;
    font-size: 0.72rem; color: #9ca3af;
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* 이벤트 타입별 뱃지 & 테두리 액센트 */
.sd__log-badge {
    font-size: 0.68rem; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    letter-spacing: 0.2px;
    background: #f3f4f6; color: #4b5563;
    border: 1px solid #e5e7eb;
}
.sd__log-badge--chat         { background: #ede9fe; color: #6d28d9 !important; border-color: #ddd6fe; }
.sd__log-badge--chat_delete  { background: #fee2e2; color: #b91c1c !important; border-color: #fecaca; }
.sd__log-badge--chat_edit    { background: #fef3c7; color: #b45309 !important; border-color: #fde68a; }
.sd__log-badge--join,
.sd__log-badge--join_invite  { background: #dcfce7; color: #15803d !important; border-color: #bbf7d0; }
.sd__log-badge--leave        { background: #f3f4f6; color: #6b7280 !important; border-color: #e5e7eb; }
.sd__log-badge--voice_join,
.sd__log-badge--voice_leave,
.sd__log-badge--voice_move   { background: #cffafe; color: #0e7490 !important; border-color: #a5f3fc; }
.sd__log-badge--role_add,
.sd__log-badge--role_remove  { background: #ede9fe; color: #6d28d9 !important; border-color: #ddd6fe; }
.sd__log-badge--cmd          { background: #fce7f3; color: #be185d !important; border-color: #fbcfe8; }
.sd__log-badge--action       { background: #fef2f2; color: #991b1b !important; border-color: #fca5a5; }

.sd__log-item--chat         { border-left-color: #8b5cf6; }
.sd__log-item--chat_delete  { border-left-color: #ef4444; }
.sd__log-item--chat_edit    { border-left-color: #f59e0b; }
.sd__log-item--join,
.sd__log-item--join_invite  { border-left-color: #22c55e; }
.sd__log-item--leave        { border-left-color: #9ca3af; }
.sd__log-item--voice_join,
.sd__log-item--voice_leave,
.sd__log-item--voice_move   { border-left-color: #06b6d4; }
.sd__log-item--role_add,
.sd__log-item--role_remove  { border-left-color: #a78bfa; }
.sd__log-item--cmd          { border-left-color: #ec4899; }
.sd__log-item--action       { border-left-color: #dc2626; background: #fef2f2; }

.sd__log-body {
    color: #374151;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    overflow-wrap: anywhere;
}
.sd__log-text { color: #1f2937 !important; }
.sd__log-text--good { color: #15803d !important; font-weight: 600; }
.sd__log-text--muted { color: #6b7280 !important; }
.sd__log-text--strike { color: #991b1b !important; text-decoration: line-through; text-decoration-color: #fca5a5; }
.sd__log-arrow { color: #9ca3af !important; font-weight: 700; }

.sd__log-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.76rem; font-weight: 600;
    padding: 2px 8px; border-radius: 6px;
    background: #f3f4f6; color: #4b5563;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}
.sd__log-chip--channel { background: #eff6ff; color: #1d4ed8 !important; border-color: #bfdbfe; }
.sd__log-chip--role    { background: #ede9fe; color: #5b21b6 !important; border-color: #ddd6fe; font-family: monospace; }
.sd__log-chip--invite  { background: #f0fdf4; color: #15803d !important; border-color: #bbf7d0; font-family: monospace; }
.sd__log-chip--action  { background: #fef2f2; color: #991b1b !important; border-color: #fecaca; }
.sd__log-chip--muted   { background: #f9fafb; color: #6b7280 !important; }
.sd__log-cmd { color: #a7f3d0 !important; }
.sd__log-opt b { color: #6d28d9 !important; }

.sd__log-edit {
    display: flex; flex-direction: column; gap: 3px;
    padding: 6px 10px; border-radius: 8px;
    background: #fffbeb; border: 1px solid #fde68a;
    width: 100%;
}
.sd__log-edit-line { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; }
.sd__log-edit-tag {
    flex-shrink: 0; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
    background: #f3f4f6; color: #6b7280; border-radius: 5px;
}
.sd__log-edit-tag--new { background: #dcfce7; color: #15803d; }
.sd__log-edit-line s { color: #9ca3af; text-decoration: line-through; text-decoration-color: #fca5a5; }

.sd__log-cmd {
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
    background: #1f2937; color: #a7f3d0;
    padding: 2px 8px; border-radius: 5px; font-size: 0.82rem;
    font-weight: 600;
}
.sd__log-opt {
    font-size: 0.76rem; color: #4b5563;
    background: #f3f4f6; padding: 2px 6px; border-radius: 4px;
    font-family: monospace;
}
.sd__log-opt b { color: #6d28d9; font-weight: 700; margin-right: 2px; }

/* 서브탭 (로그 타입 필터) 강화 */
.sd__sub-nav { padding: 4px; background: #f9fafb; border-radius: 12px; gap: 4px; }
.sd__sub-tab { border: none; padding: 8px 14px; font-weight: 600; }
.sd__sub-tab.active { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* 필터 */
.sd__filter-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .sd__filter-split { grid-template-columns: 1fr; } }

/* 티켓 */
.sd__ticket-list { display: flex; flex-direction: column; gap: 10px; }
.sd__ticket-item {
    padding: 14px 16px; border-radius: 12px; display: flex; gap: 14px; align-items: center;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid #7c5cff; transition: all .15s;
}
.sd__ticket-item--신고 { border-left-color: #ef4444; }
.sd__ticket-item:hover { background: rgba(124,92,255,0.05); }
.sd__ticket-name { font-weight: 700; color: #e5e7eb; }
.sd__ticket-meta { font-size: 0.75rem; color: #9ca3af; margin-top: 3px; }
.sd__ticket-kind { padding: 3px 10px; border-radius: 6px; background: rgba(124,92,255,0.15); color: #c4b5fd; font-size: 0.72rem; font-weight: 600; }
.sd__ticket-kind--신고 { background: rgba(239,68,68,0.15); color: #fca5a5; }
.sd__ticket-link { margin-left: auto; padding: 6px 12px; border-radius: 8px; background: rgba(124,92,255,0.15); color: #c4b5fd; text-decoration: none; font-size: 0.78rem; font-weight: 600; }
.sd__ticket-link:hover { background: rgba(124,92,255,0.3); }

/* 초대 */
.sd__invite-links { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.sd__invite-link-item {
    padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06); font-size: 0.82rem;
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.sd__invite-code { font-family: monospace; font-weight: 700; color: #a78bfa; }
.sd__invite-uses { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: rgba(124,92,255,0.15); color: #c4b5fd; font-weight: 600; }
.sd__invite-joins { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.sd__invite-joins::-webkit-scrollbar { width: 8px; }
.sd__invite-joins::-webkit-scrollbar-thumb { background: rgba(124,92,255,0.25); border-radius: 4px; }

.sd__invite-join-item {
    display: flex; gap: 12px; align-items: center;
    padding: 10px 14px; border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #22c55e;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.sd__invite-join-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(34,197,94,0.25);
    border-color: #86efac;
}
.sd__ij-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; background: #e5e7eb; flex-shrink: 0;
}
.sd__ij-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sd__ij-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd__ij-row--sub { font-size: 0.78rem; }
.sd__ij-name {
    font-weight: 700; color: #111827 !important;
    font-size: 0.92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px;
}
.sd__ij-time {
    margin-left: auto;
    font-size: 0.72rem; color: #9ca3af !important;
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.sd__ij-arrow { color: #6b7280 !important; font-weight: 600; font-size: 0.74rem; }
.sd__ij-inviter {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 999px;
    background: #ede9fe; color: #5b21b6 !important;
    border: 1px solid #ddd6fe;
    font-weight: 700; font-size: 0.78rem;
}
.sd__ij-inviter--unknown { background: #f3f4f6; color: #9ca3af !important; border-color: #e5e7eb; }
.sd__ij-inviter--vanity {
    background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important;
}
.sd__ij-inviter--service {
    background: #fce7f3 !important; color: #be185d !important; border-color: #fbcfe8 !important;
}

/* ═══════════════════════════════════════
   통계 대시보드 v2
   ═══════════════════════════════════════ */
.sd__range-label { font-size: 0.88rem; color: #9ca3af !important; font-weight: 500; margin-left: 6px; }

.sd__range-bar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 16px;
    background: #ffffff; border-radius: 12px; border: 1px solid #e5e7eb;
}
.sd__range-pills { display: flex; gap: 6px; }
.sd__range-pill {
    padding: 8px 16px; border-radius: 10px; border: 1px solid #e5e7eb;
    background: #f9fafb; color: #374151 !important;
    font-size: 0.86rem; font-weight: 600; cursor: pointer;
    transition: all .12s ease;
}
.sd__range-pill:hover { background: #f3f4f6; border-color: #a78bfa; }
.sd__range-pill.active {
    background: linear-gradient(135deg, #7c5cff, #a78bfa);
    color: #fff !important; border-color: transparent;
    box-shadow: 0 4px 12px -4px rgba(124,92,255,0.5);
}
.sd__range-date { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sd__range-date label { font-size: 0.8rem; color: #6b7280 !important; font-weight: 600; }
.sd__range-date input[type="date"] {
    padding: 6px 10px; border-radius: 8px; border: 1px solid #e5e7eb;
    background: #f9fafb; color: #111827 !important; font-size: 0.84rem;
    font-family: inherit;
}

/* KPI 카드 아이콘 */
.sd__card { position: relative; }
.sd__card-icon {
    position: absolute; top: 12px; right: 14px;
    font-size: 1.4rem; opacity: 0.6;
}

/* 패널 레이아웃 */
.sd__panel--wide { flex: 2; }
.sd__panel--full { flex: 1; width: 100%; }

/* 차트 범례 */
.sd__legend { display: flex; gap: 14px; margin-top: 8px; justify-content: center; flex-wrap: wrap; }
.sd__legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #6b7280 !important; }
.sd__legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* 파이(도넛) */
.sd__pie-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sd__pie { width: 180px; height: 180px; flex-shrink: 0; }
.sd__pie-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 160px; }

/* Chart.js 도넛 차트 */
.sd__donut-wrap { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.sd__donut-canvas-wrap {
    position: relative; width: 100%; height: 220px;
    display: flex; align-items: center; justify-content: center;
}
.sd__donut-canvas-wrap canvas { max-height: 220px; }
.sd__donut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none;
}
.sd__donut-total {
    font-size: 2rem; font-weight: 800;
    color: #111827 !important; line-height: 1;
    background: linear-gradient(135deg, #7c5cff, #a855f7);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sd__donut-label { font-size: 0.78rem; color: #6b7280 !important; margin-top: 4px; font-weight: 700; }
.sd__donut-legend-item {
    display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center;
    gap: 10px; padding: 8px 12px; border-radius: 10px;
    background: #f9fafb; border: 1px solid #e5e7eb;
    font-size: 0.84rem; transition: all .12s;
}
.sd__donut-legend-item:hover { background: #fff; border-color: #7c5cff; transform: translateX(2px); }
.sd__donut-legend-dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.sd__donut-legend-name { font-weight: 700; color: #111827 !important; }
.sd__donut-legend-count { font-size: 0.76rem; color: #6b7280 !important; font-weight: 600; font-variant-numeric: tabular-nums; }
.sd__donut-legend-pct {
    font-size: 0.76rem; font-weight: 800;
    color: #7c5cff !important; background: rgba(124,92,255,0.1);
    padding: 2px 8px; border-radius: 10px; min-width: 48px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.sd__donut-empty {
    padding: 16px; text-align: center;
    color: #9ca3af !important; font-size: 0.84rem; font-weight: 600;
    background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 10px;
}

.sd__pie-legend-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: 6px;
    background: #f9fafb; border: 1px solid #e5e7eb;
    font-size: 0.82rem;
}
.sd__pie-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sd__pie-legend-name { font-weight: 700; color: #111827 !important; flex: 1; }
.sd__pie-legend-val { font-size: 0.76rem; color: #6b7280 !important; font-weight: 600; }

/* 히트맵 */
.sd__heatmap {
    display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px;
    padding: 8px 0;
}
.sd__heatmap-cell {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 4px;
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform .1s;
    cursor: default;
}
.sd__heatmap-cell:hover { transform: scale(1.08); z-index: 1; }
.sd__heatmap-val { font-size: 0.72rem; font-weight: 700; color: #111827 !important; text-align: right; line-height: 1; }
.sd__heatmap-hour { font-size: 0.62rem; color: #6b7280 !important; text-align: center; line-height: 1; }

/* TOP 리스트 개선 */
.sd__top-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    transition: background .12s;
}
.sd__top-list li:hover { background: #f9fafb; }
.sd__top-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; background: #e5e7eb; flex-shrink: 0;
}
.sd__top-rank { font-size: 1rem; font-weight: 700; min-width: 24px; }
.sd__top-name { flex: 1; font-weight: 600; color: #111827 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd__top-val { font-size: 0.86rem; font-weight: 700; color: #7c5cff !important; }
.sd__top-empty { color: #9ca3af !important; text-align: center; padding: 20px; }

/* ═══════════════════════════════════════
   활성 제재 리스트
   ═══════════════════════════════════════ */
.sd__active-count {
    display: inline-block; margin-left: 4px;
    padding: 1px 7px; border-radius: 10px;
    background: rgba(124,92,255,0.15); color: #7c5cff !important;
    font-size: 0.72rem; font-weight: 700; min-width: 20px; text-align: center;
}
.sd__active-list {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 520px; overflow-y: auto; padding-right: 4px;
}
.sd__active-list::-webkit-scrollbar { width: 8px; }
.sd__active-list::-webkit-scrollbar-thumb { background: rgba(124,92,255,0.25); border-radius: 4px; }

.sd__active-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 12px;
    background: #ffffff; border: 1px solid #e5e7eb;
    border-left: 4px solid #dc2626;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.sd__active-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(220,38,38,0.18);
    border-color: #fca5a5;
}
.sd__active-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; background: #e5e7eb; flex-shrink: 0;
}
.sd__active-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sd__active-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd__active-row--sub { font-size: 0.76rem; }
.sd__active-name {
    font-weight: 700; color: #111827 !important;
    font-size: 0.94rem; max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd__active-time {
    margin-left: auto; font-size: 0.72rem;
    color: #9ca3af !important;
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
}
.sd__active-badge {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 999px;
    font-weight: 700; font-size: 0.76rem;
    border: 1px solid transparent;
}
.sd__active-badge--ban      { background: #fef2f2; color: #991b1b !important; border-color: #fecaca; }
.sd__active-badge--timeout  { background: #fef3c7; color: #92400e !important; border-color: #fde68a; }
.sd__active-badge--warn     { background: #fff7ed; color: #9a3412 !important; border-color: #fed7aa; }

.sd__active-reason {
    color: #374151 !important; max-width: 420px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd__active-mod { color: #6b7280 !important; font-weight: 600; }
.sd__active-id {
    margin-left: auto;
    color: #9ca3af !important; font-family: monospace; font-size: 0.72rem;
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sd__active-actions { flex-shrink: 0; }
.sd__active-unban, .sd__active-untimeout {
    padding: 8px 14px; border-radius: 10px; border: none;
    font-weight: 700; font-size: 0.82rem; cursor: pointer;
    transition: all .12s;
}
.sd__active-unban {
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff !important;
}
.sd__active-untimeout {
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff !important;
}
.sd__active-unwarn {
    padding: 8px 14px; border-radius: 10px; border: none;
    font-weight: 700; font-size: 0.82rem; cursor: pointer;
    transition: all .12s;
    background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff !important;
}
.sd__active-unban:hover, .sd__active-untimeout:hover, .sd__active-unwarn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(0,0,0,0.2);
}
.sd__active-unban:disabled, .sd__active-untimeout:disabled, .sd__active-unwarn:disabled {
    opacity: 0.6; cursor: wait; transform: none;
}

/* 담당자 강조 */
.sd__active-mod {
    padding: 1px 8px; border-radius: 6px;
    background: rgba(124,92,255,0.1);
    color: #6d28d9 !important; font-weight: 700;
}

/* 경고 아이템은 왼쪽 테두리 주황 */
.sd__active-item:has(.sd__active-badge--warn)    { border-left-color: #f59e0b; }
.sd__active-item:has(.sd__active-badge--timeout) { border-left-color: #f59e0b; }
.sd__invite-join-item--vanity { border-left-color: #3b82f6; }
.sd__invite-join-item--vanity:hover { box-shadow: 0 6px 18px -8px rgba(59,130,246,0.25); border-color: #93c5fd; }
.sd__ij-code {
    padding: 2px 8px; border-radius: 6px;
    background: #f0fdf4; color: #15803d !important;
    border: 1px solid #bbf7d0;
    font-family: monospace; font-size: 0.74rem; font-weight: 600;
}

/* ═══════════════════════════════════════
   라이트 테마 오버라이드 — 서버관리 대시보드
   (배경이 흰색이라 모든 텍스트를 검정으로)
   ═══════════════════════════════════════ */
.sd, .sd *, 
.staff-dashboard, .staff-dashboard * {
    color: #111827 !important;
}
.sd__nav {
    background: #f5f3ff;
    border-color: #c4b5fd;
}
.sd__nav-title { color: #6d28d9 !important; border-bottom-color: #c4b5fd; }
.sd__tab { color: #374151 !important; }
.sd__tab:hover { background: #ede9fe; color: #4c1d95 !important; }
.sd__tab.active { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); color: #4c1d95 !important; }

.sd__section-head { border-bottom-color: #e5e7eb; }
.sd__section-head h2 { color: #111827 !important; }
.sd__refresh { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6 !important; }
.sd__refresh:hover { background: #ddd6fe; }

.sd__card {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-color: #c4b5fd;
}
.sd__card-label { color: #6b7280 !important; }
.sd__card-value { color: #111827 !important; }
.sd__card-sub { color: #7c3aed !important; }

.sd__panel {
    background: #fafafa;
    border-color: #e5e7eb;
}
.sd__panel h3 { color: #374151 !important; }

.sd__chart .axis { stroke: #e5e7eb; }
.sd__chart .label { fill: #6b7280; }
.sd__chart .value-label { fill: #4b5563; }

.sd__catbar-name { color: #374151 !important; }
.sd__catbar-track { background: #e5e7eb; }
.sd__catbar-val { color: #6b7280 !important; }

.sd__inline-tab {
    background: #f3f4f6; border-color: #e5e7eb; color: #6b7280 !important;
}
.sd__inline-tab.active { background: #ddd6fe; color: #5b21b6 !important; border-color: #c4b5fd; }

.sd__top-list li { border-bottom-color: #f3f4f6; }
.sd__top-rank { color: #7c3aed !important; }
.sd__top-name { color: #111827 !important; }
.sd__top-lv { background: #ede9fe; color: #5b21b6 !important; }
.sd__top-val { color: #4b5563 !important; }

.sd__sub-tab {
    background: #f3f4f6; border-color: #e5e7eb; color: #6b7280 !important;
}
.sd__sub-tab.active { background: #c4b5fd; color: #4c1d95 !important; border-color: #a78bfa; }

.sd__search {
    background: #ffffff;
    border-color: #d1d5db;
    color: #111827 !important;
}
.sd__search::placeholder { color: #9ca3af !important; }
.sd__search:focus { border-color: #a78bfa; }
.sd__search-btn { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #ffffff !important; }

.sd__user-results, .sd__user-detail {
    background: #fafafa; border-color: #e5e7eb;
}
.sd__user-item:hover { background: #ede9fe; }
.sd__user-item.active { background: #ddd6fe; }
.sd__user-item__nick { color: #111827 !important; }
.sd__user-item__id { color: #9ca3af !important; }
.sd__user-item__lv { background: #ede9fe; color: #7c3aed !important; }

.sd__ud-avatar { background: #e5e7eb; }
.sd__ud-name { color: #111827 !important; }
.sd__ud-id { color: #9ca3af !important; }
.sd__ud-stat { background: #f3f4f6; }
.sd__ud-stat-label { color: #6b7280 !important; }
.sd__ud-stat-value { color: #111827 !important; }
.sd__ud-section h4 { color: #7c3aed !important; }
.sd__ud-chip { background: #ede9fe; color: #5b21b6 !important; }

.sd__action-card {
    background: #fafafa; border-color: #e5e7eb;
}
button.sd__action-card:hover { background: #ede9fe; border-color: #c4b5fd; }
.sd__action-title { color: #111827 !important; }
.sd__action-desc { color: #6b7280 !important; }

.sd__form-label { color: #374151 !important; }
.sd__textarea {
    background: #ffffff; border-color: #d1d5db; color: #111827 !important;
}
.sd__textarea::placeholder { color: #9ca3af !important; }
.sd__textarea:focus { border-color: #a78bfa; }

.sd__result {
    background: #f9fafb; border-color: #e5e7eb; color: #374151 !important;
}
.sd__result--ok { background: #ecfdf5; border-color: #86efac; color: #065f46 !important; }
.sd__result--err { background: #fef2f2; border-color: #fca5a5; color: #991b1b !important; }

/* (로그 아이템 스타일은 위 타임라인 카드 블록에서 이미 라이트 테마로 정의됨) */

.sd__modlog-item { background: #fafafa; border-color: #e5e7eb; }
.sd__ml-nick { color: #111827 !important; }
.sd__ml-cat { background: #fee2e2; color: #b91c1c !important; }
.sd__ml-date { color: #9ca3af !important; }
.sd__ml-reason { color: #374151 !important; }

.sd__ticket-item { background: #fafafa; border-color: #e5e7eb; }
.sd__ticket-item:hover { background: #f5f3ff; }
.sd__ticket-name { color: #111827 !important; }
.sd__ticket-meta { color: #6b7280 !important; }
.sd__ticket-kind { background: #ede9fe; color: #5b21b6 !important; }
.sd__ticket-kind--신고 { background: #fee2e2; color: #b91c1c !important; }
.sd__ticket-link { background: #ede9fe; color: #5b21b6 !important; }
.sd__ticket-link:hover { background: #c4b5fd; }

.sd__invite-link-item { background: #fafafa; border-color: #e5e7eb; }
.sd__invite-code { color: #7c3aed !important; }
.sd__invite-uses { background: #ede9fe; color: #5b21b6 !important; }
.sd__invite-join-item { background: #fafafa; color: #374151 !important; }
.sd__invite-join-item .sd__time { color: #9ca3af !important; }

.sd__placeholder {
    background: #f9fafb; border-color: #e5e7eb;
}
.sd__placeholder p { color: #6b7280 !important; }
.sd__hint { color: #7c3aed !important; }

/* 스태프 대시보드 인덱스 카드들 */
.staff-dashboard__subtitle { color: #6b7280 !important; }
.staff-card { background: #fafafa; border-color: #e5e7eb; }
.staff-card:hover { background: #f5f3ff; border-color: #c4b5fd; }
.staff-card__title { color: #111827 !important; }
.staff-card__desc { color: #6b7280 !important; }
.staff-dashboard__deny { background: #fef2f2; border-color: #fca5a5; }
.staff-dashboard__deny h2 { color: #b91c1c !important; }
.staff-dashboard__deny p { color: #6b7280 !important; }