/*
Theme Name: 수성메트로동물병원 (Suseong Metro Animal Hospital)
Theme URI: http://localhost:10004/
Description: Twenty Twenty-Five 자식 테마. 수성메트로동물병원 홈페이지 전용 디자인(메인 페이지, 헤더/푸터, 브랜드 컬러)을 담고 있습니다. 부모 테마를 직접 수정하지 않으므로 워드프레스/테마가 업데이트돼도 이 디자인은 유지됩니다.
Author: 수성메트로동물병원
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: suseong-child
*/

/* =========================================================================
   0. 색상 · 기본 변수
   - 색상 값은 theme.json 팔레트에서 관리합니다. (편집기 색상 선택기와 동일)
   - 아래는 "theme.json 값이 있으면 그것, 없으면 이 기본값" 형태입니다.
   ========================================================================= */
:root {
	--su-navy:          var(--wp--preset--color--deep-blue, #00375A);   /* 메인 포인트(딥 네이비) */
	--su-blue:          var(--wp--preset--color--main-blue, #0064A0);   /* 링크·버튼 */
	--su-mint:          var(--wp--preset--color--mint-green, #A0C8B4);  /* 보조 포인트(세이지/민트) */
	--su-lavender:      var(--wp--preset--color--lavender-blue, #8CA0C8);
	--su-red:           var(--wp--preset--color--point-red, #DC1428);   /* 로고색 · 아주 제한적으로만 */
	--su-ink:           var(--wp--preset--color--ink, #1A2A3A);         /* 본문 글자 */
	--su-paper:         var(--wp--preset--color--paper, #F4F7FA);       /* 연한 블루그레이 서브 배경 */
	--su-white:         #ffffff;

	--su-sage-soft:     #EEF4F1;   /* 대표원장 섹션용 아주 연한 민트 */
	--su-line:          #E1E8EF;   /* 옅은 구분선 */
	--su-muted:         #3E4F61;   /* 설명 글자 (가독성을 위해 진하게) */

	--su-max-width: 1200px;
	--su-radius: 12px;
	--su-shadow: 0 4px 18px rgba(0, 55, 90, 0.08);
}

/* =========================================================================
   1. 기본 리셋 / 공통
   ========================================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.suseong-front {
	margin: 0;
	color: var(--su-ink);
	background: var(--su-white);
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
		"Malgun Gothic", "맑은 고딕", sans-serif;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	/* 한글은 단어 중간에서 줄바꿈되지 않도록 (예: "공부하|며" 방지) */
	word-break: keep-all;
	overflow-wrap: break-word;
}

.suseong-front img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* 가운데 정렬 + 좌우 여백 래퍼 */
.su-container {
	width: 100%;
	max-width: var(--su-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* 섹션 간격 (여백을 넉넉히) */
.su-section {
	padding: 64px 0;
}

/* 섹션 배경 교대: 흰색 / 연한 블루그레이 */
.su-library,
.su-cases {
	background: var(--su-paper);
}

.su-director {
	background: var(--su-sage-soft);
}

/* 섹션 머리말 */
.su-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 20px;
	margin-bottom: 32px;
}

.su-section__head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.su-section__title {
	font-size: 1.55rem;
	margin: 0;
	color: var(--su-navy);
	letter-spacing: -0.02em;
}

.su-section__lead {
	margin: 8px 0 0;
	color: var(--su-muted);
	font-size: 1rem;
}

.su-section__more {
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
	color: var(--su-blue);
}

.su-section__more:hover {
	text-decoration: underline;
}

/* =========================================================================
   2. 버튼
   ========================================================================= */
.su-btn {
	display: inline-block;
	padding: 13px 24px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.98rem;
	text-decoration: none;
	text-align: center;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* 핵심 CTA: 딥 네이비 + 흰 글씨 */
.su-btn--primary {
	background: var(--su-navy);
	color: var(--su-white);
}

.su-btn--primary:hover {
	background: #002a45;
}

/* 보조 버튼: 흰 배경 + 네이비 테두리 */
.su-btn--ghost {
	background: transparent;
	color: var(--su-navy);
	border-color: var(--su-navy);
}

.su-btn--ghost:hover {
	background: var(--su-navy);
	color: var(--su-white);
}

/* 헤더 카카오톡 버튼: 과하지 않게, 작고 차분하게 (외곽선형) */
.su-btn--kakao {
	background: var(--su-white);
	color: var(--su-navy);
	border-color: var(--su-line);
	padding: 9px 16px;
	font-size: 0.9rem;
	font-weight: 600;
}

.su-btn--kakao:hover {
	background: var(--su-paper);
	border-color: var(--su-mint);
}

/* =========================================================================
   3. 헤더
   ========================================================================= */
.su-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--su-white);
	border-bottom: 1px solid var(--su-line);
}

.su-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 68px;
}

.su-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--su-navy);
}

.su-brand__logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.su-brand__name {
	font-weight: 800;
	font-size: 1.02rem;
	letter-spacing: -0.02em;
}

.su-header__right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.su-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
}

.su-nav a {
	text-decoration: none;
	color: var(--su-ink);
	font-weight: 600;
	font-size: 0.96rem;
	padding: 8px 2px;
	display: inline-block;
}

.su-nav a:hover {
	color: var(--su-blue);
}

/* 햄버거 버튼 (모바일 전용) */
.su-nav-toggle {
	display: none;
	position: relative;
	width: 42px;
	height: 42px;
	border: 1px solid var(--su-line);
	border-radius: 10px;
	background: var(--su-white);
	cursor: pointer;
	padding: 0;
}

.su-nav-toggle .su-nav-toggle__bar,
.su-nav-toggle .su-nav-toggle__bar::before,
.su-nav-toggle .su-nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 10px;
	width: 22px;
	height: 2px;
	background: var(--su-ink);
	transition: transform 0.2s ease, background 0.2s ease;
}

.su-nav-toggle .su-nav-toggle__bar {
	top: 20px;
}

.su-nav-toggle .su-nav-toggle__bar::before {
	top: -7px;
}

.su-nav-toggle .su-nav-toggle__bar::after {
	top: 7px;
}

.su-nav-toggle[aria-expanded="true"] .su-nav-toggle__bar {
	background: transparent;
}

.su-nav-toggle[aria-expanded="true"] .su-nav-toggle__bar::before {
	transform: translateY(7px) rotate(45deg);
}

.su-nav-toggle[aria-expanded="true"] .su-nav-toggle__bar::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================================
   4. HERO
   ========================================================================= */
.su-hero {
	background: linear-gradient(180deg, var(--su-paper) 0%, var(--su-white) 100%);
}

.su-hero__inner {
	padding: 84px 20px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.su-hero__title {
	font-size: clamp(1.55rem, 3.6vw, 2.3rem);
	line-height: 1.45;
	margin: 0 0 18px;
	color: var(--su-navy);
	letter-spacing: -0.02em;
	max-width: 22ch;
}

.su-hero__subtitle {
	font-size: 1.05rem;
	margin: 0 0 30px;
	color: var(--su-muted);
	max-width: 40ch;
}

.su-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.su-hero__media img {
	width: 100%;
	/* 어떤 비율의 사진을 넣어도 4:3 으로 보기 좋게 잘라 보여줍니다. */
	aspect-ratio: 4 / 3;
	max-height: 460px;
	border-radius: var(--su-radius);
	box-shadow: var(--su-shadow);
	object-fit: cover;
}

/* =========================================================================
   5. 핵심 진료분야 (FOCUS)
   ========================================================================= */
.su-focus__primary {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.su-focus-card {
	background: var(--su-white);
	border: 1px solid var(--su-line);
	border-top: 4px solid var(--su-mint);
	border-radius: var(--su-radius);
	padding: 30px 28px;
}

.su-focus-card__title {
	margin: 0 0 8px;
	font-size: 1.3rem;
	color: var(--su-navy);
}

.su-focus-card__desc {
	margin: 0 0 18px;
	color: var(--su-muted);
	font-size: 0.98rem;
}

.su-focus-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.su-focus-card__list li {
	background: var(--su-paper);
	color: var(--su-navy);
	font-size: 0.9rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
}

/* 그 외 진료 (작은 카드) */
.su-focus__secondary {
	margin-top: 34px;
}

.su-focus__secondary-label {
	margin: 0 0 14px;
	font-weight: 700;
	color: var(--su-muted);
	font-size: 0.95rem;
}

.su-mini-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.su-mini-card {
	background: var(--su-white);
	border: 1px solid var(--su-line);
	border-radius: 10px;
	padding: 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.su-mini-card__title {
	font-weight: 700;
	color: var(--su-navy);
}

.su-mini-card__desc {
	font-size: 0.86rem;
	color: var(--su-muted);
}

/* =========================================================================
   6. 건강정보 라이브러리 (LIBRARY)
   ========================================================================= */
.su-lib {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--su-line);
}

.su-lib__item {
	border-bottom: 1px solid var(--su-line);
}

.su-lib__link {
	display: flex;
	gap: 18px;
	padding: 18px 6px;
	text-decoration: none;
	color: inherit;
	align-items: center;
}

.su-lib__link:hover .su-lib__title {
	color: var(--su-blue);
}

.su-lib__thumb {
	flex: 0 0 auto;
	width: 108px;
	height: 76px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--su-mint);
}

.su-lib__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.su-lib__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.su-tag {
	align-self: flex-start;
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--su-navy);
	background: var(--su-mint);
	padding: 3px 9px;
	border-radius: 6px;
}

.su-lib__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--su-ink);
	line-height: 1.5;
}

