/* =============================================
   공통 홈 섹션 (히어로 / 통계 / 시스템 / 최신 공지)
   아동·성인 메인 페이지에서 공통으로 재사용
   ============================================= */

/* ── HERO ───────────────────────────────────── */
.main-hero {
	background: #f4ece0;
	overflow: hidden;
	position: relative;
}

/* 헤더(.header-inner)와 같은 최대 폭(1280px)은 유지하되, 좌우 패딩은 제거(2026-07-24,
   사용자 요청) — 히어로 배너 이미지가 1280px을 여백 없이 완전히 가득 채우도록 함
   (기존엔 16px 패딩 때문에 실제로는 1248px까지만 채워졌음). 그 대신 헤더 콘텐츠와
   좌우 끝이 정확히 안 맞을 수 있음(패딩 없앤 트레이드오프). */
.main-hero__inner {
	max-width: 1280px;
	margin: 0 auto;
}

/* 슬라이드 1장 분량의 콘텐츠(텍스트+비주얼) — 전체 영역이 함께 움직이는 단위.
   스와이퍼가 없을 때(기본 문구 1장)도 동일 클래스를 그대로 써서 레이아웃이 같다. */
.main-hero__slide {
	display: flex;
	align-items: center;
	gap: 60px;
}

.main-hero__content {
	flex: 1;
	min-width: 0;
}

.main-hero__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--hyoo-accent);
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.main-hero__title {
	font-size: clamp(28px, 3.5vw, 46px);
	font-weight: 800;
	color: var(--hyoo-text);
	line-height: 1.25;
	letter-spacing: -1px;
	margin: 0 0 24px;
	word-break: keep-all;
}

.main-hero__desc {
	font-size: 15px;
	color: #6b6460;
	line-height: 1.8;
	letter-spacing: -0.3px;
	margin: 0 0 32px;
	word-break: keep-all;
}

/* 관리자가 등록한 히어로 슬라이드 — 텍스트가 이미지 안에 이미 디자인된 "통이미지"
   배너 1장이 히어로 전체 폭을 채운다(components/home/sections-hero-legacy.php에는
   슬라이드별 텍스트를 따로 노출하던 이전 방식이 보관되어 있음). 슬라이드마다 높이를
   통일하려고 aspect-ratio를 고정하되(2026-07-23), object-fit:cover는 이미지 핵심
   내용(텍스트 등)을 잘라내는 문제가 있어 object-fit:contain으로 변경 — 이미지 비율이
   박스와 다르면 여백(레터박스)이 생기지만 크롭은 되지 않는다.
   실제 등록 이미지 규격이 1280×582로 확정되어(2026-07-24) 그 비율로 맞춤 — 이전의
   21:9(≈2.33)는 실제 이미지 비율(≈2.2)보다 넓어서 contain 특성상 좌우에 여백이 생겨
   이미지가 작게 보이는 문제가 있었음.
   둥근 모서리(border-radius)·여백(padding)·배경색은 이미지 비율이 박스와 정확히
   맞아떨어진 뒤로는 불필요해져서 제거(2026-07-24) — 이미지가 각지고 여백 없이
   그대로 노출된다.
   768px 이하 모바일에서 4:3으로 따로 덮어쓰던 규칙도 같은 이유로 제거(2026-07-24) —
   실제 이미지보다 세로로 긴 박스라 contain 특성상 위아래 레터박스가 생겨 작아 보였음.
   이제 모바일 포함 전 구간에서 이 비율 하나만 쓴다. */
.main-hero__banner {
	display: block;
	aspect-ratio: 1280 / 582;
}

.main-hero__banner-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* 비주얼 영역 */
.main-hero__visual {
	flex: 0 0 460px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-hero__brain-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle at 50% 60%, #fff 40%, #e8d8c4 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 20px 60px rgba(168, 120, 96, 0.18);
}

.main-hero__brain-img {
	width: 70%;
	height: auto;
	object-fit: contain;
}


/* ── PURPOSE (치료목표) ─────────────────────── */
.main-purpose {
	background: #fff;
	padding: 72px 20px;
}

