@charset "utf-8";
/**
 * 전역 테마 변수 적용 (다크/라이트)
 * theme-variables.css 이후, 기존 테마 CSS 이후에 로드하여 색상 덮어씀.
 */

/* 본문·레이아웃 */
body {
    background-color: var(--color-bg-body) !important;
    color: var(--color-text) !important;
}
#wrapper {
    background-color: var(--color-bg-body);
}
#container,
#container_title {
    color: var(--color-text);
}
#container_title { color: var(--color-text-sub); }

/* 상단 */
#tnb {
    background: var(--color-bg-body) !important;
}
#hd_define li a { color: var(--color-text-sub); }
#hd_define li.active a { color: var(--color-text); }
#hd_qnb li a { color: var(--color-text-sub); }
.hd_login a { color: var(--color-text); }

/* 메뉴·GNB */
#gnb { background: var(--color-bg-body); }
#gnb_1dul { background: var(--color-bg-sub); }
#gnb .gnb_2dul .gnb_2dul_box {
    border-color: var(--color-border);
    background: var(--color-bg-body);
    box-shadow: var(--shadow-dropdown);
}
.gnb_2da { color: var(--color-text-sub); }
a.gnb_2da:hover { color: var(--color-accent); }
/* 탑바 좌측 메뉴 열기 버튼(fa-bars) + #gnb 내 동일 버튼 */
#hd_define .gnb_menu_btn,
.gnb_mnal .gnb_menu_btn,
#gnb .gnb_menu_btn { color: var(--color-text-muted) !important; background: var(--color-bg-sub) !important; }
#hd_define .gnb_menu_btn:hover,
.gnb_mnal .gnb_menu_btn:hover,
#gnb .gnb_menu_btn:hover { color: var(--color-text) !important; background: var(--color-border) !important; }
#hd_define .gnb_menu_btn .fa-bars,
.gnb_menu_btn .fa-bars { color: inherit; }
#gnb .gnb_close_btn { background: var(--color-bg-body) !important; color: var(--color-text-muted) !important; }
#gnb .gnb_close_btn:hover { color: var(--color-text) !important; background: var(--color-bg-sub) !important; }
#gnb_all {
    border-color: var(--color-border);
    background: var(--color-bg-body);
    box-shadow: var(--shadow-gnb);
}
#gnb_all h2 { border-bottom-color: var(--color-border); }
#gnb_all .gnb_al_li { border-left-color: var(--color-border); }
#gnb_all .gnb_al_li .gnb_al_a { color: var(--color-text-muted); }
#gnb_all .gnb_al_li li a { color: var(--color-text-sub); }
#gnb_all .gnb_al_li li a:hover { color: var(--color-accent); }
.gnb_wrap .gnb_empty { color: var(--color-text); }
.gnb_wrap .gnb_empty a { color: var(--color-accent); }
.gnb_wrap .gnb_al_ul .gnb_empty,
.gnb_wrap .gnb_al_ul .gnb_empty a { color: var(--color-text-sub); }

/* 최신글·사이드 */
.latest_wr_m { background: var(--color-bg-body); }
.latest_wr { background: var(--color-bg-body) !important; color: var(--color-text); }
.logo_text, .m_logo_text { color: var(--color-text-sub); }
.mobile_ver { background: var(--color-bg-body); border-color: var(--color-border); }
.mobile_ver a { color: var(--color-text); }
.mobile_ver:hover { background: var(--color-accent); border-color: var(--color-accent); }
.mobile_ver:hover a { color: #fff; }

/* 하단 */
#ft {
    background: var(--color-bg-ft) !important;
}
#ft_copy {
    color: var(--color-ft-copy) !important;
    border-top-color: var(--color-ft-copy-border) !important;
}
#ft_link a,
#ft_company,
#ft_company a { color: var(--color-text-sub); }
#ft_company h2 { color: var(--color-text); }
/* footer 내 알림글(공지) 제목·목록·현재 접속자 영역 배경을 footer와 동일하게 */
#ft .notice,
#ft #visit { background: var(--color-bg-ft) !important; }
#ft .notice li { background: var(--color-bg-ft) !important; }
#ft #visit dl { background: var(--color-bg-ft) !important; }

/* 상단으로 버튼 · 우하단 고정 위치(테마 버튼과 좌우 정렬) */
#top_btn {
    position: fixed !important;
    right: 20px;
    bottom: 20px;
    background: var(--color-bg-top-btn) !important;
    border-color: var(--color-top-btn-border) !important;
    color: var(--color-top-btn) !important;
}
#top_btn:hover {
    border-color: var(--color-accent) !important;
    background: var(--color-accent) !important;
    color: #fff !important;
}