.su-lib__desc {
	font-size: 0.9rem;
	color: var(--su-muted);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================================
   7. 대표원장 · 진료철학 (DIRECTOR)
   ========================================================================= */
/* 사진·이름·한 문장·버튼만 남겨 영역을 낮게 (위아래 여백은 다른 섹션보다 작게) */
.su-section.su-director {
	padding: 40px 0;
}

.su-director__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}

.su-director__media {
	flex: 0 0 auto;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--su-mint);
	display: flex;
	align-items: center;
	justify-content: center;
}

.su-director__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.su-director__monogram {
	font-size: 3.2rem;
	font-weight: 800;
	color: var(--su-navy);
}

.su-director__name {
	margin: 0 0 10px;
	font-size: 1.35rem;
	color: var(--su-navy);
}

.su-director__quote {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--su-navy);
	line-height: 1.6;
	max-width: 22em;           /* 모바일에서 2~3줄로 */
	word-break: keep-all;      /* 한글 단어 중간에서 줄이 끊기지 않게 */
	text-wrap: balance;        /* 줄 길이를 고르게 (지원하지 않는 브라우저는 그냥 줄바꿈) */
}

.su-director__quote::before {
	content: "\201C";
}

.su-director__quote::after {
	content: "\201D";
}

/* =========================================================================
   8. 진료사례 카드 (CASES)
   ========================================================================= */
.su-case-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.su-case-card {
	background: var(--su-white);
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

.su-case-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--su-lavender);
}

.su-case-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.su-case-card__title {
	display: block;
	padding: 16px 18px 20px;
	font-weight: 700;
	color: var(--su-ink);
	line-height: 1.5;
}

.su-case-card:hover .su-case-card__title {
	color: var(--su-blue);
}

/* =========================================================================
   9. 자주 묻는 질문 (FAQ)
   ========================================================================= */
.su-faq__inner {
	max-width: 760px;
}

.su-faq__list {
	border-top: 1px solid var(--su-line);
}

.su-faq__item {
	border-bottom: 1px solid var(--su-line);
}

