@charset "utf-8";

/*
=========================================================
Webstoryboard.com
밝게 / 어둡게 화면 모드

적용 방식
- <html data-theme="light"> : 밝게
- <html data-theme="dark">  : 어둡게
- 기존 CSS를 삭제하거나 대량 수정하지 않고 마지막에 덮어씁니다.
- 이미지/썸네일에는 반전 필터를 사용하지 않습니다.
=========================================================
*/


/* =====================================================
   공통 색상 변수
===================================================== */

html[data-theme="light"]{
    --ws-bg:#ffffff;
    --ws-bg-soft:#f6f7f9;
    --ws-surface:#ffffff;
    --ws-surface-2:#f4f5f7;
    --ws-surface-3:#eceff2;

    --ws-text:#202327;
    --ws-text-strong:#111315;
    --ws-muted:#6d737a;

    --ws-border:#dfe3e7;
    --ws-border-strong:#c8ced4;

    --ws-link:#202327;
    --ws-input-bg:#ffffff;
    --ws-input-text:#202327;

    --ws-header:#212020;
    --ws-header-text:#ffffff;

    --ws-overlay:rgba(0,0,0,.22);

    --ws-accent:#3a8afd;
    --ws-danger:#c94747;

    color-scheme:light;
}


html[data-theme="dark"]{
    --ws-bg:#101316;
    --ws-bg-soft:#15191d;
    --ws-surface:#1a1f24;
    --ws-surface-2:#20262c;
    --ws-surface-3:#293038;

    --ws-text:#e7e9ec;
    --ws-text-strong:#ffffff;
    --ws-muted:#a7adb4;

    --ws-border:#343b43;
    --ws-border-strong:#48515b;

    --ws-link:#e8ebef;
    --ws-input-bg:#20262c;
    --ws-input-text:#f1f3f5;

    --ws-header:#151719;
    --ws-header-text:#ffffff;

    --ws-overlay:rgba(0,0,0,.58);

    --ws-accent:#6aa5ff;
    --ws-danger:#e06d6d;

    color-scheme:dark;
}


/* =====================================================
   화면 전환 버튼
===================================================== */

.ws-theme-toggle{
    position:fixed;
    top:12px;
    right:12px;

    z-index:100000;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    min-width:76px;
    height:36px;

    padding:0 11px;

    box-sizing:border-box;

    border:1px solid rgba(255,255,255,.26);
    border-radius:18px;

    background:rgba(20,20,20,.82);

    color:#fff;

    font-family:'Malgun Gothic', dotum, sans-serif;
    font-size:11px;
    font-weight:700;

    line-height:1;

    cursor:pointer;

    box-shadow:0 2px 9px rgba(0,0,0,.18);

    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
}

.ws-theme-toggle:hover{
    background:rgba(35,35,35,.92);
}

.ws-theme-toggle:focus{
    outline:2px solid #6aa5ff;
    outline-offset:2px;
}

.ws-theme-toggle-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:16px;

    font-size:14px;
    line-height:1;
}

.ws-theme-toggle-text{
    white-space:nowrap;
}


@media(max-width:700px){

    .ws-theme-toggle{
        top:12px;
        right:10px;

        min-width:68px;
        height:34px;

        padding:0 9px;

        border-radius:17px;

        font-size:10px;
    }

}




/* =====================================================
   검색창 옆 밝게 / 어둡게 버튼
   2026-10-16

   .free-search-form이 있는 페이지에서는 JS가
   버튼을 .ws-search-theme-row 안으로 이동합니다.

   검색 폼이 없는 페이지에서는 기존 fixed 버튼을 유지합니다.
===================================================== */

.ws-search-theme-row{
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:8px;

    width:100%;
    max-width:790px;

    margin:0 auto;

    box-sizing:border-box;
}

.ws-search-theme-row .free-search-form{
    flex:1 1 auto;
    min-width:0;

    margin:0 !important;
}

