@charset "utf-8";

/*
 * ca-sull.com dark / gold visual system
 * Existing boards, posts and upload data are intentionally untouched.
 */
:root {
    --cs-bg: #1b1b1b;
    --cs-bg-deep: #141414;
    --cs-panel: #292929;
    --cs-panel-soft: #222;
    --cs-line: #454545;
    --cs-gold: #f0a20a;
    --cs-gold-bright: #ffb51b;
    --cs-text: #f4f4f4;
    --cs-muted: #9297a1;
}

html,
body {
    background: var(--cs-bg) !important;
    color: var(--cs-text) !important;
    font-family: "Noto Sans KR", "Pretendard", "Apple SD Gothic Neo",
                 "Malgun Gothic", sans-serif !important;
    font-size: 15px !important;
    letter-spacing: -.35px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea,
table {
    font-family: inherit !important;
}

a {
    color: var(--cs-text);
    transition: color .18s ease, background-color .18s ease,
                border-color .18s ease, transform .18s ease;
}

a:hover,
a:focus {
    color: var(--cs-gold-bright);
    text-decoration: none;
}

hr {
    border-color: var(--cs-line) !important;
}

/* Header */
#hd.tanga-hd,
#hd.tanga-hd .tanga-main,
#hd.tanga-hd .tanga-top {
    background: var(--cs-bg) !important;
    color: var(--cs-muted) !important;
}

#hd.tanga-hd {
    border-top: 2px solid var(--cs-gold) !important;
    border-bottom: 1px solid var(--cs-line) !important;
}

#hd.tanga-hd .tanga-top {
    border-bottom: 1px solid #323232 !important;
}

#hd.tanga-hd .tanga-top a {
    color: #b3b6bd !important;
}

#hd.tanga-hd .tanga-top a:hover {
    color: var(--cs-gold-bright) !important;
}

/* 즐겨찾기·날짜·로그인·회원가입 상단 줄 전체 제거 */
html body #hd.tanga-hd .tanga-top {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

#hd.tanga-hd .tanga-login a {
    border-color: var(--cs-gold) !important;
    color: var(--cs-gold-bright) !important;
}

#hd.tanga-hd .tanga-login a.tanga-join {
    background: var(--cs-gold) !important;
    color: #111 !important;
}

#hd.tanga-hd .tanga-main {
    min-height: 86px !important;
    height: 86px !important;
    box-shadow: none !important;
}

#hd.tanga-hd .tanga-logo img {
    filter: saturate(.95) contrast(1.08);
}

#hd.tanga-hd .tanga-menu > li > a,
#hd.tanga-hd .tanga-menu-btn {
    height: 86px !important;
    line-height: 86px !important;
    padding: 0 23px !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

/* 상단 메뉴 글자색 최종 고정 */
html body #hd.tanga-hd .tanga-nav .tanga-menu > li > a,
html body #hd.tanga-hd .tanga-nav .tanga-menu > li > button,
html body #hd.tanga-hd .tanga-nav .tanga-menu > li > .tanga-menu-btn,
html body #hd.tanga-hd .tanga-main .tanga-menu > li > a,
html body #hd.tanga-hd .tanga-main .tanga-menu-btn {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body #hd.tanga-hd .tanga-nav .tanga-menu > li:hover > a,
html body #hd.tanga-hd .tanga-nav .tanga-menu > li:hover > button,
html body #hd.tanga-hd .tanga-nav .tanga-menu > li.is-open > a,
html body #hd.tanga-hd .tanga-nav .tanga-menu > li.is-current > a,
html body #hd.tanga-hd .tanga-nav .tanga-menu > li.is-current > .tanga-menu-btn {
    color: var(--cs-gold-bright) !important;
    -webkit-text-fill-color: var(--cs-gold-bright) !important;
}

