/* ==========================================================================
   sections/main.css — 메인(첫 화면) · 2026-10-13 사용자 지시 · 참고 fluid.glass · 시안에 없는 화면
   front-page.php(inc/main.php)에서만 실린다(inc/assets.php `c4_main_hero_on()`).

   ① 히어로 — 화면을 꽉 채우는 사진(여러 장이면 main.js 가 2초마다 서서히 바꾼다) + 가운데 큰 글 · 작은 글.
      패럴랙스: 사진 층이 스크롤의 절반 속도로 움직인다(참고 사이트 실측 — 글 1배 · 사진 0.5배). CSS 스크롤 연동만(소개 상단과 같은 방식).
   ② 헤더 — 히어로 위에서는 투명(흰 글자 · 흰 로고), 히어로를 지나면 원래 흰 헤더(main.js 가 .is-solid). 모바일 메뉴를 열면 원래 헤더.
   ★★ 선택자는 `.c4-main-hero*` · `.c4-header--over-hero` 로만 — 다른 화면에 닿지 않게.
   ========================================================================== */

/* ==========================================================================
   ① 히어로
   ========================================================================== */

/* 헤더 높이만큼 위로 끌어올려 헤더 뒤까지 사진이 깔린다(헤더는 sticky 라 자리를 차지한다).
   ★ 높이 = 첫 화면 + 화면 폭의 15%(모바일 26%) — 처음엔 참고 사이트(fluid.glass) 실측대로 29% · 52%(2026-10-13 사용자 지시 "샘플 사이트처럼 세로가 더 높아야")였다가
     같은 날 "지금보다 축소"로 절반. 사진이 첫 화면 아래로 이어지고, 스크롤하면 패럴랙스로 천천히 올라간다.
   ★ 글은 첫 화면(헤더 아래 남은 칸)의 가운데 — 아래 __inner 가 첫 화면 높이를 차지하고 그 안에서 가운데 정렬(늘어난 사진 아래쪽으로 밀려 내려가지 않게). */
.c4-main-hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: max(var(--c4-main-hero-min-h), calc(100svh - var(--c4-admin-bar-h, 0px) + var(--c4-main-hero-extra)));
	margin-top: calc(-1 * var(--c4-header-h));
	padding: var(--c4-header-h) var(--c4-container-pad) 0;
	overflow: hidden;
	background-color: var(--c4-color-footer-bg);   /* 사진이 없을 때 · 아직 안 받았을 때 — 흰 글자가 읽히는 어두운 바탕 */
	color: var(--c4-color-white);
	text-align: center;
}

/* 사진 층 — 여러 장을 겹쳐 깔고 지금 장(.is-active)만 보인다. 바뀔 때는 서서히(디졸브). */
.c4-main-hero__media {
	position: absolute;
	inset: 0;
}

.c4-main-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	opacity: 0;
	scale: 1;
	transition: opacity var(--c4-main-hero-fade) ease, scale 0s;   /* 확대는 다 사라진 뒤(.is-zooming 을 뗄 때) 안 보이게 바로 원래 크기로 */
}

.c4-main-hero__img.is-active { opacity: 1; }

/* 보이는 동안 아주 천천히 확대(2026-10-15 사용자 지시 '이미지가 아주 살짝 조금씩 확대되다가 디졸브 · 반복') — 나타나기 시작해 다 사라질 때까지(간격 + 전환) 1 → --c4-main-hero-zoom.
   .is-zooming 은 main.js 가 붙이고(나타날 때) 다 사라진 뒤 뗀다 — 사라지는 동안에도 계속 커진다. 사진 층의 패럴랙스(transform)와는 다른 속성(scale)이라 겹치지 않는다. */
.c4-main-hero__img.is-zooming {
	scale: var(--c4-main-hero-zoom);
	transition: opacity var(--c4-main-hero-fade) ease, scale calc(var(--c4-main-hero-interval) + var(--c4-main-hero-fade)) linear;
}

/* 패럴랙스 — 히어로가 화면 위로 다 지나가는 동안 사진 층이 자기 높이의 절반만큼 내려간다 = 화면에서는 스크롤의 절반 속도로 올라간다.
   ★ 타임라인은 구역에 이름을 붙여 건다 — 구역이 overflow: hidden 이라 사진에 view() 를 바로 걸면 진행이 늘 0(소개 상단 about.css 와 같은 이유).
   ★ 구역은 페이지 맨 위(헤더 뒤)에서 시작하므로 안쪽 여백 없이(inset 0) 화면 위 끝 기준 — 처음 화면에서 진행 0.
   ★ 위로 생기는 틈은 늘 화면 밖, 아래로 넘친 부분은 구역이 자른다. 스크롤 연동을 못 읽는 브라우저 · '동작 줄이기'는 멈춘 사진. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.c4-main-hero {
			view-timeline: --c4-main-hero block;
			view-timeline-inset: 0px;
		}

		.c4-main-hero__media {
			animation: c4-main-hero-parallax linear both;
			animation-timeline: --c4-main-hero;   /* ↓ 둘 다 단축 속성 뒤에 */
			animation-range: exit-crossing 0% exit-crossing 100%;
		}
	}
}

@keyframes c4-main-hero-parallax {
	from { transform: translateY(0); }
	to   { transform: translateY(var(--c4-main-hero-parallax)); }
}

/* 사진 위 어둡게 — 사진이 있을 때만 */
.c4-main-hero:has(> .c4-main-hero__media)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c4-main-hero-dim);
	pointer-events: none;
}

.c4-main-hero__inner {
	position: relative;
	top: var(--c4-main-hero-text-shift);   /* 글 묶음만 위로 20(자리는 그대로 — 히어로 높이 · 가운데 계산은 같다) */
	z-index: 1;   /* 어둡게(::after) 위 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: max(calc(var(--c4-main-hero-min-h) - var(--c4-header-h)), calc(100svh - var(--c4-admin-bar-h, 0px) - var(--c4-header-h)));   /* 첫 화면 높이 — 글은 그 가운데 */
	gap: var(--c4-main-hero-gap);
	width: 100%;
	max-width: var(--c4-container-w);
}

/* 큰 글 — 관리 칸의 줄마다 한 줄씩 떠오른다(.c4-split · base/reveal.css) */
.c4-main-hero__title {
	margin: 0;
	font-size: var(--c4-main-hero-title-fs);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-main-hero-title-lh);
	color: var(--c4-color-white);
	word-break: keep-all;
}

.c4-main-hero__desc {
	margin: 0;
	font-size: var(--c4-main-hero-desc-fs);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-white);
	opacity: .9;
	word-break: keep-all;
	text-wrap: balance;   /* 좁은 화면에서 두 줄로 접힐 때 끝에 한 낱말만 남지 않게 */
}

/* 아래쪽 숫자 띠(2026-10-14 사용자 지시 · 시안 v2 '흰 가로선 빼고 띠 영역에 dim 70%' · '특허 빼고 저서까지') — 사진 맨 아래에 가로 가득.
   ★ 첫 화면보다 아래로 이어진 사진 칸(--c4-main-hero-extra)에 놓인다 — 첫 화면 가운데 큰 글과 겹치지 않는다. 칸 사이 옅은 세로줄. */
.c4-main-hero__stats {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--c4-main-hero-stats-pad) var(--c4-container-pad);
	background: var(--c4-main-hero-stats-bg);
}

.c4-main-hero__stats-list {
	display: grid;
	grid-template-columns: repeat(var(--c4-main-hero-stats-n), minmax(0, 1fr));
	max-width: var(--c4-main-hero-stats-w);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.c4-main-hero__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--c4-main-hero-stat-gap);
	min-width: 0;
	padding-inline: 8px;
	text-align: center;
	word-break: keep-all;
}

.c4-main-hero__stat + .c4-main-hero__stat { border-left: 1px solid var(--c4-main-hero-stats-line); }

