/* =============================================================
   GJF 다크 모드 오버라이드  (메인 대시보드 기준 · 공통)
   -------------------------------------------------------------
   - 라이트(기본)는 절대 건드리지 않음. html[data-theme="dark"] 일 때만 적용.
   - 색상값: 디자이너 그레이 다크 스펙
       메인 #121212 · 카드 #2F2F2F · 메뉴 #262626
       상승 #FF606F · 하강 #489AFF · teal #00A9A9
   - 다른 화면도 이 파일 로드 시 "공통 표면(레이아웃/사이드바/카드/차트)"은
     자동으로 다크 전환됨. 화면 고유 요소는 아래에 셀렉터를 추가해 확장.
   - 구조/내용은 바꾸지 않고 "색상만" 오버라이드.
   ============================================================= */

html[data-theme="dark"]{
  color-scheme:dark;        /* 스크롤바·네이티브 컨트롤도 다크로 */
  --dk-bg:#121212;        /* 페이지 배경 */
  --dk-card:#2f2f2f;      /* 카드 배경 */
  --dk-card-2:#383838;    /* 살짝 밝은 표면 */
  --dk-menu:#262626;      /* 사이드바 */
  --dk-border:#46474d;    /* 보더 */
  --dk-border-2:#3a3d53;  /* 그리드/구분 */
  --dk-text:#ffffff;      /* 주요 텍스트 */
  --dk-text-2:#c3c3c3;    /* 본문/보조 */
  --dk-text-3:#9aa0ab;    /* 흐린 텍스트 */
  --dk-brand:#6173ff;     /* 강조(메뉴 활성 등) */
  --dk-teal:#00a9a9;
  --dk-bar:#a2bfff;       /* 차트 막대 */
  --dk-line:#00a9a9;      /* 차트 라인 */
  --up:#ff606f;           /* 상승(증가) */
  --down:#489aff;         /* 하강(감소) */
  /* style.css 전역 변수 재정의 — 증감 색이 이 변수로 지정된 곳 전부에 반영 */
  --redFont:#ff606f;
  --blueFont:#489aff;
  background:#121212;
}

/* ===== 1. 페이지 / 레이아웃 ===== */
html[data-theme="dark"] body{ background:var(--dk-bg); color:var(--dk-text-2); }
html[data-theme="dark"] .layer{ background-color:var(--dk-bg); }
html[data-theme="dark"] .content{ color:var(--dk-text-2); }