.su-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 18px 40px 18px 4px;
	position: relative;
	font-weight: 700;
	color: var(--su-navy);
}

/* 기본 삼각형 마커 제거 */
.su-faq__q::-webkit-details-marker {
	display: none;
}

/* 오른쪽 +/- 표시 */
.su-faq__q::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--su-blue);
}

.su-faq__item[open] .su-faq__q::after {
	content: "\2212"; /* − */
}

.su-faq__a {
	padding: 0 4px 20px;
	color: var(--su-muted);
	font-size: 0.96rem;
}

.su-faq__more {
	margin-top: 28px;
	text-align: center;
}

/* =========================================================================
   10. 오시는 길 (DIRECTIONS)
   ========================================================================= */
.su-directions__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.su-info-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.su-info-list li {
	display: flex;
	gap: 12px;
	font-size: 0.98rem;
	align-items: flex-start; /* 여러 줄인 진료시간에서 라벨이 위로 정렬되도록 */
}

.su-info-list li span {
	line-height: 1.6;
}

.su-info-list strong {
	flex: 0 0 auto;
	min-width: 72px;
	color: var(--su-navy);
}

.su-directions__map {
	border-radius: var(--su-radius);
	overflow: hidden;
	border: 1px solid var(--su-line);
	background: var(--su-paper);
}

.su-directions__map iframe,
.su-naver-map {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

/* 지도 인증 실패 시 안내 문구 스타일 */
.su-naver-map--failed {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	color: var(--su-muted);
	font-size: 0.9rem;
	background: var(--su-paper);
}

.su-directions__map-placeholder {
	padding: 60px 20px;
	text-align: center;
	color: var(--su-muted);
	font-size: 0.95rem;
	line-height: 1.8;
}

/* =========================================================================
   11. 푸터
   ========================================================================= */
.su-footer {
	background: var(--su-navy);
	color: rgba(255, 255, 255, 0.82);
	padding: 44px 0;
	font-size: 0.9rem;
}

.su-footer__name {
	color: var(--su-white);
	font-weight: 800;
	font-size: 1.02rem;
	margin: 0 0 12px;
}

.su-footer p {
	margin: 4px 0;
}

/* =========================================================================
   12. 반응형 — 데스크톱(가로 782px 이상)
   ========================================================================= */
@media (min-width: 782px) {
	.su-section {
		padding: 80px 0;
	}

	.su-hero__inner {
		flex-direction: row;
		align-items: center;
		padding: 80px 20px;
	}

	.su-hero__text {
		flex: 1 1 0;
	}

	.su-hero--has-image .su-hero__media {
		flex: 0 0 42%;
	}

	/* 핵심 진료분야 큰 카드 2개를 나란히 */
	.su-focus__primary {
		grid-template-columns: 1fr 1fr;
		gap: 22px;
	}

	/* 그 외 진료 작은 카드 4개를 한 줄로 */
	.su-mini-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* 대표원장: 사진 왼쪽 / 글 오른쪽 */
	.su-director__inner {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 40px;
	}

	.su-director__media {
		width: 150px;
		height: 150px;
	}

	.su-director__quote {
		max-width: 34em;
	}

	/* 진료사례 3열 */
	.su-case-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* 오시는 길: 정보 왼쪽 / 지도 오른쪽 */
	.su-directions__grid {
		grid-template-columns: 1fr 1.2fr;
		gap: 32px;
		align-items: start;
	}
}

/* =========================================================================
   13. 반응형 — 모바일(가로 781px 이하) : 메뉴를 햄버거로
   ========================================================================= */
@media (max-width: 781px) {
	.su-nav-toggle {
		display: inline-flex;
	}

	.su-header__cta {
		display: none; /* 데스크톱 헤더 버튼은 숨기고, 햄버거 메뉴 안에서 노출 */
	}

	.su-header__inner {
		position: relative;
	}

	.su-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--su-white);
		border-bottom: 1px solid var(--su-line);
		box-shadow: var(--su-shadow);
	}

	.su-nav.is-open {
		display: block;
	}

	.su-nav ul {
		flex-direction: column;
		gap: 0;
		padding: 6px 0;
	}

	.su-nav li {
		border-top: 1px solid var(--su-line);
	}

	.su-nav li:first-child {
		border-top: none;
	}

	.su-nav a {
		padding: 14px 20px;
		width: 100%;
	}

	.su-nav__cta {
		padding: 12px 20px;
	}

	.su-nav__cta .su-btn {
		display: block;
		width: 100%;
	}

	.su-lib__link {
		gap: 14px;
	}

	.su-lib__thumb {
		width: 84px;
		height: 64px;
	}
}

@media (min-width: 782px) {
	/* 데스크톱에서는 햄버거 메뉴 안의 상담 버튼 숨김 */
	.su-nav__cta {
		display: none;
	}
}

/* =========================================================================
   14. 글 본문 FAQ 아코디언 ( [faq_section] / [faq_item] 단축코드 전용 )
   -------------------------------------------------------------------------
   주의: 이 스타일은 메인 페이지의 "자주 묻는 질문"(.su-faq__*) 과는
   완전히 별개의 클래스(.su-faqblock*)입니다. 지식글/진료사례 등
   "글 본문 안"에서 단축코드로 쓰는 FAQ 전용이며, 이 섹션을 고쳐도
   메인 페이지 FAQ 디자인에는 영향이 없습니다. (반대도 마찬가지)
   색상은 메인 페이지와 동일한 브랜드 팔레트(:root 변수)를 그대로 씁니다.
   ========================================================================= */

