@charset "utf-8";
/* SIR */

/* ### 기본 스타일 커스터마이징 시작 ### */

/* 게시판 버튼 */
/* 목록 버튼 */
#bo_list a.btn_b01 {}
#bo_list a.btn_b01:focus, #bo_list .btn_b01:hover {}
#bo_list a.btn_b02 {}
#bo_list a.btn_b02:focus, #bo_list .btn_b02:hover {}
#bo_list a.btn_admin {} /* 관리자 전용 버튼 */
#bo_list a.btn_admin:focus, #bo_list a.btn_admin:hover {}

/* 읽기 버튼 */
#bo_v a.btn_b01 {border-radius:3px;}
#bo_v a.btn_b01:focus, #bo_v .btn_b01:hover {}
#bo_v a.btn_b02 {background:#aea18c;border-radius:3px;border:1px solid #aea18c;}
#bo_v a.btn_b02:focus, #bo_v .btn_b02:hover {}
#bo_v a.btn_admin {background-color: #cc6654;border: 1px solid #cc6654;border-radius: 3px;} /* 관리자 전용 버튼 */
#bo_v a.btn_admin:focus, #bo_v a.btn_admin:hover {}

/* 쓰기 버튼 */
#bo_w .bd{border:1px solid #e9e9e9; padding:20px 0;margin:20px 0;border-radius:3px}
#bo_w .btn_confirm {} /* 서식단계 진행 */
#bo_w .btn_submit {width:90px;height:37px;line-height: 20px;font-size: 14px !important;vertical-align:baseline}
#bo_w .btn_cancel {}
#bo_w .btn_frmline {} /* 우편번호검색버튼 등 */

/* 기본테이블 */
/* 목록 테이블 */
#bo_list .tbl_head01 {}
#bo_list .tbl_head01 caption {}
#bo_list .tbl_head01 thead th {}
#bo_list .tbl_head01 thead a {}
#bo_list .tbl_head01 thead th input {} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
#bo_list .tbl_head01 tfoot th {}
#bo_list .tbl_head01 tfoot td {}
#bo_list .tbl_head01 tbody th {}
#bo_list .tbl_head01 td {}
#bo_list .tbl_head01 a {}
#bo_list td.empty_table {}

/* 읽기 내 테이블 */
#bo_v .tbl_head01 {}
#bo_v .tbl_head01 caption {}
#bo_v .tbl_head01 thead th {}
#bo_v .tbl_head01 thead a {}
#bo_v .tbl_head01 thead th input {} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
#bo_v .tbl_head01 tfoot th {}
#bo_v .tbl_head01 tfoot td {}
#bo_v .tbl_head01 tbody th {}
#bo_v .tbl_head01 td {}
#bo_v .tbl_head01 a {}
#bo_v td.empty_table {}

/* 쓰기 테이블 */
#bo_w table {}
#bo_w caption {}
#bo_w .frm_address {}
#bo_w .frm_file {}
#bo_w .frm_info {}

#bo_w .tbl_frm01 {}
#bo_w .tbl_frm01 caption {display:none}
#bo_w .tbl_frm01 th {border-right:1px solid #e9e9e9 !important;border-bottom: 1px solid #e9e9e9 !important;border-top:0 !important}
#bo_w .tbl_frm01 td {}
#bo_w .tbl_frm01 textarea, #bo_w .frm_input {}
#bo_w .tbl_frm01 textarea {height: 300px;}
/*
#bo_w .tbl_frm01 #captcha {}
#bo_w .tbl_frm01 #captcha input {}
*/
#bo_w .tbl_frm01 a {}

#bo_w .required, #bo_w textarea.required {}

/* ### 기본 스타일 커스터마이징 끝 ### */

