@charset "utf-8";
/*
 * 검색·AI 답변엔진용으로 새로 만든 영역의 공통 스타일.
 *
 * 파일마다 인라인 <style> 을 따로 두었다가 사이트 값과 어긋났다.
 * (핑크 #ff6b81 / 폭 960px / radius 8px 를 썼는데 사이트는 초록 #28cf7a / 736px / 알약 18px)
 * 여기 한곳에서만 정의한다. 값은 style-200901.css 에서 그대로 가져온 것이다.
 *
 *   액센트   #28cf7a (.item-head > .city, 선택된 필터칩)
 *   진한초록 #0c893f (링크 텍스트 — 배경 위 가독성)
 *   본문     #333  보조 #777  흐림 #999
 *   선       #eee / #f1f1f1
 *   폭       736px (.section-wrap)
 *   칩       #f1f1f1 배경 / #777 글자 / radius 18px / height 34px
 *   강조상자 #fff4dd (.subtit 배경)
 */

.seo-landing,
.seo-hub,
.seo-nav,
.about-page{
	max-width: 768px;          /* .section-wrap 과 같은 값 */
	margin: 0 auto;
	padding: 30px 28px 40px;   /* 좌우도 .section-wrap 과 같게 */
	background-color: #fff;
	color: #333;
	line-height: 1.7;
	letter-spacing: -0.02em;
}
.seo-nav{padding-top: 24px}

/* 제목 — 위계는 색이 아니라 크기·굵기로 준다 */
/* h1 규칙은 아래 '페이지 머리말' 한 곳에 모았다 */
/*
 * 제목 층위. 사이트 타입 스케일(12·13·14·15·16·18·21·26) 안에서 고른다.
 *
 * 예전에는 h2 가 16(본문)·15(나가는 링크)·15(검색 결과 문구) 로 갈렸고,
 * h2(16)와 h3(15)가 1px 차이라 위계가 눈에 보이지 않았다.
 *   h1 21 / 26  ·  h2 18  ·  h3 16  ·  본문 15  ·  메타 13
 * 목록 카드의 병원 이름(21px)은 사이트 원래 값 그대로 둔다. 문서 제목이
 * 아니라 카드 컴포넌트의 이름이라 본문 h3 과 같은 크기일 이유가 없다.
 */