/* 여러 FAQ 카드를 세로로 담는 바깥 상자 */
.su-faqblock {
	margin: 28px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 질문 하나 = 카드 하나. <details> 태그라서 자바스크립트 없이도 열고 닫힙니다. */
.su-faqblock__item {
	background: var(--su-white, #ffffff);
	border: 1px solid var(--su-line, #e1e8ef);
	border-radius: var(--su-radius, 12px);
	overflow: hidden; /* 모서리를 둥글게 유지하기 위함 */
}

/* 질문 줄 (항상 보임, 굵은 글씨) */
.su-faqblock__q {
	list-style: none;        /* 기본 삼각형 화살표 숨김 */
	cursor: pointer;
	position: relative;
	padding: 16px 46px 16px 18px;
	font-weight: 700;
	color: var(--su-navy, #00375a);
	line-height: 1.5;
	transition: background 0.15s ease;
}

.su-faqblock__q:hover {
	background: var(--su-paper, #f4f7fa);
}

/* 크롬/사파리 기본 화살표 아이콘 제거 (대신 아래 +/- 를 씁니다) */
.su-faqblock__q::-webkit-details-marker {
	display: none;
}

/* 오른쪽 + / − 아이콘 */
.su-faqblock__q::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
	color: var(--su-blue, #0064a0);
}

/* 펼쳐진 상태(열림)일 때: + 를 − 로, 질문 아래에 구분선 추가 */
.su-faqblock__item[open] .su-faqblock__q {
	border-bottom: 1px solid var(--su-line, #e1e8ef);
}

.su-faqblock__item[open] .su-faqblock__q::after {
	content: "\2212"; /* − 기호 */
}

/* 답변 영역 */
.su-faqblock__a {
	padding: 14px 18px 18px;
	color: var(--su-ink, #1a2a3a);
	font-size: 0.97rem;
	line-height: 1.75;
}

/* 답변 안의 문단 간격이 위아래로 남지 않도록 정리 */
.su-faqblock__a > p:first-child {
	margin-top: 0;
}

.su-faqblock__a > p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   15. 2026-10 개편 : 첫 화면 · 카드 · 표지 · 검색/필터 · 진료시간 · 가독성
   -------------------------------------------------------------------------
   위쪽 규칙을 덮어쓰거나 새로 추가하는 부분입니다. (같은 선택자는 아래쪽이 우선)
   ========================================================================= */

/* ── 15-1. 글자 가독성: 더 진한 색, 16px 이상, 넉넉한 줄 간격 ── */
body.suseong-front {
	font-size: 16px;
	line-height: 1.75;
	color: var(--su-ink);
}

.su-section__title {
	font-size: 1.65rem;
	line-height: 1.35;
}

.su-section__lead {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--su-muted);
}

.su-section__foot {
	margin-top: 30px;
	text-align: center;
}

.su-mini-card__desc {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--su-muted);
}

.su-focus-card__desc {
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--su-muted);
}

.su-footer {
	font-size: 0.97rem;
	line-height: 1.8;
}

/* ── 15-2. 첫 화면: 사진을 크게, 문구와 사진 사이 간격은 좁게 ── */
.su-hero__title {
	font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.15rem);
	line-height: 1.4;
	font-weight: 800;
	max-width: none;
	margin-bottom: 20px;
}

.su-hero__subtitle {
	font-size: 1.1rem;
	line-height: 1.85;
	color: #2d3f52;
	max-width: none;
	margin-bottom: 30px;
}

.su-hero__media {
	min-width: 0;
}

.su-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;     /* 사진 원래 비율(3:2) 그대로: 늘리거나 찌그러뜨리지 않음 */
	max-height: none;
	object-fit: cover;
	object-position: 50% 40%; /* 원장님 얼굴과 수술하는 손이 함께 보이는 위치 */
	border-radius: var(--su-radius);
}

@media (min-width: 782px) {
	.su-hero__inner {
		gap: 36px;
		padding-top: 60px;
		padding-bottom: 60px;
		align-items: center;
	}

	.su-hero__text {
		flex: 0 0 41%;
	}

	.su-hero--has-image .su-hero__media {
		flex: 1 1 0;
	}

	/* 데스크톱에서는 가로가 조금 더 긴 비율로 보여 줘서 사진이 시원하게 보이도록 */
	.su-hero__media img {
		aspect-ratio: 16 / 10;
		object-position: 50% 45%;
	}
}

@media (min-width: 782px) and (max-width: 999px) {
	.su-hero__text {
		flex: 0 0 46%;
	}
}

@media (max-width: 781px) {
	.su-hero__inner {
		padding-top: 40px;
		padding-bottom: 40px;
		gap: 28px;
	}

	.su-hero__actions .su-btn {
		flex: 1 1 auto;
	}
}

/* ── 15-3. 분류 배지: 진료분야(민트) + 글 유형(네이비 테두리) ── */
.su-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.su-badge {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.3;
	padding: 4px 10px;
	border-radius: 6px;
}

.su-badge--field {
	background: var(--su-mint);
	color: var(--su-navy);
}

.su-badge--type {
	background: var(--su-white);
	color: var(--su-navy);
	border: 1px solid var(--su-navy);
}

/* ── 15-4. 글 카드 (건강정보 · 진료사례 공용) ── */
.su-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.su-card {
	background: var(--su-white);
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.su-card:hover {
	box-shadow: 0 10px 28px rgba(0, 55, 90, 0.14);
	transform: translateY(-2px);
}

.su-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.su-card__media {
	display: block;
}

.su-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 18px 20px 22px;
}

.su-card__title {
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--su-ink);
	overflow-wrap: anywhere;
}

.su-card__desc {
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--su-muted);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.su-card__more {
	margin-top: auto;
	padding-top: 4px;
	font-weight: 700;
	font-size: 0.97rem;
	color: var(--su-blue);
}

.su-card:hover .su-card__title {
	color: var(--su-blue);
}

.su-photo {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--su-paper);
}

.su-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 782px) {
	.su-card-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	/* 진료사례는 2~3건: 카드를 넓게 */
	.su-card-grid--case {
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	}
}