/* 테마 전환 버튼 (꼬리 상단·원형, 이모지) · #top_btn과 같은 right 값으로 정렬 */
#theme_toggle_btn {
    position: fixed;
    bottom: 78px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--color-top-btn-border);
    background: var(--color-bg-theme-btn);
    color: var(--color-top-btn);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 89;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
html[data-theme="dark"] #theme_toggle_btn {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
#theme_toggle_btn:hover {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #fff;
}
#theme_toggle_btn .theme-icon {
    display: none;
}
#theme_toggle_btn .theme-icon.active {
    display: inline;
}
/* 모바일: 우하단 버튼 위치 통일 */
@media (max-width: 767px) {
    #theme_toggle_btn { bottom: 68px; right: 15px; }
    #top_btn { right: 15px; bottom: 10px; }
}
/* 탑바 버튼 색상 (모바일·태블릿 공통) */
#gnb_open,
.hd_opener { color: var(--color-text) !important; }
#gnb_open .fa-bars,
.hd_opener .fa-bars { color: inherit; }
#btn_hdpeople,
#btn_hdpeople a { color: var(--color-text) !important; }
#btn_hdpeople a:hover { color: var(--color-accent); }
/* 메뉴 레이어 아래 6개 버튼(hd_nb1~hd_nb6) 다크/라이트 (모바일·태블릿 공통) */
#hd_nb { background: var(--color-bg-body) !important; border-bottom-color: var(--color-border) !important; }
#hd_nb li a { color: var(--color-text-sub) !important; }
#hd_nb li a:hover { color: var(--color-accent); }
#hd_nb li i { color: var(--color-text-muted); }
#hd_nb .hd_nb1,
#hd_nb .hd_nb2,
#hd_nb .hd_nb3,
#hd_nb .hd_nb4,
#hd_nb .hd_nb5,
#hd_nb .hd_nb6 { border-color: var(--color-border) !important; }
/* nb3~nb4 아래 가로선, nb5~nb6 사이 세로선 (기본 스킨에 미정의되어 보강) */
#hd_nb .hd_nb3 { border-bottom: 1px solid var(--color-border) !important; }
#hd_nb .hd_nb4 { border-bottom: 1px solid var(--color-border) !important; }
#hd_nb .hd_nb5 { border-right: 1px solid var(--color-border) !important; }
/* 메뉴 레이어(#gnb) 공통: ol_after_logout, 카테고리 메뉴 다크/라이트 (모바일·태블릿) */
#gnb { background: var(--color-bg-body) !important; }
#gnb_close,
#user_close,
.hd_closer { color: var(--color-text) !important; background: transparent !important; }
#gnb_close:hover,
#user_close:hover,
.hd_closer:hover { color: var(--color-accent) !important; }
#gnb_1dul { background: var(--color-bg-body) !important; }
#gnb_1dul a,
.gnb_1da { color: var(--color-text) !important; }
.gnb_1da { border-bottom-color: var(--color-border) !important; }
#gnb_2dul { background: var(--color-bg-sub) !important; }
#gnb_2dul .gnb_2da { color: var(--color-text-sub); }
#gnb_2dul .gnb_2da:hover { color: var(--color-accent); }
#user_menu { background: var(--color-bg-body) !important; }
#hd_sch { background: var(--color-bg-body) !important; }
#gnb .btn_admin,
#gnb a.btn_admin,
#gnb #ol_after_hd .btn_admin,
#gnb #ol_after_btn .btn_admin { color: var(--color-accent) !important; }
#gnb #ol_after_btn .btn_admin { background: var(--color-accent) !important; color: #fff !important; }
#gnb .btn_admin:hover,
#gnb a.btn_admin:hover { color: var(--color-accent-hover) !important; }
#gnb #ol_after_btn .btn_admin:hover { background: var(--color-accent-hover) !important; color: #fff !important; }
#gnb #ol_after_btn a,
#gnb #ol_after_logout { color: var(--color-text) !important; }
#gnb #ol_after_btn a:hover,
#gnb #ol_after_logout:hover { color: var(--color-accent) !important; }
#gnb #ol_after_hd strong { color: var(--color-text) !important; }
#gnb .ol a,
#gnb #ol_after_private a,
#gnb #ol_after_private li a { color: var(--color-text) !important; }
#gnb #ol_after_private a:hover,
#gnb #ol_after_private li a:hover { color: var(--color-accent) !important; }
#gnb #ol_after_private i { color: var(--color-text-muted); }
#gnb #ol_after_private li a:hover i { color: var(--color-accent); }
/* 모바일: 햄버거 열기/닫기 버튼 및 메뉴 레이어 (전체화면 슬라이드) */
@media (max-width: 767px) {
    #gnb_close,
    #user_close,
    .hd_closer { color: var(--color-text) !important; background: transparent !important; }
    #gnb_close:hover,
    #user_close:hover,
    .hd_closer:hover { color: var(--color-accent) !important; }
    #gnb { background: var(--color-bg-body) !important; }
    #gnb_1dul { background: var(--color-bg-body) !important; }
    #gnb_1dul a,
    .gnb_1da { color: var(--color-text) !important; }
    .gnb_1da { border-bottom-color: var(--color-border) !important; }
    .gnb_2dul { background: var(--color-bg-sub) !important; }
    #user_menu { background: var(--color-bg-body) !important; }
    #hd_sch { background: var(--color-bg-body) !important; }
    /* 모바일 카테고리/메뉴 레이어 내 btn_admin(관리자) 텍스트 */
    #gnb .btn_admin,
    #gnb a.btn_admin,
    #gnb #ol_after_hd .btn_admin,
    #gnb #ol_after_btn .btn_admin { color: var(--color-accent) !important; }
    #gnb #ol_after_btn .btn_admin { background: var(--color-accent) !important; color: #fff !important; }
    #gnb .btn_admin:hover,
    #gnb a.btn_admin:hover { color: var(--color-accent-hover) !important; }
    #gnb #ol_after_btn .btn_admin:hover { background: var(--color-accent-hover) !important; color: #fff !important; }
    /* 아웃로그인: 관리자 버튼 우측 텍스트(정보수정·로그아웃) 및 메뉴 링크 */
    #gnb #ol_after_btn a,
    #gnb #ol_after_logout { color: var(--color-text) !important; }
    #gnb #ol_after_btn a:hover,
    #gnb #ol_after_logout:hover { color: var(--color-accent) !important; }
    #gnb #ol_after_hd strong { color: var(--color-text) !important; }
    #gnb .ol a,
    #gnb #ol_after_private a,
    #gnb #ol_after_private li a { color: var(--color-text) !important; }
    #gnb #ol_after_private a:hover,
    #gnb #ol_after_private li a:hover { color: var(--color-accent) !important; }
    #gnb #ol_after_private i { color: var(--color-text-muted); }
    #gnb #ol_after_private li a:hover i { color: var(--color-accent); }
}