/* 게시판 목록 */
#bo_list .td_chk {width:30px;text-align:center}
#bo_list .td_group {width:100px;text-align:center}
#bo_list .td_board {width:120px;text-align:center}
#bo_list .td_num {width:50px;text-align:center}
#bo_list .td_numbig {width:80px;text-align:center}
#bo_list .td_mb_id {width:100px;text-align:center}
#bo_list .td_nick {width:100px;text-align:center}
#bo_list .td_name {width:100px;text-align:left}
#bo_list .td_date {width:60px;text-align:center}
#bo_list .td_datetime {width:150px;text-align:center}
#bo_list .td_mng {width:80px;text-align:center}

#bo_cate h2 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {margin:5px 10px;padding-left:1px;zoom:1}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {float:left;margin-bottom:-1px;width:25%}
#bo_cate a {display:block;position:relative;margin-left:-1px;padding:5px 0;border:1px solid #ddd;background:#f7f7f7;color:#888;text-align:center;text-decoration:none;letter-spacing:-0.1em}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none}
#bo_cate #bo_cate_on {z-index:2;border:1px solid #565e60;background:#fff;color:#565e60;font-weight:bold}

/* 관리자일 때 */
#bo_list_admin th label {position:absolute;font-size:0;line-height:0;overflow:hidden}

#bo_list_admin th:nth-of-type(1) {width:40px}
#bo_list_admin th:nth-of-type(3) {width:60px}

#bo_list_admin td:nth-of-type(1) {text-align:center}
#bo_list_admin td:nth-of-type(3) {text-align:center}

/* 관리자가 아닐 때 */
#bo_list th:nth-of-type(2) {width:100px}

#bo_list td:nth-of-type(2) {text-align:center}

