@charset "utf-8";

/* 게시판 목록 */
#bo_list {position:relative;margin-bottom:20px}
#bo_list:after {display:block;visibility:hidden;clear:both;content:""}
#bo_list .td_board {width:120px;text-align:center}
#bo_list .td_chk {width:30px;text-align:center;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1}
#bo_list .td_date {width:60px;text-align:center}
#bo_list .td_datetime {width:60px;text-align:center}
#bo_list .td_group {width:100px;text-align:center}
#bo_list .td_mb_id {width:100px;text-align:center}
#bo_list .td_mng {width:80px;text-align:center}
#bo_list .td_name {width:90px;text-align:left;padding:10px 0}
#bo_list .td_nick {width:100px;text-align:center}
#bo_list .td_num {width:50px;text-align:center}
#bo_list .td_num2 {width:50px;text-align:center}
#bo_list .td_numbig {width:80px;text-align:center}
#bo_list .txt_active {color:#5d910b}
#bo_list .txt_expired {color:#ccc}

/* 게시판 분류 탭(#bo_cate) - 사이트 공통 브랜드 컬러(--suda-blue)와 다른 곳(버튼/배지 등)과
   동일한 플랫 알약 톤으로 통일. 이전엔 여기만 다른 블루(#3a8afd)에 inset 그림자가 있었음 */
#bo_cate {margin:25px 0}
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {zoom:1;display:flex;flex-wrap:wrap;gap:8px}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {display:inline-block;padding:0}
#bo_cate a {display:block;line-height:28px;padding:5px 16px;border-radius:30px;border:1px solid var(--suda-gray-200, #d9dce1);background:#fff;color:var(--suda-gray-700, #444);font-weight:600;transition:background .15s ease,border-color .15s ease,color .15s ease}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none;background:var(--suda-gray-50, #f5f6f8);border-color:var(--suda-gray-200, #d9dce1);color:var(--suda-gray-700, #444)}
#bo_cate #bo_cate_on {background:var(--suda-blue, #4154ff);color:#fff;font-weight:700;border:1px solid var(--suda-blue, #4154ff)}
#bo_cate #bo_cate_on:focus, #bo_cate #bo_cate_on:hover, #bo_cate #bo_cate_on:active {background:var(--suda-blue-dark, #3443cc);border-color:var(--suda-blue-dark, #3443cc);color:#fff}
.td_subject img {margin-left:5px}

