@charset "utf-8";

/* 그누보드 공통 스킨(게시판/글쓰기/검색)을 카토존 테마에 맞춰 재정의
   - 모든 규칙은 .kz-sub 하위로 한정해 관리자/기타 영역에 영향 없음 */

.kz-sub {
    font-size: 15px;
    color: var(--kz-ink-90);
}

/* 공통 컨테이너 카드 — kz-board-panel / QA·view 전용 shell 은 제외 */
.kz-sub .bo_w,
.kz-sub #bo_list:not(.kz-board-panel),
.kz-sub #bo_gall:not(.kz-board-panel),
.kz-sub #bo_v:not(.kz-qa-view):not(.kz-bo-view),
.kz-sub #bo_w:not(.kz-write-page) {
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-radius);
    box-shadow: var(--kz-shadow-sm);
    padding: 20px 22px;
    margin-bottom: 16px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .kz-sub .bo_w,
    .kz-sub #bo_list:not(.kz-board-panel),
    .kz-sub #bo_gall:not(.kz-board-panel),
    .kz-sub #bo_v:not(.kz-qa-view):not(.kz-bo-view),
    .kz-sub #bo_w:not(.kz-write-page) {
        padding: 14px;
        border-radius: var(--kz-radius-sm);
    }
}

/* 게시판 상단 헤더(글 수 / 페이지) */
.kz-sub .bo_fx,
.kz-sub .bo_cate,
.kz-sub #bo_cate {
    margin-bottom: 14px;
}
.kz-sub .bo_cate ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.kz-sub .bo_cate li a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--kz-cream);
    color: var(--kz-ink-70);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all .15s;
}
.kz-sub .bo_cate li a:hover { background: var(--kz-coral-soft); color: var(--kz-coral-deep); }
.kz-sub .bo_cate li.bo_cate_on a,
.kz-sub .bo_cate li a.bo_cate_on {
    background: var(--kz-coral);
    color: #fff;
}

.kz-sub .bo_fx { float: none; margin: 0; }
.kz-sub .btn_bo_user {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    float: none;
}
.kz-sub .btn_bo_user li {
    list-style: none;
    float: none;
    width: auto;
    background: transparent;
    margin: 0;
}
/* 글 보기 하단 버튼 그룹 */
.kz-sub .bo_v_com { float: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.kz-sub .bo_v_com > li { float: none; margin: 0; list-style: none; }

/* 페이지 타이틀 */
.kz-sub h1,
.kz-sub h2,
.kz-sub .bo_v_tit,
.kz-sub #bo_v_title {
    color: var(--kz-charcoal);
}

/* ───────── 버튼 통일 ───────── */
.kz-sub .btn,
.kz-sub .btn_b01,
.kz-sub .btn_b02,
.kz-sub .btn_admin,
.kz-sub .btn_bo_adm a,
.kz-sub .btn_bo_user a,
.kz-sub input[type="submit"],
.kz-sub button[type="submit"],
.kz-sub a.btn_submit,
.kz-sub button.btn_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, background .15s;
    white-space: nowrap;
    text-decoration: none;
}

/* primary */
.kz-sub .btn_b01,
.kz-sub a.btn_submit,
.kz-sub button.btn_submit,
.kz-sub input[type="submit"],
.kz-sub button[type="submit"],
.kz-sub .btn_bo_user .btn_b01 {
    background: var(--kz-coral);
    color: #fff;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .25);
}
.kz-sub .btn_b01:hover,
.kz-sub a.btn_submit:hover,
.kz-sub button.btn_submit:hover,
.kz-sub input[type="submit"]:hover,
.kz-sub button[type="submit"]:hover { background: var(--kz-coral-deep); transform: translateY(-1px); }

/* secondary / outline */
.kz-sub .btn_b02,
.kz-sub .btn_bo_user a:not(.btn_b01),
.kz-sub a.btn_cancel,
.kz-sub button.btn_cancel {
    background: var(--kz-surface);
    color: var(--kz-ink-70);
    border-color: var(--kz-line);
}
.kz-sub .btn_b02:hover,
.kz-sub .btn_bo_user a:not(.btn_b01):hover { background: var(--kz-cream); color: var(--kz-charcoal); }

.kz-sub .btn_admin,
.kz-sub .btn_bo_adm a {
    background: var(--kz-charcoal-2);
    color: #fff;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
}
.kz-sub .btn_bo_adm { display: flex; gap: 6px; flex-wrap: wrap; }

/* 글쓰기 플로팅 버튼처럼 강조 */
.kz-sub .bo_fx + .tbl_head01 ~ .btn_bo_user .btn_b01,
.kz-sub .write_div .btn_b01 { box-shadow: 0 8px 20px rgba(124, 58, 237, .3); }

