@charset "utf-8";
/* =====================================================================
   기본 — 초기화 · 글자 · 그누보드 공통 클래스
   (그누보드 css/default.css 는 불러오지 않고, 필요한 공통 클래스만 여기서 다시 정한다)
   ===================================================================== */

/* ---------- 초기화 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
    background: var(--c-bg);
    word-break: keep-all;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, iframe { max-width: 100%; }
img { height: auto; border: 0; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-primary-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
address { font-style: normal; }
hr { height: 1px; margin: var(--sp-6) 0; border: 0; background: var(--c-line); }
legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

:focus-visible { outline: 3px solid var(--c-secondary); outline-offset: 2px; }
::selection { background: var(--c-primary-soft); color: var(--c-primary-strong); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- 화면낭독기 전용 ---------- */
.sound_only,
.msg_sound_only,
#hd_login_msg {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.is-hidden { display: none !important; }
.is-visible { display: block !important; }
.pc-only { display: none; }
.mobile-only { display: block; }
@media (min-width: 769px) {
    .pc-only { display: block !important; }
    .mobile-only { display: none !important; }
}
.placeholdersjs { color: #9aa1ad !important; }
.img_fix { width: 100%; height: auto; }

/* ---------- 입력칸 ---------- */
.frm_input,
.form-control,
.tbl_frm01 textarea,
.form_01 textarea,
.write_div textarea,
.bo_vc_w textarea {
    max-width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-text);
    font-size: var(--fs-base);
    line-height: 1.4;
    vertical-align: middle;
    transition: border-color .15s, box-shadow .15s;
}

textarea.frm_input,
.tbl_frm01 textarea,
.form_01 textarea,
.write_div textarea,
.bo_vc_w textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
}

select,
select.frm_input {
    min-height: 44px;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    appearance: none;
}

.frm_input:focus,
.form-control:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--c-secondary);
    box-shadow: var(--focus-ring);
}

.frm_input[readonly] { background: var(--c-bg-soft); }
.full_input { width: 100%; }
.half_input { width: calc(50% - 4px); }
.twopart_input { width: 100%; max-width: 385px; }
@media (max-width: 640px) {
    .half_input { width: 100%; }
}

/* 체크박스 · 라디오 (그누보드 .chk_box 구조) */
.selec_chk,
.chk_box input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.chk_box { position: relative; }

.chk_box input[type="checkbox"] + label,
.chk_box input[type="radio"] + label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    color: var(--c-text-sub);
    cursor: pointer;
    vertical-align: middle;
}

.chk_box input[type="checkbox"] + label span,
.chk_box input[type="radio"] + label span {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    float: none;
    flex: 0 0 auto;
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--c-line-strong);
    border-radius: 0;
    background: #fff;
}

.chk_box input[type="radio"] + label span { border-radius: 50%; }

.chk_box input:checked + label { color: var(--c-text); }

.chk_box input:checked + label span {
    border-color: var(--c-primary);
    background: var(--c-primary);
}

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

.chk_box input[type="radio"]:checked + label span::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}

.chk_box input:focus-visible + label span { box-shadow: var(--focus-ring); }

/* ---------- 버튼 ---------- */
.btn,
.btn_submit,
.btn_close,
a.btn_close,
.btn_cancel,
a.btn_cancel,
.btn_frmline,
a.btn_frmline,
a.btn01, button.btn01,
a.btn02, button.btn02,
.btn_b02, a.btn_b02,
.btn_b03, a.btn_b03,
.btn_b04, a.btn_b04,
.reg_btn_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.btn_submit,
.btn--primary,
.reg_btn_submit {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.btn_submit:hover,
.btn--primary:hover,
.reg_btn_submit:hover {
    background: var(--c-primary-strong);
    border-color: var(--c-primary-strong);
    color: #fff;
}

.btn_close, a.btn_close,
.btn--outline,
a.btn01, button.btn01,
.btn_b03, a.btn_b03,
.btn_b04, a.btn_b04 {
    background: #fff;
    border-color: var(--c-line-strong);
    color: var(--c-text);
}
.btn_close:hover,
.btn--outline:hover,
a.btn01:hover, button.btn01:hover,
.btn_b03:hover,
.btn_b04:hover {
    border-color: var(--c-text);
    color: var(--c-text);
}

.btn_cancel, a.btn_cancel,
.btn--gray {
    background: #6b7280;
    border-color: #6b7280;
    color: #fff;
}
.btn_cancel:hover,
.btn--gray:hover {
    background: #4b5563;
    border-color: #4b5563;
    color: #fff;
}

.btn_frmline, a.btn_frmline,
a.btn02, button.btn02,
.btn_b02, a.btn_b02,
.btn--dark {
    background: var(--c-bg-dark);
    border-color: var(--c-bg-dark);
    color: #fff;
}
.btn_frmline:hover,
a.btn02:hover,
.btn_b02:hover,
.btn--dark:hover {
    background: #000;
    color: #fff;
}

.btn_b01, a.btn_b01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--c-text-muted);
}
.btn_b01:hover { color: var(--c-text); }