.c4-main-hero__stat-num {
	font-family: var(--c4-font-serif);
	font-size: var(--c4-main-hero-stat-num-fs);
	font-weight: var(--c4-fw-bold);
	line-height: 1.1;
	color: var(--c4-color-white);
}

.c4-main-hero__stat-unit {
	margin-left: 2px;
	font-size: var(--c4-main-hero-stat-unit-fs);
}

.c4-main-hero__stat-label {
	font-size: var(--c4-main-hero-stat-label-fs);
	line-height: var(--c4-lh-body);
	color: rgb(255 255 255 / .8);
}

/* 히어로 아래 메인 페이지 본문(있을 때만) */
.c4-main-content {
	padding-block: var(--c4-gap-block, 60px);
}

@media (max-width: 767.98px) {
	/* 휴대폰 — 높이 570(2026-10-15 사용자 지시 '히어로 높이 550으로 확대' → '20 더' · 같은 날 처음엔 '첫 화면의 절반' · 그 전 첫 화면 가득 · 최소 400) — 세로로 [글 묶음(남는 칸 가운데) · 숫자 띠(바닥)].
	   ★ 숫자 띠는 PC 처럼 떠 있지 않고 흐름 안에(바닥) — 남는 칸을 띠 높이만큼 빼고 가운데를 잡으려고. 글 묶음 위로 올림(-40)은 휴대폰에서 0(헤더에 닿는다). */
	.c4-main-hero {
		flex-direction: column;
		align-items: stretch;
		min-height: max(var(--c4-main-hero-min-h-m), calc(var(--c4-main-hero-h-m) - var(--c4-admin-bar-h, 0px)));
		padding-inline: var(--c4-gutter-mobile);
	}

	.c4-main-hero__inner {
		flex: 1 1 auto;
		top: 0;
		gap: var(--c4-main-hero-gap-m);
		min-height: 0;
		padding-block: 20px;
	}

	.c4-main-hero__stats {
		position: relative;
		left: auto;
		right: auto;
		margin-inline: calc(-1 * var(--c4-gutter-mobile));
	}

	.c4-main-hero__title { font-size: var(--c4-main-hero-title-fs-m); }

	.c4-main-hero__desc { font-size: var(--c4-main-hero-desc-fs-m); }

	.c4-main-hero__stats { padding: var(--c4-main-hero-stats-pad-m) var(--c4-main-pad-m); }
	.c4-main-hero__stat { padding-inline: 4px; }
	.c4-main-hero__stat-num { font-size: var(--c4-main-hero-stat-num-fs-m); }
	.c4-main-hero__stat-unit { font-size: var(--c4-main-hero-stat-unit-fs-m); }
	.c4-main-hero__stat-label { font-size: var(--c4-main-hero-stat-label-fs-m); }
}

/* 아주 좁은 폰(360 미만) — '1989년부터'가 칸(93)보다 넓어 구분선에 닿았다(2026-10-16) · 큰 숫자만 24(단위 14 그대로) */
@media (max-width: 359.98px) {
	.c4-main-hero__stat-num { font-size: 24px; }
}

/* ==========================================================================
   ② 헤더 — 히어로 위에서는 투명
   ★ 조건: 모바일 메뉴가 닫혀 있고(.c4-drawer-toggle 이 체크 안 됨) 아직 히어로 위(.is-solid 없음) · 마우스가 헤더 위에 없고(.is-hover — main.js 가 마우스일 때만)
     키보드 초점(:focus-visible)도 헤더 밖. ★ :hover · :focus-within 을 쓰지 않는다 — 터치 기기는 햄버거를 누른 뒤 :hover 가 붙은 채 남고,
     전화예약 팝업을 마우스로 닫으면 초점이 버튼으로 돌아와 :focus-within 이 남아, 히어로 위에서 흰 헤더로 굳었다(2026-10-13 리뷰).
     마우스를 올리거나 키보드로 헤더에 들어오면 원래 헤더(반투명 흰 바탕 · 원래 로고 · 검은 메뉴 — 2026-10-13 사용자 지시 "헤더는 호버하면 기존처럼"). main.js 가 히어로를 지나면 .is-solid.
   ★ 스크립트가 없으면 front-page 의 <noscript> 가 원래 흰 헤더로 되돌린다(inc/main.php).
   ========================================================================== */

.c4-header--over-hero {
	transition: background-color var(--c4-main-header-fade) ease, border-color var(--c4-main-header-fade) ease;
}

/* 투명 ↔ 원래 헤더가 서서히 바뀌게 — 메뉴 글자색 · 로고(흰 실루엣 ↔ 원래 색) · 햄버거 */
.c4-header--over-hero .c4-menu > li > a,
.c4-header--over-hero .c4-burger,
.c4-header--over-hero .c4-logo__text {
	transition: color var(--c4-main-header-fade) ease, opacity var(--c4-main-header-fade) ease;
}

.c4-header--over-hero .c4-logo__img { transition: filter var(--c4-main-header-fade) ease; }

.c4-drawer-toggle:not(:checked) ~ .c4-header--over-hero:not(.is-solid, .is-hover, :has(:focus-visible)) {
	border-bottom-color: transparent;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.c4-drawer-toggle:not(:checked) ~ .c4-header--over-hero:not(.is-solid, .is-hover, :has(:focus-visible)) .c4-menu > li > a,
.c4-drawer-toggle:not(:checked) ~ .c4-header--over-hero:not(.is-solid, .is-hover, :has(:focus-visible)) .c4-burger {
	color: var(--c4-color-white);
}

@media (hover: hover) {
	.c4-drawer-toggle:not(:checked) ~ .c4-header--over-hero:not(.is-solid, .is-hover, :has(:focus-visible)) .c4-menu > li > a:hover { opacity: .75; }
}

/* 글자 로고 — 관리 칸의 글자색(인라인 style)보다 우선해야 해서 !important */
.c4-drawer-toggle:not(:checked) ~ .c4-header--over-hero:not(.is-solid, .is-hover, :has(:focus-visible)) .c4-logo__text {
	color: var(--c4-color-white) !important;
}

/* 이미지 로고 — '밝은 로고 이미지'가 있으면 그것으로 바꾸고, 없으면 원래 로고를 흰색으로(모양만 남긴 흰 실루엣) */
.c4-header--over-hero .c4-logo__img--light { display: none; }

.c4-drawer-toggle:not(:checked) ~ .c4-header--over-hero:not(.is-solid, .is-hover, :has(:focus-visible)) .c4-logo:has(.c4-logo__img--light) .c4-logo__img:not(.c4-logo__img--light) { display: none; }
.c4-drawer-toggle:not(:checked) ~ .c4-header--over-hero:not(.is-solid, .is-hover, :has(:focus-visible)) .c4-logo__img--light { display: block; }

.c4-drawer-toggle:not(:checked) ~ .c4-header--over-hero:not(.is-solid, .is-hover, :has(:focus-visible)) .c4-logo:not(:has(.c4-logo__img--light)) .c4-logo__img {
	filter: brightness(0) invert(1);
}

/* 전화예약 버튼 — 사진 위에서는 바탕 없이 흰 테두리 · 흰 글자(2026-10-13 사용자 지시 "배경색 없이 화이트 아웃라인").
   테두리 굵기는 원래 버튼의 투명 테두리(--c4-cta-border)와 같아 바뀔 때 크기가 흔들리지 않는다. */
.c4-drawer-toggle:not(:checked) ~ .c4-header--over-hero:not(.is-solid, .is-hover, :has(:focus-visible)) .c4-cta {
	background: transparent;
	border-color: var(--c4-color-white);
	color: var(--c4-color-white);
}

/* 히어로 위에서 버튼에 마우스를 올리면(또는 키보드 초점) 포인트 컬러 바탕(같은 날 사용자 지시 "호버했을 때 지금처럼 파란 배경").
   ★ 버튼에 올리면 헤더도 :hover 라 원래 헤더로 돌아오는데, 원래 버튼의 호버(흰 바탕 반전)가 아니라 파란 바탕으로 둔다. 히어로를 지난 흰 헤더(.is-solid)는 원래 호버 그대로. */
.c4-header--over-hero:not(.is-solid) .c4-cta:focus-visible {
	background: var(--c4-color-accent);
	border-color: transparent;
	color: var(--c4-color-white);
}

@media (hover: hover) {
	.c4-header--over-hero:not(.is-solid) .c4-cta:hover {
		background: var(--c4-color-accent);
		border-color: transparent;
		color: var(--c4-color-white);
	}
}

/* 키보드 초점 링 — 사진 위에서는 흰색(메인 컬러 링은 어두운 사진에서 안 보인다) */
.c4-drawer-toggle:not(:checked) ~ .c4-header--over-hero:not(.is-solid, .is-hover, :has(:focus-visible)) :focus-visible { outline-color: var(--c4-color-white); }

/* ==========================================================================
   ③ 언론보도 — 히어로 다음(2026-10-13 사용자 지시 · 참고 fluid.glass 목록의 레이아웃만 · 마크업 inc/main.php c4_render_main_press())
   콘텐츠 폭 1280(--c4-container-w — 사용자 지시). 줄 = [분류 배지] [제목] [화살표] · 줄 사이 회색 선.
   ★ 글자는 평소 검정. 마우스를 올리면 그 줄(배지 · 제목 · 화살표)만 검정 · 바로 아래 선은 포인트 컬러(2026-10-14), 나머지 줄은 회색(사용자 지시) — 키보드 초점도 같게.
   ★ 배지 칸은 모든 줄이 같은 폭(가장 긴 분류 이름) — 제목 시작선이 맞는다(subgrid). 마우스가 없는 기기는 색 바뀜 없음.
   ========================================================================== */

.c4-main-press {
	padding: var(--c4-main-press-pt) var(--c4-container-pad) var(--c4-main-press-pb);
}

.c4-main-press__inner {
	max-width: var(--c4-container-w);
	margin-inline: auto;
}

.c4-main-press__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: var(--c4-main-press-head-gap);
}

