@charset "utf-8";

/* ==========================================================================
   SPIDO 게시판·회원 화면 다크 대응
   그누보드 기본 스킨을 유지한 채 색상 계열만 브랜드에 맞춘다
   Phase 4에서 스킨별 세부 디자인을 진행한다
   ========================================================================== */

/*
   기본 스킨의 링크·버튼 색을 배경에 맞추기 위한 기본값이다.
   :where() 로 우선순위를 0 으로 두어 개별 컴포넌트 색상이 항상 이긴다.
   (그렇지 않으면 #container 의 ID 우선순위 때문에 버튼 글자색이 모두 덮인다)
*/
:where(#container) :where(a, button) {
    color: inherit;
}

/* 게시판 검색 레이어 — 밝은/어두운 요소가 섞이지 않도록 통일 */
.bo_sch_wrap .bo_sch {
    background: #101010;
    border: 1px solid var(--spido-line);
    color: var(--spido-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.bo_sch h3 {
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid var(--spido-line);
    color: var(--spido-text);
    font-size: 1rem;
    font-weight: 600;
}

.bo_sch legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    background: transparent;
}

.bo_sch select,
.bo_sch .sch_bar,
.bo_sch .sch_input {
    border: 1px solid var(--spido-line);
    background: var(--spido-surface-2);
    color: var(--spido-text);
    box-shadow: none;
}

.bo_sch .sch_bar {
    display: flex;
    align-items: stretch;
}

.bo_sch .sch_input {
    flex: 1 1 auto;
    width: auto;
    float: none;
    padding: 0 12px;
}

.bo_sch .sch_btn {
    flex: 0 0 auto;
    float: none;
    width: 44px;
    color: var(--spido-text);
    background: transparent;
}

.bo_sch .sch_btn .fa {
    font-family: FontAwesome;
}

.bo_sch .bo_sch_cls {
    background: transparent;
    color: var(--spido-text-sub);
}

.bo_sch_bg {
    background: rgba(0, 0, 0, 0.72);
}

/* 작성 옵션 체크박스 */
.selec_chk {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.chk_box {
    position: relative;
}

.chk_box input[type="checkbox"] + label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding-left: 28px;
    color: var(--spido-text-sub);
    cursor: pointer;
}

.chk_box input[type="checkbox"] + label:hover {
    color: var(--spido-text);
}

.chk_box input[type="checkbox"] + label span {
    position: absolute;
    top: 1px;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--spido-line);
    border-radius: 4px;
    background: var(--spido-surface-2);
}

.chk_box input[type="checkbox"]:checked + label {
    color: var(--spido-text);
}

.chk_box input[type="checkbox"]:checked + label span {
    border-color: var(--spido-accent);
    background: var(--spido-accent);
}

.chk_box input[type="checkbox"]:checked + label span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

#bo_w .frm_info {
    color: var(--spido-text-sub);
}

#bo_w .bo_w_mail .frm_info,
#bo_w .bo_w_hp .frm_info {
    margin-top: 10px;
}

/* 테이블 */
.tbl_wrap table,
.tbl_head01 thead th,
.tbl_head02 thead th,
.tbl_head02 tbody th,
.tbl_head02 td,
.list_01 li,
.list_01 li:nth-child(odd) {
    background: transparent;
    color: var(--spido-text-sub);
}

.tbl_wrap table {
    border-top: 1px solid var(--spido-line);
    border-bottom: 1px solid var(--spido-line);
}

.tbl_head01 thead th {
    border-bottom: 1px solid var(--spido-line);
    color: var(--spido-text);
    font-weight: 600;
}

.tbl_head01 td,
.tbl_head01 tbody th,
.tbl_head02 thead th,
.tbl_head02 tbody th,
.tbl_head02 td,
.list_01 li {
    border-top-color: var(--spido-line-soft);
    border-bottom-color: var(--spido-line-soft);
    color: var(--spido-text-sub);
}

.tbl_head01 tbody tr:hover td,
.list_01 li:hover {
    background: var(--spido-surface);
}

.tbl_head01 a,
.tbl_head02 a,
.list_01 a {
    color: var(--spido-text);
}

.empty_table,
.empty_list {
    color: var(--spido-text-dim);
}

/* 폼 */
.tbl_frm01 th {
    border-color: var(--spido-line-soft);
    background: var(--spido-surface);
    color: var(--spido-text);
}

.tbl_frm01 td {
    border-color: var(--spido-line-soft);
}

.frm_input,
.wr_content textarea,
.tbl_frm01 textarea,
.form_01 textarea,
select {
    border: 1px solid var(--spido-line);
    border-radius: var(--spido-radius-sm);
    background: var(--spido-surface-2);
    color: var(--spido-text);
    box-shadow: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border: 1px solid var(--spido-accent) !important;
    box-shadow: none;
}

::placeholder {
    color: var(--spido-text-dim);
}

.frm_info,
.frm_info.add_info {
    background: transparent;
    border-color: var(--spido-line-soft);
    color: var(--spido-text-dim);
}

/*
   웹에디터(SmartEditor2)는 자체 밝은 UI를 사용한다.
   테마의 밝은 본문 글자색을 그대로 물려받으면 흰 배경 위에서 글자가 보이지 않는다.
*/
.cke_sc_def,
.cke_sc_def dt,
.cke_sc_def dd,
.cke_sc_def a,
.husky_seditor_ui_default,
.husky_seditor_ui_default a,
.husky_seditor_ui_default td,
.husky_seditor_ui_default th,
.husky_seditor_ui_default label,
.husky_seditor_ui_default legend,
.husky_seditor_ui_default input,
.husky_seditor_ui_default select,
.se2_dialog,
.se2_dialog a,
.se2_dialog td,
.se2_dialog th,
.se2_dialog label,
.se2_inputarea {
    color: #222;
}