/* 게시판 목록 공통 */
.bo_fx {margin-bottom:5px;padding:5px 10px}
.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;padding:0;height:2.5em;line-height:2.5em}
.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;margin-left:5px}
.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:5px}
.btn_bo_adm input {padding:8px;border:0;background:#cc6654;color:#fff;text-decoration:none;vertical-align:middle;border-radius:3px}
.bo_notice td {background:#f7f7f7}
.bo_notice td a {font-weight:bold}
.td_num strong {color:#000}
.bo_cate_link {display:inline-block;margin:0 3px 0 0;padding:0 6px 0 0;border-right:1px solid #e7f1ed;color:rgb(255, 0, 0) !important;font-weight:bold;text-decoration:none} /* 글제목줄 분류스타일 */
.bo_current {color:#e8180c}
.td_subject a {display:block}
.td_subject img {margin-left:3px}
#bo_list .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold}

#bo_sch {margin-bottom:10px;padding-top:5px;text-align:center}
#bo_sch legend{width:0 !important}
#bo_sch select{border-radius:3px;border:1px solid #ebe6de;padding:5px 10px;}
#bo_sch input{padding:6px 8px 4px 8px;border: 0;background: #cc6654;border: 1px solid #cc6654;color: #fff;border-radius: 3px !important;}
#bo_sch button.btn_submit2{background:#cc6654;border:1px solid #cc6654;color:#fff;border-radius: 3px;padding:5px 8px;vertical-align:bottom}
#bo_sch .frm_input{border-radius:3px !important;border:1px solid #e4eaec;background:#f7f7f7;color:#000;-webkit-appearance:none;padding:6px 10px 4px 10px;}



/* 게시판 쓰기 */
#bo_w #wr_email, #bo_w #wr_homepage, #bo_w #wr_subject {width: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}

#wr_email, #wr_homepage, #wr_subject, .wr_link {width:100%}

/* 게시판 읽기 */
#bo_v {margin-bottom:15px;padding-bottom:15px}

#bo_v_table {padding:20px 0;color:#aea18c;background:#fbfbfb !important;font-size:1.2em;font-weight:bold;text-align:center;background:#fff;border-bottom:1px solid #e9e9e9;}

#bo_v_title {padding:20px 0;font-size: 20px;border-bottom:1px solid #e9e9e9}

#bo_v_info {padding:0 0 10px;border-bottom:1px solid #ddd}
#bo_v_info h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_info {}
#bo_v_info strong {display:inline-block;margin:0 0 0 5px;font-weight:normal}

#bo_v_file {}
#bo_v_file h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_file ul {margin:0;padding-left: 10px 10;;list-style:none}
#bo_v_file li {padding:0 10px;border-bottom:1px solid #eee;background:#f7f7f7}
#bo_v_file a {display:inline-block;padding:5px 0;color:#000;text-decoration:none}
#bo_v_file a:focus, #bo_v_file a:hover, #bo_v_file a:active {text-decoration:none}
.bo_v_file_cnt {display:inline-block;margin:0 10px}

#bo_v_link {}
#bo_v_link h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_link ul {margin:0;padding:0;list-style:none}
#bo_v_link li {padding:0 10px;border-bottom:1px solid #eee;background:#f7f7f7}
#bo_v_link a {display:inline-block;padding:5px 0;color:#000;text-decoration:none}
#bo_v_link a:focus, #bo_v_link a:hover, #bo_v_link a:active {text-decoration:none}
.bo_v_link_cnt {display:inline-block;margin:0 10px}

#bo_v_top {margin:0 0 10px;padding:10px}
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_top ul {margin:0;padding:0;list-style:none}

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

.bo_v_nb {float:left}
.bo_v_nb li {float:left;margin-right:5px}
.bo_v_com {float:right}
.bo_v_com li {float:left;margin-left:5px}

#bo_v_atc {padding:0 10px;min-height:200px}
#bo_v_atc_title {margin:0;padding:0;height:0;overflow:hidden}

#bo_v_img {margin:0 0 10px;width:100%;overflow:hidden;zoom:1}
#bo_v_img:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_img img {margin-bottom:15px;max-width:100%;height:auto}

#bo_v_con {margin-bottom:20px;width:100%;font-size:1.250em;line-height:1.7em;word-break:break-all;overflow:hidden}
#bo_v_con a {color:#000;text-decoration:underline}
#bo_v_con img {max-width:100%;height:auto}

#bo_v_act {position:relative;margin-bottom:20px;text-align:center}
#bo_v_act a {margin-right:5px;vertical-align:middle}
#bo_v_act strong {color:#ff3061}
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;right:10%;padding:10px 0;width:165px;background:#ff3061;color:#fff;text-align:center}

#bo_v_sns {margin:0 0 20px;padding:0;list-style:none;zoom:1}
#bo_v_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_sns li {float:left;margin:0 5px 0 0}

/* 게시판 댓글 */
#bo_vc {margin:0 0 20px;border-top:1px solid #dde4e9}
#bo_vc h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_vc .member{color:#cc6654;}
#bo_vc article {padding:0 0 5px;border-top:1px dotted #ccc}
#bo_vc article form{background:#fff;border:1px solid #dde4e9;border-radius:3px;padding-top:20px}
#bo_vc article form .btn_confirm{margin: 0 0 15px;}
#bo_vc article form .tbl_wrap {margin:0 0 10px;}
#bo_vc header {position:relative;padding:13px 0 5px}
#bo_vc header .icon_reply {position:absolute;top:13px;left:-20px}
#bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
.bo_vc_hdinfo {display:inline-block;margin:0 10px 0 5px}
#bo_vc h1 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_vc a {color:#000;text-decoration:none}
#bo_vc p {padding:0 0 5px;line-height:1.8em}
#bo_vc p a {text-decoration:underline}
#bo_vc p a.s_cmt {text-decoration:none}
#bo_vc_empty {margin:0;padding:15px !important;text-align:center}
#bo_vc #bo_vc_winfo {float:left}
#bo_vc footer {zoom:1}
#bo_vc footer:after {display:block;visibility:hidden;clear:both;content:""}

.bo_vc_act {float:right;margin-top:10px;list-style:none}
.bo_vc_act:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_act li {float:left;margin-left:5px;display:inline-block;padding:8px 7px 7px;border:1px solid #d9ded9;color:#000;text-decoration:none;vertical-align:middle;background:#fff;border-radius:3px}

#bo_vc_w {position:relative;margin-bottom:10px;}
#bo_vc_w:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc_w h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_vc_w .tbl_wrap {margin:0 0 15px}
#bo_vc_w .auto-rp{margin-top:10px;float:left}
#bo_vc_w .no-mem{display:inline-block;margin-top:10px;margin-left:20px}
#bo_vc_w #char_cnt {display:block;margin-bottom:5px}
#bo_vc_w textarea {width:85%}

#bo_vc_sns {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 10px 0 0}
#bo_vc_sns input {margin:0 0 0 5px}

/* 최근게시물 공지 스킨 (latest) */
.notice:after {display:block;visibility:hidden;clear:both;content:""}
.notice {clear:both;position:relative;padding:0 100px;margin-bottom:20px;height:60px;line-height:58px;overflow:hidden;border:1px solid #226ce9;background:#317af6}
.notice li {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:1.2em}
.notice li a {float:left;color:#fff}
.notice li .lock_icon {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #a2c6ce;vertical-align:top}
.notice li .new_icon {line-height:16px;background:#3fd49e;border:1px solid #32c791;font-size:0.833em;color:#fff;padding:0 5px;width:16px;height:16px;border-radius:3px;margin-left:5px;text-align:center;vertical-align:middle}	
.notice li .cnt_cmt {line-height:16px;background:#fff;border:1px solid #cdcdcd;font-size:0.833em;color:#3598dc;padding:0 5px;width:16px;height:16px;border-radius:10px;margin-left:5px;text-align:center;vertical-align:middle}

.notice h2 {display:inline-block;position:absolute;left:0;line-height:58px;padding:0 20px;font-size:1.2em}
.notice h2 a {display:inline-block;line-height:35px;border-radius:25px;color:#fff;text-align:center;color:#fff}
.notice h2 i {display:inline-block;margin-left:5px}
.notice .bx-controls a {color:#fff;font-size:1.5em}
.notice .bx-next {position:absolute;top:24px;right:10px;width:35px;height:35px;line-height:30px;text-align:center;border:1px solid #639cfe;margin-top:-12px}
.notice .bx-prev {position:absolute;top:24px;right:44px;width:35px;height:35px;line-height:30px;text-align:center;border:1px solid #639cfe;margin-top:-12px}


/* 🔽 이거 하나만 남기세요 */
.bo_cate_link {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px 5px 0;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333 !important;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    
    white-space: nowrap;         /* ✅ 줄바꿈 방지 */
    max-width: 100%;             /* ✅ 부모의 너비에 맞추기 */
    overflow: hidden;            /* ✅ 넘치면 숨기기 */
    text-overflow: ellipsis;     /* ✅ 넘친 글자는 ...으로 표시 */
  }
  
  
  
  .bo_cate_link:hover,
  .bo_cate_link:focus {
    background-color: #ff6959;
    border-color: #ff6959;
    color: #fff !important;
  }
  
  /* 공지글 스타일 */
  .bo_notice .bo_cate_link,
  .bo_cate_notice {
    background-color: #a67cc1 !important;
    color: #ffffff !important;
    border: 1px solid #a67cc1;
  }
  
  .bo_notice .bo_cate_link:hover,
  .bo_cate_notice:hover {
    background-color: #935dc0 !important;
    border-color: #935dc0 !important;
  }
  
  .bo_cate_main {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 4px 9px;
    background-color: #e6f0ff;
    border: 1px solid #7aaed6;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    color: #1766aa;
    vertical-align: middle;
  }
  
  .cate_group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 4px;
  }
  
  
  #bo_cate ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding: 5px 0;
    margin: 0;
  }
  
  #bo_cate li {
    float: none !important;
    width: auto !important;
    margin-right: 10px;
    flex-shrink: 0;
  }
  
  #bo_cate a {
    display: inline-block;
    padding: 6px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    transition: 0.2s;
    white-space: nowrap;
    
  }
  
  #bo_cate a:hover,
  #bo_cate #bo_cate_on {
    background: #cc6654;
    color: #fff;
    border-color: #cc6654;
  }
  
  
  /* 기본 카테고리 레이아웃 (PC: 줄바꿈) */
  #bo_cate ul {
    display: flex;
    flex-wrap: wrap;          /* ✅ 줄바꿈 허용 */
    justify-content: center;  /* ✅ 가운데 정렬 */
    gap: 10px;
    padding: 10px;
    margin: 0 auto;
    max-width: 100%;
    overflow: visible;        /* ✅ 스크롤 제거 */
    white-space: normal;      /* ✅ 줄바꿈 가능 */
  }
  
  /* 버튼 스타일 유지 */
  #bo_cate li {
    float: none !important;
    width: auto !important;
  }
  
  #bo_cate a {
    display: inline-block;
    padding: 6px 14px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    transition: 0.2s;
    white-space: nowrap;
  }
  
  #bo_cate a:hover,
  #bo_cate #bo_cate_on {
    background: #cc6654;
    color: #fff;
    border-color: #cc6654;
  }
  
  /* 모바일에서는 가로 스크롤 유지 */
  @media (max-width: 768px) {
    #bo_cate ul {
      flex-wrap: nowrap;
      overflow-x: auto;
      white-space: nowrap;
      justify-content: flex-start;
      padding: 10px 5px;
      gap: 8px;
    }
  }
  
  .btn_b01 {
    display: inline-block;
    padding: 8px 15px;
    background: #333;
    color: #fff;
    border: none;
    margin: 0 5px;
    cursor: pointer;
    font-size: 14px;
  }
  
  .btn_b01:hover {
    background: #555;
  }
  
  .btn_admin {
    display: inline-block;
    padding: 8px 15px;
    background: #666;
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
    font-size: 14px;
  }
  
  .btn_admin:hover {
    background: #444;
  }
  
  
  
  .mo_list_item {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
  }
  
  .mo_list_top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    margin-bottom: 4px;
    overflow: hidden;
  }
  
  .mo_list_bottom {
    font-size: 12px;
    color: #888;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px;
  }
  
  .badge_notice {
    font-weight: bold;
    color: #f00;
  }
  
  .badge_cate {
    font-weight: bold;
    color: #025fff;
    background: #ddc1e3;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
  }
  
  .mo_subject {
    font-weight: bold;
    color: #000;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  
  .cnt_cmt {
    margin-left: 5px;
    font-weight: normal;
    color: #555;
  }
  
  .ico_hot, .ico_new {
    font-size: 12px;
    margin-left: 3px;
  }
  
  .views {
    font-size: 12px;
    color: #222;
  }
  
  #bo_cate {
    margin: 10px 0;
    padding: 5px 10px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  #bo_cate h2 {
    font-size: 14px;
    margin-bottom: 5px;
  }
  
  #bo_cate ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
  }
  
  #bo_cate ul li a {
    padding: 4px 10px;
    display: inline-block;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
  }
  
  #bo_cate ul li a:hover,
  #bo_cate ul li a.on {
    background: #333;
    color: #fff;
    border-color: #333;
  }
  
  @media screen and (max-width: 768px) {
    .mo_list_top {
      flex-wrap: nowrap;
      flex-direction: row;
      align-items: center;
    }
    .mo_subject {
      white-space: nowrap;
      line-height: 1.4;
      word-break: break-all;
    }
    .mo_list_bottom {
      flex-direction: row;
      justify-content: flex-start;
      gap: 10px;
    }
  }
  @media (max-width: 768px) {
    .search#dvSearch {
      padding: 0 10px;
    }
    .search#dvSearch .input-group {
      flex-wrap: wrap;
      gap: 8px;
    }
    .search#dvSearch .input-group-btn {
      flex: 1 1 auto;
    }
    .search#dvSearch #btnTextSpan button {
      font-size: 14px;
      padding: 8px;
      height: auto;
      white-space: nowrap;
    }
  }
  
  /* PC 모드에서 전체 상단 wrapper 1024px 제한 */
  @media (min-width: 769px) {
    .search,
    .at-container {
      max-width: 1024px;
      margin: 0 auto;
    }
  }
  
  .area_box_in ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }
  
  .area_box_in ul li {
    width: 12.5%; /* ✅ PC: 8개 = 100% / 8 */
    box-sizing: border-box;
    text-align: center;
    padding: 6px 0;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background: #f5f5f5;
  }
  
  .area_box_in ul li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6px 0;
    text-decoration: none;
    color: #333;
  }
  
  .area_box_in ul li a:hover {
    color: #fff;
    background-color: #3dbf62;
    border-radius: 6px;
  }
  
  /* ✅ 모바일: 4개씩 2줄 (화면 폭 768px 이하) */
  @media (max-width: 768px) {
    .area_box_in ul li {
      width: 25%; /* 100% / 4 */
    }
  }
  /* === 반응형 전용 설정 === */
  .mo_only { display: block; }
  .pc_only { display: none; }
  
  @media (min-width: 1025px) {
    .mo_only { display: none !important; }
    .pc_only { display: block !important; }
  }
  
  
  /* Adjust Flexbox for Mobile */
  @media (max-width: 767px) {
    .pc_list_item {
      display: block;
      padding: 12px 8px;
      border-bottom: 1px solid #eee;
    }
  
    .title-area {
      font-size: 14px;
      overflow: visible;
      white-space: normal;
      text-overflow: unset;
    }
  
    .views {
      font-size: 12px;
    }
  
    .ico_new,
    .ico_hot {
      margin-left: 0;
    }
  
    /* Add responsiveness for the container */
    .at-container {
      padding: 10px;
      margin: 0 auto;
    }
  
    /* Fix button and category spacing for mobile */
    .btn-wrapper {
      gap: 6px;
    }
  }
  
  /* PC 스타일 */
  .pc_list_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }
  
  .pc_list_item .pc_only {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }
  
  /* 모바일에서 모든 게시글 보이기 */
  @media (max-width: 768px) {
    .pc_only {
        display: block !important; /* 모바일에서도 PC 게시글 보이게 */
    }
  
    .mo_list_item {
        display: block; /* 모바일에서 모든 게시글 보이게 */
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
  
    .mo_list_top {
        font-weight: bold;
        font-size: 14px;
    }
  
    .mo_list_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
  
    .mo_list_bottom .views {
        font-size: 12px;
    }
  }
  
  
  /* 상단 고정된 게시글 */
  .sticky {
    position: sticky;
    top: 0;  /* 화면 상단에 고정 */
    z-index: 1000;  /* 다른 요소들 위에 배치 */
    background-color: #f0f0f0;  /* 배경색 설정 */
    border: 1px solid #ccc;  /* 테두리 추가 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* 그림자 효과 */
  }
  
  
  
  /* 공통 버튼 스타일 */
  .biz-list li,
  .area-top-list li,
  .area-low-list li {
    display: inline-block;
    margin: 4px;
  }
  
  .biz-list li a,
  .area-top-list li a,
  .area-low-list li a {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
  }
  
  .biz-list li a:hover,
  .area-top-list li a:hover,
  .area-low-list li a:hover {
    background-color: #3dbf62;
    color: #fff;
    border-color: #3dbf62;
  }
  
  /* 선택된 상태 */
  .biz-list li.selected a,
  .area-low-list li.selected a {
    background-color: #3dbf62;
    color: #fff;
    border-color: #3dbf62;
  }
  
  /* 각 리스트 가로 정렬 */
  .biz-list,
  .area-top-list,
  .area-low-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    gap: 8px;
  }
  
  .biz-list, .area-top-list, .area-low-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0;
    list-style: none;
  }
  
  .biz-list li, .area-top-list li, .area-low-list li {
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f5f5f5;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  
  .biz-list li.selected,
  .area-top-list li.selected,
  .area-low-list li.selected,
  .biz-list li:hover,
  .area-top-list li:hover,
  .area-low-list li:hover {
    background-color: #3dbf62;
    color: #fff;
    border-color: #3dbf62;
  }
  
  /* 선택된 버튼 시각 강조 */
  .biz-list li.selected a,
  .area-top-list li.selected a,
  .area-low-list li.selected a {
    background-color: #3dbf62;
    color: #fff !important;
    border-color: #3dbf62;
  }
  
  
  @media screen and (max-width: 768px) {
    .form-group.row.pl-2 {
      flex-direction: row !important;
      align-items: center !important;
    }
  
    .form-group.row.pl-2 label {
      margin-bottom: 0 !important;
      margin-right: 6px;
      font-weight: bold;
    }
  }


  
  
/* 메인 메뉴 스타일 - 가운데 정렬 + 반응형 아이콘 크기 포함 */
.category-wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center; /* ✅ 가운데 정렬 핵심 */
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  text-align: center;
  padding: 10px 10px 10px 10px; /* top, right, bottom, left */
  background-color: #ffffff;
  box-sizing: border-box;
}