.ws-theme-toggle.is-search-inline{
    position:static !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;

    z-index:1 !important;

    flex:0 0 auto;

    min-width:78px;
    height:52px;

    margin:0;

    padding:0 11px;

    border:1px solid var(--ws-border-strong, #c9c9c9);
    border-radius:12px;

    background:var(--ws-surface-2, #f2f2f2);
    color:var(--ws-text-strong, #222);

    box-shadow:none;

    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}

html[data-theme="light"] .ws-theme-toggle.is-search-inline{
    background:#f4f4f4;
    border-color:#d6d6d6;
    color:#333;
}

html[data-theme="light"] .ws-theme-toggle.is-search-inline:hover{
    background:#e9e9e9;
}

html[data-theme="dark"] .ws-theme-toggle.is-search-inline{
    background:var(--ws-surface-2, #20262c);
    border-color:var(--ws-border-strong, #48515b);
    color:var(--ws-text-strong, #fff);
}

html[data-theme="dark"] .ws-theme-toggle.is-search-inline:hover{
    background:var(--ws-surface-3, #293038);
}

.ws-search-theme-row .free-search-form{
    min-height:52px;
}

.ws-search-theme-row .free-search-input,
.ws-search-theme-row .free-search-btn,
.ws-search-theme-row .free-search-reset{
    height:48px;
}


/* 모바일에서는 검색창 폭을 우선하고
   테마 버튼은 아이콘 중심의 작은 버튼으로 표시 */
@media(max-width:700px){

    .ws-search-theme-row{
        gap:5px;
        max-width:100%;
    }

    .ws-theme-toggle.is-search-inline{
        min-width:44px;
        width:44px;
        height:48px;

        padding:0;

        border-radius:10px;
    }

    .ws-theme-toggle.is-search-inline
    .ws-theme-toggle-text{
        display:none;
    }

    .ws-theme-toggle.is-search-inline
    .ws-theme-toggle-icon{
        min-width:0;
        font-size:16px;
    }

    .ws-search-theme-row .free-search-form{
        min-height:48px;
    }

}


@media(max-width:380px){

    .ws-search-theme-row{
        gap:4px;
    }

    .ws-theme-toggle.is-search-inline{
        width:40px;
        min-width:40px;
    }

}

/* =====================================================
   기본 페이지
===================================================== */

html[data-theme="light"] body,
html[data-theme="dark"] body{
    background:var(--ws-bg) !important;
    color:var(--ws-text) !important;
}


html[data-theme="light"] #wrapper,
html[data-theme="light"] #container_wr,
html[data-theme="light"] #container,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #container_wr,
html[data-theme="dark"] #container{
    color:var(--ws-text);
}


html[data-theme="dark"] hr{
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] a{
    color:var(--ws-link);
}


html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] dd,
html[data-theme="dark"] dt,
html[data-theme="dark"] label,
html[data-theme="dark"] legend,
html[data-theme="dark"] caption{
    color:inherit;
}


/* =====================================================
   헤더 / 메뉴 / 푸터
===================================================== */

html[data-theme="light"] #hd,
html[data-theme="dark"] #hd{
    background:var(--ws-header) !important;
    color:var(--ws-header-text) !important;
}


html[data-theme="light"] #hd a,
html[data-theme="dark"] #hd a{
    color:var(--ws-header-text);
}


html[data-theme="dark"] #ft,
html[data-theme="dark"] #ft_wr{
    background:#151719 !important;
    color:#d9dde1 !important;
}


html[data-theme="dark"] #ft a{
    color:#d9dde1 !important;
}


html[data-theme="light"] #gnb{
    background:#ffffff !important;
    color:#222 !important;
}


html[data-theme="light"] #gnb .gnb_1da,
html[data-theme="light"] #gnb .gnb_2da,
html[data-theme="light"] #gnb #gnb_empty,
html[data-theme="light"] #gnb #gnb_empty a{
    color:#222 !important;
}


html[data-theme="dark"] #gnb{
    background:#0d0f11 !important;
    color:#fff !important;
}


