@charset "utf-8";
/* 솔문 다크테마
   - 라이믹스 2.1.36 이 body 에 color_scheme_dark / color_scheme_light 를 자동으로 붙인다
     (OS 설정 감지 + rx_color_scheme 쿠키 기억). 이 파일은 그 클래스에 색만 입힌다.
   - 코어·스킨 파일은 한 글자도 고치지 않는다. 애드온을 끄면 즉시 원상복구.
   - 전략: 팔레트를 변수로 두고, 밝은 배경과 어두운 글자를 쓰는 실제 선택자만 골라 덮는다.
     무차별 filter:invert 는 사진·로고가 깨지므로 쓰지 않는다.
*/

body.color_scheme_dark {
  /* ★푸른빛 도는 네이비 계열(검정 아님). 글자·테두리도 같은 색조로 맞췄다.
     대비(카드 #242c3d 기준): text 11.6 / text2 7.6 / text3 4.5 / accent 5.7 : 1 */
  --d-bg:      #1c2230;   /* 페이지 바탕 */
  --d-surface: #242c3d;   /* 카드·박스 */
  --d-surface2:#2c364a;   /* 헤더·구분 영역 */
  --d-line:    #4a5570;   /* 테두리 — 카드 대비 1.9:1 */
  --d-line2:   #5f6c8a;   /* 입력폼·버튼 등 더 또렷해야 하는 테두리 */
  --d-text:    #e6eaf2;
  --d-text2:   #b6bfd2;
  --d-text3:   #8892a8;
  --d-accent:  #ff8163;   /* 네이비 위에서 5.7:1 */
  --d-gold:    #d9b478;

  background: var(--d-bg);
  color: var(--d-text);
}

/* ── 1. 공통 · 레이아웃(xedition) ── */
body.color_scheme_dark .container,
body.color_scheme_dark .body,
body.color_scheme_dark .content,
body.color_scheme_dark #content { background: transparent; color: var(--d-text); }

/* ★헤더는 .header 가 아니라 바깥 .header_wrap 이 화면 폭을 채운다.
   .header 에만 색을 주면 1200px 밖으로 배경이 끊겨 경계가 보인다. */
body.color_scheme_dark .header_wrap { background: var(--d-surface2); }

/* ★첫화면은 슬라이드가 헤더 뒤까지 올라온다(.visual 이 top:0).
   라이트에서는 헤더가 투명이라 로고 뒤로 이미지가 비치는데, 다크에서 배경을 깔면
   그 부분이 잘려 보인다. 첫화면에서만 투명하게 두고 글자에 그림자를 줘 읽히게 한다.
   ★첫화면은 .container 에 onepage 클래스가 붙는다(서브는 안 붙음). */
body.color_scheme_dark .container.onepage .header_wrap { background: transparent; }
body.color_scheme_dark .container.onepage .header,
body.color_scheme_dark .container.onepage .gnb a,
body.color_scheme_dark .container.onepage .header .side a,
body.color_scheme_dark .container.onepage .rx-scheme-toggle.rx-in-header {
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
/* 첫화면 헤더의 전환 버튼은 배경이 사진이라 살짝 어둡게 깔아 준다 */
body.color_scheme_dark .container.onepage .rx-scheme-toggle.rx-in-header {
  background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.35);
}
body.color_scheme_dark .header { background: transparent; }
body.color_scheme_dark .fixed_header .header_wrap.shrink { background: var(--d-surface2); border-bottom-color: var(--d-line); }
/* 서브 비주얼 띠(#f6f6f6) 도 어둡게 — 사진이 깔린 경우는 사진을 살린다 */
body.color_scheme_dark .visual,
body.color_scheme_dark .visual.sub { background-color: var(--d-bg); }
body.color_scheme_dark .header a,
body.color_scheme_dark .gnb a,
body.color_scheme_dark .lnb a { color: var(--d-text); }
body.color_scheme_dark .gnb a:hover,
body.color_scheme_dark .lnb a:hover,
body.color_scheme_dark .lnb li.on > a { color: var(--d-accent); }
body.color_scheme_dark .lnb { border-color: var(--d-line); }
body.color_scheme_dark .lnb > ul > li { border-color: var(--d-line); }

body.color_scheme_dark .footer,
body.color_scheme_dark .footer_wrap { background: var(--d-surface2); border-top: 1px solid var(--d-line); color: var(--d-text2); }
body.color_scheme_dark .footer a { color: var(--d-text2); }

body.color_scheme_dark .visual:after,
body.color_scheme_dark .sub_visual:after { background: rgba(10,10,12,.55); }

/* ── 2. 새로 만든 화면들 (.smn .sab .smp2 .spc) ── */
body.color_scheme_dark .smn,
body.color_scheme_dark .sab,
body.color_scheme_dark .smp2,
body.color_scheme_dark .spc {
  --a:    var(--d-accent);
  --ink:  var(--d-text);
  --sub:  var(--d-text2);
  --line: var(--d-line);
  --soft: var(--d-surface2);
  color: var(--d-text);
}
body.color_scheme_dark .smn-card,
body.color_scheme_dark .sab-grid li,
body.color_scheme_dark .sab-end,
body.color_scheme_dark .smp2-map,
body.color_scheme_dark .smp2-info,
body.color_scheme_dark .spc-fam li,
body.color_scheme_dark .spc-feat li,
body.color_scheme_dark .spc-tbl,
body.color_scheme_dark .spc-tbl ul li { background: var(--d-surface); border-color: var(--d-line); }

body.color_scheme_dark .smn-hd,
body.color_scheme_dark .spc-tbl-hd,
body.color_scheme_dark .spc-feat li:first-child { background: var(--d-surface2); border-color: var(--d-line); }
body.color_scheme_dark .smn-list tr { border-color: var(--d-line); }
body.color_scheme_dark .smn-list tr:hover td { background: var(--d-surface2) !important; }
body.color_scheme_dark .smn-notice li,
body.color_scheme_dark .sab-body p,
body.color_scheme_dark .sab-box p { color: var(--d-text2); }
body.color_scheme_dark .smn-notice strong,
body.color_scheme_dark .sab-lead p { color: var(--d-text); }
body.color_scheme_dark .spc-tbl .spc-de span,
body.color_scheme_dark .smp2-tips { background: var(--d-surface2); border-color: var(--d-line); color: var(--d-text2); }

/* ── 라이트에서 검정(#0a0a0a)이던 블록들 ──
   다크에서는 배경이 이미 어두우므로 검정을 그대로 두면 구분이 안 된다.
   페이지 CSS(라이트용)는 건드리지 않고 여기서만 회색 계열로 덮는다.
   ★배경 이미지가 있는 히어로·why 는 background-color 만 바꾼다(이미지 유지). */
