/* ============================================================ 너구리 바이크랩 — 다크 모드 (2026-09-29) · 우선순위: 저장값(localStorage nbl_theme) > OS 설정. head 인라인 스니펫이 로드 즉시 를 세팅(FOUC 방지). 토글은 검은 줄(auth.js) 달 버튼. · 이 파일은 모든 페이지에서 '맨 마지막' 스타일시트로 붙는다(apply_dark.py) → 하드코딩 색을 덮어쓰기 위해. 토큰(:root)은 무JS OS다크도 되게 2중으로, 하드코딩 오버라이드는 data-theme="dark" 로 건다(인라인 스니펫이 항상 세팅하므로 실사용 100% 커버). · 자동 오버라이드 목록(맨 아래 dark_bg/dark_tx 블록)은 work/theme/apply_dark.py 가 CSS 를 훑어 만든 것 — CSS 색을 크게 바꾸면 apply_dark.py --scan 로 다시 뽑는다. ============================================================ */ /* ── 팔레트 토큰 (2중: 명시 다크 + OS 다크) ── */ :root[data-theme="dark"]{ --nbl-bg:#0f1311; --nbl-surface:#181d18; --nbl-surface2:#212721; --nbl-surface3:#2a312a; --nbl-border:#333b32; --nbl-text:#e9ede7; --nbl-sub:#a4aca2; --nbl-faint:#7f887e; --nbl-header-bg:#141813; --nbl-shadow:rgba(0,0,0,.55); /* 기존 구조 토큰 재정의(var 를 쓰는 곳은 자동으로 다크) */ --ink:var(--nbl-text); --paper:var(--nbl-surface2); --line:var(--nbl-border); --muted:var(--nbl-sub); --band:var(--nbl-surface); --beige:var(--nbl-surface3); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --nbl-bg:#0f1311; --nbl-surface:#181d18; --nbl-surface2:#212721; --nbl-surface3:#2a312a; --nbl-border:#333b32; --nbl-text:#e9ede7; --nbl-sub:#a4aca2; --nbl-faint:#7f887e; --nbl-header-bg:#141813; --nbl-shadow:rgba(0,0,0,.55); --ink:var(--nbl-text); --paper:var(--nbl-surface2); --line:var(--nbl-border); --muted:var(--nbl-sub); --band:var(--nbl-surface); --beige:var(--nbl-surface3); } /* 무JS OS다크: 최소한 배경·글자만이라도 읽히게(토큰 레벨) */ :root:not([data-theme="light"]) body{background:#0f1311;color:#e9ede7} } /* ── 기본 ── */ :root[data-theme="dark"]{color-scheme:dark} [data-theme="dark"] body{background:var(--nbl-bg);color:var(--nbl-text)} [data-theme="dark"] a{color:inherit} /* ── 스티키 헤더 배경(다크): fixes.css 의 var(--nbl-header-bg) 를 다크로 ── */ /* (light 기본값·sticky 규칙 자체는 fixes.css 에 있음) */ /* ── 맨 위 검은 줄: 다크에서도 그대로 어둡게 유지(검은 줄 유지) ── */ [data-theme="dark"] .nbl-topbar{background:#141110;color:#e9e1d3} /* ============================================================ 1) 자동 배경 네트 — 흰/밝은 배경 → 다크 표면 ============================================================ */ [data-theme="dark"] .nbl-fbdlg, [data-theme="dark"] .nbl-fbx, [data-theme="dark"] .nbl-fbkinds label, [data-theme="dark"] .nbl-fbkinds label:has(input:checked), [data-theme="dark"] .nbl-notice, [data-theme="dark"] .nbl-nt-gift, [data-theme="dark"] .finder-page, [data-theme="dark"] .finder-hero, [data-theme="dark"] .finder-search input, [data-theme="dark"] .budget-chips button, [data-theme="dark"] .seg, [data-theme="dark"] .seg button.on, [data-theme="dark"] .results-bar select, [data-theme="dark"] .fcard, [data-theme="dark"] .fcard-pic, [data-theme="dark"] .fcard-add, [data-theme="dark"] .fcard-gs i, [data-theme="dark"] .compare-tray, [data-theme="dark"] .tray-item, [data-theme="dark"] .d-top img, [data-theme="dark"] .sib button, [data-theme="dark"] .geo thead th, [data-theme="dark"] .cmp thead img, [data-theme="dark"] .cmp-x, [data-theme="dark"] .cmp-x span, [data-theme="dark"] .cmp-x:hover, [data-theme="dark"] .cmp-x:hover span, [data-theme="dark"] .cmp td.best, [data-theme="dark"] .cmp-sec th, [data-theme="dark"] .sr svg, [data-theme="dark"] .btn-gal, [data-theme="dark"] .btn-gal small, [data-theme="dark"] .btn-gal:hover, [data-theme="dark"] .gal-stage, [data-theme="dark"] .gal-strip button, [data-theme="dark"] .buy-row, [data-theme="dark"] .buy-row:hover, [data-theme="dark"] .buy-row.sub, [data-theme="dark"] .buy-deal a, [data-theme="dark"] .wu-card, [data-theme="dark"] .wu-card img, [data-theme="dark"] .share-row .btn-sub, [data-theme="dark"] #bikeDialog .dialog-top, [data-theme="dark"] #bikeDialog .dialog-top .close, [data-theme="dark"] .brand-strip, [data-theme="dark"] .bs-head button, [data-theme="dark"] .kr-state.ok, [data-theme="dark"] .kr-state.no, [data-theme="dark"] .kr-state.unk, [data-theme="dark"] .btn-sub.kr, [data-theme="dark"] .kr-box, [data-theme="dark"] .kr-diff, [data-theme="dark"] .kr-state.alt, [data-theme="dark"] .pc, [data-theme="dark"] .sort-quick, [data-theme="dark"] .fs-note, [data-theme="dark"] .sz-chip, [data-theme="dark"] .fcard-hide, [data-theme="dark"] .hid-bar button, [data-theme="dark"] .view-pill, [data-theme="dark"] .bp, [data-theme="dark"] .bp-hist i, [data-theme="dark"] .bp-rail, [data-theme="dark"] .bp-chips button, [data-theme="dark"] .rank-row, [data-theme="dark"] .rr-score .score-split, [data-theme="dark"] .rep, [data-theme="dark"] .rep-pic, [data-theme="dark"] .searchbox, [data-theme="dark"] .searchbox button, [data-theme="dark"] .searchbox button:hover, [data-theme="dark"] .bike-card .tag, [data-theme="dark"] .archive-head>button, [data-theme="dark"] dialog .source-link:hover, [data-theme="dark"] .directory-grid button, [data-theme="dark"] .directory-grid button:hover, [data-theme="dark"] .ranking-method, [data-theme="dark"] .method-status, [data-theme="dark"] .criteria-table thead, [data-theme="dark"] .score-details, [data-theme="dark"] .directory-grid .score-split, [data-theme="dark"] .score-details dd.bar, [data-theme="dark"] .nch, [data-theme="dark"] .nch-rule, [data-theme="dark"] .nch-list li.mine, [data-theme="dark"] .nch-list li:hover, [data-theme="dark"] .nch-mod button, [data-theme="dark"] .nch-foot, [data-theme="dark"] .cl-page, [data-theme="dark"] .cl-regions a, [data-theme="dark"] .cl-card, [data-theme="dark"] .cl-card.pin, [data-theme="dark"] .cl-pin, [data-theme="dark"] .cl-pend, [data-theme="dark"] .cl-chips span, [data-theme="dark"] .cl-chips span.br, [data-theme="dark"] .cl-own button, [data-theme="dark"] .cl-adm button, [data-theme="dark"] .cl-sm, [data-theme="dark"] .cl-dlg, [data-theme="dark"] .cl-dhead button, [data-theme="dark"] .cl-form input:not([type=checkbox]):not([type=file]), [data-theme="dark"] .cl-form textarea, [data-theme="dark"] .cl-form select, [data-theme="dark"] .cl-rg span, [data-theme="dark"] .cl-lx, [data-theme="dark"] .cl-view, [data-theme="dark"] .cl-gal a, [data-theme="dark"] .cl-chips span.pin, [data-theme="dark"] .cl-ph, [data-theme="dark"] .cl-ph.add, [data-theme="dark"] .cm-boards a, [data-theme="dark"] .cm-sort, [data-theme="dark"] .cm-sort button.on, [data-theme="dark"] .cm-search, [data-theme="dark"] .cm-search button, [data-theme="dark"] .cm-list, [data-theme="dark"] .cm-row:hover, [data-theme="dark"] .cm-chip, [data-theme="dark"] .cm-chip.b-qna, [data-theme="dark"] .cm-chip.b-mybike, [data-theme="dark"] .cm-chip.b-ride, [data-theme="dark"] .cm-chip.b-tips, [data-theme="dark"] .cm-chip.b-granfondo, [data-theme="dark"] .cm-pages a, [data-theme="dark"] .cm-post, [data-theme="dark"] .cm-like, [data-theme="dark"] .cm-like.on, [data-theme="dark"] .cm-ghost, [data-theme="dark"] .cm-warn, [data-theme="dark"] .cm-comments, [data-theme="dark"] .cm-accepted, [data-theme="dark"] .cm-login-cta, [data-theme="dark"] .cm-c.acc, [data-theme="dark"] .cm-wform, [data-theme="dark"] .cm-wf-boards button, [data-theme="dark"] .cm-wform input, [data-theme="dark"] .cm-wform textarea, [data-theme="dark"] .cm-bike-list, [data-theme="dark"] .cm-bike-list button:hover, [data-theme="dark"] .cm-tbl, [data-theme="dark"] .cm-tbl th, [data-theme="dark"] .cm-tbl tr:hover td, [data-theme="dark"] .cm-tbl tr.cur td, [data-theme="dark"] .cm-search select, [data-theme="dark"] .cm-pages a:hover, [data-theme="dark"] .cm-post-bar, [data-theme="dark"] .cm-tbl tr.notice td, [data-theme="dark"] .cm-wf-pin, [data-theme="dark"] .cm-wf-pin button, [data-theme="dark"] .cm-hint.warn, [data-theme="dark"] .cm-gal a, [data-theme="dark"] .cm-wf-img, [data-theme="dark"] .cm-wf-img.drag, [data-theme="dark"] .cm-wi, [data-theme="dark"] .cm-wi.add, [data-theme="dark"] .cm-hbox, [data-theme="dark"] .cm-hnone button, [data-theme="dark"] .cm-hub-ntc, [data-theme="dark"] .cm-mcat a, [data-theme="dark"] .cm-mc, [data-theme="dark"] .cm-wf-mcat button, [data-theme="dark"] .cu-dlg, [data-theme="dark"] .cu-drop, [data-theme="dark"] .cu-drop.on, [data-theme="dark"] .cu-drop.has .cu-pick, [data-theme="dark"] .cu-err, [data-theme="dark"] .cu-map, [data-theme="dark"] .cu-stats>span, [data-theme="dark"] .cu-f input:not([type=checkbox]):not([type=radio]), [data-theme="dark"] .cu-f select, [data-theme="dark"] .cu-f textarea, [data-theme="dark"] .cu-chips span, [data-theme="dark"] .cu-foot, [data-theme="dark"] .cu-cancel, [data-theme="dark"] .cr-filters, [data-theme="dark"] .cr-frow button, [data-theme="dark"] .cr-card, [data-theme="dark"] .cr-pic, [data-theme="dark"] .cr-dlg, [data-theme="dark"] .cr-x, [data-theme="dark"] .cr-map, [data-theme="dark"] .cr-stats, [data-theme="dark"] .cr-stats span, [data-theme="dark"] .cr-prof, [data-theme="dark"] .cr-climbs span, [data-theme="dark"] .cr-d-pre button, [data-theme="dark"] .cr-d-hist i, [data-theme="dark"] .cr-d-rail, [data-theme="dark"] .cr-view, [data-theme="dark"] .cr-mv-map, [data-theme="dark"] .cr-crumb button, [data-theme="dark"] #crSvg, [data-theme="dark"] .cr-mv-list button, [data-theme="dark"] .cr-auto, [data-theme="dark"] .cr-autonote, [data-theme="dark"] .cr-srow input, [data-theme="dark"] .cr-more button, [data-theme="dark"] .cr-lmap.leaflet-container, [data-theme="dark"] .cr-mapmove, [data-theme="dark"] .cr-utag, [data-theme="dark"] .cr-hid, [data-theme="dark"] .cr-uown button, [data-theme="dark"] .cr-hidnote, [data-theme="dark"] .cr-rbox, [data-theme="dark"] .cr-osm, [data-theme="dark"] .ev-steps li, [data-theme="dark"] .ev-steps li.done, [data-theme="dark"] .ev-btn.ghost, [data-theme="dark"] .ev-card, [data-theme="dark"] .ev-warn, [data-theme="dark"] .ev-file span, [data-theme="dark"] .ev-coupon, [data-theme="dark"] .ev-admin, [data-theme="dark"] .eva-stat, [data-theme="dark"] .eva-src, [data-theme="dark"] .eva-tabs button, [data-theme="dark"] .eva-it, [data-theme="dark"] .eva-img img, [data-theme="dark"] .eva-cp, [data-theme="dark"] .eva-stat.low, [data-theme="dark"] .share-url, [data-theme="dark"] .empty-ns, [data-theme="dark"] body header.finder-header, [data-theme="dark"] body header.directory-header, [data-theme="dark"] body header.history-nav, [data-theme="dark"] body header.header, [data-theme="dark"] .go, [data-theme="dark"] .go-notes, [data-theme="dark"] .geo-bar select, [data-theme="dark"] .fit, [data-theme="dark"] .fit-sty, [data-theme="dark"] .fit-tag.off, [data-theme="dark"] .fit-tag.geo, [data-theme="dark"] table.geo th.rec, [data-theme="dark"] table.geo td.rec, [data-theme="dark"] .go-mode, [data-theme="dark"] .go-dimbtn, [data-theme="dark"] .go-pick button, [data-theme="dark"] .go-dimsel button, [data-theme="dark"] .go-dimsel button i, [data-theme="dark"] .gf-count, [data-theme="dark"] .gf-months button, [data-theme="dark"] .gf-months button.past, [data-theme="dark"] .gf-months button.now, [data-theme="dark"] .gf-chips button, [data-theme="dark"] .gf-card, [data-theme="dark"] .gf-courses span, [data-theme="dark"] .gf-reg.open, [data-theme="dark"] .gf-reg.soon, [data-theme="dark"] .gf-reg.closed, [data-theme="dark"] .gf-card.past .gf-date, [data-theme="dark"] .gfd-hl, [data-theme="dark"] .gfd-warn, [data-theme="dark"] .gf-etc .gf-date, [data-theme="dark"] .gf-rail b, [data-theme="dark"] .gf-rail>span:not(.gf-dot), [data-theme="dark"] .gs-card, [data-theme="dark"] .gs-card.old, [data-theme="dark"] .gs-gen, [data-theme="dark"] .gs-gen.old, [data-theme="dark"] .gs-chips button, [data-theme="dark"] .gs-pick select, [data-theme="dark"] .gs-total>div:not(.gs-vs), [data-theme="dark"] .gs-table td.win, [data-theme="dark"] .tag.c, [data-theme="dark"] .gs-bars div, [data-theme="dark"] .gs-w em, [data-theme="dark"] .gs-table tr.gs-row th.gs-part, [data-theme="dark"] .gs-w2.win, [data-theme="dark"] .gs-fly span, [data-theme="dark"] .gs-sel, [data-theme="dark"] .gs-sel:hover, [data-theme="dark"] .gs-cnt.ok, [data-theme="dark"] .gs-cnt.part, [data-theme="dark"] .gs-cas select, [data-theme="dark"] .gs-ex, [data-theme="dark"] .gs-ex:hover, [data-theme="dark"] .gs-exlist, [data-theme="dark"] .gs-exlist button, [data-theme="dark"] .gs-pic, [data-theme="dark"] .gs-pic.none, [data-theme="dark"] .history-intro, [data-theme="dark"] .history-controls input, [data-theme="dark"] .history-controls select, [data-theme="dark"] .history-table thead th, [data-theme="dark"] .record-war, [data-theme="dark"] .record-vacant, [data-theme="dark"] .history-method, [data-theme="dark"] .hcm-notice, [data-theme="dark"] .hcm-box, [data-theme="dark"] .fold-btn, [data-theme="dark"] .fb-tabs button, [data-theme="dark"] .fb-it, [data-theme="dark"] .fb-st, [data-theme="dark"] .fb-reply, [data-theme="dark"] .legal-page, [data-theme="dark"] .legal-toc, [data-theme="dark"] .legal-tbl th, [data-theme="dark"] .legal-note, [data-theme="dark"] .pt-today, [data-theme="dark"] .pt-sum, [data-theme="dark"] .pt-bar, [data-theme="dark"] .pt-tag, [data-theme="dark"] .sv-on, [data-theme="dark"] .sv-soon, [data-theme="dark"] .sv-note, [data-theme="dark"] .sv-year, [data-theme="dark"] .sv-tp, [data-theme="dark"] .mb-card, [data-theme="dark"] .mb-perks, [data-theme="dark"] .mb-err, [data-theme="dark"] .mb-ok, [data-theme="dark"] .mb-field input[type=text], [data-theme="dark"] .mb-field input[type=search], [data-theme="dark"] .mb-field select, [data-theme="dark"] .mb-brand, [data-theme="dark"] .mb-brand[aria-pressed="true"], [data-theme="dark"] .mb-chip, [data-theme="dark"] .mb-ghost, [data-theme="dark"] .mb-public, [data-theme="dark"] .mb-seg button, [data-theme="dark"] .mb-tbl, [data-theme="dark"] .mb-tbl th, [data-theme="dark"] .mb-mgr, [data-theme="dark"] .rl-btn.off, [data-theme="dark"] .mb-tbl tr:hover td, [data-theme="dark"] .news-box, [data-theme="dark"] .nw-pager button, [data-theme="dark"] .nw-pic, [data-theme="dark"] #newsDialog, [data-theme="dark"] .nd-head, [data-theme="dark"] .nd-close, [data-theme="dark"] .nd-body figure img, [data-theme="dark"] .nd-points, [data-theme="dark"] .nd-neo, [data-theme="dark"] .cm-form, [data-theme="dark"] .cm-act button, [data-theme="dark"] .cm-act button.on, [data-theme="dark"] .cm-replies, [data-theme="dark"] .cm-delf button[data-cancel], [data-theme="dark"] .ov-os, [data-theme="dark"] .ov-feat article, [data-theme="dark"] .ov-steps li, [data-theme="dark"] .ov-plans article, [data-theme="dark"] .ov-btn2, [data-theme="dark"] .ov-free, [data-theme="dark"] .ov-apply, [data-theme="dark"] .ov-a-head button, [data-theme="dark"] .ov-a-cond, [data-theme="dark"] .ov-admin, [data-theme="dark"] .ova-tabs button, [data-theme="dark"] .ova-tbl, [data-theme="dark"] .pl-page, [data-theme="dark"] .pl-mapwrap, [data-theme="dark"] .pl-nomap>div, [data-theme="dark"] .pl-search, [data-theme="dark"] .pl-results, [data-theme="dark"] .pl-results button:hover, [data-theme="dark"] .pl-seg, [data-theme="dark"] .pl-seg button, [data-theme="dark"] .pl-edit, [data-theme="dark"] .pl-edit button:hover:not(:disabled), [data-theme="dark"] .pl-menu, [data-theme="dark"] .pl-menu button:hover, [data-theme="dark"] .pl-toast button+button, [data-theme="dark"] .pl-km, [data-theme="dark"] .pl-pop, [data-theme="dark"] .pl-pop-x, [data-theme="dark"] .pl-bottom, [data-theme="dark"] .pl-stats, [data-theme="dark"] .pl-stats>span, [data-theme="dark"] .pl-side, [data-theme="dark"] .pl-field input, [data-theme="dark"] .pl-box, [data-theme="dark"] .pl-btn, [data-theme="dark"] .pl-wps input:hover, [data-theme="dark"] .pl-wps input:focus, [data-theme="dark"] .pl-wps li>button:hover, [data-theme="dark"] .pl-mine-del:hover, [data-theme="dark"] .pl-mine-open, [data-theme="dark"] .pl-x, [data-theme="dark"] .pl-side-top, [data-theme="dark"] .pl-graybtn, [data-theme="dark"] .pcm-login, [data-theme="dark"] .pcm-form, [data-theme="dark"] .pcm-form.reply, [data-theme="dark"] .pcm-c.child, [data-theme="dark"] .pcm-act button:hover, [data-theme="dark"] .rk-months button, [data-theme="dark"] .rk-list, [data-theme="dark"] .rk-list li.r1, [data-theme="dark"] .rk-list li.r2, [data-theme="dark"] .rk-list li.r3, [data-theme="dark"] dialog.reco, [data-theme="dark"] .reco-x, [data-theme="dark"] .pill-row button, [data-theme="dark"] .tag-row button, [data-theme="dark"] .card-row button, [data-theme="dark"] .card-row button.on, [data-theme="dark"] .reco-back, [data-theme="dark"] .rcard, [data-theme="dark"] .rc-pic, [data-theme="dark"] .match-inline, [data-theme="dark"] .match-inline:hover, [data-theme="dark"] .rc-deal, [data-theme="dark"] .rc-go b, [data-theme="dark"] .bud-chips button, [data-theme="dark"] .bud-chips button.on, [data-theme="dark"] .bud-chips button:hover, [data-theme="dark"] .slc-card, [data-theme="dark"] .slc-card.t-aff, [data-theme="dark"] .seo-pic, [data-theme="dark"] .seo-pic>img, [data-theme="dark"] .seo-gal img, [data-theme="dark"] .seo-chips li, [data-theme="dark"] .seo-btn, [data-theme="dark"] .seo-mini, [data-theme="dark"] .seo-mini:hover, [data-theme="dark"] .seo-mini img, [data-theme="dark"] .seo-links li, [data-theme="dark"] .neoguri, [data-theme="dark"] .seo-brandlinks, [data-theme="dark"] body.s4 #hot, [data-theme="dark"] body.s4 #discover, [data-theme="dark"] body.s4 #wheels, [data-theme="dark"] body.s4 #deals, [data-theme="dark"] body.s4 #granfondo, [data-theme="dark"] .sh-stats div, [data-theme="dark"] .sh-crumb button, [data-theme="dark"] .sh-brands button, [data-theme="dark"] .sh-map, [data-theme="dark"] .sh-side, [data-theme="dark"] .sh-rank button, [data-theme="dark"] .sh-rank button i, [data-theme="dark"] .sh-rank button:hover, [data-theme="dark"] .sh-bc span, [data-theme="dark"] .sh-back, [data-theme="dark"] .sh-card, [data-theme="dark"] .sh-chips em, [data-theme="dark"] .ss, [data-theme="dark"] .ss-stage, [data-theme="dark"] .ss-view, [data-theme="dark"] .ss-card, [data-theme="dark"] .ss-nav, [data-theme="dark"] .ss-nav>button, [data-theme="dark"] .ss-nav>button:hover, [data-theme="dark"] .ss-dots button, [data-theme="dark"] .drive-sum, [data-theme="dark"] body, [data-theme="dark"] .header, [data-theme="dark"] .compare-nav, [data-theme="dark"] .filters button, [data-theme="dark"] .add-compare, [data-theme="dark"] .tr-links, [data-theme="dark"] .tr-chip, [data-theme="dark"] .tr-chip.ok, [data-theme="dark"] .tr-gate, [data-theme="dark"] .tr-tile, [data-theme="dark"] .tr-card, [data-theme="dark"] .tr-row .tk, [data-theme="dark"] .tr-dev, [data-theme="dark"] .hero, [data-theme="dark"] .secondary-action, [data-theme="dark"] footer, [data-theme="dark"] dialog, [data-theme="dark"] .result-row a, [data-theme="dark"] .release-year, [data-theme="dark"] .history-category-link, [data-theme="dark"] .hot-list a, [data-theme="dark"] .deal, [data-theme="dark"] .deal-pic, [data-theme="dark"] .wcat, [data-theme="dark"] .wcat-pic, [data-theme="dark"] .wcat-top i, [data-theme="dark"] .deal-tabs button, [data-theme="dark"] #detailDialog .dialog-top, [data-theme="dark"] #brandDialog .dialog-top, [data-theme="dark"] #detailDialog .close, [data-theme="dark"] #brandDialog .close, [data-theme="dark"] .qm-btn, [data-theme="dark"] .qm-ic, [data-theme="dark"] .qm-go, [data-theme="dark"] .qm-btn:first-child .qm-ic, [data-theme="dark"] .qm-btn:first-child .qm-go, [data-theme="dark"] .section-title>a, [data-theme="dark"] .section-title>a:hover span, [data-theme="dark"] #wheels .wcat-pic, [data-theme="dark"] .wr-more, [data-theme="dark"] .cat-badge, [data-theme="dark"] .cat-badge.c-china, [data-theme="dark"] .cat-badge.c-oem, [data-theme="dark"] .cat-badge.c-korea, [data-theme="dark"] .price-bar, [data-theme="dark"] .pb-presets button, [data-theme="dark"] .pb-hist i, [data-theme="dark"] .pb-rail{background:var(--nbl-surface)} /* 2) 자동 글자 네트 — 아주 어두운 글자 → 밝게 */ [data-theme="dark"] .nbl-auth, [data-theme="dark"] .nbl-auth:hover, [data-theme="dark"] .nbl-nick, [data-theme="dark"] .nbl-fbdlg, [data-theme="dark"] .nbl-fbthanks p, [data-theme="dark"] .nbl-fbthanks .nbl-fbty2, [data-theme="dark"] .nbl-notice, [data-theme="dark"] .nbl-nt p, [data-theme="dark"] .finder-filters legend, [data-theme="dark"] #bikeDialogEyebrow.named b, [data-theme="dark"] .bs-head button:hover, [data-theme="dark"] .buy-row.kr b, [data-theme="dark"] .kr-diff li, [data-theme="dark"] .fcard-sum, [data-theme="dark"] .sort-quick button:hover, [data-theme="dark"] .sz-chip span, [data-theme="dark"] .hid-bar button:hover, [data-theme="dark"] .sz-hlead, [data-theme="dark"] .bp-top b, [data-theme="dark"] .bp-top strong, [data-theme="dark"] .rr-rank b, [data-theme="dark"] .rr-score strong, [data-theme="dark"] .searchbox button, [data-theme="dark"] .directory-grid .directory-fallback, [data-theme="dark"] .ranking-method h2, [data-theme="dark"] .directory-grid .brand-score, [data-theme="dark"] .nch, [data-theme="dark"] .cl-main, [data-theme="dark"] .cl-regions a, [data-theme="dark"] .cl-chips span, [data-theme="dark"] .cl-body, [data-theme="dark"] .cl-dlg, [data-theme="dark"] .cl-view, [data-theme="dark"] .cl-vbody, [data-theme="dark"] .cm-main, [data-theme="dark"] .cm-boards a, [data-theme="dark"] .cm-sort button.on, [data-theme="dark"] .cm-search button, [data-theme="dark"] .cm-bike, [data-theme="dark"] .cm-empty b, [data-theme="dark"] .cm-pages a, [data-theme="dark"] .cm-like, [data-theme="dark"] .cm-ghost, [data-theme="dark"] .cm-login-cta, [data-theme="dark"] .cm-c-act button:hover, [data-theme="dark"] .cm-wf-boards button, [data-theme="dark"] .cm-wform input, [data-theme="dark"] .cm-wform textarea, [data-theme="dark"] .cm-boards a:hover, [data-theme="dark"] .cm-boards a.on, [data-theme="dark"] .cm-lhead .cm-sort a.on, [data-theme="dark"] .cm-tbl td.c-ti, [data-theme="dark"] .cm-tbl td.c-ti>a, [data-theme="dark"] .cm-tbl td.c-bd a:hover, [data-theme="dark"] .cm-search select, [data-theme="dark"] .cm-tbl tr.notice td.c-ti>a, [data-theme="dark"] .cm-hbox h3 a, [data-theme="dark"] .cm-hbox li>a, [data-theme="dark"] .cm-hub-ntc a, [data-theme="dark"] .cu-dlg, [data-theme="dark"] .cu-drop.has .cu-pick, [data-theme="dark"] .cu-f input:not([type=checkbox]):not([type=radio]), [data-theme="dark"] .cu-f select, [data-theme="dark"] .cu-f textarea, [data-theme="dark"] .cu-cancel, [data-theme="dark"] .cr-main, [data-theme="dark"] .cr-frow button, [data-theme="dark"] .cr-d-pre button, [data-theme="dark"] .cr-autonote b, [data-theme="dark"] .cr-srow input, [data-theme="dark"] .cr-uown button, [data-theme="dark"] .ev-main, [data-theme="dark"] .ev-btn.ghost, [data-theme="dark"] .ev-rules, [data-theme="dark"] .eva-qr a, [data-theme="dark"] .empty-ns, [data-theme="dark"] body header>nav a, [data-theme="dark"] body header>nav a.gf-nav:not([aria-current]), [data-theme="dark"] body header>nav a.pl-nav:not([aria-current]), [data-theme="dark"] body header>nav a.cl-nav:not([aria-current]), [data-theme="dark"] .go-notes li, [data-theme="dark"] .fit-res p, [data-theme="dark"] .go-dimbtn, [data-theme="dark"] .gf-count b, [data-theme="dark"] .gf-months button b, [data-theme="dark"] .gf-courses b, [data-theme="dark"] .gf-fee b, [data-theme="dark"] .gfd-hl, [data-theme="dark"] .gfd-actions .source-link, [data-theme="dark"] .gf-rail b, [data-theme="dark"] .gs-table tr.gs-row th.gs-part, [data-theme="dark"] .gs-sel select, [data-theme="dark"] .gs-cas select, [data-theme="dark"] .gs-total b.gs-num, [data-theme="dark"] .gs-total b.gs-num.dim, [data-theme="dark"] .hero-kin .k1 span, [data-theme="dark"] .hero-kin .k2 b, [data-theme="dark"] .history-controls input, [data-theme="dark"] .history-controls select, [data-theme="dark"] .history-method summary, [data-theme="dark"] .hcm-notice a, [data-theme="dark"] .hcm-box h3 a, [data-theme="dark"] .hcm-box li a, [data-theme="dark"] .fold-btn:hover, [data-theme="dark"] .fb-main, [data-theme="dark"] .fb-meta b, [data-theme="dark"] .fb-st, [data-theme="dark"] .legal-page, [data-theme="dark"] .legal-nav nav a[aria-current], [data-theme="dark"] .legal-main p, [data-theme="dark"] .legal-main li, [data-theme="dark"] .pt-month b, [data-theme="dark"] .pt-lb, [data-theme="dark"] .pt-recent h3, [data-theme="dark"] .pt-recent a, [data-theme="dark"] .pt-rules, [data-theme="dark"] .sv-lead, [data-theme="dark"] .sv-lead b, [data-theme="dark"] .sv-who, [data-theme="dark"] .sv-year h3, [data-theme="dark"] .sv-recent h3, [data-theme="dark"] .sv-stat b, [data-theme="dark"] .sv-month, [data-theme="dark"] .sv-month b, [data-theme="dark"] .sv-nm, [data-theme="dark"] .mb-perks, [data-theme="dark"] .mb-field > label, [data-theme="dark"] .mb-field > legend, [data-theme="dark"] .mb-field input[type=text], [data-theme="dark"] .mb-field input[type=search], [data-theme="dark"] .mb-field select, [data-theme="dark"] .mb-brand, [data-theme="dark"] .mb-brand .ph, [data-theme="dark"] .mb-chip, [data-theme="dark"] .mb-ghost, [data-theme="dark"] .mb-main, [data-theme="dark"] .nw-tabs button:hover, [data-theme="dark"] .nw-tabs button.on, [data-theme="dark"] .nw-pager b, [data-theme="dark"] .nw-pager button, [data-theme="dark"] .nw-card strong, [data-theme="dark"] .nd-body h2, [data-theme="dark"] .nd-points li, [data-theme="dark"] .nd-body>p, [data-theme="dark"] .nd-neo p, [data-theme="dark"] .nd-src a, [data-theme="dark"] .cm-form textarea, [data-theme="dark"] .cm-meta b, [data-theme="dark"] .cm-body, [data-theme="dark"] .cm-delf button[data-cancel], [data-theme="dark"] .nw-tabs button.nw-cmtab.on, [data-theme="dark"] .nwc-boards a, [data-theme="dark"] .nwc-write, [data-theme="dark"] .ov-main, [data-theme="dark"] .ov-lead, [data-theme="dark"] .ov-btn2, [data-theme="dark"] .ov-free ul, [data-theme="dark"] .ov-apply, [data-theme="dark"] .pl-page, [data-theme="dark"] .pl-edit button, [data-theme="dark"] .pl-btn, [data-theme="dark"] .pl-graybtn, [data-theme="dark"] .pcm-login, [data-theme="dark"] .pcm-body, [data-theme="dark"] .pcm-act button:hover, [data-theme="dark"] .rk-main, [data-theme="dark"] .rk-how, [data-theme="dark"] .match-cta b, [data-theme="dark"] .match-inline b, [data-theme="dark"] .bud-chips button, [data-theme="dark"] .slc-go, [data-theme="dark"] .seo-crumbs [aria-current], [data-theme="dark"] .seo-price b, [data-theme="dark"] .seo-chips li, [data-theme="dark"] .seo-btn, [data-theme="dark"] .seo-list th a, [data-theme="dark"] .seo-links a, [data-theme="dark"] .seo-rows a, [data-theme="dark"] .neoguri, [data-theme="dark"] .neoguri strong, [data-theme="dark"] .seo-brandlinks a, [data-theme="dark"] .sh-rank button, [data-theme="dark"] .sh-tel a, [data-theme="dark"] .ss-card dd, [data-theme="dark"] .drive-sum .hl dd b, [data-theme="dark"] .tr-tile b, [data-theme="dark"] .filters button.active, [data-theme="dark"] .qm-btn, [data-theme="dark"] .qm-ic, [data-theme="dark"] .qm-btn:first-child .qm-go, [data-theme="dark"] .section-title>a, [data-theme="dark"] .pb-title b, [data-theme="dark"] .pb-title strong, [data-theme="dark"] .pb-presets button{color:var(--nbl-text)} /* ============================================================ 3) 정교화 — 공유 크롬 · 사진 영역 · --ink 를 배경으로 쓰던 곳 (자동 네트보다 뒤에 두어 이긴다) ============================================================ */ /* 헤더·꼬리말 표면 (fixes.css 스티키 배경 토큰은 아래 fixes 에서 var 로) */ [data-theme="dark"] .header, [data-theme="dark"] header.header, [data-theme="dark"] header.finder-header, [data-theme="dark"] header.directory-header, [data-theme="dark"] header.history-nav, [data-theme="dark"] header.legal-nav{background:var(--nbl-header-bg)!important;border-color:var(--nbl-border)!important} [data-theme="dark"] footer{background:var(--nbl-surface)!important;border-color:var(--nbl-border)} [data-theme="dark"] .header,[data-theme="dark"] header{border-bottom:1px solid var(--nbl-border)} /* 입력칸·선택 상자·텍스트영역 통일 */ [data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), [data-theme="dark"] textarea, [data-theme="dark"] select{background:var(--nbl-surface2)!important;color:var(--nbl-text)!important;border-color:var(--nbl-border)!important} [data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--nbl-faint)} /* 팝업(dialog) 표면·글자 */ [data-theme="dark"] dialog{background:var(--nbl-surface)!important;color:var(--nbl-text)!important;box-shadow:0 30px 100px rgba(0,0,0,.7)} [data-theme="dark"] dialog::backdrop{background:rgba(0,0,0,.72)} [data-theme="dark"] dialog p,[data-theme="dark"] dialog td,[data-theme="dark"] dialog dd{color:var(--nbl-sub)} [data-theme="dark"] dialog h1,[data-theme="dark"] dialog h2,[data-theme="dark"] dialog h3,[data-theme="dark"] dialog b,[data-theme="dark"] dialog strong,[data-theme="dark"] dialog dt,[data-theme="dark"] dialog th{color:var(--nbl-text)} [data-theme="dark"] .dialog-top,[data-theme="dark"] #bikeDialog .dialog-top{background:var(--nbl-surface)!important;border-color:var(--nbl-border)!important} [data-theme="dark"] .close,[data-theme="dark"] .cr-x,[data-theme="dark"] .cl-dhead button,[data-theme="dark"] .cm-wf-x{color:var(--nbl-text)} /* --ink 를 '배경'으로 쓰던 어두운 강조 요소 → 다크에서도 어둡게(글자색 유지) */ [data-theme="dark"] .searchbox button, [data-theme="dark"] .compare-nav b, [data-theme="dark"] .filters button.active, [data-theme="dark"] .add-compare.selected, [data-theme="dark"] #toast, [data-theme="dark"] .finder-search button, [data-theme="dark"] .pop-badge, [data-theme="dark"] .tray-go{background:#2c3329!important} [data-theme="dark"] .add-compare.selected{color:var(--lime)!important} [data-theme="dark"] .searchbox button,[data-theme="dark"] .finder-search button,[data-theme="dark"] .filters button.active,[data-theme="dark"] .tray-go,[data-theme="dark"] #toast{color:#f2f5ee!important} /* 어두운 띠(archive/특가 검정 박스 등)는 원래 어두우니 표면만 살짝 */ [data-theme="dark"] .archive{background:#14181a!important;color:var(--nbl-text)!important;border:1px solid var(--nbl-border)} /* 검은 유틸 버튼(overlay-action/primary 등 #1f1c18) 은 그대로 두되 살짝 밝힌 테두리 */ [data-theme="dark"] .nch-btn,[data-theme="dark"] .primary-action.overlay-action{border:1px solid var(--nbl-border)} /* 사진(mix-blend-mode:multiply) 영역은 다크에서도 밝게 유지해 제품이 사라지지 않게 */ [data-theme="dark"] .bike-card .picture, [data-theme="dark"] .fcard-pic, [data-theme="dark"] .cr-pic, [data-theme="dark"] .rep-pic, [data-theme="dark"] .wu-card img, [data-theme="dark"] .d-top img, [data-theme="dark"] .cmp thead img, [data-theme="dark"] .gal-stage, [data-theme="dark"] .cl-ph, [data-theme="dark"] .hero-art, [data-theme="dark"] .beige-shape{background:#eceee8!important} /* 카드 안에 인라인으로 얹힌 제품 사진(래퍼가 없어 밝게 못 깔면) 은 블렌드를 끈다 */ [data-theme="dark"] .hot-list img, [data-theme="dark"] .deal img, [data-theme="dark"] .wu-card img, [data-theme="dark"] .sib img{mix-blend-mode:normal} /* 히어로 배경 사진은 밝은 판 위 multiply 라 그대로 유지 */ /* 링크·강조색 대비 보정(주황/초록 포인트를 다크에서 살짝 밝게) */ [data-theme="dark"] .cm-nav,[data-theme="dark"] .cm-chip,[data-theme="dark"] a.cm-nav, [data-theme="dark"] .kicker-link,[data-theme="dark"] .brand-rank-line a, [data-theme="dark"] .gs-pmiss,[data-theme="dark"] .nbl-nt-k,[data-theme="dark"] .nbl-fbthanks p b, [data-theme="dark"] .nbl-fbsign,[data-theme="dark"] .cm-boards h3 a{color:#e8873f!important} [data-theme="dark"] .cr-nav,[data-theme="dark"] a.cr-nav,[data-theme="dark"] .nbl-admin.nbl-mgr{color:#4bbd83} /* aria-current 선택 메뉴(주황 박스)는 유지 — 흰 글자 그대로 잘 보임 */ /* 표/구분선/카드 테두리 다크화(토큰 못 타는 하드코딩 선) */ [data-theme="dark"] .cmp td,[data-theme="dark"] .cmp th, [data-theme="dark"] .cm-tbl td,[data-theme="dark"] .cm-tbl th, [data-theme="dark"] .criteria-table td,[data-theme="dark"] .criteria-table th, [data-theme="dark"] .result-row,[data-theme="dark"] .rank-row, [data-theme="dark"] dialog th,[data-theme="dark"] dialog td{border-color:var(--nbl-border)!important} /* 스크롤바(웹킷) */ [data-theme="dark"] ::-webkit-scrollbar{width:12px;height:12px} [data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a423a;border-radius:8px;border:3px solid var(--nbl-bg)} [data-theme="dark"] ::-webkit-scrollbar-track{background:var(--nbl-bg)} /* 그림자를 어둡게(밝은 그림자가 다크에서 흰 테로 보이던 것) */ [data-theme="dark"] .fcard,[data-theme="dark"] .cr-card,[data-theme="dark"] .cl-card,[data-theme="dark"] .cm-post,[data-theme="dark"] .deal,[data-theme="dark"] .hot-list a{box-shadow:0 8px 24px rgba(0,0,0,.45);border-color:var(--nbl-border)!important} /* muted 계열 회색 글자가 너무 어두우면 살짝 올림 */ [data-theme="dark"] .intro,[data-theme="dark"] .card-note,[data-theme="dark"] .hero-subtitle,[data-theme="dark"] small,[data-theme="dark"] .muted{color:var(--nbl-sub)}