/**
 * 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) { --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; }

/* 헤더 색을 지정하면 드롭다운 메뉴도 같은 색 · 헤더 선(테두리)은 헤더 밝기에 맞춰 정리 */
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; }