.main-purpose__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.main-purpose__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.main-purpose__eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--hyoo-accent-dark);
	margin-bottom: 10px;
}

.main-purpose__title {
	font-size: 26px;
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.5px;
	margin: 0 0 14px;
}

.main-purpose__desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--hyoo-text-muted);
	margin: 0;
	word-break: keep-all;
}

.main-purpose__desc strong {
	font-weight: 700;
	color: var(--hyoo-text);
}

.purpose-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.purpose-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	border: 1px solid var(--hyoo-border);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.2s, border-color 0.2s;
	position: relative;
}

.purpose-card__link:hover {
	border-color: var(--hyoo-accent-light);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.purpose-card__img-wrap {
	display: block;
	width: 100%;
	aspect-ratio: 570 / 220;
	overflow: hidden;
	background: var(--hyoo-bg-soft);
}

.purpose-card__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.purpose-card__link:hover .purpose-card__img-wrap img {
	transform: scale(1.05);
}

.purpose-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px 22px;
}

.purpose-card__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.3px;
}

.purpose-card__desc {
	font-size: 13px;
	color: var(--hyoo-text-muted);
	line-height: 1.5;
	word-break: keep-all;
}

.purpose-card__arrow {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 26px;
	height: 26px;
	padding: 5px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	color: var(--hyoo-accent-dark);
}


/* ── STATS ──────────────────────────────────── */
.main-stats {
	background: #271e16;
	padding: 60px 16px;
}

.main-stats__inner {
	display: flex;
	align-items: center;
	gap: 60px;
	max-width: 1180px;
	margin: 0 auto;
}

.main-stats__intro {
	flex: 0 0 320px;
}

.main-stats__title {
	font-size: clamp(20px, 2.2vw, 25px);
	font-weight: 800;
	color: #f3e8da;
	line-height: 1.4;
	letter-spacing: -0.5px;
	margin: 0 0 14px;
	word-break: keep-all;
}

.main-stats__desc {
	font-size: 14px;
	color: #ab9e8c;
	line-height: 1.7;
	letter-spacing: -0.2px;
	margin: 0 0 24px;
	word-break: keep-all;
}

.main-stats__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 26px;
	background: var(--hyoo-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.3px;
	text-decoration: none;
	border-radius: 50px;
	transition: background 0.2s;
}

.main-stats__btn svg {
	width: 16px;
	height: 16px;
	transition: transform 0.15s;
}

.main-stats__btn:hover {
	background: var(--hyoo-accent-dark);
}

.main-stats__btn:hover svg {
	transform: translateX(3px);
}

.main-stats__list {
	flex: 1;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	min-width: 0;
}

.stat-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	text-align: center;
	padding: 0 40px;
}

.stat-item__label {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	font-size: clamp(14px, 1.4vw, 18px);
	color: #96876f;
	line-height: 1.6;
	letter-spacing: -0.3px;
	margin: 0 0 16px;
	word-break: keep-all;
}

.stat-item__label-icon {
	flex-shrink: 0;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 6px;
	border: 1.5px solid #c09070;
	border-radius: 50%;
	color: #c09070;
}

.stat-item__num-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	margin-bottom: 10px;
}

.stat-item__num {
	font-size: clamp(40px, 5vw, 60px);
	font-weight: 800;
	color: #e8d4be;
	line-height: 1;
	letter-spacing: -2px;
}

.stat-item__num-prefix {
	font-size: 15px;
	font-weight: 600;
	color: #c09070;
	margin-bottom: 8px;
}

.stat-item__unit {
	font-size: 22px;
	font-weight: 700;
	color: #c09070;
	margin-bottom: 6px;
}

.stat-item__sub-divider {
	display: block;
	width: 100%;
	height: 1px;
	margin: 16px 0;
	background: rgba(255, 255, 255, 0.1);
}

.stat-item__sub {
	font-size: 13px;
	color: #9a8a72;
	letter-spacing: -0.3px;
	margin: 0;
	word-break: keep-all;
}

