@charset "utf-8";
/* ============================================================
   게시판 공통 반응형 (2026-09)
   적용 스킨 : skin/board/basic, gallery, sub815, sub817
   각 스킨의 list/view/write.skin.php 에서 /css/main.css 다음에 로드한다.
   PC(1521px 이상)는 기존 모습 그대로 두고, 태블릿·모바일만 재정의한다.
     태블릿  : 769px ~ 1520px     @media (max-width:1520px)
     모바일  : 768px 이하         @media (max-width:768px)
     소형폰  : 430px 이하         @media (max-width:430px)
   ============================================================ */

@media (max-width:1520px){
	/* 게시판 상단 내용(관리자 > 게시판 > 상단 내용)의 1900px 배너 이미지 */
	#container + img{display:block;width:100%;max-width:100%;height:auto;}
	.subt3{margin-top:40px;padding-bottom:40px;}

	#bo_list, #bo_gall, #bo_v, #bo_w{width:100% !important;padding-left:4%;padding-right:4%;box-sizing:border-box;}
	#bo_v{padding-top:20px;}

	/* 본문 안 에디터 이미지·영상·표가 화면 밖으로 나가지 않게 */
	#bo_v_con *{max-width:100% !important;box-sizing:border-box;} /* 에디터가 넣은 width:1800px 같은 고정폭 div/p */
	#bo_v_con img, #bo_v_img img{max-width:100% !important;height:auto !important;}
	#bo_v_con iframe, #bo_v_con video{max-width:100%;}
	#bo_v_con table{max-width:100%;}

	/* 갤러리 : 3열 */
	#bo_gall #gall_ul{display:flex;flex-wrap:wrap;margin:10px -8px 0;}
	#bo_gall #gall_ul:after{display:none;}
	#bo_gall .gall_row .gall_li{float:none;width:33.3333%;padding:0 8px;}
	#bo_gall .gall_row .box_clear{clear:none;}
	#bo_gall .gall_box{margin-bottom:20px;}
	#bo_gall .gall_img img{display:block;width:100%;}
	#bo_gall li.empty_list{width:100%;}

	.pg_wrap{padding:30px 0 0;margin-bottom:40px;}
	.pg_page, .pg_current{min-width:32px;height:32px;line-height:32px;margin:2px 1px;padding:0 6px;box-sizing:border-box;}

	/* 전후사진(sub813) 임시 로그인 팝업 : bbs/board.php 인라인 스타일(left:30%)이라 화면 밖으로 나가므로 가운데 정렬 */
	#dsL{left:50% !important;transform:translateX(-50%);}
}