.c4-main-press__title {
	margin: 0;
	font-size: var(--c4-main-press-title-fs);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-page-title2);
	color: var(--c4-color-text);
}

.c4-main-press__head:has(> .c4-main-press__title.sr-only) { justify-content: flex-end; }   /* 제목을 비우면 '전체 보기'만 오른쪽 */

.c4-main-press__more {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	font-size: var(--c4-fs-body2);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-sub);
	transition: color var(--c4-main-press-fade) ease;
}

.c4-main-press__more:hover { color: var(--c4-color-text); }

.c4-main-press__list {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr) auto;   /* 배지 · 제목 · 화살표 */
	column-gap: var(--c4-main-press-col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c4-main-press-line);
}

.c4-main-press__item {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	border-bottom: 1px solid var(--c4-main-press-line);
	transition: border-color var(--c4-main-press-fade) ease;
}

.c4-main-press__link {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	padding: var(--c4-main-press-row-pad) 0;
	color: var(--c4-color-text);
	transition: color var(--c4-main-press-fade) ease;
}

/* subgrid 를 모르는 옛 브라우저 — 배지 칸을 고정 폭으로(제목 시작선은 대개 맞는다) */
@supports not (grid-template-columns: subgrid) {
	.c4-main-press__item,
	.c4-main-press__link { grid-template-columns: var(--c4-main-press-badge-w) minmax(0, 1fr) auto; column-gap: var(--c4-main-press-col-gap); }
}

.c4-main-press__badge {
	display: inline-block;
	padding: var(--c4-main-press-badge-pad);
	border: 1px solid currentColor;
	border-radius: var(--c4-radius-tag);   /* 헤더 전화예약 버튼과 같은 둥글기(2026-10-14 사용자 지시 — 처음엔 알약) */
	font-size: var(--c4-fs-body4);
	font-weight: var(--c4-fw-medium);   /* 500 — 평소 · 마우스 올림 같은 굵기(2026-10-14 사용자 지시 "웨이트 하나 올려") */
	line-height: var(--c4-lh-body);
	white-space: nowrap;
	transition: background-color var(--c4-main-press-fade) ease, border-color var(--c4-main-press-fade) ease, color var(--c4-main-press-fade) ease;
}

.c4-main-press__name {
	min-width: 0;
	font-size: var(--c4-main-press-item-fs);
	font-weight: var(--c4-fw-medium);
	line-height: var(--c4-lh-post-title);
	word-break: keep-all;
	overflow-wrap: break-word;
}

.c4-main-press__arrow {
	display: block;
	width: var(--c4-main-press-arrow);
	height: var(--c4-main-press-arrow);
	transition: translate var(--c4-main-press-fade) var(--c4-card-arrow-ease), opacity var(--c4-main-press-fade) ease;
}

/* 화살표는 마우스를 올린 줄에만(키보드 초점도) — 마우스가 없는 기기(휴대폰 · 태블릿)와 휴대폰 폭(768 미만)은 늘 보인다(2026-10-14 사용자 지시 "모바일에서는 디폴트에서도") */
@media (hover: hover) and (min-width: 768px) {
	.c4-main-press__link .c4-main-press__arrow { opacity: 0; }
	html:not(.c4-hover-reset) .c4-main-press__link:hover .c4-main-press__arrow { opacity: 1; }
}

.c4-main-press__link:focus-visible .c4-main-press__arrow { opacity: 1; }

/* 마우스를 올린 줄만 검정 · 나머지 회색 · 그 줄 바로 아래 선 포인트 컬러 · 화살표는 오른쪽으로 살짝 */
@media (hover: hover) {
	html:not(.c4-hover-reset) .c4-main-press__list:has(.c4-main-press__link:hover) .c4-main-press__link { color: var(--c4-main-press-dim); }
	html:not(.c4-hover-reset) .c4-main-press__list:has(.c4-main-press__link:hover) .c4-main-press__link:hover { color: var(--c4-color-text); }
	html:not(.c4-hover-reset) .c4-main-press__item:has(> .c4-main-press__link:hover) { border-bottom-color: var(--c4-color-accent); }   /* 아래 선은 포인트 컬러(2026-10-14 사용자 지시 — 처음엔 검정) */
	html:not(.c4-hover-reset) .c4-main-press__link:hover .c4-main-press__arrow { translate: var(--c4-main-press-arrow-shift) 0; }

	/* 올린 줄의 분류 배지 — 포인트 컬러 바탕 + 흰 글자(2026-10-13 사용자 지시 "호버하면 파란색 배경 + 흰색 글씨") */
	html:not(.c4-hover-reset) .c4-main-press__link:hover .c4-main-press__badge {
		border-color: var(--c4-color-accent);
		background: var(--c4-color-accent);
		color: var(--c4-color-white);
	}
}

.c4-main-press__link:focus-visible .c4-main-press__badge {
	border-color: var(--c4-color-accent);
	background: var(--c4-color-accent);
	color: var(--c4-color-white);
}

.c4-main-press__list:has(.c4-main-press__link:focus-visible) .c4-main-press__link { color: var(--c4-main-press-dim); }
.c4-main-press__list:has(.c4-main-press__link:focus-visible) .c4-main-press__link:focus-visible { color: var(--c4-color-text); }
.c4-main-press__item:has(> .c4-main-press__link:focus-visible) { border-bottom-color: var(--c4-color-accent); }

@media (prefers-reduced-motion: reduce) {
	.c4-main-press__arrow { transition: none; }
}