.stat-divider {
	flex-shrink: 0;
	align-self: stretch;
	width: 1px;
	background: rgba(255, 255, 255, 0.1);
}


/* ── WHY HYOO ───────────────────────────────── */
/* .main-stats(위)와 좌측 인트로 + 우측 아이템 리스트 + 세로 구분선 구조가 동일해서
   같은 flex 패턴을 재사용 — 배경만 밝은 색으로 바꿔 바로 위 어두운 STATS 섹션과 번갈아
   보이게 한다. */
.main-why {
	background: #fff;
	padding: 60px 16px;
}

.main-why__inner {
	display: flex;
	align-items: center;
	gap: 60px;
	max-width: 1180px;
	margin: 0 auto;
}

.main-why__intro {
	flex: 0 0 300px;
}

.main-why__eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--hyoo-accent-dark);
	margin-bottom: 10px;
}

.main-why__title {
	font-size: clamp(25px, 2.7vw, 32px);
	font-weight: 800;
	color: var(--hyoo-text);
	line-height: 1.4;
	letter-spacing: -0.5px;
	margin: 0 0 14px;
	word-break: keep-all;
}

.main-why__title em {
	font-style: normal;
	color: var(--hyoo-accent-rose);
}

.main-why__desc {
	font-size: 16px;
	color: var(--hyoo-text-muted);
	line-height: 1.7;
	letter-spacing: -0.2px;
	margin: 0;
	word-break: keep-all;
}

.main-why__list {
	flex: 1;
	display: flex;
	align-items: stretch;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
	min-width: 0;
}

.why-item {
	flex: 1;
	min-width: 0;
}

.why-item__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 32px;
	text-decoration: none;
}

.why-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 88px;
	height: 88px;
	padding: 20px;
	margin-bottom: 18px;
	border: 1.5px solid var(--hyoo-accent-muted);
	border-radius: 50%;
	color: var(--hyoo-accent-dark);
	transition: background 0.2s, color 0.2s;
}

/* 각 아이콘이 완성된 <svg> 태그를 통째로 들고 있어서(viewBox가 24x24도 있고 512x512도
   있음) 명시적으로 폭/높이를 100%로 고정해야 항상 같은 크기로 보인다 — 이게 없으면
   viewBox가 다른 아이콘끼리 실제 렌더 크기가 서로 달라진다. */
.why-item__icon svg {
	width: 100%;
	height: 100%;
}

.why-item__link:hover .why-item__icon {
	background: var(--hyoo-accent-dark);
	color: #fff;
}

.why-item__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.3px;
	word-break: keep-all;
}

.why-item__rule {
	display: block;
	width: 20px;
	height: 1px;
	margin: 12px 0;
	background: var(--hyoo-border);
}

.why-item__desc {
	font-size: 15px;
	color: var(--hyoo-text-muted);
	line-height: 1.6;
	letter-spacing: -0.2px;
	word-break: keep-all;
}

.main-why__divider {
	flex-shrink: 0;
	align-self: stretch;
	width: 1px;
	background: var(--hyoo-border);
}


/* ── SYSTEM ─────────────────────────────────── */
.main-system {
	background: #fff;
	padding: 80px 16px;
}

.main-system__inner {
	display: flex;
	align-items: center;
	gap: 80px;
	max-width: 1180px;
	margin: 0 auto;
}

.main-system__left {
	flex: 0 0 380px;
}

.main-system__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--hyoo-accent);
	letter-spacing: 2px;
	margin-bottom: 16px;
}

.main-system__title {
	font-size: clamp(24px, 2.8vw, 36px);
	font-weight: 800;
	color: var(--hyoo-text);
	line-height: 1.35;
	letter-spacing: -0.8px;
	margin: 0 0 20px;
	word-break: keep-all;
}

.main-system__desc {
	font-size: 15px;
	color: #6b6460;
	line-height: 1.8;
	letter-spacing: -0.3px;
	margin: 0 0 32px;
	word-break: keep-all;
}

.main-system__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 13px 28px;
	background: var(--hyoo-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.3px;
	text-decoration: none;
	border-radius: 50px;
	transition: background 0.2s;
}