/* 크롬 등 웹킷 기반 브라우저용 스크롤 숨김 */
.category-wrap::-webkit-scrollbar {
  display: none;
}

.category-wrap a {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 14px;
  color: #333;
  width: 72px;
}

.category-wrap img {
  width: 60px;
  height: 60px;
  margin-bottom: 0px; /* 텍스트를 이미지와 더 가깝게 */
  border-radius: 18px; /* 앱 아이콘처럼 살짝 둥글게 */
  transition: all 0.3s;
  object-fit: cover;
  border: 1px solid #757575; /* 검은색 테두리 */
}


@media (max-width: 768px) {
  .category-wrap a {
    width: 60px;
    height: 65px;
    font-size: 9pt;
  }
  .category-wrap img {
      width: 60px;
      height: 50px;
      margin-bottom: 0px;
      border-radius: 18px;
      object-fit: cover;
      border: 1px solid #aaaaaa;
    }

  .category-wrap div {
    font-size: 11px;
    line-height: 1;
    height: 13px;
    margin-top: -2px;
  }

  .category-wrap {
    padding: 10px 10px 10px 125px;
  }
}

.marquee {
  width: 100%;
  overflow: hidden;
  background: #000; /* 배경 필요 시 추가 */
  padding: 10px 0;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 15s linear infinite;
}