@media (max-width: 767.98px) {
	.c4-main-press {
		padding: var(--c4-main-press-pt-m) var(--c4-gutter-mobile) var(--c4-main-press-pb-m);
	}

	.c4-main-press__head { margin-bottom: var(--c4-main-press-head-gap-m); }

	.c4-main-press__title { font-size: var(--c4-main-press-title-fs-m); }

	/* 모바일 — 배지 윗줄 · 제목 아랫줄 · 화살표는 오른쪽 가운데 */
	.c4-main-press__list { display: block; }

	.c4-main-press__item { display: block; }

	.c4-main-press__link {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"badge arrow"
			"name  arrow";
		column-gap: var(--c4-main-press-col-gap-m);
		row-gap: 8px;
		padding: var(--c4-main-press-row-pad-m) 0;
	}

	.c4-main-press__badge-cell { grid-area: badge; }
	.c4-main-press__badge-cell:empty { display: none; }
	/* 분류가 없는 줄 — 배지 줄을 없애 위아래 여백 · 화살표 가운데가 다른 줄과 같게(2026-10-13 리뷰 · 빈 배지 줄 0 + 줄 사이 8 이 남았다) */
	.c4-main-press__link:has(> .c4-main-press__badge-cell:empty) {
		grid-template-areas: "name arrow";
		row-gap: 0;
	}
	.c4-main-press__name {
		grid-area: name;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;   /* 두 줄까지 · 넘치면 말줄임(2026-10-15 사용자 지시) */
		line-clamp: 2;
		overflow: hidden;
		font-size: var(--c4-main-press-item-fs-m);
	}
	.c4-main-press__link > .c4-main-press__arrow { display: none; }   /* 화살표 숨김(같은 날) — 아래 칸 배치에서 화살표 칸도 뺀다 */
	.c4-main-press__link { grid-template-columns: minmax(0, 1fr); grid-template-areas: "badge" "name"; }
	.c4-main-press__link:has(> .c4-main-press__badge-cell:empty) { grid-template-areas: "name"; }
}

/* ==========================================================================
   ④ 닥터노트 — 언론보도 위(2026-10-13 사용자 지시 · Figma 34:310 PC / 34:392 모바일 · 값은 시안 실측 · 마크업 inc/main.php c4_render_main_note())
   PC(1200 이상): 가운데 제목 · 설명 → [큰 카드 797 × 478] 48 [목록 — 사진 200 × 124 · 분류 · 제목 · 요약 / 사이 선 — 큰 카드 높이에 맞춰 위아래 끝 정렬].
   1200 미만: 큰 카드 없이 목록 4개(첫 글 포함 · 시안 모바일 — 사진 119 × 74 · 분류 · 제목 · 요약 없음) — 768 ~ 1199 는 두 칸.
   ★ 카드 전체가 링크(제목 링크 ::after) · 분류는 글자 · 사진은 꾸밈.
   ========================================================================== */

.c4-main-note {
	padding: var(--c4-main-note-pt) var(--c4-container-pad) var(--c4-main-note-pb);
}

.c4-main-note__inner {
	display: flex;
	flex-direction: column;
	gap: var(--c4-main-note-head-gap);
	max-width: var(--c4-container-w);
	margin-inline: auto;
}

.c4-main-note__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--c4-main-note-title-gap);
	text-align: center;
	word-break: keep-all;
}

.c4-main-note__title {
	margin: 0;
	font-size: var(--c4-fs-page-title);       /* Page Title 44 · 1.3 */
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-page-title);
	color: var(--c4-color-text);
}

.c4-main-note__desc {
	max-width: 100%;
	margin: 0;
	text-wrap: balance;                       /* 좁은 휴대폰에서 두 줄이 되면 고르게 */
	font-size: var(--c4-main-note-desc-fs);   /* Subtitle 1 — 20 · 500 · 1.5 · -0.5% */
	font-weight: var(--c4-fw-medium);
	line-height: var(--c4-lh-body);
	letter-spacing: var(--c4-main-desc-ls);   /* -6%(2026-10-14 사용자 지시 · 처음 시안 -0.5%) */
	color: var(--c4-color-text-muted);        /* grey500 */
}

.c4-main-note__group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--c4-main-note-list-w);   /* 1280 에서 797 | 435 — 좁아지면 큰 카드만 줄어든다(목록 글 칸 유지) */
	gap: var(--c4-main-note-col-gap);
}

/* 큰 카드 */
.c4-main-note__feature {
	position: relative;
	aspect-ratio: var(--c4-main-note-feature-ratio);
	overflow: hidden;
	border-radius: var(--c4-main-note-radius);
	background: var(--c4-color-text-faint);   /* 사진 없을 때 grey300 */
}

.c4-main-note__feature-media,
.c4-main-note__feature-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.c4-main-note__feature-img {
	object-fit: cover;
	transition: scale var(--c4-main-note-zoom-dur) var(--c4-card-arrow-ease);
}

/* 아래쪽 어둡게 — 시안 'gradient'(검정 60% 사각형 · 흐림 50 · 카드 위에서 353 부터)를 흐린 경계 그대로 그라데이션으로 */
.c4-main-note__feature-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c4-main-note-shade);
	pointer-events: none;
}

.c4-main-note__feature-text {
	position: absolute;
	right: var(--c4-main-note-feature-pad);
	bottom: var(--c4-main-note-feature-pb);
	left: var(--c4-main-note-feature-pad);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* 분류 — 어두운 바탕 위라 포인트 컬러를 밝게 섞어 쓴다(시안 Accent1 초록은 어두운 바탕에서 읽혔지만 이 사이트 포인트 컬러(남색)는 묻힌다) */
.c4-main-note__feature-cat {
	margin: 0;
	font-size: var(--c4-fs-body3);
	font-weight: var(--c4-fw-bold);           /* 분류는 굵게(2026-10-13 사용자 지시 "닥터노트의 분류 폰트 두께 볼드체로") */
	line-height: var(--c4-lh-body);
	color: var(--c4-color-white);   /* 흰색(2026-10-14 사용자 지시 '분류명 여기만 화이트로 — 안 보여서' · 그 전 밝힌 포인트 컬러 --c4-main-note-cat-on-dark) */
}

.c4-main-note__feature-title {
	margin: 0;
	overflow: hidden;
	font-size: var(--c4-fs-article-h3);       /* single_h3 22 · 700 · 1.9 */
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-article);
	color: var(--c4-color-white);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 목록 */
.c4-main-note__list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}

.c4-main-note__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--c4-main-note-item-gap);
}

.c4-main-note__item--first { display: none; }   /* PC 는 큰 카드가 첫 글 */

.c4-main-note__thumb {
	flex: none;
	width: var(--c4-main-note-thumb-w);
	aspect-ratio: var(--c4-main-note-thumb-ratio);
	overflow: hidden;
	border-radius: var(--c4-main-note-radius);
	background: var(--c4-color-text-faint);
}

.c4-main-note__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--c4-main-note-zoom-dur) var(--c4-card-arrow-ease);
}

.c4-main-note__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

.c4-main-note__cat {
	margin: 0 0 var(--c4-main-note-cat-gap);  /* 분류 → 제목 8 */
	font-size: var(--c4-fs-body3);
	font-weight: var(--c4-fw-bold);           /* 굵게(위 큰 카드 분류와 같은 사용자 지시) */
	line-height: var(--c4-lh-body);
	color: var(--c4-color-accent);
}

.c4-main-note__name {
	margin: 0;
	overflow: hidden;
	font-size: var(--c4-fs-article-h3);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-article);
	color: var(--c4-color-text);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.c4-main-note__excerpt {
	/* 두 줄 말줄임(2026-10-14 사용자 지시 'PC 에서만 본문 2줄' — 그 전 시안 41 칸에 한 줄). 1200 미만은 아래에서 숨긴다(그대로). */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin: var(--c4-main-note-excerpt-gap) 0 0;   /* 제목 → 본문 — 보이는 틈 1/3 줄임(같은 날 지시) */
	overflow: hidden;
	font-size: var(--c4-fs-body3);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-muted);
}

.c4-main-note__sep {
	display: block;
	height: 1px;
	background: var(--c4-color-border);       /* divider #E6E6E6 */
}