#hd.tanga-hd .tanga-menu > li:hover > a,
#hd.tanga-hd .tanga-menu > li:hover .tanga-menu-btn,
#hd.tanga-hd .tanga-menu > li.is-open > a,
#hd.tanga-hd .tanga-menu > li.is-current > a,
#hd.tanga-hd .tanga-menu > li.is-current .tanga-menu-btn {
    color: var(--cs-gold-bright) !important;
}

#hd.tanga-hd .tanga-main:after {
    height: 1px !important;
    background: var(--cs-line) !important;
}

#hd.tanga-hd .tanga-sub {
    top: 86px !important;
    background: var(--cs-panel) !important;
    border: 1px solid var(--cs-line) !important;
    border-top: 2px solid var(--cs-gold) !important;
    border-radius: 0 0 12px 12px !important;
    overflow: hidden;
}

#hd.tanga-hd .tanga-menu > li.is-open .tanga-sub {
    display: block !important;
}

#hd.tanga-hd .tanga-menu > li.is-open > a:before,
#hd.tanga-hd .tanga-menu > li.is-current > a:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid var(--cs-gold);
    z-index: 61;
}

#hd.tanga-hd .tanga-sub a {
    color: #eee !important;
    border-bottom-color: #424242 !important;
}

#hd.tanga-hd .tanga-sub a:hover {
    background: #333 !important;
    color: var(--cs-gold-bright) !important;
}

#hd.tanga-hd .tanga-sub li.is-current > a {
    background: var(--cs-gold) !important;
    color: #111 !important;
}

#hd.tanga-hd .tanga-menu > li.has-sub:hover > a:before {
    border-bottom-color: var(--cs-gold) !important;
}

/* Main layout */
#wrapper,
#container_wr,
#container,
#aside {
    background: var(--cs-bg) !important;
}

#container_wr {
    max-width: 1440px !important;
    padding: 28px 22px 50px !important;
}

#container_title {
    margin: 0 0 22px !important;
    padding: 22px 26px !important;
    border: 1px solid var(--cs-line) !important;
    border-top: 2px solid var(--cs-gold) !important;
    border-radius: 10px !important;
    background: var(--cs-panel-soft) !important;
    color: var(--cs-text) !important;
    font-size: 25px !important;
    font-weight: 800 !important;
}

/* Shared cards, boards and forms */
#bo_list,
#bo_v,
#bo_w,
.tbl_head01,
.tbl_frm01,
.latest_wr,
.lt,
.new_win,
.register,
.mbskin,
.qa_list,
.faq_1,
.ctt {
    background: var(--cs-panel-soft) !important;
    color: var(--cs-text) !important;
    border-color: var(--cs-line) !important;
}

#bo_list,
#bo_v,
#bo_w {
    padding: 22px !important;
    border: 1px solid var(--cs-line) !important;
    border-radius: 12px !important;
}

table {
    color: var(--cs-text) !important;
}

.tbl_head01 thead th,
.tbl_head02 thead th {
    padding: 15px 10px !important;
    background: #242424 !important;
    color: var(--cs-gold-bright) !important;
    border-top: 2px solid var(--cs-gold) !important;
    border-bottom: 1px solid var(--cs-line) !important;
    font-size: 14px !important;
}

.tbl_head01 td,
.tbl_head02 td,
#bo_list tbody td,
#bo_list tbody .even td,
#bo_list tbody .odd td {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    background: var(--cs-panel) !important;
    color: #d9d9d9 !important;
    border-color: var(--cs-line) !important;
}

#bo_list tbody tr:hover td,
#bo_list tbody .even:hover td,
#bo_list tbody .odd:hover td {
    background: #303030 !important;
}

#bo_list tbody tr {
    border-left: 2px solid transparent !important;
}

#bo_list tbody tr:hover {
    border-left-color: var(--cs-gold) !important;
}

.bo_tit,
.bo_tit a,
#bo_v_title .bo_v_tit,
#bo_v_title .bo_v_tit a {
    color: var(--cs-text) !important;
    font-weight: 700 !important;
}