/* ===== 2. 사이드바 / 사이드 메뉴 ===== */
html[data-theme="dark"] .side_menu_layer{ background-color:var(--dk-menu); }
html[data-theme="dark"] .side_menu_layer .menu>ul>li>a:hover,
html[data-theme="dark"] .side_menu_layer .menu>ul>li>a:focus,
html[data-theme="dark"] .side_menu_layer .menu>ul>li.active>a{ background:#5061e1; }
html[data-theme="dark"] .drop_menu li a{ color:#cfcde4; }
html[data-theme="dark"] .drop_menu li a:hover,
html[data-theme="dark"] .drop_menu li a:focus,
html[data-theme="dark"] .drop_menu li.active a{ background-color:#3a3d53; color:#fff; }
html[data-theme="dark"] .update-container{ background:rgba(255,255,255,.1); border-top-color:#66697f; border-bottom-color:#66697f; }
html[data-theme="dark"] .update-container .update-header{ background-color:rgba(255,255,255,.1); border-bottom-color:#66697f; color:var(--dk-text); }
html[data-theme="dark"] .update-container .update-date{ color:#a2bfff; }
html[data-theme="dark"] .update-container .update-content{ color:var(--dk-text); }
html[data-theme="dark"] .update-container .update-item{ border-bottom-color:#3a3d53; }
html[data-theme="dark"] .login-link{ background:#3a3a3a; }
/* 하위메뉴 컬러 버튼(만족도/소개/매뉴얼/데이터요청)·NEW 뱃지·성과 링크 등은
   원래 강조색을 그대로 유지 — 다크 배경에서도 식별 가능 */

/* ===== 3. 카드 / 박스 컨테이너 ===== */
html[data-theme="dark"] .content .box{ background-color:var(--dk-card); box-shadow:0 3px 12px rgba(0,0,0,.45); }
html[data-theme="dark"] .content .box.row_box .in_box{ border-bottom-color:var(--dk-border); }
html[data-theme="dark"] .in_box{ border-right-color:var(--dk-border); }

/* ===== 4. 제목 / 텍스트 ===== */
html[data-theme="dark"] .box_title .box_title_txt{ color:var(--dk-text); }
html[data-theme="dark"] .box_title .box_title_txt .select{ color:var(--dk-text-2); }
html[data-theme="dark"] .base_date{ color:var(--dk-text-3); }
html[data-theme="dark"] .info_s_p{ color:var(--dk-text-3); }
html[data-theme="dark"] .df_rank_box p{ color:var(--dk-text-2); }

/* ===== 5. 숫자 / 플립카드 / 경제활동인구 구조 카드 ===== */
/* 플립 숫자 카드(주민등록인구/외국인) */
/* 플립 숫자 카드 — Figma 다크 스펙(밝은 패널 + #111 숫자) */
html[data-theme="dark"] .card_wrap .tick-flip-panel{ color:#111111; }
html[data-theme="dark"] .card_wrap .tick-flip-panel-front{ background:linear-gradient(180deg,#a9afca,#c8cbdd); }
html[data-theme="dark"] .card_wrap .tick-flip-panel-back{ background:linear-gradient(180deg,#a8aeca,#e5e7f1); }

/* 사업체 수 big number */
html[data-theme="dark"] #totCnt,
html[data-theme="dark"] .df_txt1{ color:#fff; }
/* 경제활동인구 구조 카드 (.dash-wrap 라이브 셀렉터) */
html[data-theme="dark"] .dash-wrap .eb_card p:nth-child(1){ color:var(--dk-text-2); }
html[data-theme="dark"] .dash-wrap .eb_card p:nth-child(2){ color:#fff; }
html[data-theme="dark"] .dash-wrap .eb_card p:nth-child(3){ color:var(--up); }
html[data-theme="dark"] .dash-wrap .eb_card1{ background:rgba(162,191,255,.15); }
html[data-theme="dark"] .dash-wrap .eb_card2{ background:rgba(162,191,255,.10); }
html[data-theme="dark"] .dash-wrap .eb_card3{ background:rgba(162,191,255,.10); }
html[data-theme="dark"] .dash-wrap .eb_card4{ background:rgba(162,191,255,.05); }
html[data-theme="dark"] .dash-wrap .eb_card5{ background:rgba(162,191,255,.05); }

/* ===== 6. 증감(상승/하강) — JS 인라인 색 리매핑 ===== */
/* JS가 style="color:red/blue/black" 로 직접 지정 → !important 로 다크 색 강제 */
html[data-theme="dark"] [style*="color: red"],
html[data-theme="dark"] [style*="color:red"]{ color:var(--up) !important; fill:var(--up) !important; }
html[data-theme="dark"] [style*="color: blue"],
html[data-theme="dark"] [style*="color:blue"]{ color:var(--down) !important; fill:var(--down) !important; }
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:black"]{ color:var(--dk-text) !important; fill:var(--dk-text) !important; }
/* 상승/하락 화살표 아이콘(Font Awesome) — 고정색(#f00/#00f) 을 다크 팔레트로 */
html[data-theme="dark"] .fa-sort-up.color-red{ color:var(--up) !important; }
html[data-theme="dark"] .fa-sort-down.color-blue{ color:var(--down) !important; }
/* JS 실행 전 CSS 초기색(var(--redFont)) 도 다크 상승색으로 */
html[data-theme="dark"] .total_people .tp_p span,
html[data-theme="dark"] .total_people .f_tp_p span,
html[data-theme="dark"] .df_num_box_s .df_txt2{ color:var(--up); }

/* 데이터 없음(No data.) 영역 — JS 인라인 #f0f0f0 배경을 다크 표면으로 */
html[data-theme="dark"] [style*="background-color:#f0f0f0"],
html[data-theme="dark"] [style*="background-color: #f0f0f0"],
html[data-theme="dark"] [style*="background-color: rgb(240, 240, 240)"]{
  background-color:var(--dk-card-2) !important; color:var(--dk-text-3);
}

/* ===== 7. 버튼 / 뱃지 ===== */
/* More 버튼: Figma 다크도 라이트와 동일(#f1f1f1 / #6d6b77) → 오버라이드 없음 */
html[data-theme="dark"] .wb_list1 li.active .rank_txt{ color:#fff; }
/* AI 해석 버튼 gradient / rank 뱃지 색은 유지 */

/* ===== 8. 보더 / 구분선 ===== */
html[data-theme="dark"] .content .work_count_list .in_box_line{ background-color:var(--dk-border); }
/* 지역 선택 셀렉트 — Figma 156:9422 (배경 rgba(239,239,239,.15) / 테두리 #494c61 / 흰 글자) */
html[data-theme="dark"] .map_select,
html[data-theme="dark"] .box_title .map_select{
  background-color:rgba(239,239,239,.15); border-color:#494c61; color:#ffffff;
}
html[data-theme="dark"] .map_select option{ background-color:#3a3a3a; color:#ffffff; }
html[data-theme="dark"] .dash-wrap #box1 .map_select{ border-color:#494c61; }

/* ===== 9. 인라인 SVG 연결 화살표(경제활동인구 구조) ===== */
html[data-theme="dark"] .line svg path[fill="#E6EBED"]{ fill:#4a4d57; }
html[data-theme="dark"] #line1,
html[data-theme="dark"] #line2,
html[data-theme="dark"] #line3,
html[data-theme="dark"] #line4{ fill:var(--dk-brand); }

/* ===== 10. 경기도 지도(OpenLayers 벡터) ===== */
/* 지도 색상은 mapOl.js 의 PALETTE(light/dark)에서 data-theme 에 따라 전환됨.
   (기존 래스터 PNG 방식은 대시보드에서 벡터로 대체) */

/* ===== 11. Highcharts 차트 (JS 인라인 색 → !important 오버라이드) ===== */
html[data-theme="dark"] .highcharts-background{ fill:var(--dk-card) !important; }
html[data-theme="dark"] .highcharts-plot-background{ fill:var(--dk-card) !important; }
html[data-theme="dark"] .highcharts-xaxis-labels text,
html[data-theme="dark"] .highcharts-yaxis-labels text{ fill:var(--dk-text-2) !important; }
html[data-theme="dark"] .highcharts-axis-title{ fill:var(--dk-text-2) !important; }
/* 격자선 — Figma 다크 시안대로 지웠더니(stroke:transparent) 값을 읽을 수 없다는
   지적이 있었다(UIX-09-003). 다시 살리되 데이터를 가리지 않게 은은한 흰 선으로 둔다.
   카드(#2f2f2f) 위에서 대비 2.03 — 보이지만 도드라지지 않는 정도.
   SPA(ChartInitializer.chartLine)와 같은 값이다. */
html[data-theme="dark"] .highcharts-grid-line,
html[data-theme="dark"] .highcharts-yaxis-grid path,
html[data-theme="dark"] .highcharts-xaxis-grid path{ stroke:rgba(255,255,255,.22) !important; }
html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-tick{ stroke:rgba(255,255,255,.25) !important; }
/* 막대/마커 테두리 없음 (Figma 다크: fill 만 사용) */
html[data-theme="dark"] .highcharts-series .highcharts-point{ stroke:transparent !important; }
/* 라이트는 .highcharts-point{opacity:.5} 사용 — 다크는 Figma대로 불투명 */
html[data-theme="dark"] .highcharts-point{ opacity:1 !important; }
/* 데이터 라벨 색/외곽선은 Highcharts contrast 에 위임 (Figma: 막대 위 #333 + 흰 외곽선, 배경 위 흰 글자) */
html[data-theme="dark"] .highcharts-title{ fill:var(--dk-text) !important; }
/* 차트 부제(단위 표기) — #666 로 고정돼 있어 어둡게 보임 */
html[data-theme="dark"] .highcharts-subtitle,
html[data-theme="dark"] .highcharts-subtitle text,
html[data-theme="dark"] .highcharts-subtitle tspan{ fill:var(--dk-text-2) !important; color:var(--dk-text-2) !important; }
html[data-theme="dark"] .highcharts-legend-item text{ fill:var(--dk-text) !important; }
/* 축 라벨/범례가 HTML(useHTML)로 렌더되는 차트 — 인라인 color 를 덮음 */
html[data-theme="dark"] .highcharts-axis-labels span,
html[data-theme="dark"] .highcharts-axis-labels div{ color:var(--dk-text-2) !important; }
html[data-theme="dark"] .highcharts-legend-item span,
html[data-theme="dark"] .highcharts-legend-item div{ color:var(--dk-text) !important; }
html[data-theme="dark"] .highcharts-tooltip-box{ fill:var(--dk-card) !important; stroke:var(--dk-border) !important; }
html[data-theme="dark"] .highcharts-tooltip text{ fill:var(--dk-text) !important; }

/* ===== 12. 공통 팝업(basic_popup) ===== */
/* 팝업 프레임(box/top/content)은 JS 가 이미지 가장자리 색을 인라인 적용 —
   이미지와 이어지는 연출이라 유지하고, 그 외 영역만 다크로 전환 */
html[data-theme="dark"] .common-popup-layer{ background:rgba(0,0,0,.6); }

/* 본문 텍스트 영역 */
html[data-theme="dark"] .common-popup-text{
  background:var(--dk-card);
  color:var(--dk-text-2);
  border-top-color:var(--dk-border);
}
html[data-theme="dark"] .common-popup-text a{ color:#8ab4ff; }

/* 하단 버튼 영역 (라이트에서 #faf8f5 !important 로 지정됨) */
html[data-theme="dark"] .common-popup-box.has-content .common-popup-footer{
  background:var(--dk-card) !important;
}
html[data-theme="dark"] .common-popup-footer button{
  background:var(--dk-border); color:var(--dk-text);
}

/* 닫기 버튼 / 헤더 */
html[data-theme="dark"] .common-popup-top .btn-close{ color:var(--dk-text); }
html[data-theme="dark"] .common-popup-header h2{ color:var(--dk-text); }
html[data-theme="dark"] .common-popup-action .desc{ color:var(--dk-text-3); }

/* ===== 13. 고용노동 / 인구 / 산업 대시보드 공통 ===== */
/* 상단 요약 카드 (.work_count_list .in_box 가 흰 배경으로 고정돼 있음) */
html[data-theme="dark"] .content .work_count_list .in_box{ background:var(--dk-card); }

/* 상단 경로(breadcrumb) */
html[data-theme="dark"] .top_depth a{ color:var(--dk-text-2); }
html[data-theme="dark"] .top_depth a.active{ color:var(--dk-text); }

/* 차트 스택 라벨 (누적 막대 위 합계) */
html[data-theme="dark"] .highcharts-stack-labels text,
html[data-theme="dark"] .highcharts-stack-labels tspan{ fill:var(--dk-text) !important; }
/* 스택 라벨은 카드 배경 위에 놓임 — 흰 글자에 흰 외곽선이 겹쳐 뭉개지므로 외곽선 제거 */
html[data-theme="dark"] .highcharts-stack-labels .highcharts-text-outline{ stroke:transparent !important; fill:transparent !important; }

/* 행정구역 선택 셀렉트 (.map_only_select 는 글자색이 #222 로 고정돼 있음) */
html[data-theme="dark"] .select,
html[data-theme="dark"] .map_only_select{
  background-color:rgba(239,239,239,.15); color:var(--dk-text); border-color:#494c61;
}
html[data-theme="dark"] .select option,
html[data-theme="dark"] .map_only_select option{ background-color:#3a3a3a; color:var(--dk-text); }

/* 상단 KPI 카드의 TOP3 목록 (라벨 #666 / 값 #1f60de 로 고정돼 있어 어둡게 보임) */
html[data-theme="dark"] .work_count_list .work_count_in_list span:first-child{ color:var(--dk-text-2); }
html[data-theme="dark"] .work_count_list .work_count_in_list span:nth-child(2){ color:#a2bfff; }
html[data-theme="dark"] .work_count_list .work_count_in_list .line{ background-color:var(--dk-border); }

/* ===== N(NEW) 배지 — Figma 원본 아이콘 (라이트/다크 공통) =====
   · 메뉴 항목(.menu-new)      : 노란 사각형 #FBC02D + 흰 N   (Figma 156:7972)
   · 최근 업데이트 헤더        : 흰 사각형 + N 투명(뒷배경 비침) (Figma 156:10592)
   Font Awesome duotone 글리프는 끄고 SVG 로 대체 */
.fa-duotone.fa-square-n{
  background-image:url('/images/img_user/icon/square-n.svg');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  width:1em; height:1em;
  display:inline-block;
  vertical-align:-0.125em;
}
.fa-duotone.fa-square-n.menu-new{
  background-image:url('/images/img_user/icon/square-n-menu.svg');
}
.fa-duotone.fa-square-n::before,
.fa-duotone.fa-square-n::after{ content:none !important; }

/* 언어 전환 버튼 — 배경이 밝은 회색이라 글자는 어둡게 유지 */
html[data-theme="dark"] .language-switch button{ color:#222222; }

/* ===== 카드 장식 이미지 (bg_img1~22) =====
   밝은 선화 PNG 라 다크에서 튐. Figma 다크(156:9722)는 카드보다 살짝 밝은 은은한 실루엣.
   요소에 filter 를 걸면 자식 텍스트까지 어두워지므로 ::after 로 분리해 처리
   (배경 URL 은 dashboard.js 가 --wb-bg 로 함께 지정) */
html[data-theme="dark"] .workplace_con .wb_list1{
  background-image:none !important;
  position:relative;
}
html[data-theme="dark"] .workplace_con .wb_list1::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background-image:var(--wb-bg);
  background-repeat:no-repeat;
  background-position:center right;
  background-size:contain;
  filter:grayscale(1) brightness(.27);
}

/* ===== 사업체 수 - 산업 순위 (Figma 156:9694) ===== */
html[data-theme="dark"] .wb_list1 li:nth-child(1) .rank{ background-color:#6173ff; }
html[data-theme="dark"] .wb_list1 li:nth-child(2) .rank{ background-color:#505eb5; }
html[data-theme="dark"] .wb_list1 li:nth-child(3) .rank{ background-color:rgba(97,115,255,.35); }
html[data-theme="dark"] .wb_list1 .rank{ color:#ffffff; }
html[data-theme="dark"] .wb_list1 li:nth-child(1) .rank_txt{ color:var(--dk-text); }
html[data-theme="dark"] .wb_list1 li:nth-child(2) .rank_txt,
html[data-theme="dark"] .wb_list1 li:nth-child(3) .rank_txt{ color:var(--dk-text-2); }
html[data-theme="dark"] .wb_list1 .rank_percent{ color:var(--dk-text-2); }

/* ===== 14. AI 해석 팝업 (#aiAgentPopUp) ===== */
html[data-theme="dark"] #aiAgentPopUp .pop_content{
  background:var(--dk-card); color:var(--dk-text-2);
}
/* 지표 설명 박스 (베이지 계열) */
html[data-theme="dark"] #aiAgentPopUp .popup-summary{
  background:rgba(162,191,255,.08); border-color:var(--dk-border);
}
html[data-theme="dark"] #aiAgentPopUp .popup-summary h4{
  background:rgba(162,191,255,.15); color:var(--dk-text); border-color:var(--dk-border);
}
html[data-theme="dark"] #aiAgentPopUp .popup-summary li{ color:var(--dk-text-2); }

/* 탭 */
html[data-theme="dark"] #aiAgentPopUp .tabs .tab{
  background:var(--dk-card-2); color:var(--dk-text-3);
}
html[data-theme="dark"] #aiAgentPopUp .tabs .tab.active{
  background:var(--dk-teal); color:var(--dk-text);
}
/* 본문 */
html[data-theme="dark"] #aiAgentPopUp .tab-content{
  border-color:var(--dk-border); color:var(--dk-text-2);
}
html[data-theme="dark"] #aiAgentPopUp .tab-content h4{ color:var(--dk-text); }
html[data-theme="dark"] #aiAgentPopUp .tab-content li{ color:var(--dk-text-2); }

/* 팝업 닫기 버튼 — 검정 X PNG 라 다크에서 안 보임 (aiAgentPopUp / infoPopUp 등 공용) */
html[data-theme="dark"] .pop_close img{ filter:invert(1); }

/* ===== 15. 출처 / 통계용어 팝업 (#infoPopUp) ===== */
html[data-theme="dark"] #infoPopUp .pop_content{ background:var(--dk-card); color:var(--dk-text-2); }
html[data-theme="dark"] #infoPopUp .table_tit{ color:var(--dk-text); }
html[data-theme="dark"] #infoPopUp .df_table th{
  background-color:var(--dk-card-2); color:var(--dk-text); border-color:var(--dk-border);
}
html[data-theme="dark"] #infoPopUp .df_table td{
  background-color:transparent; color:var(--dk-text-2); border-color:var(--dk-border);
}

/* ===== 16. 목록/검색 화면 공통 (통계용어 등 — 표 · 검색폼 · 상세 팝업) =====
   .df_table / .adm_df_btn / .pop_content 은 여러 화면이 공유하는 컴포넌트라
   화면별이 아니라 여기서 한 번에 다크로 전환한다.
   #infoPopUp · #aiAgentPopUp 처럼 id 로 따로 지정된 팝업은 기존 규칙이 그대로 우선한다. */

/* 표 — 머리글 #e4e7ef · 본문 #fff/#666 가 라이트로 고정돼 있음 */
html[data-theme="dark"] .df_table thead th,
html[data-theme="dark"] .df_table tbody th{
  background-color:var(--dk-card-2); color:var(--dk-text); border-color:var(--dk-border);
}
html[data-theme="dark"] .df_table tbody td{
  background-color:var(--dk-card); color:var(--dk-text-2); border-color:var(--dk-border);
}
html[data-theme="dark"] .df_table tbody .td_color_blue td:not(.tit){ background-color:#3a3d53; }
html[data-theme="dark"] .df_table tbody td.ascending{ background:rgba(255,96,111,.16); }
html[data-theme="dark"] .df_table tbody td.descending{ background:rgba(72,154,255,.16); }
html[data-theme="dark"] .df_table tbody td input[type=text],
html[data-theme="dark"] .df_table tbody td input[type=password],
html[data-theme="dark"] .df_table tbody td textarea{
  background-color:var(--dk-card-2); color:var(--dk-text); border-color:var(--dk-border);
}

/* 스크롤 표 구분선 (#ccc 고정) */
html[data-theme="dark"] .scroll_table .df_table{ border-bottom-color:var(--dk-border); }
html[data-theme="dark"] .scroll_table2::before,
html[data-theme="dark"] .scroll_table2::after{ background-color:var(--dk-border); }
html[data-theme="dark"] .scroll_table2 tbody tr:nth-child(10n) td{ border-bottom-color:var(--dk-border); }

/* 표 제목 */
html[data-theme="dark"] .table_tit{ color:var(--dk-text); }

/* 검색 영역 */
html[data-theme="dark"] .search_box .line{ background-color:var(--dk-border); }
html[data-theme="dark"] .search_box .search_input span{ color:var(--dk-text-2); }
html[data-theme="dark"] .adm_df_btn{ background-color:var(--dk-border); color:var(--dk-text); }
html[data-theme="dark"] .adm_df_btn.blue{ background-color:var(--dk-brand); color:#ffffff; }
html[data-theme="dark"] .adm_df_btn:disabled{ background-color:#3a3a3a; color:var(--dk-text-3); }

/* 상세 팝업 (id 지정이 없는 기본 .pop_content) */
html[data-theme="dark"] .pop_content{ background-color:var(--dk-card); color:var(--dk-text-2); }
html[data-theme="dark"] .pop_content .search_box{ border-color:var(--dk-border); }
html[data-theme="dark"] .df_table_box .search_box::after{ background-color:var(--dk-border); }

/* ===== 17. 모달 팝업 (관계자 로그인 / 데이터 분석요청 — .modal_wrap) =====
   모든 화면에 포함되는 공통 프래그먼트. 컨테이너가 흰색 고정이라 16번의 표 규칙과
   어긋나지 않도록 함께 전환한다. */
html[data-theme="dark"] .modal_content{ background-color:var(--dk-card); color:var(--dk-text-2); }
html[data-theme="dark"] .modal_close{ color:var(--dk-text-2); }
html[data-theme="dark"] .modal_content .login_form .form_title,
html[data-theme="dark"] .modal_content .data_form .form_title{ color:#a2bfff; }
html[data-theme="dark"] .modal_content .form_input_box input{
  background-color:var(--dk-card-2); color:var(--dk-text);
}
html[data-theme="dark"] .modal_content .form_input_box button{ background-color:var(--dk-brand); }
html[data-theme="dark"] .adm_df_btn_round{ background-color:var(--dk-brand); color:#ffffff; }
html[data-theme="dark"] .adm_df_btn_round.gray{ background-color:var(--dk-border); color:var(--dk-text); }

/* ===== 18. 스크롤바 / 버튼 아이콘 =====
   트랙이 흰색(일부는 흰→파랑 그라데이션)으로 고정돼 다크에서 밝은 띠로 보인다.
   원본이 background-clip:padding-box 에 의존하므로 shorthand 대신 longhand 로 덮는다. */
html[data-theme="dark"] .pop_content::-webkit-scrollbar-track,
html[data-theme="dark"] .pop_content::-webkit-scrollbar-track:vertical,
html[data-theme="dark"] .content .more_content_box .box::-webkit-scrollbar-track:vertical,
html[data-theme="dark"] .scroll_box .in_box::-webkit-scrollbar-track:vertical,
html[data-theme="dark"] .scroll_table2_in::-webkit-scrollbar-track:vertical,
html[data-theme="dark"] .mid_scroll_table::-webkit-scrollbar-track:vertical,
html[data-theme="dark"] .select1::-webkit-scrollbar-track,
html[data-theme="dark"] .update-container::-webkit-scrollbar-track{
  background-image:none; background-color:var(--dk-card-2); box-shadow:none;
}
html[data-theme="dark"] .select1::-webkit-scrollbar{ background-color:var(--dk-card-2); }

html[data-theme="dark"] .pop_content::-webkit-scrollbar-thumb,
html[data-theme="dark"] .content .more_content_box .box::-webkit-scrollbar-thumb,
html[data-theme="dark"] .scroll_box .in_box::-webkit-scrollbar-thumb,
html[data-theme="dark"] .scroll_table2_in::-webkit-scrollbar-thumb,
html[data-theme="dark"] .mid_scroll_table::-webkit-scrollbar-thumb,
html[data-theme="dark"] .select1::-webkit-scrollbar-thumb,
html[data-theme="dark"] .update-container::-webkit-scrollbar-thumb{
  background-image:none; background-color:#6c6f7d; box-shadow:none;
}
html[data-theme="dark"] .pop_content::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .content .more_content_box .box::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .scroll_box .in_box::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .scroll_table2_in::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .mid_scroll_table::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .select1::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .update-container::-webkit-scrollbar-thumb:hover{ background-color:#8a8d9b; }

/* 조회 버튼의 돋보기 아이콘 — 검정 PNG(#211816) 라 파란 버튼 위에서 묻힘 */
html[data-theme="dark"] .adm_df_btn img{ filter:invert(1); }

/* ===== 19. 로딩 스피너 =====
   loding_type01.gif 는 팔레트가 전부 어두운 회색(#181818~#DADADA)이라
   다크 배경에 묻혀 눈금 일부만 보인다. 반전하면 밝은 머리 → 어두운 꼬리가 된다. */
html[data-theme="dark"] .loading_ico img{ filter:invert(1); }

/* ===== 20. 좌측 메뉴 (gjf_front 사이드바 디자인 이식) =====
   SPA(styles/screenTheme.scss)와 같은 값으로 맞춘다. */
html[data-theme="dark"] .side-menu{ background:var(--dk-menu); }
html[data-theme="dark"] .side-menu .menu-section-title{ color:var(--dk-text-2); border-bottom-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .side-menu .menu-list .menu-item{ background:var(--dk-menu); border-color:var(--dk-menu); color:var(--dk-text-2); }
html[data-theme="dark"] .side-menu .menu-list .menu-item a{ color:var(--dk-text-2); }
html[data-theme="dark"] .side-menu .menu-list .menu-item:hover{ background:var(--dk-card); }
html[data-theme="dark"] .side-menu .menu-list .menu-item .menu-link.sub-active{ background-color:var(--dk-brand); }
html[data-theme="dark"] .side-menu .menu-list .drop-menu li.active{ background:var(--dk-brand); }
html[data-theme="dark"] .side-menu .recent-update{ background:rgba(255,255,255,.05); border-top-color:rgba(255,255,255,.13); border-bottom-color:rgba(255,255,255,.13); }
/* 머리줄은 본문보다 한 단계 밝게 — 원본 #55586f / #45485e 의 관계 */
html[data-theme="dark"] .side-menu .recent-title{ background:rgba(255,255,255,.06); border-bottom-color:rgba(255,255,255,.13); color:var(--dk-text); }
html[data-theme="dark"] .side-menu .recent-ticker-date{ color:#8392FF; }
html[data-theme="dark"] .side-menu .recent-ticker-name{ color:var(--dk-text-2); }
html[data-theme="dark"] .side-menu .popup-btn-item{ color:var(--dk-text-2); }
/* 심볼은 유채색이라 그대로 두고 글자만 밝게 (UIX-09-006).
   두 줄은 한 이름이라 색을 나누지 않는다. */
html[data-theme="dark"] .side-menu .side-logo-text em,
html[data-theme="dark"] .side-menu .side-logo-text strong{ color:var(--dk-text); }
/* 최근 업데이트 머리줄 오른쪽의 관계자 로그인 (UIX-09-001) */
html[data-theme="dark"] .side-menu .side-login-btn{ color:var(--dk-text-3); }
html[data-theme="dark"] .side-menu .side-login-btn:hover{ color:var(--dk-bar); }
html[data-theme="dark"] .side-menu .side-logo .close-btn{ background:var(--dk-card-2); color:var(--dk-text-2); }
html[data-theme="dark"] .side-menu .side-logo .lang-select .lang-select-trigger{ background:var(--dk-card-2); color:var(--dk-text-2); border-color:var(--dk-border); }
html[data-theme="dark"] .side-menu .side-logo .lang-select .lang-select-menu{ background:var(--dk-card); border-color:var(--dk-border); }
html[data-theme="dark"] .side-menu .side-logo .lang-select .lang-select-menu button{ background:var(--dk-card); color:var(--dk-text-2); }
html[data-theme="dark"] .side-menu .side-tool-btn,
html[data-theme="dark"] .side-menu #gjfThemeToggle{ background:var(--dk-card-2); border:1px solid var(--dk-border); color:var(--dk-text-2); }

/* 라이트/다크 좌우 스위치 — 손잡이가 어느 쪽에 있는지가 보여야 하므로
   홈(카드색)보다 한 단계 밝은 회색으로 띄운다. (UIX-09-002) */
html[data-theme="dark"] .side-menu .theme-toggle.is-switch .theme-switch-knob{ background:#5a5d66; box-shadow:none; }
html[data-theme="dark"] .side-menu .theme-toggle.is-switch .theme-switch-half{ color:#7f838c; }
html[data-theme="dark"] .side-menu .theme-toggle.is-switch[aria-pressed="false"] .theme-switch-half.light,
html[data-theme="dark"] .side-menu .theme-toggle.is-switch[aria-pressed="true"] .theme-switch-half.dark{ color:var(--dk-text); }

/* 아이콘 PNG 가 #333 무채색·브랜드 블루라 다크에서 묻힌다 — 흰색으로 통일 */
html[data-theme="dark"] .side-menu .menu-list .menu-item img{ filter:brightness(0) invert(1); }
html[data-theme="dark"] .side-menu .popup-btn-item img{ filter:brightness(0) invert(1); }

/* 로고는 filter 로 뒤집으면 심볼의 브랜드 색까지 사라진다 — 흰 글자 파일로 바꿔 끼운다 */
html[data-theme="dark"] .side-menu .side-logo .logo-light{ display:none; }
html[data-theme="dark"] .side-menu .side-logo .logo-dark{ display:block; }

/* 로그인 버튼 - SPA(screenTheme.scss) 와 같은 값 */
html[data-theme="dark"] .side-menu .login-btn-trigger{ background:var(--dk-brand); box-shadow:0 3px 8px rgba(97,115,255,.3); color:#fff; }
html[data-theme="dark"] .side-menu .login-btn-trigger:hover{ background:var(--dk-card); color:var(--dk-bar); outline:none; }

/* 항목 테두리는 배경과 같은 색이어야 눈에 띄지 않는다 (SPA 와 같은 처리) */
html[data-theme="dark"] .side-menu .menu-list .menu-item{ border-color:var(--dk-menu); }

/* 우측 경계 - 어두운 바탕에서는 그림자를 조금 더 진하게 (SPA 와 같은 값) */
html[data-theme="dark"] .side-menu{ box-shadow:4px 0 12px rgba(0,0,0,.45); }

/* 하단 버튼 위 구분선(#e0e0e0)이 흰 줄로 도드라진다.
   제목줄 구분선과 같은 값으로 낮춘다. (SPA 와 같은 값) */
html[data-theme="dark"] .side-menu .div-popup-btns-wrapper{ border-top-color:rgba(255,255,255,.12); }

/* 접었을 때 나오는 햄버거 - 경제 대시보드 토글 버튼(.toggle-btn)과 같은 값 */
html[data-theme="dark"] .topnav-ham{ background:var(--dk-card); color:#fff; }

/* =============================================================
   경제실 리포트 (/inHouse/businessReportBoard.do)
   공통 껍데기는 이미 다크인데 리포트 카드 안쪽이 라이트로 남아 있었다.
   막대 채움(.bar-green 등)은 값을 나타내는 색이라 건드리지 않는다.
   ============================================================= */
html[data-theme="dark"] .box-n06{ background:var(--dk-card); }
html[data-theme="dark"] .box-n06 .round_content{ background-color:var(--dk-card); }
/* .round_title 은 기본이 파란 띠(#3777bb)인데 box-n06 에서만 흰색으로 덮인다 */
html[data-theme="dark"] .box-n06 .round_title_box .round_title{ background:var(--dk-card); color:var(--dk-text); }

/* 요약 목록 — 회색 칸(#f5f5f5)에 흰 글자가 얹혀 대비 1.09 였다 */
html[data-theme="dark"] .list_bg li{ background:var(--dk-card-2); border-color:var(--dk-border); }
html[data-theme="dark"] .list_bg li{ color:var(--dk-text-2); }
html[data-theme="dark"] .list_bg li span{ color:var(--dk-text-2); }
html[data-theme="dark"] .list_bg li strong{ color:var(--dk-text); }
/* 파란 수치(#2196F3)는 어두운 칸에서 밝은 짝으로 올린다 */
html[data-theme="dark"] .list_bg .text-left strong{ color:#64B5F6; }

/* 막대 트랙만 — 채움은 그대로 */
html[data-theme="dark"] .progress-bar{ background-color:var(--dk-card-2); }
/* 채움(.bar-green 등) 안에 값 글자가 들어간다. 채움이 옅은 색이라
   공통 다크 글자색(#c3c3c3)이 얹히면 대비 1.4 로 사라진다.
   라이트에서 어두운 글자가 옅은 채움 위에 얹히던 것과 같게 둔다. */
html[data-theme="dark"] .progress-bar > div{
  color:#2B2B2B;
  /* 라벨은 채움 오른쪽 끝에 붙어, 막대가 짧으면 트랙 쪽으로 밀려 나온다.
     한 색으로는 옅은 채움과 어두운 트랙을 동시에 만족시킬 수 없다.
     번지는 그림자(halo)로는 약해서, 글자에 흰 외곽선을 두른다.
     paint-order 로 선을 글자 뒤에 깔아야 획이 뭉치지 않는다. */
  paint-order:stroke fill;
  -webkit-text-stroke:3px #ffffff;
  text-shadow:none;
}

/* 좌우 전환 탭 : 바탕만 어둡게, 미끄러지는 강조(::after #345F90)는 유지 */
html[data-theme="dark"] .tab-slider--tabs{ background:var(--dk-card-2); }
html[data-theme="dark"] .tab-slider--trigger{ color:var(--dk-text-2); }
html[data-theme="dark"] .tab-slider--trigger.active{ color:#fff; }

/* 모달 머리줄 — .modal_content 는 이미 잡혀 있는데 머리줄만 흰색으로 남아
   본문과 갈라져 보였다. 여러 화면이 함께 쓰는 공통 껍데기라 한 번에 잡는다.
   제목(#3777bb)은 어두운 바탕에서 대비가 낮아 밝은 짝으로 올린다. */
html[data-theme="dark"] .modal_header{ background-color:var(--dk-card); }
html[data-theme="dark"] .modal_header .form_title{ color:#a2bfff; }
html[data-theme="dark"] .modal_header .modal_close{ color:var(--dk-text-2); }

/* =============================================================
   주요 정책대상 규모 (/conspiracyCal/*)
   round_content 계열은 37개 템플릿이 함께 쓰는 공통 껍데기다.
   ============================================================= */
/* 흰 판 (검색줄·본문을 감싼다) */
html[data-theme="dark"] .content .round_content{ background-color:var(--dk-card); }

/* 안내 띠 — 연한 남색 판(#e4e7ef)에 남색 글자(#23336e) */
html[data-theme="dark"] .mid_info_con{ background-color:var(--dk-card-2); color:var(--dk-bar); }

/* 상단 탭 — 비활성은 옅은 덮개(#3a3d531a)에 어두운 글자(#212121)라
   어두운 바탕에서 대비 1.16 이었다. 덮개를 밝은 쪽으로 뒤집는다.
   활성 탭은 파란 알약(#3777bb)에 흰 글자라 그대로 둔다. */
html[data-theme="dark"] .round_title_tab ul li:not(.active){
  background-color:rgba(255,255,255,.08);
  color:var(--dk-text-2);
}

/* 조회 버튼 — 바탕이 옅은 파랑(#ABC3E6)으로 두 테마 공통인데
   다크에서 글자만 흰색으로 뒤집혀 대비 1.8 이 됐다.
   라이트처럼 어두운 글자를 쓴다(11.68). */
html[data-theme="dark"] .search_box .search_btn{ color:#212121; }