/* 카드 전체 링크 + 키보드 초점 링 */
.c4-main-note__feature-title a::after,
.c4-main-note__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--c4-main-note-radius);
}

.c4-main-note__feature-title a:focus-visible,
.c4-main-note__name a:focus-visible { outline: none; }

.c4-main-note__feature-title a:focus-visible::after,
.c4-main-note__name a:focus-visible::after {
	outline: var(--c4-focus-ring-w) solid var(--c4-color-focus);
	outline-offset: var(--c4-focus-ring-offset);
}

/* 마우스를 올리면 사진이 아주 조금 커진다(시안에 없는 동작 — 눌리는 곳 표시). 흐림은 넣었다가 뺐다(2026-10-14 사용자 지시 "확대효과만 남기고 블러효과는 삭제"). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	html:not(.c4-hover-reset) .c4-main-note__feature:hover .c4-main-note__feature-img,
	html:not(.c4-hover-reset) .c4-main-note__item:hover .c4-main-note__thumb-img { scale: var(--c4-main-note-zoom); }
}

/* 1200 미만 — 큰 카드 없이 목록 4개(시안 모바일 글 모양) · 768 ~ 1199 는 두 칸 */
@media (max-width: 1199.98px) {
	.c4-main-note__group { display: block; }
	.c4-main-note__feature,
	.c4-main-note__sep { display: none; }

	.c4-main-note__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--c4-main-note-list-gap-m) var(--c4-main-note-col-gap);
	}

	.c4-main-note__item--first { display: flex; }
	.c4-main-note__item { gap: var(--c4-main-note-item-gap); }
	.c4-main-note__thumb { width: var(--c4-main-note-thumb-w-m); border-radius: var(--c4-main-note-radius); }
	.c4-main-note__cat { margin-bottom: 0; }
	.c4-main-note__name { font-size: var(--c4-fs-article-h3-m); }   /* single_h3_m 18 */
	.c4-main-note__excerpt { display: none; }
}

@media (max-width: 767.98px) {
	.c4-main-note {
		padding: var(--c4-main-note-pt-m) var(--c4-main-pad-m) var(--c4-main-note-pb-m);   /* 좌우 20(시안 — 다른 화면의 24 가 아니다) */
	}

	.c4-main-note__inner { gap: var(--c4-main-note-head-gap-m); }
	.c4-main-note__title { font-size: var(--c4-fs-page-title-m); }   /* Page Title_m 26 */
	.c4-main-note__desc { font-size: var(--c4-main-note-desc-fs-m); }   /* 15(2026-10-15 사용자 지시) */
	.c4-main-note__list { grid-template-columns: minmax(0, 1fr); }

	/* 목록 — 분류 숨김 · 제목 두 줄까지(넘치면 말줄임) · 17(2026-10-15 사용자 지시) */
	.c4-main-note__cat { display: none; }
	.c4-main-note__name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		font-size: var(--c4-main-note-name-fs-m);
		line-height: var(--c4-lh-body);
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
}

/* ==========================================================================
   ⑤ 하단 정보 — 푸터 바로 위(2026-10-13 사용자 지시 · Figma 34:341 PC / 34:410 모바일 · 마크업 inc/main.php c4_render_main_info())
   PC(1024 이상): 1280 안에 상자 셋 [공지사항 | 오시는 길 | 예약 및 상담] · 사이 20 · 상자 grey100 · 안쪽 40 · 둥글기 12 · 같은 높이.
   1024 미만: 세로로 쌓는다(사이 12) · 768 미만은 시안 모바일(안쪽 20 · 제목 20 · 제목 → 내용 16).
   ========================================================================== */

.c4-main-info {
	padding: var(--c4-main-info-pt) var(--c4-container-pad) var(--c4-main-info-pb);
}

.c4-main-info__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--c4-main-info-gap);
	max-width: var(--c4-container-w);
	margin-inline: auto;
}

.c4-main-info__box {
	display: flex;
	flex-direction: column;
	gap: var(--c4-main-info-box-gap);
	min-width: 0;
	padding: var(--c4-main-info-box-pad);
	border-radius: var(--c4-main-info-radius);
	background: var(--c4-main-soft-bg);  /* EEEBE8(2026-10-15 사용자 지시 '3열 상자 EEEBE8' · 그 전 #ECE8E5) */
	color: var(--c4-color-text);
}

.c4-main-info__title {
	min-height: var(--c4-main-info-title-h);   /* 시안 제목 칸 48 */
	margin: 0;
	font-size: var(--c4-fs-page-title2);       /* Page Title2 28 · 1.3 */
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-page-title2);
}

.c4-main-info__title-m { display: none; }      /* 휴대폰 제목(예약 및 상담 → 전화상담) */

/* 공지 · 오시는 길 제목 줄 — 제목(왼쪽) · 작은 →(오른쪽 끝 · 누르면 그 페이지 · 2026-10-15 사용자 지시) */
.c4-main-info__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.c4-main-info__head .c4-main-info__title { min-width: 0; }

.c4-main-info__more {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--c4-main-info-more-hit);
	height: var(--c4-main-info-more-hit);
	margin-right: calc((var(--c4-main-info-more-icon) - var(--c4-main-info-more-hit)) / 2);   /* 아이콘 오른쪽 끝 = 상자 안쪽 선 */
	border-radius: 50%;
	color: var(--c4-color-text);
	transition: color var(--c4-tab-dur) ease;
}

.c4-main-info__more svg {
	width: var(--c4-main-info-more-icon);
	height: var(--c4-main-info-more-icon);
	transition: translate var(--c4-tab-dur) ease;
}

@media (hover: hover) {
	html:not(.c4-hover-reset) .c4-main-info__more:hover { color: var(--c4-color-accent); }
	html:not(.c4-hover-reset) .c4-main-info__more:hover svg { translate: 3px 0; }
}

/* 공지 — 제목 왼쪽 · 날짜 오른쪽 · 줄 사이 6 */
.c4-main-info__notices {
	display: flex;
	flex-direction: column;
	gap: var(--c4-main-info-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--c4-fs-body1);              /* body1 17 · 1.5 */
	line-height: var(--c4-lh-body);
}

.c4-main-info__notice {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.c4-main-info__notice-link {
	min-width: 0;
	overflow: hidden;
	color: var(--c4-color-text);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.c4-main-info__notice-date {
	flex: none;
	color: var(--c4-color-text);
}

@media (hover: hover) {
	.c4-main-info__notice-link:hover { text-decoration: underline; }
}

/* 오시는 길 — 주소 위 · 지도 버튼은 상자 아래 끝(상자 높이를 다 쓰고 위아래 끝 정렬) */
.c4-main-info__location {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--c4-main-info-loc-gap);
}

/* 주소 · 전화번호 — 같은 모양(본문 17 + 4 = 21 · 보통 굵기 · 2026-10-14 사용자 지시 "전화번호를 주소와 같은 스타일로 · 둘 다 +4px") */
.c4-main-info__address {
	margin: 0;
	font-size: var(--c4-main-info-text-fs);
	line-height: var(--c4-lh-body);
	word-break: keep-all;
}

.c4-main-info__maps {
	display: flex;
	gap: var(--c4-main-info-map-gap);
	height: var(--c4-main-info-map-h);
}

.c4-main-info__map {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--c4-main-info-map-radius);
	background: var(--c4-main-info-map-naver-bg);
}

.c4-main-info__map--kakao { background: var(--c4-main-info-map-kakao-bg); }

/* 시안 버튼 그림(바탕색 포함) — 칸이 좁아져도 글씨 · 로고가 잘리지 않게 contain + 그림과 같은 바탕색(1440 시안 폭에서는 cover 와 1.5px 차이) */
.c4-main-info__map img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 예약 및 상담 — 전화 줄 → 버튼 */
.c4-main-info__contact {
	display: flex;
	flex-direction: column;
	gap: var(--c4-main-info-contact-gap);
}