.main-system__btn svg {
	width: 16px;
	height: 16px;
	transition: transform 0.15s;
}

.main-system__btn:hover {
	background: var(--hyoo-accent-dark);
}

.main-system__btn:hover svg {
	transform: translateX(3px);
}

.main-system__right {
	flex: 1;
	min-width: 0;
}

/* 4-card 그리드 */
.feature-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.feature-card {
	background: #f4ece0;
	border: 1px solid #e0d2be;
	border-radius: 16px;
	padding: 28px 24px;
	transition: box-shadow 0.2s, transform 0.2s;
}

.feature-card:hover {
	box-shadow: 0 8px 24px rgba(168, 120, 96, 0.18);
	transform: translateY(-3px);
}

.feature-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: #fff;
	border-radius: 12px;
	color: var(--hyoo-accent);
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.feature-card__icon svg {
	width: 24px;
	height: 24px;
}

.feature-card strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.4px;
	margin-bottom: 8px;
}

.feature-card p {
	font-size: 13px;
	color: #8a7e72;
	line-height: 1.7;
	letter-spacing: -0.2px;
	margin: 0;
}


/* ── 최신 공지사항 섹션 ────────────────────────── */
.main-notice {
	background: #faf8f7;
	padding: 72px 16px;
}

.main-notice__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.main-notice__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 28px;
	gap: 12px;
}

.main-notice__head-left { line-height: 1; }

.main-notice__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--hyoo-accent-light);
	margin-bottom: 8px;
}

.main-notice__title {
	font-size: 22px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
}

.main-notice__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--hyoo-text-muted);
	margin: 8px 0 0;
	word-break: keep-all;
}

.main-notice__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--hyoo-text-muted);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	padding-bottom: 3px;
	transition: color 0.2s;
}

.main-notice__more:hover { color: var(--hyoo-accent-light); }

/* 카드형 갤러리 그리드 — /notice/ 아카이브(.notice-item)와 동일한 시각 언어 사용 */
.main-notice__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.main-notice__item {
	background: #fff;
	border: 1px solid var(--hyoo-border);
	border-radius: 14px;
	overflow: hidden;
	transition: box-shadow 0.2s, border-color 0.2s;
}

.main-notice__item:hover {
	border-color: var(--hyoo-accent-light);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.main-notice__item--pinned {
	border-color: var(--hyoo-accent-dark);
}

.main-notice__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}

/* 썸네일 — 대표이미지가 없으면 자리표시자 아이콘 */
.main-notice__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--hyoo-bg-soft);
}

.main-notice__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.main-notice__link:hover .main-notice__thumb img {
	transform: scale(1.05);
}

/* 치료전후사진 미리보기(.main-notice--review-photo)만 썸네일 비율을 다르게 지정 —
   실제 등록되는 대표이미지가 280×380(세로형)이라 공지사항 기본값(4:3 가로형)을 쓰면
   좌우가 크게 잘려서 원본 비율이 안 지켜짐. 목록 페이지(review-photo.css)와 동일하게
   원본 비율(280:380) 그대로 맞춘다. */
.main-notice--review-photo .main-notice__thumb {
	aspect-ratio: 280 / 380;
}

/* object-fit:cover(공지사항 기본값)는 박스 비율과 이미지 비율이 안 맞으면 잘라내서
   원본이 반토막 나 보인다는 피드백 — 크롭 없이 원본 전체가 보이도록 contain으로 변경.
   남는 여백은 .main-notice__thumb의 배경색(var(--hyoo-bg-soft))이 채워준다. */
.main-notice--review-photo .main-notice__thumb img {
	object-fit: contain;
}

/* "더 많은 치료 사례 보기" 링크는 다시 기본값(.main-notice__head)의 flex row +
   space-between을 그대로 사용 — 제목/부제목 블록과 같은 줄, 상단 정렬로 양끝 배치
   (2026-07-24, 세로로 내렸던 것을 되돌림). */

