/* Shared visual bridge for the complete Clarity skin tree. */
body.clarity-page :is(#bo_list, #bo_v, #bo_w, #faq_wrap, #qa_wrap, #ctt, .mbskin, .search_container, #connect, #poll) {
    color: var(--clarity-text);
    font-family: var(--clarity-font);
}

body.clarity-page :is(#bo_list, #bo_v, #bo_w, #faq_wrap, #qa_wrap, #ctt, .mbskin, .search_container, #connect, #poll) :is(h1, h2, h3, h4, h5) {
    color: var(--clarity-text);
    font-family: var(--clarity-font);
}

body.clarity-page :is(#bo_list, #bo_v, #bo_w, #faq_wrap, #qa_wrap, #ctt, .mbskin, .search_container) {
    border-color: var(--clarity-border);
    border-radius: var(--clarity-radius-md);
    background: var(--clarity-surface);
    box-shadow: var(--clarity-shadow-sm);
}

body.clarity-page :is(.tbl_head01, .tbl_frm01) {
    border-color: var(--clarity-border);
}

body.clarity-page .tbl_head01 table {
    border-top-color: var(--clarity-border-strong);
    background: var(--clarity-surface);
}

body.clarity-page .tbl_head01 thead th {
    border-color: var(--clarity-border);
    background: var(--clarity-surface-soft);
    color: var(--clarity-text-soft);
}

body.clarity-page .tbl_head01 tbody td {
    border-color: var(--clarity-border);
    background: var(--clarity-surface) !important;
    color: var(--clarity-text-soft);
}

body.clarity-page #bo_list .tbl_head01 tbody tr {
    border-left-color: transparent;
}

body.clarity-page #bo_list .tbl_head01 tbody tr:hover,
body.clarity-page #bo_list .tbl_head01 tbody tr.even:hover {
    border-left-color: var(--clarity-primary);
    background: var(--clarity-surface-tint);
}

body.clarity-page #bo_list .tbl_head01 tbody tr:hover td,
body.clarity-page #bo_list .tbl_head01 tbody tr.even:hover td {
    background: var(--clarity-surface-tint) !important;
}

body.clarity-page .tbl_frm01 th {
    border-color: var(--clarity-border);
    background: var(--clarity-surface-soft);
    color: var(--clarity-text-soft);
}

body.clarity-page .tbl_frm01 td {
    border-color: var(--clarity-border);
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
}

body.clarity-page :is(input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], select, textarea) {
    border: 1px solid var(--clarity-border-strong) !important;
    border-radius: var(--clarity-radius-sm);
    background: var(--clarity-surface) !important;
    color: var(--clarity-text) !important;
}

/* 입력칸 포커스는 2px 실선 한 겹으로 낸다. 전에는 강조색을 14~18% 로
   묽힌 3px 후광이었는데, 흰 바탕에서 상태 대비가 3:1 에 한참 못 미쳐
   키보드로 다닐 때 어디에 있는지 알기 어려웠다.
   테두리 색이 바뀌는 것은 마우스로 눌렀을 때도 남기고(어느 칸을 만지는지
   알려 주는 신호), 링은 키보드로 들어왔을 때만 그린다. */
body.clarity-page :is(input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], select, textarea):focus {
    border-color: var(--clarity-primary) !important;
}

body.clarity-page :is(input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], select, textarea):focus-visible {
    outline: 2px solid var(--clarity-primary);
    outline-offset: 1px;
}