/* ── 15-5. 사진이 없는 글의 "표지" (네이비 · 민트, 큰 글자) ── */
.su-cover {
	position: relative;
	display: flex;
	flex-direction: column;
	/* 위쪽 기준 정렬: 설명이 한 줄이든 두 줄이든 진료분야·제목의 시작 위치가 모든 표지에서 같습니다.
	   (예전에는 세로 가운데 정렬이라 설명이 짧은 표지의 글자만 아래로 내려가 보였습니다) */
	justify-content: flex-start;
	gap: 8px;
	min-height: 216px;      /* 진료분야 1줄 + 제목 2줄 + 설명 2줄이 모두 들어가는 높이 */
	aspect-ratio: 16 / 9;
	padding: 22px 24px 40px 28px;
	overflow: hidden;
	color: var(--su-white);
	background: linear-gradient(135deg, var(--su-navy) 0%, #0a5a8c 100%);
	border-left: 8px solid var(--su-mint);
}

.su-cover::after {
	content: "";
	position: absolute;
	right: -50px;
	top: -50px;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: rgba(160, 200, 180, 0.22);
}

.su-cover__eyebrow {
	position: relative;
	z-index: 1;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--su-mint);
}

.su-cover__headline {
	position: relative;
	z-index: 1;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.su-cover__sub {
	position: relative;
	z-index: 1;
	font-size: 0.98rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.su-cover__brand {
	position: absolute;
	z-index: 1;
	right: 16px;
	bottom: 12px;
	font-size: 0.82rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
}

/* ── 15-6. 진료사례 카드: 수술 전 / 수술 후 사진 나란히 ── */
.su-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;   /* 모바일에서도 좌우로 나란히 (비교하기 쉽게) */
	gap: 2px;
	background: #0b1620;
}

.su-compare__item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #111c26;
}

.su-compare__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;      /* 비율을 유지한 채 잘라서 맞춤 (늘이지 않음) */
	object-position: 50% 55%;
}

.su-compare__label {
	position: absolute;
	z-index: 1;
	top: 8px;
	left: 8px;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1.4;
}

.su-compare__label--before {
	background: rgba(0, 55, 90, 0.92);
	color: var(--su-white);
}

.su-compare__label--after {
	background: var(--su-mint);
	color: var(--su-navy);
}

/* ── 15-7. 핵심 진료분야: 질환 태그는 링크 ── */
.su-focus-card__list li {
	padding: 0;
	background: none;
}

.su-focus-card__list a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--su-paper);
	color: var(--su-navy);
	font-size: 0.97rem;
	font-weight: 700;
	text-decoration: none;
}

.su-focus-card__list a:hover,
.su-focus-card__list a:focus-visible {
	border-color: var(--su-mint);
	background: var(--su-white);
	color: var(--su-blue);
}

/* ── 15-8. 건강정보 전체 보기 : 검색 · 필터 · 목록 ── */
.su-listing {
	padding: 40px 0 72px;
}

.su-listing__head {
	margin-bottom: 24px;
}

.su-listing__title {
	margin: 0 0 8px;
	font-size: 2rem;
	line-height: 1.3;
	color: var(--su-navy);
}

.su-listing__lead {
	margin: 0;
	font-size: 1.05rem;
	color: var(--su-muted);
}

.su-search {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}

.su-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	padding: 0 20px;
	font-size: 16px;               /* 16px 미만이면 아이폰이 화면을 확대해 버립니다 */
	color: var(--su-ink);
	background: var(--su-white);
	border: 1.5px solid #b9c7d4;
	border-radius: 999px;
}

.su-search__input:focus {
	outline: 2px solid var(--su-blue);
	outline-offset: 1px;
}

.su-search__btn {
	flex: 0 0 auto;
	height: 50px;
	padding: 0 26px;
}

.su-filters {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 20px;
	padding: 18px;
	background: var(--su-paper);
	border-radius: var(--su-radius);
}

.su-filters__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.su-filters__label {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--su-navy);
}

.su-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.su-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid #b9c7d4;
	border-radius: 999px;
	background: var(--su-white);
	color: var(--su-navy);
	font-size: 0.97rem;
	font-weight: 700;
	text-decoration: none;
}

.su-chip:hover {
	border-color: var(--su-navy);
}

.su-chip.is-active {
	background: var(--su-navy);
	border-color: var(--su-navy);
	color: var(--su-white);
}

.su-chip__count {
	font-size: 0.82rem;
	font-weight: 700;
	opacity: 0.75;
}

.su-listing__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 18px;
}

.su-listing__count {
	margin: 0;
	font-size: 1rem;
	color: var(--su-muted);
}

.su-listing__count strong {
	color: var(--su-navy);
}

.su-listing__reset {
	font-weight: 700;
	color: var(--su-blue);
}

.su-listing__recent-title {
	margin: 40px 0 16px;
	font-size: 1.25rem;
	color: var(--su-navy);
}

.su-empty-state {
	padding: 36px 24px;
	text-align: center;
	background: var(--su-white);
	border: 1px dashed #9fb2c4;
	border-radius: var(--su-radius);
}

.su-empty-state__title {
	margin: 0 0 8px;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--su-navy);
}

.su-empty-state__text {
	margin: 0 auto 20px;
	max-width: 46ch;
	color: var(--su-muted);
}

.su-empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.su-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}

.su-pager__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #b9c7d4;
	border-radius: 10px;
	background: var(--su-white);
	color: var(--su-navy);
	font-weight: 700;
	text-decoration: none;
}

.su-pager__num.is-current {
	background: var(--su-navy);
	border-color: var(--su-navy);
	color: var(--su-white);
}

@media (min-width: 782px) {
	.su-listing {
		padding-top: 56px;
	}

	.su-filters__group {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
	}

	.su-filters__label {
		flex: 0 0 72px;
		padding-top: 8px;
	}
}