.seo-landing h2,
.seo-hub h2,
.about-page h2,
.seo-nav h2{font-size: 18px;font-weight: bold;margin: 30px 0 12px;padding-top: 20px;border-top: 1px solid #eee;color: #333}
.seo-landing h2:first-of-type{border-top: 0;padding-top: 0;margin-top: 6px}
.seo-nav h2{margin: 0 0 12px}
.seo-nav h2:first-of-type{border-top: 0;padding-top: 0}
.seo-landing h3,
.about-page h3{font-size: 16px;font-weight: bold;margin: 22px 0 8px;color: #333}

.seo-landing p,
.seo-hub p,
.about-page p{margin: 0 0 12px;font-size: 15px}
.seo-landing ul,
.about-page ul{font-size: 15px}
.about-page ul{margin: 0 0 14px;padding-left: 18px}
.about-page li{margin: 6px 0}

.seo-landing a,
.seo-hub a,
.about-page a{color: #0c893f}

/* 결론 블록 — 답이 첫 문단에 오게 한다 */
.seo-landing .lead,
.seo-hub .lead,
.about-page .lead{
	background-color: #f7f7f7;
	border-left: 3px solid #28cf7a;
	border-radius: 0 6px 6px 0;
	padding: 14px 16px;
	margin: 0 0 8px;
	font-size: 15px;
}
.seo-landing .lead p,
.seo-hub .lead p,
.about-page .lead p{margin: 0 0 6px}
.seo-landing .lead p:last-child,
.seo-hub .lead p:last-child,
.about-page .lead p:last-child{margin: 0}

.seo-landing .asof,
.seo-hub .asof,
.about-page .asof{display: block;font-size: 13px;color: #999;margin: 0 0 24px}

/* 링크 칩 — 사이트 필터칩과 같은 모양 */
.seo-landing ul.regions,
.seo-hub ul.chips,
.seo-nav ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;gap: 8px}
.seo-nav h2 + ul{margin-bottom: 22px}
.seo-landing ul.regions li a,
.seo-hub ul.chips li a,
.seo-nav li a{
	display: inline-block;
	height: 34px;
	line-height: 34px;
	padding: 0 14px;
	border-radius: 18px;
	background-color: #f1f1f1;
	font-size: 15px;
	color: #777;
	text-decoration: none;
}
.seo-landing ul.regions li a:hover,
.seo-hub ul.chips li a:hover,
.seo-nav li a:hover{background-color: #28cf7a;color: #fff;font-weight: bold}
.seo-hub ul.chips .cnt{color: #999;font-size: 13px;margin-left: 4px}
.seo-hub ul.chips li a:hover .cnt{color: #fff}

/* 병원 목록 */
.seo-landing ul.hospitals{list-style: none;padding: 0;margin: 0 0 8px}
.seo-landing ul.hospitals li{padding: 9px 0;border-bottom: 1px solid #f1f1f1;font-size: 14px}
.seo-landing ul.hospitals a{color: #333;text-decoration: none;font-weight: bold}
.seo-landing ul.hospitals a:hover{color: #0c893f;text-decoration: underline}
.seo-landing .meta{display: block;margin-top: 2px;color: #777;font-size: 13px}

/* /all 의 FAQ 는 seo-landing 밖에 있어 선택자를 함께 적는다 */
.seo-landing .faq dt,
.seo-faq .faq dt{font-weight: bold;margin: 16px 0 6px;font-size: 15px}
.seo-landing .faq dd,
.seo-faq .faq dd{margin: 0;color: #777;font-size: 14px}

.seo-faq{margin: 28px 0 8px;padding: 0 16px}
.seo-faq h2{font-size: 17px;margin: 0 0 4px}
.seo-faq .faq{margin: 0}

/* 면책 — 사이트가 쓰는 강조 배경색 */
.seo-landing .notice,
.seo-hub .notice,
.about-page .notice{
	margin-top: 28px;
	padding: 14px 16px;
	background-color: #fff4dd;
	border-radius: 6px;
	font-size: 13px;
	color: #333;
}

/* 표 (/about 데이터 출처) */
.about-page table{width: 100%;border-collapse: collapse;font-size: 14px;margin: 0 0 16px}
.about-page th,
.about-page td{border: 1px solid #eee;padding: 9px 10px;text-align: left;vertical-align: top}
.about-page th{background-color: #fafafa;font-weight: bold;white-space: nowrap;color: #333}

/*
 * 페이지 머리말.
 *
 * 예전에는 컨테이너마다 h1 규칙을 따로 두어서 제목 크기와 제목~설명
 * 간격이 페이지마다 달랐다. /find(.seo-hub h1)는 규칙이 아예 없어
 * 브라우저 기본값(2em)으로 나왔다. 한 벌로 합친다.
 */
.page-head,
.cond-head{padding: 0 0 18px;margin-bottom: 20px;border-bottom: 1px solid #f1f1f1}
.page-head h1,
.cond-head h1,
.seo-hub h1,
.seo-landing h1,
.about-page h1,
.item-head h1,
.howto-wrap h1{font-size: 21px;font-weight: bold;line-height: 1.4;margin: 0 0 12px;color: #333}
.page-head .page-lead,
.cond-head .cond-lead{
	margin: 0 0 8px;
	padding: 14px 16px;
	background-color: #f7f7f7;
	border-left: 3px solid #28cf7a;
	border-radius: 0 6px 6px 0;
	font-size: 15px;
	line-height: 1.7;
	color: #333;
}
.cond-head .cond-basis{margin: 0;font-size: 13px;line-height: 1.6;color: #777}
.page-head .page-asof,
.cond-head .cond-asof{display: inline-block;margin-top: 6px;font-size: 13px;color: #999}

@media (min-width: 768px){
	.page-head h1,
	.cond-head h1,
	.seo-hub h1,
	.seo-landing h1,
	.about-page h1,
	.item-head h1,
	.howto-wrap h1{font-size: 26px}
}

/*
 * 푸터를 본문과 같은 선에 세운다.
 *
 * max-width 만 768 로 맞췄더니 좌우 여백이 없어 푸터 글자가 본문보다
 * 26px 바깥에서 시작했다(실측 1280px: 본문 282 / 푸터 256).
 * .section-wrap 과 같은 좌우 값을 준다.
 */
#footer-wrap .inner{max-width: 768px;padding-left: 28px;padding-right: 28px}
@media (min-width: 768px){
	#footer-wrap .inner{padding-left: 26px;padding-right: 26px}
}
#footer-wrap .disclaimer{
	margin: 0 0 16px;
	padding: 14px 16px;
	background-color: #fff4dd;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.6;
	color: #333;
	text-align: left;
}
#footer-wrap .disclaimer a{color: #0c893f;text-decoration: underline}

/*
 * 목록 카드의 병원 이름.
 * style-200901.css 는 `.name > h1` 만 스타일한다. 페이지 h1 을 하나로 줄이면서
 * 카드 이름을 h2(/all)·h3(상세 주변, JS 목록)로 내렸더니 스타일이 빠졌다.
 * 운영 공용 CSS 를 건드리지 않고 여기서 같은 규칙을 태그만 넓혀 적용한다.
 */
.result-list > li > a > .name > h2,
.result-list > li > a > .name > h3{
	font-size: 21px;
	max-width: calc(100% - 65px);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/*
 * 홈의 보조 링크(전체보기). 버튼 두 개 아래에 한 줄로 둔다.
 * 버튼과 붙어 보이지 않게 위 여백을 버튼 사이 간격보다 넉넉히 준다.
 */
.location-wrap .seo-textlink{
	display: block;
	margin-top: 22px;
	text-align: center;
	font-size: 14px;
	color: #0c893f;
	text-decoration: underline;
}

/*
 * 데스크톱 목록의 빈 칸.
 *
 * style-200901.css 는 768px 이상에서 카드를 float:left; width:50%; height:300px
 * 으로 2단을 만든다. 높이가 고정이라 내용이 짧은 카드마다 25~51px 이 남고
 * (실측 1280px: 내용 249~275px / 상자 300px), 마지막 줄 아래로 150px 이 비었다.
 * 뜬 칸이 아니라 내용에 맞춰 늘어나도록 flex 로 바꾼다.
 * 운영 공용 CSS 는 다섯 사이트가 함께 쓰므로 건드리지 않고 여기서 덮는다.
 */
@media (min-width: 768px){
	.result-wrap .result-list{display: flex;flex-wrap: wrap;align-items: stretch}
	.result-wrap .result-list > li{float: none;height: auto;margin-bottom: 24px}
	.result-wrap .result-list > li > a{height: 100%}
}

/*
 * /list 계열 헤더의 로고.
 * .header-wrap.search 는 .inner 안에 검색 영역(.input-btn)이 들어가고
 * 위아래 padding 이 다른 헤더(15px)보다 작다(12/8). 로고는 절대 배치라
 * 그 안에서 세로 가운데에 맞춰 준다.
 */
.header-wrap.search .inner > .logo-btn{
	top: 50%;
	margin-top: -15px;
}

/*
 * 목록 아래에 서버 렌더 본문이 이어지는 페이지의 아래 여백.
 *
 * .section-wrap 은 768px 이상에서 padding-bottom 이 150px 이다. 원래는
 * 이 블록 다음이 바로 푸터라 넉넉한 여백이 맞았는데, 지금은 조건·지역
 * 페이지에서 목록 본문(_seo_landing)이 이어져 그 150px 이 통째로 빈칸이
 * 됐다(실측 1265px: 마지막 카드 아래 190px).
 *
 * 홈(#ad1)도 같다 — 그 아래 배너가 이어지는데 150px 이 통째로 비었다.
 */
.section-wrap.has-seo,
.section-wrap#ad1{padding-bottom: 24px}

/*
 * 앞 블록에 이어 붙는 본문은 위쪽 여백도 줄인다.
 * padding-bottom 만 줄였더니 데스크톱에서 위쪽 60px 이 그대로 남고,
 * 거기에 첫 h2 의 margin-top 30 + padding-top 20 이 얹혀 홈에서
 * "산부인과 전체보기" 아래가 통째로 비어 보였다.
 */
/* 앞에 다른 블록이 있을 때만 위 여백을 걷는다. 본문이 페이지의 첫
 * 블록인 /list/{조건}·{지역} 에까지 걸려 h1 이 헤더에 딱 붙었다. */
.section-wrap + .section-wrap.has-seo{padding-top: 0}
.seo-hub > h2:first-child,
.seo-landing > h2:first-child,
.about-page > h2:first-child{margin-top: 0; padding-top: 0; border-top: 0}

/*
 * 컨테이너가 두 번 겹치면 좌우 여백이 두 배가 된다.
 *
 * .seo-* 는 /find·/about 처럼 홀로 설 때를 전제해 자기 폭(768)과 좌우
 * 여백을 갖는다. 그런데 홈·/list·/all·/howto 는 이것을 .section-wrap
 * 안에 넣는다. 그러면 26 + 26 = 52px 이 되어 같은 페이지 안에서
 * 위쪽 검색 영역(26px)보다 본문만 좁아진다.
 *
 * 안에 들어갈 때는 바깥이 폭과 좌우 여백을 맡는다.
 */
.section-wrap .seo-landing,
.section-wrap .seo-hub,
.section-wrap .seo-nav,
.section-wrap .about-page{
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 768px){
	.section-wrap.has-seo,
	.section-wrap#ad1{padding-bottom: 32px}
	.section-wrap + .section-wrap.has-seo{padding-top: 0}
	.seo-landing,
	.seo-hub,
	.seo-nav,
	.about-page{padding: 36px 26px 44px}
}

/*
 * 목록 마지막 항목의 밑줄과 다음 제목의 윗줄이 겹쳐 선이 두 줄로 보였다.
 * 마지막 항목의 밑줄을 지운다.
 */
.seo-landing ul.hospitals li:last-child{border-bottom: 0}

/*
 * PC 의 진료 조건 필터.
 *
 * .filter-wrap 은 가로 스크롤(overflow-x:auto + white-space:nowrap)에
 * 스크롤바까지 숨겨 뒀다. 손가락으로 미는 모바일에서는 맞지만 PC 에서는
 * 밀 방법이 없어 마지막 칩("난임센터보유")이 잘린 채 닿지 못한다.
 * 폭이 넉넉한 쪽에서는 줄을 바꿔 전부 보여 준다.
 */
@media (min-width: 768px){
	.filter-wrap{overflow-x: visible;white-space: normal}
	.filter-wrap ul{display: block;white-space: normal}
	/*
	 * 줄이 넘칠 때를 대비해 칩마다 아래 여백을 주되, 한 줄일 때는 그 8px 이
	 * 아래로만 더해져 상자 안에서 가운데가 어긋난다(위 30 / 아래 38).
	 * ul 에서 같은 만큼 빼 상쇄한다.
	 */
	.filter-wrap ul li{margin: 0 8px 8px 0}
	.filter-wrap ul{margin-bottom: -8px}
	/*
	 * 칩 6개가 11px 차이로 한 줄을 넘겼다. 하나 때문에 두 줄이 되는 게
	 * 아까워서 PC 에서만 좌우 여백을 조금 줄인다(27/14 → 24/12).
	 * 체크 아이콘은 left 10px·폭 12px 이라 왼쪽 24px 이면 겹치지 않는다.
	 * 그래도 넘치면 위 flex-wrap 이 받아 준다.
	 */
	.filter-wrap ul li label{padding: 0 12px 0 24px}
}

/*
 * 홈 하단 배너.
 *
 * 모바일 폭에 맞춘 정사각 배너를 PC 에서도 한 줄에 하나씩 세로로 쌓아
 * 화면 폭에 비해 지나치게 크게 보였다. 폭이 넉넉한 쪽에서는 둘을 나란히.
 */
@media (min-width: 768px){
	.sq-banner-wrap .container{display: flex;gap: 20px;align-items: flex-start}
	.sq-banner-wrap .container > a{flex: 1 1 0;min-width: 0;margin-bottom: 0}
}

/* 병원 상세의 지역 목록 링크. 칩 모양은 다른 곳과 같게 */
.seo-inline-links{list-style: none;padding: 0;margin: 0 0 8px;display: flex;flex-wrap: wrap;gap: 8px}
.seo-inline-links li a{
	display: inline-block;height: 34px;line-height: 34px;padding: 0 14px;
	border-radius: 18px;background-color: #f1f1f1;font-size: 15px;color: #777;text-decoration: none;
}
.seo-inline-links li a:hover{background-color: #28cf7a;color: #fff;font-weight: bold}

/* 병원 상세의 결론 문단. 목록 페이지의 리드와 같은 모양 */
.item-head .place-lead{
	margin: 10px 0 6px;padding: 14px 16px;
	background-color: #f7f7f7;border-left: 3px solid #28cf7a;border-radius: 0 6px 6px 0;
	font-size: 15px;line-height: 1.7;color: #333;
}
.item-head .place-basis{margin: 0 0 8px;font-size: 13px;line-height: 1.6;color: #777}

/* 푸터 링크 줄과 면책 사이 간격. 붙어 있어 한 덩어리로 보였다 */
#footer-wrap .links{margin-bottom: 18px}

/*
 * 헤더 로고가 화면 맨 위에 붙어 있었다. .header-wrap 은 고정 헤더라
 * 안쪽 위아래 여백만으로 위치가 정해지는데 위쪽이 모자랐다.
 */
.header-wrap .inner{padding-top: 20px;padding-bottom: 20px}
.header-wrap.search .inner{padding-top: 16px;padding-bottom: 12px}

/* 위치 섹션의 보조 주소(지번·우편번호) */
.item-section .txt.sub-addr{display: block;margin-top: 4px;font-size: 13px;color: #999}

/*
 * 페이지 머리말이 헤더에서 떨어진 거리를 하나로 맞춘다.
 *
 * 실측(데스크톱)으로 다섯 값이 있었다.
 *   /list/{조건}·{지역}  0px   ← .has-seo 의 padding-top:0 이 과하게 걸렸다
 *   /list                20px  (.section-wrap.result)
 *   /find · /about       36px  (.seo-hub · .about-page)
 *   /all · /howto        60px  (.section-wrap)
 *   /place              139px  (.item-head)
 * 홈(#ad1)만 진입 화면이라 넉넉하게 두고, 나머지는 같은 값을 쓴다.
 */
.section-wrap.result,
.section-wrap:not(#ad1):not(.has-seo),
.seo-hub,
.about-page{padding-top: 24px}

@media (min-width: 768px){
	.section-wrap.result,
	.section-wrap:not(#ad1):not(.has-seo),
	.seo-hub,
	.about-page{padding-top: 36px}
}

/* 상세 페이지 머리말도 같은 위 여백을 쓴다(40 → 36). */
@media (min-width: 768px){
	.item-head{padding-top: 36px}
}

/*
 * 진료 정보 항목의 출처 구분.
 *
 * 페이지 맨 위 place-basis 한 줄이 화면 전체를 덮는 것처럼 읽혀서, 운영자가
 * 조사해 넣은 값(여성 의사·부설 산후조리원)까지 심평원 자료로 보였다.
 * 심평원 대조본은 hira_ 접두 컬럼 둘뿐이라 그 선을 이 자리에서 밝힌다.
 * 항목을 지우지 않으면서 근거의 무게만 맞춘다.
 */
.item-section .info-basis{
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid #f1f1f1;
	font-size: 13px;
	line-height: 1.65;
	color: #999;
}

/*
 * 블로그 리뷰 접기.
 *
 * 10개를 다 뿌려 1,594px 를 차지했다. 페이지의 34% 였고, 정작 사용자가
 * 궁금해하는 위치·주소·지도가 그 아래(3,281px)로 밀려 있었다.
 * 3개만 펼쳐 두고 나머지는 눌러서 본다.
 */
.review-list li[hidden]{display: none}
button.more-btn{
	display: block;
	width: 100%;
	border: 0;
	font-family: inherit;
	cursor: pointer;
}

/*
 * 상세 페이지 CTA 3자리.
 *
 * 이미지 배너 2개(같은 크리에이티브)와 맥락 없는 플로팅을 걷고 텍스트·카드로
 * 바꿨다. 배너로 인식되면 읽히지 않는다. 세 자리가 서로 다른 시점이라
 * 같은 문구를 반복하지 않는다.
 * 광고임을 밝히는 표기는 뺄 수 없다 — 의료 정보 페이지에서 안내인 척하면
 * 표시광고법 문제이고 이 사이트가 공공데이터로 쌓은 신뢰를 깎는다.
 */
.section-wrap.cta-slot{padding-top: 0; padding-bottom: 0}
.cta-text{border: 1px solid #e8e8e8; border-radius: 8px; padding: 14px 16px}
.cta-text .lbl{display: inline-block; font-size: 11px; font-weight: 800; color: #777;
	border: 1px solid #ddd; border-radius: 3px; padding: 0 4px; margin-right: 6px; vertical-align: 1px}
.cta-text .src{font-size: 12px; color: #999}
.cta-text .ttl{display: block; font-size: 16px; font-weight: bold; color: #0c893f;
	margin: 6px 0 5px; line-height: 1.4}
.cta-text .dsc{margin: 0; font-size: 14px; color: #555; line-height: 1.65}

.item-section.cta-card h2{font-size: 16px; font-weight: bold; margin: 0 0 10px; color: #333}
.item-section.cta-card ul{list-style: none; padding: 0; margin: 0 0 12px}
/*
 * 사이트 공용 규칙 .item-section > ul > li 가 margin-bottom:24px 를 준다.
 * 병원 정보 블록(편의시설·위치)처럼 항목이 큰 덩어리일 때를 전제한 값이라,
 * 짧은 한 줄짜리 목록에 걸리면 줄 사이가 통째로 벌어진다.
 */
.item-section.cta-card > ul > li{margin-bottom: 0}
.item-section.cta-card li{position: relative; padding-left: 15px; font-size: 15px;
	color: #444; line-height: 1.75}
.item-section.cta-card li::before{content: ''; position: absolute; left: 0; top: 11px;
	width: 5px; height: 5px; border-radius: 50%; background: #28cf7a}
.item-section.cta-card .go{display: inline-block; font-size: 15px; font-weight: bold;
	color: #0c893f; border-bottom: 1px solid #0c893f; padding-bottom: 1px}
.item-section.cta-card .by{display: block; font-size: 12px; color: #aaa; margin-top: 10px}

/*
 * 하단 플로팅 — 질문 + 버튼 2단.
 *
 * 한 줄짜리 링크만 있으면 무엇에 대한 이야기인지가 문장에 없어 뜬금없이 읽힌다.
 * 상황을 되짚는 질문을 위에 두면 떠 있어도 맥락이 선다.
 * 본문이 비쳐 보이지 않도록 흰 바탕과 위쪽 페이드를 준다.
 */
/*
 * 화면 가로 전체를 덮어야 한다. sticky 로 두면 본문 폭(768px)만 흐려지고
 * 그 바깥(지도 좌우)은 그대로 비쳐서 반만 가린 것처럼 보였다.
 * fixed + left/right:0 으로 뷰포트 전체를 잡는다.
 */
.floating-btn{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	height: auto;
	/* 공용 규칙이 이 바를 500px 로 묶는다. 배경이 반만 덮이던 원인이다. */
	max-width: none;
	width: auto;
	margin: 0;
	text-align: center;
	padding: 30px 28px 16px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,.92) 26px, #fff 44px, #fff 100%);
}
/*
 * 배경은 뷰포트 전체를 덮되 안의 질문·버튼은 본문 열과 같은 박스에 둔다.
 * 버튼이 420px 에 묶여 있어 본문보다 한참 좁았다. .section-wrap 의
 * 좌우 여백(28px / 600px 이상 26px)과 폭(768px)을 그대로 따라간다.
 */
.floating-btn > .ask,
.floating-btn > a{max-width: 712px; margin-left: auto; margin-right: auto}
@media (min-width: 600px){
	.floating-btn{padding-left: 26px; padding-right: 26px}
	.floating-btn > .ask,
	.floating-btn > a{max-width: 716px}
}
/* 떠 있는 바가 본문 끝을 가리지 않도록 자리를 비워 둔다. */
body.place-page{padding-bottom: 132px}
.floating-btn .ask{
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: bold;
	color: #555;
	line-height: 1.4;
}
.floating-btn > a{
	display: block;
	height: 48px;
	line-height: 48px;
	border-radius: 6px;
	background-color: #0c893f;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}
.floating-btn > a:hover{background-color: #0a6f33; color: #fff}

/*
 * 종별 배지를 지역 라벨 옆으로.
 *
 * 원래 .desc 는 거리와 종별을 나란히 담는 자리인데 상세 페이지에는 거리가
 * 없어 배지 하나만 리드와 전화 버튼 사이에 떠 있었다. 지역과 종별은 둘 다
 * 이 병원의 분류라 같은 줄에 둔다.
 */
.item-head > .city > .type-inline{
	display: inline-block;
	margin-left: 7px;
	padding: 0 7px;
	height: 19px;
	line-height: 18px;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	color: #999;
	vertical-align: 1px;
}
/* 거리만 남은 .desc 는 상세에서 비어 있다. 빈 자리가 여백을 만들지 않게 한다. */
.item-head > .desc:empty,
.item-head > .desc:has(> .distance:empty){margin-bottom: 0}

/*
 * 라벨 폭 — "부설 산후조리원" 이 두 줄로 잘렸다.
 *
 * 공용 규칙이 .tit 을 64px 고정으로 두는데, 13px 볼드로 8글자면 100px 가
 * 넘는다. 실제 화면에 "부설 산후조" / "리원" 으로 끊겨 나왔다.
 * float 고정폭을 flex 로 바꿔 라벨이 내용만큼 차지하게 한다.
 */
.item-section > .txt-list > li{display: flex; gap: 10px; align-items: baseline}
.item-section > .txt-list > li > *{float: none}
.item-section > .txt-list > li > .tit{
	width: auto;
	min-width: 76px;
	flex: 0 0 auto;
	white-space: nowrap;
}
.item-section > .txt-list > li > .tit + span{width: auto; flex: 1 1 auto; min-width: 0}

/*
 * 라벨마다 폭이 달라 값의 시작선이 들쭉날쭉했다. "야간 분만" 다음 칸과
 * "부설 산후조리원" 다음 칸이 서로 다른 세로선에서 시작했다.
 * 목록을 그리드로 묶으면 그 목록 안에서 가장 긴 라벨에 열 폭이 맞는다.
 * 진료 시간(.half)은 2열 배치라 flex 그대로 둔다.
 */
.item-section > .txt-list:not(.half){
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 10px;
}
.item-section > .txt-list:not(.half) > li{display: contents}

/*
 * 진료 시간 2열이 넓은 화면에서 지나치게 벌어졌다.
 * 열 사이를 붙여 한 덩어리로 읽히게 한다.
 */
@media (min-width: 560px){
	.item-section > .txt-list.half{display: flex; flex-wrap: wrap; column-gap: 32px}
	.item-section > .txt-list.half > li{width: auto; float: none; min-width: 220px}
	.item-section > .txt-list.half > li.block{width: 100%}
}

/*
 * 주소·지하철·지도 영역이 비어 보였다.
 *
 * 각 항목이 전체 폭 li 라 넓은 화면에서 오른쪽이 통째로 남았다.
 * 세 줄을 한 덩어리로 묶는다. 폭은 본문 전체로 둔다 — 폭을 줄여 봤더니
 * 아래 광고 카드와 오른쪽 끝이 어긋나 오히려 잘린 것처럼 보였다.
 */
.item-head > .item-info{
	background-color: #fafbfa;
	border: 1px solid #f0f2f0;
	border-radius: 8px;
	padding: 14px 16px;
}
.item-head > .item-info > li{margin-bottom: 10px}
.item-head > .item-info > li:last-child{margin-bottom: 0}

/*
 * 광고 위 여백이 과했다. 앞 블록(.item-head)의 아래 여백과 .section-wrap 의
 * 위 여백이 겹쳐 지도 버튼과 광고 사이가 통째로 비었다.
 */
.section-wrap.cta-slot{padding-top: 0; padding-bottom: 0; margin-top: -18px}
@media (min-width: 768px){
	.section-wrap.cta-slot{margin-top: -40px}
}

/*
 * 홈에서 지역·조건 페이지로 나가는 링크 줄.
 * /find 의 격자를 반복하지 않고 문장 흐름에 붙는 형태로 둔다.
 */
.seo-home .home-jump{margin-top: 14px; line-height: 2.1}
.seo-home .home-jump > .lbl{
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #999;
	line-height: 1.4;
}
.seo-home .home-jump > a{
	display: inline-block;
	margin: 0 6px 4px 0;
	padding: 3px 10px;
	border: 1px solid #e6ebe7;
	border-radius: 14px;
	background-color: #fafbfa;
	color: #444;
	font-size: 13px;
	text-decoration: none;
}
.seo-home .home-jump > a:hover{border-color: #28cf7a; color: #0c893f}

/*
 * 목록에서 내려간 병원의 상태 안내.
 * 경고가 아니라 사실 안내라 붉은색을 쓰지 않는다. 다만 이 페이지에서
 * 가장 먼저 읽혀야 해서 본문보다 눈에 띄게 둔다.
 */
.item-head > .place-closed{
	margin: 12px 0 4px;
	padding: 12px 14px;
	border: 1px solid #f0e6c8;
	border-radius: 8px;
	background-color: #fdfaf0;
	color: #6b5b2e;
	font-size: 13px;
	line-height: 1.6;
}

/*
 * 검색 결과가 없을 때. 막다른 길로 두지 않는다 —
 * 좌표를 몰라도 여기서 다음 행동을 고를 수 있어야 한다.
 */
.empty-next{margin-top: 22px}
.empty-next > .go{
	display: block;
	max-width: 320px;
	height: 46px;
	line-height: 46px;
	border-radius: 6px;
	background-color: #0c893f;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
.empty-next > .go:hover{background-color: #0a6f33; color: #fff}
.empty-next > .lbl{
	margin: 22px 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: #999;
}
.empty-next > .sido-list{display: flex; flex-wrap: wrap; gap: 6px}
.empty-next > .sido-list > li{margin: 0}
.empty-next > .sido-list > li > a{
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid #e6ebe7;
	border-radius: 15px;
	background-color: #fafbfa;
	color: #444;
	font-size: 13px;
	text-decoration: none;
}
.empty-next > .sido-list > li > a:hover{border-color: #28cf7a; color: #0c893f}

/* 같은 이름의 다른 지역 안내 (광주광역시 ↔ 경기 광주시) */
.cond-head > .cond-other{
	margin-top: 10px;
	font-size: 13px;
	color: #777;
}
.cond-head > .cond-other > a{color: #0c893f; text-decoration: underline}