/* =====================================================================
   dark.css  —  다크(블랙) 테마
   ---------------------------------------------------------------------
   * 하단 ☀ 버튼을 누르면 <html class="dark-mode"> 가 되고, 이 파일의 규칙이 적용됩니다.
   * 예전처럼 화면 전체를 색상 반전시키지 않고, 색을 하나하나 지정합니다.
     → 이미지/영상/로고 색이 깨지지 않습니다.
   * 색을 바꾸고 싶으면 맨 위 html.dark-mode { ... } 의 변수만 고치세요.
   * 이 파일은 theme.css 다음에 로드됩니다. (index.html 에서 이 파일 링크 한 줄만 지우면 다크 테마 제거)
   * 팝업(iframe) 안쪽은 css/popup-dark.css 가 담당합니다. (js/main.js 가 팝업이 열릴 때 넣어줌)
   ===================================================================== */

html.dark-mode {
    color-scheme: dark;

    --y:        #FEE500;
    --y-press:  #E6CF00;
    --y-soft:   #3A3500;
    --ink:      #F2F2F3;   /* 기본 글자 */
    --ink-2:    #B6BAC1;   /* 보조 글자 */
    --ink-3:    #7C818A;   /* 비활성/힌트 */
    --bg:       #121212;   /* 화면 바탕 */
    --card:     #1D1E20;   /* 카드 */
    --line:     #2E3033;   /* 구분선 */
    --fill:     #2A2C30;   /* 칩/입력창/표 머리글 */
    --blue:     #1C2B3F;   /* 토요일 */
    --red:      #3C2326;   /* 공휴일 */
    --orange:   #3B2D1B;   /* 일요일 */
    --shadow-1: 0 0 0 1px rgba(255,255,255,.05);
    --shadow-2: 0 0 0 1px rgba(255,255,255,.07);

    /* team.css / qna.html 의 변수 */
    --bg-color: #121212;  --card-bg: #1D1E20;  --border-color: #2E3033;
    --text-primary: #F2F2F3;  --text-secondary: #B6BAC1;
    --kakao-black: #F2F2F3;
    /* fe.html 의 변수 */
    --fe_bg: #121212;  --fe_card: #1D1E20;  --fe_border: #2E3033;
    --fe_text: #F2F2F3;  --fe_sub: #B6BAC1;  --fe_shadow: 0 0 0 1px rgba(255,255,255,.05);
}
html:not(.dark-mode) { color-scheme: light; }

