/* ============================================================
 * NEW BASIC 게시판 스킨 — style.css  v1.0.0
 * 목록 · 상세 · 글쓰기 공용 (에디토리얼 / 플랫 / 그림자 없음)
 *
 *  §0  토큰 (테마 변수 → 폴백)        §6  페이지네이션
 *  §1  기능 유지 규칙 (required)      §7  상세 (본문·첨부·액션)
 *  §2  공통 부품 (버튼·태그·아바타)    §8  이전/다음 · 하단 목록
 *  §3  드롭다운 · 검색                §9  댓글
 *  §4  목록 머리글                    §10 모달 · 라이트박스
 *  §5  목록 행 (PC/모바일)            §11 글쓰기 · 반응형
 * ============================================================ */

/* ── §0 토큰 : body 에 선언 → body.dark 가 바꾼 테마 변수를 그대로 따라감 ── */
body {
  --nb-ink:    var(--text-main, #20231f);
  --nb-mute:   var(--text-muted, #85877f);
  --nb-line:   var(--border, #dedfd7);
  --nb-card:   var(--bg-card, #fffefa);
  --nb-bg:     var(--bg-body, #f3f2ed);
  --nb-hover:  var(--hover-row, rgba(32,35,31,.04));
  --nb-acid:   var(--nc-acid, #d7fb55);
  --nb-btn:    var(--p, #20231f);
  --nb-on-btn: var(--nc-on-p, #ffffff);
  --nb-strong: var(--nc-line-strong, #aeb0a5);
  --nb-coral:  #ff775e;
  --nb-danger: #e5484d;
}
.nb { color: var(--nb-ink); letter-spacing: -.02em; }
.nb *, .nb *::before, .nb *::after { box-sizing: border-box; }
.nb a { text-decoration: none; }
.nb a:not(.nb-btn):not([class*="dxds-"]) { color: inherit; }
.nb .hidden { display: none !important; }
.nb button { font-family: inherit; cursor: pointer; }
.nb img { max-width: 100%; }

/* ── §1 기능 유지 규칙 ─────────────────────────────────────── */
#dx-search-overlay { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.42); }
#dx-search-overlay.dx-search-overlay-show { display: block; }
.dx-mob-cat-wrap { display: none; }
@media (max-width: 1023px) { .dx-mob-cat-wrap { display: block; margin-bottom: 16px; } }
.dx-mob-cat-slider { display: none; }
.dx-mob-cat-slider.open { display: block; }
#dx-lb-ov { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; background: #000; }
#dx-lb-ov.on { display: block; }
#dx-lb-track { position: absolute; top: 0; left: 0; bottom: 0; display: flex; align-items: center; }
.dx-lb-slide { flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.dx-lb-slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* ── §2 공통 부품 ──────────────────────────────────────────── */
.nb-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 18px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nb-mute); }
.nb-crumb a:hover { color: var(--nb-ink); }
.nb-crumb-sep { opacity: .5; }
.nb-crumb-cur { color: var(--nb-ink); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-kicker { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--nb-ink); }
.nb-kicker::before { content: ""; width: 26px; height: 3px; background: var(--nb-ink); }

.nb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 18px; border: 1px solid var(--nb-line); border-radius: 99px; background: transparent; color: var(--nb-ink); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.nb-btn:hover { background: var(--nb-hover); border-color: var(--nb-strong); }
.nb-btn i { font-size: 11px; }
.nb-btn-ink { background: var(--nb-btn); border-color: var(--nb-btn); color: var(--nb-on-btn); }
.nb-btn-ink:hover { background: var(--nb-acid); border-color: var(--nb-acid); color: #20231f; }
html body.dark .nb-btn-ink:hover { background: #fff; border-color: #fff; color: #20231f; }
.nb-btn-danger { background: var(--nb-danger); border-color: var(--nb-danger); color: #fff; }
.nb-btn-danger:hover { background: #c93a3f; border-color: #c93a3f; color: #fff; }
.nb-btn-danger-o { color: var(--nb-danger); border-color: rgba(229,72,77,.4); }
.nb-btn-danger-o:hover { background: rgba(229,72,77,.08); border-color: var(--nb-danger); }
.nb-btn-sm { height: 34px; padding: 0 14px; font-size: 11px; }
.nb-btn-lg { height: 46px; padding: 0 26px; font-size: 13px; }
.nb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--nb-line); border-radius: 50%; background: transparent; color: var(--nb-ink); font-size: 13px; transition: background .15s, border-color .15s; flex-shrink: 0; }
.nb-icon-btn:hover { background: var(--nb-hover); border-color: var(--nb-strong); }
.nb-icon-sm { width: 30px; height: 30px; font-size: 12px; border-color: transparent; }

.nb-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--nb-line); border-radius: 3px; font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1; color: var(--nb-mute); white-space: nowrap; flex-shrink: 0; }
.nb-tag-hot { background: var(--nb-coral); border-color: var(--nb-coral); color: #fff; }
.nb-tag-notice { background: var(--nb-ink); border-color: var(--nb-ink); color: var(--nb-bg); }
.nb-tag-cat { color: var(--nb-ink); }
.nb-tag-mini { height: 17px; padding: 0 5px; font-size: 9px; }
.nb-new { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 3px; background: var(--nb-coral); color: #fff; font-size: 9px; font-weight: 900; line-height: 1; flex-shrink: 0; }
.nb-cmt { font-size: 12px; font-weight: 800; color: var(--nb-ink); margin-left: 5px; flex-shrink: 0; }
.nb-ico { font-size: 11px; color: var(--nb-mute); flex-shrink: 0; }
.dx-hl { background: var(--nb-acid); color: #20231f; padding: 0 2px; border-radius: 2px; }

.nb-ava { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nb-acid); color: #20231f; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.nb-ava-lg { width: 40px; height: 40px; font-size: 14px; }
.nb-ava-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nb-ava-img.nb-ava-lg { width: 40px; height: 40px; }
.dx-lt-avatar-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nb-author-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.nb-input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-card); color: var(--nb-ink); font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s; }
.nb-input:focus { border-color: var(--nb-ink); }
.nb-input::placeholder { color: var(--nb-mute); opacity: .75; }
textarea.nb-input { height: auto; padding: 12px 14px; line-height: 1.7; resize: vertical; }
select.nb-input { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2385877f' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.nb-input-lg { height: 54px; font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.nb-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--nb-ink); cursor: pointer; }
.nb-check input { accent-color: var(--nb-ink); width: 15px; height: 15px; }
html body.dark .nb-check input { accent-color: var(--nb-acid); }

.nb-panel { max-width: 520px; margin: 40px auto; padding: 28px; border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-card); }
.nb-panel-title { margin: 0 0 6px; font-size: 20px; font-weight: 900; letter-spacing: -.05em; }
.nb-panel-desc { margin: 0 0 18px; font-size: 13px; color: var(--nb-mute); }
.nb-panel-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── §3 드롭다운 · 검색 ────────────────────────────────────── */
#dx-search-wrap, #dx-adm-menu-wrap, .nb-cmt-menu { position: relative; }
.nb-drop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 9999; min-width: 150px; padding: 6px; border: 1px solid var(--nb-ink); border-radius: 4px; background: var(--nb-card); }
.nb-drop button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border: 0; border-radius: 3px; background: transparent; color: var(--nb-ink); font-size: 12px; font-weight: 600; text-align: left; }
.nb-drop button:hover { background: var(--nb-hover); }
.nb-drop button i { width: 14px; color: var(--nb-mute); font-size: 11px; }
.nb-search.has-q > .nb-icon-btn { background: var(--nb-acid); border-color: var(--nb-acid); color: #20231f; }
.nb-search-drop { width: 340px; padding: 14px; z-index: 9999; }
.nb-search-drop form { display: grid; gap: 8px; }
.nb-search-row { display: flex; gap: 6px; }
.nb-search-row .nb-input { flex: 1; min-width: 0; }
.nb-search-row .nb-btn { width: 44px; height: 44px; padding: 0; border-radius: 4px; }
.nb-search-reset { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--nb-mute); }
.nb-search-reset:hover { color: var(--nb-ink); }
.nb-cmt-drop { min-width: 110px; }

/* ── §4 목록 머리글 ────────────────────────────────────────── */
.nb-board, #dx-board-wrap { border-top: 1px solid var(--nb-ink); background: transparent; }
.dx-list-head { padding: 0; }
.dx-lh-row1 { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 26px 0 14px; }
.nb-title { margin: 14px 0 0; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; font-weight: 900; letter-spacing: -.08em; color: var(--nb-ink); }
.nb-desc { margin: 12px 0 0; max-width: 56ch; font-size: 13px; line-height: 1.8; color: var(--nb-mute); }
.dx-lh-right { display: flex; align-items: center; gap: 8px; }
.dx-lh-row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--nb-line); }
.dx-lh-left2 { display: flex; align-items: center; gap: 16px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--nb-mute); }
.dx-lh-total b { color: var(--nb-ink); font-weight: 900; margin-left: 4px; font-size: 13px; }
.nb-checkall { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; font-weight: 600; cursor: pointer; }
.dx-lh-right2 { display: flex; align-items: center; gap: 10px; }
.nb-sort { display: inline-flex; gap: 18px; padding: 0; border: 0; background: transparent; }
.dx-sort-btn { padding: 4px 0; border: 0; background: transparent; color: var(--nb-mute); font-size: 12px; font-weight: 750; border-radius: 0; box-shadow: none; }
.dx-sort-btn:hover { color: var(--nb-ink); }
.dx-sort-btn.active { color: var(--nb-ink); background: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.nb-write i { font-size: 11px; }
.dx-adm-bar { border-radius: 4px; }

.nb-gnotice { margin: 0 0 14px; border-radius: 4px; background: var(--nb-acid); color: #20231f; overflow: hidden; }
.dx-gn-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(32,35,31,.15); }
.dx-gn-row:last-child { border-bottom: 0; }
.dx-gn-badge { padding: 3px 7px; border-radius: 3px; background: #20231f; color: var(--nb-acid); font-size: 10px; font-weight: 800; letter-spacing: .06em; flex-shrink: 0; }
.dx-gn-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: #20231f; }
.dx-gn-link:hover { text-decoration: underline; }

/* 모바일 카테고리 바 (목록) */
.nb-mobcat { margin: 0 0 16px; }
.nb-mobcat nav { border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-card); overflow: hidden; }
.nb-mobcat-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; border: 0; background: transparent; color: var(--nb-ink); font-size: 13px; font-weight: 700; }
.nb-mobcat-btn i { margin-right: 6px; font-size: 11px; color: var(--nb-mute); }
.nb-mobcat-cur { margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--nb-acid); color: #20231f; font-size: 11px; font-weight: 800; }
#dx-mob-cat-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nb-line); }
#dx-mob-cat-list a { display: flex; align-items: center; gap: 6px; padding: 11px 16px; font-size: 13px; color: var(--nb-mute); border-bottom: 1px solid var(--nb-line); }
#dx-mob-cat-list li:last-child a { border-bottom: 0; }
#dx-mob-cat-list a.depth-1 { padding-left: 30px; }
#dx-mob-cat-list a.depth-2 { padding-left: 44px; }
#dx-mob-cat-list a.on { color: var(--nb-ink); font-weight: 800; background: var(--nb-hover); }
.nb-mobcat-bar { opacity: .5; }

/* ── §5 목록 행 ────────────────────────────────────────────── */
.nb .dx-lt-thead, .nb .dx-lt-row-pc { display: none !important; }
.nb .dx-lt-row-mo { display: flex; }
@media (min-width: 768px) {
  .nb .dx-lt-row-mo { display: none !important; }
  .nb .dx-lt-thead, .nb .dx-lt-row-pc {
    display: grid !important;
    grid-template-columns: 72px minmax(0,1fr) 150px 64px 64px !important;
    align-items: center; column-gap: 8px;
  }
  .nb .nb-board:has(.nb-thead.has-chk) .dx-lt-thead, .nb #dx-board-wrap:has(.nb-thead.has-chk) .dx-lt-thead,
  .nb .nb-board:has(.nb-thead.has-chk) .dx-lt-row-pc, .nb #dx-board-wrap:has(.nb-thead.has-chk) .dx-lt-row-pc { grid-template-columns: 38px 72px minmax(0,1fr) 150px 64px 64px !important; }
}
.nb-thead { padding: 11px 12px; border-bottom: 1px solid var(--nb-line); font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--nb-mute); text-align: center; }
.nb-thead span:nth-child(2) { text-align: left; }
.nb-thead.has-chk span:nth-child(2) { text-align: center; }
.nb-thead.has-chk span:nth-child(3) { text-align: left; }
.nb-row { min-height: 62px; padding: 0 12px; border-bottom: 1px solid var(--nb-line); cursor: pointer; transition: background .12s; background: transparent; }
.nb-row:hover { background: var(--nb-hover); }
.nb-row.is-notice { background: rgba(215,251,85,.13); }
.nb-row.is-notice:hover { background: rgba(215,251,85,.24); }
.dx-lt-cur, .nb-row.is-cur { background: var(--nb-hover) !important; border-left: 3px solid var(--nb-ink); }
.nb-c-chk { display: flex; align-items: center; justify-content: center; }
.nb-c-chk input, .nb-mchk { accent-color: var(--nb-ink); width: 14px; height: 14px; cursor: pointer; }
.nb-c-num { text-align: center; font-size: 12px; font-weight: 600; color: var(--nb-mute); font-variant-numeric: tabular-nums; }
.nb-c-title { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 12px 0; overflow: hidden; }
.nb-c-title > a { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; font-size: 15px; font-weight: 650; letter-spacing: -.035em; color: var(--nb-ink); }
.nb-title-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; display: inline-block; transition: transform .18s; }
.nb-row:hover .nb-title-t { transform: translateX(3px); }
.dx-lt-cur .nb-title-t { font-weight: 850; }
.nb-c-author { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.nb-c-date, .nb-c-view { text-align: center; font-size: 12px; color: var(--nb-mute); font-variant-numeric: tabular-nums; }

.nb-mrow { align-items: flex-start; gap: 10px; padding: 16px 2px; border-bottom: 1px solid var(--nb-line); cursor: pointer; }
.nb-mchk { margin-top: 4px; flex-shrink: 0; }
.nb-mrow-body { flex: 1; min-width: 0; }
.nb-mrow-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nb-mrow-link { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
.nb-mrow-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 15px; font-weight: 650; letter-spacing: -.035em; }
.nb-mrow-date { margin-left: auto; font-size: 11px; color: var(--nb-mute); flex-shrink: 0; padding-left: 6px; }
.nb-mrow-meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 11px; color: var(--nb-mute); }
.nb-mrow-author { display: inline-flex; align-items: center; gap: 6px; }
.nb-mrow-meta .nb-ava, .nb-mrow-meta .nb-ava-img { width: 18px; height: 18px; font-size: 9px; }
.nb-mrow.is-notice { background: rgba(215,251,85,.13); align-items: center; }
.nb-mrow.is-notice .nb-mrow-link { gap: 8px; }
.nb-empty { padding: 90px 0; text-align: center; color: var(--nb-mute); border-bottom: 1px solid var(--nb-line); }
.nb-empty i { display: block; margin-bottom: 14px; font-size: 28px; opacity: .5; }
.nb-empty p { margin: 0; font-size: 13px; }

/* 코어 JS 가 만드는 토스트 */
.dx-toast-item { border-radius: 4px !important; background: var(--nb-ink) !important; color: var(--nb-bg) !important; }

/* ── §6 페이지네이션 (PHP · JS 생성 공용) ──────────────────── */
.nb-pager, #dx-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; padding: 34px 0 6px !important; }
.nb-pager a, #dx-pagination a { display: inline-flex !important; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 6px; border: 1px solid var(--nb-line) !important; border-radius: 99px !important; background: transparent !important; color: var(--nb-mute) !important; font-size: 12px !important; font-weight: 700 !important; transition: background .15s, color .15s; }
.nb-pager a:hover, #dx-pagination a:hover { background: var(--nb-hover) !important; color: var(--nb-ink) !important; }
.nb-pager a.on, #dx-pagination a.on, #dx-pagination a[style*="#3b82f6"] { background: var(--nb-btn) !important; border-color: var(--nb-btn) !important; color: var(--nb-on-btn) !important; }

/* ── §7 상세 ───────────────────────────────────────────────── */
.dx-view-card { border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-card); overflow: hidden; }
.dx-view-header { padding: 34px 38px 24px; border-bottom: 1px solid var(--nb-ink); }
.nb-v-cat { margin-bottom: 16px; }
.dx-post-title { margin: 0; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.25; font-weight: 900; letter-spacing: -.07em; color: var(--nb-ink); word-break: keep-all; overflow-wrap: anywhere; }
.dx-post-title .fa-lock { margin-right: 8px; font-size: .6em; color: var(--nb-mute); }
.nb-v-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; }
.nb-v-author { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.nb-v-author .nb-author-name { font-size: 14px; font-weight: 800; }
.nb-v-stat { font-size: 12px; color: var(--nb-mute); }
.nb-v-stat i { margin-right: 3px; font-size: 11px; }
.nb-v-edited { margin-left: 6px; opacity: .75; }
.dx-post-body { padding: 38px; font-size: 16px; line-height: 1.9; letter-spacing: -.015em; color: var(--nb-ink); overflow-wrap: break-word; word-break: break-word; }
.dx-post-body img { max-width: 100%; height: auto; border-radius: 4px; cursor: zoom-in; }
.dx-post-body iframe, .dx-post-body video { max-width: 100%; border-radius: 4px; }
.dx-post-body table { max-width: 100%; border-collapse: collapse; }
.dx-post-body table td, .dx-post-body table th { border: 1px solid var(--nb-line); padding: 8px 10px; }
.dx-post-body pre { padding: 18px; border-radius: 4px; background: #20231f; color: #eef0e6; overflow-x: auto; font-size: 13px; line-height: 1.7; }
.dx-post-body blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--nb-acid); color: var(--nb-mute); }
@media (max-width: 768px) {
  .dx-post-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}