html[data-theme="dark"] #gnb .gnb_1da,
html[data-theme="dark"] #gnb .gnb_2da,
html[data-theme="dark"] #gnb #gnb_empty,
html[data-theme="dark"] #gnb #gnb_empty a{
    color:#f1f1f1 !important;
}


html[data-theme="light"] #main_gnb{
    background:#ffffff !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="light"] #main_gnb .gnb_main_li > a{
    color:#222 !important;
}


html[data-theme="dark"] #main_gnb{
    background:#0d0f11 !important;
    border-color:#2f353b !important;
}


html[data-theme="dark"] #main_gnb .gnb_main_li > a{
    color:#f3f3f3 !important;
}


@media(max-width:400px){

    html[data-theme="light"] #main_gnb .gnb_main_ul{
        background:#fff !important;
        border-color:var(--ws-border) !important;
    }

    html[data-theme="dark"] #main_gnb .gnb_main_ul{
        background:#15191d !important;
        border-color:var(--ws-border) !important;
    }

}


/* =====================================================
   일반 박스 / 레이어 / 팝업
===================================================== */

html[data-theme="dark"] .hd_pops,
html[data-theme="dark"] #gnb_all,
html[data-theme="dark"] .new_win,
html[data-theme="dark"] .new_win .win_ul,
html[data-theme="dark"] .new_win .win_desc,
html[data-theme="dark"] .ui-dialog,
html[data-theme="dark"] .ui-widget-content{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] #gnb_all h2,
html[data-theme="dark"] #gnb_all .gnb_al_li,
html[data-theme="dark"] .new_win h1,
html[data-theme="dark"] .new_win h2,
html[data-theme="dark"] .new_win h3{
    border-color:var(--ws-border) !important;
    color:var(--ws-text-strong) !important;
}


html[data-theme="dark"] .gnb_2da{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
}


html[data-theme="dark"] .gnb_2da:hover{
    background:var(--ws-surface-2) !important;
}


/* =====================================================
   입력창 / 폼
===================================================== */

html[data-theme="light"] input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select{
    color:var(--ws-input-text);
}


html[data-theme="dark"] input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .frm_input{
    background:var(--ws-input-bg) !important;
    color:var(--ws-input-text) !important;
    border-color:var(--ws-border-strong) !important;
}


html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:#8f969e !important;
    opacity:1;
}


html[data-theme="dark"] input[disabled],
html[data-theme="dark"] textarea[disabled],
html[data-theme="dark"] select[disabled]{
    background:#171b1f !important;
    color:#777f87 !important;
}


html[data-theme="dark"] .btn_cancel,
html[data-theme="dark"] .btn_b01,
html[data-theme="dark"] .btn_b02,
html[data-theme="dark"] .btn_b03,
html[data-theme="dark"] .btn_frmline{
    border-color:var(--ws-border-strong) !important;
}


html[data-theme="dark"] .btn_cancel{
    background:var(--ws-surface-2) !important;
    color:var(--ws-text) !important;
}


/* =====================================================
   표 / 공통 GNUBOARD 표
===================================================== */

