/**
 * NEW BASIC — theme.css
 * 에디토리얼 커뮤니티 디자인 시스템 (잉크 + 애시드 라임 · 플랫 · 그림자 없음)
 *
 * base.css(기본 테마 파생) 뒤에 로드되어 변수·레이아웃·공통 컴포넌트를 덮어씁니다.
 *
 * 목차
 *  §01  디자인 토큰 (라이트 / 다크)
 *  §02  기본 · 공통 부품 (버튼 · 배지 · 아이콘 버튼)
 *  §03  헤더 (유틸바 · 로고 · 검색 · 계정 · 알림)
 *  §04  GNB (고정 · 드롭다운 · 접속자)
 *  §05  모바일 메뉴
 *  §06  본문 2컬럼 · 사이드바 · 카테고리 트리
 *  §07  푸터 · FAB · 플래시
 *  §08  전역 리스킨 — 그림자 제거 · 포인트 색 치환 (게시판/마이페이지 등 기본 스킨 공용)
 *  §10  마이페이지
 *  §11  검색 · 페이지네이션 · 오류 화면
 *  §12  다크모드 보정
 *  §13  반응형
 */

/* ═══════════════════════════════════════════════
   §01  디자인 토큰
═══════════════════════════════════════════════ */
:root {
  --nc-ink:   #20231f;
  --nc-acid:  #d7fb55;
  --nc-on-acid: #20231f;
  --nc-lav:   #e6e1ff;
  --nc-coral: #ff775e;
  --nc-coral-soft: #ffdfd6;
  --nc-mint:  #d9e7e1;
  --nc-sky:   #d6e6ff;
  --nc-rose:  #f8c5b8;
  --nc-violet:#dcd5f5;
  --nc-line-strong: #aeb0a5;
  --nc-on-p:  #ffffff;
  --nc-ring:  var(--nc-acid);
  --nc-w:     1400px;
  --nc-gutter: 38px;

  --bg-body:    #f3f2ed;
  --bg-card:    #fffefa;
  --bg-header:  #f3f2ed;
  --bg-topbar:  #f3f2ed;
  --text-main:  #20231f;
  --text-muted: #6d6f66;
  --border:     #dedfd7;
  --hover-row:  #f7f6f0;
  --p:          var(--nc-ink);

  --font: 'DM Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  --font-logo: 'DM Sans', 'Pretendard', sans-serif;
}

/* 다크 팔레트는 dx-darkmode-engine 의 슬레이트 팔레트와 동일하게 유지합니다.
   (엔진이 인라인 색을 같은 팔레트로 자동 변환하므로 플러그인·스킨이 어긋나지 않습니다.)
   포인트 색만 애시드 라임으로 바뀝니다. */
html body.dark {
  --bg-body:    #0f172a;
  --bg-card:    #1e293b;
  --bg-header:  #0f172a;
  --bg-topbar:  #0f172a;
  --text-main:  #f1f5f9;
  --text-muted: #94a3b8;
  --border:     #334155;
  --hover-row:  #243044;
  --nc-line-strong: #475569;
  --p:          var(--nc-acid);
  --nc-on-p:    #20231f;
  --nc-ring:    #20231f;
}

body.nc-body {
  font-family: var(--font);
  letter-spacing: -.025em;
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.5;
}
body.nc-body ::selection { background: var(--nc-acid); color: #20231f; }
body.nc-body ::-webkit-scrollbar-thumb { background: var(--nc-line-strong); }
.nc-shell { width: 100%; max-width: var(--nc-w); margin: 0 auto; padding-left: var(--nc-gutter); padding-right: var(--nc-gutter); }
.nc-skip { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--nc-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-size: 13px; }
.nc-skip:focus { left: 0; }
.nc-hide-sm { }
:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }


