@charset "utf-8";
/* =========================================================
   베이직 테마 반응형 오버라이드
   - default.css / default_shop.css 다음에 로드됩니다.
   - 원본 CSS는 건드리지 않고 이 파일에서만 덮어씁니다.
   - 브레이크포인트: 1200 / 1024 / 768 / 480
   ========================================================= */

/* ---------------------------------------------------------
   1. 고정폭 해제
   --------------------------------------------------------- */
#hd, #wrapper, #ft {min-width:0}

#hd_pop,
#hd_wrapper,
#tnb .inner,
#gnb .gnb_wrap,
#container_wr,
#ft_copy {
    width:100%;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding-left:20px;
    padding-right:20px;
    box-sizing:border-box;
}
#ft_wr {width:100%;max-width:1240px;padding-left:20px;padding-right:20px;box-sizing:border-box}
#ft_copy {clear:both}   /* 하단 컬럼 float 해제 (원본 겹침 현상 보정) */

img, video {max-width:100%}
#container img, #bo_v_con img, .view_image img {height:auto}
#container iframe, #bo_v_con iframe {max-width:100%}
.frm_input, .full_input, textarea {max-width:100%;box-sizing:border-box}

/* ---------------------------------------------------------
   2. 본문 / 사이드바
   --------------------------------------------------------- */
#container {width:calc(100% - 255px);box-sizing:border-box}
#aside {box-sizing:border-box}

@media (max-width:1024px) {
    #container, #aside {float:none;width:100%;margin-left:0;margin-right:0}
    #container {margin:20px 0 0}
    #aside {margin:30px 0 20px}
}

/* ---------------------------------------------------------
   3. 헤더 (tnb / 로고 / 검색 / 로그인)
   --------------------------------------------------------- */
@media (max-width:1024px) {
    #hd_wrapper {height:auto;padding-top:20px;padding-bottom:20px}
    #logo {float:none;padding:0;text-align:center}
    #logo img {max-height:42px;width:auto}

    .hd_sch_wr {float:none;width:100%;margin:16px 0 0;padding:0}
    #hd_sch #sch_stx {width:calc(100% - 60px);font-size:1em}
    #popular {display:none} /* 인기검색어(오울 캐러셀)는 좁은 화면에서 숨김 */

    .hd_login {position:static;margin-top:14px;text-align:center;font-size:0}
    .hd_login li {display:inline-block;float:none;font-size:14px}
}

@media (max-width:768px) {
    #tnb .inner {padding-top:4px;padding-bottom:4px}
    #hd_define, #hd_qnb {float:none;text-align:center;font-size:0}
    #hd_define li, #hd_qnb li {display:inline-block;float:none;font-size:13px;margin:8px 8px 8px 0}
    /* 좁은 화면에서 우선순위 낮은 항목 정리 */
    #hd_qnb .visit {display:none}
}

@media (max-width:480px) {
    #logo img {max-height:34px}
}

/* ---------------------------------------------------------
   4. GNB — 1024 이하에서는 햄버거(전체메뉴)만 노출
   --------------------------------------------------------- */
@media (max-width:1024px) {
    #gnb #gnb_1dul {border-bottom:1px solid #e0e2e5;min-height:55px}
    #gnb .gnb_1dli {display:none}
    #gnb .gnb_1dli.gnb_mnal {display:block;float:left}
    #gnb .gnb_menu_btn {width:56px}

    #gnb_all {position:fixed;top:0;left:0;width:100%;height:100%;max-width:360px;
              border:0;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:1001}
    #gnb_all h2 {padding:18px 20px}
    #gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
    #gnb_all .gnb_al_li {float:none;width:100%;min-height:0;padding:16px 20px;
                         border-left:0;border-bottom:1px solid #e7eeef}
    #gnb_all .gnb_al_li .gnb_al_a {margin-bottom:6px}
    #gnb_all_bg {background:rgba(0,0,0,0.4)}
}

/* ---------------------------------------------------------
   5. 메인 최신글 영역
   --------------------------------------------------------- */
.latest_grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.latest_grid .lt_wr {width:auto;float:none;margin:0}

@media (max-width:1024px) {
    .latest_grid {grid-template-columns:repeat(2,1fr)}
    .pic_lt li {width:33.3333%}          /* pic_basic(20%) / pic_block(25%) 공통 */
    .pic_lt li:nth-child(3n+1) {clear:both}
    .pic_li_lt {width:50%}
    .pic_li_lt:nth-child(2n+1) {clear:both}
}