/* 전화번호 — 아이콘 없이 상자 제목 · 버튼과 같은 왼쪽 선에서(2026-10-13 사용자 지시 "전화아이콘 삭제, 전화번호는 앞으로 정렬") */
.c4-main-info__tel { margin: 0; }

.c4-main-info__tel-num {
	font-size: var(--c4-main-info-text-fs);     /* 주소와 같다(위) — 예전 single_h3 22 · 굵게 */
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text);
	white-space: nowrap;
}

@media (max-width: 1023.98px) {
	.c4-main-info__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--c4-main-info-gap-m);
	}
}

@media (max-width: 767.98px) {
	.c4-main-info {
		padding: var(--c4-main-info-pt-m) var(--c4-main-pad-m) var(--c4-main-info-pb-m);   /* 좌우 20(시안) */
	}

	.c4-main-info__box {
		gap: var(--c4-main-info-box-gap-m);
		padding: var(--c4-main-info-box-pad-m);
	}

	.c4-main-info__title {
		min-height: 0;
		font-size: var(--c4-fs-page-title2-m);  /* Page Title2_m 20 */
	}

	.c4-main-info__title-pc { display: none; }
	.c4-main-info__title-m { display: inline; }

	.c4-main-info__more {
		margin-block: -4px;   /* 누르는 칸(32)이 제목(20 × 1.3 = 26)보다 커서 제목 줄이 길어지지 않게 — 위아래로 살짝 겹친다 */
		margin-right: calc((var(--c4-main-info-more-icon-m) - var(--c4-main-info-more-hit)) / 2);
	}
	.c4-main-info__more svg { width: var(--c4-main-info-more-icon-m); height: var(--c4-main-info-more-icon-m); }

	.c4-main-info__location { gap: var(--c4-main-info-loc-gap-m); }
	.c4-main-info__notices { font-size: var(--c4-main-info-notice-fs-m); }
	.c4-main-info__address,
	.c4-main-info__tel-num { font-size: var(--c4-main-info-text-fs-m); }       /* 주소 · 전화번호 17(같은 날) */   /* 공지 제목 · 날짜 15(2026-10-15 사용자 지시) */
	.c4-main-info__maps { height: var(--c4-main-info-map-h-m); }            /* 네이버 · 카카오 버튼 높이 42(같은 날) */
}


/* ==========================================================================
   ⑤-1 영상 — 특화진료 바로 위 · 가운데(2026-10-16 사용자 지시 '특화진료 위에 그 유튜브 영상을 중앙정렬로' · 마크업 inc/main.php c4_render_main_video())
   위 여백은 특화진료 위 여백과 같고 아래 여백은 0 — 영상 ↔ 특화진료 카드 사이는 특화진료 위 여백(80 / 40)이 맡는다.
   ========================================================================== */

.c4-main-video {
	padding: var(--c4-main-treat-pt) var(--c4-container-pad) 0;
}

.c4-main-video__frame {
	position: relative;
	max-width: var(--c4-main-video-w);
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--c4-main-note-radius);
	background: #000;
}

.c4-main-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767.98px) {
	.c4-main-video { padding: var(--c4-main-treat-pt-m) var(--c4-main-pad-m) 0; }   /* 좌우 20 — 특화진료 모바일과 같다 */
}


/* ==========================================================================
   ⑥ 진료과목 — 첫 화면 바로 다음(2026-10-13 사용자 지시 · 마크업 inc/main.php c4_render_main_treat() · 넘기기 main.js ③)
   크기는 닥터노트와 같게(같은 날 사용자 지시 "배경색 삭제 · 사이즈는 닥터노트와 통일") — 콘텐츠 1280 안 · 위아래 여백 · 제목 44 / 26 · 설명 20 grey500.
   PC(1200 이상): [왼쪽 제목 · 설명 · ← →] [카드 3장]. 1200 미만: 제목 · 설명 위(화살표는 오른쪽) · 카드 3장(휴대폰 1장).
   카드: 진료과목 목록의 '사진 위 글' 카드 그대로(card.css .c4-card--overlay — 정사각 · 부제목 · 제목 · 마우스를 올리면 배지 · 화살표).
   ★ 화살표로만 넘긴다 — 넘기기 장치가 켜지면(.is-carousel) 보는 칸이 넘침을 감춘다. 스크립트가 없으면 옆으로 밀어 본다(화살표 숨김).
   ========================================================================== */

.c4-main-treat {
	padding: var(--c4-main-treat-pt) var(--c4-container-pad) var(--c4-main-treat-pb);
}

/* 특화진료 ↔ 만성질환 사이 — 앞 구역 아래 + 뒤 구역 위 = --c4-main-treat-between(2026-10-14 사용자 지시 '사이 여백 1/2' — 그 전 40 + 80 = 120 / 모바일 60) */
.c4-main-treat + .c4-main-treat { padding-top: calc(var(--c4-main-treat-between) - var(--c4-main-treat-pb)); }

.c4-main-treat__inner {
	display: grid;
	grid-template-columns: var(--c4-main-treat-head-w) minmax(0, 1fr);
	align-items: center;
	column-gap: var(--c4-main-treat-gap);
	max-width: var(--c4-container-w);
	margin-inline: auto;
}

.c4-main-treat__head { min-width: 0; }

.c4-main-treat__title {
	margin: 0;
	font-size: var(--c4-fs-page-title);         /* Page Title 44 · 1.3 — 닥터노트 제목과 같다 */
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-page-title);
	color: var(--c4-color-text);
}

.c4-main-treat__desc {
	margin: var(--c4-main-treat-desc-gap) 0 0;
	font-size: var(--c4-main-treat-desc-fs);    /* 17(2026-10-14 사용자 지시 '설명들 17px로' · 그 전 닥터노트 설명과 같은 20) · 500 · grey500 */
	font-weight: var(--c4-fw-medium);
	line-height: var(--c4-lh-body);
	letter-spacing: var(--c4-main-desc-ls);   /* -6% — 닥터노트 설명과 같다(2026-10-14 사용자 지시) */
	color: var(--c4-color-text-muted);
	word-break: keep-all;
}

.c4-main-treat__nav {
	display: flex;
	gap: var(--c4-main-treat-arrow-gap);
	margin-top: var(--c4-main-treat-nav-gap);
}

.c4-main-treat__nav[hidden] { display: none; }

/* 화살표 — 동그라미(같은 날 사용자 지시 "< > 버튼은 배경을 동그라미로") */
.c4-main-treat__arrow {
	display: grid;
	place-items: center;
	width: var(--c4-main-treat-arrow);
	height: var(--c4-main-treat-arrow);
	padding: 0;
	border: 1px solid var(--c4-main-soft-bg);   /* 테두리 없이 채운 버튼(2026-10-15 사용자 지시 '아웃라인 말고 · 디폴트 EEEBE8 · 호버 파랑' — 그 전 회색 테두리) */
	border-radius: 50%;
	background: var(--c4-main-soft-bg);
	color: var(--c4-color-text-sub);
	cursor: pointer;
	transition: background-color var(--c4-main-press-fade) ease, border-color var(--c4-main-press-fade) ease, color var(--c4-main-press-fade) ease;
}

.c4-main-treat__arrow svg { width: 20px; height: 20px; }
.c4-main-treat__arrow--prev svg { scale: -1 1; }

/* 마우스를 올리면 포인트 컬러 동그라미 + 흰 화살표(같은 날 사용자 지시 — 처음엔 검정) · 키보드 초점도 같게 */
@media (hover: hover) {
	html:not(.c4-hover-reset) .c4-main-treat__arrow:hover { border-color: var(--c4-color-accent); background: var(--c4-color-accent); color: var(--c4-color-white); }
}

.c4-main-treat__arrow:focus-visible { border-color: var(--c4-color-accent); background: var(--c4-color-accent); color: var(--c4-color-white); }