/* ── 15-9. FAQ: 질문 누르기 쉽게 + 관련 글 링크 ── */
.su-faq__q {
	min-height: 56px;
	padding-top: 16px;
	padding-bottom: 16px;
	font-size: 1.05rem;
	line-height: 1.5;
}

.su-faq__a {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--su-ink);
}

.su-faq__a p {
	margin: 0;
}

.su-faq__related {
	list-style: none;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px dashed #b9c7d4;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.su-faq__related li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.su-faq__related-type {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 6px;
	background: var(--su-mint);
	color: var(--su-navy);
	font-size: 0.82rem;
	font-weight: 800;
}

.su-faq__related a {
	font-weight: 700;
	line-height: 1.5;
	color: var(--su-blue);
	overflow-wrap: anywhere;
}

/* ── 15-10. 진료시간 · 오시는 길 ── */
.su-directions__sub {
	margin: 0 0 10px;
	font-size: 1.15rem;
	color: var(--su-navy);
}

.su-hours {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	background: var(--su-white);
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	overflow: hidden;
}

.su-hours__row {
	display: grid;
	grid-template-columns: minmax(130px, max-content) max-content 1fr;
	gap: 4px 16px;
	align-items: baseline;
	padding: 12px 16px;
	border-top: 1px solid var(--su-line);
	font-size: 1rem;
	line-height: 1.6;
}

.su-hours__row:first-child {
	border-top: 0;
}

.su-hours__day {
	font-weight: 800;
	color: var(--su-navy);
}

.su-hours__time {
	font-weight: 700;
	color: var(--su-ink);
}

.su-hours__note {
	font-size: 0.95rem;
	color: var(--su-muted);
}

/* 목요일: 오후 1시 이후 휴진이 한눈에 보이도록 강조 */
.su-hours__row--alert {
	background: #fff3f1;
	box-shadow: inset 5px 0 0 var(--su-red);
}

.su-hours__row--alert .su-hours__note {
	font-weight: 800;
	color: #b0121f;
}

.su-info-list a {
	color: var(--su-navy);
	font-weight: 800;
	text-decoration: none;
}

.su-directions__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.su-btn--kakao-solid {
	background: var(--su-mint);
	color: var(--su-navy);
	border-color: var(--su-mint);
}

.su-btn--kakao-solid:hover {
	background: #8fbba5;
}

@media (max-width: 560px) {
	.su-hours__row {
		grid-template-columns: 1fr auto;
	}

	.su-hours__note {
		grid-column: 1 / -1;
	}

	.su-directions__actions .su-btn {
		flex: 1 1 100%;
	}

	.su-search__btn {
		padding: 0 18px;
	}

	.su-cover__headline {
		font-size: 1.4rem;
	}
}

/* 카드 안의 긴 글이 칸 폭을 밀어내지 않도록 (모바일 가로 넘침 방지) */
.su-card-grid {
	grid-template-columns: minmax(0, 1fr);
}

.su-card {
	min-width: 0;
}

@media (min-width: 782px) {
	.su-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.su-card-grid--case {
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	}
}

/* 표지: aspect-ratio 와 min-height 가 겹쳐 가로폭이 늘어나는 문제 방지 + 배지 글자 키움 */
.su-cover {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.su-badge {
	font-size: 0.88rem;
}

.su-compare__label {
	font-size: 0.9rem;
}

.su-faq__related-type {
	font-size: 0.88rem;
}

/* =========================================================================
   17. 질환 모아보기(건강정보/진료사례 구역 나눔) · 글 아래 관련 글 링크
   ========================================================================= */
.su-topic__eyebrow {
	margin: 0 0 6px;
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--su-blue);
}

.su-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.su-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 18px;
	border: 1.5px solid var(--su-navy);
	border-radius: 999px;
	background: var(--su-white);
	color: var(--su-navy);
	font-weight: 800;
	text-decoration: none;
}

.su-tab:hover {
	background: var(--su-navy);
	color: var(--su-white);
}

.su-tab__count {
	display: inline-block;
	min-width: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--su-mint);
	color: var(--su-navy);
	font-size: 0.88rem;
	text-align: center;
}

.su-topic__section {
	margin-top: 36px;
	scroll-margin-top: 90px;
}

.su-topic__title {
	margin: 0 0 18px;
	padding-left: 12px;
	border-left: 5px solid var(--su-mint);
	font-size: 1.4rem;
	line-height: 1.3;
	color: var(--su-navy);
}

.su-topic__title span {
	font-size: 1rem;
	font-weight: 600;
	color: var(--su-muted);
}

.su-topic__none {
	margin: 0;
	padding: 20px;
	background: var(--su-paper);
	border-radius: var(--su-radius);
	color: var(--su-muted);
}

.su-topic__none a {
	margin-left: 6px;
	font-weight: 700;
	color: var(--su-blue);
}

.su-topic .su-empty-state {
	margin-top: 36px;
}

/* 글 상세 아래쪽 "관련 진료사례 / 관련 건강정보" */
.su-related {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 3px solid var(--su-mint);
}

.su-related__title {
	margin: 0 0 14px;
	font-size: 1.3rem;
	line-height: 1.4;
	color: var(--su-navy);
}

.su-related__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.su-related__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	background: var(--su-white);
	color: var(--su-ink);
	text-decoration: none;
}

.su-related__link:hover {
	border-color: var(--su-navy);
}

