@charset "UTF-8";
/* ===== 휴대폰 대응 (2026-10-31) — tools/mobile.py가 모든 페이지에 연결, 모든 stylesheet 뒤 =====
   원본은 PC 전용 화면(viewport width=1025)으로 옮겨 왔었다. viewport를 기기 폭으로 바꾸고,
   1) 원 홈페이지가 휴대폰에 주던 css/mobile.css(2023-10-26판, 옛 서버에서 받음)의 본문 규칙
      — 헤더·메뉴·푸터·퀵메뉴 규칙은 브랜드 스킨으로 바뀌어서 뺐다 —
   2) 그 위에 이 사이트 고유 덮어쓰기
   순서로 둔다. pc.css의 폭 규칙은 1025px 이상에서만 작동하게 바꿨다(원본도 휴대폰엔 pc.css를 안 줬음). */

/* ---------- 1) 원 홈페이지 휴대폰 규칙(본문) ---------- */
@media all and (max-width:1024px) {
    /* common */
	.implant_banner { margin:20px 0px; }
	.implant_banner span.pc { display:none; }
	.implant_banner span.mobile { display:block; }
	.implant_banner p,
	.implant_banner p strong span { font-size:27px; }
	.implant_banner p + div { width:calc(100% - 40px); left:0px; margin-left:20px; margin-right:20px; }
	.implant_banner p + div img { width:100%; }

	/* main */
	.visual { max-width:inherit; }
	.visual div a { height:auto; background:none; }
	.visual div a span.mobile { display:block; }
	.visual div a span.mobile img { max-width:100%; }

	.visual_new video { float:none !important; width:100% !important; }
	.visual_new .area_video { height:auto !important; }
	.visual_new .area_banner { float:none !important; display:block !important; width:100% !important; height:auto !important; font-size:0; }
/* 	.visual_new .area_banner > div { display:inline-block; width:50%; vertical-align:top; } */
	.visual_new .area_banner a img { width:100% !important; height:auto !important; }
	.visual_new .area_banner .implant span.pc { display:none; }
	.visual_new .area_banner .implant span.mobile { display:block; }

    .slogan { padding-left:22px; padding-right:22px; }
    .slogan p { font-size:17px; line-height:1.3; }
    .slogan h3 { font-size:30px; font-weight:500; padding-top:7px; }
	.mstyle { padding-left:20px; padding-right:20px; }
    .mstyle article img { width:100%; }
    .mstyle article div.m_div h2 { font-size:24px; font-weight:500; }
    .main_content .box1 div.m_div h2 { font-size:30px; }
    .main_content .box1,
    .main_content .box2 { width:100%; height:auto; margin-bottom:0px; }
    .main_content .box2 h2 + p span.br { display:inline; }
    .main_content .box3,
    .main_content .box4,
    .main_content .box5,
    .main_content .box6 { width:100%; height:auto; margin-top:0px; }
	.mstyle article div.m_div { padding-left:5%; padding-right:5%; }
	.main_content .box3 div.m_div, .main_content .box4 div.m_div, .main_content .box5 div.m_div, .main_content .box6 div.m_div { right:0; text-align:right; bottom:0; top:37%; }
    .main_content span.pc { display:none; }
    .main_content span.mobile { display:block; }
    .main_cust article { width:50%; height:auto; }
    .main_cust .box3 { height:324px; border-left:1px solid #ddd; border-top:0px; }
	.main_cust .box3 ul { padding-bottom:58px; }
    .main_cust .box3 ul + p { display:inline-block; text-align:left; }
    .main_cust .box4 { height:324px; }
    .main_cust .cust_btn { padding-top:20px; }
    .main_cust .cust_btn ul { margin-top:-10px; }
    .main_cust .cust_btn li { width:33.33%; padding:10px 3px 0px; }
    .main_cust .cust_btn li a { width:100%; height:52px; line-height:52px; font-size:18px; }
    .main_cust .cust_btn li a span { width:32px; }
    .main_cust .cust_btn li a span + span { width:20px; }
	.main_cust .cust_btn li a.btn_kakao span + span img { vertical-align:-4px; }
    .main_cust .cust_btn li a.btn_call strong { font-size:20px; }

    /* sub */
	.sub_visual { height:340px; }
	.sub_visual .bg { width:1000px; top:50%; margin-left:-500px; margin-top:-234px; }
	.sub_visual .bg img { width:100%; }
	.sub_visual .title { padding-top:122px; }
	.sub_content table { width:calc(100% - 40px); padding-left:20px; padding-right:20px; margin:0px auto; }
	.sub_content div.img { left:0px; width:100%; margin-left:0px; text-align:center; }
	.sub_content div.img img { display:inline-block; width:100%; height:100%;  }
	.lnb { min-height:50px; }
	.lnb ul { margin:0 -10px; }
	.lnb li  { padding:0px 10px; }
	.lnb li a { display:inline-block; height:50px; line-height:50px; font-size:16px; }
	.bottom.inbox { max-width:100%; padding-left:20px; padding-right:20px; }
    .bottom .tab_menu li a { font-size:16px; letter-spacing:-1px; }
	.mobile_block { display:block; }
	.s17 .root_daum_roughmap .wrap_map { height:360px; }
	.s17 .sub_map { width:calc(100% - 40px); margin-left:20px; margin-right:20px; }
	#sGallery { width:100%;  }
	div.s14gallery div.bImg p.bt { width:36px; height:36px; margin-top:-18px; }

	.s29 .youtube_wrap { position:static; transform:translateX(0); width:100%; }
	.s29 .youtube_wrap div { float:inherit; width:100%; }
}
@media all and (max-width:850px) {
	.sub2 .lnb:after { position:absolute; left:0px; top:51px; display:block; width:100%; height:1px; background-color:rgba(255,255,255,0.35); content:''; }

}
@media all and (max-width:768px) {
	/* common */
	.implant_banner { height:90px; }
	.implant_banner p { top:40px; }
	.implant_banner p,
	.implant_banner p strong span { font-size:23px; }
	.implant_banner p strong { font-size:28px; }
	.implant_banner p + div { height:100%; }
	.implant_banner p + div img { width:100%; height:90px; }
	.implant_banner p:before { top:-17px; }
	.sub_content .implant_banner { margin-bottom:30px; }

	 /* main */
    .main_content { padding-bottom:60px; }
    .main_cust,
    .slogan { padding-top:60px; padding-bottom:60px; }
	.mstyle article div.m_div h2 { font-size:22px; }
    .mstyle article div.m_div h2 + p { font-size:15px; line-height:1.3; letter-spacing:-1px; }
    .mstyle article div.m_div h2 + p span { display:inline; }
	.main_content .box1 div.m_div h2 { font-size:24px; }
	.main_content .box1 div.m_div,
	.main_content .box2 div.m_div,
	.main_content .box1 div.m_div,
	.main_content .box2 div.m_div,
	.main_cust .box1 div.m_div,
	.main_cust .box2 div.m_div { top:32px; }
	.main_cust .box3 { width:100%; height:290px; }
	.main_cust .box3 ul { padding-top:20px; padding-bottom:20px; }
	.main_cust .box4 { width:100%; height:306px; border-left:1px solid #ddd; border-top:0px; }
	.main_cust .box4 div.map_box { height:249px; }
	.main_cust .box4 div.map_text { height:56px; padding-top:14px; padding-bottom:14px; text-align:center; }
	.main_cust .box4 div.map_text p { font-size:14px; }
	.main_cust .box4 div.map_text p span.br { display:inline; }
	.main_cust .box4 div.map_text > span { width:26px; margin-right:5px; }
     .main_content .box3 div.m_div,
    .main_content .box4 div.m_div,
    .main_content .box5 div.m_div,
    .main_content .box6 div.m_div { top:32%; }
	.main_cust .cust_btn li { width:100%; padding-left:0px; padding-right:0px; }
	
	.main_bna .bna_tab li a { height:32px; line-height:34px; font-size:12px; }

	/* sub */
	.lnb { min-height:42px; }
	.lnb:after { position:absolute; left:0px; top:41px; display:block; width:100%; height:1px; background-color:rgba(255,255,255,0.35); content:''; }
	.lnb li a { height:42px; line-height:42px; font-size:15px; }
	.sub2 .lnb:after { top:41px; }
	.sub_visual { height:300px; }
	.sub_visual.sub1 .lnb li,
	.sub_visual.sub2 .lnb li { padding:0px 8px; }
	.sub_visual .bg { width:768px; margin-left:-384px; margin-top:-180px; }
	.sub_visual .title p { font-size:30px; padding-top:12px; }
	.sub_content { padding-top:60px; padding-bottom:60px; }
	.sub_title { padding-bottom:58px; }
	.sub_title h2 { font-size:30px; }
	.sub_title p { font-size:17px; padding-top:10px; }
	.sub_title span.br { display:inline; }
	.sub_title:after { height:40px; }
	.bottom { padding-bottom:60px; }
	.bottom h4 { padding-top:60px; }
	.bottom h4 strong { font-size:28px; letter-spacing:-1px; }
	.bottom h4 span { font-size:30px; }
	.bottom h4:after { width:34px; }
	.bottom .p_tab_menu { padding-top:40px; }
	.bottom .p_tab_menu li a { height:44px; line-height:44px; font-size:16px; }
	.bottom .tab_content p { padding:40px 0px; font-size:23px; }
	.s17 .root_daum_roughmap .wrap_map { height:260px; }
	.s17 .sub_title h2 .font_roboto { font-size:34px; }
	.s17 .sub_title h2 img { width:34px; }
	div.s14gallery div.sImg div ul li,
	div.s14gallery div.sImg div ul li.on { width:44px; }
	div.s14gallery div.sImg div ul li img { height:29px; }
	div.s14gallery div.sImg div ul li.on img { height:23px; }
}
@media all and (max-width:700px) {
	.sub_visual.sub1 .title,
	.sub_visual.sub2 .title { padding-top:91px; }
	.sub_visual.sub1 .lnb li,
	.sub_visual.sub2 .lnb li { padding:0px 10px; }
}
@media all and (max-width:560px) {
	.sub_visual.sub3 .title { padding-top:91px; }
	.sub_visual.sub3 .lnb li { padding:0px 14px; }
}
@media all and (max-width:540px) {
	/* common */
	.implant_banner { height:70px; margin:10px 0px; }
	.implant_banner p { top:34px; }
	.implant_banner p + div { width:calc(100% - 20px); margin-left:10px; margin-right:10px; }
	.implant_banner p + div img { height:70px; }
	.implant_banner p,
	.implant_banner p strong span { font-size:17px; }
	.implant_banner p strong { font-size:20px; font-weight:500; }
	.implant_banner p:before { width:74px; margin-left:-37px; }
	.sub_content .implant_banner { margin-bottom:20px; }

	/* main */
	.mstyle { padding-left:10px; padding-right:10px; }
	.mstyle article div.m_div h2 { font-size:17px; }
/* 	.mstyle article div.m_div h2 + p span.br { display:inline; } */
	.mstyle article div.m_div h2 + p { padding-top:10px; font-size:14px; }
	.main_content { padding-bottom:48px; }
	.main_content .box1 div.m_div h2 { font-size:17px; }
	.main_cust { padding-top:48px; padding-bottom:48px; }
	.main_cust .box3 { height:auto; padding:24px 20px; }
	.main_cust .box3 ul { padding-top:15px; padding-bottom:15px; }
	.main_cust .box3 ul + p { padding-top:10px; font-size:14px; line-height:1.5; }
	.main_cust .box3 li p { font-size:15px; line-height:1.5; }
	.main_cust .box3 li p.day { width:74px; }
	.main_cust .box3 li p.time strong { font-size:16px; }
	.main_cust .box4 { height:auto; }
	.main_cust .box4 div.map_box { height:180px; }
	.main_cust .box4 div.map_text { height:42px; padding:10px; letter-spacing:-0.6px; }
	.main_cust .box4 div.map_text > span { width:20px; margin-right:2px; vertical-align:1px; }
	.main_content .box3 div.m_div,
	.main_content .box4 div.m_div,
	.main_content .box5 div.m_div,
	.main_content .box6 div.m_div { top:30%; }
	.main_content .box1 div.m_div,
	.main_content .box2 div.m_div,
	.main_content .box1 div.m_div,
	.main_content .box2 div.m_div,
	.main_cust .box1 div.m_div,
	.main_cust .box2 div.m_div { top:22px; }
	.main_cust .cust_btn ul { margin-top:-5px; }
	.main_cust .cust_btn li { padding-top:5px; }
	.main_cust .cust_btn li a { height:40px; line-height:40px; font-size:15px; }
	.main_cust .cust_btn li a span { width:20px; margin-right:8px; }
	.main_cust .cust_btn li a span + span { width:14px; }
	.main_cust .cust_btn li a.btn_call strong { font-size:17px; }
	.main_cust .cust_btn li a.btn_kakao span + span img { vertical-align:-2px; }

	.main_bna .bna_slider [class^="swiper-button-"] { width:40px; }
	.main_bna .bna_slider [class^="swiper-button-"] span { font-size:30px; }
	.mct_title h2 { font-size:32px; }
	.mct_title p { font-size:18px; }

	/* sub */
	.bottom { padding-bottom:48px; }
	.bottom h4 span { font-size:22px; }
	.bottom h4 strong { font-size:22px; padding-left:8px; }
	.bottom .p_tab_menu { padding-top:30px; }
	.bottom .p_tab_menu li a { height:54px; line-height:1.3; font-size:14px; padding:9px; word-break:keep-all; }
	.bottom .tab_content div.tab1 li { width:50%; }
	.bottom .tab_content div.tab1 li:first-child { width:100%; }
	.bottom .tab_content div.tab2 li { width:50%; }
	.bottom .tab_content li img { width:100%; max-width:inherit; margin:0px auto; }
	.bottom .tab_content p { padding:30px 0px; font-size:18px; }
	.sub_visual .title { padding-top:81px !important; }
	.sub_visual .title p { font-size:24px; padding-top:0px; }
	.sub_visual .title span { display:none; }
	.sub_title h2 { font-size:24px; }
	.sub_title p { font-size:16px; padding-top:6px;  }
	.sub_visual { height:250px; }
	.sub_visual .bg { width:540px; margin-left:-270px; margin-top:-126px; }
	.sub_content { padding-top:48px; padding-bottom:48px; }
	.sub_content table { width:calc(100% - 20px); padding-left:10px; padding-right:10px; }
	.lnb { min-height:38px; }
	.lnb li { padding:0px 7px !important; }
	.lnb li a { height:38px; line-height:38px; font-size:14px; }
	.lnb:after { top:37px; }
	.s17 .sub_title h2 span.br + strong + span.br { display:block; }
	.s17 .sub_title h2 .font_roboto { font-size:28px; }
	.s17 .sub_title h2 img { width:26px; }
	.s17 .sub_map { width:calc(100% - 20px); margin-left:10px; margin-right:10px; }
	.s17 .root_daum_roughmap .wrap_map { height:200px; }
	.side_padding { padding-left:10px; padding-right:10px; }
}
@media all and (max-width:425px) {
	/* common */
	.implant_banner { height:60px; }
	.implant_banner p { top:28px; }
	.implant_banner p,
	.implant_banner p strong span { font-size:14px; }
	.implant_banner p strong { font-size:18px; }
	.implant_banner p + div img { height:60px; }
	.implant_banner p:before { top:-14px; }

	/* main */
	.main_content { padding-bottom:34px; }
	.main_cust { padding-top:34px; padding-bottom:34px; }
	.mstyle article div.m_div h2 { font-size:16px; }
	.mstyle article div.m_div h2 + p { font-size:12px; padding-top:5px;  }
	.main_content .box1 div.m_div { top:14px; }
	.main_content .box1 div.m_div h2 { font-size:15px; letter-spacing:-1.2px; }
/* 	.main_content .box3 div.m_div,
	.main_content .box4 div.m_div,
	.main_content .box5 div.m_div,
	.main_content .box6 div.m_div { bottom:20px; } */
	.main_content .box2 div.m_div,
	.main_content .box1 div.m_div,
	.main_content .box2 div.m_div,
	.main_cust .box1 div.m_div,
	.main_cust .box2 div.m_div { top:20px; }
/* 	.main_content .box3 { background-color:#f5f5f5; padding-bottom:20px; }
	.main_content .box4 { background-color:#292421; padding-bottom:20px; }
	.main_content .box5 { background-color:#f5f6fb; padding-bottom:20px; }
	.main_content .box6 { background-color:#d5ac6e; padding-bottom:20px; } */
	.main_cust .box1 { background-color:#33beb9; padding-top:20px; }
	.main_cust .box2 {background-color:#38424b;  padding-top:20px; }

	/* sub */
	.bottom .p_tab_menu li { width:100%; }
	.bottom .p_tab_menu li a { height:40px; line-height:40px; padding:0px; }
	.bottom .tab_content p { padding:24px 0px; font-size:17px; }
	.bottom .tab_content span.br { display:inline; }
	div.s14gallery div.bImg p.subject { height:24px; line-height:24px; font-size:15px; }
	.sub_visual { height:230px; }
	.sub_visual .bg { width:494px; margin-left:-247px; margin-top:-115px;  }
	.sub_visual.sub1 .title { padding-top:71px !important; }

	.sub2 .lnb ul { margin:0 -16px; }
	.sub2 .lnb li { padding:0px 16px !important; }
	.sub2 .lnb:before { position:absolute; left:0px; bottom:38px; display:block; width:100%; height:1px; background-color:rgba(255,255,255,0.35); content:''; }
	.sub2 .lnb:after { top:37px; }
	.sub_visual.sub2 .title { padding-top:50px !important; }
}
@media all and (max-width:380px) {
	.sub_visual.sub1 .title { padding-top:48px !important; }
	.lnb:before { position:absolute; left:0px; bottom:38px; display:block; width:100%; height:1px; background-color:rgba(255,255,255,0.35); content:''; }
	.main_content .box3 div.m_div, .main_content .box4 div.m_div, .main_content .box5 div.m_div, .main_content .box6 div.m_div { top:28%; }
}
@media all and (max-width:350px) {
	.lnb li { padding:0px 5px !important; }
	.lnb li a { font-size:14px; letter-spacing:-1.4px; }
}

/* ---------- 2) 이 사이트 덮어쓰기 ---------- */
@media (max-width:1024px){
	#wrap{overflow-x:clip}
	picture.mo-pic{display:contents}
	/* reset.css의 *{word-break:break-all} 때문에 한글 낱말이 중간에서 끊긴다 → 낱말 단위로, 넘칠 때만 끊기 */
	body *{word-break:keep-all;overflow-wrap:break-word}
	/* 옛 페이지 휴대폰 그림(640px)이 태블릿 폭에서 늘어나 흐려지지 않게 */
	.s29 .youtube_wrap,.s29 .youtube_wrap div{height:auto}
	.s29 .youtube_wrap iframe{display:block;width:100%;height:auto;aspect-ratio:16/9}
	/* 게시판: 사진 게시판 카드 높이·제목, 빈 검색 줄, 누르기 쉬운 쪽 번호 */
	#clinic_photo .body ul li .img_con,#clinic_photo .body ul li .img_con .one_img,#clinic_photo .body ul li .img_con .before,#clinic_photo .body ul li .img_con .after{height:auto;max-height:none}
	#clinic_photo .body ul li .img_con{width:100%;display:flow-root} /* 안의 사진이 float라 높이를 잡아 주기 */
	#clinic_photo .body ul li .content{display:block;float:none;width:auto;padding:12px 2% 0}
	#clinic_photo .body ul li .content h2{font-size:16px;margin-bottom:4px}
	#clinic_photo .head{height:auto}
	#clinic_photo .head > a{line-height:40px}
	.board_search.mo{display:none}
	.board_page_num a{min-width:40px;height:40px;line-height:40px}
	table.board_view td.con_img{line-height:1.75}
	table.board_view td.con_img p{margin:0 0 .9em}
}
@media (min-width:641px) and (max-width:1024px){
	.sub_content div.img img{width:auto;max-width:640px;height:auto;display:block;margin:0 auto}
}

/* 헤더: 768px 이하에서는 상담 버튼을 하단 고정 바로 옮기고 로고·전체 메뉴 버튼만 */
@media (max-width:768px){
	#header{min-height:64px}
	#header .inbox{height:64px;padding-left:16px;padding-right:12px;gap:8px}
	#header .head-cta{display:none}
	#header .logo a{gap:8px}
	#header .logo .logo-symbol{height:34px}
	#header .logo .logo-ko{font-size:17px}
	#header .logo .logo-en{height:7px;width:auto;margin-top:4px;align-self:flex-start} /* 세로 묶음 안에서 가로로 늘어나지 않게 */
	#header .sitemap .nav-button{position:relative}
	#header .sitemap .nav-button:after{content:'';position:absolute;inset:-14px -8px} /* 손가락 크기 44px 누름 영역 */
	#header .sitemap-menu .inbox{padding:20px 20px 96px} /* 맨 아래 메뉴가 하단 상담 바에 가리지 않게 */
	.sitemap-menu.pc:after{display:none}
	#footer p.btn a{display:inline-block;padding:9px 6px}
}
@media (max-width:600px){
	#header .sitemap-menu .sitemap-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px} /* 2차 IA 4열 규칙이 600px 1열 규칙보다 뒤에 있어서 다시 */
	.sitemap-col li a{padding:7px 0}
}

/* 퀵메뉴(#quick)는 768px 이하에서 숨으니, 그 자리로 비워 둔 오른쪽 여백(110~112px)을 되돌린다 */
@media (max-width:768px){
	.brand-promise .inbox,.home-hero .inbox,.cavity-sec .inbox,.yt-sec .inbox,.home-values .inbox,.home-cta .inbox,.principle-sec .inbox,.brand-focus .inbox,.v3-hero .inbox,.nrev .inbox,
	.hub-content > section > .inbox{padding-left:20px;padding-right:20px}
	.yt-head,.home-values__head{padding-left:0;padding-right:0}
	.home-why__grid{padding-right:0}
}

/* 진료 페이지 첫 화면(v3-hero): 그림·사진을 글 아래로 내려 글과 겹치지 않게 */
@media (max-width:860px){
	.v3-hero{flex-direction:column;align-items:stretch;min-height:0}
	.v3-hero .inbox{order:1;padding-top:40px;padding-bottom:24px}
	.v3-hero__copy,.v3-hero--art .v3-hero__copy,.v3-hero--art.v3-hero--card .v3-hero__copy{max-width:none}
	.v3-hero__media,.v3-hero--art .v3-hero__media,.v3-hero--card .v3-hero__media{order:2;position:relative;inset:auto;width:auto;margin:0 20px 36px;aspect-ratio:4/3;border-radius:14px;overflow:hidden}
	.v3-hero__media:before{display:none}
}
@media (max-width:768px){
	.v3-hero h1,.v3-hero--art h1{font-size:34px;margin:10px 0 12px}
	.v3-hero__lead{font-size:21px}
	.v3-hero__sub{font-size:16px;margin-bottom:22px}
}

/* 좁은 화면에서 칸이 너무 좁아지는 묶음 */
@media (max-width:768px){
	.home-values__head{flex-direction:column;align-items:flex-start}
	.home-values__head p{text-align:left}
	.home-values__grid{grid-template-columns:repeat(2,1fr);row-gap:28px}
	.home-values__grid li:nth-child(odd){border-left:0}
	.home-values__grid strong{font-size:16px}
	.yt-sec{padding:56px 0}
	.yt-head{flex-direction:column;align-items:flex-start;gap:16px}
	.yt-head .sec-title{font-size:26px}
	.yt-shorts__row{grid-template-columns:repeat(2,1fr)}
	/* WHY MODOO: 사진 → 글 → 진단 사진 두 장 */
	.home-why__grid{grid-template-columns:1fr;height:auto}
	.home-why__img{height:240px}
	.home-why__img .hand{left:20px;right:20px;top:20px;font-size:20px}
	.home-why__copy{padding:32px 20px}
	.home-why__cards{grid-column:auto;grid-template-rows:none;grid-template-columns:1fr 1fr;height:auto;padding:0 20px 32px}
	.home-why__cards a{aspect-ratio:4/3;border-radius:10px}
	/* 홈 맨 아래 상담 상자: 로비 사진을 위로, 글·버튼을 아래로 */
	.home-cta__box{flex-direction:column;align-items:stretch;min-height:0}
	.home-cta__box>img{position:relative;width:100%;height:180px}
	.home-cta__box:before{display:none}
	.home-cta__copy{max-width:none;padding:28px 22px 8px}
	.home-cta__copy h2{font-size:24px}
	.home-cta__btns{grid-template-columns:1fr}
	.home-cta__btns a,.home-cta__btns a:first-child{justify-self:stretch;justify-content:center}
	.home-cta__box .hand{position:static;margin:4px 22px 24px;font-size:20px}
	.vis-steps--5{grid-template-columns:repeat(2,1fr)} /* 1100px 규칙(5칸)이 768px 규칙보다 뒤에 있어서 다시 */
	.principle-grid{grid-template-columns:1fr;gap:28px}
	.vis-cta{align-items:stretch}
	.vis-cta .brand-hero__actions{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
	.hub-who{padding:18px 14px}
	.art-note + .hub-note{margin-top:12px}
	.hub-two h4{margin-top:16px}
	.doc-profile__photo{max-width:320px;width:100%;margin:0 auto}
	.hub-table th,.hub-table td{padding:10px 6px;word-break:keep-all}
	.hub-table tbody th,.hub-table td:first-child{width:24%}
	.cavity-diagram__col b{font-size:13px;letter-spacing:-.4px;min-height:60px;display:flex;align-items:center;justify-content:center} /* 두 줄 이름(오버레이 크라운)과 높이를 맞춰 그림 줄을 가지런히 */
	/* 옛 페이지 서브메뉴: 배경 그림 위에서도 읽히게, 현재 칸 표시는 글자 아래로 */
	.sub_visual .lnb{background:rgba(0,0,0,.4)}
	.lnb li.on a:after{top:auto;bottom:5px;height:2px}
	/* 병원 둘러보기 사진: 작은 썸네일 줄 대신 큰 사진 + 좌우 화살표 */
	div.s14gallery div.sImg{display:none}
	div.s14gallery div.bImg p.bt{width:44px;height:44px;margin-top:-22px}
	/* 게시판 목록: 번호·조회 칸 빼고, 사진 게시판은 사진 + 제목 두 칸 */
	table.board_list colgroup,table.board_list th:first-child,table.board_list th:last-child,table.board_list td.num{display:none}
	table.board_list tbody td.time{white-space:nowrap;padding-left:8px;font-size:14px}
	table.board_photo colgroup,table.board_photo thead,table.board_photo tbody tr td:first-child{display:none}
	table.board_photo,table.board_photo tbody{display:block}
	table.board_photo tbody tr{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start;padding:16px 0}
	table.board_photo tbody tr td{display:block;padding:0}
	table.board_photo tbody tr td .img_con{width:120px;height:72px}
	table.board_photo tbody tr td .content h2{font-size:16px;line-height:1.4;margin-bottom:6px}
	table.board_photo tbody tr td .content p{font-size:14px}
	table.board_view col:first-child{width:80px}
	table.board_view th.bbs{padding-left:12px;padding-right:8px;white-space:nowrap}
}
@media (min-width:600px) and (max-width:768px){
	.brand-focus__grid{grid-template-columns:repeat(2,1fr)}
	.vis-steps,.vis-steps--5,.hub-steps ol.vis-steps{grid-template-columns:repeat(3,1fr)}
	.vis-doctor{grid-template-columns:220px 1fr;gap:24px}
}
@media (max-width:599px){
	/* 두 칸 묶음에서 마지막 하나가 남으면 한 줄 전체로(그림은 다른 칸 크기로) */
	.vis-steps > li:last-child:nth-child(odd),.hub-steps ol > li:last-child:nth-child(odd){grid-column:1/-1}
	.vis-steps > li:last-child:nth-child(odd) img{max-width:160px;margin-left:auto;margin-right:auto}
	.home-hero__note{display:none} /* 손글씨 문구가 원장 얼굴 위에 겹침(같은 문구가 아래 '숫자가 아니라' 섹션에 있음) */
	.yt-list{grid-template-columns:repeat(2,1fr)!important} /* 페이지 안 style의 3칸 지정보다 우선 */
	.principle-callout{grid-template-columns:1fr;gap:14px;padding:24px 20px}
	.principle-callout__mark{width:48px;height:48px}
	.principle-callout h3{font-size:20px}
	/* 글자가 들어 있는 넓은 SVG 그림(휴대폰용 그림이 따로 없는 것): 크게 두고 좌우로 밀어 보기 */
	figure.vis-wide:has(> img[src$=".svg"]){overflow-x:auto;-webkit-overflow-scrolling:touch}
	figure.vis-wide > img[src$=".svg"]{min-width:600px}
	figure.vis-wide:has(> img[src$=".svg"]):before{content:'← 그림을 옆으로 밀어서 보세요 →';display:block;position:sticky;left:0;font-size:12.5px;color:#999;margin-bottom:6px}
	figure.vis-wide:has(> img[src$=".svg"]) > figcaption,figure.vis-wide:has(> img[src$=".svg"]) > .art-note{position:sticky;left:0} /* 그림만 밀리고 설명은 제자리 */
	.footer-cta .brand-hero__actions{display:grid;grid-template-columns:1fr;gap:8px;max-width:300px;margin:0 auto}
	.vis-doctor > img{max-width:320px;margin:0 auto}
}
@media (max-width:540px){
	figure.vis-wide picture img{max-width:none}
}
@media (min-width:541px) and (max-width:768px){
	figure.vis-wide picture img{max-width:460px;margin:0 auto;display:block} /* 휴대폰용 세로 그림이 태블릿 폭에서 너무 커지지 않게 */
}
@media (max-width:480px){
	.vis-doctor{padding:20px}
	.vis-doctor .brand-hero__actions:has(.cta-naver){grid-template-columns:1fr}
	.vis-cards--2{grid-template-columns:1fr}
	#chipped .vis-cards{grid-template-columns:1fr}
	.vis-cards:has(img.is-contain),.hub-who .vis-cards{grid-template-columns:1fr} /* 글자가 든 그림 카드·고민 카드는 한 칸에 하나 */
}

/* 휴대폰용 그림이 없는 상단 배너(빌드 때 만드는 칼럼 페이지 등): PC 그림을 상자에 꽉 채워 자르기 */
@media (max-width:1024px){
	.sub_visual .bg:has(> img){position:absolute;inset:0;width:auto;margin:0}
	.sub_visual .bg > img{width:100%;height:100%;object-fit:cover}
}

/* 2차 화면 점검 보정 */
#footer .nw{white-space:nowrap}
#footer p.copy span.nw{padding-right:0} /* 빈 <span></span>만 칸 띄우개(padding-right:20px)로 쓰임 */
@media (max-width:1024px){
	.board_search{display:none} /* 검색 입력이 없는 빈 회색 줄 */
	.board_page_num a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
	#clinic_photo .head{display:flow-root;padding-bottom:8px}
	#clinic_photo .head > a:empty{display:none}
	#clinic_photo .body ul li .img_con .one_img .cover{overflow:hidden}
	/* 옛 게시글은 낱말 사이가 전부 &nbsp;라 한 줄이 끝없이 길어진다 → 화면 폭에서 끊기 */
	table.board_view{table-layout:fixed;width:100%}
	table.board_view td.con_img,table.board_view td.con_img *{overflow-wrap:anywhere}
	table.board_view td.con_img table{width:100%!important;max-width:100%}
	table.board_view td.con_img img{max-width:100%;height:auto}
	table.board_view td.con_img p{margin:0 0 .6em}
}
@media (max-width:768px){
	.visit-map{height:auto}
	.home-why__img .hand{text-shadow:0 1px 10px rgba(0,0,0,.6)}
	.sec-title,.brand-focus__head h2,.hub-intro h2,.hub-sec h2,.v3-hero h1{text-wrap:balance}
	.vis-cards > .vis-card:last-child:nth-child(odd),.concern-grid > a:last-child:nth-child(odd){grid-column:1/-1}
	.hub-content .art-note{margin-bottom:16px}
	.art-note + .hub-steps,.hub-two + .hub-steps{margin-top:32px}
	.vis-card p a[href^="tel:"]{display:block;margin-top:4px}
	table.board_photo tbody tr{grid-template-columns:120px minmax(0,1fr)}
	table.board_photo tbody tr td .content h2,table.board_photo tbody tr td .content p{overflow-wrap:anywhere}
	#clinic_photo .body ul li[style*="line-height:400px"]{line-height:1.6!important;padding:72px 0}
}

/* 하단 고정 상담 바: 768px 이하(퀵메뉴가 숨는 폭)에서만 */
.mbar{display:none}
@media (max-width:768px){
	.mbar{display:grid;grid-template-columns:1.25fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(36,36,36,.08);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:6px}
	.mbar a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 6px;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:-.3px;text-decoration:none;white-space:nowrap}
	.mbar a:before{margin-right:6px}
	.mbar__tel{background:var(--action);color:#fff}
	.mbar__naver,.mbar__kakao{background:#fff;border:1px solid var(--line);color:var(--ink)}
	.mbar a:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
	.mbar .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
	#footer{padding-bottom:calc(58px + 72px + env(safe-area-inset-bottom))} /* 맨 아래 SNS 아이콘이 상담 바에 가리지 않게(body는 height:100%라 여백이 안 먹음) */
}