/* ── Lucide 아이콘 공통 (notif.css가 포함된 모든 페이지에 적용) ── */
.li {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}
.li svg {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 버튼별 아이콘 크기 */
.dm-topbar-btn .li svg,
.bell-btn .li svg,
.darkmode-btn .li svg { width: 20px; height: 20px; }
.dm-send-btn .li svg  { width: 17px; height: 17px; }
.dm-back-btn .li svg  { width: 20px; height: 20px; }
.site-logo .li svg    { width: 18px; height: 18px; }
.admin-link-btn .li svg,
.settings-btn .li svg,
.logout-btn .li svg   { width: 14px; height: 14px; }
.nav-btn .li svg      { width: 28px; height: 28px; }
.stat-label .li svg   { width: 14px; height: 14px; }
.notif-panel-icon .li svg { width: 20px; height: 20px; }
.board-tab .li svg    { width: 1.1em; height: 1.1em; }
.intro-img-placeholder .li svg { width: 48px; height: 48px; stroke-width: 1.5; }
.profile-dm-btn .li svg { width: 16px; height: 16px; }

/* ── 페이지 진입 애니메이션 ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
    animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--fu-delay, 0s);
}

/* ── 공통 상단바 버튼 ── */
.settings-btn {
    text-decoration: none !important;
    color: #444;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 10px;
    border: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.settings-btn:hover {
    background: rgba(143, 203, 255, 0.25);
    color: #1a73e8;
}
body.dark .settings-btn { color: #bbb; }
body.dark .settings-btn:hover { background: rgba(255,255,255,0.08); color: #90caf9; }

/* ── 알림 패널 ── */
.notif-panel {
    position: fixed;
    top: 0; right: 0;
    width: 340px; height: 100vh;
    background: #fff;
    box-shadow: -4px 0 32px rgba(0,0,0,0.18);
    z-index: 500;
    display: flex; flex-direction: column;
    transform: translateX(105%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}
.notif-panel.open {
    transform: translateX(0);
    pointer-events: all;
}

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1.5px solid #f0f0f0;
    flex-shrink: 0;
}
.notif-panel-title {
    font-size: 16px;
    font-weight: bold;
    color: #222;
}
.notif-panel-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    color: #888;
    transition: background 0.2s;
}
.notif-panel-close:hover { background: rgba(0,0,0,0.07); }

.notif-panel-body {
    flex: 1;
    overflow-y: auto;
    padding-top: 4px;
}

.notif-panel-empty {
    text-align: center;
    padding: 48px 16px;
    color: #aaa;
    font-size: 14px;
}

.notif-panel-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: default;
    transition: background 0.12s;
}
.notif-panel-row:hover { background: rgba(91,94,247,0.04); }

.notif-panel-unread {
    background: rgba(91,94,247,0.07);
}
.notif-panel-unread:hover { background: rgba(91,94,247,0.11); }

.notif-panel-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}
.notif-panel-info { flex: 1; min-width: 0; }
.notif-panel-msg {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    word-break: break-all;
}
.notif-panel-time {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}

/* ── 다크모드 아이콘 색상 (topbar 버튼) ── */
body.dark .dm-topbar-btn,
body.dark .bell-btn,
body.dark .darkmode-btn,
body.dark .dm-back-btn,
body.dark .dm-panel-close,
body.dark .dm-panel-title,
body.dark .dm-send-btn,
body.dark .site-logo,
body.dark .admin-link-btn,
body.dark .settings-btn,
body.dark .logout-btn { color: #ccc; }

body.dark .dm-topbar-btn:hover,
body.dark .bell-btn:hover,
body.dark .darkmode-btn:hover { color: #fff; }

body.dark .dm-send-btn { background: rgba(91,94,247,0.85); color: #fff; }
body.dark .dm-conv-unread { background: rgba(91,94,247,0.85); }

/* ── 다크모드 ── */
body.dark .notif-panel {
    background: #1e1e32;
    box-shadow: -4px 0 32px rgba(0,0,0,0.5);
}
body.dark .notif-panel-header {
    border-bottom-color: rgba(255,255,255,0.08);
}
body.dark .notif-panel-title { color: #e0e0e0; }
body.dark .notif-panel-close { color: #888; }
body.dark .notif-panel-close:hover { background: rgba(255,255,255,0.08); }
body.dark .notif-panel-row { border-bottom-color: rgba(255,255,255,0.05); }
body.dark .notif-panel-row:hover { background: rgba(255,255,255,0.04); }
body.dark .notif-panel-unread { background: rgba(91,94,247,0.12); }
body.dark .notif-panel-unread:hover { background: rgba(91,94,247,0.18); }
body.dark .notif-panel-icon { color: #9b9ef7; }
body.dark .notif-panel-msg  { color: #ccc; }
body.dark .notif-panel-time { color: #666; }
body.dark .notif-panel-empty { color: #555; }