@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 클래스를 붙이지 않는다. */
.body.fixed-width.left .content,
.body.fixed-width.right .content,
.body.fixed-width.none .content,
.body.fixed-width .content {
  min-height: 380px;
  padding-bottom: 22px;
}
.sm-body { min-height: calc(100vh - 300px); }
/* .body 의 상하 패딩 30px 도 조인다 — 비주얼 띠와 푸터에 바로 붙는 여백이다 */
.body.fixed-width { padding-top: 16px; padding-bottom: 16px; }

/* ── 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; }
/* 첫화면(메인)은 슬라이드가 있어 원래 길다 — 그래도 규칙은 동일하게 적용된다 */

/* ── 푸터 간소화 ──
   로고(57) + 여백(16) + 주소(44) 가 세로로 쌓여 133px 을 먹고 있었다.
   로고와 주소를 한 줄로 나란히 놓고 여백을 조여 255px → 약 150px 로 줄인다.
   ※ 라이트·다크 공통. */
.footer .f_info_area { padding-top: 20px; padding-bottom: 18px; }
.footer .f_info {
  float: none; width: auto;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.footer .f_info .f_logo { margin: 0; flex: none; }
.footer .f_info .f_logo img,
.footer .f_info .f_logo a { height: 34px; width: auto; }
.footer .f_info .sub_desc {
  margin: 0; flex: 1 1 auto;
  font-size: 13px; line-height: 1.6;
}
/* 배너 줄은 로고 줄 아래로 자연스럽게 */
.footer .f_info2 { margin-top: 14px; clear: both; }
/* 저작권 띠도 얇게 */
.footer .f_cr_area,
.f_cr_area { padding-top: 12px; padding-bottom: 12px; }
.f_cr_area .copyright { font-size: 12px; }

/* 서브 페이지 상단 비주얼 띠(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; }