/* 제목/부제목 글자를 다른 미리보기 섹션보다 크게 — 이 섹션만 강조. */
.main-notice--review-photo .main-notice__title {
	font-size: 28px;
}

.main-notice--review-photo .main-notice__desc {
	font-size: 16px;
}

/* 카드 제목(.main-notice__item-title)은 기본이 word-break: break-all이라 실제 치료사례/
   자필후기 제목(한글)에서 단어 중간이 잘려 보임 — 두 섹션만 keep-all로 덮어써서 어절
   단위로 줄바꿈되게 한다. */
.main-notice--review-photo .main-notice__item-title,
.main-notice--review-method .main-notice__item-title {
	word-break: keep-all;
}

/* 치료사례 카드 제목이 길어서 여러 줄로 wrap되면 카드마다 높이가 들쭉날쭉해짐 —
   한 줄로 고정하고 넘치는 부분은 말줄임(...) 처리(2026-07-24). */
.main-notice--review-photo .main-notice__item-title {
	display: block;
	width: 100%;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 치료사례(전후사진/자필후기) 미리보기는 항상 4개씩 노출(components/home/sections.php의
   $review_photo_display_count / $review_method_display_count) — 기본 3열 그리드(.main-notice__list)
   그대로 두면 4번째 카드가 혼자 다음 줄로 밀려 3+1로 어색하게 깨진다. 1025px 이상 구간에서만
   4열로 바꿔 한 줄에 정확히 4개가 들어오게 하고, 1024px 이하는 기존 2열/1열 반응형 규칙을
   그대로 따른다(겹치지 않게 범위를 나눠 specificity 충돌 방지). */
@media (min-width: 1025px) {
	.main-notice--review-photo .main-notice__list,
	.main-notice--review-method .main-notice__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.main-notice__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-notice__thumb--placeholder svg {
	width: 34px;
	height: 34px;
	color: var(--hyoo-accent-light);
}

/* 고정 배지 — 썸네일 위 오버레이. 카테고리 배지(왼쪽)와 겹치지 않게 오른쪽에 배치 */
.main-notice__pin {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-block;
	padding: 3px 11px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2px;
	background: var(--hyoo-text);
	color: #fff;
	white-space: nowrap;
}

.main-notice__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	gap: 8px;
	padding: 14px 16px 18px;
}

.main-notice__cat {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--hyoo-accent-dark);
	background: #fdf0ee;
	border-radius: 20px;
	padding: 2px 10px;
	white-space: nowrap;
}

