/**
 * NEW BASIC — nb-styles.css
 * 스타일 부스터 : <html data-dxs="flat|card|soft">  (마크업·레이아웃은 동일, 색·선·모서리·면만 바뀜)
 *  flat = 기본 디자인(이 파일에서 아무것도 덮지 않음)
 *  새 스타일 추가 : 아래 블록 하나 복사 → data-dxs 값 변경 → layout/_nbstyle.php 목록에 한 줄
 *
 * 대상 : 배경(body) · 사이드 박스(ASIDE) · 본문 박스(BODY) · 메인 최신글 박스(CARD)
 *   ASIDE = .nc-side-block · .dxbl-side · .dxql-side · .dxa-sb(내 RPM)
 *   BODY  = .nc-col-main
 *   CARD  = .nc-wg-box · .nh-com-card · .nh-gal-card · .dxbl-card · .dxql-card · .dxql-item
 * 그림자(box-shadow) 사용 안 함. 다크모드는 body.dark 값으로 별도 지정.
 */

/* ═══ 공통 : 변수 (스타일별로 값만 바뀜) ═══ */
html[data-dxs="card"] { --nb-page:#e9e8e0; --nb-box:#fffefa; --nb-line:#d3d4c9; --nb-r:6px;  --nb-pad:20px; --nb-pad-body:10px; }
html[data-dxs="soft"] { --nb-page:#e6ece8; --nb-box:#ffffff; --nb-line:transparent; --nb-r:20px; --nb-pad:22px; --nb-pad-body:12px; }
html[data-dxs="card"] body.dark { --nb-page:#0b1220; --nb-box:#1e293b; --nb-line:#334155; }
html[data-dxs="soft"] body.dark { --nb-page:#0b1220; --nb-box:#1e293b; --nb-line:transparent; }

/* ═══ 공통 : 같은 규칙을 card · soft 가 변수로 공유 ═══ */
html[data-dxs="card"] body.nc-body,
html[data-dxs="soft"] body.nc-body { background: var(--nb-page) !important; }
html[data-dxs="card"] body.nc-body #dx-header,
html[data-dxs="soft"] body.nc-body #dx-header { background: var(--nb-page); }

/* 사이드 박스 */
html[data-dxs="card"] .nc-side-block, html[data-dxs="soft"] .nc-side-block,
html[data-dxs="card"] .dxbl-side,     html[data-dxs="soft"] .dxbl-side,
html[data-dxs="card"] .dxql-side,     html[data-dxs="soft"] .dxql-side,
html[data-dxs="card"] .dxa-sb,       html[data-dxs="soft"] .dxa-sb {
  background: var(--nb-box) !important;
  border: 1px solid var(--nb-line) !important;
  border-radius: var(--nb-r) !important;
  padding: var(--nb-pad) !important;
}
html[data-dxs="card"] .nc-side-block.dx-cat-nav,
html[data-dxs="soft"] .nc-side-block.dx-cat-nav { background: var(--nb-box) !important; border: 1px solid var(--nb-line) !important; border-radius: var(--nb-r) !important; }
html[data-dxs="card"] body.dark .nc-side-block.dx-cat-nav,
html[data-dxs="soft"] body.dark .nc-side-block.dx-cat-nav { background: var(--nb-box) !important; border-color: var(--nb-line) !important; }

/* 본문 박스 (목록 · 상세 · 페이지가 들어가는 영역) */
html[data-dxs="card"] .nc-col-main, html[data-dxs="soft"] .nc-col-main {
  background: var(--nb-box);
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-r);
  padding: var(--nb-pad-body);
}
/* 스킨이 자체 테두리 박스(.dx-list-wrap)를 가진 경우 이중 테두리 방지 */
html[data-dxs="card"] .nc-col-main .dx-list-wrap, html[data-dxs="soft"] .nc-col-main .dx-list-wrap { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
html[data-dxs="card"] .nc-col-main .dx-lt-thead, html[data-dxs="soft"] .nc-col-main .dx-lt-thead { background: transparent !important; }

/* 메인 최신글 · 위젯 · 플러그인 카드 박스 */
html[data-dxs="card"] .nc-wg-box,  html[data-dxs="soft"] .nc-wg-box,
html[data-dxs="card"] .nh-com-card, html[data-dxs="soft"] .nh-com-card,
html[data-dxs="card"] .nh-gal-card, html[data-dxs="soft"] .nh-gal-card,
html[data-dxs="card"] .dxbl-card,  html[data-dxs="soft"] .dxbl-card,
html[data-dxs="card"] .dxql-card,  html[data-dxs="soft"] .dxql-card,
html[data-dxs="card"] .dxql-item,  html[data-dxs="soft"] .dxql-item {
  background: var(--nb-box) !important;
  border: 1px solid var(--nb-line) !important;
  border-radius: var(--nb-r) !important;
  overflow: hidden;
}
html[data-dxs="card"] .dxql-card .dxql-top,   html[data-dxs="soft"] .dxql-card .dxql-top   { border-bottom-color: var(--border) !important; }
html[data-dxs="card"] .dxql-card .dxql-stats, html[data-dxs="soft"] .dxql-card .dxql-stats { border-top-color: var(--border) !important; }
html[data-dxs="card"] .dxql-card .dxql-go,    html[data-dxs="soft"] .dxql-card .dxql-go    { border-top-color: var(--border) !important; }

/* ═══ card : 채움 카드 (각이 살짝 있는 면 구분) ═══ */
html[data-dxs="card"] .nc-section-head { border-bottom-color: var(--border); }

/* ═══ soft : 소프트 라운드 (더 둥글고 선 없이 면으로 구분) ═══ */
html[data-dxs="soft"] .nc-section-head { border-bottom-color: transparent; padding-bottom: 6px; }
html[data-dxs="soft"] .nc-side-block { border-top-width: 1px !important; }
html[data-dxs="soft"] .nc-btn, html[data-dxs="soft"] .nc-iconbtn { border-color: transparent; background: var(--nb-box); }
html[data-dxs="soft"] body.dark .nc-btn, html[data-dxs="soft"] body.dark .nc-iconbtn { background: var(--bg-card); }

/* 모바일 : 본문 박스 여백 축소, 가로 스크롤 방지 */
@media (max-width: 768px) {
  html[data-dxs="card"], html[data-dxs="soft"] { --nb-pad: 14px; --nb-pad-body: 6px; }
  html[data-dxs="soft"] { --nb-r: 16px; }
  html[data-dxs="card"] .nc-col-main, html[data-dxs="soft"] .nc-col-main { min-width: 0; overflow-x: auto; }
}

/* 커뮤니티 위젯(인기글·최신글·최신댓글) 박스 안쪽 여백 */
html[data-dxs="card"] .nc-wg-box, html[data-dxs="soft"] .nc-wg-box { padding: var(--nb-pad) !important; }

/* ═══ 색상 사용자 설정 (라이트 모드) ═══
   <html data-nbc="page head ..."> 에 든 항목만 적용, 값은 html 의 --nbc-* 변수.
   관리자 패널은 이 변수만 바꾸므로 미리보기도 즉시 반영됩니다. */
html[data-nbc~="page"] body.nc-body:not(.dark) { --bg-body: var(--nbc-page); --nb-page: var(--nbc-page); background: var(--nbc-page) !important; }
/* 배경이 어두우면 다크모드 팔레트처럼 : 글자 밝게, 박스·헤더·선 어둡게 (박스·헤더 색을 직접 지정하면 그 값이 우선) */
html[data-nbc~="pagedark"] body.nc-body:not(.dark) { --text-main: #f1f5f9; --text-muted: #94a3b8; --bg-card: #1e293b; --nb-box: #1e293b; --border: #334155; --nb-line: #334155; --hover-row: #243044; --p: var(--nc-acid); --nc-on-p: #20231f; --nc-ring: #20231f; --bg-header: #0f172a; --bg-topbar: #0f172a; --nc-line-strong: #475569; }
html[data-nbc~="pagedark"] body.nc-body:not(.dark) .dxql-card, html[data-nbc~="pagedark"] body.nc-body:not(.dark) .dxql-item { background: var(--bg-card) !important; border-color: var(--border) !important; }
html[data-nbc~="pagedark"] body.nc-body:not(.dark) #nc-head, html[data-nbc~="pagedark"] body.nc-body:not(.dark) #nc-nav, html[data-nbc~="pagedark"] body.nc-body:not(.dark) .nc-topbar { background: #0f172a; }
/* 헤더 색 변수는 헤더 영역 안에서만 바꿈 : 본문·플러그인 요소가 같은 변수를 쓰다가 글자와 배경이 어긋나는 문제 방지 */
html[data-nbc~="head"] body.nc-body:not(.dark) #nc-head,
html[data-nbc~="head"] body.nc-body:not(.dark) #nc-nav,
html[data-nbc~="head"] body.nc-body:not(.dark) .nc-topbar,
html[data-nbc~="head"] body.nc-body:not(.dark) #dx-header,
html[data-nbc~="head"] body.nc-body:not(.dark) .dx-topbar,
html[data-nbc~="head"] body.nc-body:not(.dark) .nc-drop,
html[data-nbc~="head"] body.nc-body:not(.dark) #dxMobNav,
html[data-nbc~="head"] body.nc-body:not(.dark) .dx-mob-panel { --bg-header: var(--nbc-head); --bg-topbar: var(--nbc-head); }
html[data-nbc~="head"] body.nc-body:not(.dark) #nc-head, html[data-nbc~="head"] body.nc-body:not(.dark) #nc-nav,
html[data-nbc~="head"] body.nc-body:not(.dark) .nc-topbar, html[data-nbc~="head"] body.nc-body:not(.dark) #dx-header { background: var(--nbc-head) !important; }
html[data-nbc~="headtext"] body.nc-body:not(.dark) #nc-head, html[data-nbc~="headtext"] body.nc-body:not(.dark) #nc-nav,
html[data-nbc~="headtext"] body.nc-body:not(.dark) .nc-topbar { --text-main: var(--nbc-headtext); --text-muted: var(--nbc-headtext); color: var(--nbc-headtext); }
html[data-nbc~="headtext"] body.nc-body:not(.dark) #nc-head a, html[data-nbc~="headtext"] body.nc-body:not(.dark) #nc-nav a:not(.nc-drop-link),
html[data-nbc~="headtext"] body.nc-body:not(.dark) .nc-topbar a, html[data-nbc~="headtext"] body.nc-body:not(.dark) .nc-topbar b { color: var(--nbc-headtext) !important; }
html[data-nbc~="foot"] body.nc-body:not(.dark) .nc-footer, html[data-nbc~="foot"] body.nc-body:not(.dark) .nc-statbar { background: var(--nbc-foot) !important; }
html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-footer, html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-footer p,
html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-footer a, html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-footer li,
html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-footer li span, html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-footer .nc-foot-logo,
html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-footer span, html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-statbar,
html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-statbar span, html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-statbar b { color: var(--nbc-foottext) !important; }
html[data-nbc~="box"] body.nc-body:not(.dark) { --bg-card: var(--nbc-box); --nb-box: var(--nbc-box); }
html[data-nbc~="box"] body.nc-body:not(.dark) .nc-side-block, html[data-nbc~="box"] body.nc-body:not(.dark) .nc-wg-box,
html[data-nbc~="box"] body.nc-body:not(.dark) .nc-col-main, html[data-nbc~="box"] body.nc-body:not(.dark) .nh-com-card,
html[data-nbc~="box"] body.nc-body:not(.dark) .nh-gal-card, html[data-nbc~="box"] body.nc-body:not(.dark) .dxbl-card,
html[data-nbc~="box"] body.nc-body:not(.dark) .dxql-card, html[data-nbc~="box"] body.nc-body:not(.dark) .dxql-item,
html[data-nbc~="box"] body.nc-body:not(.dark) .dxql-side, html[data-nbc~="box"] body.nc-body:not(.dark) .dxbl-side,
html[data-nbc~="box"] body.nc-body:not(.dark) .dxa-sb { background-color: var(--nbc-box) !important; }
html[data-nbc~="line"] body.nc-body:not(.dark) { --border: var(--nbc-line); --nb-line: var(--nbc-line); }
html[data-nbc~="line"] body.nc-body:not(.dark) .nc-side-block, html[data-nbc~="line"] body.nc-body:not(.dark) .nc-wg-box,
html[data-nbc~="line"] body.nc-body:not(.dark) .nc-col-main, html[data-nbc~="line"] body.nc-body:not(.dark) .nh-com-card,
html[data-nbc~="line"] body.nc-body:not(.dark) .nh-gal-card, html[data-nbc~="line"] body.nc-body:not(.dark) .dxbl-card,
html[data-nbc~="line"] body.nc-body:not(.dark) .dxql-card, html[data-nbc~="line"] body.nc-body:not(.dark) .dxql-item,
html[data-nbc~="line"] body.nc-body:not(.dark) .dxql-side, html[data-nbc~="line"] body.nc-body:not(.dark) .dxbl-side,
html[data-nbc~="line"] body.nc-body:not(.dark) .dxa-sb { border-color: var(--nbc-line) !important; }
/* 푸터 로고 심볼은 라임 배경 위 글자라 푸터 글자색 설정에서 제외 */
html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-footer .nc-logo-symbol, html[data-nbc~="foottext"] body.nc-body:not(.dark) .nc-footer .nc-logo-symbol * { color: var(--nc-on-acid, #20231f) !important; }

/* 박스·헤더·푸터 색에 따라 글자 자동 전환 (글자색을 직접 지정하면 그 값이 우선) */
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .nc-side-block,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .nc-wg-box,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .nc-col-main,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .nh-com-card,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .nh-gal-card,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .dxbl-card,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .dxql-card,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .dxql-item,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .dxql-side,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .dxbl-side,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .dxa-sb,
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .dx-list-wrap { --text-main: #20231f; --text-muted: #6d6f66; }
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .nc-side-block,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .nc-wg-box,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .nc-col-main,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .nh-com-card,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .nh-gal-card,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .dxbl-card,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .dxql-card,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .dxql-item,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .dxql-side,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .dxbl-side,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .dxa-sb,
html[data-nbc~="boxdark"] body.nc-body:not(.dark) .dx-list-wrap { --text-main: #f1f5f9; --text-muted: #94a3b8; }
html[data-nbc~="headdark"] body.nc-body:not(.dark) #nc-head, html[data-nbc~="headdark"] body.nc-body:not(.dark) #nc-nav, html[data-nbc~="headdark"] body.nc-body:not(.dark) .nc-topbar { --text-main: #f1f5f9; --text-muted: #94a3b8; color: #f1f5f9; }
html[data-nbc~="headdark"] body.nc-body:not(.dark) #nc-head a, html[data-nbc~="headdark"] body.nc-body:not(.dark) #nc-nav a:not(.nc-drop-link), html[data-nbc~="headdark"] body.nc-body:not(.dark) .nc-topbar a, html[data-nbc~="headdark"] body.nc-body:not(.dark) .nc-topbar b { color: #f1f5f9 !important; }
html[data-nbc~="headlight"] body.nc-body:not(.dark) #nc-head, html[data-nbc~="headlight"] body.nc-body:not(.dark) #nc-nav, html[data-nbc~="headlight"] body.nc-body:not(.dark) .nc-topbar { --text-main: #20231f; --text-muted: #6d6f66; color: #20231f; }
html[data-nbc~="headlight"] body.nc-body:not(.dark) #nc-head a, html[data-nbc~="headlight"] body.nc-body:not(.dark) #nc-nav a:not(.nc-drop-link), html[data-nbc~="headlight"] body.nc-body:not(.dark) .nc-topbar a, html[data-nbc~="headlight"] body.nc-body:not(.dark) .nc-topbar b { color: #20231f !important; }
html[data-nbc~="footlight"] body.nc-body:not(.dark) .nc-footer, html[data-nbc~="footlight"] body.nc-body:not(.dark) .nc-footer p, html[data-nbc~="footlight"] body.nc-body:not(.dark) .nc-footer a, html[data-nbc~="footlight"] body.nc-body:not(.dark) .nc-footer li, html[data-nbc~="footlight"] body.nc-body:not(.dark) .nc-footer li span, html[data-nbc~="footlight"] body.nc-body:not(.dark) .nc-footer .nc-foot-logo, html[data-nbc~="footlight"] body.nc-body:not(.dark) .nc-statbar, html[data-nbc~="footlight"] body.nc-body:not(.dark) .nc-statbar span, html[data-nbc~="footlight"] body.nc-body:not(.dark) .nc-statbar b { color: #20231f !important; }
html[data-nbc~="footlight"] body.nc-body:not(.dark) .nc-footer .nc-foot-col h4 { color: #20231f !important; }

/* 안쪽 여백 사용자 설정 (스타일과 무관하게 적용) */
html[data-nbp~="body"] .nc-col-main { padding: var(--nbo-body) !important; }
html[data-nbp~="aside"] .nc-side-block, html[data-nbp~="aside"] .dxbl-side, html[data-nbp~="aside"] .dxql-side, html[data-nbp~="aside"] .dxa-sb { padding: var(--nbo-aside) !important; }
html[data-nbp~="card"] .nc-wg-box, html[data-nbp~="card"] .nh-com-card { padding: var(--nbo-card) !important; }
/* 모바일(768px 이하) 전용 안쪽 여백 : 지정한 항목만 PC 값을 덮어씀 */
@media (max-width: 768px) {
  html[data-nbp~="body_m"] .nc-col-main { padding: var(--nbo-body_m) !important; }
  html[data-nbp~="aside_m"] .nc-side-block, html[data-nbp~="aside_m"] .dxbl-side, html[data-nbp~="aside_m"] .dxql-side, html[data-nbp~="aside_m"] .dxa-sb { padding: var(--nbo-aside_m) !important; }
  html[data-nbp~="card_m"] .nc-wg-box, html[data-nbp~="card_m"] .nh-com-card { padding: var(--nbo-card_m) !important; }
}

/* 헤더 색을 지정하면 드롭다운 메뉴도 같은 색 · 헤더 선(테두리)은 헤더 밝기에 맞춰 정리 */
html[data-nbc~="hdark"] body.nc-body:not(.dark) #nc-head, html[data-nbc~="hdark"] body.nc-body:not(.dark) #nc-nav, html[data-nbc~="hdark"] body.nc-body:not(.dark) .nc-drop { --border: rgba(255,255,255,.2); }
html[data-nbc~="hlight"] body.nc-body:not(.dark) #nc-head, html[data-nbc~="hlight"] body.nc-body:not(.dark) #nc-nav, html[data-nbc~="hlight"] body.nc-body:not(.dark) .nc-drop { --border: rgba(0,0,0,.14); }
html[data-nbc~="head"] body.nc-body:not(.dark) .nc-drop { background: var(--nbc-head) !important; border-color: var(--border) !important; }
html[data-nbc~="head"] body.nc-body:not(.dark) #nc-nav .nc-drop-link:hover { background: rgba(128,128,128,.22) !important; }
html[data-nbc~="head"] body.nc-body:not(.dark) #nc-nav .nc-drop-link.is-active { background: var(--nc-acid) !important; color: #20231f !important; }
html[data-nbc~="head"][data-nbc~="headtext"] body.nc-body:not(.dark) #nc-nav .nc-drop-link:not(.is-active) { color: var(--nbc-headtext) !important; }
html[data-nbc~="headdark"] body.nc-body:not(.dark) #nc-nav .nc-drop-link:not(.is-active) { color: #f1f5f9 !important; }
html[data-nbc~="headlight"] body.nc-body:not(.dark) #nc-nav .nc-drop-link:not(.is-active) { color: #20231f !important; }

/* 알림 패널·드롭다운 같은 헤더 안 팝업은 헤더 글자색을 상속하지 않고 자기 배경(박스색)에 맞춘다 */
html[data-nbc] body.nc-body:not(.dark) .nc-notif-panel { --text-main: #20231f; --text-muted: #6d6f66; --border: #dedfd7; color: #20231f; }
html[data-nbc~="pagedark"] body.nc-body:not(.dark) .nc-notif-panel, html[data-nbc~="boxdark"] body.nc-body:not(.dark) .nc-notif-panel { --text-main: #f1f5f9; --text-muted: #94a3b8; --border: #334155; color: #f1f5f9; }
html[data-nbc~="boxlight"] body.nc-body:not(.dark) .nc-notif-panel { --text-main: #20231f; --text-muted: #6d6f66; --border: #dedfd7; color: #20231f; }
html[data-nbc][data-dxs] body.nc-body:not(.dark) #nc-head .nc-notif-panel a, html[data-nbc][data-dxs] body.nc-body:not(.dark) #nc-head .nc-notif-panel button,
html[data-nbc][data-dxs] body.nc-body:not(.dark) #nc-nav .nc-notif-panel a, html[data-nbc][data-dxs] body.nc-body:not(.dark) #nc-nav .nc-notif-panel button { color: var(--text-main) !important; }

/* 포인트색 · 배지색 : 선택하면 글자는 밝기에 따라 자동 전환 */
html[data-nbc~="accent"] body.nc-body:not(.dark) { --nc-acid: var(--nbc-accent); --nc-on-acid: var(--nbc-accenton); }
html[data-nbc~="accent"] body.nc-body:not(.dark) .nc-chip-lv, html[data-nbc~="accent"] body.nc-body:not(.dark) .nc-mob-ava,
html[data-nbc~="accent"] body.nc-body:not(.dark) .nh .nh-btn-acid, html[data-nbc~="accent"] body.nc-body:not(.dark) .nc-wg-rank.top,
html[data-nbc~="accent"] body.nc-body:not(.dark) .mp-lv-badge, html[data-nbc~="accent"] body.nc-body:not(.dark) .mp-avatar,
html[data-nbc~="accent"] body.nc-body:not(.dark) .fr-sub-tab.active em, html[data-nbc~="accent"] body.nc-body:not(.dark) #dx-fab-write,
html[data-nbc~="accent"] body.nc-body:not(.dark) .nh-lb-new, html[data-nbc~="accent"] body.nc-body:not(.dark) .nh .nh-band-actions a:first-child,
html[data-nbc~="accent"] body.nc-body:not(.dark) .nc-drop-link.is-active, html[data-nbc~="accent"] body.nc-body:not(.dark) #nc-nav .nc-drop-link.is-active { color: var(--nbc-accenton) !important; }
html[data-nbc~="badge"] body.nc-body:not(.dark) { --nc-coral: var(--nbc-badge); }
html[data-nbc~="badge"] body.nc-body:not(.dark) .nc-new, html[data-nbc~="badge"] body.nc-body:not(.dark) .nc-notif-badge { background: var(--nbc-badge) !important; color: var(--nbc-badgeon) !important; }

/* 스타일 부스터 · 새 박스 (기본 모양 — 선택 영역 패널에서 자유롭게 바꿈) */
.nbx { box-sizing: border-box; display: block; max-width: 100%; margin: 0 0 16px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-main); line-height: 1.6; }
.nbx img { max-width: 100%; height: auto; display: block; }
.nbx .nbx-i { margin-bottom: 10px; }
.nbx { text-align: var(--nbx-ta, inherit); }
.nbx .nbx-t { font-size: var(--nbx-tz, 16px); font-weight: var(--nbx-tw, 800); font-family: var(--nbx-tf, inherit); letter-spacing: var(--nbx-ts, normal); color: var(--nbx-tc, inherit); margin-bottom: 6px; line-height: 1.35; }
.nbx .nbx-b { font-size: var(--nbx-bz, inherit); font-weight: var(--nbx-bw, inherit); font-family: var(--nbx-bf, inherit); letter-spacing: var(--nbx-bs, normal); color: var(--nbx-bc, inherit); }
.nbx .nbx-b p { margin: 0 0 6px; }
/* 글자를 이미지 위에 올린 박스 : 이미지는 바탕, 어둡게/밝게는 덮개 층(그림자 아님) */
.nbx-ov { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: var(--nbx-jv, center); align-items: var(--nbx-ah, center); min-height: var(--nbx-h, 320px); padding: 28px; border: 0; background: #2a2d29; color: #fff; text-align: var(--nbx-ta, center); }
.nbx-ov::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--nbx-ovc, #000); opacity: var(--nbx-ovo, .3); z-index: 1; pointer-events: none; }
.nbx-ov .nbx-i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: var(--nbx-fit, cover); margin: 0; z-index: 0; }
.nbx-ov > :not(.nbx-i) { position: relative; z-index: 2; max-width: 100%; }
.nbx-ov .nbx-t { color: var(--nbx-tc, #fff); font-size: var(--nbx-tz, 28px); }
.nbx-ov .nbx-b { color: var(--nbx-bc, #fff); }
body.dark .nbx-ov .nbx-t { color: var(--nbx-tc, #fff) !important; }
body.dark .nbx-ov .nbx-b, body.dark .nbx-ov .nbx-b p { color: var(--nbx-bc, #fff) !important; }
@media (max-width: 768px) {
  .nbx .nbx-t { font-size: var(--nbx-tzm, var(--nbx-tz, 16px)); }
  .nbx .nbx-b { font-size: var(--nbx-bzm, var(--nbx-bz, inherit)); }
  .nbx-ov { min-height: var(--nbx-hm, 220px); padding: 18px; }
  .nbx-ov .nbx-t { font-size: var(--nbx-tzm, var(--nbx-tz, 22px)); }
}
.nbx .nbx-btn { display: inline-block; margin-top: 8px; padding: 8px 18px; border-radius: 100px; background: var(--nc-ink, #20231f); color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none; }
body.dark .nbx .nbx-btn { background: var(--nc-acid, #d7fb55); color: #20231f !important; }
.nbx-empty { min-height: 40px; }



/* ═══ 색상 사용자 설정 (다크모드) ═══
   다크모드 엔진이 바꾸지 않는 색(어두운 색·포인트색)을 고른 항목만 다크모드에서도 적용 (data-nbc 의 dk* 토큰).
   밝은 색을 고르면 엔진이 다크 팔레트로 변환한 기본 다크 화면이 그대로 보입니다. */
html[data-nbc~="dkpage"] body.nc-body.dark { --bg-body: var(--nbc-page); --nb-page: var(--nbc-page); background: var(--nbc-page) !important; }
html[data-nbc~="dkhead"] body.nc-body.dark #nc-head,
html[data-nbc~="dkhead"] body.nc-body.dark #nc-nav,
html[data-nbc~="dkhead"] body.nc-body.dark .nc-topbar,
html[data-nbc~="dkhead"] body.nc-body.dark #dx-header,
html[data-nbc~="dkhead"] body.nc-body.dark .dx-topbar,
html[data-nbc~="dkhead"] body.nc-body.dark .nc-drop,
html[data-nbc~="dkhead"] body.nc-body.dark #dxMobNav,
html[data-nbc~="dkhead"] body.nc-body.dark .dx-mob-panel { --bg-header: var(--nbc-head); --bg-topbar: var(--nbc-head); }
html[data-nbc~="dkhead"] body.nc-body.dark #nc-head,
html[data-nbc~="dkhead"] body.nc-body.dark #nc-nav,
html[data-nbc~="dkhead"] body.nc-body.dark .nc-topbar,
html[data-nbc~="dkhead"] body.nc-body.dark #dx-header { background: var(--nbc-head) !important; }
html[data-nbc~="dkheadtext"] body.nc-body.dark #nc-head,
html[data-nbc~="dkheadtext"] body.nc-body.dark #nc-nav,
html[data-nbc~="dkheadtext"] body.nc-body.dark .nc-topbar { --text-main: var(--nbc-headtext); --text-muted: var(--nbc-headtext); color: var(--nbc-headtext); }
html[data-nbc~="dkheadtext"] body.nc-body.dark #nc-head a,
html[data-nbc~="dkheadtext"] body.nc-body.dark #nc-nav a:not(.nc-drop-link),
html[data-nbc~="dkheadtext"] body.nc-body.dark .nc-topbar a,
html[data-nbc~="dkheadtext"] body.nc-body.dark .nc-topbar b { color: var(--nbc-headtext) !important; }
html[data-nbc~="dkfoot"] body.nc-body.dark .nc-footer,
html[data-nbc~="dkfoot"] body.nc-body.dark .nc-statbar { background: var(--nbc-foot) !important; }
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-footer,
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-footer p,
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-footer a,
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-footer li,
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-footer li span,
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-footer .nc-foot-logo,
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-footer span,
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-statbar,
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-statbar span,
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-statbar b { color: var(--nbc-foottext) !important; }
html[data-nbc~="dkbox"] body.nc-body.dark { --bg-card: var(--nbc-box); --nb-box: var(--nbc-box); }
html[data-nbc~="dkbox"] body.nc-body.dark .nc-side-block,
html[data-nbc~="dkbox"] body.nc-body.dark .nc-wg-box,
html[data-nbc~="dkbox"] body.nc-body.dark .nc-col-main,
html[data-nbc~="dkbox"] body.nc-body.dark .nh-com-card,
html[data-nbc~="dkbox"] body.nc-body.dark .nh-gal-card,
html[data-nbc~="dkbox"] body.nc-body.dark .dxbl-card,
html[data-nbc~="dkbox"] body.nc-body.dark .dxql-card,
html[data-nbc~="dkbox"] body.nc-body.dark .dxql-item,
html[data-nbc~="dkbox"] body.nc-body.dark .dxql-side,
html[data-nbc~="dkbox"] body.nc-body.dark .dxbl-side,
html[data-nbc~="dkbox"] body.nc-body.dark .dxa-sb { background-color: var(--nbc-box) !important; }
html[data-nbc~="dkline"] body.nc-body.dark { --border: var(--nbc-line); --nb-line: var(--nbc-line); }
html[data-nbc~="dkline"] body.nc-body.dark .nc-side-block,
html[data-nbc~="dkline"] body.nc-body.dark .nc-wg-box,
html[data-nbc~="dkline"] body.nc-body.dark .nc-col-main,
html[data-nbc~="dkline"] body.nc-body.dark .nh-com-card,
html[data-nbc~="dkline"] body.nc-body.dark .nh-gal-card,
html[data-nbc~="dkline"] body.nc-body.dark .dxbl-card,
html[data-nbc~="dkline"] body.nc-body.dark .dxql-card,
html[data-nbc~="dkline"] body.nc-body.dark .dxql-item,
html[data-nbc~="dkline"] body.nc-body.dark .dxql-side,
html[data-nbc~="dkline"] body.nc-body.dark .dxbl-side,
html[data-nbc~="dkline"] body.nc-body.dark .dxa-sb { border-color: var(--nbc-line) !important; }
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-footer .nc-logo-symbol,
html[data-nbc~="dkfoottext"] body.nc-body.dark .nc-footer .nc-logo-symbol * { color: var(--nc-on-acid, #20231f) !important; }
html[data-nbc~="dkhead"] body.nc-body.dark .nc-drop { background: var(--nbc-head) !important; border-color: var(--border) !important; }
html[data-nbc~="dkhead"] body.nc-body.dark #nc-nav .nc-drop-link:hover { background: rgba(128,128,128,.22) !important; }
html[data-nbc~="dkhead"] body.nc-body.dark #nc-nav .nc-drop-link.is-active { background: var(--nc-acid) !important; color: #20231f !important; }
html[data-nbc~="dkhead"][data-nbc~="dkheadtext"] body.nc-body.dark #nc-nav .nc-drop-link:not(.is-active) { color: var(--nbc-headtext) !important; }

/* 새 박스는 놓인 자리의 너비를 그대로 채움 (flex·grid 안에서도 한 줄 전체) */
.nbx { width: 100%; min-width: 0; flex: 0 0 auto; grid-column: 1 / -1; align-self: stretch; }

/* ── 박스 부품 : 제목 · 글 · 이미지 · 버튼 · 구분선 · 여백 · 카드 열 · 슬라이드 · 탭 · 아코디언 ── */
.nbx-blocks > .nbx-c { margin: 0 0 14px; }
.nbx-blocks > .nbx-c:last-child { margin-bottom: 0; }
.nbx .nbx-title { margin: 0 0 12px; font-weight: 800; line-height: 1.3; color: inherit; }
.nbx h2.nbx-title { font-size: 24px; } .nbx h3.nbx-title { font-size: 19px; } .nbx h4.nbx-title { font-size: 15px; }
.nbx .nbx-al-c { text-align: center; } .nbx .nbx-al-r { text-align: right; }
.nbx .nbx-text p { margin: 0 0 8px; } .nbx .nbx-text p:last-child { margin-bottom: 0; }
.nbx .nbx-image { margin: 0; } .nbx .nbx-image a { display: block; }
.nbx .nbx-img { width: 100%; height: auto; display: block; }
.nbx .nbx-btnw { margin: 0; } .nbx .nbx-btnw .nbx-btn { margin-top: 0; }
.nbx .nbx-btn-l { background: transparent !important; color: var(--text-main) !important; border: 1.5px solid var(--text-main); }
body.dark .nbx .nbx-btn-l { color: var(--nc-acid, #d7fb55) !important; border-color: var(--nc-acid, #d7fb55); }
.nbx .nbx-hr { border: 0; border-top: 1px solid var(--border); margin: 0; height: 0; }
.nbx .nbx-sp { display: block; }
.nbx .nbx-htmlc > :first-child { margin-top: 0; } .nbx .nbx-htmlc > :last-child { margin-bottom: 0; }
.nbx .nbx-cards { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nbx .nbx-cards.nbx-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nbx .nbx-cards.nbx-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nbx .nbx-card { display: block; min-width: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-body); color: inherit; text-decoration: none; }
.nbx .nbx-card-i { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.nbx .nbx-card-b { padding: 12px 14px; }
.nbx .nbx-ct { font-size: 16px; font-weight: 800; line-height: 1.35; margin: 0 0 4px; }
.nbx .nbx-cb p { margin: 0 0 4px; font-size: 13.5px; }
@media (max-width: 720px) { .nbx .nbx-cards, .nbx .nbx-cards.nbx-n2, .nbx .nbx-cards.nbx-n4 { grid-template-columns: minmax(0, 1fr); } }
.nbx .nbx-sl { position: relative; border-radius: 8px; overflow: hidden; background: #20231f; }
.nbx .nbx-sl-t { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: var(--nbx-sh, 320px); -webkit-overflow-scrolling: touch; }
.nbx .nbx-sl-t::-webkit-scrollbar { display: none; }
.nbx .nbx-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; position: relative; display: block; height: 100%; overflow: hidden; color: #fff; text-decoration: none; background: #20231f; }
.nbx .nbx-sl-i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nbx .nbx-sl-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 22px 18px; background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0)); color: #fff; }
.nbx .nbx-sl-cap .nbx-ct { font-size: 22px; } .nbx .nbx-sl-cap .nbx-cb p { font-size: 14px; margin: 0; }
.nbx .nbx-sl-p, .nbx .nbx-sl-n { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; border: 0; border-radius: 50%; background: rgba(255,255,255,.86); color: #20231f; font: 800 20px/36px sans-serif; text-align: center; padding: 0; cursor: pointer; z-index: 2; }
.nbx .nbx-sl-p { left: 10px; } .nbx .nbx-sl-n { right: 10px; }
.nbx .nbx-sl-d { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; z-index: 2; pointer-events: none; }
.nbx .nbx-sl-d i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); }
.nbx .nbx-sl-d i.is-on { background: #fff; width: 18px; border-radius: 4px; }
.nbx .nbx-tabbar { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.nbx .nbx-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 8px 14px; margin-bottom: -1px; font: inherit; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.nbx .nbx-tab.is-on { color: var(--text-main); border-bottom-color: var(--text-main); }
.nbx .nbx-pane { display: none; } .nbx .nbx-pane.is-on { display: block; }
.nbx .nbx-pb p { margin: 0 0 6px; }
.nbx .nbx-ai { border-bottom: 1px solid var(--border); }
.nbx .nbx-ai summary { cursor: pointer; padding: 12px 2px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.nbx .nbx-ai summary::-webkit-details-marker { display: none; }
.nbx .nbx-ai summary::after { content: '+'; font-weight: 400; font-size: 18px; line-height: 1.2; }
.nbx .nbx-ai[open] summary::after { content: '\2212'; }
.nbx .nbx-ab { padding: 0 2px 12px; } .nbx .nbx-ab p { margin: 0 0 6px; }
/* 편집 중에만 보이는 빈 자리 표시 */
html[data-nbedit] .nbx-image:empty { min-height: 72px; border: 1px dashed var(--border); border-radius: 6px; }
html[data-nbedit] .nbx-blocks:empty { min-height: 64px; border-style: dashed; }
html[data-nbedit] .nbx-blocks:empty::before { content: '빈 박스 — 사이드 패널에서 부품을 추가하세요'; display: block; padding: 18px 0; text-align: center; font-size: 12px; color: var(--text-muted); }
html[data-nbedit] .nbx [data-nbf] { cursor: text; }
.nbx [contenteditable] { outline: 2px solid #f97316; outline-offset: 2px; min-width: 20px; }

/* ═══ 최신글 스킨 (.nbls) : 글 한 칸 = 필드를 절대 위치로 배치한 틀. 칸별 값은 스킨 <style> 이 .nbls-<스킨id> 아래에 출력 ═══ */
.nbx.nbls { background: var(--bg-card); color: var(--text-main); margin-bottom: 16px; }
.nbls.nbls-hasw { max-width: min(100%, var(--nbls-w)); }
.nbls-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; }
.nbls-eye { display: block; margin-bottom: 5px; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.nbls-head h3 { margin: 0; font-weight: 800; letter-spacing: -.04em; line-height: 1.3; color: var(--text-main); }
.nbx .nbls-more { flex: 0 0 auto; font-size: 11px; font-weight: 800; white-space: nowrap; text-decoration: none; color: var(--text-main); }
.nbls .nbls-list { list-style: none; margin: 0; padding: 0; }
.nbls .nbls-i { position: relative; box-sizing: border-box; overflow: hidden; background: var(--bg-card); transition: transform .15s, background-color .15s; }
.nbls .nbls-lk { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; display: block; text-decoration: none; }
.nbls .nbls-f { position: absolute; box-sizing: border-box; display: flex; align-items: center; overflow: hidden; margin: 0; padding: 0; font-size: 14px; line-height: 1.35; font-style: normal; color: var(--text-main); }
.nbls .nbls-x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: inherit; overflow: hidden; width: 100%; text-align: inherit; overflow-wrap: anywhere; }
.nbls .nbls-t-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.nbls .nbls-t-thumb.nbls-ph { background: var(--border); }
.nbls .nbls-t-new .nbls-x { text-align: center; }
.nbls .nbls-t-meta, .nbls .nbls-t-views, .nbls .nbls-t-date, .nbls .nbls-t-author, .nbls .nbls-t-num { color: var(--text-muted); }
.nbls-empty { padding: 28px 0; text-align: center; font-size: 12px; color: var(--text-muted); }
/* 배경색을 직접 지정한 스킨은 다크모드에서도 글자색을 고정 (배경은 그대로인데 글자만 뒤집혀 안 보이는 문제 방지) */
.nbls.nbls-hasbg, body.dark .nbls.nbls-hasbg { color: #1a1a1a; }
.nbls.nbls-hasbg .nbls-f, body.dark .nbls.nbls-hasbg .nbls-f { color: #1a1a1a; }
.nbls.nbls-hasbg .nbls-t-meta, .nbls.nbls-hasbg .nbls-t-views, .nbls.nbls-hasbg .nbls-t-date, .nbls.nbls-hasbg .nbls-t-author, .nbls.nbls-hasbg .nbls-t-num,
body.dark .nbls.nbls-hasbg .nbls-t-views, body.dark .nbls.nbls-hasbg .nbls-t-date, body.dark .nbls.nbls-hasbg .nbls-t-author, body.dark .nbls.nbls-hasbg .nbls-t-num { color: #6b6b6b; }
.nbls.nbls-hasbg .nbls-head h3, body.dark .nbls.nbls-hasbg .nbls-head h3, .nbx.nbls.nbls-hasbg .nbls-more, body.dark .nbx.nbls.nbls-hasbg .nbls-more { color: #1a1a1a; }

/* ── 링크 · 유튜브 · 플레이어 (박스 부품) ── */
.nbx .nbx-lkw { margin: 0; } .nbx .nbx-lkw.nbx-al-c { text-align: center; } .nbx .nbx-lkw.nbx-al-r { text-align: right; }
.nbx .nbx-lk-t { color: var(--p, var(--text-main)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.nbx .nbx-lk-e { display: block; padding: 14px; border: 1px dashed var(--nb-line, var(--border)); border-radius: 8px; color: var(--text-muted); font-size: 13px; text-align: center; }
.nbx a.nbx-lk { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card, transparent); color: var(--text-main) !important; text-decoration: none !important; }
.nbx a.nbx-lk:hover { border-color: var(--text-muted); }
.nbx .nbx-lk-im { flex: 0 0 38%; max-width: 260px; display: block; background: var(--border); }
.nbx .nbx-lk-im img { display: block; width: 100%; height: 100%; min-height: 110px; object-fit: cover; }
.nbx .nbx-lk-b { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0; justify-content: center; }
.nbx .nbx-lk-s { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }
.nbx .nbx-lk-ti { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nbx .nbx-lk-d { font-size: 13px; line-height: 1.5; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nbx .nbx-lk-hs { font-size: 12px; color: var(--text-muted); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbx a.nbx-lk-v { flex-direction: column; }
.nbx .nbx-lk-v .nbx-lk-im { flex: none; max-width: none; } .nbx .nbx-lk-v .nbx-lk-im img { height: auto; aspect-ratio: 1.91 / 1; }

.nbx .nbx-yt { margin: 0; width: 100%; } .nbx .nbx-yt[style] { margin-left: auto; margin-right: auto; }
.nbx .nbx-yt-f { position: relative; width: 100%; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
.nbx .nbx-ar-43 { aspect-ratio: 4 / 3; } .nbx .nbx-ar-11 { aspect-ratio: 1 / 1; } .nbx .nbx-ar-916 { aspect-ratio: 9 / 16; max-width: 360px; margin-left: auto; margin-right: auto; } .nbx .nbx-ar-219 { aspect-ratio: 21 / 9; }
.nbx .nbx-yt-p { position: absolute; inset: 0; display: block; }
.nbx .nbx-yt-th { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nbx .nbx-yt-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; background: #222; }
.nbx .nbx-yt-pl { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; background: rgba(23,23,23,.88); transition: background .15s; }
.nbx .nbx-yt-pl:after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.nbx .nbx-yt-p:hover .nbx-yt-pl { background: #f00; }
.nbx .nbx-yt-if { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.nbx .nbx-yt-cap { margin-top: 8px; font-size: 13px; color: var(--text-muted); }

.nbx .nbx-ytp { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.nbx .nbx-ytp-m { flex: 1 1 380px; min-width: 0; }
.nbx .nbx-ytp-l { flex: 1 1 240px; min-width: 0; }
.nbx .nbx-ytp-b .nbx-ytp-m, .nbx .nbx-ytp-b .nbx-ytp-l { flex: 1 1 100%; }
.nbx .nbx-ytp-l { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.nbx .nbx-ytp-b .nbx-ytp-l { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.nbx .nbx-ytp-i { display: flex; gap: 10px; align-items: center; width: 100%; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-main) !important; text-align: left; font: inherit; text-decoration: none !important; cursor: pointer; }
.nbx .nbx-ytp-b .nbx-ytp-i { flex: 0 0 200px; width: 200px; flex-direction: column; align-items: stretch; gap: 6px; }
.nbx .nbx-ytp-i.is-on { border-color: var(--text-main); background: var(--bg-body, transparent); }
.nbx .nbx-ytp-th { flex: 0 0 96px; display: block; aspect-ratio: 16 / 9; background: #000; border-radius: 5px; overflow: hidden; }
.nbx .nbx-ytp-b .nbx-ytp-th { flex: none; width: 100%; }
.nbx .nbx-ytp-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nbx .nbx-ytp-t { font-size: 13px; line-height: 1.4; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) {
  .nbx .nbx-ytp-l { max-height: 300px; }
  .nbx a.nbx-lk-h { flex-direction: column; } .nbx .nbx-lk-h .nbx-lk-im { flex: none; max-width: none; } .nbx .nbx-lk-h .nbx-lk-im img { height: auto; aspect-ratio: 1.91 / 1; }
}
/* HTML 박스 안의 유튜브 · 올린 CSS 가 덮어쓰지 못하게 꼭 필요한 값만 고정 */
.nbx .nbx-yt-f { position: relative !important; width: 100% !important; overflow: hidden !important; }
.nbx .nbx-yt-f > .nbx-yt-if, .nbx .nbx-yt-f > .nbx-yt-p { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; margin: 0 !important; }
.nbx .nbx-yt-th { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; }
.nbx .nbx-yt-raw, .nbx .nbx-yt { max-width: 100%; }