.su-related__name {
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* =========================================================================
   16. 하단 병원 정보(푸터)  — 간결한 3열
   -------------------------------------------------------------------------
   PC     : 병원·위치 | 진료시간(가장 넓음) | 문의·상담. 세로 구분선 없이 열 사이 간격으로 구분.
            높이는 내용에 맞춰 자동(고정 높이·최소 높이 없음).
   모바일 : 한 열로 쌓고, 영역 사이에만 옅은 가로 구분선.
   ========================================================================= */
.su-footer {
	padding: 40px 0 20px;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

.su-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.su-footer__col {
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* 모바일: 영역 사이에만 가로 구분선 */
.su-footer__col + .su-footer__col {
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* 영역 제목: 민트색 포인트 */
.su-footer__title {
	margin: 0 0 14px;
	padding-left: 12px;
	border-left: 4px solid var(--su-mint);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--su-mint);
}

/* ① 병원 · 위치 */
.su-footer .su-footer__name {
	margin: 0 0 6px;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.4;
	color: var(--su-white);
}

.su-footer .su-footer__address {
	margin: 0 0 16px;
	line-height: 1.6;
}

.su-footer__road,
.su-footer__jibun {
	display: block;
}

/* 괄호 안 지번 주소 "(만촌동 950-1)" 는 중간에서 끊기지 않게 한 덩어리로 */
.su-footer__jibun {
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.8);
}

/* ② 진료시간: 요일 | 시간 두 열, 모든 행의 시간 시작 위치가 같음 */
.su-footer__hours {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 20px;
	row-gap: 4px;
	margin: 0;
	padding: 0;
}

.su-footer__hrow {
	display: contents;
}

.su-footer__hours dt {
	margin: 0;
	font-weight: 700;
	line-height: 1.5;
	color: var(--su-white);
	white-space: nowrap;
}

.su-footer__hours dd {
	margin: 0;
	font-weight: 800;
	line-height: 1.5;
	color: var(--su-white);
	font-variant-numeric: tabular-nums;
}

/* 표 아래 작은 안내 문구 (일요일 휴진은 맨 아래 한 줄, 강조 없음) */
.su-footer__notes {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.93rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
}

.su-footer__notes li {
	margin: 0;
	padding: 0;
}

/* ③ 문의 · 상담 */
.su-footer .su-footer__phone {
	display: block;
	margin: 0 0 14px;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--su-white);
	text-decoration: none;
	white-space: nowrap;
}

/* 전화·카카오톡 버튼: 같은 높이, 같은 너비, 열 너비를 넘지 않음 (좁으면 세로로 전환) */
.su-footer__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
	gap: 10px;
}

.su-footer__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 46px;
	padding: 0 16px;
	font-size: 0.97rem;
	line-height: 1;
	white-space: nowrap;
	max-width: 100%;
}

.su-footer__actions .su-footer__btn {
	width: 100%;
}

.su-btn--footer-solid {
	background: var(--su-mint);
	border-color: var(--su-mint);
	color: var(--su-navy);
}

.su-btn--footer-solid:hover {
	background: #b6d6c5;
	border-color: #b6d6c5;
}

.su-btn--footer-line {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.75);
	color: var(--su-white);
}

.su-btn--footer-line:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--su-white);
}

/* 맨 아래: 사업자 정보 (가로 구분선 하나만) */
.su-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 24px;
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 0.93rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.su-footer .su-footer__bottom p {
	margin: 0;
}

@media (max-width: 599px) {
	.su-footer__bottom {
		flex-direction: column;
		gap: 2px;
	}
}

/* PC: 3열 (가운데 진료시간 열이 가장 넓음). 세로 구분선 없이 열 사이 간격만. */
@media (min-width: 900px) {
	.su-footer {
		padding: 44px 0 20px;
	}

	.su-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
		column-gap: 40px;
		row-gap: 0;
	}

	.su-footer__col + .su-footer__col {
		padding-top: 0;
		border-top: 0;
	}

	.su-footer__bottom {
		margin-top: 32px;
	}
}

@media (min-width: 1100px) {
	.su-footer__grid {
		column-gap: 56px;
	}
}

/* =========================================================================
   17. 메인 페이지 주요 섹션 제목 강조 · 주차 안내 띠 · 메인 전용 간단 푸터
   -------------------------------------------------------------------------
   대상 제목: 실제 진료사례 · 핵심 진료분야 · 건강정보 · 진료시간·오시는 길
   (front-page.php 의 su-section__head--main 이 붙은 머리말에만 적용됩니다)
   - 제목은 이미지가 아닌 텍스트이고, 네 곳 모두 같은 크기·굵기·색·왼쪽 정렬입니다.
   ========================================================================= */

/* 머리말: 왼쪽 정렬, PC 에서는 "전체 보기" 링크가 오른쪽 */
.su-section__head--main {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	text-align: left;
	gap: 14px 24px;
	margin-bottom: 30px;
}

.su-section__head--main .su-section__title {
	font-size: 1.7rem;            /* 모바일 약 27px */
	font-weight: 700;
	line-height: 1.3;
	color: var(--su-navy);
	letter-spacing: -0.02em;
}

/* 제목 위의 짧고 도톰한 민트 포인트 선 */
.su-section__head--main .su-section__title::before {
	content: "";
	display: block;
	width: 44px;
	height: 5px;
	margin-bottom: 14px;
	border-radius: 3px;
	background: var(--su-mint);
}

.su-section__head--main .su-section__lead {
	margin: 12px 0 0;             /* 제목과 설명 사이 약 12px */
	font-size: 1.05rem;           /* 약 16.8px 보조 글자 */
	line-height: 1.65;
	color: var(--su-muted);
}

.su-section__head--main .su-section__more {
	flex: 0 0 auto;
}

/* 제목이 커진 만큼 섹션 위아래 여백은 줄임 */
.su-section.su-cases,
.su-section.su-focus,
.su-section.su-library,
.su-section.su-directions {
	padding: 52px 0;
}

@media (min-width: 782px) {
	.su-section__head--main .su-section__title {
		font-size: 2.2rem;        /* PC 약 35px */
	}

	.su-section.su-cases,
	.su-section.su-focus,
	.su-section.su-library,
	.su-section.su-directions {
		padding: 68px 0;
	}
}