body.clarity-page :is(.btn_bo_user a, .btn_bo_adm a, .btn_confirm .btn_submit, .btn_submit, .btn_b01, .btn_b02, .btn_cancel, .btn_frmline) {
    border: 1px solid var(--clarity-border-strong);
    border-radius: var(--clarity-radius-sm);
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

body.clarity-page :is(.btn_bo_user a, .btn_bo_adm a, .btn_confirm .btn_submit, .btn_submit, .btn_b01, .btn_b02, .btn_cancel, .btn_frmline):hover,
body.clarity-page :is(.btn_bo_user a, .btn_bo_adm a, .btn_confirm .btn_submit, .btn_submit, .btn_b01, .btn_b02, .btn_cancel, .btn_frmline):focus-visible {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

body.clarity-page #bo_v_title .bo_v_tit,
body.clarity-page #bo_v_con,
body.clarity-page .bo_v_con,
body.clarity-page .wr_content,
body.clarity-page #ctt_con,
body.clarity-page .sch_res_title {
    color: var(--clarity-text-soft);
}

body.clarity-page #bo_vc article {
    border-bottom-color: var(--clarity-border);
    background: transparent;
    color: var(--clarity-text-soft);
}

body.clarity-page #bo_vc .cmt_contents,
body.clarity-page #bo_vc .cmt_info {
    color: var(--clarity-text-soft);
}

body.clarity-page #bo_vc_w {
    border-color: var(--clarity-border);
    border-radius: var(--clarity-radius-sm);
    background: var(--clarity-surface-soft);
}

body.clarity-page :is(#faq_wrap .faq_li, #qa_wrap .qa_qna, #qa_wrap .qa_list) {
    border-color: var(--clarity-border);
    background: var(--clarity-surface);
}

body.clarity-page :is(#faq_wrap .faq_q, #faq_wrap .faq_a, #qa_wrap .qa_q, #qa_wrap .qa_a) {
    border-color: var(--clarity-border);
    color: var(--clarity-text-soft);
}

body.clarity-page :is(#connect, #poll) {
    border: 1px solid var(--clarity-border);
    border-radius: var(--clarity-radius-md);
    background: var(--clarity-surface);
    box-shadow: var(--clarity-shadow-sm);
}

body.clarity-page :is(#connect h2, #poll h2, #connect .connect_tit, #poll .poll_question) {
    color: var(--clarity-text);
}

body.clarity-page :is(#connect li, #poll li, #poll .poll_list) {
    border-color: var(--clarity-border);
    color: var(--clarity-text-soft);
}

/* 상세의 #sit_ov_wrap · #sit_ov 는 뺐다. 온담 레이어(shop.css)가 테두리와
   바탕을 걷어내 평평하게 두는데 여기 그림자만 남아, 테두리 없이 그림자만
   뜬 카드가 두 겹으로 깔렸다. 그쪽이 통째로 맡는다. */
body.clarity-shop-page :is(#gnb, #main_bn, #sev .ev_prd, #sct, #sod_bsk, #sod_fin, #sod_frm, #scomm) {
    border-color: var(--clarity-border);
    border-radius: var(--clarity-radius-md);
    background: var(--clarity-surface);
    color: var(--clarity-text);
}

/* 코어 마크업의 글자색을 한 번에 맞추는 다리. id 무게를 갖는 탓에 이 안에
   놓인 테마 컴포넌트의 색까지 덮어 버린다 — 주문 단계 배지가 그래서 현재
   단계에서도 흐린 글씨로 나왔다. 테마가 직접 칠하는 것은 여기서 뺀다. */
body.clarity-shop-page :is(#gnb, #main_bn, #sev .owl_pager, #main_bn .owl_pager, #sct, #sod_bsk, #sod_fin, #sod_frm, #sit_ov_wrap, #sit_ov, #scomm) :is(h1, h2, h3, h4, a, p, span, li, td, th):not(.clarity-order-step-no, .clarity-sit-discount) {
    color: var(--clarity-text-soft);
}

body.clarity-shop-page :is(.gnb_1da, .gnb_2da):hover,
body.clarity-shop-page :is(.sct_txt, .sct_tit, .sit_title) a:hover {
    color: var(--clarity-primary);
}