.nb-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 38px 28px; }
.dx-tag-item { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 13px; border: 1px solid var(--nb-line); border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--nb-mute); transition: background .15s, color .15s; }
.dx-tag-item:hover { background: var(--nb-hover); color: var(--nb-ink); }
.dx-tag-item i { font-size: 10px; }
.dx-img-view { display: grid; gap: 14px; padding: 0 38px 30px; }
.dx-img-view img { width: 100%; height: auto; border-radius: 4px; cursor: zoom-in; display: block; }

.dx-file-box, .dx-link-box { margin: 0 38px 28px; border: 1px solid var(--nb-line); border-radius: 4px; overflow: hidden; }
.dx-file-box-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--nb-line); background: var(--nb-hover); font-size: 12px; }
.nb-fb-title { font-weight: 800; }
.nb-fb-count { color: var(--nb-mute); }
.nb-fb-flags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.nb-fb-flags span { padding: 2px 8px; border: 1px solid var(--nb-line); border-radius: 99px; font-size: 10px; font-weight: 700; color: var(--nb-mute); }
.dx-file-item { display: grid; grid-template-columns: 44px minmax(0,1fr) 34px; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--nb-line); }
.dx-file-item:last-child { border-bottom: 0; }
.dx-file-item:hover { background: var(--nb-hover); }
.dx-file-thumb-link img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; display: block; cursor: zoom-in; }
.nb-file-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; background: var(--nb-hover); font-size: 18px; color: var(--nb-mute); }
.nb-file-ico i { color: var(--nb-mute) !important; }
.nb-file-main { min-width: 0; }
.dx-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.nb-file-size { margin-top: 3px; font-size: 11px; color: var(--nb-mute); }
.nb-file-size span { margin-left: 8px; }
.nb-file-dl { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--nb-line); color: var(--nb-ink); font-size: 12px; }
.nb-file-dl:hover { background: var(--nb-btn); border-color: var(--nb-btn); color: var(--nb-on-btn); }
.dx-link-box > div { padding: 14px 16px; }
.nb-lk-head { margin: 0 0 10px; font-size: 12px; font-weight: 800; }
.dx-link-box .dx-link-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--nb-line); font-size: 13px; }
.dx-link-box .dx-link-item > div:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-link-box .dx-link-item:hover { color: var(--nb-ink); text-decoration: underline; }
.dx-link-box .dx-link-item > span { font-size: 11px; color: var(--nb-mute); flex-shrink: 0; }