@media (max-width:768px){
	#container + img{height:140px;object-fit:cover;object-position:center;}
	.subt3{margin-top:28px;padding-bottom:36px;background-position:50% 90%;}
	.subt3 .white{padding:0 0 8px;font-size:11px;letter-spacing:2px;}
	.subt3 .st31{font-size:26px;letter-spacing:-1px;padding-bottom:6px;}

	#bo_list, #bo_gall, #bo_v, #bo_w{padding-left:16px;padding-right:16px;}

	/* 상단 Total / 버튼 */
	#bo_btn_top{margin:0 0 10px;}
	#bo_list_total{line-height:28px;font-size:12px;}
	.btn_bo_user li{margin-left:4px;}
	.btn_bo_user .btn{font-size:12px;}

	/* 목록 표 : 제목 + 날짜만 */
	#bo_list .tbl_head01 thead{display:none;}
	#bo_list .tbl_head01 table{border-left:0;border-right:0;}
	#bo_list .td_num2, #bo_list .td_name, #bo_list .td_num{display:none;}
	#bo_list .tbl_head01 td{height:auto;padding:14px 4px;}
	#bo_list .td_subject{padding-right:8px;}
	#bo_list .bo_tit{font-size:14px;line-height:1.5;}
	#bo_list .td_datetime{width:44px;font-size:12px;color:#999;}
	#bo_list tbody tr:hover{border-left:0;}
	/* 공지는 번호 칸이 숨겨지므로 제목 앞 표시 */
	#bo_list .bo_notice .bo_tit a:before{content:"공지";display:inline-block;margin-right:6px;padding:0 6px;line-height:20px;border-radius:3px;background:#4158d1;color:#fff;font-size:11px;font-weight:normal;vertical-align:1px;}

	/* 갤러리 : 2열 */
	#bo_gall #gall_ul{margin:10px -6px 0;}
	#bo_gall .gall_row .gall_li{width:50%;padding:0 6px;}
	#bo_gall .gall_box{margin-bottom:14px;}
	#bo_gall .gall_text_href{margin:8px;}
	#bo_gall .bo_tit{font-size:13px;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere;}

	/* 하단 버튼 + 검색 : 한 줄씩 */
	.bo_fx{float:none;margin-bottom:10px;}
	.bo_fx:after{display:block;clear:both;content:"";}
	#bo_sch{float:none;width:100%;min-width:0;margin:0 0 10px;box-sizing:border-box;} /* fieldset 기본 min-width:min-content 해제 */
	#bo_sch form{display:flex;align-items:center;}
	#bo_sch select{float:none;flex:0 0 auto;max-width:34%;}
	#bo_sch .sch_input{float:none;flex:1 1 0;min-width:0;width:0;padding:0 6px;font-size:16px;}
	#bo_sch .sch_btn{float:none;flex:0 0 40px;}

	/* 글 보기 */
	#bo_v{padding-top:16px;padding-bottom:16px;}
	#bo_v_title .bo_v_tit{font-size:18px;line-height:1.4;}
	#bo_v_info{font-size:12px;}
	#bo_v_info strong{margin-right:8px;}
	#bo_v_info .if_date{float:none;display:block;margin-top:4px;}
	#bo_v_con{min-height:0;font-size:14px;}
	#bo_v_con table{display:block;overflow-x:auto;}
	#bo_v_file a, #bo_v_link a, #bo_v_file strong, #bo_v_link strong{display:block;max-width:100%;word-break:break-all;overflow-wrap:anywhere;}
	#bo_v_file li, #bo_v_link li{padding-right:10px;}
	.bo_v_file_cnt, .bo_v_link_cnt{position:static;display:block;margin-top:4px;}
	#bo_v_share{text-align:left;}
	.bo_v_left, .bo_v_com{margin:12px 0;}
	.bo_v_left li, .bo_v_com li{margin-bottom:5px;}
	.bo_v_nb li{padding:12px 10px;font-size:13px;}
	.bo_v_nb li .nb_tit{display:block;padding:0 0 4px;}
	.bo_v_nb li .nb_date{float:none;font-size:12px;}

	/* 댓글 */
	.bo_vc_w_info, .bo_vc_w .btn_confirm{float:none;}
	.bo_vc_w_info .frm_input{float:none;display:block;width:100%;margin:0 0 6px;box-sizing:border-box;}
	.bo_vc_w .btn_confirm{text-align:right;}

	/* 글쓰기 */
	#bo_w .bo_w_info .frm_input{float:none;display:block;width:100%;margin:0 0 8px;box-sizing:border-box;}
	#bo_w #wr_password{margin:0 0 8px;}
	#bo_w .frm_input, #bo_w textarea, #bo_w select{max-width:100%;font-size:16px;box-sizing:border-box;}
	#bo_w .wr_content iframe, #bo_w .wr_content textarea{width:100% !important;}
	#bo_w .bo_w_tit .frm_input{padding-right:90px;}
	#bo_w .bo_w_flie .frm_file{max-width:100%;}
	#bo_w .btn_confirm{text-align:center;}
	#autosave_pop{width:280px;}
	#captcha{max-width:100%;}

	/* 전후사진 임시 로그인 팝업 : back.jpg(720x450) 의 오른쪽 로그인 패널(360px)만 보여주고,
	   왼쪽 이미지에 있던 안내 문구는 아래에 글자로 붙인다. 입력칸(#input_box)은 오른쪽 패널 기준 위치라 그대로 맞는다. */
	#dsLBg{z-index:100000000 !important;} /* 모바일 헤더·하단 메뉴바보다 위 */
	#dsL{top:50% !important;width:360px !important;height:360px;min-height:0 !important;background-position:-360px 0 !important;transform:translate(-50%,calc(-50% - 70px));box-shadow:0 10px 30px rgba(0,0,0,.4);}
	#dsL:after{content:"의료법에 의거하여 홈페이지의 치료후기 열람은\A홈페이지의 회원일 경우에만 열람할 수 있습니다.\A\A간단하게 로그인할 수 있는 임시로그인 번호를\A발급해드리며, 임시로그인 할 경우 브라우저가\A종료되기 이전까지 유효합니다.";white-space:pre;position:absolute;left:0;top:100%;width:100%;box-sizing:border-box;padding:16px 10px 18px;background:#2b2d8f;color:#fff;font-size:12px;line-height:1.7;text-align:center;}
	#dsL #tmpPw{height:26px;font-size:16px;}

	/* 하단 고정 상담 버튼 */
	.fix_bt_btn{width:calc(100% - 40px);max-width:300px;height:46px;line-height:46px;font-size:17px;}
}

@media (max-width:430px){
	.subt3 .st31{font-size:22px;}
	#container + img{height:110px;}
	#bo_gall .gall_text_href{margin:6px;}
}

@media (max-width:374px){
	#dsL{transform:translate(-50%,calc(-50% - 64px)) scale(.9);}
}