@media (max-width:768px) {
    .latest_grid {grid-template-columns:1fr;gap:16px}
    .pic_lt li {width:50%}
    .pic_lt li:nth-child(3n+1) {clear:none}
    .pic_lt li:nth-child(2n+1) {clear:both}
    .pic_li_lt {width:100%;float:none}
    .latest_top_wr, .latest_wr {margin-left:0;margin-right:0}
}

@media (max-width:480px) {
    .pic_lt li {width:100%;float:none}
}

/* 카드형 외형 (스크린샷 스타일 참고) */
.pic_lt li, .pic_li_lt {box-sizing:border-box}
.pic_lt li .lt_img img {border-radius:8px}
.latest_grid .lt_wr {border:1px solid #ecedf1;border-radius:10px;padding:4px 16px 12px;background:#fff}

/* ---------------------------------------------------------
   6. 게시판
   --------------------------------------------------------- */
/* 목록 테이블: 열이 게시판 설정에 따라 가변이므로 가로 스크롤로 처리 */
@media (max-width:768px) {
    .tbl_head01.tbl_wrap {overflow-x:auto;-webkit-overflow-scrolling:touch}
    .tbl_head01.tbl_wrap > table {min-width:600px}

    #bo_list_total {float:none;display:block;margin-bottom:8px}
    .btn_bo_user {float:none;overflow:hidden}
    .btn_bo_user li {float:left}
    .bo_fx {float:none}

    #bo_cate li {padding:2px 1px}
    #bo_cate a {padding:4px 12px;font-size:0.92em}

    #bo_v_title {font-size:1.4em;line-height:1.4}
    #bo_v_info .sv_member, #bo_v_info strong {margin-right:8px}
    #bo_v_sns li {width:auto;float:none;margin:0 0 5px}
    #bo_vc article .cm_wrap {float:none;width:100%;max-width:100%}

    /* 검색 레이어 중앙정렬 보정 */
    .bo_sch {width:92%;left:4%;margin-left:0;transform:translateY(-50%);top:50%;margin-top:0}
    .bo_sch .sch_input {width:calc(100% - 60px)}
    #autosave_pop {width:100%}
}

/* 글쓰기 / 회원가입 등 입력 폼 테이블: 모바일에서 세로 스택 */
@media (max-width:768px) {
    .tbl_frm01 table, .tbl_frm01 tbody, .tbl_frm01 tr,
    .tbl_frm01 th, .tbl_frm01 td {display:block;width:100%;box-sizing:border-box}
    .tbl_frm01 th {text-align:left;border:0;padding:12px 0 6px;background:none}
    .tbl_frm01 td {border:0;padding:0 0 12px}
    .tbl_frm01 tr {border-bottom:1px solid #f0f0f0}
    .form_01 .frm_label {display:block;width:100%;margin-bottom:4px}
    .twopart_input {width:100%;margin-right:0}
    #captcha.m_captcha #captcha_img {max-width:100%}
    .btn_confirm .btn_submit, .btn_confirm .btn_cancel {width:100%;margin:4px 0}
}

/* ---------------------------------------------------------
   7. 푸터 : float -> grid 로 교체 (컬럼 높이 차이로 겹치는 문제 해결)
   --------------------------------------------------------- */
#ft_wr {display:grid;grid-template-columns:repeat(4,1fr);gap:0 20px;text-align:left}
#ft_wr .ft_cnt {float:none;width:auto;padding:0}
#ft_wr > script {display:none}
#ft_copy {grid-column:1 / -1;width:100%;padding-top:20px}

@media (max-width:1024px) {
    #ft_wr {grid-template-columns:repeat(2,1fr);gap:0 20px}
}

@media (max-width:768px) {
    #ft_wr {grid-template-columns:1fr;padding-top:30px;padding-bottom:30px}
    #ft_wr .ft_cnt {padding:0 0 24px}
    #top_btn {width:42px;height:42px;line-height:38px;bottom:14px;right:14px}
}

/* ---------------------------------------------------------
   8. 쇼핑몰 최소 대응 (사용 시)
   --------------------------------------------------------- */
@media (max-width:768px) {
    #sit_pvi, #sit_ov_wrap {float:none;width:100%}
    .sct li, .sct_li {width:50% !important;box-sizing:border-box}
    #sod_bsk .tbl_head01.tbl_wrap {overflow-x:auto}
}