.btn_admin, a.btn_admin { color: var(--c-danger); }
.btn_admin:hover { color: #9b1c1c; }

.btn--sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-sm); }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }

.btn_confirm {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
}

/* ---------- 표 ---------- */
.tbl_wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tbl_wrap table {
    width: 100%;
    background: #fff;
    border-top: 2px solid var(--c-text);
}

.tbl_wrap caption {
    padding: var(--sp-3) 0;
    font-weight: 700;
    text-align: left;
}

.tbl_head01 caption,
.tbl_head02 caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.tbl_head01 thead th,
.tbl_head02 thead th {
    height: auto;
    padding: 14px 10px;
    border-bottom: 1px solid var(--c-line-strong);
    background: var(--c-bg-soft);
    color: var(--c-text-sub);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.tbl_head01 thead th a,
.tbl_head02 thead th a { color: inherit; }

.tbl_head01 td,
.tbl_head02 td {
    height: auto;
    padding: 14px 10px;
    border-top: 0;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text-sub);
    line-height: 1.5;
}

.tbl_head01 tbody tr:hover td { background: #fafbfc; }

.tbl_frm01 { margin: 0 0 var(--sp-5); }
.tbl_frm01 table { width: 100%; border-top: 2px solid var(--c-text); }

.tbl_frm01 th {
    width: 140px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    background: var(--c-bg-soft);
    font-weight: 600;
    text-align: left;
    vertical-align: middle;
}

.tbl_frm01 td {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--c-line);
}

.frm_info,
.tbl_frm01 .frm_info {
    display: block;
    margin-top: 6px;
    padding: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.td_board, .td_category, .td_group { width: 100px; text-align: center; }
.td_chk { width: 44px; text-align: center; }
.td_date { width: 90px; text-align: center; }
.td_datetime { width: 110px; text-align: center; }
.td_mb_id, .td_nick { width: 110px; text-align: center; }
.td_mng, .td_stat { width: 80px; text-align: center; }
.td_name { width: 120px; text-align: center; }
.td_num, .td_num2 { width: 70px; text-align: center; }
.td_numbig { width: 90px; text-align: center; }

.empty_table { padding: 60px 0 !important; color: var(--c-text-muted); text-align: center; }
.empty_list { padding: 40px 0 !important; color: var(--c-text-muted); text-align: center; }

.txt_active { color: var(--c-success); }
.txt_done { color: var(--c-danger); }
.txt_expired { color: #9aa1ad; }
.txt_rdy { color: var(--c-warning); }

/* ---------- 기본 목록 · 폼 목록 ---------- */
.list_01 ul { border-top: 1px solid var(--c-line); }
.list_01 li {
    position: relative;
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-line);
    background: #fff;
}
.list_01 li.empty_li { padding: 32px 0; color: var(--c-text-muted); text-align: center; }

.form_01 ul { display: grid; gap: var(--sp-4); }
.form_01 li { list-style: none; }
.form_01 h2 { font-size: var(--fs-md); }
.form_01 .frm_label { display: block; margin-bottom: 6px; font-weight: 600; }
.form_01 .left_input { float: none; }
.form_01 .margin_input { margin-right: 0; }

/* ---------- 쪽번호 ---------- */
.pg_wrap {
    display: flex;
    justify-content: center;
    clear: both;
    width: 100%;
    margin: var(--sp-6) 0 0;
}

/* 옛 활동처현황 게시판처럼 작은 네모 칸 (옛 30px 보다 조금 크게 — 손가락으로 누르기 좋게) */
.pg {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.pg_page,
.pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: 1;
}

.pg_page:hover { border-color: var(--c-text); background: #fafafa; color: var(--c-text); }

.pg_current {
    border-color: var(--c-text);
    background: var(--c-text);
    color: #fff;
    font-weight: 700;
}

.pg_start, .pg_prev, .pg_next, .pg_end {
    font-size: 0;
    text-indent: 0;
}
.pg_start::before, .pg_prev::before, .pg_next::before, .pg_end::before {
    font-size: 18px;
    line-height: 1;
}
.pg_start::before { content: "\00AB"; }
.pg_prev::before { content: "\2039"; }
.pg_next::before { content: "\203A"; }
.pg_end::before { content: "\00BB"; }

/* ---------- 사이드뷰 (이름 누르면 뜨는 메뉴) ---------- */
.sv_wrap { position: relative; font-weight: normal; }
.sv_wrap .sv {
    z-index: 1000;
    display: none;
    margin: 6px 0 0;
    padding: 6px 0;
    border-radius: var(--radius-sm);
    background: var(--c-bg-dark);
    box-shadow: var(--shadow);
    font-size: var(--fs-sm);
}
.sv_wrap .sv a {
    display: block;
    width: 120px;
    padding: 6px 14px;
    color: #d1d5db;
}
.sv_wrap .sv a:hover { background: #000; color: #fff; }
.sv_member { color: var(--c-text); }
.sv_on { display: block !important; position: absolute; top: 24px; left: 0; width: auto; height: auto; }
.sv_nojs .sv { display: block; }

/* ---------- 자동등록방지 ---------- */
#captcha {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#captcha legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#captcha #captcha_img {
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
}
#captcha #captcha_mp3,
#captcha #captcha_reload {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: #fff url('../../../img/captcha2.png') no-repeat 1px 1px;
    text-indent: -999px;
    vertical-align: middle;
    cursor: pointer;
}
#captcha #captcha_reload { background-position: 1px -39px; }
#captcha #captcha_key {
    width: 100px;
    height: 44px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
    text-align: center;
}
#captcha #captcha_info {
    display: block;
    flex-basis: 100%;
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