/* 폼·테이블 (공통) */
input[type="text"],
input[type="password"],
textarea,
.frm_input,
.tbl_frm01 th {
    background: var(--color-bg-input) !important;
    border-color: var(--color-border-input) !important;
    color: var(--color-text) !important;
}
.tbl_head01 thead th { border-bottom-color: var(--color-border); }
.tbl_head01 tbody th { border-bottom-color: var(--color-border); }
.tbl_head01 td {
    color: var(--color-text-sub);
    border-top-color: var(--color-border);
    border-bottom-color: var(--color-border);
}
.tbl_head01 tbody tr:hover td { background: var(--color-bg-table-tr-hover); }
.tbl_head01 tfoot th,
.tbl_head01 tfoot td {
    background: var(--color-bg-table-foot);
    border-color: var(--color-border);
}
.tbl_head02 thead th {
    background: var(--color-bg-table-th);
    border-color: var(--color-border);
    color: var(--color-text);
}
.tbl_head02 thead a { color: var(--color-text); }
.tbl_head02 tbody th,
.tbl_head02 td {
    background: var(--color-bg-table-tr);
    border-color: var(--color-border);
    color: var(--color-text-sub);
}
.tbl_wrap table {
    background: var(--color-bg-table-tr);
    border-color: var(--color-border);
}
.list_01 li { background: var(--color-bg-table-tr); border-bottom-color: var(--color-border); }
.list_01 li:nth-child(odd) { background: var(--color-bg-sub); }
.list_01 li:hover { background: var(--color-bg-table-tr-hover); }
.list_01 ul { border-top-color: var(--color-border); }

/* 버튼·링크 */
a { color: var(--color-text-link); }
.btn01, button.btn01, a.btn01 {
    background: var(--color-bg-btn);
    border-color: var(--color-border);
    color: var(--color-text);
}
.pg_page { background: var(--color-bg-sub); border-color: var(--color-border); color: var(--color-text-sub); }
.pg_page:hover { background: var(--color-bg-table-tr-hover); color: var(--color-accent); }
.pg_current { background: var(--color-gold); border-color: var(--color-gold); color: #fff; }

/* 팝업 레이어 */
.hd_pops { border-color: var(--color-border); background: var(--color-bg-body); }

/* 검색 */
#hd_sch #sch_stx,
#hd_sch #sch_submit {
    border-color: var(--color-border);
    background: var(--color-bg-input);
    color: var(--color-text);
}

/* 사이드 #aside, 배너 영역 등 */
#aside { color: var(--color-text); }
.banner_wr.banner_top_m img { border-color: var(--color-border); }

/* 모바일 하단 보강 */
@media (max-width: 767px) {
    #ft { background: var(--color-bg-ft) !important; }
    #ft_copy, #ft_copy b, #ft_copy a { color: var(--color-ft-copy); }
}