/* ---------- 바탕/글자 ---------- */
html.dark-mode body { background: var(--bg); color: var(--ink); }
html.dark-mode .page { background: var(--bg) !important; color: var(--ink); }
html.dark-mode .page a { color: inherit; }
html.dark-mode ::selection { background: var(--y); color: #191919; }
html.dark-mode hr { border-color: var(--line); background: var(--line); }

/* ---------- 메인 ---------- */
html.dark-mode .header { background: #1B1B1D; color: var(--ink); }
html.dark-mode .profile-info h2,
html.dark-mode .profile-info h2 font { color: var(--y) !important; }
html.dark-mode .profile-info p { color: var(--ink-2); }
html.dark-mode .header img { filter: none !important; }

html.dark-mode .card { background: var(--card); }
html.dark-mode #container,
html.dark-mode .swiper-container-2 .swiper-slide { background: transparent; }
html.dark-mode .tabs > li > a { color: var(--ink-3); background: transparent !important; }
html.dark-mode .tabs > li.active > a { color: var(--ink) !important; border-bottom-color: var(--y); }
html.dark-mode .toggle-label { background: #4A4D54; }
html.dark-mode #autoCallBtn:checked + .toggle-label { background: var(--y); }
html.dark-mode #autoCallBtn:checked + .toggle-label::before { background: #191919; }

html.dark-mode .grid-item { background: var(--card); box-shadow: var(--shadow-1); }
html.dark-mode .grid-item:active { background: var(--y-soft); }

html.dark-mode .fe_card { background: var(--card) !important; color: var(--ink); }
html.dark-mode .fe_section_provider { color: var(--ink-3); }
html.dark-mode .fe_section_provider font { color: var(--ink-2) !important; }
html.dark-mode .footer { color: var(--ink-3); }

/* ---------- 대기자(구별) 칸  ※ 글자색이 JS 에서 style="color:#000000" 로 직접 박혀 있어 !important 필요 ---------- */
html.dark-mode .api_hide { background-color: var(--fill); border-color: var(--line); color: var(--ink) !important; }
html.dark-mode .api_hide .district,
html.dark-mode .api_hide .count { color: inherit; }
html.dark-mode .api_hide[style*="cc0066"] { color: #FF6B9D !important; }   /* 내 지역(핑크) */

/* ---------- 공지 / 상조회 ---------- */
html.dark-mode .notice-box { background: var(--card); border-color: var(--line); }
html.dark-mode .notice-item { border-bottom-color: var(--line); color: var(--ink); }
/* 글자색이 JS 에서 style="color:#353535" 로 직접 박혀 있어 !important 필요 */
html.dark-mode .notice-item a,
html.dark-mode .notice-item a[style] { color: var(--ink) !important; }
html.dark-mode .notice-item span:not(.new_notice) { color: inherit; }
/* 섹션 제목(색 막대 포함)을 밝게 */
html.dark-mode .notice-title { filter: brightness(1.6) saturate(.9); }

/* 앱 카드 */
html.dark-mode .app-card { background: var(--card) !important; box-shadow: var(--shadow-1) !important; }
html.dark-mode .app-title { color: var(--ink) !important; }
html.dark-mode .app-desc { color: var(--ink-3) !important; }

/* 도로(TOPIS) 표 */
html.dark-mode .topis1 td[bgcolor], html.dark-mode .topis2 td[bgcolor],
html.dark-mode .topis1 tr[bgcolor], html.dark-mode .topis2 tr[bgcolor] { background: var(--fill) !important; color: var(--ink) !important; }
html.dark-mode .topis1 td, html.dark-mode .topis2 td { border-color: var(--line) !important; color: var(--ink); }

/* CCTV */
html.dark-mode .nav { background: transparent !important; }
html.dark-mode .cctv-nav-btn { background: var(--fill) !important; color: var(--ink) !important; }
html.dark-mode #cctvPrevName, html.dark-mode #cctvNextName { color: var(--ink) !important; }
html.dark-mode .cctv-card-header { background-color: #2A2C30 !important; color: var(--ink) !important; }
html.dark-mode .cctv-card-header span { color: var(--ink) !important; }

/* ---------- 상단 바 / 버튼 / 입력창 ---------- */
html.dark-mode .toolbar { background: var(--card) !important; color: var(--ink) !important; border-bottom-color: var(--line) !important; }
html.dark-mode .toolbar-title { color: var(--ink); }
html.dark-mode .toolbar .btn.btn-corner { background: var(--fill) !important; color: var(--ink) !important; }
html.dark-mode #jo .toolbar .btn, html.dark-mode .toolbar .i-back { color: var(--ink-2) !important; }
html.dark-mode .page .btn, html.dark-mode .page .btn:visited { background-color: var(--fill); color: var(--ink); border-color: var(--line); }
html.dark-mode .page .btn:active { background-color: var(--y); color: #191919; }
html.dark-mode .input-text, html.dark-mode .search-box input { background: var(--fill) !important; color: var(--ink); }
html.dark-mode .input-text input, html.dark-mode .search-box input { color: var(--ink); }
html.dark-mode .select select { background: var(--fill); color: var(--ink); }
html.dark-mode input::placeholder, html.dark-mode textarea::placeholder { color: var(--ink-3); }

/* 아이콘(검정 SVG)을 밝게 */
html.dark-mode .navbar li a.btn::after { filter: invert(1); }
html.dark-mode .i-plus::after, html.dark-mode .i-minus::after { filter: invert(1); }
html.dark-mode .toolbar .btn.i-clock::after, html.dark-mode .toolbar .btn.i-edit::after, html.dark-mode .toolbar .btn.i-back::before { filter: invert(1); }
html.dark-mode .navbar li a.btn { color: var(--ink-3) !important; }
html.dark-mode .navbar li a.btn.active, html.dark-mode .navbar li a.btn.btn-active { color: var(--y) !important; }
html.dark-mode .toolbar-bottom { background: rgba(29,30,32,.97) !important; border-top-color: var(--line) !important; }

/* ---------- 연락처 ---------- */
html.dark-mode #contactList .section-title { color: var(--ink-3); }
html.dark-mode .contact { background: var(--card); border-bottom-color: var(--line); }
html.dark-mode .contact:hover { background: var(--card); }
html.dark-mode .contact:active { background: var(--y-soft); }
html.dark-mode .avatar { background: var(--fill); color: var(--ink-2); }
html.dark-mode .desc { color: var(--ink-2); }
html.dark-mode .phone { filter: grayscale(1) brightness(1.4); opacity: .7; }

/* ---------- 시간표 ---------- */
html.dark-mode #sca .time-header,
html.dark-mode #sca .time-row { background: var(--card); color: var(--ink); border-color: var(--line); }
html.dark-mode #sca .time-row > div { border-color: var(--line); }
html.dark-mode #sca .time-row.title { background: var(--fill); color: var(--ink-2); }
html.dark-mode #sca [style*="b8cce4"] { background: var(--blue) !important; }
html.dark-mode #sca [style*="e6b8b7"] { background: var(--red) !important; }
html.dark-mode #sca [style*="fcd5b4"] { background: var(--orange) !important; }
html.dark-mode #sca .time-row.total, html.dark-mode #sca [style*="ffff00"] { background: var(--y) !important; color: #191919; }

/* 동료 시간표 달력 */
html.dark-mode #work { background: var(--bg) !important; }
html.dark-mode #work .Calendar { background: var(--card); }
html.dark-mode #work .Calendar thead tr:first-child { background: #2A2C30; color: var(--y); }
html.dark-mode #work .Calendar thead tr:last-child td { background: var(--card); color: var(--ink-3); }
html.dark-mode #work .Calendar tbody td p { color: var(--ink); }
html.dark-mode #work .pastDay { color: #55585F; }
html.dark-mode #work .today { background: var(--y); color: #191919; }
html.dark-mode #work .choiceDay { background: #F2F2F3 !important; color: #191919 !important; }
html.dark-mode #work #personal { background: var(--card); }
html.dark-mode #work .radio-item label { background: transparent; color: var(--ink); text-shadow: none; border-color: var(--line); }
html.dark-mode .chang_month { background: var(--fill); color: var(--ink); }
html.dark-mode #current_month { color: var(--ink); }

/* ---------- 내 정보 ---------- */
html.dark-mode .stat-card { background: var(--card); border-color: var(--line); }
html.dark-mode .stat-value { color: var(--ink); }
html.dark-mode .stat-title { color: var(--ink-2); }

/* ---------- 근무조 / 차고지 ---------- */
html.dark-mode #jo { background: var(--bg) !important; }
html.dark-mode .section-card { background: var(--card); }
html.dark-mode #jo .section-title { color: var(--ink); background: var(--fill); }
html.dark-mode .team-chip label { background: var(--fill) !important; color: var(--ink) !important; }
html.dark-mode .team-chip input:checked + label { background: var(--y) !important; color: #191919 !important; }
html.dark-mode .car_column { background: var(--card) !important; }
html.dark-mode .car_column h3 { background: var(--y); color: #191919; }
html.dark-mode .car_radio-group label { background: var(--fill); color: var(--ink); }
html.dark-mode .car_radio-group input[type="radio"]:checked + label { background: var(--y); color: #191919; }
html.dark-mode .car_back-btn { background: var(--y) !important; color: #191919 !important; }
html.dark-mode #car_park { background: var(--bg) !important; color: var(--ink); }

/* =====================================================================
   2차: 이미지 / 조각 화면(소통·근무평가·Q&A) / 내 정보 표
   ===================================================================== */

/* ---------- 이미지 ---------- */
/* 메뉴 아이콘 GIF: 글자가 어두운 색이라 밝게 (색상은 유지) */
html.dark-mode .grid-item img { filter: invert(1) hue-rotate(180deg) brightness(1.05); }

/* 하단 로고 버튼(간이음주측정/마스타/KB매직카/통행료): 배경이 투명한 GIF 에 어두운 글씨라
   흰 타일을 깔면 튀므로, 버튼은 카드색으로 두고 로고만 밝게 뒤집음 (색상 계열은 유지) */
html.dark-mode .bottom-buttons button { background: var(--card) !important; border: none !important; box-shadow: var(--shadow-1) !important; }
html.dark-mode .bottom-buttons button > img { background: transparent; filter: invert(1) hue-rotate(180deg) brightness(1.05) saturate(1.1); }

/* ---------- 메인 소통(opinion) ---------- */
html.dark-mode .fe_edit { color: var(--ink-2); }
html.dark-mode #opinion .fe_card { background: var(--card) !important; color: var(--ink); box-shadow: var(--shadow-1); }
html.dark-mode #opinion .fe_sort, html.dark-mode #opinion .fe_write { background: var(--card) !important; }
html.dark-mode #opinion .fe_sort button, html.dark-mode #opinion .fe_page span { background: var(--fill) !important; color: var(--ink); }
html.dark-mode #opinion textarea, html.dark-mode #opinion input,
html.dark-mode textarea#fe_content { background: var(--fill) !important; color: var(--ink) !important; border-color: var(--line) !important; -webkit-text-fill-color: var(--ink) !important; }
html.dark-mode #opinion { color: var(--ink); }

/* ---------- 소통/제도 안내(fe) ---------- */
html.dark-mode .fe_tab { background: var(--fill); color: var(--ink-2); box-shadow: none; }
html.dark-mode .fe_tab.fe_active { background: var(--y); color: #191919; }
html.dark-mode .fe_card_title { background: var(--fill); color: var(--ink); }
html.dark-mode .fe_desc { color: var(--ink-2); }
html.dark-mode .fe_notice { background: var(--y-soft); color: var(--ink); }

/* ---------- 근무평가(record) ---------- */
html.dark-mode .record_card { background: var(--card); box-shadow: var(--shadow-1); color: var(--ink); }
html.dark-mode .record_section_title { background: var(--fill); color: var(--ink); border-bottom-color: var(--line); }
html.dark-mode .record_desc, html.dark-mode .record_list li { color: var(--ink-2); }
html.dark-mode .record_table_wrap, html.dark-mode .record_table { background: var(--card); border-color: var(--line); }
html.dark-mode .record_table th { background: var(--fill); color: var(--ink); border-color: var(--line); }
html.dark-mode .record_table td { color: var(--ink); border-color: var(--line); }

/* ---------- Q&A(menu8) ---------- */
html.dark-mode .search-container, html.dark-mode .category-container { background: var(--bg) !important; }
html.dark-mode input, html.dark-mode select, html.dark-mode textarea { background-color: var(--fill) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
html.dark-mode .search-input { border-color: var(--line); }
html.dark-mode .category-tab { background: var(--fill); color: var(--ink-2); }
html.dark-mode .category-tab.active { background: var(--y); color: #191919; }
html.dark-mode .qa-item { background: var(--card); box-shadow: none; border: 1px solid var(--line); }
html.dark-mode .qa-header, html.dark-mode .qa-header span { color: var(--ink); }
html.dark-mode .qa-body { color: var(--ink-2); border-top-color: var(--line); }
html.dark-mode .qa-header .badge { background: var(--fill); color: var(--y); }
html.dark-mode .example-box, html.dark-mode .img-placeholder { background: var(--fill); color: var(--ink-2); }

/* ---------- 내 정보(menu7) 표/카드 ---------- */
html.dark-mode .numberof tr, html.dark-mode .average_result tr, html.dark-mode .monthly_result tr,
html.dark-mode .monthly_result2 tr, html.dark-mode .results tr, html.dark-mode .results4 tr,
html.dark-mode .off_result tr, html.dark-mode .classoff_result tr { background: var(--card); box-shadow: none; color: var(--ink); }
html.dark-mode .numberof tr:first-child, html.dark-mode .average_result tr:first-child,
html.dark-mode .monthly_result tr:first-child, html.dark-mode .monthly_result2 tr:first-child,
html.dark-mode .off_result tr:first-child, html.dark-mode .classoff_result tr:first-child { background: var(--fill) !important; }
html.dark-mode .numberof td:first-child, html.dark-mode .average_result td:first-child,
html.dark-mode .numberof td:nth-child(2), html.dark-mode .numberof td:nth-child(3) { color: var(--ink); }
html.dark-mode .numberof2:nth-child(2) { background: #3A3500 !important; }
html.dark-mode .numberof2:nth-child(3) { background: var(--fill) !important; }
html.dark-mode .numberof2:nth-child(4) { background: #1C2B3F !important; }
html.dark-mode .average_result2 { background: var(--card); }
html.dark-mode .results2, html.dark-mode .results3 { background: #3A3500 !important; }
html.dark-mode .off_result tr[style*="FAF4C0"], html.dark-mode .classoff_result tr[style*="FAF4C0"] { background: #3A3500 !important; }
html.dark-mode #previous center div, html.dark-mode #now_month center div { background: var(--fill); color: var(--ink); box-shadow: none !important; }
html.dark-mode #login_formal { background-color: var(--fill) !important; color: var(--ink) !important; }
html.dark-mode #menu7 td, html.dark-mode #menu7 th { color: var(--ink); }
html.dark-mode #menu7 font[color] { color: var(--ink-2) !important; }
html.dark-mode #my1, html.dark-mode #my2, html.dark-mode #my3, html.dark-mode #my4 { color: var(--ink); }

/* "13시 이후부터 정보가 출력됩니다." 안내 박스 (흰 바탕 + 옅은 글씨였음) */
html.dark-mode .content-box { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
html.dark-mode .content-box * { color: inherit; }

/* ---------- 동료 시간표 ---------- */
html.dark-mode #todos, html.dark-mode .work-list-table { background: var(--card) !important; color: var(--ink); }
html.dark-mode .work-list-table th { background: var(--fill) !important; color: var(--ink-2) !important; border-color: var(--line) !important; }
html.dark-mode .work-list-table td { border-color: var(--line) !important; color: var(--ink); }
html.dark-mode .cs_btn { background: var(--fill) !important; color: var(--ink) !important; box-shadow: none !important; }
html.dark-mode #work label, html.dark-mode #work b { color: var(--ink); }
html.dark-mode #work .radio-item input:checked + label { background: var(--y-soft); }

/* ---------- 근무조/차고지 보완 ---------- */
html.dark-mode #jo .toolbar { background: var(--card) !important; border-bottom-color: var(--line) !important; color: var(--ink) !important; }
html.dark-mode #jo .toolbar .toolbar-title { color: var(--ink); }
html.dark-mode h3.section-title { background: var(--fill) !important; color: var(--ink) !important; }
html.dark-mode .car_title { color: var(--ink); }
html.dark-mode .car_count { color: #FF6B9D !important; }
html.dark-mode .car_container { background: transparent; color: var(--ink); }

/* 링크/강조 글자가 어두운 갈색(#3c1e1e)인 곳 */
html.dark-mode [style*="3c1e1e"], html.dark-mode [style*="3C1E1E"] { color: var(--ink) !important; }

/* 로그인 화면은 카카오 노란 바탕 그대로 → 입력창은 밝게 유지 */
html.dark-mode #login input[type="text"],
html.dark-mode #login input[type="password"],
html.dark-mode #login input:not([type]) { background-color: #fff !important; color: #191919 !important; -webkit-text-fill-color: #191919 !important; }
html.dark-mode #login input::placeholder { color: #8A8A8A; -webkit-text-fill-color: #8A8A8A; }

/* ---------- 팝업(iframe) 바깥 상자: 안쪽 문서가 로드되기 전에도 어둡게 ---------- */
html.dark-mode #fe_popup_box { background: var(--card); }
html.dark-mode #fe_popup_frame { color-scheme: dark; }

/* =====================================================================
   3차: 위/아래 네모 박스를 배경과 같은 색으로 + 공지 제목 앞 색 막대 제거
   ===================================================================== */
html.dark-mode { background: var(--bg); }                       /* 화면 밖 바탕(예전 노란색)도 같은 색 */
html.dark-mode .header { background: var(--bg); }                /* 상단 헤더(표) */
html.dark-mode .card { background: var(--bg); box-shadow: none; }/* 대기자/도로/공지/소통 카드 바탕 (노란 테두리는 그대로) */
html.dark-mode .notice-box { background: transparent; border: none; }   /* 공지 박스 */
html.dark-mode .bottom-buttons button { background: transparent !important; box-shadow: none !important; }  /* 하단 로고 4개 */

/* 공지 섹션 제목 앞의 색 막대(하늘색/초록/노랑)를 없애고 글자를 왼쪽에 맞춤 */
html.dark-mode .notice-title::before { display: none; }
html.dark-mode .notice-title { padding-left: 0; }

/* =====================================================================
   4차: 상단 표 / 하단 Made with 박스까지 배경과 완전히 동일하게 (덮어쓰기 안전장치)
   ===================================================================== */
html.dark-mode,
html.dark-mode body,
html.dark-mode .page,
html.dark-mode .page.active { background: var(--bg) !important; }
html.dark-mode .header,
html.dark-mode .header table,
html.dark-mode .header td,
html.dark-mode .profile-info,
html.dark-mode .footer,
html.dark-mode .footer table,
html.dark-mode .footer td,
html.dark-mode .footer center { background: transparent !important; box-shadow: none !important; border: none !important; }
html.dark-mode .header { border-radius: 0; }

/* =====================================================================
   5차: 날씨 아래 배너 — 다크에서 덜 튀게
   ※ 값 조절: brightness(밝기 .72~.9), saturate(채도 .8~1), opacity(투명도 .85~1)
   ===================================================================== */
html.dark-mode .banner_item img {
  filter: brightness(.78) saturate(.9);
  opacity: .92;
  transition: filter .2s, opacity .2s;
}
html.dark-mode .banner_item:active img { filter: none; opacity: 1; }   /* 누르는 순간 원래 색 */