/* ==========================================================================
   beeTV 테마 스타일 (Bootstrap 5 기반)
   - 색/크기/모서리/글꼴은 head.sub.php 가 출력하는 :root{--bee-*} 변수로 제어
     (관리자 커스터마이저 저장값 → 즉시 반영). 아래는 폴백 기본값 + 컴포넌트 스타일.
   - 그누보드 default.css 는 로드하지 않음(클린 BS5).
   ========================================================================== */

/* Pretendard (자체 호스팅, 가변 폰트) — 테마 기본 폰트 */
@font-face{
    font-family:"Pretendard";
    src:url("../assets/fonts/PretendardVariable.woff2") format("woff2-variations");
    font-weight:45 920;
    font-style:normal;
    font-display:swap;
}

:root{
    /* 폴백 기본값 (head.sub.php 인라인이 우선) */
    --bee-bg:#0f1216; --bee-surface:#171b21; --bee-text:#e9edf1; --bee-muted:#8b95a1;
    --bee-border:#2a323c; --bee-accent:#ffb703; --bee-accent-2:#fb8500;
    --bee-font-size:15px; --bee-radius:8px; --bee-sidebar-width:300px; --bee-container-max:1200px; --bee-gutter:12px;
    --bee-font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;

    /* --bee-* → Bootstrap 변수 매핑 */
    --bs-body-bg: var(--bee-bg);
    --bs-body-color: var(--bee-text);
    --bs-body-font-family: var(--bee-font-family);
    --bs-emphasis-color: var(--bee-text);
    --bs-secondary-color: var(--bee-muted);
    --bs-border-color: var(--bee-border);
    --bs-border-radius: var(--bee-radius);
    --bs-link-color: var(--bee-accent);
    --bs-link-color-rgb: initial;
    --bs-link-hover-color: var(--bee-accent-2);
    --bs-heading-color: var(--bee-text);

    /* 카드 */
    --bs-card-bg: var(--bee-surface);
    --bs-card-border-color: var(--bee-border);
    --bs-card-cap-bg: transparent;
    --bs-card-color: var(--bee-text);
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--bee-border);
    --bs-list-group-color: var(--bee-text);

    /* 폼 */
    --bs-tertiary-bg: var(--bee-surface);
}

html{ scroll-behavior:smooth; }
body{
    background: var(--bee-bg);
    color: var(--bee-text);
    font-family: var(--bee-font-family);
    font-size: var(--bee-font-size);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex; flex-direction:column;
}
a{ text-decoration:none; }
#bee-main{ flex:1 0 auto; }

/* 본문 바로가기(스킵) */
.bee-skip{ position:absolute; left:-9999px; z-index:2000; }
.bee-skip:focus{ left:12px; top:10px; background:var(--bee-accent); color:var(--bee-on-accent); padding:8px 14px; border-radius:6px; }

/* 브랜드 */
.bee-brand{ font-weight:800; font-size:1.35rem; color:var(--bee-text); letter-spacing:-.5px; }
.bee-brand:hover{ color:var(--bee-text); }
.bee-brand .bi{ color:var(--bee-accent); }
.bee-brand-accent{ color:var(--bee-accent); }
.bee-logo-img{ display:block; width:auto; max-width:100%; vertical-align:middle; }
.bee-brand:has(.bee-logo-img){ padding:0; }

/* ===== 헤더 / 네비게이션 ===== */
.bee-hd{ position:sticky; top:0; z-index:1030; }
.bee-navbar{ padding-top:.55rem; padding-bottom:.55rem; }
/* 1단: 배경 + 하단 구분선 (커스터마이저 변수) */
.bee-hd-1tier .bee-navbar{ background:var(--bee-hd1-bg); border-bottom:var(--bee-hd1-border-w) solid var(--bee-hd1-border-c); }
/* 박스 타입: 헤더 바를 레이아웃 폭으로 제한 + 좌우 테두리 */
.bee-hd-box .bee-hd-top,
.bee-hd-box .bee-navbar{ max-width:var(--bee-container-max); margin-left:auto; margin-right:auto; border-left:1px solid var(--bee-hd-border); border-right:1px solid var(--bee-hd-border); }
.bee-hd-box .bee-hd-inner{ max-width:100%; }
.bee-navbar .navbar-toggler{ border-color:var(--bee-border); color:var(--bee-text); }
.bee-navbar .navbar-toggler:focus{ box-shadow:0 0 0 .2rem color-mix(in srgb, var(--bee-accent) 35%, transparent); }
/* 메뉴 정렬: ul 이 로고~유틸 사이 공간을 채우고 justify-content 로 항목 정렬 (데스크톱) */
@media (min-width:992px){
    .bee-gnb{ flex-grow:1; }
    .bee-menu-al-left   .bee-gnb{ justify-content:flex-start; }
    .bee-menu-al-center .bee-gnb{ justify-content:center; }
    .bee-menu-al-right  .bee-gnb{ justify-content:flex-end; }
}
.bee-gnb .nav-link{ color:var(--bee-text); font-weight:600; padding:.5rem .9rem; border-radius:var(--bee-radius); }
.bee-gnb .nav-link:hover, .bee-gnb .nav-link:focus{ color:var(--bee-accent); }
.bee-gnb .dropdown-menu.bee-dropdown{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); box-shadow:0 12px 30px rgba(0,0,0,.35); }
/* 데스크톱: 마우스 오버 시 서브메뉴 열림 (클릭도 그대로 동작) */
@media (min-width:992px){
    .bee-gnb .nav-item.dropdown:hover > .dropdown-menu{ display:block; }
    .bee-gnb .nav-item.dropdown > .dropdown-menu{ top:100%; left:0; margin-top:0; }
}
.bee-dropdown .dropdown-item{ color:var(--bee-text); border-radius:6px; }
.bee-dropdown .dropdown-item:hover{ background:color-mix(in srgb, var(--bee-accent) 18%, transparent); color:var(--bee-accent); }

/* ===== 모바일 메뉴 패널 (오프캔버스, 우측 슬라이드) =====
   1단/2단 구조와 무관하게 항상 우측에서 슬라이드. PC(≥992px)에서는 Bootstrap 의
   .navbar-expand-lg .offcanvas 규칙이 static 으로 되돌려 평소 메뉴바가 된다(아래는 모바일 전용). */
@media (max-width:991.98px){
    .bee-mnav.offcanvas{
        background:var(--bee-surface); color:var(--bee-text);
        border-left:1px solid var(--bee-border); width:min(320px, 86vw);
    }
    .bee-mnav .offcanvas-header{ border-bottom:1px solid var(--bee-border); padding:14px 16px; }
    .bee-mnav-title{ font-weight:800; font-size:1rem; color:var(--bee-text); }
    .bee-mnav-close{ border:0; background:transparent; color:var(--bee-muted); font-size:1.05rem; line-height:1; padding:6px; cursor:pointer; border-radius:var(--bee-radius); }
    .bee-mnav-close:hover{ color:var(--bee-accent); background:color-mix(in srgb, var(--bee-accent) 12%, transparent); }
    .bee-mnav .offcanvas-body{ padding:16px; }
    /* 패널 안 로그인 영역 (사이드바 로그인 위젯과 동일 마크업) */
    .bee-mnav-login{ margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--bee-border); }
    .bee-mnav-login .bee-widget-head{ margin-bottom:10px; }
    /* 로그인 아래 배너(최대 3개) — 여백 없이 패널 폭 꽉, 설정 없으면 블록 자체가 출력 안 됨 */
    .bee-mnav-banners{ display:flex; flex-direction:column; gap:10px; margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--bee-border); }
    .bee-mnav-banner{ display:block; border-radius:var(--bee-radius); overflow:hidden; }
    .bee-mnav-banner-img{ display:block; width:100%; height:auto; }
    /* 메뉴 항목: 세로 목록 + 행 구분선 */
    .bee-mnav .bee-gnb{ flex-direction:column; gap:0; }
    .bee-mnav .bee-gnb > .nav-item + .nav-item{ border-top:1px solid color-mix(in srgb, var(--bee-border) 60%, transparent); }
    .bee-mnav .bee-gnb .nav-link{ padding:.7rem .2rem; border-radius:0; }
    .bee-mnav .bee-gnb .dropdown-menu.bee-dropdown{ background:transparent; border:0; box-shadow:none; padding:0 0 .4rem .6rem; }
    .bee-mnav .bee-gnb .dropdown-item{ padding:.45rem .5rem; font-size:.92rem; color:var(--bee-muted); }
    .bee-mnav .bee-1tier-utils{ margin-top:16px; padding-top:16px; border-top:1px solid var(--bee-border); }
}

/* 메가 메뉴 (펼침 방식: mega) */
.bee-mega{ position:absolute; left:0; right:0; top:100%; z-index:1020; display:none; box-shadow:0 14px 34px rgba(0,0,0,.32); }
.bee-navbar:hover ~ .bee-mega, .bee-mega:hover{ display:block; }
.bee-mega-inner{ max-width:var(--bee-container-max); margin:0 auto; display:flex; flex-wrap:wrap; gap:28px; padding:22px 26px; }
.bee-mega-col{ min-width:150px; }
.bee-mega-head{ display:block; font-weight:800; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--bee-border); }
.bee-mega-col ul{ list-style:none; margin:0; padding:0; }
.bee-mega-col ul a{ display:block; padding:6px 8px; border-radius:6px; font-size:.92rem; }
@media (max-width:991.98px){ .bee-mega{ display:none !important; } }

/* 검색 */
.bee-search{ gap:6px; }
.bee-search-input{ background:var(--bee-bg); border:1px solid var(--bee-border); color:var(--bee-text); min-width:170px; }
.bee-search-input::placeholder{ color:var(--bee-muted); }
.bee-search-input:focus{ background:var(--bee-bg); color:var(--bee-text); border-color:var(--bee-accent); box-shadow:none; }
.bee-search-btn{ background:var(--bee-accent); border:0; color:var(--bee-on-accent); }
.bee-search-btn:hover{ background:var(--bee-accent-2); color:var(--bee-on-accent-2); }

/* 로그인 영역 */
.bee-login .nav-link{ color:var(--bee-text); font-weight:600; padding:.5rem .7rem; }
.bee-login .nav-link:hover{ color:var(--bee-accent); }
.bee-join-link{ color:var(--bee-accent) !important; }
.bee-admin-link{ color:var(--bee-accent-2) !important; }

/* ===== 2단 헤더 ===== */
.bee-hd-top{ background:var(--bee-hd2-top-bg); border-bottom:var(--bee-hd2-divider-w) solid var(--bee-hd2-divider-c); }
.bee-hd-2tier .bee-menubar{ background:var(--bee-hd2-menu-bg); border-bottom:var(--bee-hd2-bottom-w) solid var(--bee-hd2-bottom-c); }
.bee-hd-top-inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding-top:10px; padding-bottom:10px; }
.bee-hd-zone{ display:flex; align-items:center; gap:14px; min-width:0; }
.bee-hd-zone-left{ justify-content:flex-start; }
.bee-hd-zone-center{ justify-content:center; }
.bee-hd-zone-right{ justify-content:flex-end; }
.bee-hd-top-utils{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
@media (max-width:767.98px){
    .bee-hd-top-inner{ grid-template-columns:1fr; row-gap:10px; }
    .bee-hd-zone{ justify-content:center; flex-wrap:wrap; }
    .bee-hd-zone:empty{ display:none; }
}
.bee-hd-2tier .bee-menubar{ padding-top:.3rem; padding-bottom:.3rem; }
.bee-hd-2tier .bee-gnb{ gap:.15rem; }
.bee-hd-auth{ flex-direction:row; gap:2px; }
.bee-hd-auth .nav-link{ padding:.3rem .55rem; }
.bee-hd-banner{ display:inline-flex; align-items:center; }
.bee-hd-banner-img{ display:block; width:auto; max-width:100%; border-radius:6px; }

/* 즐겨찾기 버튼 */
.bee-fav-btn{ background:transparent; border:1px solid var(--bee-border); color:var(--bee-muted); border-radius:50px; padding:5px 14px; font-size:.85rem; font-weight:600; line-height:1.4; }
.bee-fav-btn:hover{ border-color:var(--bee-accent); color:var(--bee-accent); }
.bee-fav-btn .bi{ color:var(--bee-accent); }

/* 1단 우측 유틸 묶음 */
.bee-1tier-utils{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width:991.98px){ .bee-1tier-utils{ width:100%; margin-top:10px; align-items:stretch; flex-direction:column; } }

/* ===== 버튼 ===== */
.bee-btn-accent{ background:var(--bee-accent); border:1px solid var(--bee-accent); color:var(--bee-on-accent); font-weight:700; border-radius:var(--bee-radius); }
.bee-btn-accent:hover{ background:var(--bee-accent-2); border-color:var(--bee-accent-2); color:var(--bee-on-accent-2); }
.bee-btn-outline{ background:transparent; border:1px solid var(--bee-border); color:var(--bee-text); font-weight:600; border-radius:var(--bee-radius); }
.bee-btn-outline:hover{ border-color:var(--bee-accent); color:var(--bee-accent); }

/* ===== 히어로 (컨텐츠 컬럼 내 배너 블록) ===== */
.bee-hero{ position:relative; padding:48px 40px; margin-bottom:30px; border-radius:var(--bee-radius); overflow:hidden;
    border:1px solid var(--bee-border);
    background:
    radial-gradient(900px 320px at 90% -20%, color-mix(in srgb, var(--bee-accent) 18%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--bee-surface) 92%, var(--bee-bg)), var(--bee-bg)); }
