/* BAMBOARD Theme — main.css v1.3.3 — 모바일 실측 규격 재조정, 서브탭 6개 — 모바일 레이아웃 재작업 (2026-09-11) — 라이트 카드 서브라인, 조개 로고 높이
   스킨 토큰은 html[data-skin] 로 갈라진다. 다크 = 전체폭 / 라이트 = 1000px 컨테이너 */
:root{--font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,sans-serif;--container:1000px}
[data-skin="dark"]{--bg:#1a1a1a;--bg2:#222;--bg3:#2a2a2a;--line:#333;--fg:#e6e6e6;--fg2:#9a9a9a;--fg3:#6a6a6a;--accent:#e53935;--nav-bg:#5a5aff;--nav-fg:#fff;--nav-active:#e53935;--logo-a:#fff;--logo-b:#e53935;--badge-new:#e53935;--badge-cat:#3a3a3a;--btn-bg:#2b2b2b;--btn-line:#3a3a3a;--btn-primary:#5a5aff;--card-r:6px;--shadow:none;--thumb-a:#3b3b4a;--thumb-b:#2c2c36;--width:100%}
[data-skin="light"]{--bg:#f5f7fa;--bg2:#fff;--bg3:#eef2f6;--line:#e3e8ee;--fg:#222;--fg2:#666;--fg3:#999;--accent:#ff6b8a;--nav-bg:transparent;--nav-fg:#333;--nav-active:#ffe3ea;--logo-a:#4aa8e8;--logo-b:#ff6b8a;--badge-new:#ff6b8a;--badge-cat:#4aa8e8;--btn-bg:#fff;--btn-line:#dde3ea;--btn-primary:#4aa8e8;--card-r:8px;--shadow:0 1px 3px rgba(0,0,0,.08);--thumb-a:#cfd8e3;--thumb-b:#b9c4d2;--width:var(--container)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--fg);font-size:13px;line-height:1.45}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}
.bb-wrap{max-width:var(--width);margin:0 auto;padding:0 12px}
.bb-wrap.bb-narrow{max-width:var(--container)}
[data-skin="light"] .bb-wrap{padding:0 16px}
.bb-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--fg);border-radius:20px;padding:6px 12px;font-size:12px;white-space:nowrap;line-height:1.2}
.bb-btn.pri{background:var(--btn-primary);color:#fff;border-color:transparent}

/* 헤더 */
.bb-hdr{background:var(--bg2);border-bottom:1px solid var(--line)}
.bb-hdr .bb-wrap{display:flex;align-items:center;gap:16px;height:44px}
[data-skin="dark"] .bb-hdr .bb-wrap{max-width:100%}
.bb-logo{font-weight:900;font-size:19px;letter-spacing:.5px;white-space:nowrap;display:flex;align-items:center;gap:8px}
.bb-logo .a{color:var(--logo-a)}.bb-logo .b{color:var(--logo-b)}
.bb-logo .mascot{display:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--logo-a),var(--logo-b))}
[data-skin="light"] .bb-logo .mascot{display:block}
.bb-search{margin-left:auto;display:flex;align-items:center;background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:0 6px 0 12px;height:30px;width:min(300px,30vw)}
.bb-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);outline:0;font-size:12px}
.bb-search button{border:0;background:none;color:var(--fg3);font-size:16px;padding:0 4px}
.bb-auth{display:flex;align-items:center;gap:10px;font-size:12px;white-space:nowrap}
.bb-auth button{border:0;background:none;color:var(--fg)}
.bb-auth .join{display:none;background:var(--btn-primary);color:#fff;border-radius:6px;padding:7px 12px;font-weight:600}
[data-skin="light"] .bb-auth .join{display:inline-block}

/* 카테고리 */
.bb-nav{background:var(--bg2);border-bottom:1px solid var(--line)}
.bb-nav ul{list-style:none;display:flex;gap:4px;padding:6px 4px;overflow-x:auto;scrollbar-width:none}
.bb-nav ul::-webkit-scrollbar{display:none}
[data-skin="dark"] .bb-nav .bb-wrap{max-width:100%;padding:0}
[data-skin="dark"] .bb-nav ul{padding:4px}
[data-skin="dark"] .bb-nav li{flex:1 0 auto}
[data-skin="dark"] .bb-nav a{display:block;text-align:center;background:var(--nav-bg);color:var(--nav-fg);font-weight:700;padding:7px 18px;border-radius:3px;font-size:12px;white-space:nowrap}
[data-skin="dark"] .bb-nav a.on{background:var(--nav-active)}
[data-skin="light"] .bb-nav a{display:block;padding:9px 12px;font-weight:600;color:var(--nav-fg);border-radius:6px;white-space:nowrap}
[data-skin="light"] .bb-nav a.on{background:var(--nav-active);color:var(--accent)}

/* 배너 — 참조 사이트 jbanner 규격 그대로 (컨테이너 1524, 간격 4px / 모바일 2px, object-fit contain) */
.bb-ads-large,.bb-ads-medium,.bb-ads{width:100%;max-width:1524px;margin:0 auto;padding:0 4px;display:flex;flex-wrap:wrap;gap:4px}
.bb-ads-large{margin-top:8px}
.bb-ads-large+.bb-ads-medium,.bb-ads-large+.bb-ads,.bb-ads-medium+.bb-ads{margin-top:4px}
.bb-nav+.bb-ads{margin-top:8px}
.bb-ad-large{flex:0 0 100%;width:100%;aspect-ratio:1524/100;display:block}
.bb-ad-medium{flex:0 0 auto;width:calc((100% - 4px)/2);aspect-ratio:750/100;display:block}
.bb-ad{flex:0 0 auto;width:calc((100% - 4px*4)/5);max-width:525px;aspect-ratio:525/140;display:block;overflow:hidden;background:var(--bg3)}
.bb-ad-large img,.bb-ad-medium img,.bb-ad img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}
[data-skin="light"] .bb-ads-large,[data-skin="light"] .bb-ads-medium,[data-skin="light"] .bb-ads{max-width:var(--container)}
.bb-ad.inquiry,.bb-ad-inquiry-text{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%;color:var(--fg2);font-size:12px;font-weight:700;text-align:center}
.bb-ad.inquiry{background:var(--bg3);border:1px dashed var(--line)}
.bb-ad-inquiry-text small{font-weight:400;font-size:10px;margin-top:2px;color:var(--fg3)}
.bb-ftr-toggle,.bb-top{display:none}
.bb-ftr-toggle{width:100%;padding:12px;border:1px solid var(--line);background:var(--bg3);color:var(--fg);border-radius:8px;font-size:14px;font-weight:600;margin:4px 0}
.bb-top{position:fixed;right:14px;bottom:18px;width:52px;height:52px;border-radius:12px;border:0;background:var(--accent);color:#fff;font-size:26px;line-height:1;z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.bb-top.show{opacity:1;pointer-events:auto}

/* 목록 */
.bb-list{padding:12px 0 24px}
[data-skin="dark"] .bb-list .bb-wrap{max-width:100%;padding:0 6px}
.bb-h1{font-size:16px;margin:4px 0 10px}
.bb-subtabs{display:flex;gap:4px;margin-bottom:8px}
.bb-subtabs a{padding:5px 10px;border:1px solid var(--line);background:var(--bg2);border-radius:4px;font-weight:600;font-size:12px}
.bb-subtabs a.on{background:var(--accent);color:#fff;border-color:transparent}
.bb-btn.bb-like.on,.bb-btn.bb-jjim.on{background:var(--accent);color:#fff;border-color:transparent}
.bb-meta .is-mine .bb-ico,.bb-meta .is-mine{color:var(--accent)}
.bb-count{color:var(--fg2);margin-bottom:8px}
.bb-count b{color:var(--btn-primary)}
.bb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 6px}
[data-skin="light"] .bb-grid{grid-template-columns:repeat(5,1fr);gap:16px 12px}
.bb-card{background:var(--bg2);border-radius:var(--card-r);overflow:hidden;box-shadow:var(--shadow)}
[data-skin="dark"] .bb-card{border:1px solid var(--line)}
.bb-thumb{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(160deg,var(--thumb-a),var(--thumb-b));overflow:hidden}
.bb-thumb img{width:100%;height:100%;object-fit:cover}
.bb-thumb-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--fg3);font-size:11px}
.bb-new{position:absolute;top:4px;left:4px;background:var(--badge-new);color:#fff;font-size:10px;font-weight:800;padding:1px 5px;border-radius:2px}
.bb-cat{position:absolute;top:4px;right:4px;background:var(--badge-cat);color:#fff;font-size:10px;padding:1px 5px;border-radius:2px}
.bb-dur{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.75);color:#fff;font-size:10px;padding:1px 5px;border-radius:2px}
.bb-cbody{padding:6px 7px 7px}
.bb-ttl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;font-weight:600;line-height:1.35;height:2.7em}
.bb-meta{margin-top:5px;font-size:11px;color:var(--fg2);display:flex;gap:8px}
.bb-meta span{display:inline-flex;align-items:center;gap:3px}
.bb-ico{width:13px;height:13px;display:inline-block;opacity:.85}
.bb-date{display:flex;align-items:center;gap:3px}
.bb-logo-img{height:auto;width:180px;display:block}
[data-skin="light"] .bb-hdr .bb-wrap{height:56px}
.bb-ftr .bb-logo-img{width:150px!important}
.bb-sub{margin-top:5px;font-size:11px;color:var(--fg3);display:flex;justify-content:space-between;align-items:center}
.bb-sub .bb-cat-link{color:var(--btn-primary);font-weight:600}
.bb-meta .bb-meta-dur{margin-left:auto}

.bb-date{margin-top:3px;font-size:10px;color:var(--fg3)}
.bb-pager{display:flex;justify-content:center;gap:4px;margin-top:20px;flex-wrap:wrap}
.bb-pager a{min-width:30px;height:30px;padding:0 8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--bg2);border-radius:4px;font-size:12px}
.bb-pager a.on{background:var(--accent);color:#fff;border-color:transparent}
.bb-empty{padding:26px;text-align:center;color:var(--fg3);background:var(--bg2);border:1px solid var(--line);border-radius:6px;font-size:12px}

/* 플레이어 하단 텍스트 배너 */
.bb-text-banners{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.bb-tb{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #c9a227;border-left:4px solid #c9a227;border-radius:6px;background:var(--bg2);font-size:13px;font-weight:600}
.bb-tb-ico{color:#c9a227}
.bb-tb-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-tb-go{border:1px solid var(--btn-line);border-radius:14px;padding:3px 10px;font-size:11px;font-weight:700;color:var(--fg2);white-space:nowrap}
.bb-mbox .bb-text-banners{padding:0 12px}
[data-skin="light"] .bb-tb{border-color:var(--btn-primary);border-left-color:var(--btn-primary)}
[data-skin="light"] .bb-tb-ico{color:var(--btn-primary)}

/* 상세 */
.bb-detail,.bb-page{padding:12px 0 24px}
.bb-crumb{font-size:12px;color:var(--fg2);margin-bottom:10px;display:flex;gap:6px;flex-wrap:wrap}
.bb-crumb b{color:var(--fg);font-weight:600}
.bb-player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--card-r);overflow:hidden;box-shadow:var(--shadow)}
.bb-player iframe,.bb-player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.bb-player-empty{display:flex;align-items:center;justify-content:center;color:#888;font-size:13px}
.bb-dtitle{font-size:18px;font-weight:700;margin:16px 0 4px;line-height:1.35}
.bb-dsub{color:var(--fg2);font-size:12px}
.bb-actbar{display:flex;align-items:center;gap:8px;margin-top:14px;padding:8px 10px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;flex-wrap:wrap}
[data-skin="dark"] .bb-actbar{background:transparent;border:0;padding:8px 0}
.bb-actbar .stat{font-size:12px;color:var(--fg2);display:flex;gap:12px}
.bb-actbar .stat b{color:var(--fg)}
.bb-actbar .btns{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.bb-desc{margin-top:14px;color:var(--fg2);font-size:12px;line-height:1.6}
.bb-sec{margin-top:22px}
.bb-sec h3,.bb-cmt h3{font-size:14px;display:flex;align-items:center;gap:6px;color:var(--btn-primary)}
[data-skin="dark"] .bb-sec h3{color:var(--fg)}
.bb-sec h3 small{margin-left:auto;font-weight:400;color:var(--fg3)}
.bb-sec .bb-empty{margin-top:10px}
.bb-row5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.bb-cmt{margin-top:22px}
.bb-cmt h3{border-bottom:2px solid var(--line);padding-bottom:6px;color:var(--fg)}
.bb-cmt h3 b{color:var(--accent)}
.bb-cmt .bb-empty{border:0;background:transparent;padding:50px 0;color:var(--fg2)}
.bb-cmt .bb-empty div{font-size:14px;font-weight:600;color:var(--fg);margin-bottom:4px}
.bb-content{line-height:1.7;font-size:14px}
.bb-content h2,.bb-content h3{margin:20px 0 8px}
.bb-content p,.bb-content ul,.bb-content ol{margin-bottom:12px}
.bb-content ul,.bb-content ol{padding-left:20px}

/* 푸터 */
.bb-ftr{margin-top:20px;background:var(--bg2);border-top:1px solid var(--line);padding:26px 0 18px;font-size:12px;color:var(--fg2)}
.bb-ftr .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bb-ftr .top .bb-btn:first-of-type{margin-left:auto}
.bb-ftr .cols{display:grid;grid-template-columns:1.2fr 1.2fr .8fr;gap:24px;margin-top:20px}
.bb-ftr .cols p{margin-bottom:8px;line-height:1.55}
.bb-ftr .tag{display:inline-block;background:var(--bg3);color:var(--fg2);font-size:10px;padding:2px 6px;border-radius:3px;margin-bottom:8px}
.bb-ftr .warn{color:var(--accent);font-weight:700}
.bb-ftr dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.bb-ftr dt{color:var(--fg3)}
.bb-ftr .copy{text-align:center;margin-top:22px;color:var(--fg3);font-size:11px}
.bb-partners{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.bb-partners a{border:1px solid var(--line);border-radius:4px;padding:3px 8px;font-size:11px}

/* 모달 */
.bb-modal{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.bb-modal[hidden]{display:none}
.bb-mbox{width:min(1000px,100%);background:var(--bg2);border-radius:8px;overflow:hidden}
.bb-mbox .bb-player{border-radius:0}
.bb-mfoot{padding:12px 14px;display:flex;align-items:center;gap:10px}
.bb-mtitle{margin:0;font-size:15px;flex:1;font-weight:700;line-height:1.35}
.bb-mclose{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;background:#fff;color:#000;border:0;font-size:20px;font-weight:700;z-index:2}
body.bb-modal-open{overflow:hidden}

/* 토스트 */
.bb-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#000;color:#fff;padding:10px 18px;border-radius:20px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:60}
.bb-toast.show{opacity:.92}

/* 모바일 — 참조 사이트 실측 규격(412px 뷰포트 기준): 로고 90px, 검색 34px, 카테고리 4열 26px, 배너 3열, 서브탭 6개 32px, 카드 2열 제목 2줄 */
@media (max-width:768px){
  body{font-size:14px}
  .bb-hdr .bb-wrap{height:48px;padding:0 10px;gap:8px}
  .bb-logo-img{width:92px!important}
  .bb-search{width:auto;flex:1;height:34px;border-radius:6px;padding:0 4px 0 10px}
  .bb-search input{font-size:14px}
  .bb-search button{font-size:18px}
  .bb-auth{gap:6px;font-size:12px;flex-direction:column;align-items:flex-end;line-height:1.1}
  .bb-auth .login{display:inline}
  [data-skin="dark"] .bb-auth .join{display:inline;background:none;color:var(--fg);padding:0;font-weight:400}
  .bb-nav ul,[data-skin="dark"] .bb-nav ul{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:6px;overflow:visible}
  [data-skin="dark"] .bb-nav li{flex:none}
  .bb-nav a,[data-skin="dark"] .bb-nav a,[data-skin="light"] .bb-nav a{display:block;text-align:center;padding:7px 2px;font-size:15px;font-weight:700;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  [data-skin="light"] .bb-nav a{background:var(--bg3)}
  .bb-ads-large,.bb-ads-medium,.bb-ads,[data-skin="light"] .bb-ads-large,[data-skin="light"] .bb-ads-medium,[data-skin="light"] .bb-ads{gap:2px;padding:0 2px;max-width:none}
  .bb-ad-medium{flex:0 0 100%;width:100%}
  .bb-ad{width:calc((100% - 2px)/2);max-width:none} /* 모바일 일반배너 2열 */
  .bb-ad-inquiry-text{font-size:11px}
  .bb-list .bb-wrap,[data-skin="dark"] .bb-list .bb-wrap{padding:0 6px}
  .bb-subtabs{gap:4px;margin:8px 0 8px}
  .bb-subtabs a{flex:1;text-align:center;padding:8px 0;font-size:14px;border-radius:5px}
  .bb-count{font-size:15px;margin-bottom:8px}
  .bb-count b{font-size:16px}
  .bb-grid,[data-skin="light"] .bb-grid{grid-template-columns:repeat(2,1fr);gap:10px 6px}
  .bb-card{border-radius:8px}
  .bb-new,.bb-cat{font-size:12px;padding:2px 7px;top:6px}
  .bb-new{left:6px}.bb-cat{right:6px}
  .bb-dur{font-size:13px;padding:2px 7px;bottom:6px;right:6px}
  .bb-cbody{padding:8px 8px 10px}
  .bb-ttl{font-size:15px;line-height:1.35;height:2.7em;-webkit-line-clamp:2}
  .bb-meta{justify-content:center;gap:12px;font-size:14px;margin-top:8px}
  .bb-ico{width:16px;height:16px}
  .bb-date,.bb-sub{font-size:12px;margin-top:4px}
  .bb-pager{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:16px}
  .bb-pager a{height:38px;min-width:0;padding:0;font-size:15px;font-weight:700;border-radius:6px}
  .bb-pager a:nth-child(11){grid-column:3/6}.bb-pager a:nth-child(12){grid-column:6/9}
  .bb-row5{grid-template-columns:repeat(2,1fr)}
  .bb-row5 .bb-card:nth-child(n+5){display:none}
  .bb-ftr{font-size:13px;padding:20px 0 60px}
  .bb-ftr .top{flex-direction:column;align-items:stretch;gap:8px}
  .bb-ftr .top .bb-btn{margin-left:0;justify-content:center;padding:11px;font-size:14px}
  .bb-ftr .cols{grid-template-columns:1fr;gap:14px}
  .bb-ftr-toggle{display:block}
  .bb-ftr-en{display:none}
  body.bb-en-open .bb-ftr-en{display:block}
  .bb-top{display:block;width:46px;height:46px;font-size:22px}
  .bb-actbar .btns{margin-left:0;width:100%}
  .bb-dtitle{font-size:16px}
  .bb-mclose{top:auto;bottom:calc(100% - 50px)}
  .bb-modal{padding:8px}
}