@media (max-width: 640px) {
    body.clarity-page :is(#bo_list, #bo_v, #bo_w, #faq_wrap, #qa_wrap, #ctt, .mbskin, .search_container, #connect, #poll) {
        border-radius: var(--clarity-radius-sm);
    }

    body.clarity-page .tbl_head01 {
        overflow-x: auto;
    }

    body.clarity-page .tbl_head01 table {
        min-width: 640px;
    }

    body.clarity-shop-page :is(#gnb, #main_bn, #sev .ev_prd, #sct, #sod_bsk, #sod_fin, #sod_frm, #scomm) {
        border-radius: var(--clarity-radius-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.clarity-page :is(.btn_bo_user a, .btn_bo_adm a, .btn_confirm .btn_submit, .btn_submit, .btn_b01, .btn_b02, .btn_cancel, .btn_frmline) {
        transition: none;
    }
}

/* --- 다크에 남은 밝은 바탕 (커뮤니티) ---

   그누보드 기본 스킨들은 상자와 칩에 밝은 색을 직접 박아 둔다. 라이트에서는
   테마 표면색과 비슷해 티가 안 나지만, 다크에서는 밝은 바탕이 그대로 남고
   그 위에 밝은 글자가 얹혀 글자가 사라진다. 배경과 글자를 함께 토큰으로
   돌린다. 어디서 온 값인지 옆에 적어 둔다. */

/* skin/faq/basic, skin/search/basic — 흰 카드 */
body.clarity-page :is(#faq_con > ol > li, #faq_con .tit_btn, .search_board_result > ul > li) {
    background: var(--clarity-surface);
}

/* skin/faq · skin/new · skin/search 의 검색 상자 #f7f7f7 */
body.clarity-page :is(#faq_sch, #new_sch, #sch_res_detail) {
    background: var(--clarity-surface-soft);
    border-color: var(--clarity-border);
}

/* 분류·게시판 칩. 코어가 파스텔 색을 하나씩 박아 두었다
   (#e2eaf6 · #edfbde · #eeeaf8 · #e8eeef). 색으로 종류를 가르던 것을
   포기하는 대신 어느 모드에서나 읽히게 한다.
   게시판 목록 카드의 .cb-cat 은 테두리만 쓰는 조용한 칩이라 뺀다. */
body.clarity-page :is(.bo_cate_link, #fnewlist .td_group a, #fnewlist .td_board a,
                      .sch_tit .pop_a, .scrap_cate):not(.cb-cat) {
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

/* 답변 대기 표식 #ccd1d9 에 흰 글씨 — 라이트에서도 1.5:1 이었다. */
body.clarity-page .txt_rdy {
    background: var(--clarity-surface-soft);
    color: var(--clarity-text-soft);
}

/* 현재 페이지 번호. 다크에서 강조색이 밝아지는데 글자는 흰색으로 남아
   2.2:1 이 된다. 글자를 표면색으로 두면 두 모드가 다 맞는다. */
body.clarity-page .pg_current {
    background: var(--clarity-primary);
    color: var(--clarity-surface);
}

/* 아래는 코어가 id 나 두 클래스로 잡아 둔 자리라 무게를 맞춰 준다. */

/* skin/qa/basic — 답변 대기 표식 */
body.clarity-page :is(#bo_list, #bo_v_rel) .txt_rdy {
    background: var(--clarity-surface-soft);
    color: var(--clarity-text-soft);
}

/* skin/search/basic — 결과 요약 띠와 정렬 전환 단추 */
body.clarity-page #sch_res_ov {
    background: var(--clarity-surface-soft);
}

body.clarity-page .switch_field label {
    border-color: var(--clarity-border);
    background-color: var(--clarity-surface);
    color: var(--clarity-text-soft);
}

/* 체크상자 표식. 배경 이미지로 체크를 그리므로 배경색만 바꾼다. */
body.clarity-page .chk_box label > span {
    background-color: var(--clarity-surface);
    border-color: var(--clarity-border-strong);
}