.marquee-content a {
  margin-right: 50px;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
}

/* 애니메이션 정의 */
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

 /* 사이드바 기본 상태 */
 .sidebar {
  position: fixed;
  top: 100px;
  left: -250px; /* ← 기존 -240px에서 수정 */
  width: 250px;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 10000;
  padding: 15px 10px;
  transition: left 0.3s ease-in-out;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}


/* 열린 상태 */
.sidebar.open {
  left: 0;
}

/* X 버튼 */
.sidebar-close {
  position: absolute;
  top: -7px; /* 헤더 위로 살짝 올라오게 */
      right: 10px;
  font-size: 20px;
  color: #000000;
  cursor: pointer;
}

.sidebar-header {
  font-weight: bold;
  font-size: 16px;
  background: #f64f8c;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 6px;
  margin-bottom: 10px;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  margin-bottom: 10px;
}

.sidebar-menu a {
  display: block;
  padding: 10px;
  background: #5b5b5b;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

.sidebar-menu a:hover {
  background: #777;
}


.sidebar-expire-info {
  background: #fff3f3;
  border: 1px solid #f5c2c2;
  padding: 8px;
  margin: 5px 15px 15px 15px;
  font-size: 13px;
  border-radius: 6px;
  text-align: center;
}



.navbar-header {
  text-align: center;
  width: 100%;
}

.navbar-header h4 {
  display: block; /* 블록 요소로 만들어 전체 너비 차지 */
  text-align: center;
  margin: 0 auto; /* 자동 가운데 정렬 */
}




.navbar-left-menu {
  float: left; /* 왼쪽 정렬 */
  margin-left: 15px;
}

.navbar-left-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}