.dx-action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 38px; border-top: 1px solid var(--nb-line); }
.dx-action-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: 1px solid var(--nb-line); border-radius: 99px; background: transparent; color: var(--nb-ink); font-size: 12px; font-weight: 700; transition: background .15s, border-color .15s; }
.dx-action-btn:hover { background: var(--nb-hover); border-color: var(--nb-strong); }
.dx-action-btn i { font-size: 12px; }
.dx-action-btn .fa-heart.fa-solid { color: var(--nb-coral); }
.dx-action-btn .fa-bookmark.fa-solid { color: var(--nb-ink); }
.nb-ab-like.is-disabled { opacity: .45; cursor: not-allowed; }
.nb-ab-right { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.nb-ab-right .dx-action-btn:last-child { background: var(--nb-btn); border-color: var(--nb-btn); color: var(--nb-on-btn); }
.nb-inline-form { display: inline-flex; margin: 0; }

/* 상세용 모바일 카테고리 */
.dx-mob-cat-toggle { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-card); color: var(--nb-ink); font-size: 13px; font-weight: 700; }
.dx-mob-cat-toggle-arrow { margin-left: auto; font-size: 11px; transition: transform .2s; }
.dx-mob-cat-toggle.open .dx-mob-cat-toggle-arrow { transform: rotate(180deg); }
.dx-mob-cat-inner { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; }
.dx-mob-cat-pill { padding: 7px 14px; border: 1px solid var(--nb-line); border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--nb-mute); }
.dx-mob-cat-pill.active { background: var(--nb-btn); border-color: var(--nb-btn); color: var(--nb-on-btn); }