/* 갤러리(카드) 모드: 썸네일 위 오버레이 — 왼쪽에 배치(고정 배지는 오른쪽으로 이동해서 안 겹침) */
.main-notice__thumb .main-notice__cat {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.main-notice__item-title {
	font-size: 14px;
	font-weight: 700;
	color: #333;
	line-height: 1.5;
	word-break: break-all;
	transition: color 0.15s;
}

.main-notice__link:hover .main-notice__item-title { color: #1a1a1a; }

.main-notice__date {
	font-size: 12px;
	color: var(--hyoo-text-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	margin-top: auto;
	padding-top: 2px;
}


/* ── 지점 소개 (창원점 원장진 + 오시는 길) ─────────── */
.clinic-intro {
	background: var(--hyoo-bg-soft);
	padding: 30px 20px;
}

.clinic-intro__inner {
	display: flex;
	align-items: stretch;
	gap: 40px;
	max-width: 1180px;
	margin: 0 auto;
}

/* PC에서는 560px. 좌우→상하로 레이아웃이 바뀌는 768px 지점부터 원본(590x720)의
   50%로 축소된다. order로 오른쪽 배치(DOM 순서는 그대로 유지해 접근성 낭독 순서 영향 없음).
   align-items:stretch로 .clinic-intro__info와 높이를 맞추고, 안의 이미지는 flex:1 +
   object-fit:contain으로 비율 그대로 유지하며 남는 공간 안에서 최대한 표시 */
.clinic-intro__photo {
	flex: 0 0 560px;
	order: 3;
	display: flex;
	flex-direction: column;
}

.clinic-intro__photo img {
	width: 100%;
	flex: 1;
	min-height: 0;
	object-fit: contain;
	display: block;
}

/* 좌우 컬럼 사이 구분선 — 768px 이하에서는 가로줄로 전환(.stat-divider와 같은 패턴) */
.clinic-intro__divider {
	order: 2;
	flex-shrink: 0;
	align-self: stretch;
	width: 0;
	border-left: 1px solid var(--hyoo-border);
	border-radius: 999px;
}

.clinic-intro__info {
	flex: 1;
	min-width: 0;
	order: 1;
}

/* --hyoo-accent(3.59:1)는 이 배경에서 WCAG AA(4.5:1) 미달이라 --hyoo-accent-dark 사용 */
.clinic-intro__eyebrow {
	display: block;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--hyoo-accent-dark);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.clinic-intro__title,
.clinic-intro__photo-title {
	font-size: 26px;
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.5px;
	margin: 0 0 20px;
	word-break: keep-all;
}

.clinic-intro__doctors {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

/* 각 그룹(의료진/오시는 길) 끝에 붙는 "더보기" 링크 — 공통 스타일 재사용 */
.clinic-intro__more-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hyoo-accent-dark);
	text-decoration: none;
	transition: color 0.2s;
}

/* --hyoo-accent(3.59:1)는 이 배경에서 AA 미달이라 hover도 accent-dark 유지, 밑줄만 추가 */
.clinic-intro__more-link:hover {
	text-decoration: underline;
}

.clinic-intro__more-link svg {
	transition: transform 0.15s;
}

.clinic-intro__more-link:hover svg {
	transform: translateX(3px);
}

.clinic-intro__doctors li {
	font-size: 15px;
	color: var(--hyoo-text);
}

.clinic-intro__doctor-btn {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border: 1.5px solid var(--hyoo-accent-light);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hyoo-accent-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.clinic-intro__doctor-btn:hover {
	background: var(--hyoo-accent-dark);
	border-color: var(--hyoo-accent-dark);
	color: #fff;
}

.clinic-intro__address {
	font-size: 14px;
	color: var(--hyoo-text);
	line-height: 1.7;
	margin: 0 0 12px;
	word-break: keep-all;
}

.clinic-intro__address-row {
	display: block;
	font-size: 16px;
	font-weight: 700;
}

.clinic-intro__address-row--sub {
	font-weight: 400;
	color: var(--hyoo-text);
	font-size: 13px;
}

.clinic-intro__phone-line {
	font-size: 14px;
	color: var(--hyoo-text);
	margin: 0 0 32px;
}

.clinic-intro__phone-line a {
	color: var(--hyoo-text);
	font-weight: 700;
	text-decoration: none;
}

.clinic-intro__phone-line a:hover {
	color: var(--hyoo-accent-dark);
}

.clinic-intro__hours {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 8px;
}

.clinic-intro__hours th,
.clinic-intro__hours td {
	text-align: left;
	padding: 6px 0;
	font-size: 14px;
	border-bottom: 1px solid var(--hyoo-border);
}

.clinic-intro__hours th {
	width: 110px;
	font-weight: 700;
	color: var(--hyoo-text);
}

.clinic-intro__hours td {
	color: var(--hyoo-text);
}

.clinic-intro__hours-note {
	font-size: 12px;
	color: var(--hyoo-text);
	margin: 0 0 24px;
	word-break: keep-all;
}

/* 카카오맵 정적 이미지 위젯 — 고정 px 대신 폭 100%로 반응형 처리, 원본 비율(504:310)은
   img의 width/height 속성으로 유지(레이아웃 밀림 방지) */
.clinic-intro__map {
	margin: 0 0 24px;
}

.clinic-intro__map-link {
	display: block;
	line-height: 0;
}

.clinic-intro__map-link img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--hyoo-border);
	border-radius: 8px 8px 0 0;
}

.clinic-intro__map-foot {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--hyoo-border);
	border-top: none;
	border-radius: 0 0 8px 8px;
	background: #fff;
}

