@charset "utf-8";
/* ============================================================
   납북귀환어부 피해회복 상담신청 게시판 스킨
   ============================================================ */
.cs_wrap {--cs-main:#0b3d6b; --cs-main-l:#e8f0f8; --cs-line:#dfe3e8; --cs-bg:#f7f9fb; --cs-txt:#222; --cs-sub:#6b7480; --cs-wait:#e07b00; --cs-done:#1f8a4c;
    position:relative;margin:0 auto 30px;color:var(--cs-txt);font-size:15px;line-height:1.6;box-sizing:border-box}
.cs_wrap *, .cs_wrap *:before, .cs_wrap *:after {box-sizing:border-box}
.cs_wrap a {text-decoration:none}

/* 버튼 */
.cs_btn {display:inline-flex;white-space:nowrap;flex-shrink:0;align-items:center;gap:6px;height:42px;padding:0 20px;border-radius:4px;font-size:15px;font-weight:bold;cursor:pointer;border:1px solid transparent;vertical-align:middle}
.cs_btn_lg {height:48px;padding:0 26px;font-size:16px}
.cs_btn_primary {background:var(--cs-main);border-color:var(--cs-main);color:#fff !important}
.cs_btn_primary:hover {opacity:.9}
.cs_btn_line {background:#fff;border-color:var(--cs-line);color:#444 !important}
.cs_btn_line:hover {border-color:#aab2bc}
.cs_btn_s {display:inline-block;height:32px;line-height:30px;padding:0 12px;border:1px solid var(--cs-line);border-radius:3px;background:#fff;color:#555 !important;font-size:13px;cursor:pointer}
.cs_btn_s:hover {border-color:#aab2bc;color:#000 !important}

/* 상태 뱃지 */
.cs_state {display:inline-block;min-width:74px;padding:5px 10px;border-radius:30px;font-size:13px;font-weight:bold;text-align:center;line-height:1.3}
.cs_state_wait {background:#fff4e5;color:var(--cs-wait) !important;border:1px solid #ffd9a8}
.cs_state_done {background:#e7f6ee;color:var(--cs-done) !important;border:1px solid #b7e2c8}
a.cs_state_wait:hover {background:var(--cs-wait);color:#fff !important}

/* ───────── 목록 ───────── */
.cs_list_intro {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 25px;margin-bottom:20px;background:var(--cs-main-l);border-radius:6px}
.cs_list_intro p {margin:0;color:#334}
.cs_list_top {display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.cs_total {color:var(--cs-sub);font-size:14px}
.cs_total b {color:var(--cs-main)}
.cs_list_btns {display:flex;gap:5px}

.cs_tbl table {width:100%;border-collapse:collapse;border-top:2px solid var(--cs-main)}
.cs_tbl th {padding:13px 8px;background:var(--cs-bg);border-bottom:1px solid var(--cs-line);font-weight:bold;font-size:14px;color:#333;text-align:center}
.cs_tbl td {padding:14px 8px;border-bottom:1px solid #eceff2;text-align:center;font-size:14px;color:#555}
.cs_tbl tbody tr:hover td {background:#fafcfe}
.cs_tbl .cs_td_chk {width:40px}
.cs_tbl .cs_td_num {width:70px}
.cs_tbl .cs_td_name {width:90px}
.cs_tbl .cs_td_type {width:100px}
.cs_tbl .cs_td_date {width:110px}
.cs_tbl .cs_td_state {width:110px}
.cs_tbl td.cs_td_subject {text-align:left}
.cs_tbl td.cs_td_subject a {color:#222;font-weight:bold}
.cs_tbl td.cs_td_subject a:hover {color:var(--cs-main);text-decoration:underline}
.cs_lock {display:inline-block;width:18px;height:18px;line-height:18px;margin-right:4px;border-radius:3px;background:#e8edf2;color:#6b7c8c;font-size:11px;text-align:center;vertical-align:1px}
.cs_new {display:inline-block;margin-left:4px;padding:0 4px;border-radius:2px;background:#e6f9ee;color:#1fb866;font-size:11px;font-weight:bold;line-height:16px}
.cs_m_meta {display:none}
.cs_tr_notice td {background:#fff8fb}
.cs_notice {color:#e0306a}
.cs_current {color:#e8180c;font-weight:bold}
.cs_empty {padding:80px 0 !important;color:#999}

.cs_sch {margin:25px 0 0;text-align:center}
.cs_sch form {display:inline-flex;gap:5px}
.cs_sch .frm_input {width:240px;height:32px;border:1px solid var(--cs-line);border-radius:3px;padding:0 10px}

/* ───────── 글쓰기 ───────── */
.cs_head {margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid var(--cs-main)}
.cs_head h2 {margin:0 0 6px;font-size:22px;color:var(--cs-main)}
.cs_head p {margin:0;color:var(--cs-sub);font-size:14px}

.cs_form {width:100%;border-collapse:collapse;border-top:1px solid #c9d0d8}
.cs_form th {width:150px;padding:14px 15px;background:var(--cs-bg);border-bottom:1px solid var(--cs-line);text-align:left;font-weight:bold;font-size:14px;vertical-align:top;line-height:40px}
.cs_form td {padding:10px 15px;border-bottom:1px solid var(--cs-line)}
.cs_form em {color:#d33;font-style:normal;margin-left:3px}
.cs_form .frm_input {height:42px;border:1px solid #ccd2d9;border-radius:3px;padding:0 12px;font-size:15px;background:#fff}
.cs_form .frm_input:focus {border-color:var(--cs-main);outline:0;box-shadow:0 0 0 3px rgba(11,61,107,.1)}
.cs_form .cs_full {width:100%}
.cs_form .cs_half {width:100%;max-width:320px}
.cs_form textarea {width:100%;min-height:260px;padding:12px;border:1px solid #ccd2d9;border-radius:3px;font-size:15px;line-height:1.7}
.cs_help {margin:6px 0 0;color:var(--cs-sub);font-size:13px}
.cs_radio {display:flex;flex-wrap:wrap;gap:8px;line-height:1.4;padding:4px 0}
.cs_radio label {display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid #ccd2d9;border-radius:30px;cursor:pointer;background:#fff}
.cs_radio label:has(input:checked) {border-color:var(--cs-main);background:var(--cs-main-l);color:var(--cs-main);font-weight:bold}
.cs_file {margin:4px 0 10px}
.cs_file .frm_input {margin-top:5px}
.cs_file_del {display:block;margin-top:5px;font-size:13px;color:#777}
.cs_notify {line-height:40px;cursor:pointer}

.cs_agree {margin:25px 0 0;padding:20px;border:1px solid var(--cs-line);border-radius:6px;background:var(--cs-bg)}
.cs_agree h3 {margin:0 0 10px;font-size:16px}
.cs_agree_txt {max-height:160px;overflow-y:auto;padding:14px;background:#fff;border:1px solid var(--cs-line);border-radius:4px;font-size:13px;color:#555;line-height:1.8}
.cs_agree_chk {display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:bold;cursor:pointer}
.cs_agree_chk input {width:18px;height:18px}
.cs_agree_chk em {color:#d33;font-style:normal}

.cs_captcha {margin:20px 0 0}
.cs_btns {margin:30px 0 0;text-align:center;display:flex;gap:8px;justify-content:center}

/* 답변 작성 시 원글 요약 */
.cs_q_summary {margin:0 0 25px;padding:20px;border:1px solid var(--cs-line);border-left:4px solid var(--cs-wait);border-radius:4px;background:#fffdf9}
.cs_q_label {font-size:12px;font-weight:bold;color:var(--cs-wait);margin-bottom:4px}
.cs_q_tit {font-size:17px;font-weight:bold;margin-bottom:8px}
.cs_q_meta {display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 12px;padding:0;list-style:none;font-size:13px;color:var(--cs-sub)}
.cs_q_meta b {color:#333;margin-left:3px}
.cs_q_con {max-height:260px;overflow-y:auto;padding:12px;background:#fff;border:1px solid #eee;font-size:14px}

/* ───────── 상세보기 ───────── */
.cs_v_top {display:flex;justify-content:flex-end;gap:6px;margin-bottom:12px}
.cs_v_bot {margin-top:25px;text-align:center}
.cs_box {margin:0 0 20px;padding:25px 28px;border:1px solid var(--cs-line);border-radius:6px;background:#fff}
.cs_box_head {display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #eceff2}
.cs_v_tit {flex:1;margin:0;font-size:20px;line-height:1.4;word-break:break-all}
.cs_badge_q, .cs_badge_a {flex:0 0 38px;height:38px;line-height:38px;border-radius:50%;text-align:center;font-weight:bold;font-size:18px;color:#fff}
.cs_badge_q {background:var(--cs-main)}
.cs_badge_a {background:var(--cs-done)}
.cs_a_date {color:var(--cs-sub);font-size:13px}

.cs_info {width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px}
.cs_info th {width:110px;padding:9px 12px;background:var(--cs-bg);border:1px solid #eceff2;text-align:left;color:#555;font-weight:normal}
.cs_info td {padding:9px 12px;border:1px solid #eceff2}
.cs_type {display:inline-block;padding:1px 10px;border-radius:3px;background:var(--cs-main-l);color:var(--cs-main);font-weight:bold;font-size:13px}

.cs_con {min-height:120px;line-height:1.8;word-break:break-all;overflow:hidden}
.cs_con img {max-width:100%;height:auto}
.cs_a {border-color:#b7e2c8;background:#fbfefc}
.cs_a_con a {color:var(--cs-main);text-decoration:underline}
.cs_a_imgs {margin:15px 0}
.cs_a_imgs img {max-width:100%;height:auto;margin-bottom:10px}
.cs_a_notice {margin:20px 0 0;padding-top:12px;border-top:1px dashed #d6e7dc;color:var(--cs-sub);font-size:13px}
.cs_a_wait {text-align:center;padding:40px 20px;background:#fffdf8;border-style:dashed}
.cs_a_wait p {margin:0 0 12px;color:#666}

.cs_files {margin:18px 0 0;padding:12px 15px;list-style:none;background:var(--cs-bg);border-radius:4px;font-size:14px}
.cs_files li {padding:4px 0}
.cs_files li span {color:#999;font-size:12px}
.cs_files a {color:#333}
.cs_files a:hover {color:var(--cs-main);text-decoration:underline}
.cs_files .cs_files_tit {font-weight:bold;color:#555}
.cs_q_act {margin-top:18px;text-align:right;display:flex;gap:5px;justify-content:flex-end}
.cs_redirect {padding:40px;text-align:center}

/* 그누보드 기본 페이징 보정 */
.cs_list .pg_wrap {margin:25px 0 0;text-align:center;float:none;display:block}

/* ───────── 모바일 ───────── */
@media (max-width:768px) {
    .cs_wrap {font-size:14px}
    .cs_list_intro {flex-direction:column;align-items:stretch;padding:18px}
    .cs_list_intro .cs_btn {justify-content:center}
    .cs_tbl .cs_td_name, .cs_tbl .cs_td_type, .cs_tbl .cs_td_date {display:none}
    .cs_tbl .cs_td_num {width:44px;font-size:12px}
    .cs_tbl .cs_td_state {width:86px}
    .cs_state {min-width:0;padding:4px 8px;font-size:12px}
    .cs_m_meta {display:block;margin-top:4px;color:#999;font-size:12px;font-weight:normal}

    .cs_form, .cs_form tbody, .cs_form tr, .cs_form th, .cs_form td {display:block;width:100%}
    .cs_form th {border-bottom:0;padding:12px 12px 0;line-height:1.4;background:none}
    .cs_form td {padding:8px 12px 14px}
    .cs_form .cs_half {max-width:none}

    .cs_box {padding:18px 16px}
    .cs_v_tit {font-size:17px}
    .cs_box_head {flex-wrap:wrap}
    .cs_info th {width:80px;padding:8px}
    .cs_info, .cs_info tbody, .cs_info tr {display:block;width:100%}
    .cs_info tr {display:grid;grid-template-columns:80px 1fr}
    .cs_info th, .cs_info td {display:block;width:auto}
    .cs_sch .frm_input {width:180px}
}