/* ── §8 이전/다음 · 하단 목록 ─────────────────────────────── */
.nb-pn { margin: 22px 0 0; border-top: 1px solid var(--nb-ink); }
.nb-pn-row { display: grid; grid-template-columns: 84px minmax(0,1fr) 54px; align-items: center; gap: 10px; padding: 15px 6px; border-bottom: 1px solid var(--nb-line); transition: background .12s; }
.nb-pn-row:hover { background: var(--nb-hover); }
.nb-pn-lbl { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nb-mute); }
.nb-pn-lbl i { margin-right: 6px; font-size: 9px; }
.nb-pn-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }
.nb-pn-date { text-align: right; font-size: 11px; color: var(--nb-mute); }
.nb-view-list { margin-top: 40px; }
.nb-vl-head { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0 14px; border-bottom: 1px solid var(--nb-line); }
.nb-vl-title { font-size: 20px; font-weight: 900; letter-spacing: -.06em; }
.nb-vl-title span { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--nb-mute); letter-spacing: 0; }
.nb-vl-total { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--nb-mute); }
.nb-vl-total b { margin-left: 4px; color: var(--nb-ink); font-size: 13px; }

/* ── §9 댓글 ───────────────────────────────────────────────── */
.dx-cmt-section { margin-top: 22px; border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-card); }
.dx-cmt-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; border-bottom: 1px solid var(--nb-ink); }
.dx-cmt-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 900; letter-spacing: -.04em; }
.dx-cmt-head h2 i { font-size: 13px; color: var(--nb-mute); }
.nb-cmt-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 4px; border-radius: 99px; background: var(--nb-acid); color: #20231f; font-size: 11px; font-weight: 900; }
.nb-cmt-item { padding: 20px 26px; border-bottom: 1px solid var(--nb-line); }
.nb-cmt-item.is-reply { background: var(--nb-hover); border-left: 2px solid var(--nb-ink); padding-left: 22px; }
.nb-cmt-hd { display: flex; align-items: center; gap: 10px; }
.nb-cmt-re { font-size: 11px; color: var(--nb-mute); transform: scaleY(-1); }
.nb-cmt-who { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.nb-cmt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-cmt-name { font-size: 13px; font-weight: 800; }
.nb-cmt-name i { margin-left: 4px; font-size: 10px; color: var(--nb-mute); }
.nb-cmt-time { font-size: 11px; color: var(--nb-mute); }
.nb-cmt-acts { margin-left: auto; }
.dx-cmt-body { margin: 10px 0 0 50px; font-size: 14px; line-height: 1.75; color: var(--nb-ink); overflow-wrap: break-word; word-break: break-word; }
.dx-cmt-body a { text-decoration: underline; text-decoration-color: var(--nb-acid); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.dx-cmt-body .fa-lock { margin-right: 5px; }
.dx-cmt-body img { max-width: 100%; height: auto; border-radius: 4px; }
.nb-cmt-edit, .nb-reply { margin: 12px 0 0 50px; }
.dx-cmt-ta, .dx-reply-ta, .dx-edit-ta { display: block; width: 100%; min-height: 96px; padding: 13px 14px; border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-card); color: var(--nb-ink); font-family: inherit; font-size: 14px; line-height: 1.7; outline: none; resize: vertical; transition: border-color .15s; }
.dx-cmt-ta:focus, .dx-reply-ta:focus, .dx-edit-ta:focus { border-color: var(--nb-ink); }
.nb-form-acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nb-between { justify-content: space-between; }
.nb-guest-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.dx-cmt-form-wrap { padding: 22px 26px; }
.dx-cmt-form-wrap > i { margin-right: 6px; color: var(--nb-mute); }
.dx-cmt-form-wrap > a { font-weight: 800; text-decoration: underline; text-decoration-color: var(--nb-acid); text-underline-offset: 3px; }
.dx-cmt-section > .dx-cmt-form-wrap:last-child { border-top: 0; }
.nb-cmt-edit label, .nb-reply label, .dx-cmt-form-wrap label { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--nb-mute); cursor: pointer; }