.bo_tit a:hover {
    color: var(--cs-gold-bright) !important;
}

.bo_notice td {
    background: #302a1e !important;
}

.bo_notice .notice_icon,
.bo_current,
.txt_active,
#bo_list .cnt_cmt {
    color: var(--cs-gold-bright) !important;
}

.bo_cate_link,
#bo_cate a {
    background: #252525 !important;
    color: #d7d7d7 !important;
    border: 1px solid var(--cs-line) !important;
}

#bo_cate a:hover,
#bo_cate a:focus,
#bo_cate #bo_cate_on {
    background: var(--cs-gold) !important;
    color: #111 !important;
    border-color: var(--cs-gold) !important;
    box-shadow: none !important;
}

/* Post view */
#bo_v_title {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cs-line);
}

#bo_v_title .bo_v_tit {
    font-size: 28px !important;
    line-height: 1.4 !important;
}

#bo_v_info,
#bo_v_info strong,
#bo_v_info .if_date,
#bo_v_info .sv_member,
#bo_v_info .sv_guest {
    color: var(--cs-muted) !important;
    border-color: var(--cs-line) !important;
}

#bo_v_con {
    color: #e7e7e7 !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
}

#bo_v_con a,
#bo_v_link a,
#bo_v_file a {
    color: var(--cs-gold-bright) !important;
}

#bo_v_link li,
#bo_v_file li,
.bo_v_nb li {
    background: var(--cs-panel) !important;
    border-color: var(--cs-line) !important;
    box-shadow: none !important;
}

.bo_v_nb li:hover {
    background: #303030 !important;
}

.bo_v_nb li .nb_tit,
.bo_v_nb li .nb_date {
    color: var(--cs-muted) !important;
}

/* Inputs and buttons */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
select,
textarea,
.frm_input {
    background: #2b2b2b !important;
    color: var(--cs-text) !important;
    border: 1px solid #4b4b4b !important;
    border-radius: 6px !important;
}

input:focus,
select:focus,
textarea:focus,
.frm_input:focus {
    border-color: var(--cs-gold) !important;
    box-shadow: 0 0 0 2px rgba(240, 162, 10, .16) !important;
    outline: 0 !important;
}

.btn_submit,
.btn_b02,
.btn_b03,
a.btn_b02,
a.btn_b03,
.btn_confirm .btn_submit,
#bo_v_top .btn_b01,
#bo_v_top .btn_b02 {
    background: var(--cs-gold) !important;
    border-color: var(--cs-gold) !important;
    color: #111 !important;
    font-weight: 800 !important;
}

.btn_submit:hover,
.btn_b02:hover,
.btn_b03:hover,
a.btn_b02:hover,
a.btn_b03:hover {
    background: var(--cs-gold-bright) !important;
    color: #111 !important;
}

.btn_b01,
a.btn_b01,
.btn_cancel,
a.btn_cancel {
    background: #343434 !important;
    border-color: #555 !important;
    color: #eee !important;
}

/* Pagination and search */
.pg_wrap .pg_page,
.pg_wrap .pg_current,
.pg_page,
.pg_current {
    background: #292929 !important;
    color: #ddd !important;
    border-color: var(--cs-line) !important;
}

.pg_wrap .pg_current,
.pg_current {
    background: var(--cs-gold) !important;
    color: #111 !important;
    border-color: var(--cs-gold) !important;
}

.bo_sch,
.more_opt,
#autosave_pop {
    background: var(--cs-panel) !important;
    color: var(--cs-text) !important;
    border-color: var(--cs-line) !important;
}

.bo_sch h3,
.more_opt li,
#autosave_pop ul {
    border-color: var(--cs-line) !important;
}

.more_opt li button,
.more_opt li a,
.bo_sch .bo_sch_cls {
    background: transparent !important;
    color: #ddd !important;
}