/* 에디터 안의 입력 요소는 흰 배경을 유지한다 */
.husky_seditor_ui_default input[type="text"],
.husky_seditor_ui_default select,
.husky_seditor_ui_default textarea,
.se2_dialog input[type="text"],
.se2_dialog select,
.wr_content .se2_input_syntax,
.wr_content .se2_input_text,
.wr_content .se2_inputarea textarea {
    background: #fff;
    color: #222;
}

/* 에디터 select 는 밝은 UI이므로 전역 다크 옵션 색을 되돌린다 */
.husky_seditor_ui_default select,
.se2_dialog select {
    color-scheme: light;
}

.husky_seditor_ui_default select option,
.se2_dialog select option {
    background-color: #fff;
    color: #222;
}

.cke_sc {
    margin: 0 0 8px;
    text-align: right;
}

.btn_cke_sc,
.btn_cke_sc_close {
    display: inline-block;
    padding: 6px 12px;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    color: #222 !important;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

.btn_cke_sc:hover,
.btn_cke_sc_close:hover {
    background: #ececec;
    color: #111 !important;
}

/* 버튼 */
.btn_submit {
    border-radius: 999px;
    background: var(--spido-accent);
    color: #fff;
    font-weight: 600;
}

.btn_submit:hover {
    background: var(--spido-accent-hover);
}

.btn_close,
a.btn_close,
a.btn01,
button.btn01,
a.btn_b03,
.btn_b03,
a.btn_b04,
.btn_b04 {
    border: 1px solid var(--spido-line);
    border-radius: 999px;
    background: transparent;
    color: var(--spido-text);
}

a.btn_b03:hover,
.btn_b03:hover,
a.btn_b04:hover,
.btn_b04:hover,
a.btn01:hover,
button.btn01:hover {
    background: var(--spido-surface-2);
    color: var(--spido-text);
}

a.btn02,
button.btn02,
a.btn_b02,
.btn_b02 {
    border: 0;
    border-radius: 999px;
    background: var(--spido-accent);
    color: #fff;
}

a.btn02:hover,
button.btn02:hover,
a.btn_b02:hover,
.btn_b02:hover {
    background: var(--spido-accent-hover);
}

a.btn_b01,
.btn_b01 {
    color: var(--spido-text-sub);
}

.btn_b01:hover {
    color: var(--spido-text);
}

/* 기본 갤러리 스킨의 흰 툴바 버튼을 다크 테마에 맞춘다 */
.btn_bo_user > li {
    background: var(--spido-surface-2);
}

.btn_bo_user .btn,
.btn_bo_user button {
    color: var(--spido-text);
}

.btn_bo_user .fa {
    font-family: FontAwesome;
}

a.btn_frmline,
button.btn_frmline {
    border-radius: var(--spido-radius-sm);
    background: var(--spido-surface-3);
}

/* 페이징 */
.pg_wrap {
    float: none;
    display: block;
    margin-top: 32px;
    text-align: center;
}

.pg_page,
.pg_current {
    border-radius: var(--spido-radius-sm);
}

.pg_page {
    border: 1px solid var(--spido-line-soft);
    background: transparent;
    color: var(--spido-text-sub);
    text-decoration: none;
}

.pg_page:hover {
    background: var(--spido-surface-2);
    color: #fff;
}

.pg_current {
    border: 1px solid var(--spido-accent);
    background: var(--spido-accent);
    color: #fff;
}

/* GIF 아이콘 대신 문자 표시 (다크 테마) */
.pg_start,
.pg_prev,
.pg_next,
.pg_end {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-indent: 0;
    overflow: hidden;
    background: none !important;
    font-size: 0;
    line-height: 1;
    color: var(--spido-text-sub);
}

.pg_start::before,
.pg_prev::before,
.pg_next::before,
.pg_end::before {
    display: block;
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    color: inherit;
}

.pg_start::before { content: "«"; }
.pg_prev::before { content: "‹"; font-size: 1.15rem; }
.pg_next::before { content: "›"; font-size: 1.15rem; }
.pg_end::before { content: "»"; }

.pg_start:hover,
.pg_prev:hover,
.pg_next:hover,
.pg_end:hover {
    color: #fff;
}

/* 사이드뷰 */
.sv_member,
.sv_wrap .sv a {
    color: var(--spido-text-sub);
}

/* 새창 */
.new_win #win_title {
    background: var(--spido-surface);
    color: var(--spido-text);
    box-shadow: none;
}

.new_win .win_ul li {
    background: transparent;
    border-color: var(--spido-line);
}

.new_win .win_ul li a {
    color: var(--spido-text-sub);
}

/* 캡차 — 이미지·입력창·버튼 높이를 맞춰 글자가 잘리지 않게 한다 */
#captcha {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

#captcha #captcha_img {
    height: 46px;
    border: 1px solid var(--spido-line);
    border-radius: var(--spido-radius-sm);
}

#captcha #captcha_key {
    width: 120px;
    min-width: 120px;
    height: 46px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--spido-line);
    border-radius: var(--spido-radius-sm);
    background: var(--spido-surface-2);
    color: var(--spido-text);
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-align: center;
}

#captcha #captcha_mp3,
#captcha #captcha_reload {
    flex: 0 0 auto;
    border-radius: var(--spido-radius-sm);
    background-color: var(--spido-surface-2);
}

#captcha #captcha_info {
    flex: 1 0 100%;
    margin-top: 8px;
    color: var(--spido-text-dim);
    font-size: .78rem;
    letter-spacing: 0;
}

/* 가로 스크롤 방지 */
.tbl_wrap {
    overflow-x: auto;
}