/* ============================================================
 * rb.bbs 디자인 토큰
 * - 색상/스페이싱/반경/전환을 CSS 변수로 노출.
 * - 다크 모드는 _dark.css 가 같은 변수를 override.
 * - 기존 색을 그대로 노출하는 호환층 — 시각적 변화 없음.
 * ============================================================ */
:root {
    /* 기본 컬러 (현재 style.css 에 흩어진 값들을 한 곳에 노출) */
    --rb-primary: #4674ba;
    --rb-primary-strong: #365f9f;
    --rb-primary-soft: #d6e9ff;

    /* 표면 / 배경 */
    --rb-bg: #ffffff;
    --rb-bg-elevated: #fafbfc;
    --rb-bg-muted: #f5f6f8;

    /* 테두리 */
    --rb-border: rgba(0, 0, 0, 0.08);
    --rb-border-strong: rgba(0, 0, 0, 0.16);
    --rb-divider: #e9ecef;

    /* 텍스트 */
    --rb-text: #222428;
    --rb-text-muted: #686b70;
    --rb-text-faint: #9ea2a7;
    --rb-text-on-primary: #ffffff;

    /* 상태 */
    --rb-danger: #d64545;
    --rb-warning: #d99a2b;
    --rb-success: #2c9e54;
    --rb-info: var(--rb-primary);

    /* 라벨 */
    --rb-label-new-bg: #ffeae3;
    --rb-label-new-fg: #d64a1f;
    --rb-label-hot-bg: #ffe8a8;
    --rb-label-hot-fg: #aa6b00;
    --rb-label-noti-bg: #d6e9ff;
    --rb-label-noti-fg: #305da3;

    /* 반경 / 그림자 */
    --rb-radius-sm: 6px;
    --rb-radius-md: 10px;
    --rb-radius-lg: 16px;
    --rb-radius-pill: 999px;
    --rb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --rb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --rb-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.12);

    /* 스페이싱 (8pt scale) */
    --rb-space-1: 4px;
    --rb-space-2: 8px;
    --rb-space-3: 12px;
    --rb-space-4: 16px;
    --rb-space-5: 24px;
    --rb-space-6: 32px;
    --rb-space-7: 48px;

    /* 전환 */
    --rb-trans-fast: 120ms ease-out;
    --rb-trans-base: 200ms ease-out;
    --rb-trans-slow: 320ms ease-out;

    /* 폰트 */
    --rb-font-size-xs: 12px;
    --rb-font-size-sm: 13px;
    --rb-font-size-base: 14px;
    --rb-font-size-md: 16px;
    --rb-font-size-lg: 18px;
    --rb-font-size-xl: 22px;
}

/* Realtime update banner */
.rb-realtime-banner:hover {
    background: var(--rb-primary-soft) !important;
    transition: background var(--rb-trans-fast);
}

/* AJAX 로딩 / fade-in (이전 인라인 style 이전) */
.rb_bbs_wrap.rb-ajax-loading { pointer-events: none; }
@keyframes rbFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.rb-ajax-fadein #fboardlist,
.rb-ajax-fadein .pg_wrap {
    animation: rbFadeIn 0.25s ease-out;
}

/* Lucide 아이콘 공통 크기 보정 */
.rb_bbs_wrap svg.lucide,
.rb_bbs_wrap [data-lucide] {
    width: 1em;
    height: 1em;
    stroke-width: 2;
    vertical-align: -0.125em;
    color: currentColor;
}

.rb_bbs_wrap button svg.lucide,
.rb_bbs_wrap a svg.lucide {
    pointer-events: none;
}