/* Gallery cards */
#bo_gall .gall_li,
.gall_row .gall_li,
.pic_lt li {
    background: var(--cs-panel) !important;
    border-color: var(--cs-line) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

#bo_gall .gall_text_href a,
#bo_gall .gall_name,
.pic_lt .lt_tit {
    color: var(--cs-text) !important;
}

#bo_gall .gall_info,
#bo_gall .gall_date,
.pic_lt .lt_info {
    color: var(--cs-muted) !important;
}

/* Sidebar and footer */
#aside > div,
#aside section,
#tanga-sidebar,
.tanga-sidebar-panel {
    background: var(--cs-panel-soft) !important;
    color: var(--cs-text) !important;
    border-color: var(--cs-line) !important;
    border-radius: 10px !important;
}

#ft,
#ft_wr {
    background: var(--cs-bg-deep) !important;
    color: var(--cs-muted) !important;
    border-color: var(--cs-line) !important;
}

#ft a {
    color: #c8c8c8 !important;
}

#ft a:hover {
    color: var(--cs-gold-bright) !important;
}

#top_btn {
    background: var(--cs-gold) !important;
    color: #111 !important;
    border: 0 !important;
}

/* Mobile */
@media (max-width: 1024px) {
    body #hd,
    body #hd_wrapper {
        background: var(--cs-bg) !important;
        color: var(--cs-text) !important;
        border-color: var(--cs-gold) !important;
    }

    body #gnb_open,
    body #user_btn,
    body #gnb_close,
    body #user_close {
        background: var(--cs-gold) !important;
        color: #111 !important;
    }

    body #gnb.hd_div,
    body #user.hd_div {
        background: var(--cs-panel-soft) !important;
        color: var(--cs-text) !important;
        border-color: var(--cs-line) !important;
    }

    body #gnb_1dul .gnb_1dli,
    body #gnb_1dul .gnb_1da,
    body .gnb_2dul,
    body .gnb_2da {
        background: var(--cs-panel-soft) !important;
        color: var(--cs-text) !important;
        border-color: var(--cs-line) !important;
    }

    body #gnb_1dul .gnb_1da:hover,
    body .gnb_2da:hover {
        color: var(--cs-gold-bright) !important;
    }

    body .btn_gnb_op {
        background: transparent !important;
        color: var(--cs-gold-bright) !important;
    }

    body .btn_gnb_op:after {
        color: var(--cs-gold-bright) !important;
    }

    body #hd_nb a {
        background: #303030 !important;
        color: var(--cs-text) !important;
    }

    #hd.tanga-hd .tanga-main {
        min-height: 70px !important;
        height: auto !important;
    }

    #hd.tanga-hd .tanga-nav {
        border-top: 1px solid #363636;
    }

    #hd.tanga-hd .tanga-menu > li > a,
    #hd.tanga-hd .tanga-menu-btn {
        height: 50px !important;
        line-height: 50px !important;
        padding: 0 15px !important;
        font-size: 15px !important;
    }

    #container_wr {
        padding: 18px 14px 36px !important;
    }

    #container_title {
        padding: 17px 18px !important;
        font-size: 21px !important;
    }

    #bo_list,
    #bo_v,
    #bo_w {
        padding: 16px !important;
    }
}

@media (max-width: 640px) {
    html,
    body {
        font-size: 14px !important;
    }

    #container_wr {
        padding: 14px 10px 30px !important;
    }

    #container_title {
        margin-bottom: 14px !important;
        padding: 14px 15px !important;
        font-size: 19px !important;
        border-radius: 8px !important;
    }

    #bo_list,
    #bo_v,
    #bo_w {
        padding: 12px !important;
        border-radius: 8px !important;
    }

    #bo_v_title .bo_v_tit {
        font-size: 22px !important;
    }

    #bo_v_con {
        font-size: 15px !important;
    }
}