/* ═══════════════════════════════════════════════
   §02  기본 · 공통 부품
═══════════════════════════════════════════════ */
.nc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 100px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; background: transparent; color: var(--text-main); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.nc-btn:hover { border-color: var(--text-main); }
.nc-btn i { font-size: 11px; }
.nc-btn-ink { background: var(--nc-ink); border-color: var(--nc-ink); color: #fff; }
.nc-btn-ink:hover { background: var(--nc-acid); border-color: var(--nc-acid); color: #20231f; }
html body.dark .nc-btn-ink { background: var(--nc-acid); border-color: var(--nc-acid); color: #20231f; }
html body.dark .nc-btn-ink:hover { background: #fff; border-color: #fff; }

.nc-iconbtn { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: transparent; display: inline-grid; place-items: center; cursor: pointer; color: var(--text-main); font-size: 15px; transition: border-color .15s, background .15s; flex-shrink: 0; }
.nc-iconbtn:hover { border-color: var(--text-main); }

.nc-new { display: inline-flex; align-items: center; justify-content: center; background: var(--nc-coral); color: #20231f; font-size: 9px; font-weight: 900; border-radius: 3px; padding: 1px 4px; margin-left: 5px; line-height: 1.25; letter-spacing: .02em; flex-shrink: 0; vertical-align: middle; }

/* 공통: 섹션 제목 줄 (홈 · 위젯 공용) */
.nc-section-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--text-main); padding-bottom: 15px; }
.nc-section-head h2 { font-size: 20px; font-weight: 900; letter-spacing: -.06em; margin: 0; }
.nc-section-head h2 span { font-size: 10px; letter-spacing: .12em; color: var(--text-muted); margin-left: 10px; font-weight: 800; }
.nc-section-head a { font-size: 11px; font-weight: 800; }
.nc-section-head a:hover { text-decoration: underline !important; text-underline-offset: 4px; }


/* ═══════════════════════════════════════════════
   §03  헤더
═══════════════════════════════════════════════ */
.nc-head { position: relative; z-index: 120; box-shadow: none; }
.nc-topbar { height: 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text-muted); letter-spacing: .02em; }
.nc-topbar b { color: var(--text-main); font-weight: 800; letter-spacing: .02em; }
.nc-topbar-tag { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border); }
.nc-topbar-right { display: flex; align-items: center; gap: 19px; }
.nc-topbar-right a, .nc-dark-toggle { color: var(--text-muted); transition: color .15s; display: inline-flex; align-items: center; gap: 4px; }
.nc-topbar-right a:hover, .nc-dark-toggle:hover { color: var(--text-main); }
.nc-topbar-right a i { font-size: 10px; margin-right: 1px; }
.nc-dark-toggle { border: 0; background: transparent; cursor: pointer; font: inherit; letter-spacing: inherit; padding: 0; }

.nc-masthead { display: grid; grid-template-columns: 250px minmax(220px, 1fr) auto; align-items: center; gap: 30px; padding: 27px 0 24px; border-bottom: 1px solid var(--border); }

.nc-logo { display: flex; align-items: center; gap: 10px; color: var(--text-main); min-width: 0; }
.nc-logo-symbol { height: 42px; min-width: 42px; padding: 0 7px; border-radius: 999px; background: var(--nc-acid); color: #20231f; display: inline-grid; place-items: center; font-family: var(--font-logo); font-weight: 900; font-size: 16px; letter-spacing: -.08em; flex-shrink: 0; }
.nc-logo-text { font-family: var(--font-logo); font-size: 19px; font-weight: 900; letter-spacing: -.07em; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-logo-text small { display: block; font-size: 9px; letter-spacing: .18em; color: var(--text-muted); font-weight: 700; margin-bottom: 2px; }
.nc-logo-symbol.has-img { padding: 0; background: transparent !important; overflow: hidden; }
.nc-logo-symbol.has-img .nc-logo-ch { display: none; }
.nc-logo-symbol.has-img { width: 42px; }
.nc-logo-sm .nc-logo-symbol.has-img { width: 34px; }
.nc-foot-logo .nc-logo-symbol.has-img { width: 36px; }
.nc-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nc-logo-sm .nc-logo-symbol { height: 34px; min-width: 34px; font-size: 13px; }
.nc-logo-sm .nc-logo-text { font-size: 16px; }

.nc-search { height: 45px; border-bottom: 1px solid var(--nc-line-strong); display: flex; align-items: center; gap: 12px; max-width: 490px; width: 100%; transition: border-color .15s; }
.nc-search:focus-within { border-bottom-color: var(--text-main); }
.nc-search-ico { font-size: 14px; color: var(--text-muted); }
.nc-search input { border: 0 !important; outline: 0; background: transparent !important; width: 100%; font-size: 13px; color: var(--text-main) !important; padding: 0; min-width: 0; }
.nc-search input::placeholder { color: #999b91 !important; }
.nc-search button { border: 0; background: none; font-size: 18px; color: var(--text-main); cursor: pointer; padding: 0 2px; }

.nc-account { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; justify-content: flex-end; }

.nc-chip { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border: 1px solid var(--border); border-radius: 99px; font-size: 12px; font-weight: 700; transition: border-color .15s; }
.nc-chip:hover { border-color: var(--text-main); }
.nc-chip-lv { background: var(--nc-acid); color: #20231f; border-radius: 99px; padding: 6px 10px; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.nc-chip-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-chip-pt { color: var(--text-muted); font-weight: 600; }

/* 알림 */
.nc-notif { position: relative; }
.nc-notif-badge { position: absolute; top: -3px; right: -3px; background: var(--nc-coral); color: #20231f; border-radius: 99px; min-width: 17px; height: 17px; font-size: 9px; font-weight: 800; line-height: 13px; padding: 0 4px; border: 2px solid var(--bg-header); text-align: center; letter-spacing: 0; }
.nc-notif-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 340px; background: var(--bg-card); border: 1px solid var(--text-main); border-radius: 4px; z-index: 9999; overflow: hidden; }
.nc-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 900; }
.nc-notif-acts { display: flex; align-items: center; gap: 8px; }
.nc-notif-acts i { width: 1px; height: 10px; background: var(--border); }
.nc-notif-acts button { border: 0; background: none; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 0; }
.nc-notif-acts button:hover { color: var(--text-main); text-decoration: underline; }
.nc-notif-foot { border-top: 1px solid var(--border); padding: 11px 14px; text-align: center; }
.nc-notif-foot a { font-size: 11px; font-weight: 800; color: var(--text-main); }
.nc-notif-foot a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.nc-notif-mclose { align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--text-main); font-weight: 900; font-size: 1rem; }
.nc-notif-mclose button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: none; cursor: pointer; font-size: 18px; color: var(--text-main); }
#dx-notif-list .dx-n-row[style*="#eff6ff"] { background: rgba(215,251,85,.22) !important; }
#dx-notif-list .dx-n-row[style*="#fff"]:not([style*="#eff6ff"]) { background: transparent !important; }
#dx-notif-list .dx-n-row span[style*="#3b82f6"] { background: var(--nc-coral) !important; }
#dx-notif-list .dx-n-row a, #dx-notif-list .dx-n-row span { color: var(--text-main) !important; }

.nc-burger { display: none; }


/* ═══════════════════════════════════════════════
   §04  GNB
═══════════════════════════════════════════════ */
.nc-nav { position: sticky; top: 0; z-index: 110; background: var(--bg-header); border-bottom: 1px solid var(--border); transition: background-color .3s; }
.nc-nav-inner { display: flex; align-items: center; gap: 27px; height: 58px; }
.nc-nav-item { position: relative; height: 100%; flex-shrink: 0; }
.nc-nav-link { height: 100%; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 750; color: var(--text-main); position: relative; white-space: nowrap; }
.nc-nav-link i:not(.nc-caret) { font-size: 11px; opacity: .65; }
.nc-nav-link::after { content: ""; height: 4px; position: absolute; left: 0; right: 0; bottom: -1px; background: var(--p); transform: scaleX(0); transform-origin: left center; transition: transform .22s cubic-bezier(.4,0,.2,1); }
.nc-nav-item:hover > .nc-nav-link::after,
.nc-nav-item:focus-within > .nc-nav-link::after,
.nc-nav-item.is-active > .nc-nav-link::after { transform: scaleX(1); }
.nc-caret { font-size: 8px; opacity: .45; transition: transform .2s; margin-left: 1px; }
.nc-nav-item:hover .nc-caret, .nc-nav-item.is-open .nc-caret { transform: rotate(180deg); }

.nc-drop { display: none; position: absolute; top: 100%; left: -16px; min-width: 210px; padding: 8px; border: 1px solid var(--text-main) !important; border-radius: 4px; background: var(--bg-card) !important; z-index: 200; margin-top: 0; }
.nc-nav-item:hover > .nc-drop, .nc-nav-item:focus-within > .nc-drop, .nc-nav-item.is-open > .nc-drop { display: block; }
.nc-drop-link { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 3px; font-size: 13px; font-weight: 600; color: var(--text-main); white-space: nowrap; transition: background .12s; }
.nc-drop-link i { font-size: 11px; opacity: .55; width: 14px; text-align: center; }
.nc-drop-link:hover { background: var(--hover-row); }
.nc-drop-link.is-active { background: var(--nc-acid); color: #20231f; font-weight: 800; }
.nc-nav-spacer { flex: 1; }
.nc-live { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
.nc-live b { color: var(--text-main); font-weight: 800; }
.nc-live i { height: 7px; width: 7px; border-radius: 50%; background: #70b943; box-shadow: 0 0 0 0 rgba(112,185,67,.55); animation: ncPulse 2.2s infinite; }
@keyframes ncPulse { 0% { box-shadow: 0 0 0 0 rgba(112,185,67,.5); } 70% { box-shadow: 0 0 0 7px rgba(112,185,67,0); } 100% { box-shadow: 0 0 0 0 rgba(112,185,67,0); } }


/* ═══════════════════════════════════════════════
   §05  모바일 메뉴
═══════════════════════════════════════════════ */
.nc-mob { background: rgba(32,35,31,.55); }
.nc-mob-panel { display: flex; flex-direction: column; background: var(--bg-card); width: min(86vw, 340px); height: 100%; border-left: 1px solid var(--text-main); overflow: hidden !important; }
.nc-mob-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.nc-search-mob { margin: 14px 18px 4px; width: auto; max-width: none; height: 42px; flex-shrink: 0; }
.nc-mob-user { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.nc-mob-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--nc-acid); color: #20231f; display: grid; place-items: center; font-weight: 900; font-size: 15px; flex-shrink: 0; }
.nc-mob-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nc-mob-user-info b { font-size: 14px; font-weight: 800; }
.nc-mob-user-info span { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.nc-mob-user-info em { font-style: normal; background: var(--nc-acid); color: #20231f; border-radius: 99px; padding: 1px 7px; margin-right: 6px; font-size: 10px; font-weight: 800; }
.nc-mob-scroll { flex: 1; overflow-y: auto; padding: 6px 0; }
.nc-mob-item { border-bottom: 1px solid var(--border); }
.nc-mob-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 18px; background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 800; color: var(--text-main); text-align: left; letter-spacing: -.04em; }
.nc-mob-ico { font-size: 13px; width: 18px; text-align: center; opacity: .6; }
.nc-mob-title { flex: 1; }
.nc-mob-caret { font-size: 10px; opacity: .5; transition: transform .22s; }
.nc-mob-sub { background: var(--bg-body); }
.nc-mob-sub a { display: flex; align-items: center; gap: 4px; padding: 12px 18px 12px 46px; font-size: 13px; font-weight: 600; color: var(--text-muted); border-top: 1px solid var(--border); }
.nc-mob-sub a:hover { color: var(--text-main); }
.nc-mob-sep { height: 8px; }
.nc-mob-act { display: flex; align-items: center; gap: 12px; padding: 13px 18px; font-size: 13px; font-weight: 600; color: var(--text-main); }
.nc-mob-act i { width: 18px; text-align: center; color: var(--text-muted); }
.nc-mob-foot { border-top: 1px solid var(--border); padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--bg-card); }
.nc-mob-foot button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 0; }
.nc-mob-foot a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--text-main); }


/* ═══════════════════════════════════════════════
   §06  본문 · 사이드바
═══════════════════════════════════════════════ */
.nc-main { flex: 1 0 auto; padding-top: 35px; padding-bottom: 72px; min-width: 0; }
.nc-cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 42px; align-items: start; }
.nc-col-main { min-width: 0; }
.nc-side { display: flex; flex-direction: column; gap: 32px; position: sticky; top: 82px; align-self: start; }
.nc-side-block { border-top: 1px solid var(--text-main); padding-top: 14px; }
.nc-side-title { font-size: 14px; font-weight: 900; margin: 0 0 14px; letter-spacing: -.03em; color: var(--text-main); }
.nc-side-title small { font-size: 9px; letter-spacing: .12em; color: var(--text-muted); margin-left: 6px; font-weight: 800; }
.nc-side-list { list-style: none; margin: 0; padding: 0; }
.nc-side-link { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-muted); transition: color .12s, padding .15s; }
.nc-side-link:hover { color: var(--text-main); padding-left: 4px; }
.nc-side-link.is-active { color: var(--text-main); font-weight: 800; }
.nc-side-ico { width: 14px; text-align: center; font-size: 12px; opacity: .6; }
.nc-side-txt { flex: 1; display: inline-flex; align-items: center; }
.nc-side-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nc-acid); border: 1px solid var(--text-main); flex-shrink: 0; }