/* ---------- 새창 (쪽지 · 스크랩 · 메일 등) ---------- */
.new_win { position: relative; padding-bottom: var(--sp-5); }
.new_win #win_title {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-line);
    background: #fff;
    font-size: var(--fs-md);
    line-height: 1.4;
}
.new_win #win_title .sv { font-size: var(--fs-sm); }
.new_win .new_win_con { margin: var(--sp-4) 0; padding: 0 20px; }
.new_win .new_win_con2 { margin: var(--sp-4) 0; }
.new_win .tbl_wrap { margin: 0 20px; }
.new_win .win_ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--sp-4) 0;
    padding: 0 20px;
}
.new_win .win_ul li { float: none; margin: 0; padding: 0; border: 0; }
.new_win .win_ul li a {
    display: block;
    padding: 8px 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    color: var(--c-text-sub);
}
.new_win .win_ul .selected { background: none; }
.new_win .win_ul .selected a {
    border-color: var(--c-primary);
    background: var(--c-primary);
    color: #fff;
    font-weight: 700;
}
.new_win .win_desc {
    position: relative;
    margin: var(--sp-3) 20px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--c-primary-soft);
    color: var(--c-primary-strong);
    line-height: 1.5;
}
.new_win .win_desc::after { display: none; }
.new_win .win_total { float: right; color: var(--c-text-muted); font-size: var(--fs-sm); }
.new_win .win_btn {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}
.new_win .btn_close,
.new_win .btn_submit { min-width: 100px; }

/* 선택복사 · 선택이동 */
#copymove .win_desc { text-align: center; }
#copymove .tbl_wrap { margin: 20px; }
#copymove .win_btn { padding: 0 20px 20px; }
.copymove_current {
    float: right;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--c-primary);
    color: #fff;
    font-size: var(--fs-xs);
}
.copymove_currentbg { background: var(--c-bg-soft); }

/* ---------- 기타 ---------- */
.sch_word {
    margin: 0 2px;
    padding: 1px 4px;
    border-radius: 0;
    background: #fff3a3;
    color: var(--c-text);
}

#validation_check { max-width: 500px; margin: 100px auto; padding: 0 var(--gutter); }
#validation_check h1 { margin-bottom: 20px; font-size: var(--fs-lg); }
#validation_check p {
    margin-bottom: 20px;
    padding: 30px 20px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: #fff;
}

.tooltip_icon {
    display: inline-block;
    border: 0;
    background: transparent;
    color: #9aa1ad;
    font-size: 1.2em;
    vertical-align: baseline;
    cursor: pointer;
}
.tooltip_icon:hover { color: var(--c-secondary); }
.tooltip {
    position: absolute;
    z-index: 9;
    display: none;
    width: auto;
    margin: 10px 0 0 15px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--c-bg-dark);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: normal;
    line-height: 1.5;
}

.cheditor-popup-window *,
.cheditor-popup-window ::after,
.cheditor-popup-window ::before { box-sizing: content-box; }