html[data-theme="dark"] .tbl_head01 table,
html[data-theme="dark"] .tbl_head02 table,
html[data-theme="dark"] .tbl_frm01 table,
html[data-theme="dark"] .tbl_frm02 table,
html[data-theme="dark"] .tbl_wrap table{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .tbl_head01 thead th,
html[data-theme="dark"] .tbl_head02 thead th,
html[data-theme="dark"] .tbl_frm01 th,
html[data-theme="dark"] .tbl_frm02 th,
html[data-theme="dark"] .tbl_wrap th{
    background:var(--ws-surface-2) !important;
    color:var(--ws-text-strong) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .tbl_head01 td,
html[data-theme="dark"] .tbl_head02 td,
html[data-theme="dark"] .tbl_frm01 td,
html[data-theme="dark"] .tbl_frm02 td,
html[data-theme="dark"] .tbl_wrap td{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .tbl_head01 tr:hover td,
html[data-theme="dark"] .tbl_head02 tr:hover td{
    background:var(--ws-surface-2) !important;
}


/* =====================================================
   게시판 공통
===================================================== */

html[data-theme="dark"] #bo_list,
html[data-theme="dark"] #bo_v,
html[data-theme="dark"] #bo_w,
html[data-theme="dark"] #bo_vc,
html[data-theme="dark"] #bo_vc_w,
html[data-theme="dark"] .bo_vc_w,
html[data-theme="dark"] #bo_sch,
html[data-theme="dark"] #bo_v_share{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] #bo_cate ul,
html[data-theme="dark"] #bo_cate a{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] #bo_cate #bo_cate_on{
    color:var(--ws-accent) !important;
}


html[data-theme="dark"] #bo_v_con,
html[data-theme="dark"] #bo_v_con p,
html[data-theme="dark"] #bo_v_con div,
html[data-theme="dark"] #bo_v_con span{
    color:var(--ws-text);
}


html[data-theme="dark"] #bo_v_con a{
    color:#8db8ff !important;
}


html[data-theme="dark"] #bo_vc{
    background:var(--ws-bg-soft) !important;
}


html[data-theme="dark"] #bo_vc article .comment_inner,
html[data-theme="dark"] #bo_vc .comment_inner{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] #bo_v_act .bo_v_good,
html[data-theme="dark"] #bo_v_act .bo_v_nogood{
    border-color:var(--ws-border-strong) !important;
    color:var(--ws-text) !important;
}


html[data-theme="dark"] #bo_list_total{
    background:var(--ws-surface-2) !important;
    color:var(--ws-muted) !important;
}


html[data-theme="dark"] .bo_tit a,
html[data-theme="dark"] .bo_tit,
html[data-theme="dark"] .bo_current{
    color:var(--ws-text-strong) !important;
}


/* =====================================================
   회원 / 검색 / FAQ / 최근게시물
===================================================== */

html[data-theme="dark"] .mbskin,
html[data-theme="dark"] #mb_login,
html[data-theme="dark"] #fregister,
html[data-theme="dark"] #fregisterform,
html[data-theme="dark"] #reg_result,
html[data-theme="dark"] #find_info,
html[data-theme="dark"] #pw_reset,
html[data-theme="dark"] #mb_confirm,
html[data-theme="dark"] #pw_confirm,
html[data-theme="dark"] #sch_res_detail,
html[data-theme="dark"] .sch_res_list,
html[data-theme="dark"] #faq_wrap,
html[data-theme="dark"] .faq_li,
html[data-theme="dark"] #new_sch{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .mbskin .frm_label,
html[data-theme="dark"] #fregisterform .frm_label{
    color:var(--ws-muted) !important;
}


/* =====================================================
   latest / outlogin / poll / visit
===================================================== */

html[data-theme="dark"] .lt,
html[data-theme="dark"] .latest_wr,
html[data-theme="dark"] #ol_before,
html[data-theme="dark"] #ol_after,
html[data-theme="dark"] #poll,
html[data-theme="dark"] #visit{
    color:var(--ws-text) !important;
}


html[data-theme="dark"] .lt,
html[data-theme="dark"] #ol_before,
html[data-theme="dark"] #ol_after,
html[data-theme="dark"] #poll{
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .lt a,
html[data-theme="dark"] .latest_wr a,
html[data-theme="dark"] #ol_before a,
html[data-theme="dark"] #ol_after a,
html[data-theme="dark"] #poll a,
html[data-theme="dark"] #visit a{
    color:var(--ws-link);
}


/* =====================================================
   현재 new/basic 커스텀 목록
===================================================== */