/* 설문(상세) */
.dx-cmt-section form[id="dx-survey-form"] { padding: 4px 26px 22px; }
#dx-survey-form label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; cursor: pointer; }
#dx-survey-form input[type="text"] { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-card); color: var(--nb-ink); }
#dx-survey-form button[type="submit"] { height: 42px; padding: 0 22px; border: 0; border-radius: 99px; background: var(--nb-btn); color: var(--nb-on-btn); font-size: 12px; font-weight: 700; }

/* ── §10 모달 · 라이트박스 ─────────────────────────────────── */
.nb-modal { position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.5); }
#dx-delete-overlay { position: absolute; inset: 0; background: transparent; }
.nb-modal-card { position: relative; width: min(400px, 100%); padding: 30px 28px 24px; border: 1px solid var(--nb-ink); border-radius: 4px; background: var(--nb-card); color: var(--nb-ink); text-align: center; }
.nb-modal-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: rgba(229,72,77,.12); color: var(--nb-danger); font-size: 18px; }
.nb-modal-title { margin: 0 0 8px; font-size: 17px; font-weight: 900; letter-spacing: -.05em; }
.nb-modal-title i { margin-right: 6px; font-size: .8em; }
.nb-modal-desc { margin: 0 0 20px; font-size: 13px; line-height: 1.7; color: var(--nb-mute); }
.nb-modal-card .nb-input { margin-bottom: 18px; text-align: center; }
.nb-modal-acts { display: flex; justify-content: center; gap: 8px; }
.nb-modal-acts .nb-btn { flex: 1; }