/* ───────── 목록 테이블 ───────── */
.kz-sub .tbl_head01 { width: 100%; }
.kz-sub .tbl_head01 table { width: 100%; border-collapse: collapse; }
.kz-sub .tbl_head01 caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.kz-sub .tbl_head01 thead th {
    padding: 12px 8px;
    background: var(--kz-cream);
    color: var(--kz-ink-70);
    font-size: 13px;
    font-weight: 700;
    border: 0;
    border-bottom: 2px solid var(--kz-line);
    text-align: center;
}
.kz-sub .tbl_head01 thead th:first-child { border-top-left-radius: 10px; }
.kz-sub .tbl_head01 thead th:last-child { border-top-right-radius: 10px; }
.kz-sub .tbl_head01 tbody td {
    padding: 14px 8px;
    border: 0;
    border-bottom: 1px solid var(--kz-line);
    font-size: 14px;
    color: var(--kz-ink-70);
    text-align: center;
    vertical-align: middle;
}
.kz-sub .tbl_head01 tbody tr:hover td { background: var(--kz-coral-soft); }
.kz-sub .tbl_head01 .td_subject,
.kz-sub .tbl_head01 .td_num,
.kz-sub .tbl_head01 td.td_subject { text-align: left; }
.kz-sub .bo_tit a,
.kz-sub .td_subject a {
    color: var(--kz-ink-90);
    font-weight: 600;
}
.kz-sub .bo_tit a:hover { color: var(--kz-coral-deep); }
.kz-sub .bo_notice td { background: var(--kz-coral-soft); }
.kz-sub .bo_notice .bo_tit a { color: var(--kz-coral-deep); font-weight: 700; }

.kz-sub .cnt_cmt,
.kz-sub .cnt_cmt02 {
    display: inline-flex;
    align-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--kz-coral);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* 모바일 카드형 리스트 보정 */
@media (max-width: 640px) {
    .kz-sub .tbl_head01 thead { display: none; }
    .kz-sub .tbl_head01 table,
    .kz-sub .tbl_head01 tbody,
    .kz-sub .tbl_head01 tr { display: block; width: 100%; }
    .kz-sub .tbl_head01 tbody tr {
        padding: 12px 4px;
        border-bottom: 1px solid var(--kz-line);
    }
    .kz-sub .tbl_head01 tbody td {
        display: inline;
        padding: 0;
        border: 0;
        font-size: 12px;
        color: var(--kz-ink-50);
    }
    .kz-sub .tbl_head01 td.td_subject,
    .kz-sub .tbl_head01 td.td_subject2 {
        display: block;
        font-size: 15px;
        margin-bottom: 6px;
    }
    .kz-sub .tbl_head01 td.td_num,
    .kz-sub .tbl_head01 td.td_numbig { display: none; }
    .kz-sub .tbl_head01 td.td_name::after,
    .kz-sub .tbl_head01 td.td_date::after,
    .kz-sub .tbl_head01 td.td_datetime::after { content: '·'; margin: 0 6px; color: var(--kz-ink-30); }
    .kz-sub .tbl_head01 td.td_hit::before { content: '조회 '; }
}

/* ───────── 페이지네이션 ───────── */
.kz-sub .pg_wrap { display: flex; justify-content: center; margin: 20px 0 4px; }
.kz-sub .pg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.kz-sub .pg_page,
.kz-sub .pg_current,
.kz-sub strong.pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 10px;
    border: 1px solid var(--kz-line);
    background: var(--kz-surface);
    color: var(--kz-ink-70);
    font-weight: 600;
    text-decoration: none;
}
.kz-sub .pg_page:hover { background: var(--kz-cream); color: var(--kz-charcoal); }
.kz-sub .pg_current,
.kz-sub strong.pg_current {
    background: var(--kz-coral);
    border-color: var(--kz-coral);
    color: #fff;
}

/* ───────── 검색 박스 ───────── */
.kz-sub .bo_sch fieldset { border: 0; margin: 0; padding: 0; }
.kz-sub .bo_sch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.kz-sub .bo_sch select,
.kz-sub .bo_sch input[type="text"],
.kz-sub .kz-sub select,
.kz-sub input[type="text"],
.kz-sub input[type="password"],
.kz-sub input[type="email"],
.kz-sub input[type="number"],
.kz-sub textarea:not([hidden]) {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--kz-line);
    border-radius: 10px;
    background: var(--kz-surface);
    font-size: 14px;
    color: var(--kz-ink-90);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.kz-sub textarea:not([hidden]) { height: auto; padding: 12px; line-height: 1.6; }
.kz-sub input:focus,
.kz-sub select:focus,
.kz-sub textarea:not([hidden]):focus {
    border-color: var(--kz-coral);
    box-shadow: 0 0 0 3px var(--kz-coral-soft);
}

/* ───────── 글 보기 ───────── */
.kz-sub #bo_v_title,
.kz-sub .bo_v_tit {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
    margin: 4px 0 12px;
}
.kz-sub #bo_v_info,
.kz-sub .bo_v_info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--kz-line);
    color: var(--kz-ink-50);
    font-size: 13px;
}

.kz-sub #bo_v_info .profile_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.kz-sub #bo_v_info .pf_img img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.kz-sub #bo_v_info .profile_info_ct {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--kz-ink-70);
}

.kz-sub #bo_v_info .profile_info_ct strong {
    color: var(--kz-charcoal);
    font-weight: 700;
}
.kz-sub #bo_v_con,
.kz-sub .bo_v_con {
    padding: 22px 2px;
    min-height: 160px;
    line-height: 1.8;
    font-size: 15px;
    color: var(--kz-ink-90);
    word-break: break-word;
}
.kz-sub #bo_v_con img { max-width: 100%; height: auto; border-radius: var(--kz-radius-sm); }

/* 댓글 */
.kz-sub #bo_vc,
.kz-sub .bo_vc {
    background: var(--kz-cream);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-radius);
    padding: 18px;
    margin-top: 16px;
}
.kz-sub .cmt_contents { line-height: 1.7; }

/* 빈 목록 */
.kz-sub .empty_table,
.kz-sub .empty_list {
    padding: 48px 16px;
    text-align: center;
    color: var(--kz-ink-50);
}