/* 모바일에서 세로 정렬 */
@media (max-width: 768px) {
  .navbar-left-menu ul {
      flex-direction: row; /* 가로 정렬 */
  }

  .navbar-left-menu li {
      text-align: left; /* 텍스트 왼쪽 정렬 */
  }
}

.navbar-left-menu li {
  padding: 10px 15px;
}

.navbar-left-menu a {
  color: white !important; /* 네비게이션 바의 기본 텍스트 색상 */
  text-decoration: white;
  font-weight: bold;
}

.navbar-left-menu a:hover {
  color: #ffcc00; /* 마우스 오버 시 색상 변경 */
}

.profile-menu {
  background: #000;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 40px !important;
  overflow: hidden;
  min-height: unset; /* 기존 min-height 제거 */
  overflow: hidden; /* 혹시 넘치는 콘텐츠 잘라냄 */
}


.profile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-menu li {
  margin: 5px 0;
}

.profile-menu a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 15px;
  outline: none;
}
.profile-menu a:focus {
  outline: none;
}

.profile-menu a:hover {
  text-decoration: underline;
}

/* PC 화면에서도 동일한 스타일 적용 */
@media (min-width: 768px) {
  .profile-menu {
      width: 100%;
      margin: 0 auto 15px;
      height: 40px; /* 고정 높이 */
      min-height: unset;
  }

 
}