html[data-theme="dark"] .free-list-wrap,
html[data-theme="dark"] .free-list-header,
html[data-theme="dark"] .free-list-item,
html[data-theme="dark"] .free-list-row,
html[data-theme="dark"] .free-search-wrap,
html[data-theme="dark"] .free-index-box{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .free-list-item:hover{
    background:var(--ws-surface-2) !important;
}


html[data-theme="dark"] .free-list-title,
html[data-theme="dark"] .free-list-subject,
html[data-theme="dark"] .free-list-subject-text,
html[data-theme="dark"] .free-list-group-title{
    color:var(--ws-text-strong) !important;
}


html[data-theme="dark"] .free-list-preview,
html[data-theme="dark"] .free-list-count,
html[data-theme="dark"] .free-list-number,
html[data-theme="dark"] .free-list-hit,
html[data-theme="dark"] .free-search-info{
    color:var(--ws-muted) !important;
}


html[data-theme="dark"] .free-search-input,
html[data-theme="dark"] .free-banner-label-input,
html[data-theme="dark"] .free-banner-text-input,
html[data-theme="dark"] .free-banner-url-input,
html[data-theme="dark"] .free-banner-date-input,
html[data-theme="dark"] .free-issue-message-input,
html[data-theme="dark"] .free-delete-pending-textarea{
    background:var(--ws-input-bg) !important;
    color:var(--ws-input-text) !important;
    border-color:var(--ws-border-strong) !important;
}


html[data-theme="dark"] .free-index-btn{
    background:var(--ws-surface-2) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .free-index-btn:hover,
html[data-theme="dark"] .free-index-btn.is-active{
    background:#2b5280 !important;
    color:#fff !important;
}


/* =====================================================
   커스텀 팝업: 배너 / 북마크 / 문의 / 삭제대기
===================================================== */

html[data-theme="dark"] .free-banner-dialog,
html[data-theme="dark"] .free-bookmark-dialog,
html[data-theme="dark"] .free-issue-dialog,
html[data-theme="dark"] .free-delete-pending-dialog{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .free-banner-head,
html[data-theme="dark"] .free-banner-foot,
html[data-theme="dark"] .free-bookmark-panel-head,
html[data-theme="dark"] .free-bookmark-panel-foot,
html[data-theme="dark"] .free-issue-head,
html[data-theme="dark"] .free-issue-foot,
html[data-theme="dark"] .free-delete-pending-head{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .free-banner-title,
html[data-theme="dark"] .free-bookmark-panel-title,
html[data-theme="dark"] .free-issue-title,
html[data-theme="dark"] .free-delete-pending-title{
    color:var(--ws-text-strong) !important;
}


html[data-theme="dark"] .free-banner-admin-item,
html[data-theme="dark"] .free-bookmark-item,
html[data-theme="dark"] .free-issue-item,
html[data-theme="dark"] .free-delete-pending-subject{
    background:var(--ws-surface-2) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .free-banner-admin-text,
html[data-theme="dark"] .free-bookmark-item-subject,
html[data-theme="dark"] .free-issue-message{
    color:var(--ws-text-strong) !important;
}


html[data-theme="dark"] .free-banner-admin-url,
html[data-theme="dark"] .free-banner-admin-schedule,
html[data-theme="dark"] .free-bookmark-item-meta,
html[data-theme="dark"] .free-bookmark-item-preview,
html[data-theme="dark"] .free-issue-date,
html[data-theme="dark"] .free-issue-hint,
html[data-theme="dark"] .free-banner-hint,
html[data-theme="dark"] .free-delete-pending-hint{
    color:var(--ws-muted) !important;
}


html[data-theme="dark"] .free-banner-close,
html[data-theme="dark"] .free-bookmark-panel-close,
html[data-theme="dark"] .free-issue-close,
html[data-theme="dark"] .free-delete-pending-close,
html[data-theme="dark"] .free-banner-edit-cancel,
html[data-theme="dark"] .free-delete-pending-cancel{
    background:var(--ws-surface-2) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


/* 삭제대기는 의미 전달을 위해 붉은 톤을 유지하되 어둡게 보정 */
html[data-theme="dark"] .free-list-item.is-delete-pending{
    background:#21191a !important;
    border-color:#63383c !important;
}


html[data-theme="dark"] .free-delete-pending-box{
    background:#2a1d1f !important;
    color:#f3c3c7 !important;
    border-color:#6b3b40 !important;
}


html[data-theme="dark"] .free-delete-pending-reason{
    color:#f0c0c4 !important;
}


/* 텍스트 배너 */
html[data-theme="dark"] .free-text-banner{
    background:var(--ws-surface-2) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .free-text-banner-text{
    color:var(--ws-text-strong) !important;
}




/* =====================================================
   2026-10-16 다크모드 보완
   - 리스트 제보 박스
   - 제목 옆 그룹명 / 카테고리 박스
   - 공지형 리스트 배경
===================================================== */

html[data-theme="dark"] .free-issue-notice{
    background:var(--ws-surface-2) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}

html[data-theme="dark"] .free-issue-notice:hover{
    background:var(--ws-surface-3) !important;
    border-color:var(--ws-border-strong) !important;
}

html[data-theme="dark"] .free-issue-notice-text{
    color:var(--ws-text) !important;
}

html[data-theme="dark"] .free-issue-notice-text strong{
    color:var(--ws-text-strong) !important;
}

html[data-theme="dark"] .free-issue-notice-open{
    color:var(--ws-muted) !important;
}

html[data-theme="dark"] .free-list-group-title,
html[data-theme="dark"] .free-list-category{
    background:var(--ws-surface-2) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}

html[data-theme="dark"] .free-list-item.is-notice{
    background:var(--ws-surface-2) !important;
    border-color:var(--ws-border-strong) !important;
}

html[data-theme="dark"] .free-search-info strong,
html[data-theme="dark"] .free-list-count strong{
    color:var(--ws-text-strong) !important;
}

/* 제보 팝업 안의 이름/버튼도 밝은 박스가 남지 않도록 보완 */
html[data-theme="dark"] .free-issue-name{
    background:var(--ws-input-bg) !important;
    color:var(--ws-input-text) !important;
    border-color:var(--ws-border-strong) !important;
}

html[data-theme="dark"] .free-issue-admin-btn{
    background:var(--ws-surface-2) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}

html[data-theme="dark"] .free-issue-admin-btn:hover{
    background:var(--ws-surface-3) !important;
    border-color:var(--ws-border-strong) !important;
}


/* =====================================================
   쇼핑몰 공통
===================================================== */

html[data-theme="dark"] #sidx,
html[data-theme="dark"] #sct,
html[data-theme="dark"] #sit,
html[data-theme="dark"] #sit_inf,
html[data-theme="dark"] #sod,
html[data-theme="dark"] #sod_list,
html[data-theme="dark"] #sod_frm,
html[data-theme="dark"] .sct,
html[data-theme="dark"] .sct_li,
html[data-theme="dark"] .sit_ov_tbl,
html[data-theme="dark"] .sod_list,
html[data-theme="dark"] .sod_li,
html[data-theme="dark"] .sod_option{
    background:var(--ws-surface) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


html[data-theme="dark"] .sct_txt,
html[data-theme="dark"] .sct_txt a,
html[data-theme="dark"] .sct_cost,
html[data-theme="dark"] .sit_name,
html[data-theme="dark"] #sit_title{
    color:var(--ws-text-strong) !important;
}


/* =====================================================
   코드 / 인용 / 안내
===================================================== */

html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] blockquote{
    background:var(--ws-surface-2) !important;
    color:var(--ws-text) !important;
    border-color:var(--ws-border) !important;
}


/* =====================================================
   이미지와 광고는 원래 색상 유지
===================================================== */

html[data-theme="light"] img,
html[data-theme="dark"] img,
html[data-theme="light"] video,
html[data-theme="dark"] video,
html[data-theme="light"] iframe,
html[data-theme="dark"] iframe,
html[data-theme="light"] ins.adsbygoogle,
html[data-theme="dark"] ins.adsbygoogle{
    filter:none !important;
}




/* =====================================================
   하단 페이징 밝게 / 어둡게 색상 보완
   2026-10-16

   메인 new.skin.php의 .free-list-paging 영역만 대상으로 하여
   다른 게시판/기능에는 영향을 주지 않습니다.
===================================================== */

/* 밝게 */
html[data-theme="light"] .free-list-paging .pg_wrap{
    background:transparent !important;
}

html[data-theme="light"] .free-list-paging .pg_page{
    background:#ffffff !important;
    color:#555 !important;
    border-color:#d9dde1 !important;
}

html[data-theme="light"] .free-list-paging .pg_page:hover{
    background:#f3f5f7 !important;
    color:#222 !important;
    border-color:#bfc6cd !important;
}

html[data-theme="light"] .free-list-paging .pg_current{
    background:#222 !important;
    color:#fff !important;
    border-color:#222 !important;
}


/* 어둡게 */
html[data-theme="dark"] .free-list-paging .pg_wrap{
    background:transparent !important;
}

html[data-theme="dark"] .free-list-paging .pg_page{
    background:var(--ws-surface-2, #20262c) !important;
    color:var(--ws-text, #e7e9ec) !important;
    border-color:var(--ws-border, #343b43) !important;
}

html[data-theme="dark"] .free-list-paging .pg_page:hover{
    background:var(--ws-surface-3, #293038) !important;
    color:var(--ws-text-strong, #fff) !important;
    border-color:var(--ws-border-strong, #48515b) !important;
}

html[data-theme="dark"] .free-list-paging .pg_current{
    background:var(--ws-accent, #6aa5ff) !important;
    color:#fff !important;
    border-color:var(--ws-accent, #6aa5ff) !important;
    box-shadow:0 0 0 1px rgba(106,165,255,.12);
}


/*
   처음 / 이전 / 다음 / 끝 버튼은 기본 CSS의 GIF 화살표가
   어두운 배경에서 잘 안 보일 수 있어 다크모드에서만 문자 아이콘으로 교체
*/
html[data-theme="dark"] .free-list-paging .pg_start,
html[data-theme="dark"] .free-list-paging .pg_prev,
html[data-theme="dark"] .free-list-paging .pg_next,
html[data-theme="dark"] .free-list-paging .pg_end{
    background-image:none !important;
    text-indent:0 !important;
    overflow:hidden !important;
    font-size:0 !important;
}

html[data-theme="dark"] .free-list-paging .pg_start::before,
html[data-theme="dark"] .free-list-paging .pg_prev::before,
html[data-theme="dark"] .free-list-paging .pg_next::before,
html[data-theme="dark"] .free-list-paging .pg_end::before{
    display:block;
    color:var(--ws-text, #e7e9ec);
    font-size:17px;
    font-weight:700;
    line-height:1;
}

html[data-theme="dark"] .free-list-paging .pg_start::before{
    content:"«";
}

html[data-theme="dark"] .free-list-paging .pg_prev::before{
    content:"‹";
}

html[data-theme="dark"] .free-list-paging .pg_next::before{
    content:"›";
}

html[data-theme="dark"] .free-list-paging .pg_end::before{
    content:"»";
}


/* 모바일에서도 번호와 화살표 크기를 균일하게 유지 */
@media(max-width:700px){

    .free-list-paging .pg_page,
    .free-list-paging .pg_current{
        min-width:34px !important;
        height:34px !important;
        padding:0 6px !important;
    }

}

/* =====================================================
   부드러운 전환
===================================================== */

@media(prefers-reduced-motion:no-preference){

    body,
    #hd,
    #ft,
    #main_gnb,
    #gnb,
    #container,
    #container_wr,
    input,
    textarea,
    select,
    .free-list-item,
    .free-banner-dialog,
    .free-bookmark-dialog,
    .free-issue-dialog,
    .free-delete-pending-dialog{
        transition:
            background-color .18s ease,
            color .18s ease,
            border-color .18s ease;
    }

}