/* 모바일: 제목·설명 아래에 "전체 보기" 링크를 따로 배치 (겹치지 않게) */
@media (max-width: 781px) {
	.su-section__head--main {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 26px;
	}
}

/* ── 주차 안내: 얇은 연한 민트 띠 (큰 카드 아님) ── */
.su-parking {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 14px;
	border-radius: 8px;
	background: #e4f0ea;
	color: var(--su-navy);
	font-size: 0.98rem;
	line-height: 1.5;
}

.su-parking__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--su-navy);
	color: var(--su-white);
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1;
}

.su-parking strong {
	font-weight: 800;
}

.su-directions__info .su-directions__actions {
	margin-top: 18px;
}

/* ── 메인 페이지 전용 간단 푸터 (footer.php 의 su-footer--compact) ── */
.su-footer.su-footer--compact {
	padding: 30px 0 22px;
}

.su-footer--compact .su-footer__name {
	margin: 0 0 6px;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.4;
	color: var(--su-white);
}

.su-footer--compact .su-footer__line {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 20px;
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

.su-footer--compact .su-footer__item {
	display: inline-block;
}

.su-footer--compact a {
	color: var(--su-white);
	font-weight: 700;
	text-decoration: none;
}

.su-footer--compact .su-footer__bottom {
	margin-top: 18px;
	padding-top: 14px;
}

.su-footer--compact .su-footer__biz .su-footer__item {
	margin-left: 14px;
}

@media (max-width: 599px) {
	.su-footer--compact .su-footer__biz .su-footer__item {
		display: block;
		margin: 2px 0 0;
	}
}

/* 네이버 지도 안의 글자·로고가 스크롤할 때 상단 고정 메뉴 위로 올라오지 않도록 지도 안에 가둡니다. */
.su-directions__map {
	isolation: isolate;
}

/* =========================================================================
   18. 목록 페이지 제목 (진료사례 · 건강정보 · 질환 모아보기)
   -------------------------------------------------------------------------
   메인 페이지 섹션 제목(17번)과 같은 스타일입니다.
   진한 네이비 Bold · 위쪽 민트 포인트 선 · 왼쪽 정렬 · 설명은 16.8px 보조 글자.
   제목·설명·검색창·필터·카드는 모두 같은 왼쪽 시작선(.su-container 안)입니다.
   ========================================================================= */
.su-listing {
	padding: 48px 0 72px;           /* 위 여백: 상단 고정 메뉴와 민트 선 사이 충분히 */
}

.su-listing__head {
	margin-bottom: 28px;            /* 설명과 다음 영역(검색창·건수) 사이: 두 목록 페이지 동일 */
	text-align: left;
}

.su-listing__title {
	margin: 0;
	font-size: 1.7rem;              /* 모바일 약 27px */
	font-weight: 700;
	line-height: 1.3;
	color: var(--su-navy);
	letter-spacing: -0.02em;
}

.su-listing__title::before {
	content: "";
	display: block;
	width: 44px;
	height: 5px;
	margin-bottom: 14px;
	border-radius: 3px;
	background: var(--su-mint);
}

.su-listing__lead {
	margin: 12px 0 0;               /* 제목과 설명 사이 약 12px */
	font-size: 1.05rem;             /* 약 16.8px */
	line-height: 1.65;
	color: var(--su-muted);
}

@media (min-width: 782px) {
	.su-listing {
		padding-top: 64px;
	}

	.su-listing__title {
		font-size: 2.2rem;          /* PC 약 35px */
	}
}

/* 질환 모아보기 페이지: 제목 위 작은 안내 글자와 민트 선 사이 간격 */
.su-topic__eyebrow {
	margin: 0 0 10px;
}

/* 대표 이미지 썸네일: 원본 비율을 유지한 채 가운데 중심으로 자름 */
.su-photo img {
	object-position: 50% 45%;
}

/* =========================================================================
   19. 진료사례 카드 썸네일 크기 통일 (메인 · 진료사례 목록 · 질환 모아보기 공통)
   -------------------------------------------------------------------------
   사진 영역을 가로:세로 = 2:1 로 고정합니다. (전/후 비교 사진은 좌우 정사각형 두 장이 정확히 이 비율)
   - 비교 사진: 좌우 같은 너비, 정사각형 칸 → 이도(귀 안쪽) 둥근 사진은 잘리지 않습니다.
   - 대표 이미지 한 장: 같은 칸에 비율을 유지한 채 가운데 중심으로 맞춤 (늘이지 않음)
   - 그래서 배지 · 제목 · "상세 사례 보기" 의 시작선이 카드마다 같아집니다.
   ========================================================================= */
.su-card--case .su-card__media {
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: #0b1620;
}

.su-card--case .su-compare,
.su-card--case .su-photo,
.su-card--case .su-cover {
	height: 100%;
	aspect-ratio: auto;
}

.su-card--case .su-compare__item {
	aspect-ratio: auto;
	height: 100%;
}

.su-card--case .su-compare__item img,
.su-card--case .su-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 사진이 하나도 없는 진료사례의 제목 표지도 같은 높이에 맞춤 */
.su-card--case .su-cover {
	min-height: 0;
	padding: 14px 20px 34px 24px;
	gap: 4px;
}

.su-card--case .su-cover__headline {
	font-size: 1.2rem;
}

/* ── 건강정보 표지 안쪽 정렬 통일 (모든 글 공통 규칙) ──────────────────────────
   · 진료분야 · 제목 · 설명은 위쪽 기준으로 같은 여백(위 22px, 좌 28px, 우 24px)에서 시작합니다.
   · 제목은 최대 2줄, 설명은 최대 2줄까지만 보여 주고 넘으면 … 로 줄여서, 글 길이와 상관없이 항상 칸 안에 들어옵니다.
   · 병원명은 모든 표지에서 오른쪽 아래(오른쪽 16px · 아래 12px) 같은 자리입니다. */
.su-cover__headline {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}