.clinic-intro__map-foot img {
	display: block;
	height: 14px;
	width: auto;
}

.clinic-intro__map-foot a {
	font-size: 12px;
	color: var(--hyoo-text);
	text-decoration: none;
}

.clinic-intro__map-foot a:hover {
	color: var(--hyoo-accent-dark);
}

/* 다른 지도 앱 바로가기 — 카카오맵 정보 바와 별도 블록으로 분리. 아이콘 자체 스타일은
   여러 페이지(홈/위치)에서 재사용하는 .map-app-link(components.css)를 그대로 씀. */
.clinic-intro__map-apps {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}


/* ── 반응형 ───────────────────────────────────── */
@media (max-width: 1024px) {
	.main-hero__visual {
		flex: 0 0 360px;
	}

	.main-system__inner {
		gap: 48px;
	}

	.main-system__left {
		flex: 0 0 300px;
	}

	/* 1024px~769px 사이는 이 폭 그대로 유지되는 구간이라, 사진을 크게 두면 하한(769px
	   근처)에서 정보 영역이 230px대까지 좁아져 시간표/지도가 찌그러져 보임 —
	   사진을 더 줄이고 간격도 좁혀서 정보 영역에 여유를 줌 */
	.clinic-intro__inner {
		gap: 24px;
	}

	.clinic-intro__photo {
		flex: 0 0 380px;
	}

	.main-notice__list {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 1024px~769px 사이는 좌측 인트로(320px)+간격(60px)을 그대로 두면 통계 3개 영역이
	   너무 좁아져 숫자·라벨이 찌그러져 보임 — 인트로 폭과 간격, 아이템 패딩을 줄여
	   통계 영역에 여유를 준다(main-stats는 컬럼 전환 없이 그대로 좌우 배치 유지). */
	.main-stats__inner {
		gap: 32px;
	}

	.main-stats__intro {
		flex: 0 0 240px;
	}

	.stat-item {
		padding: 0 12px;
	}

	/* WHY HYOO는 main-stats와 달리 1024px~769px 구간에서도 4개 아이템을 가로로 욱여넣으면
	   (인트로 220px + 아이템 패딩만 줄이는 정도로는) 제목/설명 텍스트가 폰트 크기를
	   키운 뒤로 줄바꿈이 뒤틀려 보이는 문제가 있었음 — 태블릿 구간부터 조기에 세로 스택
	   레이아웃으로 전환해서 각 아이템이 전체 폭을 다 쓰게 한다(768px 이하 전용이었던
	   규칙을 여기로 앞당김). */
	.main-why__inner {
		flex-direction: column;
		gap: 32px;
	}

	.main-why__intro {
		flex: none;
		width: 100%;
		text-align: center;
	}

	.main-why__list {
		flex-direction: column;
		gap: 32px;
	}

	.main-why__divider {
		display: none;
	}

	.why-item__link {
		padding: 0;
	}
}

@media (max-width: 768px) {
	.main-notice { padding: 52px 16px; }

	.main-notice__list {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.main-purpose {
		padding: 52px 20px;
	}

	.main-purpose__head {
		text-align: left;
		margin-left: 0;
		margin-right: 0;
	}

	.main-purpose__title {
		font-size: 22px;
	}

	.purpose-cards {
		grid-template-columns: 1fr;
	}

	.main-hero__slide {
		flex-direction: column;
		gap: 40px;
	}

	.main-hero__visual {
		flex: none;
		width: 280px;
	}

	.main-stats__inner {
		flex-direction: column;
		gap: 32px;
	}

	.main-stats__intro {
		flex: none;
		width: 100%;
		text-align: center;
	}

	.main-stats__list {
		flex-direction: column;
		gap: 32px;
	}

	.stat-divider {
		display: none;
	}

	.stat-item {
		padding: 0;
	}

	/* WHY HYOO의 세로 스택 전환은 위 1024px 구간으로 이미 앞당겨져 있어(태블릿부터 적용)
	   여기서 다시 정의할 필요 없음 — 1024px 이하는 전부 이 구간에 포함되므로 그대로 상속됨. */

	.main-system__inner {
		flex-direction: column;
		gap: 40px;
	}

	.main-system__left {
		flex: none;
	}

	.feature-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.clinic-intro__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}

	.clinic-intro__photo {
		flex: none;
		order: 1;
		margin: 0 auto;
		max-width: 100%;
	}

	.clinic-intro__divider {
		order: 2;
		align-self: stretch;
		width: auto;
		height: 0;
		border-left: none;
		border-top: 1px solid var(--hyoo-border);
	}

	.clinic-intro__info {
		order: 3;
		width: 100%;
		text-align: left;
	}

	.clinic-intro__doctors {
		justify-content: flex-start;
	}

}

@media (max-width: 480px) {
	.main-hero__title {
		font-size: 28px;
	}

	.main-hero__visual {
		width: 240px;
	}

	.feature-cards {
		grid-template-columns: 1fr;
	}

	.main-system {
		padding: 52px 20px;
	}

	.main-notice { padding: 40px 16px; }

	.main-stats {
		padding: 48px 16px;
	}

	.clinic-intro {
		padding: 24px 20px;
	}

	.clinic-intro__title,
	.clinic-intro__photo-title {
		font-size: 22px;
	}

	.clinic-intro__hours th {
		width: 90px;
	}
}

@media (max-width: 360px) {
	.main-hero__title {
		font-size: 22px;
	}

	.main-hero__visual {
		width: 200px;
	}

	.main-stats {
		padding: 40px 16px;
	}

	.main-stats__inner {
		gap: 24px;
	}

	.main-stats__list {
		gap: 24px;
	}

	.stat-item__num {
		font-size: 34px;
	}

	.stat-item__num-prefix {
		font-size: 14px;
		margin-bottom: 6px;
	}

	.stat-item__unit {
		font-size: 18px;
		margin-bottom: 4px;
	}

	.main-system {
		padding: 40px 16px;
	}

	.feature-card {
		padding: 20px 16px;
	}

	.clinic-intro {
		padding: 20px 16px;
	}

	.clinic-intro__doctors {
		flex-direction: column;
		gap: 6px;
	}
}

/* ── 공지사항 리스트 모드 (components/home/sections.php의 $notice_style = 'list'일 때) ──
   카드 그리드(.main-notice__list) 마크업은 그대로 두고 세로 목록으로만 재배치.
   같은 클래스 조합(main-notice__list + --list)이라 위 그리드 규칙보다 아래에 있어야
   display: block이 확실히 이김. */
.main-notice__list--list {
	display: block;
	border-top: 2px solid #1a1a1a;
}

.main-notice__list--list .main-notice__item {
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #ede5e0;
}

.main-notice__list--list .main-notice__item:hover {
	box-shadow: none;
}

.main-notice__list--list .main-notice__link {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 14px 4px;
}

.main-notice__list--list .main-notice__link:hover { background: #fdf6f5; }

.main-notice__list--list .main-notice__thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	aspect-ratio: auto;
	border-radius: 8px;
}

.main-notice__list--list .main-notice__thumb--placeholder { display: none; }
.main-notice__list--list .main-notice__pin { display: none; }
/* 카테고리 배지는 갤러리 모드 전용 썸네일 오버레이라, 리스트 모드(56px 축소 썸네일)에서는
   자리가 없어 숨김 — 리스트 모드는 원래도 제목+날짜 중심의 축약 뷰라 정보 손실이 크지 않음. */
.main-notice__list--list .main-notice__cat { display: none; }

.main-notice__list--list .main-notice__body {
	flex: 1;
	min-width: 0;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 0;
}

.main-notice__list--list .main-notice__item-title {
	flex: 1;
	min-width: 0;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.main-notice__list--list .main-notice__date {
	margin-top: 0;
	padding-top: 0;
}

@media (max-width: 480px) {
	.main-notice__list--list .main-notice__item-title { white-space: normal; }
	.main-notice__list--list .main-notice__date { display: none; }
	.main-notice__list--list .main-notice__thumb { width: 44px; height: 44px; }
}