/* 보는 칸 — 스크립트가 없으면 옆으로 밀어 본다(스크롤바 감춤) · 넘기기 장치가 켜지면 넘침을 감춘다(화살표로만) */
.c4-main-treat__viewport {
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.c4-main-treat__viewport::-webkit-scrollbar { display: none; }

.c4-main-treat.is-carousel .c4-main-treat__viewport {
	overflow: hidden;
	touch-action: pan-y;         /* 가로 밀기는 main.js 스와이프 · 세로는 페이지 스크롤(2026-10-14) */
}

.c4-main-treat.is-dragging .c4-main-treat__viewport {
	cursor: grabbing;
	user-select: none;
}

/* 카드 줄 — 한 번에 --c4-main-treat-per 장(PC · 태블릿 3 · 휴대폰 1). main.js 가 transform 으로 한 장씩 옮긴다. */
.c4-main-treat__track {
	display: flex;
	gap: var(--c4-main-treat-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform var(--c4-main-treat-slide) var(--c4-main-treat-ease);
}

.c4-main-treat__track.is-instant { transition: none; }

.c4-main-treat__slide {
	flex: 0 0 calc((100% - var(--c4-main-treat-card-gap) * (var(--c4-main-treat-per) - 1)) / var(--c4-main-treat-per));
	min-width: 0;
	container: c4-main-treat-card / inline-size;
}

/* 낱말 가운데서 줄이 바뀌지 않게('함께하 / 는') */
.c4-main-treat .c4-card__subtitle,
.c4-main-treat .c4-card__title { word-break: keep-all; }

/* 글자 크기 — 카드가 목록(413)보다 작아(PC 287) 목록 카드의 32 · 20 이면 '류마티스 관절염' 등이 두 줄로 접혔다 → 28 · 18(모두 한 줄).
   화살표 높이 계산도 같은 값을 읽는다(card.css). 휴대폰은 card.css 의 휴대폰 크기(24 · 16) 그대로. */
.c4-main-treat .c4-card--overlay {
	--c4-card-overlay-title-fs: var(--c4-main-treat-title-fs);
	--c4-card-overlay-sub-fs: var(--c4-main-treat-sub-fs);
}

/* 카드가 더 좁을 때(280 미만 — 1200 ~ 1300 PC · 768 언저리 태블릿) — 목록 카드의 휴대폰 크기(24 · 16) */
@container c4-main-treat-card (max-width: 279.98px) {
	.c4-main-treat .c4-card--overlay {
		--c4-card-overlay-title-fs: var(--c4-card-overlay-title-fs-m);
		--c4-card-overlay-sub-fs: var(--c4-card-overlay-sub-fs-m);
	}
}

/* 1200 미만 — 제목 · 설명 위(화살표는 그 오른쪽 아래 끝) · 카드 줄은 콘텐츠 폭 전체 */
@media (max-width: 1199.98px) {
	.c4-main-treat__inner { display: block; }

	.c4-main-treat__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"title nav"
			"desc  nav";
		align-items: end;
		column-gap: 16px;
		margin-bottom: var(--c4-main-treat-head-gap-t);
	}

	.c4-main-treat__title { grid-area: title; }
	.c4-main-treat__desc { grid-area: desc; }
	.c4-main-treat__nav { grid-area: nav; margin-top: 0; }
}

@media (max-width: 767.98px) {
	.c4-main-treat {
		padding: var(--c4-main-treat-pt-m) var(--c4-main-pad-m) var(--c4-main-treat-pb-m);   /* 좌우 20 — 닥터노트 모바일과 같다 */
		--c4-main-treat-per: var(--c4-main-treat-per-m);
		--c4-main-treat-card-gap: var(--c4-main-treat-card-gap-m);
	}

	/* 사진 위 부제목 14 — 메인 카드만(2026-10-15 사용자 지시 · card.css 휴대폰 규칙이 읽는 -m 값을 메인 안에서만 바꾼다 — 진료과목 목록은 그대로) */
	.c4-main-treat .c4-card--overlay { --c4-card-overlay-sub-fs-m: var(--c4-main-treat-sub-fs-m); }

	.c4-main-treat + .c4-main-treat { padding-top: calc(var(--c4-main-treat-between-m) - var(--c4-main-treat-pb-m)); }

	/* 휴대폰 — 화살표는 제목 줄 오른쪽에만(설명은 아래 전체 폭 · 화살표 옆에 끼면 20 글자가 세 줄로 접혔다) */
	.c4-main-treat__head {
		grid-template-areas:
			"title nav"
			"desc  desc";
		align-items: center;
		margin-bottom: var(--c4-main-treat-head-gap-m);
	}

	.c4-main-treat__title { font-size: var(--c4-fs-page-title-m); }   /* Page Title_m 26 */
	.c4-main-treat__arrow { width: var(--c4-main-treat-arrow-m); height: var(--c4-main-treat-arrow-m); }
	.c4-main-treat__desc { font-size: var(--c4-main-treat-desc-fs-m); }   /* 15(2026-10-15 사용자 지시) */

	/* 카드 1.5장(2026-10-15 사용자 지시) — 밀 때는 화면 끝까지(풀블리드), 멈추면 본문 왼쪽 선(20)에서 시작.
	   보는 칸을 좌우 20 씩 화면 끝까지 넓히고 카드 줄 앞에만 20 을 둔다 — 카드 사이도 20 이라 멈췄을 때 앞 카드가 왼쪽 끝에 비치지 않는다.
	   카드 폭 = (화면 − 20 − 사이 20) ÷ 1.5. 넘기기(main.js)는 카드 폭 + 사이를 재서 옮기므로 그대로 따라온다. */
	.c4-main-treat__viewport { margin-inline: calc(-1 * var(--c4-main-pad-m)); }
	.c4-main-treat__track { padding-inline-start: var(--c4-main-pad-m); }
	.c4-main-treat__slide { flex-basis: calc((100% - var(--c4-main-treat-card-gap)) / var(--c4-main-treat-per)); }
	.c4-main-treat__nav { display: none; }                 /* < > 숨김 — 손가락으로 민다 */
	.c4-main-treat__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "desc"; column-gap: 0; }   /* 화살표 칸까지 없앤다(제목이 16 덜 넓어지지 않게) */
	.c4-main-treat .c4-card__badge { display: none; }      /* 왼쪽 위 분류 배지 숨김 */
}

/* ==========================================================================
   ⑦ 배너 — 닥터노트 아래 · 언론보도 위(2026-10-14 사용자 지시 · 같은 날 '언론보도 위로 이동' · 참고 그림 · 마크업 inc/main.php c4_render_main_banner())
   1280 안 두 칸(하나면 가로 가득) · 1024 미만 한 칸씩. 배너 = 옅은 바탕 + 왼쪽 [서브워딩 / 타이틀(나눔명조)] + 오른쪽 절반 사진 칸.
   ★ 위 = 닥터노트 아래 27 + 53 = 80(모바일 13 + 27 = 40) · 아래 0 — 언론보도 위 여백(80 / 40)이 그대로 사이가 된다.
   ★ 사진은 오른쪽 절반 칸에만 가로 100%(2026-10-14 사용자 지시 · 그 전에는 배너 전체 + 왼쪽 그라데이션) — 칸 왼쪽 가장자리만 바탕색에서 짧게 흐린다. 사진이 없으면 바탕색만.
   ========================================================================== */

.c4-main-banner {
	padding: var(--c4-main-banner-pt) var(--c4-container-pad) var(--c4-main-banner-pb);
}

.c4-main-banner__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--c4-main-banner-gap);
	max-width: var(--c4-container-w);
	margin-inline: auto;
}

.c4-main-banner__inner--one { grid-template-columns: minmax(0, 1fr); }