#dx-lb-close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; }
.dx-lb-arr { position: absolute; top: 50%; z-index: 5; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; }
#dx-lb-prev { left: 16px; }
#dx-lb-next { right: 16px; }
#dx-lb-close:hover, .dx-lb-arr:hover { background: rgba(255,255,255,.28); }
#dx-lb-dots { position: absolute; bottom: 22px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 7px; }
.dx-lb-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.dx-lb-dot.on { background: var(--nb-acid); }
#dx-lb-counter { position: absolute; top: 24px; left: 20px; z-index: 5; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #fff; }
#dx-lb-zoom-bar { position: absolute; bottom: 14px; right: 16px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; }
#dx-lb-zoom-bar button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 15px; }
#dx-lb-zoom-bar button:hover { background: rgba(255,255,255,.2); }
@media (max-width: 767px) { .dx-lb-arr { display: none; } #dx-lb-zoom-bar { display: none; } }

/* ── §11 글쓰기 ────────────────────────────────────────────── */
.nb-alert { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 14px 18px; border: 1px solid var(--nb-coral); border-radius: 4px; background: rgba(255,119,94,.1); font-size: 13px; font-weight: 700; }
.nb-alert i { color: var(--nb-coral); }
.nb-write { padding-bottom: 20px; }
.nb-w-head { display: flex; align-items: center; gap: 16px; padding: 4px 0 20px; margin-bottom: 28px; border-bottom: 1px solid var(--nb-ink); }
.nb-w-headtxt { display: flex; flex-direction: column; gap: 10px; }
.nb-w-title { font-size: clamp(26px, 3.6vw, 40px); line-height: 1; font-weight: 900; letter-spacing: -.08em; }
.nb-w-opts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 22px; padding: 14px 16px; border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-hover); }
.nb-field { margin-bottom: 24px; }
.nb-field-end { display: flex; align-items: flex-end; padding-bottom: 12px; }
.nb-label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--nb-ink); }
.nb-label i { margin-right: 3px; color: var(--nb-mute); }
.nb-req { color: var(--nb-coral); }
.nb-hint { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--nb-mute); }
.nb-help { margin: 6px 0 0; font-size: 11px; color: var(--nb-mute); }
.nb-w-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nb-w-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nb-unit { position: relative; }
.nb-unit .nb-input { padding-right: 38px; }
.nb-unit > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--nb-mute); }

.dx-link-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dx-link-row input { height: 44px !important; padding: 0 14px !important; border: 1px solid var(--nb-line) !important; border-radius: 4px !important; background: var(--nb-card) !important; color: var(--nb-ink) !important; font-size: 14px !important; outline: none !important; min-width: 0; }
.dx-link-row input:focus { border-color: var(--nb-ink) !important; }
.dx-link-row input[type="url"] { flex: 1; }
.dx-link-row .dx-link-label { width: 200px; flex: 0 0 200px; }
.dx-link-row button { width: 40px !important; height: 40px !important; border: 1px solid var(--nb-line) !important; border-radius: 50% !important; background: transparent !important; color: var(--nb-mute) !important; flex-shrink: 0; }
.dx-link-row button:hover { color: var(--nb-danger) !important; border-color: var(--nb-danger) !important; }