/* 게시판 목록 공통 */
.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box {position:relative}
.chk_box input[type="checkbox"] + label {position:relative;color:#676e70}
.chk_box input[type="checkbox"] + label:hover {color:#2172f8}
.chk_box input[type="checkbox"] + label span {float:left;width:15px;height:15px;display:block;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.write_div .chk_box input[type="checkbox"] + label, .bo_vc_w .chk_box input[type="checkbox"] + label {padding-left:20px}
.write_div .chk_box input[type="checkbox"] + label span, .bo_vc_w .chk_box input[type="checkbox"] + label span {position:absolute;top:2px;left:0;width:15px;height:15px;display:block;margin:0;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.chk_box input[type="checkbox"]:checked + label {color:#000}
.chk_box input[type="checkbox"]:checked + label span {background:url(./img/chk.png) no-repeat 50% 50% #3a8afd;border-color:#1471f6;border-radius:3px}


#bo_btn_top {margin:10px 0}
#bo_btn_top:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx {margin-bottom:5px;float:right;zoom:1}
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx ul {margin:0;padding:0;list-style:none}
#bo_list_total {float:left;line-height:34px;font-size:0.92em;color:#4e546f}

.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;width:40px;text-align:center;margin-left:5px;background:#fff}
.btn_bo_user > li {position:relative}
.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:5px}
.btn_bo_adm input {padding:0 8px;border:0;background:#d4d4d4;color:#666;text-decoration:none;vertical-align:middle}
.bo_notice td {background:#fff6fa !important;border-bottom:1px solid #f8e6ee}
.bo_notice td a {font-weight:bold}
.bo_notice .notice_icon {display:inline-block;line-height:25px;border-radius:5px;font-weight:bold;color:#f9267f}

.more_opt {display:none;position:absolute;top:45px;right:0;background:#fff;border:1px solid #b8bfc4;z-index:999}
.more_opt:before {content:"";position:absolute;top:-8px;right:13px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.more_opt:after {content:"";position:absolute;top:-6px;right:13px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.more_opt li {border-bottom:1px solid #f1f1f1;padding:10px;float:inherit;width:90px;margin:0;color:#6b757c;text-align:left}
.more_opt li:last-child {border-bottom:0}
.more_opt li button, .more_opt li a {width:100%;border:0;background:#fff;color:#6b757c}
.more_opt li:hover a,
.more_opt li:hover button {color:#000}
.more_opt li i {float:right;line-height:20px}

.td_num strong {color:#000}
.bo_cate_link {float:left;display:inline-block;margin-right:10px;background:#eef0ff;color:var(--suda-blue, #4154ff);font-weight:normal !important;height:20px;line-height:10px;padding:5px 8px;border-radius:5px;font-size:0.95em} /* 글제목줄 분류스타일 - 사이트 메인컬러(--suda-blue)로 통일 */
.bo_cate_link:hover {text-decoration:none}
.bo_tit {display:block;color:#000;font-weight:bold}
.bo_current {color:#e8180c}
#bo_list .profile_img img {border-radius:50%}
#bo_list .cnt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}

/* 목록 아이콘(새글/인기글/비밀글/첨부파일/링크) - 크기(16x16 고정 px, 제목 폰트크기와 무관하게 유지)/모양/여백을
   전부 동일하게 통일하고 색상만 의미별로 구분(새글=블루, 인기글=레드, 나머지=그레이).
   예전엔 fa-heart(인기글)만 박스 없이 아이콘만 렌더링돼서 다른 아이콘들과 통일성이 없었음 */
#bo_list .bo_tit .title_icon {margin-right:2px}
#bo_list .bo_tit .new_icon,
#bo_list .bo_tit .fa-heart,
#bo_list .bo_tit .fa-lock,
#bo_list .bo_tit .fa-download,
#bo_list .bo_tit .fa-link {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    text-align: center;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
}
#bo_list .bo_tit .new_icon{ color: var(--suda-blue); background: rgba(65,84,255,.12); font-weight: bold; }
#bo_list .bo_tit .fa-heart{ color: var(--suda-red); background: rgba(251,44,54,.12); }
#bo_list .bo_tit .fa-lock,
#bo_list .bo_tit .fa-download,
#bo_list .bo_tit .fa-link{ color: var(--suda-gray-500); background: var(--suda-gray-100); }
#bo_list .bo_tit .fa-caret-right {color:var(--suda-gray-400)}
@media (max-width: 1024px){
    #bo_list .bo_tit .new_icon,
    #bo_list .bo_tit .fa-heart,
    #bo_list .bo_tit .fa-lock,
    #bo_list .bo_tit .fa-download,
    #bo_list .bo_tit .fa-link{ width: 1.76vw; height: 1.76vw; line-height: 1.76vw; font-size: 1.07vw; margin-left: 0.49vw; }
}
@media (max-width: 768px){
    #bo_list .bo_tit .new_icon,
    #bo_list .bo_tit .fa-heart,
    #bo_list .bo_tit .fa-lock,
    #bo_list .bo_tit .fa-download,
    #bo_list .bo_tit .fa-link{ width: 2.34vw; height: 2.34vw; line-height: 2.34vw; font-size: 1.43vw; margin-left: 0.65vw; }
}
@media (max-width: 480px){
    #bo_list .bo_tit .new_icon,
    #bo_list .bo_tit .fa-heart,
    #bo_list .bo_tit .fa-lock,
    #bo_list .bo_tit .fa-download,
    #bo_list .bo_tit .fa-link{ width: 3.75vw; height: 3.75vw; line-height: 3.75vw; font-size: 2.29vw; margin-left: 1.04vw; }
}

.bo_sch_wrap {display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999}
.bo_sch {position:absolute;top:50%;left:50%;background:#fff;text-align:left;width:330px;max-height:300px;margin-left:-125px;margin-top:-180px;overflow-y:auto;border-radius:5px;-webkit-box-shadow:1px 1px 18px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 18px rgba(0,0,0,0.2);box-shadow:1px 1px 18px rgba(0,0,0,0.2);border:1px solid #dde7e9;background:#fff;border-radius:3px}
.bo_sch:after {display:block;visibility:hidden;clear:both;content:""}
.bo_sch h3 {padding:15px;border-bottom:1px solid #e8e8e8}
.bo_sch legend {background:red}
.bo_sch form {padding:15px;display:block}
.bo_sch select {border:0;width:100%;height:40px;border:1px solid #d0d3db;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075)}
.bo_sch .sch_bar {display:inline-block;width:100%;clear:both;margin-top:15px;border:1px solid #d0d3db;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075)}
.bo_sch .sch_input {width:250px;height:38px;border:0;padding:0;background-color:transparent;float:left}
.bo_sch .sch_btn {height:38px;float:right;color:#656565;background:none;border:0;width:40px;font-size:15px}
.bo_sch .bo_sch_cls {position:absolute;right:0;top:0;color:#b5b8bb;border:0;padding:12px 15px;font-size:16px;background:#fff}
.bo_sch_bg {background:#000;background:rgba(0,0,0,0.1);width:100%;height:100%}

/* 게시판 쓰기 */
#char_count_desc {display:block;margin:0 0 5px;padding:0}
#char_count_wrap {margin:5px 0 0;text-align:right}
#char_count {font-weight:bold}

#autosave_wrapper {position:relative}
#autosave_pop {display:none;z-index:10;position:absolute !important;top:34px;right:0;width:350px;height:auto !important;height:180px;max-height:180px;border:1px solid #565656;background:#fff;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
#autosave_pop:before {content:"";position:absolute;top:-8px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #000 transparent}
#autosave_pop:after {content:"";position:absolute;top:-7px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */
#autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden}
#autosave_pop div {text-align:center;margin:0 !important}
#autosave_pop button {margin:0;padding:0;border:0}
#autosave_pop ul {padding:15px;border-top:1px solid #e9e9e9;list-style:none;overflow-y:scroll;height:130px;border-bottom:1px solid #e8e8e8}
#autosave_pop li {padding:8px 5px;border-bottom:1px solid #fff;background:#eee;zoom:1}
#autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""}
#autosave_pop a {display:block;float:left}
#autosave_pop span {display:block;float:right;font-size:0.92em;font-style:italic;color:#999}
.autosave_close {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em}
.autosave_close:hover {background:#f3f3f3;color:#3597d9}
.autosave_content {display:none}
.autosave_del {background:url(./img/close_btn.png) no-repeat 50% 50%;text-indent:-999px;overflow:hidden;height:20px;width:20px}

/* 게시판 읽기 */
#bo_v {margin-bottom:20px;background:#fff;box-sizing:border-box}

#bo_v_table {position:absolute;top:0;right:16px;margin:0;padding:0 5px;height:25px;background:#ff3061;color:#fff;font-weight:bold;line-height:2.2em}

#bo_v_title {}
#bo_v_title .bo_v_cate {display:inline-block;line-height:20px;background:#e2eaf6;color:#3a8afd;padding:0 10px;border-radius:3px;}
#bo_v_title .bo_v_tit {display:block;font-size:2em;margin:5px 0 0;word-break:break-all}

#bo_v_info {margin:0;border-bottom:1px solid #f1f1f1;color:#666}
#bo_v_info:after {display:block;visibility:hidden;clear:both;content:""} 
#bo_v_info h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}

#bo_v_info .profile_info {margin:20px 0 10px;display:inline-block;float:left}
#bo_v_info .profile_info .pf_img {float:left;margin-right:10px}
#bo_v_info .profile_info .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_v_info .profile_info .profile_info_ct {float:left;padding:5px 0;line-height:18px}

#bo_v_info strong {display:inline-block;margin:0 10px 0 0;font-weight:normal}
#bo_v_info .sv_member,
#bo_v_info .sv_guest,
#bo_v_info .member,
#bo_v_info .guest {font-weight:bold}
#bo_v_info .profile_img {display:none}
#bo_v_info .sv_member {color:#000}
#bo_v_info .if_date {margin:0;color:#888}

/* ---------- 첨부파일/관련링크 - hanvit-ind.com 뷰페이지 레이아웃(카드형 행, 왼쪽 아이콘+라벨+구분선+파일명,
   오른쪽 메타+아이콘) 참고, 폰트/컬러/간격은 투어수다 자체 규격(suda 토큰) 유지 ---------- */
#bo_v_file, #bo_v_link{ margin-top: 40px; }
.suda-bo-v-file-list{ display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.suda-bo-v-file-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: var(--suda-gray-50);
    border-radius: 12px;
    text-decoration: none;
    color: var(--suda-gray-900);
    transition: background .15s ease;
}
.suda-bo-v-file-item:hover{ background: var(--suda-gray-100); text-decoration: none; }
.suda-bo-v-file-left{ display: flex; align-items: center; gap: 16px; min-width: 0; }
.suda-bo-v-file-label{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 15px; color: var(--suda-gray-500); white-space: nowrap; }
.suda-bo-v-file-label i{ font-size: 16px; }
.suda-bo-v-file-vline{ flex-shrink: 0; width: 1px; height: 16px; background: var(--suda-gray-200); }
.suda-bo-v-file-name{ font-size: 15px; font-weight: 600; color: var(--suda-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suda-bo-v-file-right{ display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.suda-bo-v-file-dl{ font-size: 16px; color: var(--suda-gray-400); }
.suda-bo-v-file-item:hover .suda-bo-v-file-dl{ color: var(--suda-blue); }
@media (max-width: 1024px){
    #bo_v_file, #bo_v_link{ margin-top: 3.91vw; }
    .suda-bo-v-file-list{ gap: 1.17vw; }
    .suda-bo-v-file-item{ gap: 1.56vw; padding: 1.95vw 2.34vw; border-radius: 1.17vw; }
    .suda-bo-v-file-left{ gap: 1.56vw; }
    .suda-bo-v-file-label{ gap: 0.78vw; font-size: 1.46vw; }
    .suda-bo-v-file-label i{ font-size: 1.56vw; }
    .suda-bo-v-file-vline{ height: 1.56vw; }
    .suda-bo-v-file-name{ font-size: 1.46vw; }
    .suda-bo-v-file-right{ gap: 1.56vw; }
    .suda-bo-v-file-dl{ font-size: 1.56vw; }
}
@media (max-width: 768px){
    #bo_v_file, #bo_v_link{ margin-top: 5.21vw; }
    .suda-bo-v-file-list{ gap: 1.56vw; }
    .suda-bo-v-file-item{ gap: 2.08vw; padding: 2.60vw 3.13vw; border-radius: 1.56vw; }
    .suda-bo-v-file-left{ gap: 2.08vw; }
    .suda-bo-v-file-label{ gap: 1.04vw; font-size: 1.95vw; }
    .suda-bo-v-file-label i{ font-size: 2.08vw; }
    .suda-bo-v-file-vline{ height: 2.08vw; }
    .suda-bo-v-file-name{ font-size: 1.95vw; }
    .suda-bo-v-file-right{ gap: 2.08vw; }
    .suda-bo-v-file-dl{ font-size: 2.08vw; }
}
@media (max-width: 480px){
    #bo_v_file, #bo_v_link{ margin-top: 8.33vw; }
    .suda-bo-v-file-list{ gap: 2.50vw; }
    .suda-bo-v-file-item{ flex-wrap: wrap; align-items: flex-start; gap: 1.67vw; padding: 4.17vw; border-radius: 2.50vw; }
    .suda-bo-v-file-left{ flex-wrap: wrap; gap: 1.67vw 3.33vw; }
    .suda-bo-v-file-label{ gap: 1.67vw; font-size: 3.13vw; }
    .suda-bo-v-file-label i{ font-size: 3.33vw; }
    .suda-bo-v-file-vline{ display: none; }
    .suda-bo-v-file-name{ flex-basis: 100%; white-space: normal; overflow: visible; text-overflow: clip; font-size: 3.13vw; }
    .suda-bo-v-file-right{ width: 100%; justify-content: space-between; gap: 3.33vw; }
    .suda-bo-v-file-dl{ font-size: 3.33vw; }
}

#bo_v_top {zoom:1}
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_top ul {padding:0;list-style:none;word-break:break-all;background:#fff}

#bo_v_bot {zoom:1}
#bo_v_bot:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_bot h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_bot ul {padding:0;list-style:none}

.bo_v_com {margin:20px 0;float:right}
.bo_v_com > li {position:relative;float:left;margin-left:5px}

.bo_v_nb {position:relative;margin:20px 0;clear:both;text-align:left}
.bo_v_nb:after {display:block;visibility:hidden;clear:both;content:""}
.bo_v_nb li {border-top:1px solid #f1f1f1;padding:13px}
.bo_v_nb li:last-child {border-bottom:1px solid #f1f1f1}
.bo_v_nb li:hover {background:#f6f6f6}
.bo_v_nb li i {font-size:13px;color:#b3b3b3}
.bo_v_nb li .nb_tit {display:inline-block;padding-right:20px;color:#b3b3b3}
.bo_v_nb li .nb_date {float:right;color:#b3b3b3}

#bo_v_atc {min-height:200px;height:auto !important;height:200px}
#bo_v_atc_title {position:absolute;font-size:0;line-height:0;overflow:hidden}

#bo_v_con {margin:10px 0 30px;width:100%;line-height:1.7em;min-height:200px;word-break:break-all;overflow:hidden}
#bo_v_con a {color:#000;text-decoration:underline}
#bo_v_con img {max-width:100%;height:auto}
/* 첨부 이미지(큰 이미지 보기 팝업 링크 없이 그냥 <img>만) - 본문 텍스트랑 붙지 않게 아래 여백만 줌 */
#bo_v_con .suda-bo-v-attached-img{ display:block; margin-bottom:20px; }

#bo_v_act {margin-bottom:30px;text-align:center}
#bo_v_act .bo_v_act_gng {position:relative}
#bo_v_act a {margin-right:5px;vertical-align:middle;color:#4a5158}
#bo_v_act a:hover {background-color:#fff;color:#ff484f;border-color:#ff484f}
#bo_v_act i {font-size:1.4em;margin-right:5px}
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;left:0;z-index:9999;padding:10px 0;width:165px;background:#ff3061;color:#fff;text-align:center}
#bo_v_act .bo_v_good {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}

#bo_v_sns {padding:0;list-style:none;zoom:1;float:left;display:inline-block}
#bo_v_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_sns li {float:left;width:135px;margin-right:5px;text-align:left}
#bo_v_sns li a {height:35px;line-height:35px;text-align:center;border-radius:5px;color:#fff;font-size:0.95em}
#bo_v_sns li img {vertical-align:middle;margin-right:5px}
#bo_v_sns li .sns_f {display:block;background:#3b5997}
#bo_v_sns li .sns_t {display:block;background:#09aeee}
#bo_v_sns li .sns_g {display:block;background:#ea4026}
#bo_v_sns li .sns_k {display:block;background:#fbe300}

#bo_v_share {position:relative;padding:20px 0}
#bo_v_share:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_share .btn {padding:0 10px;color:#555;font-weight:normal;font-size:1em;width:80px;line-height:35px;height:35px;border-color:#d5d5d5;border-radius:5px}
#bo_v_share .btn:hover {background:#fff}
#bo_v_share .btn i {margin-right:5px;color:#4b5259;vertical-align:middle}

/* 게시판 댓글 */
.cmt_btn {width:100%;text-align:left;border:0;border-bottom:1px solid #f0f0f0;background:#fff;font-weight:bold;margin:30px 0 0px;padding:0 0 15px}
.cmt_btn span.total {position:relative;display:inline-block;margin-right:5px;font-size:1em;color:#3a8afd}
.cmt_btn span.cmt_more {float:right;display:inline-block;width:15px;height:10px;background:url(./img/btn_cmt.png) no-repeat right 2px;margin-top:5px}
.cmt_btn_op span.cmt_more {background-position:right -8px}
.cmt_btn b {font-size:1.2em;color:#000}
.cmt_btn span.total:after {position:absolute;bottom:-17px;left:0;display:inline-block;background:#3a8afd;content:"";width:100%;height:2px}
#bo_vc {}
#bo_vc h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc article {margin:20px 0;position:relative;border-bottom:1px solid #f0f0f0}
#bo_vc article:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc article .profile_img img {border-radius:50%}
#bo_vc article .pf_img {float:left;margin-right:10px}
#bo_vc article .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_vc article .cm_wrap {float:left;max-width:870px;width:90%}
#bo_vc header {position:relative;width:100%}
#bo_vc header:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc header .profile_img {display:none}
#bo_vc header .icon_reply {position:absolute;top:15px;left:-20px}
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
.bo_vc_hdinfo {color:#777}
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc .cmt_contents {line-height:1.8em;padding:0 0 20px}
#bo_vc p a {text-decoration:underline}
#bo_vc p a.s_cmt {text-decoration:underline;color:#ed6479}
#bo_vc_empty {margin:0;padding:80px 0 !important;color:#777;text-align:center}
#bo_vc #bo_vc_winfo {float:left}
#bo_vc .bo_vl_opt {position:absolute;top:0;right:0}

.bo_vc_act {display:none;position:absolute;right:0;top:40px;width:58px;text-align:right;border:1px solid #b8bfc4;margin:0;list-style:none;background:#fff;zoom:1;z-index:9999}
.bo_vc_act:before {content:"";position:absolute;top:-8px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.bo_vc_act:after {content:"";position:absolute;top:-6px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.bo_vc_act li {border-bottom:1px solid #f0f0f0}
.bo_vc_act li:last-child {border-bottom:0}
.bo_vc_act li a {display:inline-block;padding:10px 15px}
.bo_vc_act li a:hover {color:#3a8afd}

.bo_vc_w {position:relative;margin:10px 0;display:block}
.bo_vc_w:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.bo_vc_w #char_cnt {display:block;margin:0 0 5px}
.bo_vc_w textarea {border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;width:100%;height:120px;
-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1)}
#wr_secret {}
.bo_vc_w_info {margin:10px 0;float:left}
.bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w_info .frm_input {float:left;margin-right:5px}
.bo_vc_w_info #captcha {padding-top:10px;display:block;clear:both}
.bo_vc_w .btn_confirm {clear:both;margin-top:10px}
.bo_vc_w .btn_confirm label {display:inline-block;margin-right:10px;border-radius:3px;font-size:1.5em;text-align:center}
.bo_vc_w .btn_submit {height:45px;padding:0 20px;border-radius:3px;font-weight:bold;font-size:1.083em}
.bo_vc_w .btn_confirm .secret_cm label {font-size:1em !important}
.bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""}
.secret_cm {display:inline-block;float:left}

#bo_vc_send_sns {display:inline-block;float:left}
#bo_vc_sns {display:inline-block;margin:0;padding:0;list-style:none;zoom:1}
#bo_vc_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc_sns li {float:left;margin:0 5px 0 0}
#bo_vc_sns .sns_li_f {border-radius:3px;background:#3a589b;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_t {border-radius:3px;background:#00aced;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_off {background:#bbb}
#bo_vc_sns a {display:inline-block;padding:0 15px 0 5px}
#bo_vc_sns input {margin:0 5px 0 0}

/*글쓰기*/
#bo_w .bo_v_option li {display:inline-block;float:left;text-align:left;margin:0 5px 0 0}
#bo_w .bo_v_option li label {vertical-align:baseline}
#bo_w .bo_v_option .chk_box input[type="checkbox"] + label span {margin-left:0;margin-right:5px}
/* 옵션(공지/html/비밀글 등) - 공통 체크박스(.suda-form-check)로 통일 */
#bo_w .bo_v_option{ display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
#bo_w .bo_v_option .suda-opt-item{ display: flex; align-items: center; gap: 8px; float: none; margin: 0; }
#bo_w .bo_v_option .suda-opt-item label{ font-size: 15px; color: var(--suda-gray-900); cursor: pointer; }
#bo_w .write_div {margin:10px 0;position:relative}
#bo_w .write_div:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_info:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_info .frm_input {float:left;margin-bottom:1%}
#bo_w #wr_password, #bo_w #wr_homepage {margin-left:1%}
#bo_w .wr_content.smarteditor2 iframe {background:#fff}
#bo_w .bo_w_tit {position:relative}
#bo_w .bo_w_tit .frm_input {padding-right:120px}
#bo_w .bo_w_tit #btn_autosave {position:absolute;top:5px;right:5px;line-height:30px;height:30px}
#bo_w .bo_w_link label {position:absolute;top:1px;left:1px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;font-size:1.2em;text-align:center;color:#b2b2b2}
#bo_w .bo_w_link .frm_input {padding-left:50px}
#bo_w .bo_w_select select {border:1px solid #d0d3db;width:100%;height:40px;border-radius:3px}
#bo_w .btn_submit {padding:0 20px;font-size:1.167em}
#bo_w .btn_cancel {border-radius:3px;font-size:1.167em}

/* ---------- (주)투어수다: 관리자 글쓰기 화면 참고 - 라벨(좌) + 필드(우) 2단 행 구조, 행 사이 구분선 ---------- */
.suda-w .suda-w-row{
    display: flex;
    align-items: stretch;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid #eee;
}
.suda-w .suda-w-rowBox{ border-top: 1px solid #222; }
.suda-w .suda-w-label{
    flex: 0 0 140px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--suda-gray-900);
}
.suda-w .suda-w-label label{ font-weight: 700; color: inherit; cursor: default; }
.suda-w .suda-w-req{ color: var(--suda-blue); font-size: 12px; }
.suda-w .suda-w-field{ flex: 1; min-width: 0; }

/* 링크 등 - 인풋 왼쪽에 아이콘 박스를 붙인 형태 */
/* 아이콘+인풋을 절대좌표로 겹치면 높이가 딱 안 맞아 아래쪽에 선이 비는 문제가 생겨서,
   대신 바깥 박스 하나가 테두리/라운드를 갖고 아이콘·인풋은 그 안에서 flex로 늘어나게 한다 */
.suda-w-icon-field{
    display: flex;
    align-items: stretch;
    height: 52px;
    box-sizing: border-box;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.suda-w-icon-field .suda-w-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    background: var(--suda-gray-50);
    border-right: 1px solid var(--suda-gray-200);
    color: var(--suda-gray-400);
    pointer-events: none;
}
.suda-w-icon-field input.frm_input{
    flex: 1;
    min-width: 0;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-left: 16px !important;
}
/* 안쪽 input 포커스 시 일반 규칙(#bo_w input.frm_input:focus, id가 있어 명시도가 더 높음)이
   border까지 다시 파란색으로 되살려서, 바깥 박스(.suda-w-icon-field)의 테두리+글로우까지
   겹쳐 두 겹으로 두꺼워 보였음(링크1 필드에서 유독 굵게 보이던 원인) - border/box-shadow
   둘 다 여기서 확실히 꺼서 바깥 한 겹만 보이게 함(제목 인풋처럼 얇게) */
#bo_w .suda-w-icon-field input.frm_input:focus{ border: 0 !important; box-shadow: none !important; }
.suda-w-icon-field:focus-within{ border-color: var(--suda-blue); }

/* ---------- (주)투어수다: 회원가입 화면(css/register.css .suda-login-field input)과 동일한 인풋 UI/UX ----------
   좌/우 패딩은 아이콘·버튼이 겹치는 필드(제목 우측 임시저장버튼, 링크/파일 아이콘)를 건드리지 않기 위해
   height/border/포커스 등 공통 속성만 넓게 걸고, 좌측 패딩은 일반 필드에만 별도로 준다. */
#bo_w input.frm_input,
#bo_w select,
#bo_w textarea.frm_input{
    height: 52px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    font-size: 15px;
    color: var(--suda-gray-900);
    transition: border-color .15s ease, box-shadow .15s ease;
}
#bo_w textarea.frm_input{ height: auto; }
#bo_w input.frm_input::placeholder{ color: var(--suda-gray-400); }
/* default.css의 input[type=text]:focus{border:1px solid #558ab7 !important}를 이겨야 해서 !important 사용 */
#bo_w input.frm_input:focus,
#bo_w select:focus,
#bo_w textarea.frm_input:focus{
    outline: none;
    border: 1px solid var(--suda-blue) !important;
    box-shadow: 0 0 0 3px rgba(65,84,255,.12);
}

#bo_w .suda-w-field input.frm_input{ padding-left: 20px; }

@media (max-width: 1024px){
    #bo_w .suda-w-field input.frm_input{ padding-left: 1.95vw; }
    .suda-w-icon-field{ height: 5.08vw; border-radius: 1.17vw; }
    .suda-w-icon-field .suda-w-icon{ flex-basis: 5.08vw; }
    .suda-w .suda-w-row{ gap: 2.34vw; padding: 2.34vw 0; }
    .suda-w .suda-w-label{ flex-basis: 13.67vw; gap: 0.59vw; padding-left: 1.95vw; font-size: 1.46vw; }
    .suda-w .suda-w-req{ font-size: 1.17vw; }
    #bo_w .bo_v_option{ gap: 1.95vw; }
    #bo_w .bo_v_option .suda-opt-item{ gap: 0.78vw; }
    #bo_w .bo_v_option .suda-opt-item label{ font-size: 1.46vw; }
}
@media (max-width: 768px){
    #bo_w .suda-w-field input.frm_input{ padding-left: 2.60vw; }
    .suda-w-icon-field{ height: 6.77vw; border-radius: 1.56vw; }
    .suda-w-icon-field .suda-w-icon{ flex-basis: 6.77vw; }
    .suda-w .suda-w-row{ gap: 3.13vw; padding: 3.13vw 0; }
    .suda-w .suda-w-label{ flex-basis: 18.23vw; gap: 0.78vw; padding-left: 2.60vw; font-size: 1.95vw; }
    .suda-w .suda-w-req{ font-size: 1.56vw; }
    #bo_w .bo_v_option{ gap: 2.60vw; }
    #bo_w .bo_v_option .suda-opt-item{ gap: 1.04vw; }
    #bo_w .bo_v_option .suda-opt-item label{ font-size: 1.95vw; }
}
@media (max-width: 480px){
    #bo_w input.frm_input,
    #bo_w select{ height: 10.00vw; font-size: 2.92vw; }
    #bo_w .suda-w-field input.frm_input{ padding-left: 4.17vw; }
    .suda-w-icon-field{ height: 10.83vw; border-radius: 2.50vw; }
    .suda-w-icon-field .suda-w-icon{ flex-basis: 10.83vw; }
    .suda-w .suda-w-row{ flex-direction: column; gap: 1.67vw; padding: 5.00vw 0; }
    .suda-w .suda-w-label{ flex-basis: auto; flex-wrap: nowrap; align-items: flex-start; padding-top: 0; padding-left: 0; margin-bottom: 3.33vw; font-size: 3.33vw; }
    .suda-w .suda-w-label label{ white-space: nowrap; }
    .suda-w .suda-w-req{ font-size: 2.50vw; }
    #bo_w .bo_v_option{ gap: 4.17vw; }
    #bo_w .bo_v_option .suda-opt-item{ gap: 1.67vw; }
    #bo_w .bo_v_option .suda-opt-item label{ font-size: 3.33vw; }
}

/* ---------- 첨부파일 - 고정 칸(슬롯) 방식 ----------
   빈 칸(+) 클릭 → 그 자리에서 파일선택 → 썸네일(이미지) 또는 파일아이콘+파일명으로 바뀌고
   우상단에 × 제거 버튼이 뜨는 구조. 실제 <input type=file>/삭제체크박스는 DOM에 그대로
   있고(개수·순서 불변 - write_update.php가 배열 위치=bf_no로 처리하기 때문) 화면에서만
   clip으로 숨김(display:none은 일부 브라우저에서 접근성 트리에서 완전히 빠질 수 있어
   clip 방식 사용). 여닫기/미리보기 동작은 write.skin.php 안의 jQuery에서 처리. */
#bo_w .suda-upload-grid{ display: flex; flex-wrap: wrap; gap: 12px; }
#bo_v_ans_form .suda-upload-grid{ display: flex; flex-wrap: wrap; gap: 12px; }
#bo_w .suda-upload-slot{ position: relative; width: 96px; }
#bo_v_ans_form .suda-upload-slot{ position: relative; width: 96px; }
#bo_w .suda-upload-input,
#bo_w .suda-upload-delcheck{
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
#bo_v_ans_form .suda-upload-input,
#bo_v_ans_form .suda-upload-delcheck{
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
/* + 아이콘은 폰트어썸 fa-plus(굵은 글자 형태) 대신 얇은 선 두 개(::before/::after)로 직접 그림 -
   fa-plus는 두께 조절이 안 되는 굵은 글리프뿐이라 "안 굵게"가 안 됐음 */
#bo_w .suda-upload-add{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 96px; height: 96px;
    box-sizing: border-box;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    background: #fff;
    color: var(--suda-gray-300);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
#bo_v_ans_form .suda-upload-add{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 96px; height: 96px;
    box-sizing: border-box;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    background: #fff;
    color: var(--suda-gray-300);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
#bo_w .suda-upload-add::before,
#bo_w .suda-upload-add::after{
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    background: currentColor;
    border-radius: 1px;
}
#bo_v_ans_form .suda-upload-add::before,
#bo_v_ans_form .suda-upload-add::after{
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    background: currentColor;
    border-radius: 1px;
}
#bo_w .suda-upload-add::before{ width: 20px; height: 1.5px; transform: translate(-50%, -50%); }
#bo_v_ans_form .suda-upload-add::before{ width: 20px; height: 1.5px; transform: translate(-50%, -50%); }
#bo_w .suda-upload-add::after{ width: 1.5px; height: 20px; transform: translate(-50%, -50%); }
#bo_v_ans_form .suda-upload-add::after{ width: 1.5px; height: 20px; transform: translate(-50%, -50%); }
#bo_w .suda-upload-add:hover{ border-color: var(--suda-blue); color: var(--suda-blue); }
#bo_v_ans_form .suda-upload-add:hover{ border-color: var(--suda-blue); color: var(--suda-blue); }
#bo_w .suda-upload-slot.has-file .suda-upload-add{ display: none; }
#bo_v_ans_form .suda-upload-slot.has-file .suda-upload-add{ display: none; }

#bo_w .suda-upload-preview{
    display: none;
    position: relative;
    width: 96px; height: 96px;
    box-sizing: border-box;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    background: var(--suda-gray-50);
    overflow: hidden;
}
#bo_v_ans_form .suda-upload-preview{
    display: none;
    position: relative;
    width: 96px; height: 96px;
    box-sizing: border-box;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    background: var(--suda-gray-50);
    overflow: hidden;
}
#bo_w .suda-upload-slot.has-file .suda-upload-preview{ display: block; }
#bo_v_ans_form .suda-upload-slot.has-file .suda-upload-preview{ display: block; }
#bo_w .suda-upload-thumb{ width: 100%; height: 100%; object-fit: cover; display: block; }
#bo_v_ans_form .suda-upload-thumb{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* [hidden] 속성의 UA 기본 규칙(display:none, 명시도 낮음)이 바로 위 규칙(#bo_w .suda-upload-thumb,
   명시도가 더 높음)에 밀려 무시되던 버그 - 사진이 아닌 파일을 선택하면 hidden이 있어도 빈 src의
   <img>가 계속 block으로 보여서 브라우저 기본 "깨진 이미지(엑박)" 아이콘이 뜨고 있었음 */
#bo_w .suda-upload-thumb[hidden]{ display: none; }
#bo_v_ans_form .suda-upload-thumb[hidden]{ display: none; }
#bo_w .suda-upload-generic{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%; height: 100%;
    padding: 8px;
    box-sizing: border-box;
    color: var(--suda-gray-300);
    font-size: 28px;
    text-align: center;
}
#bo_v_ans_form .suda-upload-generic{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%; height: 100%;
    padding: 8px;
    box-sizing: border-box;
    color: var(--suda-gray-300);
    font-size: 28px;
    text-align: center;
}
/* 위와 같은 이유(명시도) - 이미지 파일일 땐 이 블록이 hidden이어야 하는데 무시되고 있었음.
   이미지 케이스는 미리보기가 위에 덮여서 안 보였을 뿐 실제로는 계속 렌더링되고 있었음 */
#bo_w .suda-upload-generic[hidden]{ display: none; }
#bo_v_ans_form .suda-upload-generic[hidden]{ display: none; }
#bo_w .suda-upload-filename{
    max-width: 100%;
    font-size: 11px;
    line-height: 1.3;
    color: var(--suda-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#bo_v_ans_form .suda-upload-filename{
    max-width: 100%;
    font-size: 11px;
    line-height: 1.3;
    color: var(--suda-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* .suda-upload-slot(overflow 없음)의 직계자식으로 옮겨서 top/right 음수로 살짝 밖으로 걸쳐도
   안 잘리게 함 - 빈 칸일 땐 안 보이다가 파일이 있을 때만(.has-file) 보이게 별도로 토글 */
#bo_w .suda-upload-remove{
    display: none;
    position: absolute;
    top: -8px; right: -8px;
    width: 24px; height: 24px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    z-index: 1;
}
#bo_v_ans_form .suda-upload-remove{
    display: none;
    position: absolute;
    top: -8px; right: -8px;
    width: 24px; height: 24px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    z-index: 1;
}
#bo_w .suda-upload-slot.has-file .suda-upload-remove{ display: flex; }
#bo_v_ans_form .suda-upload-slot.has-file .suda-upload-remove{ display: flex; }
#bo_w .suda-upload-remove:hover{ background: #000; }
#bo_v_ans_form .suda-upload-remove:hover{ background: #000; }
#bo_w .suda-upload-desc{ display: block; margin-top: 6px; width: 96px; height: auto; font-size: 11px; padding: 4px 6px; }
#bo_v_ans_form .suda-upload-desc{ display: block; margin-top: 6px; width: 96px; height: auto; font-size: 11px; padding: 4px 6px; }
@media (max-width: 1024px){
    #bo_w .suda-upload-grid{ gap: 1.17vw; }
    #bo_v_ans_form .suda-upload-grid{ gap: 1.17vw; }
    #bo_w .suda-upload-slot{ width: 9.38vw; }
    #bo_v_ans_form .suda-upload-slot{ width: 9.38vw; }
    #bo_w .suda-upload-add,
    #bo_v_ans_form .suda-upload-add,
    #bo_w .suda-upload-preview{ width: 9.38vw; height: 9.38vw; border-radius: 1.17vw; }
    #bo_v_ans_form .suda-upload-preview{ width: 9.38vw; height: 9.38vw; border-radius: 1.17vw; }
    #bo_w .suda-upload-add::before{ width: 1.95vw; }
    #bo_v_ans_form .suda-upload-add::before{ width: 1.95vw; }
    #bo_w .suda-upload-add::after{ height: 1.95vw; }
    #bo_v_ans_form .suda-upload-add::after{ height: 1.95vw; }
    #bo_w .suda-upload-remove{ width: 2.34vw; height: 2.34vw; font-size: 1.17vw; top: -0.78vw; right: -0.78vw; }
    #bo_v_ans_form .suda-upload-remove{ width: 2.34vw; height: 2.34vw; font-size: 1.17vw; top: -0.78vw; right: -0.78vw; }
    #bo_w .suda-upload-desc{ width: 9.38vw; font-size: 1.07vw; }
    #bo_v_ans_form .suda-upload-desc{ width: 9.38vw; font-size: 1.07vw; }
}
@media (max-width: 768px){
    #bo_w .suda-upload-grid{ gap: 2.60vw; }
    #bo_v_ans_form .suda-upload-grid{ gap: 2.60vw; }
    #bo_w .suda-upload-slot{ width: 20.83vw; }
    #bo_v_ans_form .suda-upload-slot{ width: 20.83vw; }
    #bo_w .suda-upload-add,
    #bo_v_ans_form .suda-upload-add,
    #bo_w .suda-upload-preview{ width: 20.83vw; height: 20.83vw; border-radius: 2.60vw; }
    #bo_v_ans_form .suda-upload-preview{ width: 20.83vw; height: 20.83vw; border-radius: 2.60vw; }
    #bo_w .suda-upload-add::before{ width: 4.17vw; }
    #bo_v_ans_form .suda-upload-add::before{ width: 4.17vw; }
    #bo_w .suda-upload-add::after{ height: 4.17vw; }
    #bo_v_ans_form .suda-upload-add::after{ height: 4.17vw; }
    #bo_w .suda-upload-remove{ width: 5.21vw; height: 5.21vw; font-size: 2.60vw; top: -1.69vw; right: -1.69vw; }
    #bo_v_ans_form .suda-upload-remove{ width: 5.21vw; height: 5.21vw; font-size: 2.60vw; top: -1.69vw; right: -1.69vw; }
    #bo_w .suda-upload-desc{ width: 20.83vw; font-size: 2.34vw; }
    #bo_v_ans_form .suda-upload-desc{ width: 20.83vw; font-size: 2.34vw; }
}
@media (max-width: 480px){
    #bo_w .suda-upload-grid{ gap: 3.33vw; }
    #bo_v_ans_form .suda-upload-grid{ gap: 3.33vw; }
    #bo_w .suda-upload-slot{ width: 26.67vw; }
    #bo_v_ans_form .suda-upload-slot{ width: 26.67vw; }
    #bo_w .suda-upload-add,
    #bo_v_ans_form .suda-upload-add,
    #bo_w .suda-upload-preview{ width: 26.67vw; height: 26.67vw; border-radius: 3.33vw; }
    #bo_v_ans_form .suda-upload-preview{ width: 26.67vw; height: 26.67vw; border-radius: 3.33vw; }
    #bo_w .suda-upload-add::before{ width: 5.33vw; }
    #bo_v_ans_form .suda-upload-add::before{ width: 5.33vw; }
    #bo_w .suda-upload-add::after{ height: 5.33vw; }
    #bo_v_ans_form .suda-upload-add::after{ height: 5.33vw; }
    #bo_w .suda-upload-remove{ width: 6.67vw; height: 6.67vw; font-size: 3.33vw; top: -2.17vw; right: -2.17vw; }
    #bo_v_ans_form .suda-upload-remove{ width: 6.67vw; height: 6.67vw; font-size: 3.33vw; top: -2.17vw; right: -2.17vw; }
    #bo_w .suda-upload-desc{ width: 26.67vw; font-size: 3.00vw; }
    #bo_v_ans_form .suda-upload-desc{ width: 26.67vw; font-size: 3.00vw; }
}

/* ---------- 자동등록방지(캡차) - 회원가입 화면(css/register.css #captcha)과 동일한 디자인 ----------
   같은 kcaptcha.lib.php를 쓰므로 DOM(#captcha > img/input/mp3버튼/reload버튼/info)이 동일해서 그대로 재사용한다. */
#captcha{
    display: grid !important;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "img input mp3 reload" "info info info info";
    align-items: center;
    gap: 8px;
    width: 100% !important;
    border: 0;
    padding: 0;
    margin: 0;
}
#captcha #captcha_img{
    grid-area: img;
    height: 52px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    vertical-align: middle;
    background: var(--suda-gray-50);
}
#captcha #captcha_key{
    grid-area: input;
    height: 52px;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    letter-spacing: normal;
    vertical-align: middle;
}
#captcha #captcha_key:focus{ outline: none; border-color: var(--suda-blue) !important; box-shadow: none; }
#captcha #captcha_mp3{ grid-area: mp3; }
#captcha #captcha_reload{ grid-area: reload; }
#captcha #captcha_mp3,
#captcha #captcha_reload{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 1px solid var(--suda-gray-200);
    border-radius: 10px;
    background: #fff;
    color: var(--suda-gray-500);
    text-indent: 0;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
#captcha #captcha_mp3:hover,
#captcha #captcha_reload:hover{
    color: var(--suda-blue);
    border-color: var(--suda-blue);
    background: var(--suda-gray-50);
}
#captcha #captcha_mp3 svg,
#captcha #captcha_reload svg{ width: 18px; height: 18px; }
#captcha #captcha_info{
    grid-area: info;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--suda-gray-500);
    letter-spacing: normal;
}
@media (max-width: 1024px){
    #captcha{ gap: 0.78vw; }
    #captcha #captcha_img{ border-radius: 1.17vw; margin: 0 0.39vw 0 0; }
    #captcha #captcha_key{ min-width: 11.72vw; padding: 0 1.56vw; border-radius: 1.17vw; margin: 0 0.39vw; }
    #captcha #captcha_mp3,
    #captcha #captcha_reload{ border-radius: 0.98vw; }
    #captcha #captcha_info{ font-size: 1.17vw; margin: 0.78vw 0 0; }
}
@media (max-width: 768px){
    #captcha{ gap: 1.04vw; }
    #captcha #captcha_img{ border-radius: 1.56vw; margin: 0 0.52vw 0 0; }
    #captcha #captcha_key{ min-width: 15.63vw; padding: 0 2.08vw; border-radius: 1.56vw; margin: 0 0.52vw; }
    #captcha #captcha_mp3,
    #captcha #captcha_reload{ border-radius: 1.30vw; }
    #captcha #captcha_info{ font-size: 1.56vw; margin: 1.04vw 0 0; }
}
@media (max-width: 480px){
    #captcha{ gap: 1.67vw; }
    #captcha #captcha_img{ height: 10.83vw; border-radius: 2.50vw; margin: 0 0.83vw 0 0; }
    #captcha #captcha_key{ height: 10.83vw; min-width: 25.00vw; padding: 0 3.33vw; font-size: 3.13vw; border-radius: 2.50vw; margin: 0 0.83vw; }
    #captcha #captcha_mp3,
    #captcha #captcha_reload{ width: 9.17vw; height: 9.17vw; border-radius: 2.08vw; }
    #captcha #captcha_mp3 svg,
    #captcha #captcha_reload svg{ width: 3.75vw; height: 3.75vw; }
    #captcha #captcha_info{ font-size: 2.50vw; margin: 1.67vw 0 0; }
}

/* ---------- 고객센터 섹션(공지사항)에서 제목+검색을 한 줄로 -----------
   .contBox가 검색폼/목록/페이징을 전부 하나로 감싸는 구조라(gnb.css의 공용
   .suda-cs-content-header로 감쌌다가 검색폼 뒤에서 닫으면 .contBox가 그 안에서 시작해서
   밖에서 끝나는 교차 중첩이 돼 레이아웃이 깨짐 - 실제 겪은 버그), 아예 .suda-bo-top-row
   안에서 "검색결과 N건" 대신 제목(.suda-cs-content-title)을 직접 찍어서 같은 flex row
   안에 넣는 방식으로 처리함(list.skin.php 쪽 PHP 분기). 여기선 스타일만 맞춤. */
.suda-bo-top-row .suda-cs-content-title{ margin: 0; font-size: 20px; font-weight: 700; color: var(--suda-gray-900); }
@media (max-width: 1024px){
    .suda-bo-top-row .suda-cs-content-title{ font-size: 1.66vw; }
}
@media (max-width: 768px){
    .suda-bo-top-row .suda-cs-content-title{ font-size: 2.21vw; }
}
@media (max-width: 480px){
    .suda-bo-top-row .suda-cs-content-title{ font-size: 3.54vw; }
}

/* ---------- 취소/작성완료 버튼 - 회원가입/정보수정의 suda-join-next와 동일한 톤 ---------- */
#bo_w .btn_confirm.write_div{ display: flex; text-align: left; margin: 70px 0 0; }
#bo_w .btn_confirm .btn_cancel{ margin-right: 8px; }
#bo_w .btn_confirm .btn_cancel,
#bo_w .btn_confirm .btn_submit{
    flex: 1;
    height: 52px;
    line-height: 52px;
    padding: 0;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    transition: background .15s ease, border-color .15s ease;
}
#bo_w .btn_confirm .btn_submit{ border: 0; background: var(--suda-blue); color: #fff; }
#bo_w .btn_confirm .btn_submit:hover{ background: var(--suda-blue-dark); }
#bo_w .btn_confirm .btn_cancel{ border: 1px solid var(--suda-gray-200); background: #fff; color: var(--suda-gray-700); }
#bo_w .btn_confirm .btn_cancel:hover{ background: var(--suda-gray-50); border-color: var(--suda-gray-400); }
@media (max-width: 1024px){
    #bo_w .btn_confirm.write_div{ margin: 6.84vw 0 0; }
    #bo_w .btn_confirm .btn_cancel{ margin-right: 0.78vw; }
    #bo_w .btn_confirm .btn_cancel,
    #bo_w .btn_confirm .btn_submit{ height: 5.08vw; line-height: 5.08vw; font-size: 1.56vw; border-radius: 1.17vw; }
}
@media (max-width: 768px){
    #bo_w .btn_confirm.write_div{ margin: 9.11vw 0 0; }
    #bo_w .btn_confirm .btn_cancel{ margin-right: 1.04vw; }
    #bo_w .btn_confirm .btn_cancel,
    #bo_w .btn_confirm .btn_submit{ height: 6.77vw; line-height: 6.77vw; font-size: 2.08vw; border-radius: 1.56vw; }
}
@media (max-width: 480px){
    #bo_w .btn_confirm.write_div{ margin: 14.58vw 0 0; }
    #bo_w .btn_confirm .btn_cancel{ margin-right: 1.67vw; }
    #bo_w .btn_confirm .btn_cancel,
    #bo_w .btn_confirm .btn_submit{ height: 10.83vw; line-height: 10.83vw; font-size: 3.33vw; border-radius: 2.50vw; }
}

/* ==========================================================================
   (주)투어수다: 게시판 목록/상세 - 참고사이트(dongnamad.co.kr) 레이아웃 구조 재구성
   폰트/색상/여백 값은 전부 기존 CSS 변수(:root, css/gnb.css)와 사이트 톤을 그대로 사용한다.
   ========================================================================== */


/* ---------- 검색결과 건수 + 검색 필터 - dongnamad.co.kr 공지사항 리스트(#content) 레이아웃/폰트/컬러 그대로 매칭 ---------- */
.suda-bo-top-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.suda-bo-result{ font-size: 16px; color: #333; }
.suda-bo-result strong{ color: var(--suda-blue); font-weight: 800; }
.suda-bo-search{
    display: flex;
    align-items: center;
    height: 50px;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    background: #fff;
    overflow: visible;
}
/* 검색대상 셀렉트 - 네이티브 select 대신 ul/li 커스텀 드롭다운 (네이티브 option 목록이
   브라우저 기본 스타일이라 보기 싫다는 피드백으로 교체) */
.suda-bo-sfl{ position: relative; height: 100%; flex: 0 0 auto; }
.suda-bo-sfl-btn{
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    box-sizing: border-box;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: #333;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.suda-bo-sfl-btn i{ font-size: 11px; color: #868686; transition: transform .15s ease; }
.suda-bo-sfl.is-open .suda-bo-sfl-btn i{ transform: rotate(180deg); }
.suda-bo-sfl-list{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    min-width: 120px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17,17,17,.12);
    display: none;
}
.suda-bo-sfl.is-open .suda-bo-sfl-list{ display: block; }
.suda-bo-sfl-list li{
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background .15s ease;
}
.suda-bo-sfl-list li:hover{ background: var(--suda-gray-50); }
.suda-bo-sfl-list li.is-selected{ background: rgba(65,84,255,.08); color: var(--suda-blue); font-weight: 600; }
.suda-bo-search input[type="text"]{
    height: 100%;
    box-sizing: border-box;
    padding: 0 18px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #333;
    font-size: 14px;
    width: 320px; /* 기존 220px에서 더 길게 */
}
.suda-bo-search input[type="text"]::placeholder{ color: #9a9a9a; }
.suda-bo-search input[type="text"]:focus{ outline: none; }
.suda-bo-search-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    margin-right: 6px;
    border: 0;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease;
}
.suda-bo-search-btn:hover{ background: #222; }

/* ---------- 전체선택(체크박스 모드) ---------- */
.suda-bo-chkall{ display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-left: 30px; font-size: 13px; color: var(--suda-gray-500); }
.suda-bo-chkall label{ display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* 관리자 전용 체크박스가 .selec_chk(전역 숨김 처리)에 가려 안 보이던 문제 - suda-form-check를 같이 넣어도
   .selec_chk의 position:absolute/opacity:0가 이겨서 여전히 안 보였음. 클래스 결합 선택자로 명시 override */
.suda-bo-chkall .selec_chk.suda-form-check,
.suda-bo-chk .selec_chk.suda-form-check,
.suda-qa-lc-chk .selec_chk.suda-form-check{
    position: relative;
    top: auto;
    left: auto;
    opacity: 1;
    z-index: auto;
    overflow: visible;
}

/* ---------- 목록 : 번호 + 제목 + 날짜 한 줄 리스트 - dongnamad.co.kr .notice .n-list 폰트/컬러/보더 그대로 매칭 ---------- */
.suda-bo-n-list{ list-style: none; margin: 0; padding: 0; border-top: 2px solid #222; }
.suda-bo-row{ display: flex; align-items: stretch; border-bottom: 1px solid #ddd; }
.suda-bo-row-link{
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 20px;
    padding: 30px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}
.suda-bo-row-link:hover{ text-decoration: none; }
.suda-bo-row:hover .suda-bo-chk,
.suda-bo-row:hover .suda-bo-row-link{ background: var(--suda-gray-50); }
.suda-bo-row.is-notice .suda-bo-chk,
.suda-bo-row.is-notice .suda-bo-row-link{ background: rgba(65,84,255,.04); }
.suda-bo-chk{ display: flex; align-items: center; flex: 0 0 auto; padding-left: 30px; transition: background .15s ease; }
.suda-bo-num{
    flex: 0 0 56px;
    text-align: center;
    color: #161616;
    font-size: 16px;
    font-weight: 600;
}
.suda-bo-num .notice_icon{ display: inline-block; padding: 4px 10px; border-radius: 8px; background: rgba(65,84,255,.1); color: var(--suda-blue); font-size: 12px; white-space: nowrap; }
.suda-bo-subject{ flex: 1 1 auto; min-width: 0; }
.suda-bo-subject .bo_tit{ display: block; color: #161616; font-weight: 600; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suda-bo-row.is-notice .suda-bo-subject .bo_tit{ font-weight: 700; }
.suda-bo-meta{ display: flex; gap: 10px; margin-top: 6px; font-size: 14px; color: var(--suda-gray-400); }
.suda-bo-date{ flex: 0 0 auto; font-size: 16px; font-weight: 300; color: #9a9a9a; }
.suda-bo-empty{ padding: 60px 0; text-align: center; color: var(--suda-gray-400); font-size: 14px; }

/* ---------- 페이지네이션 (get_paging()이 만드는 nav.pg_wrap 그대로 재사용) - dongnamad.co.kr .paging-style03 매칭:
   박스형 버튼 대신 밑줄로 현재 페이지 표시 ---------- */
.pg_wrap{ display: flex; justify-content: center; margin: 70px 0 0; }
.pg{ display: flex; align-items: center; flex-wrap: wrap; }
.pg a.pg_page,
.pg strong.pg_current{
    position: relative;
    display: inline-block;
    padding: 0 7px 3px;
    margin: 0 5px;
    font-size: 16px;
    color: #868686;
    text-decoration: none;
}
.pg a.pg_page:hover{ color: #222; text-decoration: none; }
.pg strong.pg_current{ color: #333; font-weight: 400; }
.pg strong.pg_current::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #333; }

/* ---------- 선택삭제/복사/이동 (관리자 체크박스 모드) ---------- */

@media (max-width: 1024px){
    .suda-bo-top-row{ margin-bottom: 1.95vw; }
    .suda-bo-result{ font-size: 1.56vw; }
    .suda-bo-search{ height: 4.88vw; }
    .suda-bo-sfl-btn{ gap: 0.59vw; padding: 0 1.76vw; font-size: 1.37vw; }
    .suda-bo-sfl-btn i{ font-size: 1.07vw; }
    .suda-bo-sfl-list{ top: calc(100% + 0.78vw); min-width: 11.72vw; padding: 0.59vw; border-radius: 1.17vw; }
    .suda-bo-sfl-list li{ padding: 0.98vw 1.17vw; border-radius: 0.78vw; font-size: 1.37vw; }
    .suda-bo-search input[type="text"]{ padding: 0 1.76vw; font-size: 1.37vw; width: 21.48vw; }
    .suda-bo-search-btn{ flex-basis: 3.81vw; width: 3.81vw; height: 3.81vw; margin-right: 0.59vw; font-size: 1.37vw; }
    .suda-bo-row-link{ gap: 1.95vw; padding: 2.93vw; }
    .suda-bo-num{ flex-basis: 5.47vw; font-size: 1.56vw; }
    .suda-bo-subject .bo_tit{ font-size: 1.76vw; }
    .suda-bo-meta{ font-size: 1.37vw; }
    .suda-bo-date{ font-size: 1.56vw; }
    .pg_wrap{ margin-top: 6.84vw; }
    .pg a.pg_page,
    .pg strong.pg_current{ padding: 0 0.68vw 0.29vw; margin: 0 0.49vw; font-size: 1.56vw; }
    .suda-bo-chkall{ gap: 0.59vw; margin: 0 0 0.98vw; padding-left: 2.93vw; font-size: 1.27vw; }
    .suda-bo-chkall label{ gap: 0.59vw; }
    .suda-bo-chk{ padding-left: 2.93vw; }
}
@media (max-width: 768px){
    .suda-bo-top-row{ flex-direction: column; align-items: flex-start; margin-bottom: 2.60vw; }
    .suda-bo-result{ font-size: 2.08vw; }
    .suda-bo-search{ width: 100%; height: 6.51vw; }
    .suda-bo-sfl-btn{ gap: 0.78vw; padding: 0 2.34vw; font-size: 1.82vw; }
    .suda-bo-sfl-btn i{ font-size: 1.43vw; }
    .suda-bo-sfl-list{ top: calc(100% + 1.04vw); min-width: 15.63vw; padding: 0.78vw; border-radius: 1.56vw; }
    .suda-bo-sfl-list li{ padding: 1.30vw 1.56vw; border-radius: 1.04vw; font-size: 1.82vw; }
    .suda-bo-search input[type="text"]{ padding: 0 2.34vw; font-size: 1.82vw; width: auto; flex: 1; }
    .suda-bo-search-btn{ flex-basis: 5.08vw; width: 5.08vw; height: 5.08vw; margin-right: 0.78vw; font-size: 1.82vw; }
    .suda-bo-row-link{ gap: 2.60vw; padding: 3.91vw; }
    .suda-bo-num{ flex-basis: 7.29vw; font-size: 2.08vw; }
    .suda-bo-subject .bo_tit{ font-size: 2.34vw; }
    .suda-bo-meta{ font-size: 1.82vw; }
    .suda-bo-date{ font-size: 2.08vw; }
    .pg_wrap{ margin-top: 9.11vw; }
    .pg a.pg_page,
    .pg strong.pg_current{ padding: 0 0.91vw 0.39vw; margin: 0 0.65vw; font-size: 2.08vw; }
    .suda-bo-chkall{ gap: 0.78vw; margin: 0 0 1.30vw; padding-left: 3.91vw; font-size: 1.69vw; }
    .suda-bo-chkall label{ gap: 0.78vw; }
    .suda-bo-chk{ padding-left: 3.91vw; }
}
@media (max-width: 480px){
    .suda-bo-top-row{ margin-bottom: 4.17vw; }
    .suda-bo-result{ font-size: 3.33vw; }
    .suda-bo-search{ height: 10.42vw; }
    .suda-bo-sfl-btn{ gap: 1.25vw; padding: 0 3.75vw; font-size: 2.92vw; }
    .suda-bo-sfl-btn i{ font-size: 2.29vw; }
    .suda-bo-sfl-list{ top: calc(100% + 1.67vw); min-width: 25.00vw; padding: 1.25vw; border-radius: 2.50vw; }
    .suda-bo-sfl-list li{ padding: 2.08vw 2.50vw; border-radius: 1.67vw; font-size: 2.92vw; }
    .suda-bo-search input[type="text"]{ padding: 0 3.75vw; font-size: 2.92vw; }
    .suda-bo-search-btn{ flex-basis: 8.13vw; width: 8.13vw; height: 8.13vw; margin-right: 1.25vw; font-size: 2.92vw; }
    .suda-bo-row-link{ gap: 3.33vw; padding: 6.25vw; }
    .suda-bo-num{ flex-basis: auto; text-align: left; font-size: 3.33vw; }
    .suda-bo-subject .bo_tit{ font-size: 3.75vw; white-space: normal; }
    .suda-bo-date{ font-size: 3.33vw; }
    .suda-bo-row-link{ flex-wrap: wrap; }
    .suda-bo-subject{ order: 2; flex-basis: 100%; margin-top: 0.83vw; }
    /* 번호 / 제목 / 날짜를 세 줄로: 날짜는 제목과 같은 시작점 (예전 margin-left 13.75vw + 100% 폭이 화면 밖으로 넘쳤음) */
    .suda-bo-date{ order: 3; flex-basis: 100%; margin-left: 0; margin-top: -1.67vw; }
    .suda-bo-meta{ flex-wrap: wrap; row-gap: 0.83vw; font-size: 2.92vw; }
    .pg_wrap{ margin-top: 14.58vw; }
    .pg a.pg_page,
    .pg strong.pg_current{ padding: 0 1.46vw 0.63vw; margin: 0 1.04vw; font-size: 3.33vw; }
    .suda-bo-chkall{ gap: 1.25vw; margin: 0 0 2.08vw; padding-left: 6.25vw; font-size: 2.71vw; }
    .suda-bo-chkall label{ gap: 1.25vw; }
    .suda-bo-chk{ padding-left: 6.25vw; }
}

/* ---------- 상세(뷰) : 동남기업(dongnamad.co.kr) boardview 페이지와 폰트크기·컬러까지 동일하게 맞춤
   (원본 CSS: html{font-size:10px} 기준 1rem=10px로 환산. --color-text1:#161616, --color-text2:#222222,
   --color-text3:#333333, --color-g-text:#bababa) ---------- */
#bo_v{ margin: 0 auto; }
/* 고객센터 섹션 제목 줄(.suda-bo-top-row)은 리스트/글쓰기 화면과 완전히 같은 클래스를 쓰므로
   여기서 따로 스타일을 더 얹지 않는다(css/gnb.css의 공통 정의 그대로) */
.suda-bo-v-date{ font-size: 18px; color: #bababa; font-weight: 400; margin: 0; }

/* 분류 배너 - 1:1문의내역 뷰페이지의 회색 알약 배너(qa/basic/style.css .suda-qa-category-banner)와
   동일한 톤. 작성자/작성일 목록 바로 아래, 제목/메타 박스 안에 표시 */
.suda-bo-v-category-banner{ padding: 8px 14px; background: var(--suda-gray-50); color: var(--suda-gray-700); font-size: 14px; font-weight: 600; }

.suda-bo-v-tit-info-wrap{ padding: 20px; border-top: 1px solid #222; border-bottom: 1px solid #eee; }
.suda-bo-v-tit-box{ margin: 0 0 16px; }
#bo_v_title{ margin: 0; font-size: 30px; font-weight: 700; line-height: 1.4; color: #161616; text-align: left; }

.suda-bo-v-meta{ display: flex; flex-wrap: wrap; gap: 12px 25px; list-style: none; margin: 0; padding: 0; }
.suda-bo-v-meta li{ display: flex; align-items: center; font-size: 16px; color: #161616; }
.suda-bo-v-meta .lbl{ font-weight: 600; margin-right: 6px; }
.suda-bo-v-meta .val{ color: inherit; }
.suda-bo-v-meta a{ display: flex; align-items: center; color: inherit; text-decoration: none; }
.suda-bo-v-meta a:hover{ color: var(--suda-blue); }

#bo_v_con{ margin-top: 60px; padding: 0 20px; font-size: 16px; line-height: 1.6; color: #161616; }

/* ---------- 이전글/다음글 ---------- */
.suda-bo-v-nav{ display: flex; flex-direction: column; margin: 60px 0; }
.suda-bo-v-nav-item{ display: flex; align-items: center; padding: 20px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; text-decoration: none; color: #161616; }
.suda-bo-v-nav-item:nth-child(even){ border-top: 0; }
.suda-bo-v-nav-item:hover{ text-decoration: none; }
.suda-bo-v-nav-item .lbl{ flex: 0 0 100px; font-size: 16px; font-weight: 600; color: #161616; }
.suda-bo-v-nav-item .tit{ flex: 1; font-size: 16px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suda-bo-v-nav-item:hover .tit{ color: #222; }
.suda-bo-v-nav-item.is-empty{ color: #bababa; cursor: default; }
.suda-bo-v-nav-item.is-empty .tit{ color: #bababa; }

/* ---------- 하단 액션 : 왼쪽 수정/삭제, 오른쪽 목록/글쓰기 ---------- */
.suda-bo-v-bottom-actions{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 32px 0 0; }
.suda-bo-v-bottom-left,
.suda-bo-v-bottom-right{ display: flex; gap: 8px; }
.suda-bo-v-action-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid var(--suda-gray-200);
    background: #fff;
    color: var(--suda-gray-700);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.suda-bo-v-action-btn:hover{ background: var(--suda-gray-50); text-decoration: none; }
.suda-bo-v-action-btn.is-primary{ background: var(--suda-blue); border-color: var(--suda-blue); color: #fff; }
.suda-bo-v-action-btn.is-primary:hover{ background: var(--suda-blue-dark); border-color: var(--suda-blue-dark); }

@media (max-width: 1024px){
    .suda-bo-v-date{ font-size: 1.76vw; }
    .suda-bo-v-tit-info-wrap{ padding: 1.95vw; }
    .suda-bo-v-tit-box{ margin-bottom: 1.56vw; }
    #bo_v_title{ font-size: 2.93vw; }
    .suda-bo-v-meta{ gap: 1.17vw 2.44vw; }
    .suda-bo-v-meta li{ font-size: 1.56vw; }
    .suda-bo-v-meta .lbl{ margin-right: 0.59vw; }
    #bo_v_con{ margin-top: 5.86vw; padding: 0 1.95vw; font-size: 1.56vw; }
    .suda-bo-v-nav{ margin: 5.86vw 0; }
    .suda-bo-v-nav-item{ padding: 1.95vw; }
    .suda-bo-v-nav-item .lbl{ flex-basis: 9.77vw; font-size: 1.56vw; }
    .suda-bo-v-nav-item .tit{ font-size: 1.56vw; }
    .suda-bo-v-bottom-actions{ margin-top: 3.13vw; gap: 1.17vw; }
    .suda-bo-v-bottom-left,
    .suda-bo-v-bottom-right{ gap: 0.78vw; }
    .suda-bo-v-action-btn{ height: 5.08vw; padding: 0 1.95vw; border-radius: 0.98vw; font-size: 1.56vw; }
}
@media (max-width: 768px){
    .suda-bo-v-date{ font-size: 2.34vw; }
    .suda-bo-v-tit-info-wrap{ padding: 2.60vw; }
    .suda-bo-v-tit-box{ margin-bottom: 2.08vw; }
    #bo_v_title{ font-size: 3.91vw; }
    .suda-bo-v-meta{ gap: 1.56vw 3.26vw; }
    .suda-bo-v-meta li{ font-size: 2.08vw; }
    .suda-bo-v-meta .lbl{ margin-right: 0.78vw; }
    #bo_v_con{ margin-top: 7.81vw; padding: 0 2.60vw; font-size: 2.08vw; }
    .suda-bo-v-nav{ margin: 7.81vw 0; }
    .suda-bo-v-nav-item{ padding: 2.60vw; flex-direction: column; align-items: flex-start; gap: 0.52vw; }
    .suda-bo-v-nav-item .lbl{ flex-basis: auto; font-size: 2.08vw; }
    .suda-bo-v-nav-item .tit{ font-size: 2.08vw; }
    .suda-bo-v-bottom-actions{ margin-top: 4.17vw; gap: 1.56vw; }
    .suda-bo-v-bottom-left,
    .suda-bo-v-bottom-right{ gap: 1.04vw; }
    .suda-bo-v-action-btn{ height: 6.77vw; padding: 0 2.60vw; border-radius: 1.30vw; font-size: 2.08vw; }
}
@media (max-width: 480px){
    .suda-bo-v-date{ font-size: 3.75vw; }
    .suda-bo-v-tit-info-wrap{ padding: 4.17vw; }
    .suda-bo-v-tit-box{ margin-bottom: 3.33vw; }
    #bo_v_title{ font-size: 6.25vw; }
    .suda-bo-v-meta{ gap: 2.50vw 5.21vw; }
    .suda-bo-v-meta li{ font-size: 3.33vw; }
    .suda-bo-v-meta .lbl{ margin-right: 1.25vw; }
    #bo_v_con{ margin-top: 12.50vw; padding: 0 4.17vw; font-size: 3.33vw; }
    .suda-bo-v-nav{ margin: 12.50vw 0; }
    .suda-bo-v-nav-item{ padding: 4.17vw; flex-direction: column; align-items: flex-start; gap: 0.83vw; }
    .suda-bo-v-nav-item .lbl{ flex-basis: auto; font-size: 3.33vw; }
    .suda-bo-v-nav-item .tit{ font-size: 3.33vw; white-space: normal; }
    .suda-bo-v-bottom-actions{ flex-direction: column; align-items: stretch; margin-top: 6.67vw; gap: 2.08vw; }
    .suda-bo-v-bottom-left,
    .suda-bo-v-bottom-right{ gap: 1.67vw; }
    .suda-bo-v-bottom-left .suda-bo-v-action-btn,
    .suda-bo-v-bottom-right .suda-bo-v-action-btn{ flex: 1; }
    .suda-bo-v-action-btn{ height: 10.83vw; padding: 0 4.17vw; border-radius: 2.50vw; font-size: 3.33vw; }
}