.c4-main-banner__item {
	position: relative;
	isolation: isolate;          /* 사진 · 덮개를 배너 안 뒤쪽에만 */
	display: flex;
	align-items: center;
	aspect-ratio: var(--c4-main-banner-ratio);   /* 630 × 192.5 비율로 고정(2026-10-15 '1/4 추가' · 그 전 630 × 154)(2026-10-14 사용자 지시 '지금 사이즈 고정해서 이미지가 가로 100%로') — 어느 폭에서도 사진이 가로 가득 · 잘림 없이 */
	padding: 16px var(--c4-main-banner-pad);
	border-radius: var(--c4-main-banner-radius);
	background: var(--c4-main-banner-bg);
	color: var(--c4-color-text);
}

/* 사진 겹 — 바탕 · 사진 칸을 한 겹으로 그린 뒤 둥근 모서리를 **한 번**만 자른다(clip-path · 2026-10-14 사용자 지시 '이미지 R값에 까만선 안 보이게').
   ★ 배너에 overflow + radius 로 자르면 바탕 · 사진 · 덮개가 층마다 따로 잘려, 모서리 반투명 픽셀에서 아래층(어두운 사진)이 비쳐 가는 선처럼 보였다.
   ★ 자르기는 이 겹에만 — 배너(<a>)의 키보드 초점 테두리(바깥 2px)는 잘리지 않는다. 사진이 있으면 배너 바탕은 끈다(겹이 바탕을 가진다 — 모서리를 두 번 칠하지 않게). */
.c4-main-banner__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--c4-main-banner-bg);
	clip-path: inset(0 round var(--c4-main-banner-radius));
	will-change: transform;   /* ★ 이 겹을 한 장으로 합친 뒤 자르게 — 없으면 크롬이 사진 · 덮개를 따로 잘라 모서리 반투명 픽셀에 사진 색이 비쳤다(실측). 반 픽셀 자리도 픽셀에 맞춰진다 */
}

.c4-main-banner__item:has(> .c4-main-banner__media) { background: none; }

.c4-main-banner__frame {
	position: absolute;
	top: -1px;      /* 위 · 오른쪽 · 아래는 가장자리보다 1px 넉넉히 — 배너가 반 픽셀 자리(1280 가운데 · 72.5)에 놓이면 가장자리 픽셀에서 층이 반씩 겹쳐 사진이 비쳤다(바깥은 __media 의 clip-path 가 자른다) */
	right: -1px;
	bottom: -1px;
	width: calc(var(--c4-main-banner-img-w) + var(--c4-main-banner-img-shift) + 1px);   /* 가운데보다 shift 만큼 왼쪽에서 시작(PC 20px · 2026-10-15) */
	overflow: hidden;   /* 마우스를 올려 사진을 키워도 칸 왼쪽(글 자리)으로 넘치지 않게 */
}

.c4-main-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;               /* 칸(PC 315 × 192.5)을 채운다 — 권장 크기(630 × 385 = 칸의 2배)면 가로 100% 그대로 · 칸보다 높은 사진은 위아래를, 더 긴 사진은 양옆을 조금 자른다 */
	object-position: var(--c4-main-banner-img-pos);
	transition: scale var(--c4-main-note-zoom-dur) var(--c4-card-arrow-ease);
}

/* 사진 칸 왼쪽 — 바탕색에서 투명으로(코드로 고정 · 2026-10-14 사용자 지시 '그라데이션은 코드로 · 관리자에선 이미지만'). 사진에 그라데이션을 넣지 않는다.
   ★ 직선(바탕 → 투명 한 번)이면 끝나는 자리에 선이 보인다(같은 날 '좀 더 넓게, 자연스럽게 — 지금은 선이 보여') — 칸 폭의 42% 에 걸쳐
     처음엔 빠르게 · 끝으로 갈수록 아주 천천히 옅어지는 곡선(이징 그라데이션 — 단계별 진하기)으로 끝 자리를 녹인다. */
.c4-main-banner__frame::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--c4-main-banner-img-fade);
	background: linear-gradient(90deg,
		var(--c4-main-banner-bg) 0%,
		color-mix(in srgb, var(--c4-main-banner-bg) 74%, transparent) 19%,
		color-mix(in srgb, var(--c4-main-banner-bg) 54%, transparent) 34%,
		color-mix(in srgb, var(--c4-main-banner-bg) 38%, transparent) 47%,
		color-mix(in srgb, var(--c4-main-banner-bg) 28%, transparent) 56.5%,
		color-mix(in srgb, var(--c4-main-banner-bg) 19%, transparent) 65%,
		color-mix(in srgb, var(--c4-main-banner-bg) 13%, transparent) 73%,
		color-mix(in srgb, var(--c4-main-banner-bg) 7.5%, transparent) 80.2%,
		color-mix(in srgb, var(--c4-main-banner-bg) 4%, transparent) 86.1%,
		color-mix(in srgb, var(--c4-main-banner-bg) 2%, transparent) 91%,
		color-mix(in srgb, var(--c4-main-banner-bg) .8%, transparent) 95.2%,
		transparent 100%);
}

.c4-main-banner__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.c4-main-banner__sub {
	font-size: var(--c4-main-banner-sub-fs);
	font-weight: var(--c4-fw-medium);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-accent);
	word-break: keep-all;
}

.c4-main-banner__title {
	font-size: var(--c4-main-banner-title-fs);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-page-title2);
	word-break: keep-all;
}

.c4-main-banner__item:focus-visible {
	outline: var(--c4-focus-ring-w) solid var(--c4-color-focus);
	outline-offset: var(--c4-focus-ring-offset);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	html:not(.c4-hover-reset) a.c4-main-banner__item:hover .c4-main-banner__img { scale: var(--c4-main-note-zoom); }
}

@media (max-width: 1023.98px) {
	.c4-main-banner__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
	.c4-main-banner {
		padding: var(--c4-main-banner-pt-m) var(--c4-main-pad-m) var(--c4-main-banner-pb-m);
	}

	.c4-main-banner__inner { gap: var(--c4-main-banner-gap-m); }

	.c4-main-banner__item {
		aspect-ratio: auto;                       /* 휴대폰은 지금 높이 118 그대로(사진 칸 약 168 × 118 — 사진이 그보다 길면 양옆이 조금 잘린다) */
		min-height: var(--c4-main-banner-h-m);
		padding: 12px var(--c4-main-banner-pad-m);
	}

	.c4-main-banner__frame { width: calc(var(--c4-main-banner-img-w-m) + var(--c4-main-banner-img-shift-m) + 1px); }
	.c4-main-banner__frame::after { width: var(--c4-main-banner-img-fade-m); }

	.c4-main-banner__text { gap: 2px; }
	.c4-main-banner__sub { font-size: var(--c4-main-banner-sub-fs-m); }
	.c4-main-banner__title { font-size: var(--c4-main-banner-title-fs-m); }
}

/* ==========================================================================
   ⑧ 로고 띠 — 첫 화면 바로 아래(2026-10-14 사용자 지시 '히어로 밑에 로고들을 가로로 쭉' · 마크업 inc/main.php c4_render_main_logos())
   가운데 한 줄 · 로고 높이를 맞춘다(폭은 그림 비율대로). 좁아서 안 들어가면 다음 줄로.
   ========================================================================== */
.c4-main-logos {
	padding: var(--c4-main-logos-pt) var(--c4-container-pad) var(--c4-main-logos-pb);
}

.c4-main-logos__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--c4-main-logos-gap-y) var(--c4-main-logos-gap);
	max-width: var(--c4-container-w);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.c4-main-logos__item { display: flex; }

.c4-main-logos__img {
	display: block;
	width: auto;
	height: var(--c4-main-logos-h);
	max-width: var(--c4-main-logos-max-w);
	object-fit: contain;
}

@media (max-width: 767.98px) {
	.c4-main-logos { padding: var(--c4-main-logos-pt-m) var(--c4-main-pad-m) var(--c4-main-logos-pb-m); }
	.c4-main-logos__list { gap: var(--c4-main-logos-gap-y-m) var(--c4-main-logos-gap-m); }
	.c4-main-logos__img { height: var(--c4-main-logos-h-m); max-width: var(--c4-main-logos-max-w-m); }
}