.nb-exfile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-card); font-size: 13px; }
.nb-exfile img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.nb-exfile > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nb-exfile > span { font-size: 12px; color: var(--nb-mute); }
.nb-exfile > i { font-size: 18px; color: var(--nb-mute); width: 40px; text-align: center; }

.nb-dropzone { padding: 38px 20px; border: 1.5px dashed var(--nb-strong); border-radius: 4px; background: transparent; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.nb-dropzone:hover, .nb-dropzone.dragover, .nb-dropzone.drag-over { background: var(--nb-hover); border-color: var(--nb-ink); }
.nb-dropzone > i { font-size: 26px; color: var(--nb-mute); }
.nb-dz-main { margin: 10px 0 4px; font-size: 14px; font-weight: 700; }
.nb-dz-sub { margin: 0; font-size: 11px; color: var(--nb-mute); }
#dx-file-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
#dx-file-list li { display: flex !important; align-items: center; gap: 10px; padding: 8px 12px !important; border: 1px solid var(--nb-line) !important; border-radius: 4px !important; background: var(--nb-card) !important; color: var(--nb-ink) !important; font-size: 13px; }
.nb-dlbox { margin-top: 14px; padding: 16px; border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-hover); }
.nb-dlbox-title { margin: 0 0 14px; font-size: 12px; font-weight: 800; }
.nb-dlbox .nb-field { margin-bottom: 0; }

.nb-survey { border: 1px solid var(--nb-line); border-radius: 4px; background: var(--nb-card); margin-bottom: 24px; }
.nb-survey-toggle { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; }
.nb-survey-toggle input { accent-color: var(--nb-ink); width: 16px; height: 16px; }
.nb-survey-ttl { font-size: 14px; font-weight: 800; }
#dx-survey-body { padding: 4px 18px 18px; border-top: 1px solid var(--nb-line); }
#dx-survey-body > .nb-w-row2 { margin-top: 16px; }
.dx-sq-row { margin-bottom: 10px !important; padding: 14px !important; border: 1px solid var(--nb-line) !important; border-radius: 4px !important; background: var(--nb-hover) !important; }
.dx-sq-row input[type="text"], .dx-sq-row select, .dx-sq-row textarea { width: 100%; border: 1px solid var(--nb-line) !important; border-radius: 4px !important; background: var(--nb-card) !important; color: var(--nb-ink) !important; font-size: 14px !important; outline: none !important; }
.dx-sq-row input[type="text"], .dx-sq-row select { height: 42px; padding: 0 12px !important; }
.dx-sq-row textarea { padding: 10px 12px !important; }
.dx-sq-row input:focus, .dx-sq-row select:focus, .dx-sq-row textarea:focus { border-color: var(--nb-ink) !important; }
.nb-sq-top { display: grid; grid-template-columns: 1fr 140px; gap: 8px; margin-bottom: 8px; }
.dx-sq-options { margin-bottom: 8px; }
.nb-sq-bot { display: flex; align-items: center; justify-content: space-between; }
.dx-sq-row button { border-radius: 99px !important; }

.nb-w-acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--nb-ink); }
#dx-write-btn-area button:not(.nb-btn) { height: 46px; padding: 0 22px; border: 1px solid var(--nb-line); border-radius: 99px; background: transparent; color: var(--nb-ink); font-size: 12px; font-weight: 700; }
#dx-write-form input[type="checkbox"] { accent-color: var(--nb-ink); }

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .dx-lh-row1 { padding: 18px 0 10px; }
  .dx-lh-row2 { flex-wrap: wrap; row-gap: 12px; }
  .dx-lh-right2 { width: 100%; justify-content: space-between; }
  .nb-sort { gap: 14px; }
  .nb-search-drop { position: fixed; left: 16px; right: 16px; top: 18vh; width: auto; z-index: 9999; }
  .dx-view-header { padding: 24px 20px 18px; }
  .dx-post-body { padding: 24px 20px; font-size: 15px; }
  .nb-tags, .dx-img-view { padding-left: 20px; padding-right: 20px; }
  .dx-file-box, .dx-link-box { margin-left: 20px; margin-right: 20px; }
  .dx-action-bar { padding: 14px 20px; }
  .nb-ab-right { margin-left: 0; width: 100%; }
  .dx-btn-txt { display: inline; }
  .dx-cmt-head, .nb-cmt-item, .dx-cmt-form-wrap { padding-left: 18px; padding-right: 18px; }
  .nb-cmt-item.is-reply { padding-left: 16px; }
  .dx-cmt-body, .nb-cmt-edit, .nb-reply { margin-left: 0; }
  .nb-pn-row { grid-template-columns: 62px minmax(0,1fr) 44px; }
  .nb-w-row2, .nb-w-row3, .nb-guest-row, .nb-sq-top { grid-template-columns: 1fr; }
  .dx-link-row { flex-wrap: wrap; }
  .dx-link-row .dx-link-label { width: auto; flex: 1 1 120px; }
}