/* 카테고리 트리 (dx-category.js 연동 클래스 유지) */
.nc-side-block.dx-cat-nav { background: transparent; border: 0; border-top: 1px solid var(--text-main); border-radius: 0; overflow: visible; }
.dx-cat-ul { padding: 0; }
.dx-cat-all, .dx-cat-top { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 0 !important; border: 0; border-bottom: 1px solid var(--border); border-left: 0 !important; background: transparent; font-size: 13px !important; font-weight: 600; color: var(--text-muted) !important; cursor: pointer; text-align: left; border-radius: 0; font-family: inherit; }
.dx-cat-all:hover, .dx-cat-top:hover { background: transparent !important; color: var(--text-main) !important; }
.dx-cat-all.dx-cat-active, .dx-cat-top.dx-cat-active { color: var(--text-main) !important; font-weight: 800; background: transparent !important; box-shadow: inset 3px 0 0 var(--p); padding-left: 10px !important; }
.dx-cat-top-left { display: inline-flex; align-items: center; gap: 8px; }
.nc-cat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.nc-cat-dot-sm { width: 5px; height: 5px; }
.nc-cat-bar { color: var(--nc-line-strong); font-size: .6rem; flex-shrink: 0; }
.dx-cat-child-a { padding-top: 9px !important; padding-bottom: 9px !important; border-left: 0 !important; font-size: 12.5px !important; color: var(--text-muted) !important; background: transparent; }
.dx-cat-child-a:hover { background: transparent !important; color: var(--text-main) !important; }
.dx-cat-child-a.dx-cat-active { color: var(--text-main) !important; font-weight: 800; background: var(--nc-acid) !important; border-radius: 3px; }
html body.dark .dx-cat-child-a.dx-cat-active { color: #20231f !important; }
.dx-cat-children { background: transparent; border: 0; }


/* ═══════════════════════════════════════════════
   §07  푸터 · FAB · 플래시
═══════════════════════════════════════════════ */
.nc-footer { background: #20231f; color: #fff; padding: 40px 0 23px; margin-top: auto; }
.nc-foot-top { display: flex; flex-wrap: wrap; gap: 36px 64px; justify-content: space-between; padding-bottom: 36px; }
.nc-foot-brand { flex: 1 1 280px; max-width: 420px; }
.nc-foot-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 900; letter-spacing: -.07em; color: #fff; }
.nc-foot-logo .nc-logo-symbol { height: 36px; min-width: 36px; font-size: 14px; }
.nc-foot-brand p { font-size: 12px; color: #a5a99c; line-height: 1.85; margin: 14px 0 0; }
.nc-foot-col { flex: 0 1 200px; min-width: 150px; }
.nc-foot-col h4 { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--nc-acid); margin: 4px 0 16px; }
.nc-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: #d5d8cf; }
.nc-foot-col li span { display: block; font-size: 10px; color: #8d9285; letter-spacing: .04em; margin-bottom: 1px; }
.nc-foot-col a { color: #d5d8cf; transition: color .15s; }
.nc-foot-col a:hover { color: var(--nc-acid); }
.nc-foot-sns { display: flex; gap: 8px; margin-top: 18px; }
.nc-foot-sns a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ffffff2b; display: grid; place-items: center; font-size: 14px; color: #d5d8cf; transition: background .15s, color .15s; }
.nc-foot-sns a:hover { background: var(--nc-acid); color: #20231f; border-color: var(--nc-acid); }
.nc-foot-bottom { border-top: 1px solid #ffffff20; padding-top: 15px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 10px; color: #8d9285; letter-spacing: .04em; }
.nc-foot-legal { display: flex; gap: 18px; }
.nc-foot-legal a { color: #a5a99c; }
.nc-foot-legal a:hover { color: #fff; }
html body.dark .nc-footer { background: #0a101d; border-top: 1px solid var(--border); }

/* FAB — 하단 중앙 플로팅 (기능은 dx-fab.js, 모양만 변경) */
#dx-fab-wrap { bottom: 26px; gap: 8px; }
.dx-fab-btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
#dx-fab-list, #dx-fab-top { background: var(--bg-card) !important; border: 1px solid var(--text-main) !important; color: var(--text-main) !important; }
#dx-fab-top { background: var(--p) !important; border-color: var(--p) !important; color: var(--nc-on-p) !important; padding: 8px 14px; }
#dx-fab-list { color: var(--text-main); }
#dx-fab-write { background: var(--nc-acid) !important; color: #20231f !important; border: 1px solid #20231f !important; box-shadow: none !important; }
#dx-fab-track { stroke: rgba(128,128,128,.35); }
#dx-fab-ring { stroke: var(--nc-ring); }
#dx-fab-arrow, #dx-fab-pct { color: var(--nc-on-p) !important; }
html body.dark #dx-fab-list { background: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border) !important; }

/* 플래시 메시지 */
.nc-flash-wrap { padding-top: 14px; }
.nc-flash { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid; border-radius: 4px; font-size: 13px; font-weight: 700; }
.nc-flash span { flex: 1; }
.nc-flash button { margin-left: auto; background: transparent; border: 0; cursor: pointer; opacity: .6; font-size: 14px; color: inherit; }
.dx-flash-success { background: #eaf7cf; border-color: #b6d86a; color: #34511a; }
.dx-flash-error   { background: #ffe5df; border-color: #ffb3a4; color: #8f2a14; }
.dx-flash-info    { background: var(--bg-card); border-color: var(--text-main); color: var(--text-main); }


/* ═══════════════════════════════════════════════
   §08  전역 리스킨 — 그림자 제거 · 포인트 색 치환
   (기본 테마 스킨/마이페이지/플러그인의 인라인 스타일까지 덮어씁니다)
═══════════════════════════════════════════════ */
.nc-body .shadow, .nc-body .shadow-sm, .nc-body .shadow-md, .nc-body .shadow-lg, .nc-body .shadow-xl, .nc-body .shadow-2xl,
.nc-body [style*="box-shadow:0"], .nc-body [style*="box-shadow: 0"],
.nc-body .dx-sort-btn.active, .nc-body .mx-tab.on, .nc-body .mp-profile-card, .nc-body pre,
.nc-body .dx-hero-btn-w, .nc-body .pf-btn-primary { box-shadow: none !important; }
.nc-body #dxp-modal, .nc-body #dxp-chat-modal, .nc-body #dxp-memo-modal > div, .nc-body #dxp-search-modal > div { box-shadow: none !important; }

/* 기본 스킨의 파란 틴트(rgba(26,115,232,..)) → 애시드 틴트 */
.nc-body [style*="rgba(26,115,232"],
.nc-body [style*="rgba(59,130,246"] { background-color: rgba(215,251,85,.26) !important; }
.nc-body [style*="color:#2563eb"], .nc-body [style*="color:#1d4ed8"], .nc-body [style*="color:#3b82f6"] { color: var(--text-main) !important; }
.nc-body [style*="background:#3b82f6"], .nc-body [style*="background:#2563eb"] { background: var(--p) !important; color: var(--nc-on-p) !important; border-color: var(--p) !important; }

/* var(--p) 배경(글쓰기·검색·페이지 번호 등)은 알약/원형 + 대비 맞춤 */
.nc-body [style*="background:var(--p)"], .nc-body [style*="background: var(--p)"] { color: var(--nc-on-p) !important; border-radius: 99px !important; }
.nc-body [style*="background:var(--p)"] i, .nc-body [style*="background: var(--p)"] i { color: inherit !important; }
.nc-body .pf-btn-primary, .nc-body .mx-write-btn, .nc-body .mx-reply-btn, .nc-body .dx-mob-cat-pill.active { background: var(--p); color: var(--nc-on-p); border-radius: 99px; }
.nc-body .mx-badge-new { background: var(--nc-coral); color: #20231f; }

/* 공통 입력 · 링크 */
.nc-body input:focus, .nc-body textarea:focus, .nc-body select:focus { border-color: var(--text-main) !important; outline: none; }
.nc-body input[type="checkbox"], .nc-body input[type="radio"] { accent-color: var(--nc-ink); }
html body.dark input[type="checkbox"], html body.dark input[type="radio"] { accent-color: var(--nc-acid); }
.dx-content a { color: var(--text-main) !important; text-decoration: underline !important; text-decoration-color: var(--nc-acid); text-decoration-thickness: 3px !important; text-underline-offset: 2px; }
html body.dark .dx-content a { color: var(--nc-acid) !important; text-decoration-color: rgba(215,251,85,.35); }
.dx-content blockquote { border-left: 4px solid var(--nc-acid); background: var(--bg-card); color: var(--text-muted); border-radius: 0 4px 4px 0; border-top: 0; border-right: 0; border-bottom: 0; }
.nc-body .dx-hl { background: var(--nc-acid); color: #20231f; }
.nc-body mark { background: var(--nc-acid); color: #20231f; }


/* ═══════════════════════════════════════════════
   §10  마이페이지
═══════════════════════════════════════════════ */
.mp-profile-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; }
.mp-avatar { background: var(--nc-acid); color: #20231f; }
.mp-profile-img { border-color: var(--text-main); }
.mp-name { color: var(--text-main); font-weight: 900; letter-spacing: -.06em; }
.mp-lv-badge { background: var(--nc-acid); color: #20231f; }
.mp-loginid, .mp-stat-lbl, .mp-exp-txt { color: var(--text-muted); }
.mp-exp-bar { background: var(--border); }
.mp-exp-fill { background: var(--p); }
.mp-stats-pc { border-left-color: var(--border); }
.mp-stats-mo { border-top-color: var(--border); }
.mp-stats-mo .mp-stat-item + .mp-stat-item { border-left-color: var(--border); }
.mp-tbl thead tr { background: transparent; }
.mp-tbl th { color: var(--text-muted); border-top-color: var(--text-main); border-bottom-color: var(--border); }
.mp-tbl tbody tr:hover { background: var(--hover-row); }
.mp-tbl td.td-date, .mp-tbl td.td-note, .mp-tbl td.td-bal { color: var(--text-muted); }
.mp-type-badge { background: var(--bg-body); color: var(--text-muted); border-color: var(--border); }
.mp-tab-btn { border-radius: 99px !important; }
.mp-tab-btn[class*="bg-blue-600"], .mp-tab-btn.bg-blue-600 { background: var(--p) !important; color: var(--nc-on-p) !important; border-color: var(--p) !important; }
.pf-section { border-bottom-color: var(--border); }
.pf-section-title::after { background: var(--border); }
.pf-input { background: var(--bg-card); border-radius: 4px; }
.pf-input:focus { border-color: var(--text-main); }
.pf-btn { border-radius: 99px; }
.pf-btn-primary { background: var(--p); color: var(--nc-on-p); box-shadow: none; }
.pf-img-default { background: var(--nc-acid); color: #20231f; }
.pf-img-edit-btn { background: var(--p); color: var(--nc-on-p); }
.fr-sub-tab.active em { background: var(--nc-acid); color: #20231f; }
.fr-mutual-badge { background: var(--nc-acid); color: #20231f; }
.mx-tab-grp { border-radius: 99px; }
.mx-tab { border-radius: 99px; }
.mx-tab.on { background: var(--p); color: var(--nc-on-p); }
.mx-row.friend-memo { border-left-color: var(--nc-coral); }
.mx-badge-friend { background: var(--nc-coral-soft); color: #8f2a14; }
.mx-form-input { border-radius: 4px; }
.mx-action-btn { border-radius: 99px; }


/* ═══════════════════════════════════════════════
   §11  검색 · 페이지네이션 · 오류 화면
═══════════════════════════════════════════════ */
.dx-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 28px 0 8px; flex-wrap: wrap; }
.dx-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 700; transition: all .15s; }
.dx-page-btn:hover { border-color: var(--text-main); color: var(--text-main); }
.dx-page-btn.active { background: var(--p); border-color: var(--p); color: var(--nc-on-p); }

.nc-error { text-align: center; padding: 90px 0 60px; }
.nc-error-num { font-size: clamp(96px, 18vw, 200px); line-height: .9; font-weight: 900; letter-spacing: -.09em; color: var(--text-main); position: relative; display: inline-block; }
.nc-error-num::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 6%; height: 22%; background: var(--nc-acid); z-index: -1; }
.nc-error h1 { font-size: 26px; font-weight: 900; letter-spacing: -.06em; margin: 22px 0 10px; }
.nc-error p { font-size: 14px; color: var(--text-muted); line-height: 1.8; margin: 0 0 28px; }
.nc-error-acts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }


/* ═══════════════════════════════════════════════
   §12  다크모드 보정
═══════════════════════════════════════════════ */
html body.dark .nc-side-block.dx-cat-nav { background: transparent !important; border-color: transparent !important; border-top-color: var(--text-main) !important; }
html body.dark .dx-cat-all.dx-cat-active, html body.dark .dx-cat-top.dx-cat-active { color: var(--text-main) !important; }
html body.dark .nc-drop { background: var(--bg-card) !important; border-color: var(--border) !important; }
html body.dark .nc-drop-link:hover { background: var(--hover-row) !important; color: var(--text-main) !important; }
html body.dark .nc-drop-link.is-active { color: #20231f !important; }
html body.dark .nc-notif-panel { border-color: var(--border); }
html body.dark .nc-new { color: #20231f; }
html body.dark .mp-tab-btn[class*="bg-blue-600"] { color: #20231f !important; }
html body.dark .mp-profile-card, html body.dark .mp-card-inner { background: var(--bg-card) !important; }
html body.dark .nc-body [style*="background:var(--p)"] { color: #20231f !important; }
html body.dark [style*="background:var(--p)"], html body.dark [style*="background: var(--p)"] { color: #20231f !important; }
html body.dark [style*="rgba(26,115,232"], html body.dark [style*="rgba(59,130,246"] { background-color: rgba(215,251,85,.14) !important; }
html.dx-dark-loading body.nc-body *, html.dx-dark-loading body.nc-body *::before, html.dx-dark-loading body.nc-body *::after { transition: none !important; }


/* ═══════════════════════════════════════════════
   §13  반응형
═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .nc-masthead { grid-template-columns: 220px minmax(160px, 1fr) auto; gap: 22px; }
}
@media (max-width: 900px) {
  :root { --nc-gutter: 24px; }
  .nc-masthead { grid-template-columns: auto 1fr; gap: 16px 20px; padding: 20px 0 18px; }
  .nc-search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .nc-account { justify-self: end; }
  .nc-foot-top { gap: 30px 40px; }
}
@media (max-width: 767px) {
  .nc-nav { display: none; }
  .nc-burger { display: inline-grid; }
  .nc-hide-sm { display: none !important; }
  .nc-topbar-tag { display: none; }
  .nc-head { position: sticky; top: 0; background: var(--bg-header); }
  .nc-masthead { padding: 12px 0; grid-template-columns: 1fr auto; gap: 10px 14px; border-bottom: 1px solid var(--border); }
  .nc-search { display: none; }
  .nc-logo-text small { display: none; }
  .nc-topbar { height: 34px; }
  .nc-topbar-left b { display: none; }
  .nc-main { padding-top: 22px; padding-bottom: 56px; }
  .nc-notif-panel { width: min(92vw, 340px); }
}
@media (max-width: 620px) {
  :root { --nc-gutter: 17px; }
  .nc-foot-top { flex-direction: column; }
  .nc-foot-col { flex-basis: auto; }
  .nc-foot-bottom { flex-direction: column; }
}

/* 다크모드: acid 배경 요소의 글자색 고정 */
html body.dark .nc-logo-symbol, html body.dark .nc-logo-symbol *,
html body.dark .nc-btn-ink, html body.dark .nc-btn-ink * { color: #20231f !important; }
html body.dark .nc-logo-symbol { background: var(--nc-acid) !important; }
html body.dark .nc-logo-symbol.has-img { background: transparent !important; }

@media (max-width: 620px) {
  .nc-logo { min-width: 0; }
  .nc-logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
}


/* ── 하단 고정 통계 바 ── */
body { padding-bottom: 44px; }
.nc-statbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9985; background: #20231f; border-top: 1px solid #3a3e36; color: #b4b7ac; }
html body.dark .nc-statbar { background: #0b1220; border-top-color: var(--border); }
.nc-statbar-in { display: flex; align-items: center; justify-content: center; gap: 26px; max-width: var(--nc-w); margin: 0 auto; height: 44px; padding: 0 var(--nc-gutter); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.nc-statbar-in::-webkit-scrollbar { display: none; }
.nc-sb-group { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nc-sb-group + .nc-sb-group { padding-left: 26px; border-left: 1px solid #3a3e36; }
.nc-sb-tag { font-size: 9px; font-weight: 900; letter-spacing: .17em; color: var(--nc-acid); }
.nc-sb-item { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; }
.nc-sb-item em { font-style: normal; color: #9a9d92; }
.nc-sb-item b { font-size: 13px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.nc-sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nc-acid); animation: nc-sb-pulse 2s ease-in-out infinite; }
@keyframes nc-sb-pulse { 50% { opacity: .35; } }
#dx-fab-wrap { bottom: 62px !important; }
@media (max-width: 900px) {
  .nc-statbar-in { justify-content: flex-start; gap: 18px; padding: 0 16px; }
  .nc-sb-group + .nc-sb-group { padding-left: 18px; }
}
@media (max-width: 767px) { #dx-fab-wrap { bottom: 58px !important; } }
.nc-logo-img[hidden] { display: none !important; }
html body.dark .nc-chip-lv { color: #20231f !important; }