@media (max-width: 575.98px){ .bee-hero{ padding:32px 22px; } }
.bee-hero-title{ font-size:clamp(1.8rem, 4vw, 2.9rem); font-weight:800; line-height:1.2; margin:14px 0; color:var(--bee-text); }
.bee-hero-sub{ color:var(--bee-muted); font-size:1.05rem; max-width:560px; }
.bee-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.bee-badge-live{ display:inline-flex; align-items:center; gap:6px; background:#ff3b3b; color:#fff; font-weight:800; font-size:.78rem; letter-spacing:.5px; padding:5px 12px; border-radius:50px; }

/* ===== 섹션 공통 ===== */
.bee-section{ padding:40px 0; }
.bee-section-community{ background:color-mix(in srgb, var(--bee-surface) 40%, var(--bee-bg)); }
.bee-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.bee-section-title{ font-size:1.35rem; font-weight:800; margin:0; color:var(--bee-text); }
.bee-section-title .bi{ color:var(--bee-accent); margin-right:6px; }
.bee-section-note{ color:var(--bee-muted); font-size:.82rem; }
.bee-section-more{ color:var(--bee-accent); font-weight:600; font-size:.9rem; }

/* ===== 경기 카드 ===== */
.bee-match-card{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:16px; height:100%; transition:transform .15s, border-color .15s; }
.bee-match-card:hover{ transform:translateY(-3px); border-color:var(--bee-accent); }
.bee-match-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.bee-league{ font-size:.75rem; font-weight:700; color:var(--bee-muted); background:color-mix(in srgb, var(--bee-muted) 16%, transparent); padding:3px 9px; border-radius:50px; }
.bee-live-dot{ color:#ff3b3b; font-weight:800; font-size:.78rem; }
.bee-live-dot .bi{ font-size:.5rem; vertical-align:middle; animation:bee-blink 1.2s infinite; }
@keyframes bee-blink{ 50%{ opacity:.25; } }
.bee-match-time{ color:var(--bee-muted); font-size:.82rem; }
.bee-match-teams{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.bee-team{ font-weight:700; font-size:1rem; flex:1; text-align:center; }
.bee-vs{ color:var(--bee-accent); font-weight:800; font-size:.8rem; }
.bee-match-foot{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--bee-border); padding-top:12px; }
.bee-viewers{ font-size:.82rem; color:var(--bee-muted); }
.bee-watch-btn{ background:var(--bee-accent); color:var(--bee-on-accent); font-weight:700; font-size:.82rem; padding:5px 14px; border-radius:50px; }
.bee-watch-btn:hover{ background:var(--bee-accent-2); color:var(--bee-on-accent-2); }
.bee-watch-soon{ background:transparent; border:1px solid var(--bee-border); color:var(--bee-muted); }
.bee-watch-soon:hover{ border-color:var(--bee-accent); color:var(--bee-accent); background:transparent; }

/* ===== 최신글 카드 (latest 스킨) ===== */
.bee-latest{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); }
/* 헤드 배경 투명 — BS5 .card-header 의 기본 회색(--bs-card-cap-bg)이 다른 위젯 헤드와 달라 보이는 문제 */
.bee-latest-head{ display:flex; align-items:center; justify-content:space-between; background:transparent; border-bottom:1px solid var(--bee-border); padding:.7rem 1rem; }
.bee-latest-title{ font-weight:800; color:var(--bee-text); font-size:1rem; }
.bee-latest-title:hover{ color:var(--bee-accent); }
.bee-latest-more{ color:var(--bee-muted); }
.bee-latest-more:hover{ color:var(--bee-accent); }
.bee-latest-list{ padding:.3rem 0; }
.bee-latest-item{ background:transparent; border-color:var(--bee-border); padding:.5rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bee-latest-item:last-child{ border-bottom:0; }
.bee-latest-link{ color:var(--bee-text); display:flex; align-items:center; gap:6px; min-width:0; flex:1; }
.bee-latest-link:hover .bee-latest-subj{ color:var(--bee-accent); }
.bee-latest-subj{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bee-latest-subj.bee-notice{ font-weight:800; color:var(--bee-accent); }
.bee-latest-meta{ display:flex; gap:8px; align-items:center; flex:0 0 auto; }
.bee-latest-name{ color:var(--bee-muted); font-size:.78rem; max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bee-latest-date{ color:var(--bee-muted); font-size:.75rem; }
.bee-tag-new{ background:var(--bee-accent); color:var(--bee-on-accent); font-size:.62rem; font-weight:800; padding:1px 5px; border-radius:4px; }
.bee-cmt{ background:color-mix(in srgb, var(--bee-accent) 18%, transparent); color:var(--bee-accent); font-size:.7rem; font-weight:700; padding:1px 6px; border-radius:50px; }
.bee-ic-hot{ color:#ff6b3d; }
.bee-latest-empty{ color:var(--bee-muted); text-align:center; padding:1.2rem; }

/* ===== 레이아웃 / 사이드바 ===== */
.bee-page-title{ font-size:1.5rem; font-weight:800; margin-bottom:1.2rem; color:var(--bee-text); }
/* 고정 폭 모드: 본문 최대 너비를 커스터마이저 값으로 (헤더/본문/푸터 .container 공통 적용) */
.bee-layout-container .container{ max-width:var(--bee-container-max, 1200px); }
/* 본문 좌우 여백: 컨텐츠 영역(#bee-main)에만 적용 — 헤더/푸터 내부 여백은 그대로 유지. 0이면 가장자리까지 꽉 참 */
#bee-main > .container,
#bee-main > .container-fluid{ padding-left:var(--bee-gutter, 12px); padding-right:var(--bee-gutter, 12px); }

.bee-layout-row{ display:flex; gap:24px; align-items:flex-start; }
.bee-main-col{ flex:1 1 auto; min-width:0; }
.bee-side-col{ flex:0 0 var(--bee-sidebar-width, 300px); width:var(--bee-sidebar-width, 300px); }
.bee-sidebar-left .bee-side-col{ order:-1; }       /* PC: 사이드바 왼쪽 */
.bee-sidebar-none .bee-side-col{ display:none; }
/* 모바일: 사이드바 숨김 (요구사항)
   단, vchat 노드는 살려서 하단바 채팅 오버레이로 재배치해야 하므로 display:none 으로 서브트리를 죽이지 않는다.
   → 사이드바를 "공간 0 + 내용 숨김"으로 처리(transform 금지: position:fixed 자식이 뷰포트로 탈출하도록). */
@media (max-width: 991.98px){
    .bee-side-col{ display:block !important; position:absolute; width:0; height:0; padding:0; border:0; margin:0; overflow:visible; }
    .bee-side-col > *:not(.bee-w-vchat){ display:none !important; }
    .bee-main-col{ width:100%; }
}

.bee-empty{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:2rem; text-align:center; color:var(--bee-muted); }

/* ===== 사이드바 위젯 ===== */
.bee-widget{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:16px; margin-bottom:18px; }
/* bare 위젯(최신글/채팅 등): 카드 래퍼 투명 — 내부 컴포넌트가 자체 스타일 보유 */
.bee-widget.bee-widget-latest,
.bee-widget.bee-widget-bare{ padding:0; background:transparent; border:0; }
.bee-widget-head{ font-weight:800; font-size:.95rem; margin-bottom:12px; color:var(--bee-text); }
/* 배너 위젯 (이미지 여백 0 규칙은 사이드바 디자인 블록 뒤 .bee-w-banner 섹션에서 확정) */
.bee-w-banner-img{ display:block; width:100%; height:auto; border-radius:0; }
.bee-w-banner-link{ display:block; }
.bee-w-banner .bee-widget-head{ margin-bottom:10px; }
/* 랭킹 위젯 (포인트/경험치) */
.bee-rank{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.bee-rank-item{ display:flex; align-items:center; gap:10px; font-size:.9rem; }
.bee-rank-no{ flex:0 0 22px; height:22px; line-height:22px; text-align:center; border-radius:6px; font-size:.78rem; font-weight:700; color:var(--bee-muted); background:color-mix(in srgb, var(--bee-text) 8%, transparent); }
.bee-rank-no.bee-rank-top{ color:#1a1d21; }
.bee-rank-no.bee-rank-1{ background:#ffcf33; }
.bee-rank-no.bee-rank-2{ background:#cdd3da; }
.bee-rank-no.bee-rank-3{ background:#e2a06b; }
.bee-rank-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bee-text); }
.bee-rank-val{ flex:0 0 auto; color:var(--bee-accent); font-weight:700; font-size:.82rem; }
.bee-rank-empty{ color:var(--bee-muted); font-size:.85rem; }
/* 새글/새댓글 위젯 */
.bee-np{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.bee-np-item a{ display:flex; align-items:center; gap:6px; color:var(--bee-text); font-size:.88rem; min-width:0; }
.bee-np-item a:hover{ color:var(--bee-accent); }
.bee-np-subj{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bee-np-cmt{ color:var(--bee-accent); font-size:.8rem; flex:none; }
.bee-np-empty{ color:var(--bee-muted); font-size:.85rem; }
/* 롤링 최신글 위젯 (한 줄 바: 라벨 + 슬라이드 제목 + ▲▼) */
.bee-roll-bar{ display:flex; align-items:center; gap:10px; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:8px 10px; }
.bee-roll-badge{ flex:none; display:inline-flex; align-items:center; gap:4px; background:var(--bee-accent); color:var(--bee-on-accent); font-size:.78rem; font-weight:700; padding:4px 9px; border-radius:6px; white-space:nowrap; }
.bee-roll{ flex:1 1 auto; min-width:0; overflow:hidden; height:1.5em; }
.bee-roll-list{ list-style:none; margin:0; padding:0; }
.bee-roll-list li{ height:1.5em; line-height:1.5em; }
.bee-roll-list a{ display:block; color:var(--bee-text); font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bee-roll-list a:hover{ color:var(--bee-accent); }
.bee-roll-nav{ flex:none; display:flex; flex-direction:column; gap:2px; }
.bee-roll-nav button{ border:0; background:transparent; color:var(--bee-muted); cursor:pointer; padding:0 1px; line-height:.8; font-size:.72rem; }
.bee-roll-nav button:hover{ color:var(--bee-accent); }
.bee-widget-head .bi{ color:var(--bee-accent); margin-right:5px; }
.bee-side-nick{ font-weight:700; margin-bottom:10px; }
.bee-side-nick .bi{ color:var(--bee-accent); }
.bee-side-userlinks{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.bee-side-userlinks a{ display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 6px; border:1px solid var(--bee-border); border-radius:var(--bee-radius); background:transparent; color:var(--bee-muted); font-size:.8rem; font-weight:600; text-decoration:none; transition:border-color .15s, color .15s; }
.bee-side-userlinks a:hover{ border-color:var(--bee-accent); color:var(--bee-accent); background:color-mix(in srgb, var(--bee-accent) 8%, transparent); }
.bee-side-userlinks a .bi{ font-size:.95em; }
.bee-side-userlinks a.bee-logout:hover{ border-color:#e2574c; color:#e2574c; background:color-mix(in srgb, #e2574c 8%, transparent); }
.bee-side-guest{ display:flex; flex-direction:column; gap:8px; }

/* ===== 사이드바 디자인 타입 (커스터마이저) — 색은 변수, 빈값이면 테마색 폴백 ===== */
/* 공통: 사이드바 내 패널/텍스트 색을 변수로 (메인 페이지 latest 카드엔 영향 없음 — .bee-side-col 스코프) */
.bee-side-col .bee-widget,
.bee-side-col .bee-latest{ background:var(--bee-side-panel-bg, var(--bee-surface)); border-color:var(--bee-side-border, var(--bee-border)); }
.bee-side-col .bee-widget-head,
.bee-side-col .bee-latest-title,
.bee-side-col .bee-side-nick{ color:var(--bee-side-head, var(--bee-text)); }
.bee-side-col .bee-latest-head,
.bee-side-col .bee-latest-item{ border-color:var(--bee-side-border, var(--bee-border)); }
.bee-side-col .bee-side-userlinks a,
.bee-side-col .bee-latest-link{ color:var(--bee-side-text, var(--bee-muted)); }
/* 헤드 우측 "+"(게시판 바로가기)도 위젯 제목 색을 따른다(미지정 시 기존 muted 유지) */
.bee-side-col .bee-latest-more{ color:var(--bee-side-head, var(--bee-muted)); }
.bee-side-col .bee-side-userlinks a:hover,
.bee-side-col .bee-latest-link:hover,
.bee-side-col .bee-latest-more:hover,
.bee-side-col .bee-latest-title:hover{ color:var(--bee-side-link, var(--bee-accent)); }
/* 타입 B 단일 패널 구분형: 바깥을 하나의 박스로, 내부 패널은 투명 + 구분선 */
.bee-side-design-b{ background:var(--bee-side-panel-bg, var(--bee-surface)); border:1px solid var(--bee-side-border, var(--bee-border)); border-radius:var(--bee-radius); overflow:hidden; }
.bee-side-design-b .bee-widget{ background:transparent; border:0; border-bottom:1px solid var(--bee-side-border, var(--bee-border)); border-radius:0; margin:0; padding:16px; }
.bee-side-design-b .bee-widget:last-child{ border-bottom:0; }
.bee-side-design-b .bee-widget-latest{ padding:0; }
.bee-side-design-b .bee-latest{ background:transparent; border:0; border-radius:0; }
.bee-side-design-b .bee-latest-head{ border-bottom:1px solid var(--bee-side-border, var(--bee-border)); }
/* 타입 C 미니멀(라인형): 박스 제거 + 제목 좌측 액센트 바 */
.bee-side-design-c .bee-widget,
.bee-side-design-c .bee-latest{ background:transparent; border:0; border-radius:0; }
.bee-side-design-c .bee-widget{ padding:0; margin-bottom:24px; }
/* 미니멀(라인형) 헤드: 좌측 사각 강조바로 통일. .bee-latest-head 는 Bootstrap .card-header 라
   모서리 radius 가 남아 강조바가 휘어 보이므로 border-radius:0 으로 네모 통일. */
.bee-side-design-c .bee-widget-head,
.bee-side-design-c .bee-latest-head{ border-bottom:0; border-left:3px solid var(--bee-side-link, var(--bee-accent)); border-radius:0; padding:0 0 6px 9px; }
.bee-side-design-c .bee-latest-item{ padding-left:0; padding-right:0; }
/* 위젯 제목 배경(커스터마이저 "위젯 제목 배경색" 지정 시에만 .bee-side-headbg 부여) —
   제목이 패널 폭을 가득 채우는 타이틀 바가 된다. 글자색은 "위젯 제목 색"(--bee-side-head)이 그대로 적용. */
/* 로그인 위젯은 .bee-widget-head 가 없고 닉네임 줄(.bee-side-nick)이 제목 역할 → 함께 타이틀 바로 처리.
   (빠뜨리면 제목색만 먹어 흰 글씨가 흰 패널에 묻힌다) */
.bee-side-headbg .bee-widget-head,
.bee-side-headbg .bee-side-nick{
    background:var(--bee-side-head-bg); margin:-16px -16px 12px; padding:9px 16px;
    border-radius:var(--bee-radius) var(--bee-radius) 0 0; }
.bee-side-headbg .bee-latest-head{ background:var(--bee-side-head-bg); }
/* 컬러 바 안의 요소는 제목 색을 따른다 — "+"(바로가기)는 muted 대신 제목색, 제목 아이콘(.bi)도 강조색 대신 상속
   (배경색을 깐 상태에서 회색 "+"·강조색 아이콘이 묻혀 안 보이는 것 방지) */
.bee-side-headbg .bee-latest-more{ color:var(--bee-side-head, var(--bee-text)); }
.bee-side-headbg .bee-widget-head .bi,
.bee-side-headbg .bee-side-nick .bi{ color:inherit; }
/* bare/최신글 위젯: 래퍼 패딩이 0이라 음수 마진 불필요 */
.bee-side-headbg .bee-widget-latest > .bee-widget-head,
.bee-side-headbg .bee-widget-bare > .bee-widget-head{ margin:0 0 10px; border-radius:var(--bee-radius); }
/* 타입 B(단일 패널): 바깥 박스가 하나라 위젯별 상단 라운드 제거 */
.bee-side-design-b.bee-side-headbg .bee-widget-head,
.bee-side-design-b.bee-side-headbg .bee-side-nick{ border-radius:0; }
/* 타입 C(미니멀): 패널 패딩 0 → 음수 마진 없이 바 형태로, 좌측 강조바는 유지 */
.bee-side-design-c.bee-side-headbg .bee-widget-head,
.bee-side-design-c.bee-side-headbg .bee-side-nick,
.bee-side-design-c.bee-side-headbg .bee-latest-head{ margin:0 0 10px; padding:7px 10px; border-radius:0; }

/* ===== 배너 위젯: 이미지는 어떤 경우에도 패널을 꽉 채운다(여백 0) =====
   .bee-widget 공통 padding:16px / 디자인 B의 padding:16px / 제목바 모드의 음수마진을 전부 무력화해야 하므로
   사이드바 디자인·제목바 블록보다 "뒤"에 둔다(동일 명시도에서 나중 규칙 우선). */
.bee-widget.bee-w-banner,
.bee-side-design-b .bee-widget.bee-w-banner,
.bee-side-design-c .bee-widget.bee-w-banner{ padding:0; overflow:hidden; }
/* 제목(선택)이 있을 때만 제목에 여백 — 이미지는 그대로 가장자리까지 */
.bee-w-banner .bee-widget-head{ margin:0; padding:11px 14px; }
.bee-side-design-c .bee-w-banner .bee-widget-head{ padding:0 0 6px 9px; }   /* 미니멀: 좌측 강조바 형태 유지 */
/* 제목바 모드는 디자인 무관하게 바 형태 유지(명시도 0,4,0 으로 위 규칙들보다 우선) */
.bee-side-col.bee-side-headbg .bee-w-banner .bee-widget-head{ margin:0; padding:9px 14px; border-radius:0; }

/* ===== SEO 영역 (컨텐츠 컬럼 하단) — 색은 CSS 변수, 빈값이면 테마색 폴백 ===== */
.bee-seo{ margin-top:34px; padding-top:22px; border-top:1px solid var(--bee-seo-divider, var(--bee-border)); font-size:.92rem; line-height:1.75; }
.bee-seo-title{ color:var(--bee-seo-title, var(--bee-text)); font-size:1.45rem; font-weight:800; margin:0 0 14px; }
.bee-seo-intro{ color:var(--bee-seo-text, var(--bee-muted)); margin:0 0 22px; }
.bee-seo-sec{ margin:0 0 22px; }
.bee-seo-subtitle{ color:var(--bee-seo-subtitle, var(--bee-accent)); font-size:1.12rem; font-weight:700; margin:0 0 10px; }
.bee-seo-body{ color:var(--bee-seo-text, var(--bee-muted)); }
.bee-seo-intro p,.bee-seo-body p{ margin:0 0 8px; }
.bee-seo-body ul,.bee-seo-body ol{ margin:0 0 8px; padding-left:20px; }
.bee-seo-body strong,.bee-seo-body b{ font-weight:700; }
.bee-seo a{ color:var(--bee-seo-link, var(--bee-accent)); text-decoration:none; }
.bee-seo a:hover{ text-decoration:underline; }
/* 타입 B: 구분선형 — 소제목 아래 얇은 선 */
.bee-seo-type-b .bee-seo-subtitle{ border-bottom:1px solid var(--bee-seo-divider, var(--bee-border)); padding-bottom:8px; }
/* 타입 C: 카드형 — 각 섹션을 카드로 */
.bee-seo-type-c .bee-seo-sec{ background:var(--bee-surface); border:1px solid var(--bee-seo-divider, var(--bee-border)); border-radius:var(--bee-radius); padding:16px 18px; }

/* ===== 푸터 ===== */
/* 배경/테두리는 설정값(인라인 style)으로 구동 — 기본 상단 1px는 footer_bd_t_w 기본값으로 재현 */
.bee-ft{ flex-shrink:0; background:color-mix(in srgb, var(--bee-surface) 70%, var(--bee-bg)); padding:34px 0 24px; margin-top:30px; }
/* 박스 타입: 푸터를 레이아웃 폭으로 제한 + 가운데 정렬 (테두리는 배경/테두리 설정으로) */
/* width:100% 필수 — flex column 자식이라 margin:auto만 주면 콘텐츠 폭으로 줄어듦(shrink-to-fit) */
.bee-ft-box{ width:100%; max-width:var(--bee-container-max); margin-left:auto; margin-right:auto; }
.bee-ft-box > .container,.bee-ft-box > .container-fluid{ max-width:100%; }
.bee-ft-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; padding-bottom:18px; border-bottom:var(--bee-ft-divider-w, 1px) solid var(--bee-ft-divider-c, var(--bee-border)); }
.bee-ft-desc{ color:var(--bee-muted); font-size:.85rem; margin:6px 0 0; }
/* 로고 하단 문구 내 링크는 일반 문구와 동일하게(색/밑줄 차이 없음) */
.bee-ft-desc a,.bee-ft-desc a:hover,.bee-ft-desc a:focus{ color:inherit; text-decoration:none; }
.bee-ft-links{ display:flex; gap:18px; flex-wrap:wrap; }
.bee-ft-links a{ color:var(--bee-ft-link, var(--bee-muted)); font-size:.88rem; }
.bee-ft-links a:hover{ color:var(--bee-ft-link-hover, var(--bee-accent)); }
.bee-ft-copy{ color:var(--bee-ft-copy, var(--bee-muted)); font-size:.82rem; padding-top:16px; }
.bee-ft-copy strong{ color:var(--bee-ft-copy-strong, var(--bee-text)); }

/* ===== 상단으로 버튼 ===== */
.bee-top-btn{ position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; border:1px solid var(--bee-border); background:var(--bee-surface); color:var(--bee-text); font-size:1.1rem; z-index:1040; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; }
.bee-top-btn.show{ opacity:1; visibility:visible; }
.bee-top-btn:hover{ background:var(--bee-accent); color:var(--bee-on-accent); border-color:var(--bee-accent); }

/* ===== 회원 등급 뱃지 (닉네임 옆 공통 출력) ===== */
.bee-grade{ display:inline-flex; align-items:center; gap:3px; vertical-align:middle; line-height:1; white-space:nowrap; font-size:.85em; }
.bee-grade-ic{ font-size:1.05em; }
.bee-grade-img{ height:1.2em; width:auto; vertical-align:middle; border-radius:2px; }
.bee-grade-name{ font-weight:600; }
.bee-grade-pill{ padding:2px 8px; border-radius:999px; font-size:.78em; line-height:1.3; }
/* 이름 앞에 올 때 간격 + 최신글 작성자칸은 뱃지 들어갈 여유 확보 */
.bee-rank-name .bee-grade,
.bee-latest-name .bee-grade,
.bee-list-table .td_name .bee-grade,
.bee-sch-meta .bee-grade,
.bee-memo-name .bee-grade{ margin-right:3px; }
.bee-latest-name{ max-width:92px; }

/* ===== 채팅(vchat) 위젯: 카드 여백 없이 꽉 채움(내부 여백은 위젯 설정으로 제어) ===== */
.bee-widget.bee-w-vchat,
.bee-side-design-b .bee-widget.bee-w-vchat,
.bee-side-design-c .bee-widget.bee-w-vchat{ padding:0; background:transparent; border:0; }
.bee-vchat{ width:100%; }
.bee-vchat v-chat{ display:block; width:100%; }

/* ===== 모바일 하단 고정바 + 채팅 오버레이 (≤991.98px 노출, 커스터마이저 "모바일 하단바" 탭) =====
   --bee-mchat-h(채팅 높이)는 head.sub.php 가 설정값으로 출력. --bee-mbar-h(바 높이)는 고정. */
:root{ --bee-mbar-h:56px; }
#bee-mbar{ display:none; }
@media (max-width: 991.98px){
    /* 하단 고정바 */
    #bee-mbar{
        display:flex; position:fixed; left:0; right:0; bottom:0;
        height:calc(var(--bee-mbar-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom:env(safe-area-inset-bottom, 0px);
        z-index:1085; background:var(--bee-surface); border-top:1px solid var(--bee-border);
    }
    /* 항목 공통 */
    .bee-mbar-item{
        flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center;
        gap:3px; padding:4px 2px; color:var(--bee-muted); text-decoration:none; line-height:1.1;
        background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; font-size:.66rem;
    }
    .bee-mbar-item i{ font-size:1.2rem; line-height:1; }
    .bee-mbar-ic-img{ height:1.25rem; width:auto; max-width:30px; object-fit:contain; display:block; }
    .bee-mbar-item span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    /* 활성(현재 페이지)·채팅 열림 강조 */
    .bee-mbar-item.active,
    body.bee-mchat-open .bee-mbar-chat{ color:var(--bee-accent); }

    /* 디자인 타입 a: 아이콘 위 + 텍스트 아래(세로) — 기본 */
    .bee-mbar-d-a .bee-mbar-item{ flex-direction:column; }
    /* 디자인 타입 b: 아이콘 앞 + 텍스트 뒤(가로) */
    .bee-mbar-d-b .bee-mbar-item{ flex-direction:row; gap:6px; font-size:.78rem; }
    .bee-mbar-d-b .bee-mbar-item i{ font-size:1.05rem; }
    .bee-mbar-d-b .bee-mbar-ic-img{ height:1.1rem; }
    /* 디자인 타입 c: 아이콘만(텍스트 숨김) */
    .bee-mbar-d-c .bee-mbar-item span{ display:none; }
    .bee-mbar-d-c .bee-mbar-item i{ font-size:1.45rem; }
    .bee-mbar-d-c .bee-mbar-ic-img{ height:1.55rem; max-width:34px; }

    /* 본문이 하단바에 가리지 않도록 + 맨위로 버튼을 하단바 위로 (바가 있을 때만) */
    body.bee-has-mbar #bee-main{ padding-bottom:calc(var(--bee-mbar-h) + env(safe-area-inset-bottom, 0px) + 8px); }
    body.bee-has-mbar .bee-top-btn{ bottom:calc(var(--bee-mbar-h) + env(safe-area-inset-bottom, 0px) + 16px); }

    /* 채팅 오버레이: 사이드바 vchat 노드를 하단바 위 패널로 텔레포트(DOM 이동 없음 → 웹컴포넌트/세션 유지).
       display 토글 대신 visibility 유지 → <v-chat> 내부 iframe 초기 0높이 quirk 회피 + 즉시 표시.
       bottom 은 항상 하단바 바로 위 고정, 높이만 가변(--bee-mchat-h). */
    .bee-w-vchat{
        position:fixed; left:0; right:0; bottom:var(--bee-mbar-h); height:var(--bee-mchat-h, 250px);
        z-index:1080; background:var(--bee-bg); overflow:hidden;
        visibility:hidden; opacity:0; pointer-events:none; transform:translateY(8px);
        transition:opacity .18s ease, transform .18s ease;
        box-shadow:0 -2px 18px rgba(0,0,0,.28);
    }
    body.bee-mchat-open .bee-w-vchat{ visibility:visible; opacity:1; pointer-events:auto; transform:none; }
    .bee-w-vchat .bee-vchat{ height:100%; }
    .bee-w-vchat .bee-vchat v-chat{ height:100% !important; }
}

/* ===== 회원 인증/폼 페이지 공통 (login/register/password 등) — 6 색상톤 자동 추종 ===== */
.bee-auth{ max-width:440px; margin:48px auto; padding:0 16px; }
.bee-auth-wide{ max-width:680px; }
.bee-auth-card{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:30px 28px; }
.bee-auth-title{ font-size:1.4rem; font-weight:800; color:var(--bee-text); text-align:center; margin:0 0 4px; }
.bee-auth-sub{ color:var(--bee-muted); text-align:center; font-size:.88rem; margin:0 0 22px; }
.bee-auth-tabs{ display:flex; gap:8px; margin-bottom:22px; }
.bee-auth-tab{ flex:1; text-align:center; padding:10px; border-radius:var(--bee-radius); border:1px solid var(--bee-border); color:var(--bee-muted); font-weight:700; text-decoration:none; }
.bee-auth-tab.on{ background:var(--bee-accent); border-color:var(--bee-accent); color:var(--bee-on-accent); }
.bee-auth-tab:hover:not(.on){ border-color:var(--bee-accent); color:var(--bee-accent); }
.bee-auth .form-label{ font-size:.85rem; color:var(--bee-muted); margin-bottom:5px; font-weight:600; }
.bee-auth .form-control,
.bee-auth .form-select{ background:var(--bee-bg); border:1px solid var(--bee-border); color:var(--bee-text); border-radius:var(--bee-radius); padding:.6rem .8rem; }
.bee-auth .form-control:focus,
.bee-auth .form-select:focus{ background:var(--bee-bg); color:var(--bee-text); border-color:var(--bee-accent); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--bee-accent) 25%, transparent); }
.bee-auth .form-control::placeholder{ color:var(--bee-muted); opacity:.7; }
.bee-auth .input-group-text{ background:var(--bee-surface); border:1px solid var(--bee-border); color:var(--bee-muted); }
.bee-auth-actions{ margin-top:20px; }
.bee-auth-links{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; font-size:.85rem; flex-wrap:wrap; gap:8px; }
.bee-auth-links a{ color:var(--bee-muted); }
.bee-auth-links a:hover{ color:var(--bee-accent); }
.bee-auth .form-check-input:checked{ background-color:var(--bee-accent); border-color:var(--bee-accent); }
.bee-auth .form-check-label{ color:var(--bee-muted); font-size:.85rem; }
.bee-auth-msg{ color:var(--bee-muted); font-size:.85rem; line-height:1.6; }
.bee-auth-sec{ color:var(--bee-text); font-weight:700; font-size:1rem; margin:24px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--bee-border); }
/* 회원가입 폼 보조요소 */
.bee-auth-fieldmsg{ display:block; font-size:.8rem; margin-top:5px; color:var(--bee-muted); }
.bee-auth-terms{ font-size:.82rem; line-height:1.6; resize:vertical; }
.bee-auth-table{ font-size:.82rem; color:var(--bee-text); --bs-table-bg:transparent; --bs-table-color:var(--bee-text); --bs-table-border-color:var(--bee-border); }
.bee-auth-table th{ color:var(--bee-muted); font-weight:600; white-space:nowrap; }
/* 자동등록방지(kcaptcha) — 코어 출력 버튼/입력을 테마 버튼/입력 스타일로 (스코프: 회원 폼) */
.bee-auth-captcha #captcha{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:100%; }
.bee-auth-captcha #captcha_img{ border-radius:var(--bee-radius); overflow:hidden; flex:none; }
.bee-auth-captcha #captcha_key{ background:var(--bee-bg); border:1px solid var(--bee-border); color:var(--bee-text); border-radius:var(--bee-radius); padding:.5rem .7rem; height:auto; }
.bee-auth-captcha #captcha_key:focus{ border-color:var(--bee-accent); outline:none; box-shadow:0 0 0 .2rem color-mix(in srgb, var(--bee-accent) 25%, transparent); }
.bee-auth-captcha #captcha_mp3,
.bee-auth-captcha #captcha_reload{ background:transparent; border:1px solid var(--bee-border); color:var(--bee-text); font-weight:600; border-radius:var(--bee-radius); padding:.45rem .85rem; font-size:.85rem; line-height:1.4; cursor:pointer; }
.bee-auth-captcha #captcha_mp3:hover,
.bee-auth-captcha #captcha_reload:hover{ border-color:var(--bee-accent); color:var(--bee-accent); }
.bee-auth-captcha #captcha_info{ width:100%; color:var(--bee-muted); font-size:.8rem; margin-top:2px; }
/* 도움말 툴팁 (Bootstrap .tooltip 과 충돌 회피용 자체 클래스) */
.bee-tip-icon{ position:relative; display:inline-block; color:var(--bee-muted); cursor:pointer; }
.bee-tip-icon:hover{ color:var(--bee-accent); }
.bee-tip{ display:none; position:absolute; left:0; top:130%; z-index:20; width:max-content; max-width:260px;
    background:var(--bee-bg); color:var(--bee-text); border:1px solid var(--bee-border); border-radius:var(--bee-radius);
    padding:8px 10px; font-size:.78rem; font-weight:400; line-height:1.5; box-shadow:0 6px 18px rgba(0,0,0,.25); white-space:normal; }
.bee-tip-text{ color:var(--bee-muted); font-size:.8rem; font-weight:400; }
/* 가입 완료 */
.bee-auth-result-icon{ font-size:2.6rem; color:var(--bee-accent); margin-bottom:8px; }
.bee-auth-result-box{ background:var(--bee-bg); border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:14px 16px; margin:16px 0; text-align:left; display:inline-block; min-width:240px; }
.bee-auth-result-k{ display:inline-block; width:64px; color:var(--bee-muted); font-size:.85rem; }

/* ===== 팝업창(프로필/포인트/스크랩 등 new_win) ===== */
.bee-pop{ padding:18px 18px 24px; color:var(--bee-text); }
.bee-pop-title{ font-size:1.15rem; font-weight:800; color:var(--bee-text); margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--bee-border); }
.bee-pop .table{ --bs-table-bg:transparent; --bs-table-color:var(--bee-text); --bs-table-border-color:var(--bee-border); color:var(--bee-text); font-size:.88rem; margin-bottom:14px; }
.bee-pop .table th{ color:var(--bee-muted); font-weight:600; background:var(--bee-surface); white-space:nowrap; }
.bee-pop-profile{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.bee-pop-profile img{ width:54px; height:54px; border-radius:50%; object-fit:cover; border:1px solid var(--bee-border); }
.bee-pop-profile .bee-pop-nick{ font-weight:700; font-size:1.05rem; }
.bee-pop-sec{ color:var(--bee-text); font-weight:700; font-size:.95rem; margin:16px 0 8px; }
.bee-pop-actions{ margin-top:18px; display:flex; gap:8px; }
/* 포인트 내역 */
.bee-pt-sum{ display:flex; justify-content:space-between; align-items:center; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:12px 16px; font-weight:700; margin-bottom:14px; }
.bee-pt-sum strong{ color:var(--bee-accent); font-size:1.15rem; }
.bee-pt-list{ list-style:none; margin:0 0 14px; padding:0; }
.bee-pt-item{ display:flex; flex-direction:column; gap:2px; padding:10px 2px; border-bottom:1px solid var(--bee-border); }
.bee-pt-row1{ display:flex; justify-content:space-between; gap:10px; }
.bee-pt-tit{ color:var(--bee-text); font-size:.9rem; }
.bee-pt-num{ font-weight:700; color:var(--bee-accent); white-space:nowrap; }
.bee-pt-item.point_use .bee-pt-num{ color:var(--bee-muted); }
.bee-pt-meta{ color:var(--bee-muted); font-size:.78rem; display:flex; justify-content:space-between; gap:10px; }
.bee-pt-empty,.bee-scrap-empty{ color:var(--bee-muted); text-align:center; padding:1.5rem 0; }
/* 스크랩 목록 */
.bee-scrap-list{ list-style:none; margin:0 0 14px; padding:0; }
.bee-scrap-item{ padding:10px 2px; border-bottom:1px solid var(--bee-border); }
.bee-scrap-item .bee-scrap-tit{ display:block; color:var(--bee-text); font-weight:600; font-size:.92rem; }
.bee-scrap-item .bee-scrap-tit:hover{ color:var(--bee-accent); }
.bee-scrap-meta{ display:flex; align-items:center; gap:10px; margin-top:4px; font-size:.78rem; color:var(--bee-muted); }
.bee-scrap-meta a{ color:var(--bee-muted); }
.bee-scrap-meta a:hover{ color:var(--bee-accent); }

/* 팝업 탭 네비(쪽지함 등) */
.bee-pop-tabs{ display:flex; gap:4px; list-style:none; padding:0; margin:0 0 16px; border-bottom:1px solid var(--bee-border); }
.bee-pop-tabs li a{ display:inline-block; padding:8px 14px; color:var(--bee-muted); font-weight:600; font-size:.88rem; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; }
.bee-pop-tabs li.selected a,.bee-pop-tabs li a:hover{ color:var(--bee-accent); border-bottom-color:var(--bee-accent); }
.bee-pop .win_total,.bee-pop .win_desc{ color:var(--bee-muted); font-size:.8rem; margin:8px 0; }
/* 쪽지 목록 */
.bee-memo-list{ list-style:none; margin:0 0 14px; padding:0; }
.bee-memo-item{ display:flex; align-items:flex-start; gap:10px; padding:10px 2px; border-bottom:1px solid var(--bee-border); }
.bee-memo-item.read{ opacity:.55; }
.bee-memo-item img{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; }
.bee-memo-body{ flex:1; min-width:0; }
.bee-memo-name{ font-weight:600; font-size:.88rem; color:var(--bee-text); }
.bee-memo-date{ color:var(--bee-muted); font-size:.76rem; margin-left:6px; font-weight:400; }
.bee-memo-preview a{ color:var(--bee-muted); font-size:.85rem; }
.bee-memo-preview a:hover{ color:var(--bee-accent); }
.bee-memo-noread{ color:var(--bee-accent); font-size:.72rem; font-weight:700; }
.bee-memo-empty{ color:var(--bee-muted); text-align:center; padding:1.5rem 0; }
/* 쪽지 보기 */
.bee-memo-view-head{ display:flex; align-items:center; gap:10px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--bee-border); flex-wrap:wrap; }
.bee-memo-view-head img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.bee-memo-view-body{ color:var(--bee-text); font-size:.92rem; line-height:1.7; min-height:80px; }
.bee-pop .form-control{ background:var(--bee-bg); border:1px solid var(--bee-border); color:var(--bee-text); }
.bee-pop .form-control:focus{ background:var(--bee-bg); color:var(--bee-text); border-color:var(--bee-accent); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--bee-accent) 25%, transparent); }
.bee-pop .form-control::placeholder{ color:var(--bee-muted); opacity:.7; }
.bee-pop .frm_info{ color:var(--bee-muted); font-size:.78rem; }

/* 스크린리더 전용 텍스트 숨김 — default.css 미로드 대체(사이트 전역).
   그누보드 get_paging 등이 출력하는 <span class="sound_only">페이지/열린</span> 이
   숨겨지지 않아 페이지 번호 옆에 "1페이지","열린 2 페이지" 처럼 노출되던 문제 해결. */
.sound_only,.msg_sound_only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ===== 그누보드 페이징(.pg) — default.css 미로드 대체(사이트 전역) ===== */
.pg_wrap{ display:flex; justify-content:center; margin:18px 0; }
.pg{ display:inline-flex; flex-wrap:wrap; gap:4px; }
.pg a.pg_page,.pg strong.pg_current,.pg a.pg_start,.pg a.pg_end,.pg a.pg_prev,.pg a.pg_next{
    display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px;
    border:1px solid var(--bee-border); border-radius:var(--bee-radius); color:var(--bee-text); font-size:.85rem; text-decoration:none; background:var(--bee-surface); }
.pg a.pg_page:hover,.pg a.pg_start:hover,.pg a.pg_end:hover,.pg a.pg_prev:hover,.pg a.pg_next:hover{ border-color:var(--bee-accent); color:var(--bee-accent); }
.pg strong.pg_current{ background:var(--bee-accent); border-color:var(--bee-accent); color:var(--bee-on-accent); font-weight:700; }

/* ===== 목록/검색 공통 (new / search / 게시판 추후) ===== */
.bee-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:12px 14px; margin-bottom:18px; }
.bee-filter select,.bee-filter input[type=text]{ height:38px; background:var(--bee-bg); border:1px solid var(--bee-border); color:var(--bee-text); border-radius:var(--bee-radius); padding:0 10px; font-size:.9rem; }
.bee-filter input[type=text]{ flex:1; min-width:140px; }
.bee-filter .btn{ height:38px; }
.bee-filter-hint{ width:100%; color:var(--bee-muted); font-size:.8rem; margin:0; }
.bee-filter .switch_field{ display:inline-flex; gap:10px; align-items:center; color:var(--bee-muted); font-size:.85rem; }
.bee-admin-btns{ display:flex; justify-content:flex-end; margin-bottom:10px; }

/* 목록 테이블 래퍼: overflow 없음(이름 드롭다운 .sv 클리핑 방지 — 데스크톱·모바일 공통).
   모바일은 가로스크롤 대신 비핵심 컬럼을 숨겨 폭을 맞춘다(아래 미디어쿼리). */
.bee-list-wrap{ width:100%; }
/* 목록 테이블 */
.bee-list-table{ width:100%; border-collapse:collapse; font-size:.9rem; color:var(--bee-text); margin-bottom:18px; }
.bee-list-table thead th{ background:var(--bee-surface); color:var(--bee-muted); font-weight:600; font-size:.82rem; padding:10px 8px; border-bottom:1px solid var(--bee-border); text-align:left; white-space:nowrap; }
.bee-list-table tbody td{ padding:11px 8px; border-bottom:1px solid var(--bee-border); vertical-align:middle; }
.bee-list-table tbody tr:hover{ background:color-mix(in srgb, var(--bee-text) 4%, transparent); }
.bee-list-table a{ color:var(--bee-text); }
.bee-list-table a:hover{ color:var(--bee-accent); }
.bee-list-table .td_group a,.bee-list-table .td_board a{ color:var(--bee-muted); font-size:.84rem; }
.bee-list-table .td_name,.bee-list-table .td_date{ color:var(--bee-muted); font-size:.84rem; white-space:nowrap; }
/* 컬럼 너비/정렬: 제목은 넓게 좌측정렬, 나머지(그룹/게시판/이름/일시)는 좁게 가운데 (specificity 0,2,0 > thead th) */
.bee-list-table .td_group{ width:104px; text-align:center; }
.bee-list-table .td_board{ width:118px; text-align:center; }
.bee-list-table .td_subject{ width:auto; }
.bee-list-table th.td_subject{ text-align:center; }   /* 헤더 '제목'은 가운데 */
.bee-list-table td.td_subject{ text-align:left; }     /* 본문 제목은 좌측 */
.bee-list-table .td_name{ width:150px; text-align:center; }
.bee-list-table .td_date{ width:92px; text-align:center; }
.bee-list-table .td_subject a{ font-weight:600; }
/* 모바일: 비핵심 컬럼(그룹·게시판) 숨겨 가로스크롤 없이 fit → 이름 드롭다운 클리핑 방지.
   제목(좌측·flex) + 이름(좁게) + 일시(좁게)만 표시. */
@media (max-width:575.98px){
    .bee-list-table .td_group,
    .bee-list-table .td_board{ display:none; }
    .bee-list-table .td_name{ width:auto; max-width:96px; }
    .bee-list-table .td_name .sv_member,
    .bee-list-table .td_name .sv_guest{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:72px; vertical-align:bottom; }
    .bee-list-table .td_date{ width:62px; font-size:.76rem; }
    .bee-list-table thead th,.bee-list-table tbody td{ padding:9px 5px; }
}
.bee-list-table .bee-cmt-ico{ color:var(--bee-accent); margin-right:3px; }
.bee-list-empty{ text-align:center; color:var(--bee-muted); padding:2rem 0; }

/* 검색 결과 */
.bee-sch-ov{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:14px 16px; margin-bottom:16px; }
.bee-sch-ov h2{ font-size:1.1rem; margin:0 0 8px; color:var(--bee-text); }
.bee-sch-ov h2 strong{ color:var(--bee-accent); }
.bee-sch-ov ul{ display:flex; gap:16px; flex-wrap:wrap; list-style:none; margin:0; padding:0; color:var(--bee-muted); font-size:.85rem; }
.bee-sch-boards{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0 0 16px; }
.bee-sch-boards a{ display:inline-block; padding:6px 12px; border:1px solid var(--bee-border); border-radius:999px; color:var(--bee-muted); font-size:.82rem; text-decoration:none; }
.bee-sch-boards a:hover,.bee-sch-boards a.sch_on{ border-color:var(--bee-accent); color:var(--bee-accent); }
.bee-sch-board-result{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:16px 18px; margin-bottom:16px; }
.bee-sch-board-result > h2{ font-size:1.05rem; margin:0 0 6px; color:var(--bee-text); padding-bottom:10px; border-bottom:1px solid var(--bee-border); }
.bee-sch-board-result > h2 a{ color:var(--bee-text); }
.bee-sch-more{ font-size:.82rem; color:var(--bee-accent); margin-left:8px; text-decoration:none; font-weight:600; }
.bee-sch-list{ list-style:none; margin:0; padding:0; }
.bee-sch-item{ padding:12px 0; border-bottom:1px solid var(--bee-border); }
.bee-sch-item:last-child{ border-bottom:0; padding-bottom:0; }
.bee-sch-title{ color:var(--bee-text); font-weight:600; text-decoration:none; }
.bee-sch-title:hover{ color:var(--bee-accent); }
.bee-sch-item p{ color:var(--bee-muted); font-size:.85rem; margin:6px 0; line-height:1.6; }
.bee-sch-meta{ color:var(--bee-muted); font-size:.8rem; display:flex; gap:10px; align-items:center; }
.bee-sch-empty{ text-align:center; color:var(--bee-muted); padding:2rem 0; }

/* ===== 내용(content) 페이지 (회사소개/약관/개인정보 등) — 본문은 관리자 HTML ===== */
.bee-content-title{ font-size:1.6rem; font-weight:800; color:var(--bee-text); margin:0 0 18px; padding-bottom:14px; border-bottom:2px solid var(--bee-border); }
.bee-content-body{ color:var(--bee-text); font-size:.95rem; line-height:1.8; }
.bee-content-body h1,.bee-content-body h2,.bee-content-body h3,.bee-content-body h4,.bee-content-body h5{ color:var(--bee-text); font-weight:700; margin:1.4em 0 .6em; line-height:1.4; }
.bee-content-body h2{ font-size:1.25rem; } .bee-content-body h3{ font-size:1.1rem; }
.bee-content-body p{ margin:0 0 1em; }
.bee-content-body ul,.bee-content-body ol{ margin:0 0 1em; padding-left:1.4em; }
.bee-content-body li{ margin:.3em 0; }
.bee-content-body a{ color:var(--bee-accent); }
.bee-content-body a:hover{ text-decoration:underline; }
.bee-content-body img{ max-width:100%; height:auto; }
.bee-content-body strong,.bee-content-body b{ color:var(--bee-text); font-weight:700; }
.bee-content-body table{ width:100%; border-collapse:collapse; margin:0 0 1em; font-size:.9rem; }
.bee-content-body th,.bee-content-body td{ border:1px solid var(--bee-border); padding:8px 10px; text-align:left; }
.bee-content-body th{ background:var(--bee-surface); color:var(--bee-muted); white-space:nowrap; }
.bee-content-body hr{ border:0; border-top:1px solid var(--bee-border); margin:1.5em 0; }
.ctt_admin{ text-align:right; margin-bottom:8px; }
.ctt_admin .btn_admin{ color:var(--bee-muted); }
.ctt_admin .btn_admin:hover{ color:var(--bee-accent); }
.ctt_img{ margin:0 0 16px; }
.ctt_img img{ max-width:100%; height:auto; border-radius:var(--bee-radius); }

/* ===== get_sideview 이름 드롭다운(.sv) — default.css 미로드 대체, 사이트 전역 =====
   common.js 가 이름 클릭 시 .sv 에 .sv_on 을 토글 → 평소엔 숨기고 메뉴는 팝오버로 표시 */
.sv_wrap{ position:relative; display:inline-flex; align-items:center; }
.sv_member,.sv_guest{ color:inherit; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.sv_member:hover,.sv_guest:hover{ color:var(--bee-accent); }
/* 우리 사이트는 회원 프로필 이미지를 사용하지 않음 → sideview/프로필 이미지 전역 숨김(등급 아이콘으로 대체) */
.profile_img,img[alt="profile_image"],.sv_member > img,.sv_guest > img{ display:none !important; }
.sv{ display:none; position:absolute; left:0; top:100%; z-index:1000; min-width:128px; margin-top:4px; padding:6px;
     background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); box-shadow:0 8px 22px rgba(0,0,0,.3); }
.sv.sv_on{ display:block; }
.sv a{ display:block; padding:6px 10px; color:var(--bee-text); font-size:.82rem; text-decoration:none; border-radius:6px; white-space:nowrap; }
.sv a:hover{ background:color-mix(in srgb, var(--bee-accent) 14%, transparent); color:var(--bee-accent); }

/* ===== 사이드바 로그인 위젯 (outlogin 방식: 아이디/암호 직접 입력) ===== */
.bee-side-login .form-control{ background:var(--bee-bg); border:1px solid var(--bee-border); color:var(--bee-text); }
.bee-side-login .form-control:focus{ background:var(--bee-bg); color:var(--bee-text); border-color:var(--bee-accent); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--bee-accent) 22%, transparent); }
.bee-side-login .form-control::placeholder{ color:var(--bee-muted); opacity:.7; }
.bee-side-login-opt{ margin-top:7px; }
.bee-side-login-opt .form-check-label{ color:var(--bee-muted); font-size:.8rem; }
.bee-side-login-opt .form-check-input:checked{ background-color:var(--bee-accent); border-color:var(--bee-accent); }
.bee-side-login-links{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.bee-side-login-links a{ display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 6px; border:1px solid var(--bee-border); border-radius:var(--bee-radius); background:transparent; color:var(--bee-muted); font-size:.78rem; font-weight:600; text-decoration:none; text-align:center; transition:border-color .15s, color .15s; }
.bee-side-login-links a:hover{ border-color:var(--bee-accent); color:var(--bee-accent); background:color-mix(in srgb, var(--bee-accent) 8%, transparent); }
.bee-side-login-links a .bi{ font-size:.95em; }
/* 안읽은 쪽지 배지 */
.bee-memo-link{ display:inline-flex; align-items:center; gap:5px; }
.bee-memo-badge{ display:inline-block; min-width:17px; padding:0 5px; background:var(--bee-accent); color:var(--bee-on-accent); border-radius:999px; font-size:.7rem; font-weight:800; line-height:17px; text-align:center; }
.bee-side-memo{ display:flex; align-items:center; gap:6px; margin-top:10px; padding:8px 10px; border:1px solid var(--bee-border); border-radius:var(--bee-radius); color:var(--bee-text); font-size:.85rem; text-decoration:none; }
.bee-side-memo:hover{ border-color:var(--bee-accent); color:var(--bee-accent); }
.bee-side-memo.has-new{ border-color:var(--bee-accent); }

/* ===================================================================
   게시판 스킨 (board) — 공유 베이스(view/write/comment) + 목록 변형 공용
   theme/beetv/skin/board/{beetv,beetv_gallery,beetv_webzine,beetv_live}
   =================================================================== */

/* 보드 공용 버튼(라인/고스트). accent/outline 은 상단에 정의됨 */
.bee-btn-line{ background:transparent; border:1px solid var(--bee-border); color:var(--bee-text); font-weight:600; border-radius:var(--bee-radius); }
.bee-btn-line:hover{ border-color:var(--bee-accent); color:var(--bee-accent); }
.bee-btn-ghost{ background:transparent; border:0; color:var(--bee-muted); padding:2px 6px; border-radius:6px; }
.bee-btn-ghost:hover{ background:color-mix(in srgb, var(--bee-text) 8%, transparent); color:var(--bee-text); }

/* ---- 목록 상단/하단 바 ---- */
.bee-board{ max-width:100%; }
.bee-board-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.bee-board-total{ color:var(--bee-muted); font-size:.88rem; }
.bee-board-total strong{ color:var(--bee-text); }
.bee-board-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.bee-board-cate{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; list-style:none; padding:0; margin-left:0; }
/* 코어(bbs/list.php)가 <ul> 없이 <li>만 출력 → default.css 미로드라 li 기본 마커(·)가 카테고리 앞에 보임. 마커 제거 */
.bee-board-cate li{ list-style:none; }
.bee-board-cate li::marker{ content:""; }
.bee-board-cate a{ display:inline-block; padding:5px 13px; border:1px solid var(--bee-border); border-radius:999px; color:var(--bee-muted); font-size:.84rem; text-decoration:none; }
.bee-board-cate a:hover,.bee-board-cate a.on{ border-color:var(--bee-accent); color:var(--bee-accent); }
/* 코어가 활성 카테고리에 id="bo_cate_on" 부여 → 강조색 채움으로 표시 */
.bee-board-cate a#bo_cate_on{ background:var(--bee-accent); border-color:var(--bee-accent); color:var(--bee-on-accent); }
.bee-board-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
.bee-board-adm{ display:flex; gap:6px; flex-wrap:wrap; }
.bee-board-sch{ margin-top:14px; }
.bee-board-sch .bee-filter{ margin-bottom:0; }

/* ---- 목록 테이블 컬럼(.bee-list-table 베이스 위) ---- */
.bee-list-table .bee-col-chk{ width:36px; text-align:center; }
.bee-list-table .bee-col-num{ width:64px; text-align:center; color:var(--bee-muted); font-size:.84rem; }
.bee-list-table th.bee-col-subject{ text-align:left; }
.bee-list-table .bee-col-subject{ width:auto; }
.bee-list-table .bee-col-name{ width:150px; text-align:center; color:var(--bee-muted); font-size:.84rem; white-space:nowrap; }
.bee-list-table .bee-col-date{ width:92px; text-align:center; color:var(--bee-muted); font-size:.82rem; white-space:nowrap; }
.bee-list-table .bee-col-meta{ width:64px; text-align:center; color:var(--bee-muted); font-size:.82rem; white-space:nowrap; }
.bee-subject-link{ font-weight:600; color:var(--bee-text); text-decoration:none; }
.bee-subject-link:hover{ color:var(--bee-accent); }
.bee-cate-link{ color:var(--bee-muted) !important; font-size:.8rem; margin-right:5px; }
.bee-cmt-num{ display:inline-block; margin-left:5px; color:var(--bee-accent); font-weight:700; font-size:.82rem; }
.bee-new-badge{ display:inline-block; margin-left:5px; padding:0 5px; background:var(--bee-accent); color:var(--bee-on-accent); border-radius:4px; font-size:.66rem; font-weight:800; vertical-align:middle; }
.bee-notice-badge{ display:inline-block; padding:2px 8px; background:color-mix(in srgb, var(--bee-accent) 18%, transparent); color:var(--bee-accent); border-radius:5px; font-size:.74rem; font-weight:700; }
.bee-current-badge{ display:inline-block; padding:2px 7px; background:var(--bee-muted); color:#fff; border-radius:5px; font-size:.72rem; }
.bee-row-notice td{ background:color-mix(in srgb, var(--bee-accent) 6%, transparent); }
.bee-row-notice .bee-subject-link{ font-weight:700; }
.bee-row-current .bee-subject-link{ color:var(--bee-accent); }
.bee-list-empty{ text-align:center; color:var(--bee-muted); padding:48px 8px !important; }

/* ---- 글보기(view) ---- */
.bee-view{ max-width:100%; }
.bee-view-head{ padding-bottom:14px; border-bottom:1px solid var(--bee-border); margin-bottom:14px; }
.bee-view-title{ font-size:1.45rem; font-weight:800; color:var(--bee-text); line-height:1.35; margin:0 0 10px; }
.bee-view-cate{ background:color-mix(in srgb, var(--bee-accent) 18%, transparent); color:var(--bee-accent); font-size:.78rem; font-weight:700; vertical-align:middle; }
.bee-view-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--bee-muted); font-size:.85rem; }
.bee-view-author{ color:var(--bee-text); font-weight:600; }
.bee-view-meta a{ color:var(--bee-muted); text-decoration:none; }
.bee-view-meta a:hover{ color:var(--bee-accent); }
.bee-view-tools{ display:flex; gap:6px; justify-content:flex-end; margin-bottom:16px; flex-wrap:wrap; }
.bee-view-tools-bottom{ margin-top:16px; margin-bottom:0; }   /* 이전·다음글과 댓글 사이 하단 버튼 바 */
.bee-view-share{ display:flex; gap:6px; justify-content:flex-end; margin-bottom:14px; flex-wrap:wrap; }
.bee-view-img{ margin-bottom:16px; text-align:center; }
.bee-view-img img{ max-width:100%; height:auto; border-radius:var(--bee-radius); }
.bee-view-body{ min-height:120px; color:var(--bee-text); line-height:1.8; font-size:.97rem; word-break:break-word; padding:6px 2px 22px; }
.bee-view-body img{ max-width:100%; height:auto; }
/* BEESOFT 연동 뉴스 본문: 이미지를 블록(자기 줄)+상하 여백으로 → "사진 / 텍스트" 분리.
   .bee-news-body 로 스코프해 일반/커뮤니티 글의 인라인 이미지·이모티콘엔 영향 없음. */
.bee-view-body .bee-news-body{ line-height:1.9; }
.bee-view-body .bee-news-body img{ display:block; max-width:100%; height:auto; margin:6px auto 16px; border-radius:8px; }
.bee-view-body h1,.bee-view-body h2,.bee-view-body h3,.bee-view-body h4{ color:var(--bee-text); margin:1.1em 0 .5em; font-weight:700; }
.bee-view-body p{ margin:0 0 .4em; }   /* 문단 여백 정규화(에디터 무관) — Quill/붙여넣기 <p> 줄간격 조임 */
/* Quill 정렬(getSemanticHTML 은 text-align 인라인으로 출력하지만 클래스 폴백 대비) */
.bee-view-body .ql-align-center{ text-align:center; }
.bee-view-body .ql-align-right{ text-align:right; }
.bee-view-body .ql-align-justify{ text-align:justify; }
.bee-view-body a{ color:var(--bee-accent); }
/* Quill 글쓰기 에디터 */
.bee-quill-wrap .ql-toolbar.ql-snow,.bee-quill-wrap .ql-container.ql-snow{ border-color:var(--bee-border); }
.bee-quill-wrap .ql-container.ql-snow{ border-bottom-left-radius:var(--bee-radius); border-bottom-right-radius:var(--bee-radius); }
.bee-quill-wrap .ql-toolbar.ql-snow{ border-top-left-radius:var(--bee-radius); border-top-right-radius:var(--bee-radius); background:var(--bee-surface); }
.bee-quill-editor .ql-editor{ min-height:320px; font-size:.97rem; line-height:1.8; color:var(--bee-text); }
.bee-quill-editor .ql-editor p{ margin:0 0 .4em; }   /* 에디터 미리보기도 동일 줄간격 */
.bee-quill-editor .ql-editor.ql-blank::before{ color:var(--bee-muted); font-style:normal; }
/* ★ 다크 테마 대응: snow 아이콘/글자색(#444 하드코딩)을 테마 변수로.
   quill.snow.css 가 body 에 늦게 로드돼 동급 규칙을 이기므로 !important + 툴바 직접 스코프로 확실히 덮어쓴다. */
.ql-toolbar.ql-snow .ql-stroke{ stroke:var(--bee-text)!important; }
.ql-toolbar.ql-snow .ql-fill,.ql-toolbar.ql-snow .ql-stroke.ql-fill{ fill:var(--bee-text)!important; }
.ql-toolbar.ql-snow .ql-picker{ color:var(--bee-text)!important; }
.ql-toolbar.ql-snow button{ color:var(--bee-text); }
/* hover/활성/선택 = accent 강조 */
.ql-toolbar.ql-snow button:hover .ql-stroke,.ql-toolbar.ql-snow button:focus .ql-stroke,.ql-toolbar.ql-snow button.ql-active .ql-stroke,.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,.ql-toolbar.ql-snow .ql-picker-item:hover .ql-stroke,.ql-toolbar.ql-snow .ql-picker-item.ql-selected .ql-stroke{ stroke:var(--bee-accent)!important; }
.ql-toolbar.ql-snow button:hover .ql-fill,.ql-toolbar.ql-snow button:focus .ql-fill,.ql-toolbar.ql-snow button.ql-active .ql-fill,.ql-toolbar.ql-snow .ql-picker-item:hover .ql-fill,.ql-toolbar.ql-snow .ql-picker-item.ql-selected .ql-fill{ fill:var(--bee-accent)!important; }
.ql-toolbar.ql-snow button:hover,.ql-toolbar.ql-snow button:focus,.ql-toolbar.ql-snow button.ql-active,.ql-toolbar.ql-snow .ql-picker-label:hover,.ql-toolbar.ql-snow .ql-picker-label.ql-active,.ql-toolbar.ql-snow .ql-picker-item:hover,.ql-toolbar.ql-snow .ql-picker-item.ql-selected{ color:var(--bee-accent)!important; }
/* 드롭다운 패널(글머리/정렬 등) + 색상 피커 + 링크/테이블 툴팁 다크 대응 */
.ql-snow .ql-picker-options{ background-color:var(--bee-surface)!important; border-color:var(--bee-border)!important; }
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{ border-color:var(--bee-border)!important; }
.ql-snow .ql-tooltip{ background:var(--bee-surface)!important; color:var(--bee-text)!important; border-color:var(--bee-border)!important; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.ql-snow .ql-tooltip input[type=text]{ background:var(--bee-bg,#fff)!important; color:var(--bee-text)!important; border-color:var(--bee-border)!important; }
.ql-snow .ql-tooltip a{ color:var(--bee-accent)!important; }
/* 이미지 클릭 → 링크 편집 팝오버 */
.bee-imglink-pop{ position:absolute; z-index:1090; display:none; gap:6px; align-items:center; padding:8px; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.bee-imglink-pop input.bee-imglink-url{ width:240px; padding:6px 8px; border:1px solid var(--bee-border); border-radius:6px; background:var(--bee-bg,#fff); color:var(--bee-text); font-size:13px; }
.bee-imglink-pop button{ padding:6px 12px; border:none; border-radius:6px; font-size:12.5px; cursor:pointer; }
.bee-imglink-pop .bee-imglink-apply{ background:var(--bee-accent); color:var(--bee-on-accent); }
.bee-imglink-pop .bee-imglink-clear{ background:transparent; color:var(--bee-muted); border:1px solid var(--bee-border); }
/* 에디터 내 이미지: 클릭 가능 표시 */
.bee-quill-editor .ql-editor img{ cursor:pointer; max-width:100%; }
.bee-imglink-pop .bee-imglink-blank{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--bee-muted); white-space:nowrap; cursor:pointer; }
.bee-imglink-pop .bee-imglink-blank input{ margin:0; }
/* ── quill-table-better 다크 대응(하드코딩 #fff/#ccced1/#f0f0f0 → 테마 변수) ── */
.bee-quill-editor .ql-editor table td,.bee-quill-editor .ql-editor table th{ color:var(--bee-text); border-color:var(--bee-border); }
.ql-table-menus-container,.ql-table-border-shadow,.ql-table-select-container,.ql-table-dropdown-list,.ql-table-dropdown-properties-list,.ql-table-properties-form,.ql-table-color-container{ background:var(--bee-surface)!important; color:var(--bee-text)!important; border-color:var(--bee-border)!important; box-shadow:0 2px 10px rgba(0,0,0,.3)!important; }
.ql-table-dropdown:hover,.ql-table-dropdown-list li:hover,.ql-table-dropdown-properties-list li:hover,.ql-table-properties-form .properties-form-row .ql-table-check-container .ql-table-tooltip-hover:hover{ background:color-mix(in srgb, var(--bee-text) 14%, transparent)!important; }
.ql-table-input,.ql-table-properties-form .property-input{ background:var(--bee-bg,#fff)!important; color:var(--bee-text)!important; border-color:var(--bee-border)!important; }
/* 연산 메뉴 + 툴바 테이블 버튼 아이콘 색(자체 아이콘이 이겨도 테마색으로) */
.ql-table-menus-container svg .ql-stroke,.ql-toolbar.ql-snow .ql-table-better svg .ql-stroke,.ql-toolbar.ql-snow .ql-table-better .ql-stroke{ stroke:var(--bee-text)!important; }
.ql-table-menus-container svg .ql-fill,.ql-toolbar.ql-snow .ql-table-better svg .ql-fill,.ql-toolbar.ql-snow .ql-table-better .ql-fill{ fill:var(--bee-text)!important; }
.ql-table-menus-container svg path:not([fill=none]){ fill:var(--bee-text); }
/* 툴바 테이블 버튼: table-better 자체 아이콘이 raw <path stroke="#333">(ql-stroke 클래스 없음) → 직접 stroke 덮어쓰기 */
.ql-toolbar.ql-snow .ql-table-better{ color:var(--bee-text); }
.ql-toolbar.ql-snow .ql-table-better svg path,.ql-toolbar.ql-snow .ql-table-better svg line,.ql-toolbar.ql-snow .ql-table-better svg rect,.ql-toolbar.ql-snow .ql-table-better svg polyline{ stroke:var(--bee-text)!important; }
.ql-toolbar.ql-snow .ql-table-better svg path[fill]:not([fill=none]){ fill:var(--bee-text)!important; }
/* 셀 선택 시 무관 버튼에 붙는 비활성 클래스: 밝은회색(#f2f2f2)/#999 하드코딩 → 테마 dimmed */
.ql-toolbar.ql-snow button.ql-table-button-disabled,.ql-toolbar.ql-snow .ql-table-disabled{ background:transparent!important; opacity:.35; }
.ql-toolbar.ql-snow button.ql-table-button-disabled svg .ql-stroke{ stroke:var(--bee-text)!important; }
.ql-toolbar.ql-snow button.ql-table-button-disabled svg .ql-fill{ fill:var(--bee-text)!important; }
/* 활성(checked) 테이블 버튼: #f0f7ff/#2977ff → accent 틴트 */
.ql-toolbar.ql-snow .ql-table-btns-checked{ background:color-mix(in srgb, var(--bee-accent) 20%, transparent)!important; }
.ql-toolbar.ql-snow .ql-table-btns-checked>svg path,.ql-toolbar.ql-snow .ql-table-btns-checked>svg .ql-stroke{ stroke:var(--bee-accent)!important; }
/* ── HTML 소스 보기 ── */
.bee-quill-wrap .bee-quill-source{ display:none; width:100%; min-height:320px; box-sizing:border-box; padding:12px 14px; border:1px solid var(--bee-border); border-top:none; border-radius:0 0 var(--bee-radius) var(--bee-radius); background:var(--bee-bg,#fff); color:var(--bee-text); font-family:Consolas,Menlo,Monaco,monospace; font-size:13px; line-height:1.6; resize:vertical; outline:none; }
.bee-quill-wrap.bee-quill-source-on .ql-toolbar button:not(.ql-source),.bee-quill-wrap.bee-quill-source-on .ql-toolbar .ql-picker{ opacity:.4; pointer-events:none; }
.bee-view-body ul,.bee-view-body ol{ padding-left:1.5em; margin:0 0 1em; }
.bee-view-body blockquote{ border-left:3px solid var(--bee-accent); margin:1em 0; padding:.4em 1em; color:var(--bee-muted); background:color-mix(in srgb, var(--bee-surface) 60%, transparent); }
.bee-view-body table{ border-collapse:collapse; max-width:100%; }
.bee-view-body td,.bee-view-body th{ border:1px solid var(--bee-border); padding:6px 10px; }
.bee-view-sign{ margin-top:10px; padding-top:12px; border-top:1px dashed var(--bee-border); color:var(--bee-muted); font-size:.85rem; }
.bee-view-act{ display:flex; gap:10px; justify-content:center; margin:18px 0 6px; }
.bee-act-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 20px; border:1px solid var(--bee-border); border-radius:999px; background:var(--bee-surface); color:var(--bee-text); text-decoration:none; font-size:.88rem; }
a.bee-act-good:hover{ border-color:var(--bee-accent); color:var(--bee-accent); }
a.bee-act-nogood:hover{ border-color:var(--bee-accent-2); color:var(--bee-accent-2); }
.bee-act-btn strong{ color:var(--bee-accent); }
.bee-view-files,.bee-view-links{ margin-top:16px; padding:14px 16px; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); }
.bee-view-sec-tit{ font-size:.92rem; font-weight:700; color:var(--bee-text); margin:0 0 8px; }
.bee-view-files ul,.bee-view-links ul{ list-style:none; margin:0; padding:0; }
.bee-view-files li,.bee-view-links li{ padding:6px 0; border-top:1px solid var(--bee-border); }
.bee-view-files li:first-child,.bee-view-links li:first-child{ border-top:0; }
.bee-view-files a,.bee-view-links a{ color:var(--bee-text); text-decoration:none; }
.bee-view-files a:hover,.bee-view-links a:hover{ color:var(--bee-accent); }
.bee-view-file-cnt{ display:block; color:var(--bee-muted); font-size:.78rem; margin-top:2px; }
.bee-view-nb{ list-style:none; margin:18px 0 0; padding:0; border:1px solid var(--bee-border); border-radius:var(--bee-radius); overflow:hidden; }
.bee-view-nb li{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--bee-border); }
.bee-view-nb li:last-child{ border-bottom:0; }
.bee-view-nb .nb_tit{ flex:0 0 auto; color:var(--bee-muted); font-size:.82rem; font-weight:600; }
.bee-view-nb a{ flex:1; color:var(--bee-text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bee-view-nb a:hover{ color:var(--bee-accent); }
.bee-view-nb .nb_date{ flex:0 0 auto; color:var(--bee-muted); font-size:.78rem; }

/* ---- 글쓰기(write) ---- */
.bee-write{ max-width:100%; }
.bee-write-row{ margin-bottom:12px; }
.bee-write-label{ display:block; color:var(--bee-muted); font-size:.85rem; margin-bottom:5px; }
.bee-req{ color:var(--bee-accent-2); }
.bee-write-opt{ display:flex; flex-wrap:wrap; gap:14px; padding:10px 0; }
.bee-write-hint{ color:var(--bee-muted); font-size:.82rem; margin:6px 0; }
.bee-write .form-control,.bee-write .form-select,.bee-write textarea{ background:var(--bee-bg); border:1px solid var(--bee-border); color:var(--bee-text); }
.bee-write .form-control:focus,.bee-write .form-select:focus,.bee-write textarea:focus{ background:var(--bee-bg); color:var(--bee-text); border-color:var(--bee-accent); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--bee-accent) 20%, transparent); }
.bee-write .form-control::placeholder,.bee-write textarea::placeholder{ color:var(--bee-muted); opacity:.7; }
.bee-write .form-check-input:checked{ background-color:var(--bee-accent); border-color:var(--bee-accent); }
.bee-write .input-group-text{ background:var(--bee-surface); border-color:var(--bee-border); color:var(--bee-muted); }
.bee-write-btns{ display:flex; justify-content:center; gap:10px; margin-top:18px; }
#autosave_pop{ display:none; position:relative; margin-top:6px; padding:12px; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); }
#autosave_pop ul{ list-style:none; margin:8px 0; padding:0; }

/* ---- 댓글(comment) ---- */
/* ⚠ 섹션 래퍼는 .bee-comment (바 .bee-cmt 는 index 댓글수 뱃지로 선점됨 — 충돌 방지) */
.bee-comment{ margin-top:26px; }
.bee-cmt-tit{ font-size:1.02rem; font-weight:700; color:var(--bee-text); margin:0 0 12px; padding-bottom:10px; border-bottom:2px solid var(--bee-border); }
.bee-cmt-tit .bi{ color:var(--bee-accent); }
.bee-cmt-cnt{ color:var(--bee-accent); }
.bee-cmt-item{ position:relative; padding:13px 2px; border-bottom:1px solid var(--bee-border); }
.bee-cmt-reply{ border-left:2px solid var(--bee-border); padding-left:12px; background:color-mix(in srgb, var(--bee-surface) 40%, transparent); }
.bee-cmt-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.bee-cmt-author{ color:var(--bee-text); font-weight:600; font-size:.9rem; }
.bee-cmt-ip{ color:var(--bee-muted); font-size:.78rem; }
.bee-cmt-date{ color:var(--bee-muted); font-size:.78rem; }
.bee-cmt-opt{ margin-left:auto; }
.bee-cmt-body{ color:var(--bee-text); font-size:.92rem; line-height:1.7; word-break:break-word; }
.bee-cmt-body a{ color:var(--bee-accent); }
.bee-cmt-empty{ color:var(--bee-muted); text-align:center; padding:28px 0; }
/* 댓글쓰기: 박스 없이 목록 헤더(.bee-cmt-tit)처럼 제목+라인 → textarea → 비밀글/등록 */
.bee-cmt-write{ margin-top:22px; }
.bee-cmt-write .form-control,.bee-cmt-write textarea{ background:var(--bee-bg); border:1px solid var(--bee-border); color:var(--bee-text); }
.bee-cmt-write .form-control:focus,.bee-cmt-write textarea:focus{ background:var(--bee-bg); color:var(--bee-text); border-color:var(--bee-accent); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--bee-accent) 20%, transparent); }
.bee-cmt-write .form-control::placeholder,.bee-cmt-write textarea::placeholder{ color:var(--bee-muted); opacity:.7; }
.bee-cmt-write-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; }
.bee-cmt-write-info{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.bee-cmt-write-info .form-control{ max-width:160px; }
.bee-cmt-write-btns{ display:flex; align-items:center; gap:12px; }
.bee-cmt-write .form-check-input:checked{ background-color:var(--bee-accent); border-color:var(--bee-accent); }
.bee-cmt-write .form-check-label{ color:var(--bee-muted); font-size:.85rem; }

/* ---- 갤러리 카드형(beetv_gallery) ---- */
.bee-gall-allchk{ margin-bottom:10px; color:var(--bee-muted); font-size:.85rem; }
.bee-gall{ list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:repeat(var(--bee-gall-cols,4), 1fr); gap:16px; }
.bee-gall-li{ min-width:0; }
.bee-gall-card{ position:relative; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); overflow:hidden; height:100%; transition:transform .15s, border-color .15s; }
.bee-gall-card:hover{ transform:translateY(-3px); border-color:var(--bee-accent); }
.bee-gall-li.on .bee-gall-card{ border-color:var(--bee-accent); }
.bee-gall-chk{ position:absolute; top:8px; left:8px; z-index:3; }
.bee-gall-thumb{ position:relative; display:block; width:100%; height:0; background:var(--bee-bg); overflow:hidden; }
.bee-gall-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.bee-gall-card:hover .bee-gall-thumb img{ transform:scale(1.05); }
.bee-gall-noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--bee-muted); font-size:2rem; }
.bee-gall-notice{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--bee-accent) 18%, transparent); color:var(--bee-accent); font-weight:800; font-size:1.1rem; }
.bee-gall-cmt{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.6); color:#fff; font-size:.74rem; padding:2px 8px; border-radius:999px; }
.bee-gall-info{ padding:11px 12px 13px; }
.bee-gall-tit{ display:block; color:var(--bee-text); font-weight:600; font-size:.92rem; line-height:1.4; text-decoration:none; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bee-gall-tit:hover{ color:var(--bee-accent); }
.bee-gall-excerpt{ color:var(--bee-muted); font-size:.8rem; line-height:1.5; margin:6px 0 9px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bee-gall-meta{ display:flex; flex-direction:column; gap:3px; }
.bee-gall-name{ color:var(--bee-text); font-size:.8rem; font-weight:600; }
.bee-gall-sub{ color:var(--bee-muted); font-size:.74rem; }
.bee-gall-empty{ grid-column:1 / -1; text-align:center; color:var(--bee-muted); padding:48px 8px; }

/* ---- 웹진형(beetv_webzine) ---- */
.bee-wz{ list-style:none; margin:0 0 18px; padding:0; }
.bee-wz-li{ display:flex; gap:16px; padding:16px 4px; border-bottom:1px solid var(--bee-border); }
.bee-wz-li.on{ background:color-mix(in srgb, var(--bee-accent) 6%, transparent); }
.bee-wz-notice{ background:color-mix(in srgb, var(--bee-accent) 7%, transparent); }
.bee-wz-chk{ flex:0 0 auto; padding-top:2px; }
.bee-wz-thumb{ flex:0 0 200px; position:relative; width:200px; height:130px; border-radius:var(--bee-radius); overflow:hidden; background:var(--bee-bg); border:1px solid var(--bee-border); }
.bee-wz-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.bee-wz-li:hover .bee-wz-thumb img{ transform:scale(1.05); }
.bee-wz-noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--bee-muted); font-size:2rem; }
.bee-wz-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.bee-wz-tit{ display:block; color:var(--bee-text); font-weight:700; font-size:1.05rem; line-height:1.4; text-decoration:none; }
.bee-wz-tit:hover{ color:var(--bee-accent); }
.bee-wz-excerpt{ flex:1; color:var(--bee-muted); font-size:.86rem; line-height:1.6; margin:8px 0 10px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bee-wz-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.bee-wz-name{ color:var(--bee-text); font-size:.84rem; font-weight:600; }
.bee-wz-sub{ color:var(--bee-muted); font-size:.8rem; }
.bee-wz-empty{ text-align:center; color:var(--bee-muted); padding:48px 8px; }
@media (max-width:575.98px){
    .bee-wz-li{ gap:11px; padding:13px 2px; }
    .bee-wz-thumb{ flex-basis:110px; width:110px; height:80px; }
    .bee-wz-tit{ font-size:.94rem; }
    .bee-wz-excerpt{ -webkit-line-clamp:2; font-size:.8rem; margin:5px 0 7px; }
}

/* ---- 이벤트(beetv_event) — 갤러리 기반 + 상태 오버레이 ---- */
.bee-ev-overlay{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; }
.bee-ev-overlay.ended{ background:rgba(0,0,0,.55); }
.bee-ev-overlay.upcoming{ background:rgba(0,0,0,.3); }
.bee-ev-label{ padding:7px 18px; border:2px solid #fff; border-radius:8px; background:rgba(0,0,0,.32); color:#fff; font-weight:800; font-size:1rem; letter-spacing:1px; }
.bee-ev-overlay.ended .bee-ev-label{ border-color:#36d07f; }     /* 종료: 초록 테두리(목업) */
.bee-ev-overlay.upcoming .bee-ev-label{ border-color:var(--bee-accent); }
.bee-ev-dim-ended img{ filter:brightness(.45) grayscale(.15); }
.bee-ev-dim-soon img{ filter:brightness(.72); }
.bee-event-board .bee-gall-cmt{ z-index:3; }
/* 기간 라인 + 상태 칩 */
.bee-ev-period{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--bee-muted); font-size:.76rem; margin:6px 0 8px; }
.bee-ev-period .bi{ color:var(--bee-accent); }
.bee-ev-chip{ padding:1px 8px; border-radius:999px; font-size:.7rem; font-weight:700; }
.bee-ev-chip.ongoing{ background:color-mix(in srgb, #36d07f 22%, transparent); color:#36d07f; }
.bee-ev-chip.upcoming{ background:color-mix(in srgb, var(--bee-accent) 20%, transparent); color:var(--bee-accent); }
.bee-ev-chip.ended{ background:color-mix(in srgb, var(--bee-muted) 22%, transparent); color:var(--bee-muted); }
/* 글쓰기 기간 필드 */
.bee-event-fields{ border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:14px 16px 8px; margin-bottom:14px; background:color-mix(in srgb, var(--bee-surface) 50%, transparent); }
.bee-event-fields legend{ float:none; width:auto; font-size:.92rem; font-weight:700; color:var(--bee-accent); padding:0 6px; margin:0 0 6px; }
.bee-event-fields legend .bi{ margin-right:4px; }
.bee-event-fields .bee-write-label small{ color:var(--bee-muted); font-weight:400; }
.bee-event-write input[type=date]{ color-scheme:dark; }

/* ---- 중계/영상형(beetv_live) ---- */
.bee-live{ list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.bee-live-li{ min-width:0; }
.bee-live-card{ position:relative; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); overflow:hidden; height:100%; transition:transform .15s, border-color .15s; }
.bee-live-card:hover{ transform:translateY(-3px); border-color:var(--bee-accent); }
.bee-live-li.on .bee-live-card{ border-color:var(--bee-accent); }
.bee-live-chk{ position:absolute; top:8px; left:8px; z-index:3; }
.bee-live-thumb{ position:relative; display:block; width:100%; height:0; background:#000; overflow:hidden; }
.bee-live-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; transition:opacity .2s, transform .25s; }
.bee-live-card:hover .bee-live-thumb img{ opacity:1; transform:scale(1.04); }
.bee-live-noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--bee-muted); font-size:2.4rem; background:linear-gradient(135deg, var(--bee-surface), var(--bee-bg)); }
.bee-live-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:3rem; opacity:.85; text-shadow:0 2px 12px rgba(0,0,0,.5); transition:transform .15s, opacity .15s; pointer-events:none; }
.bee-live-card:hover .bee-live-play{ transform:scale(1.12); opacity:1; color:var(--bee-accent); }
.bee-live-badge{ position:absolute; top:9px; left:9px; display:inline-flex; align-items:center; gap:5px; background:#e30613; color:#fff; font-size:.72rem; font-weight:800; padding:3px 9px; border-radius:5px; letter-spacing:.5px; }
.bee-live-dot{ width:7px; height:7px; border-radius:50%; background:#fff; animation:bee-live-blink 1.1s infinite; }
@keyframes bee-live-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.bee-live-league{ position:absolute; top:9px; right:9px; background:rgba(0,0,0,.6); color:#fff; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:5px; }
.bee-live-info{ padding:12px 13px 13px; }
.bee-live-match{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.bee-live-team{ color:var(--bee-text); font-weight:700; font-size:.92rem; flex:1; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bee-live-vs{ flex:0 0 auto; color:var(--bee-accent); font-weight:800; font-size:.72rem; padding:2px 7px; border:1px solid var(--bee-border); border-radius:4px; }
.bee-live-tit{ display:block; color:var(--bee-text); font-weight:600; font-size:.9rem; line-height:1.4; text-decoration:none; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bee-live-tit:hover{ color:var(--bee-accent); }
.bee-live-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:8px; }
.bee-live-when{ color:var(--bee-accent); font-size:.78rem; font-weight:600; }
.bee-live-sub{ color:var(--bee-muted); font-size:.76rem; }
.bee-live-empty{ grid-column:1 / -1; text-align:center; color:var(--bee-muted); padding:48px 8px; }

/* 중계 글보기(view) */
.bee-live-player{ position:relative; width:100%; padding-bottom:56.25%; background:#000; border-radius:var(--bee-radius); overflow:hidden; margin-bottom:18px; }
.bee-live-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* 하이라이트(beetv_highlight) — 갤러리 카드 목록에 ▶ 재생 오버레이(영상 시각 신호) */
.bee-hl-wrap .bee-gall-thumb::after{ content:"\F4F4"; font-family:"bootstrap-icons"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:46px; height:46px; line-height:46px; text-align:center; font-size:22px; color:#fff;
    background:rgba(0,0,0,.55); border-radius:50%; pointer-events:none; transition:background .15s, transform .15s; }
.bee-hl-wrap .bee-gall-li:hover .bee-gall-thumb::after{ background:var(--bee-accent); color:var(--bee-on-accent); transform:translate(-50%,-50%) scale(1.08); }
.bee-hl-wrap .bee-gall-thumb .bee-gall-notice::after,
.bee-hl-wrap .bee-gall-thumb:has(.bee-gall-notice)::after{ content:none; }   /* 공지 카드엔 재생 아이콘 미표시 */
/* 하이라이트 본문 메타(커넥터가 채우는 채널/스코어/링크 블록) */
.bee-hl-meta{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:0 0 16px; font-size:.9rem; color:var(--bee-muted); }
.bee-hl-meta .bee-hl-chip{ display:inline-flex; align-items:center; gap:5px; background:var(--bee-bg); border:1px solid var(--bee-border); border-radius:999px; padding:3px 11px; }
.bee-hl-score{ display:inline-flex; align-items:center; gap:12px; font-weight:700; color:var(--bee-text); font-size:1.05rem; background:var(--bee-bg); border:1px solid var(--bee-border); border-radius:10px; padding:8px 16px; margin:0 0 14px; }
.bee-hl-score .bee-hl-sc{ color:var(--bee-accent); font-size:1.2rem; }
.bee-hl-meta a, .bee-hl-srclink{ color:var(--bee-accent); text-decoration:none; }
.bee-hl-srclink{ display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; }

/* BJ 갤러리 본문 — 캡션 + 원본 이미지(원격, 세로 스택) + 영상 링크 */
.bee-bj-cap{ color:var(--bee-muted); font-size:.92rem; line-height:1.7; margin:0 0 14px; }
.bee-bj-imgs{ display:flex; flex-direction:column; gap:10px; margin:0 0 14px; }
.bee-bj-imgs img{ display:block; width:100%; height:auto; border-radius:8px; }
.bee-bj-vids{ display:flex; flex-direction:column; gap:10px; margin:0 0 6px; }
.bee-bj-player{ display:block; width:100%; max-height:80vh; background:#000; border-radius:8px; }
/* 영상 링크(JS/훅 미적용 폴백) */
.bee-bj-vid{ display:inline-flex; align-items:center; gap:6px; background:var(--bee-accent); color:var(--bee-on-accent); font-weight:700; font-size:.9rem; text-decoration:none; padding:8px 16px; border-radius:8px; align-self:flex-start; }
.bee-bj-vid:hover{ filter:brightness(1.08); color:var(--bee-on-accent); }
.bee-live-vhead{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px; }
.bee-live-vleague{ background:color-mix(in srgb, var(--bee-accent) 18%, transparent); color:var(--bee-accent); font-size:.78rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.bee-live-vwhen{ color:var(--bee-muted); font-size:.84rem; }
.bee-live-score{ display:flex; align-items:center; justify-content:center; gap:18px; padding:14px 10px; margin-bottom:12px; background:linear-gradient(135deg, color-mix(in srgb, var(--bee-surface) 92%, var(--bee-bg)), var(--bee-bg)); border:1px solid var(--bee-border); border-radius:var(--bee-radius); }
.bee-live-score-team{ color:var(--bee-text); font-weight:800; font-size:1.15rem; flex:1; text-align:center; }
.bee-live-score-vs{ flex:0 0 auto; color:var(--bee-accent); font-weight:800; font-size:.85rem; }

/* 중계 글쓰기 추가필드 */
.bee-live-fields{ border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:14px 16px 16px; margin-bottom:14px; background:color-mix(in srgb, var(--bee-surface) 50%, transparent); }
.bee-live-fields legend{ float:none; width:auto; font-size:.92rem; font-weight:700; color:var(--bee-accent); padding:0 6px; margin:0 0 4px; }
.bee-live-fields legend .bi{ margin-right:4px; }
.bee-live-fields .bee-write-label small{ color:var(--bee-muted); font-weight:400; }

@media (max-width:767.98px){
    .bee-live{ grid-template-columns:repeat(2, 1fr); gap:11px; }
    .bee-live-score-team{ font-size:.98rem; }
}
@media (max-width:419.98px){
    .bee-live{ grid-template-columns:1fr; }
}

/* ---- 모바일 ---- */
@media (max-width:991.98px){
    .bee-gall{ grid-template-columns:repeat(3, 1fr); gap:12px; }
}
@media (max-width:575.98px){
    .bee-gall{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}
@media (max-width:767.98px){
    .bee-list-table .bee-col-num{ width:42px; font-size:.76rem; }
    .bee-list-table .bee-col-name{ width:auto; max-width:96px; }
    .bee-list-table .bee-col-name .sv_member,
    .bee-list-table .bee-col-name .sv_guest{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:72px; vertical-align:bottom; }
    .bee-list-table .bee-col-date{ width:54px; font-size:.72rem; }
    .bee-list-table .bee-col-meta{ display:none; }   /* 조회/추천/비추천은 모바일 숨김 */
    .bee-view-tools,.bee-view-share{ justify-content:flex-start; }
    .bee-view-title{ font-size:1.2rem; }
}

/* ===================================================================
   게시판 보기(view)/쓰기(write) 본문 패널 — 배경과 분리되는 카드
   (전 스킨 공통: 모든 루트가 .bee-view / .bee-write 보유)
   =================================================================== */
.bee-view, .bee-write{
    background:var(--bee-surface);
    border:1px solid var(--bee-border);
    border-radius:var(--bee-radius);
    padding:22px 24px;
    margin-bottom:18px;
    box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* 카드 내부 중첩 박스/입력영역은 한 단계 어둡게(inset 느낌, 박스-인-박스 완화) */
.bee-view-files, .bee-view-links, .bee-view-nb{ background:var(--bee-bg); }
/* 댓글 영역을 본문과 카드 내부 구분선으로 분리 */
.bee-comment{ margin-top:24px; padding-top:20px; border-top:1px solid var(--bee-border); }
@media (max-width:575.98px){
    .bee-view, .bee-write{ padding:16px 15px; }
}

/* ===== 목록 카드화 — 일반(테이블)·웹진(행)만 (그리드형 갤러리/이벤트/중계 제외) ===== */
/* 일반 = .bee-board 단독(그리드 모디파이어 없음), 웹진 = .bee-wz-board */
.bee-board:not(.bee-gall-board):not(.bee-wz-board):not(.bee-live-board),
.bee-wz-board{
    background:var(--bee-surface);
    border:1px solid var(--bee-border);
    border-radius:var(--bee-radius);
    padding:20px 22px;
    margin-bottom:18px;
    box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* 카드 마지막 행의 이중 구분선 정리 */
.bee-board:not(.bee-gall-board):not(.bee-wz-board):not(.bee-live-board) .bee-list-table tbody tr:last-child td{ border-bottom:0; }
.bee-wz-board .bee-wz-li:last-child{ border-bottom:0; }
@media (max-width:575.98px){
    .bee-board:not(.bee-gall-board):not(.bee-wz-board):not(.bee-live-board),
    .bee-wz-board{ padding:14px 13px; }
}

/* ===================================================================
   Q&A 채택포인트 게시판 (beetv_qna)
   =================================================================== */
/* 목록 컬럼 */
.bee-list-table .bee-col-qpt{ width:96px; text-align:center; white-space:nowrap; }
.bee-list-table .bee-col-qadopt{ width:64px; text-align:center; }
.bee-qa-pt{ display:inline-flex; align-items:center; gap:4px; color:var(--bee-accent); font-weight:700; font-size:.84rem; }
.bee-qa-pt .bi{ font-size:.95em; }
.bee-qa-pt-none{ color:var(--bee-muted); }
.bee-qa-done{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; background:color-mix(in srgb, #36d07f 20%, transparent); color:#36d07f; font-size:.74rem; font-weight:700; white-space:nowrap; }

/* 보기: 제목 Q 뱃지 */
.bee-qna-q{ display:inline-flex; align-items:center; justify-content:center; width:1.5em; height:1.5em; border-radius:50%; background:var(--bee-accent); color:var(--bee-on-accent); font-weight:800; font-size:.85em; vertical-align:middle; margin-right:6px; }

/* 보기: 본문 끝 채택 포인트 블록 */
.bee-qna-reward{ display:flex; align-items:center; gap:14px; margin-top:18px; padding:16px 18px; border:1px solid var(--bee-border); border-radius:var(--bee-radius);
    background:linear-gradient(135deg, color-mix(in srgb, var(--bee-accent) 12%, var(--bee-surface)), var(--bee-surface)); }
.bee-qna-reward.done{ background:linear-gradient(135deg, color-mix(in srgb, #36d07f 14%, var(--bee-surface)), var(--bee-surface)); border-color:color-mix(in srgb, #36d07f 40%, var(--bee-border)); }
.bee-qna-reward-ic{ flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:color-mix(in srgb, var(--bee-accent) 22%, transparent); color:var(--bee-accent); font-size:1.5rem; }
.bee-qna-reward.done .bee-qna-reward-ic{ background:color-mix(in srgb, #36d07f 22%, transparent); color:#36d07f; }
.bee-qna-reward-body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.bee-qna-reward-label{ color:var(--bee-muted); font-size:.82rem; }
.bee-qna-reward-pt{ color:var(--bee-text); font-weight:800; font-size:1.4rem; line-height:1.1; }
.bee-qna-reward-pt em{ font-style:normal; color:var(--bee-accent); font-size:.8em; }
.bee-qna-reward.done .bee-qna-reward-pt em{ color:#36d07f; }
.bee-qna-reward-badge{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:999px; background:color-mix(in srgb, #36d07f 18%, transparent); color:#36d07f; font-weight:700; font-size:.82rem; }
.bee-qna-reward-wait{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:999px; background:color-mix(in srgb, var(--bee-accent) 16%, transparent); color:var(--bee-accent); font-weight:700; font-size:.82rem; }

/* 글쓰기: 채택 포인트 필드 */
.bee-qna-fields{ border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:14px 16px 8px; margin-bottom:14px; background:color-mix(in srgb, var(--bee-accent) 6%, transparent); }
.bee-qna-fields legend{ float:none; width:auto; font-size:.92rem; font-weight:700; color:var(--bee-accent); padding:0 6px; margin:0 0 6px; }
.bee-qna-fields legend .bi{ margin-right:4px; }
.bee-qna-fields .bee-write-label small{ color:var(--bee-muted); font-weight:400; }
.bee-qna-pt-input{ max-width:280px; }
.bee-qna-mypoint{ color:var(--bee-accent); }
.bee-qna-locked{ color:var(--bee-accent-2) !important; }

/* 댓글: 채택 버튼 + 채택된 답변 하이라이트 */
.bee-cmt-adopt{ display:flex; justify-content:flex-end; margin-top:8px; }
.bee-qna-adopt-btn{ background:transparent; border:1px solid #36d07f; color:#36d07f; font-weight:700; border-radius:999px; padding:5px 16px; }
.bee-qna-adopt-btn:hover{ background:#36d07f; color:#0b1410; }
.bee-cmt-item.bee-cmt-adopted{ background:color-mix(in srgb, #36d07f 8%, transparent); border-left:3px solid #36d07f; padding-left:12px; border-radius:0 var(--bee-radius) var(--bee-radius) 0; }
.bee-cmt-adopted-tag{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; background:#36d07f; color:#0b1410; font-size:.74rem; font-weight:800; }

/* ===================================================================
   보증업체 게시판 (beetv_company) — 갤러리 기반 목록 + 업체 프로필 보기
   =================================================================== */
/* 목록: 제목 밑 주요설명 + 조회수만 (제목 키우고 제목·주요설명 가운데 정렬) */
.bee-company-info{ text-align:center; }
.bee-company-info .bee-company-tit{ -webkit-line-clamp:2; font-size:1.12rem; font-weight:700; justify-content:center; }
.bee-company-desc{ color:var(--bee-muted); font-weight:500; font-size:.84rem; line-height:1.5; margin:7px 0 9px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bee-company-meta{ justify-content:center; }

/* 보기: 글쓰기 업체정보 필드셋 */
.bee-company-fields{ border:1px solid var(--bee-border); border-radius:var(--bee-radius); padding:14px 16px 6px; margin-bottom:14px; background:color-mix(in srgb, var(--bee-surface) 55%, transparent); }
.bee-company-fields legend{ float:none; width:auto; font-size:.92rem; font-weight:700; color:var(--bee-accent); padding:0 6px; margin:0 0 6px; }
.bee-company-fields legend .bi{ margin-right:4px; }
.bee-company-fields .bee-write-label small{ color:var(--bee-muted); font-weight:400; }

/* 보기: ① 첨부 이미지 */
.bee-company-images{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:18px; }
.bee-company-images img{ max-width:100%; height:auto; border-radius:var(--bee-radius); display:block; }
.bee-company-images a{ display:block; max-width:100%; }

/* 보기: ② 주요 설명 (강조 태그라인) */
.bee-company-tagline{ text-align:center; font-size:1.15rem; font-weight:800; line-height:1.5; color:var(--bee-text); padding:16px 18px; margin-bottom:16px; border-radius:var(--bee-radius);
    background:linear-gradient(135deg, color-mix(in srgb, var(--bee-accent) 16%, var(--bee-surface)), var(--bee-surface)); border:1px solid color-mix(in srgb, var(--bee-accent) 35%, var(--bee-border)); }

/* 보기: ② 사이트주소 / 추천코드 (액션) */
.bee-company-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:18px; }
.bee-company-visit{ display:inline-flex; align-items:center; gap:7px; padding:12px 24px; border-radius:var(--bee-radius); background:var(--bee-accent); color:var(--bee-on-accent); font-weight:800; font-size:1rem; text-decoration:none; flex:1; min-width:200px; justify-content:center; transition:background .15s; }
.bee-company-visit:hover{ background:var(--bee-accent-2); color:var(--bee-on-accent-2); }
.bee-company-code{ display:flex; align-items:center; gap:10px; padding:9px 14px; border:1px dashed var(--bee-border); border-radius:var(--bee-radius); background:var(--bee-bg); }
.bee-company-code-label{ color:var(--bee-muted); font-size:.82rem; font-weight:600; white-space:nowrap; }
.bee-company-code code{ color:var(--bee-accent); font-weight:800; font-size:1.05rem; letter-spacing:.5px; }
.bee-company-copy{ background:transparent; border:1px solid var(--bee-border); color:var(--bee-text); border-radius:6px; padding:4px 10px; font-size:.8rem; white-space:nowrap; }
.bee-company-copy:hover{ border-color:var(--bee-accent); color:var(--bee-accent); }

/* 보기: ② 섹션(가입이벤트/주요이벤트) + ③ 본문(설명) */
.bee-company-sec{ margin-bottom:16px; padding:16px 18px; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); }
.bee-company-sec-tit{ display:flex; align-items:center; gap:7px; font-size:1rem; font-weight:700; color:var(--bee-text); margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--bee-border); }
.bee-company-sec-tit .bi{ color:var(--bee-accent); }
.bee-company-sec-body{ color:var(--bee-text); font-size:.92rem; line-height:1.75; word-break:break-word; }
.bee-company-sec-body img{ max-width:100%; height:auto; }
.bee-company-sec-join .bee-company-sec-tit .bi{ color:#36d07f; }
@media (max-width:575.98px){
    .bee-company-visit{ min-width:100%; }
    .bee-company-tagline{ font-size:1rem; padding:13px 14px; }
}

/* ── 앱(App) 시스템 공통 ── (theme/beetv/app.php 디스패처로 렌더되는 커스텀 기능 페이지) */
.bee-app{ width:100%; }   /* 앱 본문은 컨텐츠 영역 100% 폭 사용 (max-width 로 좁히지 말 것) */
.bee-app-head{ margin-bottom:18px; }
.bee-app-title{ font-size:1.5rem; font-weight:700; color:var(--bee-text); margin:0 0 4px; }
.bee-app-title .bi{ color:var(--bee-accent); }
.bee-app-sub{ color:var(--bee-muted); margin:0; font-size:.95rem; }
.bee-app-card{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius,12px); padding:28px 24px; text-align:center; margin-bottom:18px; }
.bee-app-reward{ font-size:1.05rem; color:var(--bee-text); margin-bottom:16px; }
.bee-app-reward strong{ color:var(--bee-accent); font-size:1.3rem; }
.bee-app-checkin{ min-width:200px; padding:12px 20px; font-size:1rem; }
.bee-app-checkin:disabled{ opacity:.55; cursor:not-allowed; }
.bee-app-note{ color:var(--bee-muted); font-size:.85rem; margin:14px 0 0; }
.bee-app-debug{ background:var(--bee-bg); border:1px dashed var(--bee-border); border-radius:10px; padding:14px 16px; font-size:.85rem; color:var(--bee-muted); }
.bee-app-debug strong{ color:var(--bee-text); display:block; margin-bottom:6px; }
.bee-app-debug ul{ margin:0; padding-left:18px; }
.bee-app-debug li{ margin:3px 0; }
.bee-app-debug code{ color:var(--bee-text); }
/* 앱 없음/오류 안내 */
.bee-app-msg{ max-width:560px; margin:40px auto; text-align:center; }
.bee-app-msg h2{ font-size:1.3rem; color:var(--bee-text); margin-bottom:10px; }
.bee-app-msg h2 .bi{ color:var(--bee-accent); }
.bee-app-msg p{ color:var(--bee-muted); margin:6px 0; }
.bee-app-msg .bee-btn-line{ margin-top:12px; display:inline-block; }

/* ── 출석체크 앱 (apps/attendance) ── 색은 var(--bee-*) 추종 / 모바일도 7열 풀 달력 유지 */
.bee-att{ --att-red:#e23b4e; --att-blue:#3b82f6; width:100%; }   /* 컨텐츠 영역 100% 폭 */
/* 헤더 */
.bee-att-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.bee-att-title{ font-size:1.55rem; font-weight:800; color:var(--bee-text); margin:0; }
.bee-att-title span{ color:var(--bee-accent); }
.bee-att-headright{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bee-att-clock{ color:var(--bee-muted); font-size:.85rem; }
.bee-att-clock strong{ color:var(--bee-text); }
.bee-att-clock em{ font-style:normal; }
.bee-att-pt{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:50px; padding:6px 14px; font-size:.85rem; color:var(--bee-text); }
.bee-att-pt .bi{ color:var(--bee-accent); }
.bee-att-pt strong{ color:var(--bee-accent); }
/* 플래시 */
.bee-att-flash{ border-radius:10px; padding:12px 16px; font-size:.9rem; margin-bottom:14px; }
.bee-att-flash.ok{ background:color-mix(in srgb, var(--bee-accent) 16%, var(--bee-surface)); border:1px solid var(--bee-accent); color:var(--bee-text); }
.bee-att-flash.dup{ background:var(--bee-surface); border:1px solid var(--bee-border); color:var(--bee-muted); }
.bee-att-flash .bi{ margin-right:4px; }
/* 달력 */
.bee-att-cal{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius,12px); padding:14px; margin-bottom:16px; }
.bee-att-wdays,.bee-att-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.bee-att-wdays{ margin-bottom:6px; }
.bee-att-wday{ text-align:center; font-weight:700; font-size:.85rem; padding:8px 0; border-radius:8px; background:var(--bee-accent); color:var(--bee-on-accent); }
.bee-att-wday.sun{ background:var(--att-red); }
.bee-att-wday.sat{ background:var(--att-blue); }
.bee-att-cell{ position:relative; aspect-ratio:1/1; border:1px solid var(--bee-border); border-radius:10px; background:var(--bee-bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; overflow:hidden; min-height:64px; }
.bee-att-cell.empty{ border:0; background:transparent; }
.bee-att-day{ position:absolute; top:5px; left:7px; font-size:.72rem; color:var(--bee-muted); font-weight:600; }
.bee-att-cell.sun .bee-att-day{ color:var(--att-red); }
.bee-att-cell.sat .bee-att-day{ color:var(--att-blue); }
.bee-att-ic{ display:flex; align-items:center; justify-content:center; }
.bee-att-ic-svg{ width:clamp(30px,7vw,48px); height:clamp(30px,7vw,48px); }
.bee-att-ic-img{ width:clamp(30px,7vw,48px); height:clamp(30px,7vw,48px); object-fit:contain; }
.bee-att-label{ font-size:clamp(.6rem,1.8vw,.78rem); font-weight:700; line-height:1; }
/* 상태별 색 */
.bee-att-cell.st-present{ border-color:var(--bee-accent); background:color-mix(in srgb, var(--bee-accent) 10%, var(--bee-bg)); }
.bee-att-cell.st-present .bee-att-ic-present{ color:var(--bee-accent); }
.bee-att-cell.st-present .bee-att-label{ color:var(--bee-accent); }
.bee-att-cell.st-absent{ opacity:.78; }
.bee-att-cell.st-absent .bee-att-ic-absent{ color:var(--bee-muted); }
.bee-att-cell.st-absent .bee-att-label{ color:var(--bee-muted); }
.bee-att-cell.st-today{ border-color:var(--att-red); box-shadow:0 0 0 1px var(--att-red) inset; }
.bee-att-cell.st-today .bee-att-ic-today{ color:var(--att-red); }
.bee-att-cell.st-today .bee-att-label{ color:var(--att-red); }
.bee-att-cell.st-future{ opacity:.4; }
/* 개근 배너 + 보너스 */
.bee-att-streak{ display:flex; gap:14px; flex-wrap:wrap; align-items:stretch; margin-bottom:16px; }
.bee-att-streak-now{ flex:1; min-width:220px; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius,12px); padding:16px 18px; display:flex; align-items:center; gap:16px; }
.bee-att-streak-num{ font-size:1.05rem; color:var(--bee-text); white-space:nowrap; }
.bee-att-streak-num .bi{ color:#ff7a18; }
.bee-att-streak-num strong{ font-size:1.8rem; color:var(--bee-accent); margin:0 2px; }
.bee-att-streak-txt{ font-size:.88rem; color:var(--bee-muted); line-height:1.5; }
.bee-att-streak-next{ display:block; margin-top:3px; color:var(--bee-text); }
.bee-att-streak-next strong{ color:var(--bee-accent); }
.bee-att-bonus{ flex:1; min-width:220px; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius,12px); padding:16px 18px; }
.bee-att-bonus-tit{ font-size:.9rem; font-weight:700; color:var(--bee-text); margin-bottom:10px; }
.bee-att-bonus-tit .bi{ color:#f5b50a; }
.bee-att-bonus-list{ display:flex; flex-wrap:wrap; gap:8px; }
.bee-att-bonus-item{ display:flex; align-items:center; gap:6px; border:1px solid var(--bee-border); border-radius:50px; padding:6px 13px; font-size:.82rem; color:var(--bee-muted); background:var(--bee-bg); }
.bee-att-bonus-item .bee-att-bonus-days{ font-weight:700; color:var(--bee-text); }
.bee-att-bonus-item .bee-att-bonus-pt{ color:var(--bee-accent); font-weight:700; }
.bee-att-bonus-item.done{ border-color:var(--bee-accent); background:color-mix(in srgb, var(--bee-accent) 12%, var(--bee-bg)); color:var(--bee-text); }
.bee-att-bonus-item.done .bee-att-bonus-chk{ color:var(--bee-accent); }
.bee-att-bonus-item.next{ border-color:#f5b50a; box-shadow:0 0 0 1px #f5b50a inset; }
/* 입력폼 */
.bee-att-form{ display:flex; gap:10px; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius,12px); padding:12px; margin-bottom:16px; }
.bee-att-memo{ flex:1; height:46px; background:var(--bee-bg); border:1px solid var(--bee-border); border-radius:8px; padding:0 14px; color:var(--bee-text); font-size:.95rem; }
.bee-att-memo:focus{ outline:none; border-color:var(--bee-accent); }
.bee-att-btn{ flex:none; min-width:130px; border:0; border-radius:8px; background:var(--bee-accent); color:var(--bee-on-accent); font-size:.98rem; font-weight:700; cursor:pointer; padding:0 22px; }
.bee-att-btn:disabled{ opacity:.6; cursor:not-allowed; }
.bee-att-form.done{ align-items:center; gap:12px; color:var(--bee-text); font-size:.95rem; }
.bee-att-form.done .bi{ font-size:1.5rem; color:var(--bee-accent); }
.bee-att-form.done strong{ color:var(--bee-accent); }
/* 피드 */
.bee-att-feed{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius,12px); overflow:hidden; }
.bee-att-feed-row{ padding:13px 16px; border-bottom:1px solid var(--bee-border); }
.bee-att-feed-row:last-child{ border-bottom:0; }
.bee-att-feed-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bee-att-feed-nick{ font-weight:700; color:var(--bee-text); display:inline-flex; align-items:center; gap:4px; }
.bee-att-feed-pt{ color:var(--bee-accent); font-weight:700; font-size:.9rem; }
.bee-att-feed-streak{ font-size:.8rem; color:var(--bee-on-accent); background:var(--bee-accent); border-radius:50px; padding:2px 9px; }
.bee-att-feed-time{ margin-left:auto; color:var(--bee-muted); font-size:.8rem; }
.bee-att-feed-memo{ margin-top:6px; color:var(--bee-text); font-size:.92rem; word-break:break-word; }
/* 모바일: 7열 유지, 셀/여백만 축소 */
@media (max-width:575.98px){
    .bee-att-title{ font-size:1.25rem; }
    .bee-att-cal{ padding:9px; }
    .bee-att-wdays,.bee-att-grid{ gap:4px; }
    .bee-att-wday{ font-size:.72rem; padding:5px 0; border-radius:6px; }
    .bee-att-cell{ min-height:0; border-radius:7px; gap:1px; }
    .bee-att-day{ top:2px; left:3px; font-size:.6rem; }
    .bee-att-streak-num strong{ font-size:1.5rem; }
    .bee-att-feed-time{ width:100%; margin-left:0; }
}

/* ── 임베드 앱 (스포츠 중계 1/2/3) ── 중계 소스(iframe/JS)를 원문 그대로 출력 */
.bee-embed-app{ width:100%; }
.bee-embed-title{ font-size:1.45rem; font-weight:800; color:var(--bee-text); margin:0 0 16px; }
.bee-embed-body{ width:100%; }
.bee-embed-body iframe{ max-width:100%; border:0; }   /* 제공사 iframe resizer 가 높이 제어 — 폭만 안전하게 캡 */
.bee-embed-empty{ background:var(--bee-surface); border:1px dashed var(--bee-border); border-radius:var(--bee-radius,12px); padding:40px 24px; text-align:center; color:var(--bee-muted); line-height:1.7; }
.bee-embed-empty .bi{ display:block; font-size:2rem; color:var(--bee-accent); margin-bottom:10px; }

/* ============================================================
   스포츠 분석 (beetv_sports_analyze) — 매치 카드 목록 + 다크 히어로 view
   색은 전부 테마 변수(--bee-*) 추종. 다크 히어로 = --bee-text 반전.
   ============================================================ */

/* --- 목록: 매치 카드 그리드 (모바일2 / 태블릿3 / PC4) --- */
.bee-sa-grid{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media(min-width:576px){ .bee-sa-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:992px){ .bee-sa-grid{ grid-template-columns:repeat(4,1fr); } }
.bee-sa-li{ list-style:none; }
.bee-sa-card{ position:relative; height:100%; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius,12px); overflow:hidden; transition:box-shadow .15s, border-color .15s; }
.bee-sa-card:hover{ border-color:var(--bee-accent); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.bee-sa-li.on .bee-sa-card{ border-color:var(--bee-accent); }
.bee-sa-link{ display:block; padding:12px 14px 16px; color:inherit; text-decoration:none; }
.bee-sa-link:hover, .bee-sa-link:focus{ text-decoration:none; color:inherit; }
.bee-sa-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.bee-sa-chip{ display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:700; color:var(--bee-accent); background:color-mix(in srgb, var(--bee-accent) 12%, transparent); border-radius:50px; padding:3px 10px; line-height:1.4; }
.bee-sa-chip-ic{ font-size:.92rem; }
.bee-sa-chip-notice{ color:var(--bee-on-accent); background:var(--bee-accent); }
.bee-sa-when{ font-size:.76rem; color:var(--bee-muted); white-space:nowrap; }
.bee-sa-match{ display:flex; align-items:flex-start; justify-content:center; gap:6px; }   /* 엠블럼 상단정렬 → 팀명 줄수 달라도 아이콘 Y 고정 */
.bee-sa-team{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.bee-sa-emb{ width:54px; height:54px; border-radius:50%; background:#fff; border:1px solid var(--bee-border); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; }
.bee-sa-emb img{ width:100%; height:100%; object-fit:contain; }
.bee-sa-emb-ph{ font-weight:800; color:var(--bee-muted); font-size:1.2rem; }
.bee-sa-tname{ font-size:.86rem; font-weight:600; color:var(--bee-text); line-height:1.3; word-break:keep-all; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bee-sa-vs{ flex:0 0 auto; height:54px; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; color:var(--bee-muted); }   /* 엠블럼(54px) 높이에 세로중앙 → VS 가 아이콘 중앙에 정렬 */
.bee-sa-subject{ font-size:.92rem; font-weight:600; color:var(--bee-text); line-height:1.45; }
.bee-sa-cmt{ display:inline-block; margin-top:10px; font-size:.76rem; color:var(--bee-muted); }
.bee-sa-empty{ list-style:none; grid-column:1/-1; text-align:center; color:var(--bee-muted); padding:48px 0; }
.bee-sa-chk{ position:absolute; top:8px; left:8px; z-index:3; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:4px; padding:1px 3px; }

/* --- 글보기: 다크 히어로(테마 반전) --- */
.bee-sa-hero{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius,12px); padding:28px 20px; margin-bottom:22px; text-align:center; }
.bee-sa-hero-info{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:.9rem; color:var(--bee-muted); margin-bottom:20px; }
.bee-sa-hero-dot{ opacity:.55; }
.bee-sa-hero-match{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,6vw,64px); }
.bee-sa-hero-team{ display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 1 200px; min-width:0; }
.bee-sa-hero-emb{ width:84px; height:84px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; }
.bee-sa-hero-emb img{ width:100%; height:100%; object-fit:contain; }
.bee-sa-hero-emb .bee-sa-emb-ph{ color:var(--bee-muted); font-size:1.8rem; }
.bee-sa-hero-name{ font-size:1.1rem; font-weight:700; color:var(--bee-text); word-break:keep-all; overflow-wrap:anywhere; }
.bee-sa-hero-vs{ font-size:1.6rem; font-weight:800; color:var(--bee-accent); flex:0 0 auto; }
@media(max-width:575px){
    .bee-sa-hero{ padding:22px 14px; }
    .bee-sa-hero-emb{ width:62px; height:62px; }
    .bee-sa-hero-emb .bee-sa-emb-ph{ font-size:1.4rem; }
    .bee-sa-hero-name{ font-size:.95rem; }
    .bee-sa-hero-vs{ font-size:1.3rem; }
}

/* --- 본문: 추천 픽 카드(경기정보 바로 아래) --- */
.bee-sa-picks{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius,12px); padding:18px 20px; margin:0 0 22px; }
.bee-sa-picks-tit{ display:inline-block; font-size:1.05rem; font-weight:800; color:var(--bee-text); padding-bottom:6px; margin-bottom:8px; border-bottom:3px solid var(--bee-accent); }
.bee-sa-pick-list{ display:flex; flex-direction:column; }
.bee-sa-pick{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 2px; border-top:1px solid color-mix(in srgb, var(--bee-border) 60%, transparent); }
.bee-sa-pick:first-child{ border-top:0; }
.bee-sa-pick-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bee-sa-pick-mk{ font-size:.78rem; color:var(--bee-muted); }
.bee-sa-pick-sel{ font-size:.98rem; font-weight:600; color:var(--bee-text); word-break:keep-all; overflow-wrap:anywhere; }
.bee-sa-pick-meta{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.bee-sa-pick-odds{ font-size:.9rem; font-weight:700; color:var(--bee-text); background:color-mix(in srgb, var(--bee-text) 6%, transparent); border-radius:6px; padding:3px 8px; white-space:nowrap; }
.bee-sa-pick-badge{ font-size:.82rem; font-weight:800; color:var(--bee-accent); white-space:nowrap; }

/* --- 본문: 분석 섹션 --- */
.bee-sa-sec{ margin-bottom:22px; }
.bee-sa-sec:last-child{ margin-bottom:0; }
.bee-sa-sec-tit{ font-size:1.05rem; font-weight:800; color:var(--bee-accent); margin-bottom:8px; padding-left:10px; border-left:3px solid var(--bee-accent); }
.bee-sa-sec-body{ font-size:.96rem; line-height:1.85; color:var(--bee-text); }

/* 게시판 목록 상단 검색바 — 한 줄 레이아웃 (select 컴팩트 + input 신축 + 버튼).
   .bee-filter 공용 스타일 위에 .bee-board-search 만 오버라이드(다른 .bee-filter 영향 없음). */
.bee-board-search{ flex-wrap:nowrap; align-items:center; }
.bee-board-search .form-select{ width:auto; flex:0 0 auto; min-width:96px; max-width:170px; }
.bee-board-search .form-control{ flex:1 1 auto; min-width:0; }
.bee-board-search .btn{ flex:0 0 auto; white-space:nowrap; }
@media(max-width:480px){ .bee-board-search .form-select{ min-width:84px; } .bee-board-search .btn{ padding-left:10px; padding-right:10px; } }

/* ============================================================
   AI 승부 예측 (beetv_sports_predictions)
   매치카드는 .bee-sa-* 재사용. 아래는 예측 전용(.bee-sp-*).
   그래프색: 눈 편한 톤 — 홈=소프트 블루 / 원정=코랄 / 무=뮤트, 최근경기 승=소프트 그린·패=코랄.
   예측 컨테이너에 변수로 묶어 한 곳에서 제어(원하면 값만 교체).
   ============================================================ */
.bee-sp-board, .bee-sp-view{ --sp-home:#5b9bd5; --sp-away:#e8836b; --sp-draw:var(--bee-muted); --sp-win:#5cb87f; --sp-loss:#e8836b; }

/* --- 승무패 확률바 (목록 카드 + 본문 종합예측 공용) --- */
.bee-sp-prob{ margin-top:12px; }
.bee-sp-prob-bar{ display:flex; height:10px; border-radius:50px; overflow:hidden; background:color-mix(in srgb,var(--bee-muted) 22%,transparent); }
.bee-sp-prob-h{ background:var(--sp-home); }
.bee-sp-prob-d{ background:var(--sp-draw); }
.bee-sp-prob-a{ background:var(--sp-away); }
.bee-sp-prob-labels{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:.78rem; font-weight:700; }
.bee-sp-prob-lh{ color:var(--sp-home); }
.bee-sp-prob-ld{ color:var(--sp-draw); }
.bee-sp-prob-la{ color:var(--sp-away); }

/* --- 예측 승리팀 배너 --- */
.bee-sp-winner{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; padding:11px 14px; border-radius:var(--bee-radius,12px); font-weight:800; font-size:1rem;
    color:var(--bee-accent); background:color-mix(in srgb,var(--bee-accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--bee-accent) 30%,transparent); }
.bee-sp-winner .bi{ font-size:1.05em; }
.bee-sp-winner-sm{ margin-top:10px; padding:7px 10px; font-size:.84rem; background:var(--bee-bg); border-color:var(--bee-border); }   /* 목록 카드: 강조 틴트 대신 테마 배경톤(글자 대비 확보) */

/* --- 본문 섹션 공통 --- */
.bee-sp-sec{ margin-bottom:24px; }
.bee-sp-sec:last-child{ margin-bottom:0; }
.bee-sp-sec-tit{ font-size:1.05rem; font-weight:800; color:var(--bee-text); margin-bottom:12px; padding-left:10px; border-left:3px solid var(--bee-accent); }
.bee-sp-sec-body{ font-size:.96rem; line-height:1.85; color:var(--bee-text); }
.bee-sp-final{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius,12px); padding:18px 20px; }
.bee-sp-final .bee-sp-sec-tit{ display:inline-block; border-left:0; padding-left:0; padding-bottom:6px; border-bottom:3px solid var(--bee-accent); margin-bottom:12px; }

/* --- 팀 전력 비교 (stats) --- */
.bee-sp-stat{ margin-bottom:14px; }
.bee-sp-stat:last-child{ margin-bottom:0; }
.bee-sp-stat-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.9rem; margin-bottom:5px; }
.bee-sp-stat-hv{ font-weight:700; color:var(--sp-home); flex:0 0 auto; }
.bee-sp-stat-lb{ color:var(--bee-muted); flex:1 1 auto; text-align:center; font-size:.84rem; }
.bee-sp-stat-av{ font-weight:700; color:var(--sp-away); flex:0 0 auto; }
.bee-sp-stat-bar{ display:flex; height:8px; border-radius:50px; overflow:hidden; background:color-mix(in srgb,var(--bee-muted) 20%,transparent); }
.bee-sp-stat-hb{ background:var(--sp-home); }
.bee-sp-stat-ab{ background:var(--sp-away); }

/* --- 최근 5경기 (recent_form) --- */
.bee-sp-rf-row{ display:flex; align-items:center; gap:10px; padding:8px 0; flex-wrap:wrap; }
.bee-sp-rf-row + .bee-sp-rf-row{ border-top:1px solid color-mix(in srgb,var(--bee-border) 60%,transparent); }
.bee-sp-rf-team{ font-weight:700; color:var(--bee-text); min-width:96px; }
.bee-sp-rf-badges{ display:inline-flex; gap:5px; }
.bee-sp-rf{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; font-size:.78rem; font-weight:800; color:#fff; }
.bee-sp-rf-w{ background:var(--sp-win); }
.bee-sp-rf-l{ background:var(--sp-loss); }
.bee-sp-rf-d{ background:var(--sp-draw); }
/* 목록 카드: 팀명 2줄 높이 고정 → 확률바·승리배너 top 정렬(아이콘은 .bee-sa-match flex-start 로 고정) */
.bee-sp-board .bee-sa-tname{ min-height:2.6em; }
.bee-sp-rf-sum{ margin-left:auto; font-size:.82rem; color:var(--bee-muted); }

/* --- 상대 전적 (h2h) --- */
.bee-sp-h2h{ display:flex; align-items:center; gap:12px; padding:9px 0; font-size:.9rem; }
.bee-sp-h2h + .bee-sp-h2h{ border-top:1px solid color-mix(in srgb,var(--bee-border) 60%,transparent); }
.bee-sp-h2h-date{ color:var(--bee-muted); flex:0 0 auto; font-size:.82rem; min-width:84px; }
.bee-sp-h2h-match{ color:var(--bee-text); }
.bee-sp-h2h-match strong{ color:var(--bee-accent); margin:0 4px; }
.bee-sp-h2h-sum{ margin-top:10px; font-size:.88rem; color:var(--bee-muted); line-height:1.7; }

/* --- 핵심 변수 (key_factors) --- */
.bee-sp-kf{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:.94rem; line-height:1.7; color:var(--bee-text); }
.bee-sp-kf-no{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--bee-accent); color:var(--bee-on-accent); font-size:.78rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }

/* ── 랭킹 앱 (apps/ranking) ── 색은 var(--bee-*) 추종, 레이아웃 3종(탭/원페이지/하이브리드) ── */
.bee-rk{ width:100%; }

/* 상단 탭 (경험치 / 이달의 활동왕) */
.bee-rk-tabs{ display:flex; gap:8px; max-width:560px; margin:0 auto 18px; }
.bee-rk-tab{ flex:1 1 0; padding:13px 10px; border:1px solid var(--bee-border); background:var(--bee-surface); color:var(--bee-muted); font-size:1rem; font-weight:700; border-radius:10px; cursor:pointer; transition:.15s; }
.bee-rk-tab:hover{ color:var(--bee-text); }
.bee-rk-tab.on{ background:var(--bee-accent); border-color:var(--bee-accent); color:var(--bee-on-accent); }
.bee-rk-tab i{ margin-right:4px; }

/* 섹션 제목(원페이지 모드 전용) */
.bee-rk-secttl{ font-size:1.15rem; font-weight:800; color:var(--bee-text); margin:6px 0 14px; }
.bee-rk-secttl i{ color:var(--bee-accent); margin-right:5px; }
.bee-rk-secttl small{ color:var(--bee-muted); font-weight:600; font-size:.8rem; margin-left:6px; }

/* 서브탭 (원글왕/댓글왕/출석왕) */
.bee-rk-subtabs{ display:inline-flex; gap:4px; padding:5px; background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:12px; margin:0 0 16px; }
.bee-rk-subtab{ padding:9px 22px; border:0; background:none; color:var(--bee-muted); font-size:.95rem; font-weight:700; border-radius:8px; cursor:pointer; }
.bee-rk-subtab.on{ background:var(--bee-accent); color:var(--bee-on-accent); }

/* 카드 + 테이블(행 = 순위 / 유저 / 값) */
.bee-rk-card{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); overflow:hidden; }
.bee-rk-card-title{ font-size:1.02rem; font-weight:800; color:var(--bee-text); padding:14px 18px; border-bottom:1px solid var(--bee-border); }
.bee-rk-card-title i{ color:var(--bee-accent); margin-right:5px; }
.bee-rk-head, .bee-rk-row{ display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:10px; padding:13px 18px; }
.bee-rk-head{ color:var(--bee-muted); font-size:.85rem; font-weight:700; background:color-mix(in srgb, var(--bee-text) 4%, transparent); }
.bee-rk-c-val{ text-align:right; }
.bee-rk-row{ border-top:1px solid color-mix(in srgb, var(--bee-border) 60%, transparent); }
.bee-rk-no{ font-weight:800; color:var(--bee-text); font-size:.95rem; }
.bee-rk-no.bee-rk-1{ color:#ffcc00; }
.bee-rk-no.bee-rk-2{ color:#c7ced6; }
.bee-rk-no.bee-rk-3{ color:#e08a4b; }
.bee-rk-user{ display:flex; align-items:center; gap:5px; min-width:0; }
.bee-rk-nick{ color:var(--bee-text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bee-rk-val{ color:var(--bee-accent); font-weight:700; font-size:.95rem; white-space:nowrap; text-align:right; }
.bee-rk-empty{ padding:30px 18px; text-align:center; color:var(--bee-muted); }

/* 활동왕 3열 (하이브리드·원페이지) — 모바일은 flex-wrap 으로 세로 적층 */
.bee-rk-cols{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.bee-rk-cols > .bee-rk-subpane{ flex:1 1 0; min-width:260px; }

/* 레이아웃별 표시 제어 */
.bee-rk-layout-onepage .bee-rk-tabs,
.bee-rk-layout-onepage .bee-rk-subtabs{ display:none; }
.bee-rk-layout-onepage .bee-rk-pane{ margin-bottom:26px; }
.bee-rk-layout-tab .bee-rk-pane{ display:none; }
.bee-rk-layout-tab .bee-rk-pane.on{ display:block; }
.bee-rk-layout-tab .bee-rk-subpane{ display:none; }
.bee-rk-layout-tab .bee-rk-subpane.on{ display:block; }
.bee-rk-layout-tab .bee-rk-cols{ display:block; }
.bee-rk-layout-hybrid .bee-rk-pane{ display:none; }
.bee-rk-layout-hybrid .bee-rk-pane.on{ display:block; }
.bee-rk-layout-hybrid .bee-rk-subtabs{ display:none; }

@media (max-width: 767.98px){
    .bee-rk-subtabs{ display:flex; }
    .bee-rk-subtab{ flex:1 1 0; padding:9px 6px; text-align:center; }
    .bee-rk-head, .bee-rk-row{ grid-template-columns:54px 1fr auto; padding:12px 14px; }
}

/* ── 컨텐츠 위젯 (apps 아님 — head.php 메인컬럼 최상단 / 행+열 빌더 출력) ── */
.bee-cw-zone{ margin-bottom:22px; }
.bee-cw-row{ display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; margin-bottom:16px; }
.bee-cw-row:last-child{ margin-bottom:0; }
.bee-cw-col{ min-width:0; }   /* grid 칸 내부 overflow 방지 */
.bee-cw-col-12{ grid-column:span 12; }
.bee-cw-col-8{ grid-column:span 8; }
.bee-cw-col-6{ grid-column:span 6; }
.bee-cw-col-4{ grid-column:span 4; }
.bee-cw-col-3{ grid-column:span 3; }
.bee-cw{ margin-bottom:16px; }
.bee-cw:last-child{ margin-bottom:0; }

/* 배너 위젯 */
.bee-cw-banner{ display:block; }
.bee-cw-banner-img{ display:block; width:100%; height:auto; border-radius:var(--bee-radius); }

/* 탭형 게시판 최신글 위젯 */
.bee-cw-latest{ background:var(--bee-surface); border:1px solid var(--bee-border); border-radius:var(--bee-radius); overflow:hidden; height:100%; display:flex; flex-direction:column; }
.bee-cw-latest-head{ padding:11px 15px; font-weight:800; color:var(--bee-text); border-bottom:1px solid var(--bee-border); }
.bee-cw-tabs{ display:flex; flex-wrap:wrap; border-bottom:1px solid var(--bee-border); }
.bee-cw-tab{ padding:10px 15px; border:0; background:none; color:var(--bee-muted); font-size:.9rem; font-weight:700; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.bee-cw-tab:hover{ color:var(--bee-text); }
.bee-cw-tab.on{ color:var(--bee-accent); border-bottom-color:var(--bee-accent); }
/* 우측 끝 게시판 바로가기 "+" (활성 탭 것만 표시) */
.bee-cw-mores{ margin-left:auto; display:flex; align-items:center; padding-right:6px; }
.bee-cw-more{ display:none; align-items:center; justify-content:center; width:28px; height:28px; color:var(--bee-muted); text-decoration:none; border-radius:6px; font-size:1rem; }
.bee-cw-more.on{ display:inline-flex; }
.bee-cw-more:hover{ color:var(--bee-accent); background:color-mix(in srgb, var(--bee-text) 6%, transparent); }
.bee-cw-panes{ flex:1; }
.bee-cw-pane{ display:none; list-style:none; margin:0; padding:8px 0; }
.bee-cw-pane.on{ display:block; }
/* 텍스트 목록 행 = index 최신글 클래스(.bee-latest-*) 재사용 → 정렬·등급뱃지 동일. 행 구분선만 보강 */
.bee-cw-pane .bee-latest-item{ border-bottom:1px solid color-mix(in srgb, var(--bee-border) 55%, transparent); }
.bee-cw-pane .bee-latest-item:last-child{ border-bottom:0; }
.bee-cw-empty{ padding:18px 15px; color:var(--bee-muted); font-size:.88rem; text-align:center; }

/* 히어로 위젯(메인) — index .bee-hero 재사용 + 칸 내 마진 0 + 글자색 변수(text_color/이미지 흰색) */
.bee-cw-hero .bee-hero{ margin-bottom:0; }
.bee-cw-hero .bee-hero-title{ color:var(--hero-text, var(--bee-text)); }
.bee-cw-hero .bee-hero-sub{ color:var(--hero-text, var(--bee-muted)); }

/* HTML 임베드 위젯 — 내부 iframe/미디어 반응형(칸 폭 넘침 방지) */
.bee-cw-html_embed{ max-width:100%; }
.bee-cw-html_embed iframe, .bee-cw-html_embed img, .bee-cw-html_embed video{ max-width:100%; }

/* 섹션 헤더 위젯(메인) — index .bee-section-head 재사용 + 이미지 아이콘/마진 정리 */
.bee-cw-section_head .bee-section-head{ margin-bottom:0; }
.bee-section-title .bee-section-icon-img{ height:1.2em; width:auto; vertical-align:-0.18em; margin-right:6px; border-radius:4px; }

/* 탭위젯 — 갤러리형 게시판(자동 감지): 썸네일 카드 그리드.
   PC·태블릿 4열 / 모바일 2열, 초과분 줄바꿈(가로 스크롤 없음). */
.bee-cw-pane-gal{ padding:12px; grid-template-columns:repeat(4, 1fr); gap:10px; }
.bee-cw-pane-gal.on{ display:grid; }
.bee-cw-pane-gal .bee-cw-gal-item{ min-width:0; }
@media (max-width: 575.98px){
    .bee-cw-pane-gal{ grid-template-columns:repeat(2, 1fr); }
}
.bee-cw-gal-item{ display:flex; flex-direction:column; gap:6px; text-decoration:none; }
.bee-cw-gal-thumb{ display:block; aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; background:color-mix(in srgb, var(--bee-text) 7%, transparent); }
.bee-cw-gal-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.bee-cw-gal-item:hover .bee-cw-gal-thumb img{ transform:scale(1.05); }
.bee-cw-gal-noimg{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--bee-muted); font-size:1.6rem; }
.bee-cw-gal-meta{ display:flex; align-items:center; gap:6px; font-size:.82rem; }
.bee-cw-gal-subj{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--bee-muted); }
.bee-cw-gal-hit{ flex:none; color:var(--bee-accent); font-weight:800; }

@media (max-width: 767.98px){
    .bee-cw-row{ grid-template-columns:1fr; gap:14px; }
    [class*="bee-cw-col-"]{ grid-column:auto !important; }
    .bee-cw-row.bee-cw-row-mhide{ display:none; }   /* "모바일에서 숨기기" ON 행 */
}