/* ── 추가 보정 ─────────────────────────────────────────────── */
.dx-view-header { background: var(--nb-card); }
#dx-draft-toolbar { padding: 12px 14px !important; border: 1px solid var(--nb-line) !important; border-radius: 4px !important; background: var(--nb-hover) !important; font-family: inherit !important; }
#dx-draft-btn { height: 38px; padding: 0 16px !important; border-radius: 99px !important; background: var(--nb-btn) !important; color: var(--nb-on-btn) !important; font-weight: 700 !important; }
#dx-draft-toolbar button:not(#dx-draft-btn) { height: 38px; border: 1px solid var(--nb-line) !important; border-radius: 99px !important; background: transparent !important; color: var(--nb-ink) !important; }
#dx-draft-toolbar button:hover:not(#dx-draft-btn) { background: var(--nb-hover) !important; }
#dx-autosave-label { color: var(--nb-mute) !important; }

/* ── 다크모드 보정 (코어 dx-dark.css · 엔진 덮어쓰기) ──────── */
html body.dark .nb-board, html body.dark .nb-view-list, html body.dark #dx-board-wrap { background: transparent !important; border-color: var(--nb-ink) !important; }
html body.dark .dx-lt-thead, html body.dark .nb-thead { background: transparent !important; }
html body.dark .nb-sort, html body.dark .dx-sort-btn-wrap { background: transparent !important; border-color: transparent !important; }
html body.dark .dx-sort-btn { background: transparent !important; color: var(--nb-mute) !important; }
html body.dark .dx-sort-btn.active { color: var(--nb-ink) !important; }
html body.dark .nb .nb-btn { color: var(--nb-ink) !important; }
html body.dark .nb .nb-btn-ink, html body.dark .nb a.nb-btn-ink, html body.dark .nb .nb-btn-ink i { background: var(--nb-btn) !important; color: var(--nb-on-btn) !important; border-color: var(--nb-btn) !important; }
html body.dark .nb .nb-btn-ink:hover { background: #fff !important; color: #20231f !important; border-color: #fff !important; }
html body.dark .nb .nb-btn-danger, html body.dark .nb-modal .nb-btn-danger { background: var(--nb-danger) !important; color: #fff !important; border-color: var(--nb-danger) !important; }
html body.dark .nb-ava, html body.dark .nb-cmt-count, html body.dark .nb-mobcat-cur, html body.dark .dx-hl { color: #20231f !important; }
html body.dark .nb-tag-hot, html body.dark .nb-new { color: #fff !important; }
html body.dark .nb-tag-notice { background: var(--nb-ink) !important; color: var(--nb-bg) !important; }
html body.dark .nb-gnotice, html body.dark .nb-gnotice * { color: #20231f; }
html body.dark .nb-gnotice .dx-gn-badge { color: var(--nb-acid); }
html body.dark .nb-drop, html body.dark .nb-modal-card, html body.dark .nb-panel { background: var(--nb-card) !important; }
html body.dark .nb-cmt-item.is-reply { background: var(--nb-hover) !important; }
html body.dark .nb-row.is-notice, html body.dark .nb-mrow.is-notice { background: rgba(215,251,85,.1) !important; }
html body.dark .nb-input, html body.dark .dx-cmt-ta, html body.dark .dx-reply-ta, html body.dark .dx-edit-ta { background: var(--nb-card) !important; color: var(--nb-ink) !important; border-color: var(--nb-line) !important; }
html body.dark .nb-pager a.on, html body.dark #dx-pagination a.on, html body.dark #dx-pagination a[style*="#3b82f6"] { background: var(--nb-btn) !important; color: var(--nb-on-btn) !important; border-color: var(--nb-btn) !important; }
html body.dark .nb-ab-right .dx-action-btn:last-child { background: var(--nb-btn) !important; color: var(--nb-on-btn) !important; border-color: var(--nb-btn) !important; }
html body.dark .nb-w-opts, html body.dark .nb-dlbox, html body.dark .dx-sq-row { background: var(--nb-hover) !important; }
html body.dark .dx-file-box-head { background: var(--nb-hover) !important; }
html body.dark .nb-title, html body.dark .nb-title-t, html body.dark .dx-post-title { color: var(--nb-ink) !important; }


/* ── 본문 영역 : 흰 카드 배경 제거 (페이지 배경 그대로, 선으로만 구분) ── */
html body .nb .dx-view-card, html body .nb .dx-view-header, html body .nb .dx-cmt-section, html body .nb .nb-survey { background: transparent !important; }
.nb .dx-view-card { border-width: 1px 0; border-color: var(--nb-ink) var(--nb-line) var(--nb-line); border-radius: 0; }
.nb .dx-cmt-section { border-width: 1px 0 0; border-color: var(--nb-ink); border-radius: 0; margin-top: 30px; }
.nb .nb-survey { border-radius: 0; border-width: 1px 0; }
html body.dark .nb .nb-ab-right .dx-action-btn:last-child, html body.dark .nb .nb-ab-right .dx-action-btn:last-child * { color: #20231f !important; }