body.color_scheme_dark .smh-hero,
body.color_scheme_dark .smh-why { background-color: #161b26; }
body.color_scheme_dark .sab-hl,
body.color_scheme_dark .smp-quote,
body.color_scheme_dark .sab-top,
body.color_scheme_dark .smm-top,
body.color_scheme_dark .smp-top { background: #161b26 !important; }
/* 검정 배경 위 흰 글자는 그대로 두되, 보조 글자만 톤 조정 */
body.color_scheme_dark .sab-top p.sub,
body.color_scheme_dark .smm-top p,
body.color_scheme_dark .smp-top p { color: rgba(255,255,255,.7) !important; }

/* 라이트에서 검정이던 버튼은 다크에서 강조색으로 */
body.color_scheme_dark .sab-links a.on,
body.color_scheme_dark .smp2-btns a.on,
body.color_scheme_dark .smh-plan div.on a { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }
body.color_scheme_dark .sab-links a,
body.color_scheme_dark .smp2-btns a { border-color: var(--d-line2); color: var(--d-text); }


/* ── 3. 게시판 스킨 (sketchbook5) ── */
body.color_scheme_dark .bd,
body.color_scheme_dark .bd_lst_wrp,
body.color_scheme_dark .rd,
body.color_scheme_dark .bd_zine { background: transparent; color: var(--d-text); }
body.color_scheme_dark .bd a,
body.color_scheme_dark .rd a { color: var(--d-text); }
body.color_scheme_dark .bd a:hover { color: var(--d-accent); }

body.color_scheme_dark .bd_lst thead th,
body.color_scheme_dark .bd_lst .notice,
body.color_scheme_dark .bd .bd_srch_wrp,
body.color_scheme_dark .bd_tl,
body.color_scheme_dark .cnt_head { background: var(--d-surface2) !important; border-color: var(--d-line) !important; color: var(--d-text); }
body.color_scheme_dark .bd_lst tbody tr,
body.color_scheme_dark .bd_lst td,
body.color_scheme_dark .bd_lst th { border-color: var(--d-line) !important; background: transparent !important; }
body.color_scheme_dark .bd_lst tbody tr:hover td { background: var(--d-surface) !important; }
body.color_scheme_dark .bd_lst .no,
body.color_scheme_dark .bd_lst .author,
body.color_scheme_dark .bd_lst .time,
body.color_scheme_dark .bd_lst .m_no { color: var(--d-text3) !important; }

body.color_scheme_dark .rd_hd,
body.color_scheme_dark .rd_ft,
body.color_scheme_dark .rd_nav,
body.color_scheme_dark .fdb_lst_wrp,
body.color_scheme_dark .rd_fnt_prv { background: var(--d-surface) !important; border-color: var(--d-line) !important; }

/* 본문에 인라인으로 박힌 흰 배경/검은 글자는 사용자가 쓴 것이라 강제하지 않는다.
   대신 본문 영역 자체를 살짝 밝혀 읽히게 한다. */
body.color_scheme_dark .rd_body.xe_content { background: var(--d-surface); padding: 18px; border-radius: 10px; }

body.color_scheme_dark .bd_btn,
body.color_scheme_dark .btn_img,
body.color_scheme_dark .ipt_txt,
body.color_scheme_dark .bd_faq li a { background: var(--d-surface2) !important; border-color: var(--d-line2) !important; color: var(--d-text) !important; }
body.color_scheme_dark .bd_pg a,
body.color_scheme_dark .bd_pg strong { background: var(--d-surface2); border-color: var(--d-line); color: var(--d-text2); }
body.color_scheme_dark .bd_pg strong,
body.color_scheme_dark .bd_pg a:hover { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }

body.color_scheme_dark input[type=text],
body.color_scheme_dark input[type=password],
body.color_scheme_dark input[type=email],
body.color_scheme_dark input[type=search],
body.color_scheme_dark input[type=number],
body.color_scheme_dark input[type=tel],
body.color_scheme_dark select,
body.color_scheme_dark textarea { background: var(--d-surface2); border-color: var(--d-line2); color: var(--d-text); }
body.color_scheme_dark ::placeholder { color: var(--d-text3); }

body.color_scheme_dark .widget_login,
body.color_scheme_dark .login_widget,
body.color_scheme_dark .ncenter_login { background: var(--d-surface) !important; color: var(--d-text); }

/* ── 4. 모바일 레이아웃(solmoon2026) ── */
body.color_scheme_dark .sm-wrap { background: var(--d-bg); }
body.color_scheme_dark .sm-body { background: var(--d-bg); color: var(--d-text); }
body.color_scheme_dark .sm-ft { background: var(--d-surface2); border-color: var(--d-line); }
body.color_scheme_dark .sm-tab { background: rgba(36,44,61,.96); border-color: var(--d-line); }
body.color_scheme_dark .sm-tab a { color: var(--d-text3); }
body.color_scheme_dark .sm-tab a.on { color: var(--d-text); }

body.color_scheme_dark .smh,
body.color_scheme_dark .smp,
body.color_scheme_dark .smm,
body.color_scheme_dark .sab {
  --a:    var(--d-accent);
  --ink:  var(--d-text);
  --sub:  var(--d-text2);
  --line: var(--d-line);
  --soft: var(--d-surface2);
}
body.color_scheme_dark .smh-prod a,
body.color_scheme_dark .smh-help a,
body.color_scheme_dark .smh-plan div,
body.color_scheme_dark .smh-end,
body.color_scheme_dark .smp-card,
body.color_scheme_dark .smp-list li,
body.color_scheme_dark .smp-made li,
body.color_scheme_dark .smp-end,
body.color_scheme_dark .smm-info,
body.color_scheme_dark .smm-embed,
body.color_scheme_dark .sab-box { background: var(--d-surface); border-color: var(--d-line); }
body.color_scheme_dark .smp-card-hd,
body.color_scheme_dark .smp-more,
body.color_scheme_dark .smh-feat summary i,
body.color_scheme_dark .smm-tips { background: var(--d-surface2); border-color: var(--d-line); }
body.color_scheme_dark .smh-stats,
body.color_scheme_dark .smh-stats div,
body.color_scheme_dark .smh-feat details,
body.color_scheme_dark .smh-feat,
body.color_scheme_dark .smp-mods li,
body.color_scheme_dark .smp-faq a,
body.color_scheme_dark .sab-body section { border-color: var(--d-line); }

/* ── 5. 전환 버튼 ── */
/* 원형 버튼. 헤더 안이든 우하단이든 같은 모양을 유지한다. */
.rx-scheme-toggle {
  box-sizing: border-box;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #52525b;
  border: 1px solid #d0d4da;
  cursor: pointer; padding: 0; line-height: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rx-scheme-toggle svg { width: 17px; height: 17px; display: block; }
.rx-scheme-toggle:hover { color: #0a0a0a; border-color: #a8aeb8; background: #f4f5f7; }
body.color_scheme_dark .rx-scheme-toggle {
  background: var(--d-surface2); color: var(--d-text); border-color: var(--d-line2);
}
body.color_scheme_dark .rx-scheme-toggle:hover { background: #36415a; border-color: #74829f; }

/* 헤더를 못 찾았을 때만 우하단 고정 */
.rx-scheme-toggle:not(.rx-in-header) {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 44px; height: 44px;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
body.color_scheme_dark .rx-scheme-toggle:not(.rx-in-header) { box-shadow: 0 4px 14px rgba(0,0,0,.45); }
@media (max-width: 720px) {
  .rx-scheme-toggle:not(.rx-in-header) { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); right: 14px; }
}

/* ★PC 헤더 안 — 옆 아이콘들과 세로 중심을 맞춘다.
   .side 항목들은 line-height:20px 기준이라 그대로 두면 버튼이 6px 내려간다. */
.header .side li.rx-scheme-li {
  display: inline-flex; align-items: center;
  height: 22px;              /* 옆 li 와 같은 높이 */
  margin: 0 10px 0 0;
  vertical-align: middle;
}
.header .rx-scheme-toggle.rx-in-header { position: static; }
/* 헤더가 어두운 배경일 때는 테두리/글자를 밝게 */
body.color_scheme_dark .header .rx-scheme-toggle.rx-in-header {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28);
}
body.color_scheme_dark .header .rx-scheme-toggle.rx-in-header:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }

/* ★모바일 헤더는 항상 어두운 배경 */
.sm-hd-r .rx-scheme-toggle.rx-in-header {
  position: static;
  width: 34px; height: 34px; margin-right: 4px;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.28) !important;
}
.sm-hd-r .rx-scheme-toggle.rx-in-header:hover {
  background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.5) !important;
}

.rx-scheme-toggle .ico-sun { display: none; }
.rx-scheme-toggle .ico-moon { display: block; }
body.color_scheme_dark .rx-scheme-toggle .ico-sun { display: block; }
body.color_scheme_dark .rx-scheme-toggle .ico-moon { display: none; }

/* ── 5b. 페이지 높이 정리 — 푸터 위치 통일 + 빈 공간 축소 ──
   ① 본문 길이가 제각각이라 푸터가 912~2139px 사이를 오갔다 → 최소 높이로 바닥을 맞춘다.
   ② 단, 너무 크면(800px) 표가 끝난 뒤 빈 공간이 크게 남고 1080 화면에서 푸터가 잘린다.
      1080 기준 계산: 헤더 100 + 비주얼 170 + 콘텐츠 + 푸터 279 ≤ 1080  →  콘텐츠 ≈ 500px.
   ③ xedition 의 하단 패딩 100px 도 함께 줄인다(위 40 / 아래 44).
   ★xedition 이 `.body.fixed-width.left .content{min-height:400px;padding:40px 0 100px}`(0-3-0) 이라
     같은 특정도 이상으로 써야 이긴다.
   ※ 라이트·다크 공통이라 body 클래스를 붙이지 않는다. */
/* ★첫화면(.main)은 제외한다.
   서브페이지는 본문 길이가 제각각이라 바닥을 맞춰야 하지만,
   첫화면은 ★메뉴 5개(약 180px)가 전부★라 min-height 380px 를 걸면
   메뉴 아래에 약 200px 의 빈 흰 공간이 생긴다.
   그러면 슬라이드와 메뉴는 붙고 아래만 띄어져 무게중심이 위로 쓸린다.
   → 첫화면은 내용만큼만 차지하게 두고, 위아래 여백을 같은 값으로 맞춘다(§아래).
   테마 원본도 .main 에는 min-height 가 없었다(.right 만 400px). */
.body.fixed-width.left .content,
.body.fixed-width.right .content,
.body.fixed-width.none .content {
  min-height: 380px;
  padding-bottom: 22px;
}

/* 첫화면: 슬라이드 ↔ 메뉴 ↔ 푸터 여백을 위아래 같게 — 빈 띄가 안 생긴다 */
.body.fixed-width.main { padding-top: 34px; padding-bottom: 34px; }
.body.fixed-width.main .content { min-height: 0; padding-top: 0; padding-bottom: 0; }
.sm-body { min-height: calc(100vh - 300px); }
/* .body 의 상하 패딩 30px 도 조인다 — 비주얼 띠와 푸터에 바로 붙는 여백이다 */
.body.fixed-width { padding-top: 16px; padding-bottom: 16px; }

/* ── 5b-3. 지금 보고 있는 위치 표시 ──
   문제: 마우스를 올릴 때만 표가 나고, 고르고 나면 어디 있는지 알 수 없었다.
   원인: 테마 layout.html 의 1단 <li> 에 selected 검사가 없어 class="on" 이 안 붙는다.
         (테마가 li.on 스타일을 준비해 둔 곳도 글자색 변경이라,
          메뉴가 이미지인 솔문에서는 어차피 통하지 않는다)
   해법: 애드온 JS 가 주소를 비교해 클래스를 붙이고 여기서 모양을 그린다.

   ★좌측·상단을 ★같은 모양★ 으로 통일했다(사장님 지시).
     좌측(.sm-current)      = 지금 보는 페이지
     상단(.sm-current-top)  = 그 페이지가 속한 분류
     둘 다 [주황 화살표 ▶ + 주황 글자] 가 ★한 장의 그림★ 으로 들어간다.
     메뉴가 텍스트가 아니라 PNG 그림이라 CSS 로는 색을 못 바꾸기 때문에,
     애드온 JS(paintSelected)가 select 그림으로 갈아 끼운다.
     ★화살표까지 그림에 넣은 이유는 아래 블록의 주석 참고.
   ※ 라이트·다크 공통. 레이아웃 파일은 고치지 않는다. */

/* ★메뉴 글자를 새로 그렸다(2026-09-07). 화살표까지 그림 안에 들어 있다.
   그림 만드는 곳: tools/menu_text_render.py  (맑은 고딕 Bold 16px + 외곽선 2px)

   ★왜 새로 그렸나 — 원본 그림으로는 아래를 동시에 만족할 수 없었다:
     1) 원본은 글자가 그림 안에 가운데 정렬돼 있어 글자 왼쪽 여백이
        글자수에 따라 1~17px 로 제각각이었다. 그래서 CSS 로 화살표를
        붙이면 글자와의 간격이 메뉴마다 달랐다.
     2) 폭을 통일하니 이번엔 메뉴 사이 간격이 48~73px 로 들쭉날쭉해졌다.
     3) 자간을 벌려 맞추려 했으나 ★글자들이 픽셀 단위로 붙어 있어★
        자를 수 없었다(어느 열에서도 획이 5~16px 지나간다 = 글자가 갈라진다).
   → 같은 글꼴·같은 크기로 새로 그리니 위 셋이 한꺼번에 풀린다.
     글자 시작 x 고정 + 오른쪽 여백 고정이라 그림 폭이 글자 길이를 그대로
     따라가고, 메뉴 간격은 아래 padding 하나로만 정해진다.

   ★외곽선(어두운 테두리 + 밝은 채움)은 원본 구조를 그대로 따랐다.
     이것이 있어야 ★배경색과 무관하게 읽힌다.★ 헤더 배경이 두 모드에서
     정반대이기 때문에(라이트 #ffffff / 다크 #2c364a) 중요하다:
       · 흰 배경 → 어두운 외곽선이 글자를 잡아준다
       · 어두운 배경 → 흰 채움이 글자를 띄운다
     덕분에 ★다크모드용 CSS 반전(filter)이 필요 없다.★
     예전에 filter: invert() 를 쓰던 방식은 이 외곽선 구조로 대체됐다 —
     되살리지 말 것(외곽선까지 뒤집혀 오히려 안 보인다). */

/* 상단 — 그림이 글자 길이만큼만 차지하므로 여백으로 간격을 정한다.

   ★max-width 를 742 -> 860px 로 넓힌 이유 (글자를 키우려면 필요했다):
     헤더는 1200px 이고 안에 [로고 113px][빈자리][메뉴][여백 22px][아이콘 112px]
     가 들어간다. 실측해 보니 로고와 메뉴 사이에 ★225px 이 놀고 있었다.★
     메뉴가 쓸 수 있는 최대치는 1200-113-22-112 = 953px 이고,
     로고와 40px 쯤 띄우면 913px 까지 가능하다.
     742px 는 테마가 잡아 둔 값일 뿐 물리적 한계가 아니었다.
   ★18px 인 이유: 상단 최상위 6개 그림폭 합이 599px 이다.
     599 + 18*2*6 = 815px <= 860px (여유 45px).
     글자 크기나 메뉴 개수를 바꾸면 ★여기를 다시 계산할 것.★
     860px 를 넘기면 메뉴가 두 줄로 접힌다. */
.gnb { max-width: 860px; }
.gnb > ul > li > a { padding-left: 18px; padding-right: 18px; }

/* 좌측 — 세로로 쌓이므로 폭 제한이 없다. 가운데 정렬만 유지한다. */
.body.fixed-width.left .lnb > ul > li { position: relative; }
.body.fixed-width.left .lnb > ul > li > a img,
.gnb > ul > li > a img { vertical-align: middle; }


/* ── 5a-6. 게시판 흰 배경 ★일괄 정리★ ──
   sketchbook5 스킨은 밝은 배경(#FFF/#FAFAFA/#FCFCFC 등)을 쓰는 규칙이
   ★약 80개★ 되는 것을 확인했다(board.css 전수조사).
   하나씩 따라가면 빠지는 게 생기므로 ★게시판 영역 전체를
   마지막에 한 번 덮는★ 방식을 쓴다. 이후 스킨이 업데이트되어
   새 흰 조각이 생겨도 자동으로 따라온다.

   ★예외 처리가 핵심:
     - 본문(.rd_body .xe_content)은 사진·표가 들어 있어 건드리지 않는다.
     - 버튼·입력란은 앞서 따로 지정해 둔 것이 있으므로 제외한다.
     - 프로필 사진·첨부 이미지 같은 <img> 는 배경 개념이 없다. */
/* ※ 일괄 background-image:none 은 ★쓰지 않는다★.
   이 스킨은 아이콘 33곳을 background url() 로 그린다
   (.ico_16px / .ico_sns / .starRating / .bd_faq .mrk 등).
   지우면 그 아이콘이 전부 사라진다 — 배경색만 바꿔치기한다.
   (그라데이션 배경은 background-color 가 아니라 따로 지우지 못하므로,
    필요한 곳만 아래 목록에서 background 로 통째 덮는다) */
body.color_scheme_dark .bd .rd_hd .board .top_area,
body.color_scheme_dark .bd .rd_hd .xe_v3 .btm_area,
body.color_scheme_dark .bd .rd_nav,
body.color_scheme_dark .bd .rd_sign,
body.color_scheme_dark .bd .fdb_lst_wrp,
body.color_scheme_dark .bd .fdb_lst_wrp.fdb_v2,
body.color_scheme_dark .bd .fdb_v2 .fdb_lst,
body.color_scheme_dark .bd .fdb_v2 .fdb_itm.bg1,
body.color_scheme_dark .bd .fdb_tag,
body.color_scheme_dark .bd .cmt_editor,
body.color_scheme_dark .bd .cmt_disable,
body.color_scheme_dark .bd .bubble .wrp,
body.color_scheme_dark .bd .bd_cnb,
body.color_scheme_dark .bd .cTab > li,
body.color_scheme_dark .bd .bg_f_f9,
body.color_scheme_dark .bd .bd_wrt_main {
  background: var(--d-surface) !important;
  border-color: var(--d-line) !important;
  color: var(--d-text) !important;
}
/* 위 블록 안의 글자도 함께 — 스킨이 짙은 회색을 물려 놓았다 */
body.color_scheme_dark .bd .rd_hd .board .top_area *,
body.color_scheme_dark .bd .rd_nav *,
body.color_scheme_dark .bd .rd_sign *,
body.color_scheme_dark .bd .fdb_lst_wrp * { color: var(--d-text) !important; }
/* 보조 정보(조회수·날짜 등)는 한 톤 연하게 */
body.color_scheme_dark .bd .rd_hd small,
body.color_scheme_dark .bd .rd_hd .btm_area span,
body.color_scheme_dark .bd .rd_hd .board .cate { color: var(--d-text2) !important; }
/* 링크는 강조색 */
body.color_scheme_dark .bd .rd_hd a,
body.color_scheme_dark .bd .fdb_lst_wrp a { color: var(--d-accent) !important; }

/* ── 5a-5. 글 상세 — 남아 있던 흰 박스들 ──
   글을 열었을 때 'Who's 『관리자』' 프로필 레이어와 몇몇 조각이
   흰 배경 그대로 남아 다크모드에서 튀었다(사장님 지적).
   본문·머리말·하단(.rd_hd/.rd_body/.rd_ft 등)은 이미 덮어 두었고,
   ★프로필 레이어(.member_plate)와 네임태그★ 가 빠져 있었다. */
body.color_scheme_dark .member_plate,
body.color_scheme_dark .member_plate .bg,
body.color_scheme_dark .nametag {
  background: var(--d-surface) !important;
  border-color: var(--d-line) !important;
  color: var(--d-text) !important;
}
body.color_scheme_dark .member_plate a,
body.color_scheme_dark .member_plate span,
body.color_scheme_dark .member_plate strong { color: var(--d-text) !important; }
/* 프로필 사진 틀 */
body.color_scheme_dark .profile { border-color: var(--d-line) !important; }
/* 첨부파일·정보 줄의 구분선 */
body.color_scheme_dark .rd_fnt,
body.color_scheme_dark .rd_ft_nav { border-top-color: var(--d-line) !important; }
body.color_scheme_dark .rd_file th,
body.color_scheme_dark .rd_file td { color: var(--d-text) !important; border-color: var(--d-line) !important; }

/* ── 5a-4. 묻고답하기 — 펼친 답변 영역 다크모드 ──
   문제: 제목을 누르면 펼철지는 답변칸이 ★흰 배경 그대로★ 남아
         다크모드에서 색이 반전된 것처럼 확 튀었다(사장님 지적).
   원인: 스킨이 `.bd_faq .a { background:#FFF; border:1px solid #EEE }` 로
         흰색을 박아 둔다. 앞서 넣은 다크 규칙은 목록(.bd_faq li a)만
         덮었고 ★펼쳐지는 영역(.a)은 빠져 있었다★.
   해법: 답변칸과 그 안 본문·링크를 다크 팔레트로 맞춘다.
         스킨이 인라인이 아닌 파일에서 지정하므로 !important 는
         본문 색상처럼 개별 요소가 색을 들고 있는 곳에만 쓴다.
   ※ 라이트 모드는 건드리지 않는다 — 원래 흰 배경이 맞다. */
body.color_scheme_dark .bd_faq .a {
  background: var(--d-surface) !important;
  border-color: var(--d-line) !important;
  color: var(--d-text);
}
/* 답변 본문 — 글자색을 직접 물고 있는 경우가 많아 강제한다 */
body.color_scheme_dark .bd_faq .a,
body.color_scheme_dark .bd_faq .a p,
body.color_scheme_dark .bd_faq .a div,
body.color_scheme_dark .bd_faq .a span,
body.color_scheme_dark .bd_faq .a li,
body.color_scheme_dark .bd_faq .a td { color: var(--d-text) !important; }
/* 답변 안 링크는 강조색으로 */
body.color_scheme_dark .bd_faq .a a { color: var(--d-accent) !important; }

/* ── 5a-3. 묻고답하기 목록의 Q 표시가 제목을 가리는 문제 ──
   상황: 이 게시판은 sketchbook5 의 FAQ 형식(.bd_faq)을 쓴다.
   원인: 스킨이 Q 배지(.mrk)를 `position:absolute; left:-38px` 으로
         ★제목 왼쪽 바깥★에 높도록 만들었다. 그런데 이 레이아웃에는
         그 바깥 여유가 없어 배지가 제목 글자 위로 겹쳐 버렸다.
   해법: 제목 줄(.q)에 ★왼쪽 여백을 만들어★ 배지가 설 자리를 내주고,
         배지를 그 자리로 옮긴다. 글자와 겹치지 않으면서
         Q/A 구분도 그대로 보인다. 스킨 파일은 고치지 않는다.
   ※ 라이트·다크 공통. 높이도 22px → 20px 로 살짝 줄여 줄간과 맞췄다. */
.bd_faq .q { padding-left: 34px; position: relative; }
.bd_faq .mrk {
  left: 0;
  top: 50%;
  margin-top: -11px;
  width: 20px;
  height: 20px;
  line-height: 20px;
}
.bd_faq .article .mrk { font: 700 14px/20px Arial, Helvetica, sans-serif; }
.bd_faq .mrkA { left: 0; }

/* ── 5a-2. 검색창(돋보기 클릭 시 뜨는 레이어) 비율 정리 ──
   문제: 입력 글자가 40px 인데 상자 높이도 40px 이라
         글자가 상자를 꿉 채워 밑줄·받침이 잘리고 배너를 뚫고 나왔다.
         또 폭이 오른쪽 끝까지 꿉 차서 긴 검색어가 X 버튼과 겹친다.
   해법: 글자를 24px 로 줄이고 상자를 48px 로 높여 위아래 숨통을 준다.
         오른쪽에 X 버튼 자리 60px 을 비워 글자가 버튼을 침범하지 않게 한다.
   ※ 라이트·다크 공통. 테마 원본(layout.css 566행)과 같은 특정도라
     dark.css 가 뒤에 로드되는 덕에 이긴다. */
.search_area input[type=text] {
  font-size: 24px;
  height: 48px;
  padding: 8px 60px 8px 0;
}

/* ── 5b-1. 서브페이지 배너 제목을 사진 위에서 읽힐 것 ──
   문제: 배너의 <h1>(메인화면·자료실 등)이 흐리게 보였다.
   ★색 문제가 아니다 — 글자는 이미 순백(#fff)이다(layout.css 747행).
     배경 사진(sub_banner_01.jpg)의 ★밝은 벽면★에 흰 글씨가 얹혀 묻힌 것.
   ※ 테마 HTML 에 <span class="mask"> 가 있지만 ★그 클래스 CSS 가 아예 없다★
     (전체 스타일시트 뒤져도 .mask 규칙 0건). 원래 있어야 할 보호막이 빈 것.
   해법: 사진을 어둡게 덮는 대신 ★글자에만 그늘★을 준다.
     사진은 원래대로 다 보이고, 배경이 밝든 어둡든 글자가 산다.
     (사장님이 시안 비교 후 그림자 방식 선택, ★더 진하게★ 요청 — 2026-09-07)
   ※ 라이트·다크 공통. 모든 서브페이지 배너에 같이 적용된다. */
.visual.sub .sub_title h1 {
  text-shadow: 0 1px 3px rgba(0,0,0,.80),
               0 2px 10px rgba(0,0,0,.65),
               0 0 20px rgba(0,0,0,.50);
}

/* ── 5b-2. 서브페이지 좌측메뉴(lnb) 글자를 본문 쪽으로 민다 ──
   문제: lnb 메뉴(인사말·제품소개·오시는길)와 본문 사이가 너무 멀었다.
   원인: 테마가 lnb 상자를 260px 로 잡는데 ★메뉴는 폭 82~100px 짜리 이미지★라
         상자 안 오른쪽으로 160px 이 통째로 비었다.
   ★해법: 상자 폭은 260px 그대로 두고 ★글자만 오른쪽으로 밀어★ 붙인다.
     상자를 줄이면 본문이 넘치게 넓어져(900→1010) 게시판 표가 길게 늘어나고
     제목과 등록일이 멀어져 더 이상해진다(2026-09-07 실제로 그러했다).
     → 본문 폭(900px)은 절대 건드리지 말 것.
   ※ 라이트·다크 공통. 좀은 화면(~1200px)은 테마가 레이아웃을 바꿔 무관. */
/* ★오른쪽 끝 맞춤이 아니라 가운데 맞춤이다.
   메뉴 이미지 폭이 메뉴마다 다르기 때문이다:
     회사소개  인사말/제품소개/오시는길  → 82 / 82 / 82  (같음)
     게시판    공지사항/자주하는질문/묻고답하기/자유게시판
                → 82 / 100 / 92 / 82  (★제각각★)
   오른쪽으로 끝을 맞추면 폭이 다른 메뉴끼리 ★왼쪽 시작점이 들쏭날쏭★ 해진다.
   가운데로 모으면 폭이 달라도 중심선이 하나로 맞아 세로로 가지런하다.
   ※ 상자 폭(260px)과 본문 폭(900px)은 그대로 둔다 — 바꾸면 게시판 표가 늘어난다. */
.body.fixed-width.left .lnb { text-align: center; padding-right: 0; }
/* 메뉴 이미지는 기본이 block 이라 text-align 이 안 먹는다 — inline-block 으로 바꿔야 밀린다 */
.body.fixed-width.left .lnb > ul > li > a,
.body.fixed-width.left .lnb ul ul a { display: inline-block; }


/* ── 5c. 푸터를 항상 화면 맨 아래에 (sticky footer) ──
   내용이 짧아도 푸터가 화면 하단에 붙고, 길면 자연스럽게 아래로 밀린다.
   .container 를 세로 flex 로 만들고 .body 가 남는 공간을 먹게 한다.
   ※ 이 방식은 min-height 로 억지로 늘리는 것보다 정확하다.
     그래서 §5b 의 콘텐츠 min-height 는 작게(380px) 두어도 된다. */
html, body { height: auto; }
/* ★.header_wrap 은 position:absolute 라 flex 흐름에서 빠진다.
   그런데 화면에서는 100px 을 차지하므로 min-height 에서 그만큼 빼야
   딱 한 화면에 들어온다. 안 그러면 항상 100px 스크롤이 남는다. */
body > .container,
.container.fixed_header,
.container { display: flex; flex-direction: column; min-height: calc(100vh - 100px); }
.container > .body,
.container > .body_wrap { flex: 1 0 auto; }
.container > .footer,
.container > .footer_wrap,
.container > .f_cr_area { flex: none; }
/* 첫화면(메인)은 슬라이드가 있어 원래 길다 — 그래도 규칙은 동일하게 적용된다 */

/* ── 푸터 ──
   ★푸터 레이아웃은 손대지 않는다.
   예전에 로고와 주소를 한 줄로 붙여 세로 공간을 줄였으나(255px → 약 150px),
   사장님이 ★원래의 쌓인 배치가 더 난다★고 하셔서 되돌렸다(2026-09-07).
   로고 아래에 주소가 오는 테마(xedition) 기본 모양을 그대로 쓴다.
   → f_info / f_logo / sub_desc 에 레이아웃 규칙을 다시 넣지 말 것.
   (다크모드 색상은 아래에서 별도로 지정한다 — 레이아웃과 무관) */


/* 서브 페이지 상단 비주얼 띠(170px)도 조인다 — 내용은 페이지 제목 한 줄뿐이라 클 이유가 없다.
   ★.visual.sub.sub_type2 가 padding:70px(0-3-0) 이라 같은 특정도로 써야 이긴다.
     170px → 110px. 첫화면 슬라이드(.visual.main)는 건드리지 않는다.
     .bg_img 는 부모 높이를 따르므로 함께 줄어든다. */
.visual.sub.sub_type1,
.visual.sub.sub_type2,
.visual.sub.sub_type3,
.visual.sub { padding-top: 40px; padding-bottom: 40px; }
/* 콘텐츠 상단 여백도 40 → 28 */
.body.fixed-width.left .content,
.body.fixed-width.right .content,
.body.fixed-width.none .content,
.body.fixed-width .content { padding-top: 22px; }

/* 다크에서 눈부신 본문 이미지 살짝 눌러주기 */
body.color_scheme_dark .rd_body img,
body.color_scheme_dark .xe_content img { filter: brightness(.92); }

/* ── 6. 위젯 내부 보정 ──
   content/counter/login 위젯 스킨이 자체 CSS 로 #333·흰 배경을 강제한다.
   위젯이 만든 마크업만 골라 덮는다(우리 카드 안쪽 한정). */
body.color_scheme_dark .smn-list a,
body.color_scheme_dark .smn-list a:link,
body.color_scheme_dark .smn-list a:visited { color: var(--d-text) !important; }
body.color_scheme_dark .smn-list a:hover { color: var(--d-accent) !important; }
body.color_scheme_dark .smn-list td.title { color: var(--d-text) !important; }
/* 게시판 이름(카테고리) 칸 — 위젯이 첫 칸에 넣는다 */
body.color_scheme_dark .smn-list td:first-child,
body.color_scheme_dark .smn-list .category,
body.color_scheme_dark .smn-list td:first-child a { color: var(--d-text2) !important; }
body.color_scheme_dark .smn-list td.time,
body.color_scheme_dark .smn-list td.date { color: var(--d-text3) !important; }

/* 방문자수(daerew_counter) — 흰 배경 블록과 회색 글자 */
body.color_scheme_dark .smn-count div,
body.color_scheme_dark .smn-count p,
body.color_scheme_dark .smn-count span,
body.color_scheme_dark .smn-count table,
body.color_scheme_dark .smn-count td { background: transparent !important; color: var(--d-text2) !important; border-color: var(--d-line) !important; }
body.color_scheme_dark .smn-count .visitor,
body.color_scheme_dark .smn-count strong,
body.color_scheme_dark .smn-count b { color: var(--d-text) !important; }

/* 로그인 위젯(webengine_black) 은 원래 어두운 스킨이라 테두리만 맞춘다 */
body.color_scheme_dark .smn-login .xe-widget-wrapper,
body.color_scheme_dark .smn-count .xe-widget-wrapper { background-color: transparent !important; }

/* 위젯이 만든 표 전반 — 우리 카드 안쪽에서만 */
body.color_scheme_dark .smn-list table,
body.color_scheme_dark .smn-list tbody,
body.color_scheme_dark .smn-list thead { background: transparent !important; }
body.color_scheme_dark .smn-list th { color: var(--d-text2) !important; }

/* ── 7. content 위젯 default 스킨 (.sk5_normal) — 전역 ──
   위젯 스킨이 #333/#555 를 강제한다. .smn-list 안쪽만 덮으면 메인화면만 고쳐지므로
   위젯이 만든 표 자체를 전역으로 잡는다. */
body.color_scheme_dark .sk5_content,
body.color_scheme_dark table.sk5_normal { color: var(--d-text) !important; background: transparent !important; }
body.color_scheme_dark table.sk5_normal a,
body.color_scheme_dark table.sk5_normal a:link,
body.color_scheme_dark table.sk5_normal a:visited { color: var(--d-text) !important; }
body.color_scheme_dark table.sk5_normal a:hover { color: var(--d-accent) !important; }
body.color_scheme_dark table.sk5_normal th { color: var(--d-text2) !important; background: var(--d-surface2) !important; border-color: var(--d-line) !important; }
body.color_scheme_dark table.sk5_normal td { border-color: var(--d-line) !important; background: transparent !important; }
body.color_scheme_dark table.sk5_normal tr:hover td { background: var(--d-surface) !important; }
/* 분류·닉네임·날짜 등 보조 칸은 한 톤 낮춘다 */
body.color_scheme_dark table.sk5_normal td.category,
body.color_scheme_dark table.sk5_normal td.category a,
body.color_scheme_dark table.sk5_normal td.author,
body.color_scheme_dark table.sk5_normal td.author a,
body.color_scheme_dark table.sk5_normal td.time,
body.color_scheme_dark table.sk5_normal td.date,
body.color_scheme_dark table.sk5_normal td.hidden-phone,
body.color_scheme_dark table.sk5_normal td.hidden-phone a { color: var(--d-text2) !important; }
/* 제목 칸은 또렷하게 */
body.color_scheme_dark table.sk5_normal td.title,
body.color_scheme_dark table.sk5_normal td.title a { color: var(--d-text) !important; }

/* 위젯 껍데기 전반
   ★background 축약을 쓰면 인라인으로 박힌 background-image 까지 초기화된다.
     첫화면 바로가기 5칸이 배경 이미지를 인라인으로 갖고 있어 통째로 사라졌었다.
     반드시 background-color 만 건드릴 것. */
body.color_scheme_dark .xe-widget-wrapper:not([style*="background-image"]) { background-color: transparent !important; }

/* ── 8. 남은 저대비 요소 (실측으로 찾은 것들) ── */
/* content 위젯이 게시판 이름/날짜에 쓰는 클래스 (.board .date) — 메인화면 목록 */
body.color_scheme_dark .smn-list .board,
body.color_scheme_dark .smn-list .date,
body.color_scheme_dark table.sk5_normal .board,
body.color_scheme_dark table.sk5_normal .date { color: var(--d-text2) !important; }

/* sketchbook5 의 체크 아이콘·검색 아이콘 등 (#333 / #000 고정) */
body.color_scheme_dark .bd .ico_16px,
body.color_scheme_dark .bd .bd_srch_wrp .ico_16px,
body.color_scheme_dark .bd label,
body.color_scheme_dark .bd .chk,
body.color_scheme_dark .bd .chk span { color: var(--d-text2) !important; }

/* 최후의 안전망: 본문 영역에서 #333·#555 를 그대로 쓰는 요소.
   xe_content(작성자가 쓴 본문)는 제외한다 — 사용자가 지정한 색이라 건드리면 안 된다. */
body.color_scheme_dark #content [style*="color:#333"]:not(.xe_content):not(.xe_content *),
body.color_scheme_dark #content [style*="color: #333"]:not(.xe_content):not(.xe_content *),
body.color_scheme_dark #content [style*="color:#555"]:not(.xe_content):not(.xe_content *),
body.color_scheme_dark #content [style*="color: #555"]:not(.xe_content):not(.xe_content *) { color: var(--d-text) !important; }

/* 글꼴 선택 등 sketchbook5 의 떠 있는 작은 패널들 */
body.color_scheme_dark .bd_font_select,
body.color_scheme_dark .tg_cnt,
body.color_scheme_dark .tg_cnt2,
body.color_scheme_dark .bd_slt,
body.color_scheme_dark .bd_tg { background: var(--d-surface) !important; border-color: var(--d-line2) !important; color: var(--d-text) !important; }
body.color_scheme_dark .bd_font_select li,
body.color_scheme_dark .bd_font_select a,
body.color_scheme_dark .bd_font_select em,
body.color_scheme_dark .tg_cnt2 li,
body.color_scheme_dark .tg_cnt2 a { color: var(--d-text) !important; border-color: var(--d-line) !important; }
body.color_scheme_dark .bd_font_select li.on,
body.color_scheme_dark .bd_font_select li.on em { color: var(--d-accent) !important; }
body.color_scheme_dark .bd_font_select li:hover { background: var(--d-surface2) !important; }

/* ── 9. 로고 다크 버전 교체 ──
   ★출처: D:/MYBOX/04-솔관련자료/03 홈페이지/sol/솔마크/솔로고_백색.png (정품 백색 로고, 1080x380 투명)
     각 위치 크기의 2배(레티나)로 리사이즈해 addons/solmoon_dark/img/ 에 둔다.
     ※ 이전에는 원본 로고를 픽셀 반전해 만들었으나, 정품 백색본이 있어 그것으로 교체했다.
   원본 파일·마크업은 그대로. 애드온을 끄면 원래 로고로 돌아온다.

   ★방법: <img> 는 opacity:0 으로 투명하게(자리·크기 유지) 하고 부모 <a> 에 배경으로 깐다.
     visibility:hidden 은 배경 크기 계산이 어긋나므로 쓰지 않는다.
     .smp2-logo 는 <img> 자체라 배경이 가려지므로 content 로 교체한다. */

/* PC 헤더 */
body.color_scheme_dark .header .logo-item a {
  display: inline-block;
  background: url(../img/logo_dark.png) no-repeat left center / contain;
}
body.color_scheme_dark .header .logo-item a img { opacity: 0; }

/* PC 푸터 */
body.color_scheme_dark .footer .f_logo a {
  display: inline-block;
  background: url(../img/footer_dark.png) no-repeat left center / contain;
}
body.color_scheme_dark .footer .f_logo a img { opacity: 0; }

/* 모바일 헤더는 교체하지 않는다 — 원본 로고가 이미 흰 글자 버전이다
   (모바일 레이아웃 헤더가 원래 어두운 톤이라 그렇게 만들어져 있다).
   반전하면 오히려 글자가 검게 되므로 건드리지 말 것. */

/* 오시는길 정보카드 로고 — img 자체이므로 content 로 갈아끼운다 */
body.color_scheme_dark img.smp2-logo {
  content: url(../img/info_dark.png);
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ── 10. 강좌·자료실·게시판 목록 표의 테두리 ──
   스킨이 border-width:0 으로 두어 색만 있고 선이 안 그려진다.
   목록이 어디서 시작하고 끝나는지 보이도록 바깥 테두리 + 행 구분선을 그린다.
   (라이트 모드는 스킨 원래 모양 그대로 — 이 규칙은 다크에서만 적용된다) */

/* content 위젯 목록 (강좌·자료실·게시판 페이지) */
body.color_scheme_dark table.sk5_normal {
  border: 1px solid var(--d-line) !important;
  border-radius: 10px;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  background: var(--d-surface) !important;
}
body.color_scheme_dark table.sk5_normal thead th {
  border-bottom: 1px solid var(--d-line) !important;
  border-top: 0 !important;
}
body.color_scheme_dark table.sk5_normal tbody td {
  border-bottom: 1px solid var(--d-line) !important;
}
body.color_scheme_dark table.sk5_normal tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* sketchbook5 게시판 목록 (자유게시판 등) */
body.color_scheme_dark .bd .bd_lst,
body.color_scheme_dark table.bd_tb {
  border: 1px solid var(--d-line) !important;
  border-radius: 10px;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  background: var(--d-surface) !important;
}
body.color_scheme_dark .bd .bd_lst thead th,
body.color_scheme_dark table.bd_tb thead th {
  border-bottom: 1px solid var(--d-line) !important;
}
body.color_scheme_dark .bd .bd_lst tbody td,
body.color_scheme_dark table.bd_tb tbody td {
  border-bottom: 1px solid var(--d-line) !important;
}
body.color_scheme_dark .bd .bd_lst tbody tr:last-child td,
body.color_scheme_dark table.bd_tb tbody tr:last-child td {
  border-bottom: 0 !important;
}
/* 공지 행은 살짝 구분 */
body.color_scheme_dark .bd_lst tr.notice td { background: var(--d-surface2) !important; }

/* ── 11. PC 푸터 시인성 ──
   주소·저작권 글자가 #888 로 어둡고 영역 구분이 없어 밋밋했다.
   글자를 올리고, 배너 사이 세로선과 저작권 띠를 분리한다. */
body.color_scheme_dark .footer { border-top: 1px solid var(--d-line); }
body.color_scheme_dark .footer .sub_desc,
body.color_scheme_dark .footer .f_info p,
body.color_scheme_dark .footer address { color: var(--d-text2) !important; }
body.color_scheme_dark .footer .f_info2,
body.color_scheme_dark .footer .f_link,
body.color_scheme_dark .footer .f_banner { border-left: 1px solid var(--d-line); }
/* 저작권 띠(.f_cr_area) — 원래 밝은 회색이라 다크에서 튄다. 한 톤 눌러 영역을 나눈다 */
body.color_scheme_dark .f_cr_area {
  background: var(--d-bg) !important;
  border-top: 1px solid var(--d-line);
}
body.color_scheme_dark .f_cr_area .copyright,
body.color_scheme_dark .footer .copyright,
body.color_scheme_dark .copyright { color: var(--d-text3) !important; }
body.color_scheme_dark .f_cr_area a,
body.color_scheme_dark .copyright a { color: var(--d-text3) !important; }
body.color_scheme_dark .mobile-footer-member a { color: var(--d-text2) !important; }
/* 배너 이미지는 밝은 배경이라 살짝 눌러 눈부심 완화, hover 시 원래대로 */
body.color_scheme_dark .footer .f_info2 img,
body.color_scheme_dark .footer .f_banner img { opacity: .88; transition: opacity .15s ease; }
body.color_scheme_dark .footer .f_info2 img:hover,
body.color_scheme_dark .footer .f_banner img:hover { opacity: 1; }

/* ── 12. 모바일 게시판 목록 (m.skins/sketchbook5 · .bd_zine) ──
   PC 와 마크업이 달라 .rt_area 안의 제목·정보가 #333/#444 로 남아 있었다. */
body.color_scheme_dark .sm-body .bd_lst,
body.color_scheme_dark .sm-body .bd_zine,
body.color_scheme_dark .bd_m_lst { background: transparent !important; }
body.color_scheme_dark .bd_zine > li,
body.color_scheme_dark .bd_m_lst > li {
  border-bottom: 1px solid var(--d-line) !important;
  background: transparent !important;
}
body.color_scheme_dark .rt_area,
body.color_scheme_dark .rt_area h3,
body.color_scheme_dark .rt_area h3 a,
body.color_scheme_dark .rt_area h3 span,
body.color_scheme_dark .bd_zine h3,
body.color_scheme_dark .bd_zine h3 a { color: var(--d-text) !important; }
body.color_scheme_dark .rt_area .info,
body.color_scheme_dark .rt_area .info *,
body.color_scheme_dark .bd_zine .info,
body.color_scheme_dark .bd_zine .info * { color: var(--d-text3) !important; }
body.color_scheme_dark .rt_area .info b,
body.color_scheme_dark .bd_zine .info b { color: var(--d-text2) !important; }
/* 목록 상단 게시판 이름·탭 */
body.color_scheme_dark .sm-body .bd_tl,
body.color_scheme_dark .sm-body .bd_tl a,
body.color_scheme_dark .bd_lst_wrp > h2,
body.color_scheme_dark .bd_lst_wrp > h2 a { color: var(--d-text) !important; }
body.color_scheme_dark .bd_fr ul li a,
body.color_scheme_dark .bd_fr ul li b { color: var(--d-text2) !important; }
body.color_scheme_dark .bd_fr ul li.on a,
body.color_scheme_dark .bd_fr ul li.on b { color: var(--d-accent) !important; }
/* 모바일 글 읽기 */
body.color_scheme_dark .sm-body .rd_hd h1,
body.color_scheme_dark .sm-body .rd_hd h1 a,
body.color_scheme_dark .sm-body .rd_hd .side,
body.color_scheme_dark .sm-body .rd_hd .side * { color: var(--d-text) !important; }

/* 모바일 게시판 상단 브레드크럼(.bd_bc) 안의 게시판 이름 */
body.color_scheme_dark .bd_bc,
body.color_scheme_dark .bd_bc a,
body.color_scheme_dark .bd_bc em,
body.color_scheme_dark .bd_bc span { color: var(--d-text) !important; }
body.color_scheme_dark .bd_hd { border-color: var(--d-line) !important; }
/* 글꼴 크기 선택 등 미니 뷰어 버튼 */
body.color_scheme_dark .rd_viewer,
body.color_scheme_dark .rd_viewer * ,
body.color_scheme_dark .viewer_with { color: var(--d-text2) !important; }

/* ── 13. 첫화면 바로가기 타일 (인라인 background-image 보유) ──
   이미지는 그대로 두고 테두리와 글자만 다크에 맞춘다. */
body.color_scheme_dark #content .xe-widget-wrapper[style*="background-image"] {
  border-color: var(--d-line) !important;
}

/* ── 14. 라이트 모드 테두리 시인성 ──
   ★이 블록만 body.color_scheme_dark 가 없다 = 라이트·다크 모두에 적용된다.
   스킨이 border-width:0 이라 목록 경계가 안 보이던 것을 라이트에서도 그린다.
   (다크는 §10 이 색을 덮어쓴다) */
body.color_scheme_light table.sk5_normal,
body.color_scheme_light .bd .bd_lst {
  border: 1px solid #d0d4da !important;
  border-radius: 10px;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}
body.color_scheme_light table.sk5_normal thead th,
body.color_scheme_light .bd .bd_lst thead th { border-bottom: 1px solid #d0d4da !important; }
body.color_scheme_light table.sk5_normal tbody td,
body.color_scheme_light .bd .bd_lst tbody td { border-bottom: 1px solid #e6e9ee !important; }
body.color_scheme_light table.sk5_normal tbody tr:last-child td,
body.color_scheme_light .bd .bd_lst tbody tr:last-child td { border-bottom: 0 !important; }

/* ── 15. 좌측 사이드 위젯 정리 (로그인 · 방문자수) ──
   글자가 너무 작아(방문자수 10.7px) 읽기 어려웠다. 크기·간격을 키우면서
   낡은 스킨(webengine_black, 2010년대 XE 스킨)의 잔재도 함께 정리한다.
   ★스킨 원본은 건드리지 않는다. 라이트·다크 공통이라 body 클래스를 붙이지 않는다.

   스킨의 알려진 문제들:
    · 폰트가 11px Dotum, 자간 -1px 로 고정 → 본문과 따로 논다
    · 메뉴 앞 '-' 를 배경 이미지(bullet.gif)로 `left 6px` 고정 → 글자를 키우면 어긋난다
    · login_info.html 22행의 관리 항목이 <li> 로 닫혀 있다(</li> 아님)
      → 브라우저가 빈 <li> 를 하나 더 만들어 맨 끝에 불릿만 남는다
    · form 이 width:185px 고정, 안쪽 padding-left:13px 로 좌우가 비대칭 */

/* 위젯 바깥 껍데기 */
.smn-login { padding: 0 !important; }
.smn-login .we_login { margin: 0 !important; opacity: 1 !important; }
.smn-login .we_login form {
  width: auto !important;
  padding: 16px 14px !important;
  border-radius: 10px !important;
  border-color: rgba(255,255,255,.10) !important;
  overflow: visible !important;
}

/* ── 로그인 폼 재구성 ──
   스킨(webengine_black)은 아이디/비밀번호를 **테두리 없이 딱 붙여** 놓고
   로그인 버튼(gif 이미지)을 float:right 로 옆에 세우는 2010년대 배치다.
   칸 경계가 안 보여 어디를 누를지 알기 어렵다.
   → flex 로 다시 짠다: 두 칸을 각각 테두리 있는 입력칸으로 띄우고,
     버튼은 오른쪽에 두 칸 높이로 붙인다.
   ★스킨 원본 무수정. width/height/float 하드코딩을 풀고 flex 에 맡긴다.
   ★버튼은 <input type="image"> 라 height 를 주면 gif 가 늘어난다 → 세로 중앙만 맞춘다. */

.smn-login .we_login form .idpwWrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}
.smn-login .we_login form .idpw {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;                 /* ★아이디·비밀번호 사이를 띄운다 */
  float: none !important;
  flex: 0 1 auto !important;           /* ★남는 폭을 버튼에 양보 */
  width: 118px !important;
  height: auto !important;
  min-width: 0 !important;
}
/* 입력칸 — 각자 테두리를 가진 또렷한 칸으로 */
.smn-login .we_login form .idpw input {
  float: none !important;
  width: 100% !important;
  height: 38px !important;
  box-sizing: border-box !important;
  padding: 8px 11px !important;
  margin: 0 !important;
  font: 14.5px/20px inherit !important;
  background-color: rgba(255,255,255,.07) !important;
  background-image: none !important;   /* 스킨의 아이디/자물쇠 아이콘 배경 제거 */
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 8px !important;
  color: #fff !important;
}
.smn-login .we_login form .idpw input:focus {
  border-color: rgba(255,255,255,.6) !important;
  background-color: rgba(255,255,255,.12) !important;
  outline: none !important;
}
/* 로그인 버튼(gif) — 입력칸 두 칸 높이만큼 크게, 남는 폭을 모두 쓴다
   ★<input type="image"> 라 width/height 를 그냥 주면 gif 가 늘어난다.
     object-fit:contain 으로 비율을 지키면서 클릭 영역만 넓힌다. */
.smn-login .we_login form .login {
  float: none !important;
  flex: 1 1 auto !important;           /* ★남는 폭을 버튼이 차지 */
  min-width: 64px !important;
  margin: 0 !important;
  align-self: stretch !important;      /* 두 칸 높이(83px)에 맞춤 */
  height: auto !important;
  object-fit: contain !important;      /* gif 비율 유지 */
  /* ★테두리·배경을 주지 않는다 — buttonLogin.gif 안에 이미 테두리가 그려져 있어
     두 겹으로 보인다. 클릭 영역만 넓히고 나머지는 이미지에 맡긴다. */
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  cursor: pointer;
}
.smn-login .we_login form .login:hover { opacity: .85; }

/* 입력칸 안내 문구 — 스킨은 배경 이미지로 '아이디/비밀번호'를 표시했는데
   그 배경을 껐으므로 placeholder 로 대신 넣는다(코어가 만드는 input 이라
   HTML 을 못 고치니 CSS 로는 불가 → JS 에서 넣는다. 여기서는 스타일만 준비). */
.smn-login .we_login form .idpw input::placeholder {
  color: rgba(255,255,255,.45) !important; opacity: 1 !important;
}

/* 로그인한 사람 이름 */
.smn-login .we_login form .userName {
  width: auto !important; margin-top: 0 !important;
  padding-bottom: 8px !important;
  border-bottom-color: rgba(255,255,255,.18) !important;
  font-family: inherit !important;
}
.smn-login .we_login form .userName .fl { width: auto !important; height: auto !important; }
.smn-login .we_login form .userName span { font-size: 15px !important; }

/* 메뉴 목록 — 이미지 불릿을 끄고 CSS 로 다시 그린다 */
.smn-login ul.userMenu {
  padding: 0 !important; margin: 10px 0 0 !important;
  line-height: normal !important; overflow: visible !important;
}
.smn-login ul.userMenu li {
  background-image: none !important;          /* bullet.gif 끄기 */
  position: relative;
  list-style: none !important;
  width: auto !important;
  padding: 0 0 0 13px !important;
  margin: 0 !important;
  font-size: 14.5px !important;
  line-height: 2.05 !important;
  letter-spacing: 0 !important;
  font-family: inherit !important;
}
.smn-login ul.userMenu li:before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 6px; height: 1px; margin-top: -1px;
  background: currentColor; opacity: .5;
}
.smn-login ul.userMenu li a {
  font-size: 14.5px !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
  font-family: inherit !important;
}
/* ★스킨 HTML 오류로 생기는 맨 끝 빈 <li> 를 숨긴다
   (링크가 없는 li = 내용이 비어 불릿만 남는 항목) */
.smn-login ul.userMenu li:not(:has(a)) { display: none !important; }
.smn-login ul.userMenu li:empty { display: none !important; }

/* 방문자수 위젯 — 숫자가 핵심이라 한 단계 더 크게 */
.smn-count, .smn-count * { font-size: 14px !important; line-height: 1.95 !important; }
.smn-count .visitor,
.smn-count .pageview,
.smn-count b, .smn-count strong { font-size: 14.5px !important; font-weight: 700 !important; }
.smn-count { padding: 12px 14px !important; }