.notice-banner-wrap {
  width: 100%;
  padding: 16px;
}

.notice-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #f1f3f5;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  color: #222;
  font-size: 14px;
  transition: background 0.2s;
}

.notice-banner:hover {
  background-color: #e9ecef;
}

.notice-label {
  background: #e60073;
  color: #fff;
  padding: 2px 10px;
  font-size: 13px;
  border-radius: 999px;
  font-weight: bold;
  flex-shrink: 0;
}

.notice-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*메인배너시작*/
.benefit-banner {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 0rem 0rem;
}

@media (min-width: 1025px) {
  .benefit-banner {
    padding: 5px 0 !important; /* 상하 5px, 좌우 0px */
  }
}


.benefit-banner-inner {
  width: 100%;
  max-width: 1024px;
  cursor: pointer;
}

.benefit-banner-img {
  position: relative;
  width: 100%;
  height: 308px; /* PC 기본 */
  overflow: hidden;
  border-radius: 12px;
}

.benefit-banner-img-inner {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  color: transparent;
  border-radius: 12px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .benefit-banner-img {
    height: 192px;
  }
}

/* style.css에 추가 */
.memo-alert-box {
    width: 260px;
    background: rgba(255, 64, 129, 0.85);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
    box-sizing: border-box;
    z-index: 9999;
  }
  
.recommend-section {
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Noto Sans KR', sans-serif;
}

.banner-area {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.banner-item {
  flex: 1;
  height: 140px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  border-radius: 10px;
}

.top-label {
  text-align: center;
  font-size: 32px;
  margin: 20px 0;
  font-weight: bold;
}
.top-label .highlight {
  color: #ff4081;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.card {
  width: 230px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  background-color: #fff;
}

.card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.card-info {
  padding: 10px;
}

.card-info .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1.3;
}

.card-info .price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-info .sale {
  color: #ff4081;
  font-weight: bold;
}

.card-info .amount {
  font-weight: bold;
}

.card-info .won {
  font-size: 14px;
  margin-left: 4px;
}