/* ==========================================================================
   소개 (11단계) — 전용 페이지 템플릿 `page-templates/template-about.php` 에서만 로드(inc/assets.php)

   구성: philosophy(배경 사진 위 흰 글씨 · 가운데) → content(사진 + 글 카드, PC 2열 / 모바일 세로).
   ★★ 선택자는 전부 `.c4-about` · `.c4-about-*` 로 한정한다 — 다른 화면에 닿지 않게(제1원칙).
   ★ 글자 · 색은 기존 토큰 재사용. 새 토큰은 tokens.css '소개' 묶음(여백 · 비율 · radius · 카드 · 문단 간격)과
     새 스타일 `Page Title2` 하나뿐.
   ★ JS 는 연혁 구역 하나(assets/js/timeline.js — 스크롤 따라 파란 줄 · 글자색 · 2026-10-13). 사진이 있을 때만 어둡게 깔기(::after · --c4-about-hero-dim)와
     패럴랙스(스크롤 연동 CSS) — 둘 다 2026-10-12 사용자 지시 · 시안에는 없다.
   ========================================================================== */

/* ==========================================================================
   philosophy — 전체 폭 띠, 배경 사진 cover, 안쪽 내용 가로세로 가운데
   ========================================================================== */

.c4-about-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--c4-about-hero-pad-y) var(--c4-container-pad);
	overflow: hidden;
	/* ★ 사진이 비었을 때의 폴백 — 흰 글씨가 읽히도록 어두운 배경색. 사진이 있으면 그 아래 깔려 안 보인다. */
	background-color: var(--c4-color-footer-bg);
}

/* 배경 사진 — <img> 로 깔아 srcset 을 쓴다. 찌그러뜨리지 않고 가운데 기준으로 자른다(cover). */
.c4-about-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* 배경 사진 패럴랙스 — 스크롤하면 사진이 글보다 천천히 올라간다(2026-10-12 사용자 지시 · 시안에 없는 동작).
   CSS 만(스크롤 연동 애니메이션) — 이 화면의 JS 0 그대로.
   ★ 진행(`exit-crossing`): 구역 윗변이 헤더 아래 선을 지날 때 0 → 아랫변이 그 선을 지날 때 끝. 헤더 아래 선 = html `scroll-padding-top`
     (관리 막대 + 헤더 높이 — view() 의 auto 가 읽는다 · 모바일 72 도 토큰이 처리). 페이지 맨 위(스크롤 0)가 곧 시작이라 처음 모습은 예전과 같다.
   ★ 이동량 = 구역 높이 × `--c4-about-hero-parallax`(사진 높이 = 구역 높이 — translate % 는 자기 높이 기준).
     사진이 아래로 밀린 만큼 생기는 위쪽 틈은 늘 헤더 아래 선보다 위(헤더 뒤 · 화면 밖)다. 아래로 넘친 부분은 구역의 overflow: hidden 이 자른다.
   ★ 스크롤 연동 애니메이션을 못 읽는 브라우저 · '동작 줄이기' 설정에서는 예전처럼 멈춘 사진.
   ★★ 타임라인은 **구역(.c4-about-hero)에** 이름을 붙여 건다 — 사진에 `view()` 를 바로 걸면 안 된다: 구역이 overflow: hidden 이라
     그 자체가 '스크롤 상자'가 되어, 사진의 view() 가 페이지가 아니라 (움직이지 않는) 구역을 기준으로 재서 진행이 늘 0 이다. */
/* 배경 사진 천천히 확대 — 화면을 열면 사진이 아주 천천히 커지다가 110% 에서 멈춘다(2026-10-13 사용자 지시 "천천히 점점 확대 · 10% 확대되는 지점까지만").
   ★ `scale` 속성(따로 쓰는 변형)으로 — 패럴랙스가 쓰는 `transform` 과 겹치지 않아 둘이 함께 움직인다. 가운데 기준 · 넘친 부분은 구역이 자른다.
   ★ 시간 기준 애니메이션이라 스크롤 연동을 못 읽는 브라우저에서도 움직인다(아래 @supports 밖). '동작 줄이기'면 멈춘 사진. 끝나면 110% 그대로(both). */
@media (prefers-reduced-motion: no-preference) {
	.c4-about-hero__bg {
		animation: c4-about-hero-zoom var(--c4-about-hero-zoom-dur) var(--c4-about-hero-zoom-ease) both;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.c4-about-hero {
			view-timeline: --c4-about-hero block;
			view-timeline-inset: auto;   /* = html scroll-padding-top(관리 막대 + 헤더) */
		}

		/* 패럴랙스(스크롤) + 천천히 확대(시간) 두 애니메이션 — 목록 순서대로 타임라인 · 구간이 짝지어진다. */
		.c4-about-hero__bg {
			animation:
				c4-about-hero-parallax linear both,
				c4-about-hero-zoom var(--c4-about-hero-zoom-dur) var(--c4-about-hero-zoom-ease) both;
			/* ↓ 둘 다 animation 단축 속성 **뒤에** — 단축 속성이 이 둘을 기본값으로 되돌린다. */
			animation-timeline: --c4-about-hero, auto;
			/* exit-crossing — 그냥 `exit` 이면 구역이 보이는 높이보다 클 때(가로 휴대폰 812 × 375 · 1280 × 500 등) 아랫변이 화면 아래에 닿을 때까지
			   진행이 0 이라 사진이 글과 같이 움직이다가 남은 거리에 몰아서 느려졌다(2026-10-12 리뷰). exit-crossing 은 구역 높이와 상관없이 윗변 기준. */
			animation-range: exit-crossing 0% exit-crossing 100%, normal;
		}
	}
}

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

@keyframes c4-about-hero-zoom {
	from { scale: 1; }
	to   { scale: var(--c4-about-hero-zoom); }
}

/* 사진 위 어둡게 깔기(dim) — 밝은 사진에서 흰 글씨가 잘 안 보여서(2026-10-12 사용자 지시). 사진이 있을 때만 —
   사진이 없으면 위 어두운 배경색만 보이는 그대로다. 글 묶음(.c4-about-hero__inner)은 z-index 로 이 막 위에 둔다. */
.c4-about-hero:has(> .c4-about-hero__bg)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c4-about-hero-dim);
	pointer-events: none;
}

.c4-about-hero__inner {
	position: relative;   /* 배경 사진 위 */
	z-index: 1;           /* 어둡게 깔기(::after) 위 */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--c4-about-hero-gap-label);   /* 라벨 → 제목 묶음 */
	width: 100%;
	max-width: var(--c4-container-w);       /* PC 1280 — 헤더 안쪽 폭과 같다 */
	text-align: center;
	/* 구매자가 넣은 긴 URL · 메일 주소가 칸 밖으로 넘치지 않게(FAQ 와 같은 처리) — 상속된다. */
	overflow-wrap: break-word;
}

.c4-about-hero__label {
	margin: 0;
	font-size: var(--c4-fs-article-h3);     /* Heading/H3/single_h3 22 */
	line-height: var(--c4-lh-article);      /* 1.9 */
	font-weight: var(--c4-fw-bold);
	/* 흰색 — 처음엔 포인트 컬러(남색)였는데 사진 위 어둡게 깔기(dim) 뒤로 대비가 낮아져 2026-10-12 사용자 지시로 바꿨다(시안과 다름). */
	color: var(--c4-color-white);
}

/* ★ 가운데 정렬 flex 항목은 내용의 최소 폭만큼 넓어진다 — 띄어쓰기 없는 긴 메일 · URL 이 칸을 뚫고 나가지 않게 폭을 칸 안으로 묶는다
   (그래야 위 overflow-wrap 이 줄을 바꾼다). */
.c4-about-hero__label,
.c4-about-hero__title,
.c4-about-hero__desc { max-width: 100%; }

/* 제목 + 본문 묶음 — 둘 중 하나가 비면 간격도 함께 사라진다(flex gap). */
.c4-about-hero__titles {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--c4-about-hero-gap-title);    /* 제목 → 본문 */
	width: 100%;
}

.c4-about-hero__title {
	margin: 0;
	font-size: var(--c4-fs-page-title);     /* Heading/H1/Page Title 44 */
	line-height: var(--c4-lh-page-title);   /* 1.3 */
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-white);
	word-break: keep-all;   /* 아주 좁은 폰(320)에서 '치료합니 / 다'처럼 낱말 가운데서 접히지 않게(2026-10-15) */
}

/* 한 줄씩 떠오르는 제목(.c4-split__line)은 메인 히어로도 써서 base/reveal.css 로 옮겼다(2026-10-13). */

.c4-about-hero__desc {
	margin: 0;
	font-size: var(--c4-fs-body1);          /* Body/body1 17 */
	line-height: var(--c4-lh-body);
	color: var(--c4-color-white);
}

/* ==========================================================================
   content — PC 가로 2열(정확히 반반) / 모바일 세로
   ========================================================================== */

.c4-about-content {
	padding: var(--c4-about-content-pt) var(--c4-container-pad) var(--c4-about-content-pb);
}

.c4-about-content__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* 1280 = 630 + 20 + 630 */
	gap: var(--c4-about-col-gap);
	/* ★★ PC · 태블릿(두 칸): **사진 칸 높이 = 글 카드 높이**(2026-10-07 사용자 결정 — 11단계 프롬프트의 '높이를 맞추지 않는다'를 바꿨다).
	   글이 짧아져 카드가 낮아지면 사진도 같이 낮아지고, 길어지면 같이 길어진다. 높이를 정하는 쪽은 언제나 글 카드다. */
	align-items: stretch;
	max-width: var(--c4-container-w);
	margin-inline: auto;
}

/* 사진 칸 — PC 는 높이가 글 카드를 따라간다(위 stretch). 사진이 비어도 회색 빈 박스로 남는다(칸을 없애면 2열 균형이 무너진다). */
.c4-about-photo {
	position: relative;   /* 사진을 칸에 깐다 — 사진 자체 크기가 줄 높이를 밀어 올리지 않게 */
	/* ★ 최소 높이(2026-10-08 사용자 결정) — 글이 아주 짧으면 줄 높이가 이 값이 되고, 글 카드도 같은 높이로 늘어난다(stretch · 글은 위에서 시작). */
	min-height: var(--c4-about-photo-min-h);
	border-radius: var(--c4-about-radius);
	overflow: hidden;
	background: var(--c4-color-img-placeholder);
}

.c4-about-photo__img {
	/* ★ 칸을 꽉 채우는 절대 위치 — 그냥 두면 사진의 원래 비율 높이가 두 칸 줄을 키워 글 카드보다 길어진다. */
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;          /* 찌그러뜨리지 않는다 */
	object-position: 50% 50%;   /* 가로 가운데 크롭 — 시안의 안쪽 이미지가 칸보다 넓고 가운데로 밀려 있다 */
}

.c4-about-card {
	display: flex;
	flex-direction: column;
	gap: var(--c4-about-card-title-gap);    /* 제목 → 본문(문단 사이보다 넓게 · 2026-10-14) */
	padding: var(--c4-about-card-pad);
	border-radius: var(--c4-about-radius);
	background: var(--c4-about-card-bg);        /* 흰색(2026-10-14 사용자 지시 · 그 전 grey100 → #ECE8E5) */
	color: var(--c4-color-text-sub);            /* grey700 — 제목 · 본문 같다 */
	/* 구매자가 넣은 긴 URL · 메일 주소가 카드 밖으로 넘쳐 모바일 가로 스크롤이 생기지 않게(FAQ 와 같은 처리) — 상속된다. */
	overflow-wrap: break-word;
}

.c4-about-card__title {
	margin: 0;
	font-size: var(--c4-about-card-title-fs);   /* PC 32(2026-10-13 사용자 지시 — 시안 Heading/H2/Page Title2 28) */
	line-height: var(--c4-lh-page-title2);  /* 1.3 */
	font-weight: var(--c4-fw-bold);
	color: inherit;
	word-break: keep-all;   /* 좁은 폰에서 '동네병 / 원'처럼 낱말 가운데서 접히지 않게(2026-10-15) */
}

.c4-about-card__text {
	font-size: var(--c4-fs-body1);          /* Body/body1 17 */
	line-height: var(--c4-lh-body);
}

.c4-about-card__text > * { margin: 0; }

/* 문단 ↔ 문단 — 리셋 때문에 <p> 여백이 0 이라 여기서 준다. */
.c4-about-card__text > * + * { margin-top: var(--c4-about-para-gap); }

/* ==========================================================================
   모바일 (768 미만)
   ========================================================================== */

@media (max-width: 767.98px) {

	.c4-about-hero {
		/* 내용 폭 327 — 다른 모바일 화면과 같은 좌우 24(시안 실측 312 와 갈림 — PROGRESS '시안 갈림') */
		padding: var(--c4-about-hero-pad-y-m) var(--c4-gutter-mobile);
		min-height: var(--c4-about-hero-min-h-m);
	}

	.c4-about-hero__label { font-size: var(--c4-fs-article-h3-m); }      /* single_h3_m 18 */
	.c4-about-hero__title { font-size: var(--c4-about-hero-title-fs-m); }      /* 24(2026-10-15 사용자 지시 · 그 전 Page Title_m 26) */

	.c4-about-content {
		padding: var(--c4-about-content-pad-m);
	}

	.c4-about-content__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--c4-about-stack-gap-m);
	}

	/* 모바일은 세로로 쌓여 옆 칸이 없다 — 사진 칸은 시안 비율(335 / 429)로 자기 높이를 갖는다. */
	.c4-about-photo {
		min-height: auto;   /* 모바일은 칸 비율로 높이가 정해진다 — PC 최소 높이를 풀어야 좁은 화면(320)에서 비율이 깨지지 않는다 */
		aspect-ratio: var(--c4-about-photo-ratio-m);
		border-radius: var(--c4-about-radius-m);
	}

	.c4-about-card {
		gap: var(--c4-about-card-title-gap-m);
		padding: var(--c4-about-card-pad-m);
		border-radius: var(--c4-about-radius-m);
	}

	.c4-about-card__title { font-size: var(--c4-fs-page-title2-m); }   /* Page Title2_m 20 */
}

/* ==========================================================================
   이력 상자 · 서명 · 사진 카드 구역 — 2026-10-12 추가(사용자 지시 — 레퍼런스 배치)
   ★ 셋 다 옵션이 비면 아래 규칙은 아무 요소에도 닿지 않는다 — 화면은 예전 그대로(사진 | 글 카드).
   ★ 이력이 있으면 `.c4-about-content__inner--history` 가 붙는다(2026-10-12 사용자 지시 2차):
     PC · 태블릿(768 이상 — 'PC 값') 윗줄 [사진 | 글 카드](사진 칸은 예전처럼 글 카드 높이를 따른다) · 아랫줄 이력 한 칸(전체 폭 — 넓으면 안에서 두 단)
     · 모바일 사진 → 이력(최대 320 · 안에서 스크롤) → 글 카드. DOM 은 사진 → 글 카드 → 이력 — 놓이는 자리는 grid-area 가 정한다.
   ========================================================================== */

/* 서명 — 글 카드 맨 아래 오른쪽. 카드가 늘어나도(옆 칸이 더 길 때) 바닥에 붙는다(카드는 세로 flex). */
.c4-about-card__sign {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0 var(--c4-about-sign-gap);
	margin: auto 0 0;
	padding-top: var(--c4-about-sign-pt);
	text-align: right;
}

.c4-about-card__sign-label {
	font-size: var(--c4-fs-body2);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-sub);     /* grey700 — 카드 본문과 같은 색 · #F6F6F6 위 6.28 : 1(grey500 은 3.19 : 1 로 AA 미달) */
}

.c4-about-card__sign-name {
	font-size: var(--c4-about-sign-name-fs);  /* PC 22(2026-10-14 사용자 지시 '전부 22로 통일' · 그 전 20 · 시안 Page Title2 28) */
	line-height: var(--c4-lh-page-title2);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);             /* grey900 */
}

/* ---------- 이력이 있을 때의 배치 (768 이상 — PC 값) ---------- */

.c4-about-content__inner--history {
	grid-template-areas:
		"photo   card"
		"history history";
}

/* 사진 칸은 이력이 없을 때와 같다 — 윗줄 높이(= 글 카드 높이)를 따른다(stretch · 최소 420). */
.c4-about-content__inner--history .c4-about-photo { grid-area: photo; }

.c4-about-content__inner--history .c4-about-card { grid-area: card; }

.c4-about-history {
	grid-area: history;
	min-width: 0;
	border-radius: var(--c4-about-radius);
	background: var(--c4-about-history-bg);     /* 옅은 블루(2026-10-12 사용자 지시 — 처음엔 글 카드와 같은 grey100) */
	color: var(--c4-color-text-sub);            /* grey700 */
	overflow-wrap: break-word;
}

.c4-about-history__body {
	container-type: inline-size;   /* 상자 안쪽 폭으로 '이름 | 항목' 두 칸 여부를 정한다 */
	padding: var(--c4-about-card-pad);
	border-radius: inherit;
}

.c4-about-history__title {
	margin: 0 0 var(--c4-about-card-gap);
	font-size: var(--c4-fs-article-h3);      /* 22 */
	line-height: var(--c4-lh-page-title2);   /* 1.3 */
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
}

.c4-about-history__list {
	display: flex;
	flex-direction: column;
	gap: var(--c4-about-history-group-gap);
}

/* 단 — [이력 묶음(전문분야 · 경력 및 학력) | 저서 | 보유특허](2026-10-14 사용자 지시 3열 · template-about.php). 좁으면 한 단으로 그 순서대로 쌓인다.
   단 안 묶음 사이 = 묶음 간격. 세 단은 아래 @container 880. */
.c4-about-history__col {
	display: flex;
	flex-direction: column;
	gap: var(--c4-about-history-group-gap);
	min-width: 0;
}

/* 묶음 — 이름 한 줄 위 · 항목 줄들 아래(2026-10-13 사용자 지시 "항목명 ⏎ 항목 ⏎ 항목" — 그 전에는 상자가 넓으면 이름 | 항목 두 칸) */
.c4-about-history__group {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--c4-about-history-label-gap);
}

.c4-about-history__label,
.c4-about-history__items {
	margin: 0;
	font-size: var(--c4-fs-body2);   /* 16 */
	line-height: var(--c4-lh-article);   /* 1.9 */
}

/* 묶음 이름 — 굵게 · grey900(포인트 컬러는 16px 에서 대비가 모자라 쓰지 않는다) */
.c4-about-history__label {
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
}

.c4-about-history__items {
	padding: 0;
	list-style: none;
	/* 줄이 넘치면 낱말 단위로 접는다 — 글자 단위로 접혀 '취득'의 '득'만 다음 줄에 남던 것(1024). 띄어쓰기 없는 긴 주소는 위 overflow-wrap 이 접는다. */
	word-break: keep-all;
}

/* 상자가 넓으면(전체 폭 이력 — PC) 세 단 — 단마다 **글 길이만큼** · 왼쪽부터 · 단 사이는 고정(빈 단은 마크업에 없다) · 위 맞춤.
   (2026-10-14 사용자 지시 '3열 간격 좁혀서 특허가 줄바꿈 안 되게' — 그 전 같은 폭 세 단 368 이라 특허 줄(440)이 접혔다. 1440 안쪽 1200 = 262 + 80 + 244 + 80 + 440 + 남는 94.)
   칸이 모자라면 단이 줄고 긴 줄부터 접힌다(1100 화면 안쪽 965 — 특허만 접힌다).
   기준 880 — 1024 화면에서 스크롤바가 있어도 상자 안쪽이 887 ~ 889 라 세 단이 된다(768 은 약 640 — 한 단). */
@container (min-width: 880px) {
	.c4-about-history__list {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: auto;
		justify-content: start;   /* 남는 폭을 단에 나눠 주지 않는다(나누면 단 사이가 다시 벌어진다) */
		align-items: start;
		column-gap: var(--c4-about-history-col-gap-mid);
	}
}

@container (min-width: 1100px) {
	.c4-about-history__list { column-gap: var(--c4-about-history-col-gap-wide); }
}

/* ---------- 사진 카드 구역 ---------- */

.c4-about-feature {
	padding: var(--c4-about-feature-pt) var(--c4-container-pad) var(--c4-about-feature-pb);
}

.c4-about-feature__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: var(--c4-container-w);
	margin-inline: auto;
	text-align: center;
	overflow-wrap: break-word;
}

.c4-about-feature__title,
.c4-about-timeline__title {
	margin: 0;
	font-size: var(--c4-about-feature-title-fs);     /* PC 40(2026-10-13 사용자 지시 — 시안 28) */
	word-break: keep-all;   /* 낱말 단위로 접기 — 24 로 키운 모바일에서 '통합치료' 가 '통합 / 치료' 로 쪼개졌다. 긴 URL 은 위 overflow-wrap 이 접는다 */
	line-height: var(--c4-lh-page-title2);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
}

/* 가운뎃점 낱말 묶음(c4_about_keep_dot) — 사진 카드 구역 · 연혁 구역 제목 */
.c4-about-feature__title .c4-nowrap,
.c4-about-timeline__title .c4-nowrap { white-space: nowrap; }

.c4-about-feature__desc,
.c4-about-timeline__desc {
	margin: var(--c4-about-feature-head-gap) 0 0;
	word-break: keep-all;   /* 낱말 단위로 접기 — 모바일에서 '진 / 료를' 처럼 쪼개졌다(2026-10-12 리뷰 · 제목과 같은 처리). 긴 URL 은 바깥 overflow-wrap 이 접는다 */
	font-size: var(--c4-fs-body1);           /* 17 */
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-sub);
}

/* 가운데 정렬 flex 항목은 내용(끊기지 않는 긴 URL · 메일)만큼 넓어져 화면 밖으로 넘친다 — 상단 구역 라벨 · 제목과 같은 막음(max-width) */
.c4-about-feature__title,
.c4-about-feature__desc,
.c4-about-timeline__title,
.c4-about-timeline__desc { max-width: 100%; }

.c4-about-feature__list {
	align-self: stretch;
	display: grid;
	grid-template-columns: repeat(auto-fit, calc((100% - 2 * var(--c4-about-col-gap)) / 3));   /* 한 장 폭은 3칸 기준 그대로 · 카드가 적으면(2장) 가운데로 모인다(2026-10-16 사진 카드 1번 삭제 — 왼쪽으로 쏠렸다) */
	justify-content: center;
	gap: var(--c4-about-col-gap);
	margin: var(--c4-about-feature-list-gap) 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.c4-about-feature__inner > :first-child { margin-top: 0; }   /* 제목 · 설명을 비웠을 때 카드가 위에 붙게 */

.c4-about-feature__photo {
	position: relative;
	aspect-ratio: var(--c4-about-feature-ratio);
	overflow: hidden;
	border-radius: var(--c4-about-radius);
	background: var(--c4-color-img-placeholder);   /* 사진 없는 카드 — grey300 빈 칸 */
}

.c4-about-feature__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.c4-about-feature__caption {
	margin: var(--c4-about-feature-caption-gap) 0 0;
	text-align: center;   /* 사진 아래 가운데(2026-10-12 사용자 지시 — 시안은 왼쪽). 목록이 text-align: left 라 여기서 다시 준다 */
	font-size: var(--c4-about-feature-caption-fs);   /* 22(2026-10-14 사용자 지시 — 17 → 34 → 24 → 22) */
	line-height: var(--c4-lh-page-title2);           /* 1.3 — 큰 글자라 제목 줄높이 */
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
}

/* ==========================================================================
   진료 과정(2026-10-14 사용자 지시 — 사진 카드 구역 위 · 참고 corridoradvisors.com 'How it works' · 마크업 template-about.php · 움직임 assets/js/about-process.js)
   [제목 | 설명] → 사진 카드 → [① — ② — ③ — ④ 단계]. 스크립트가 켜면(.is-scrolly) 구역이 길어지고 안쪽이 화면에 붙은 채 내리는 만큼 단계가 바뀐다 —
   사진 카드가 그 단계 칸 위로 옮겨 가며(휴대폰은 제자리) 사진이 바뀌고, 진행 줄이 그 번호까지 채워진다.
   ★ 스크립트가 없으면 1단계 사진 + 단계 목록이 그대로(길어지지도 붙지도 않는다).
   ========================================================================== */

.c4-about-process { position: relative; }

.c4-about-process__sticky {
	padding: var(--c4-about-process-pt) var(--c4-container-pad) var(--c4-about-process-pb);
}

.c4-about-process__inner {
	width: 100%;
	max-width: var(--c4-container-w);
	margin-inline: auto;
	overflow-wrap: break-word;
}

.c4-about-process__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);   /* 설명 두 줄을 제목 아래로(2026-10-15 사용자 지시 '작은 글자 2줄을 큰 글자 아래로' · 그 전 오른쪽 칸 · 제목 마지막 줄과 아래 맞춤) */
	gap: var(--c4-about-feature-head-gap);   /* 제목 → 설명 16 — 아래 사진 카드 · 연혁 구역 머리와 같다 */
	align-items: start;
}

/* 오른쪽 로고(2026-10-16 사용자 지시) — 제목 · 설명 묶음(왼쪽) | 로고 줄(오른쪽 · 묶음 아래 끝에 맞춤). 휴대폰은 설명 아래 */
.c4-about-process__head--logos {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: 48px;
}

.c4-about-process__head-text {
	display: grid;
	gap: var(--c4-about-feature-head-gap);
	min-width: 0;
}

.c4-about-process__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;   /* 로고 사이 20(2026-10-16 사용자 지시 '1/2 로' · 그 전 40) */
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4-about-process__logo { display: flex; }

.c4-about-process__logo-img {
	display: block;
	width: auto;
	height: var(--c4-main-logos-h);          /* 64 — 메인 로고 띠와 같은 높이 */
	max-width: var(--c4-main-logos-max-w);   /* 가로로 긴 로고(김시효TV)는 240 까지 */
	object-fit: contain;
}

.c4-about-process__title {
	margin: 0;
	font-size: var(--c4-about-feature-title-fs);   /* 40 — 아래 사진 카드 · 연혁 구역 제목과 같다 */
	line-height: var(--c4-lh-page-title2);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
	word-break: keep-all;
}

.c4-about-process__title .c4-nowrap { white-space: nowrap; }

.c4-about-process__desc {
	margin: 0;
	font-size: var(--c4-about-process-desc-fs);   /* 15(2026-10-14 사용자 지시 · 그 전 17) */
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-sub);
	word-break: keep-all;
}

.c4-about-process__stage { margin-top: var(--c4-about-process-stage-gap); }

/* 사진 카드 — 높이는 화면 높이에 맞춰 줄어든다(낮은 노트북에서도 한 화면에 · 폭은 비율로) */
.c4-about-process__card {
	position: relative;
	height: var(--c4-about-process-card-h);
	aspect-ratio: var(--c4-about-process-card-ratio);
	max-width: 100%;
	border-radius: var(--c4-about-radius);
	background: var(--c4-color-img-placeholder);
	clip-path: inset(0 round var(--c4-about-radius));   /* 사진이 겹쳐 바뀌는 동안에도 모서리를 한 번에 자른다(메인 배너와 같은 이유) */
	isolation: isolate;
	transition: transform var(--c4-about-process-move) var(--c4-main-treat-ease);
}

.c4-about-process__shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--c4-about-process-fade) ease;
}

.c4-about-process__shot.is-active { opacity: 1; }

.c4-about-process__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 사진 위 이름표 — 반투명 흰 판(참고 사이트의 말풍선 자리) */
.c4-about-process__tag {
	position: absolute;
	left: var(--c4-about-process-tag-inset);
	bottom: var(--c4-about-process-tag-inset);
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: calc(100% - var(--c4-about-process-tag-inset) * 2);
	padding: var(--c4-about-process-tag-pad);
	border-radius: var(--c4-radius-btn);
	background: rgb(255 255 255 / .9);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: var(--c4-card-chip-shadow);
	font-size: var(--c4-fs-body2);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text);
}

.c4-about-process__tag-num {
	font-size: var(--c4-fs-body4);
	color: var(--c4-color-accent);
}

/* 단계 줄 — 칸 n 개(같은 폭). 번호 동그라미는 칸 왼쪽, 진행 줄은 첫 동그라미 가운데에서 오른쪽 끝까지. */
.c4-about-process__rail {
	position: relative;
	margin-top: var(--c4-about-process-rail-gap);
}

.c4-about-process__bar {
	position: absolute;
	top: calc(var(--c4-about-process-dot) / 2);
	left: calc(var(--c4-about-process-dot) / 2);
	right: 0;
	height: 1px;
	background: var(--c4-color-border-strong, #cfcac4);
}

.c4-about-process__fill {
	position: absolute;
	top: calc((1px - var(--c4-about-process-fill-w)) / 2);   /* 회색 줄(1px) 가운데에 */
	left: 0;
	width: 0;
	height: var(--c4-about-process-fill-w);
	background: var(--c4-color-accent);
	/* 전환 없음 — 스크롤을 그대로 따라 자란다(연혁과 같다 · about-process.js) */
}

.c4-about-process__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--c4-about-process-n), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.c4-about-process__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-right: var(--c4-about-process-step-pr);
}

.c4-about-process__dot {
	display: grid;
	place-items: center;
	width: var(--c4-about-process-dot);
	height: var(--c4-about-process-dot);
	border: 1px solid var(--c4-color-border-strong, #cfcac4);
	border-radius: 50%;
	background: var(--c4-color-page-bg);   /* 진행 줄을 가린다 */
	color: var(--c4-about-process-idle);
	font-size: var(--c4-fs-body3);
	font-weight: var(--c4-fw-bold);
	transition: background-color var(--c4-about-process-fade) ease, border-color var(--c4-about-process-fade) ease, color var(--c4-about-process-fade) ease, box-shadow var(--c4-about-process-fade) ease;
}

.c4-about-process__step.is-done .c4-about-process__dot {
	border-color: var(--c4-color-accent);
	color: var(--c4-color-accent);
}

.c4-about-process__step.is-current .c4-about-process__dot {
	border-color: var(--c4-color-accent);
	background: var(--c4-color-accent);
	color: var(--c4-color-white);
	box-shadow: 0 0 0 var(--c4-about-process-halo) color-mix(in srgb, var(--c4-color-accent), transparent 85%);
	animation: c4-about-process-beat var(--c4-about-process-beat) ease-in-out infinite;   /* 심장 박동(2026-10-14 사용자 지시) */
}

/* 지금 단계 둘레 옅은 빛 — 두근(크게) · 두근(조금 작게) · 쉼. 크기만 바뀌고 색은 같다 */
@keyframes c4-about-process-beat {
	0%, 26%, 56%, 100% { box-shadow: 0 0 0 var(--c4-about-process-halo) color-mix(in srgb, var(--c4-color-accent), transparent 85%); }
	12% { box-shadow: 0 0 0 var(--c4-about-process-halo-beat) color-mix(in srgb, var(--c4-color-accent), transparent 85%); }
	40% { box-shadow: 0 0 0 calc(var(--c4-about-process-halo-beat) - 3px) color-mix(in srgb, var(--c4-color-accent), transparent 85%); }
}

.c4-about-process__name {
	margin-top: var(--c4-about-process-name-gap);   /* 번호 → 이름('STEP n' 글자는 2026-10-14 뺐다 — 사진 이름표에 있다) */
	font-size: var(--c4-about-process-name-fs);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-page-title2);
	color: var(--c4-about-process-idle);   /* 아직 안 켜진 단계는 회색(2026-10-14 사용자 지시 '활성화 안된건 전부 회색') */
	word-break: keep-all;
	transition: color var(--c4-about-process-fade) ease;
}

.c4-about-process__step.is-done .c4-about-process__name { color: var(--c4-color-text); }   /* 줄이 지나간 단계는 진하게 */

.c4-about-process__step.is-current .c4-about-process__name { color: var(--c4-color-accent); }   /* 밑줄 없음(2026-10-14 사용자 지시 '활성화됐을 때 밑줄 삭제') */

/* 단계 바로가기 단추 — 칸 전체가 눌린다(스크립트가 켤 때만 보인다) */
.c4-about-process__go {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	border-radius: var(--c4-radius-btn);
	background: none;
	cursor: pointer;
}

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

@media (hover: hover) {
	html:not(.c4-hover-reset) .c4-about-process__step:not(.is-current):hover .c4-about-process__name { color: var(--c4-color-accent); }
}

/* 스크롤 단계 — 구역 길이 = 한 화면 + 단계마다 --c4-about-process-step-h · 안쪽은 헤더 아래에 붙어 화면 가운데 */
.c4-about-process.is-scrolly {
	height: calc(100svh + (var(--c4-about-process-n) - 1) * var(--c4-about-process-step-h));
}

.c4-about-process.is-scrolly .c4-about-process__sticky {
	position: sticky;
	top: calc(var(--c4-header-h) + var(--c4-admin-bar-h, 0px));
	display: flex;
	align-items: center;
	min-height: calc(100svh - var(--c4-header-h) - var(--c4-admin-bar-h, 0px));
}

@media (prefers-reduced-motion: reduce) {
	.c4-about-process__card,
	.c4-about-process__shot,
	.c4-about-process__dot,
	.c4-about-process__name { transition: none; }
	.c4-about-process__step.is-current .c4-about-process__dot { animation: none; }   /* 박동 없이 옅은 테만 */
}

@media (max-width: 767.98px) {
	.c4-about-process {
		--c4-about-process-dot: var(--c4-about-process-dot-m);
		--c4-about-process-step-h: var(--c4-about-process-step-h-m);
	}

	.c4-about-process__sticky { padding: var(--c4-about-process-pt-m) var(--c4-about-content-pad-m) var(--c4-about-process-pb-m); }

	.c4-about-process__head {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--c4-about-feature-head-gap-m);
	}

	.c4-about-process__title { font-size: var(--c4-about-feature-title-fs-m); }   /* 24 */
	.c4-about-process__head--logos { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
	.c4-about-process__head-text { gap: var(--c4-about-feature-head-gap-m); }
	.c4-about-process__logos { gap: 12px 14px; }   /* 휴대폰 14(1/2 · 그 전 28) */
	.c4-about-process__logo-img { height: var(--c4-main-logos-h-m); max-width: var(--c4-main-logos-max-w-m); }   /* 40 · 140 */

	.c4-about-process__stage { margin-top: var(--c4-about-process-stage-gap-m); }

	/* 휴대폰 — 사진 카드는 가로 가득 · 제자리(옮겨 가지 않고 사진만 바뀐다) */
	.c4-about-process__card {
		width: 100%;
		height: auto;
		aspect-ratio: var(--c4-about-process-card-ratio-m);
		border-radius: var(--c4-about-radius-m);
		clip-path: inset(0 round var(--c4-about-radius-m));
		transform: none !important;
	}

	.c4-about-process__tag { font-size: var(--c4-fs-body3); }

	.c4-about-process__rail { margin-top: var(--c4-about-process-rail-gap-m); }
	.c4-about-process__step { padding-right: var(--c4-about-process-step-pr-m); }

	.c4-about-process__name {
		margin-top: var(--c4-about-process-name-gap-m);
		font-size: var(--c4-about-process-name-fs-m);
	}

	/* 휴대폰 — 붙어서 바뀌는 장치 대신 단계를 쭉 펼친다(2026-10-15 사용자 지시 · 아래 .c4-about-process__list) — 구역은 내용 높이 · 사진 카드 · 단계 줄 숨김 */
	.c4-about-process.is-scrolly { height: auto; }
	.c4-about-process.is-scrolly .c4-about-process__sticky { position: static; display: block; min-height: 0; }
	.c4-about-process__stage,
	.c4-about-process__rail { display: none; }

	.c4-about-process__list {
		display: flex;
		flex-direction: column;
		gap: var(--c4-about-process-item-gap-m);
		margin: var(--c4-about-process-stage-gap-m) 0 0;
		padding: 0;
		list-style: none;
	}

	.c4-about-process__item-shot {
		overflow: hidden;
		aspect-ratio: var(--c4-about-process-card-ratio-m);
		border-radius: var(--c4-about-radius-m);
		background: var(--c4-color-img-placeholder);
	}

	.c4-about-process__item-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* [번호 동그라미] — [이름] 좌우(같은 날 사용자 지시) */
	.c4-about-process__item-row {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: var(--c4-about-process-item-row-gap-m) 0 0;
	}

	.c4-about-process__item-num {
		display: grid;
		flex: none;
		place-items: center;
		width: var(--c4-about-process-dot-m);
		height: var(--c4-about-process-dot-m);
		border: 1px solid var(--c4-color-accent);
		border-radius: 50%;
		color: var(--c4-color-accent);
		font-size: var(--c4-fs-body3);
		font-weight: var(--c4-fw-bold);
	}

	.c4-about-process__item-name {
		font-size: var(--c4-about-process-item-name-fs-m);
		font-weight: var(--c4-fw-bold);
		line-height: var(--c4-lh-page-title2);
		color: var(--c4-color-text);
		word-break: keep-all;
	}
}

/* PC — 펼친 목록은 없다(휴대폰 전용) */
@media (min-width: 768px) {
	.c4-about-process__list { display: none; }
}

/* ---------- 연혁 구역(2026-10-13 사용자 지시 · 참고 사진 레이아웃) ----------
   [연도] [점 · 세로줄] [(월) 내용] — 연도 묶음 하나가 한 줄(그리드 세 칸). 제목 · 설명은 위 사진 카드 구역과 같은 모양.
   ★ 점은 연도 첫 줄 가운데(--_year-half). 세로줄은 각 묶음이 '내 점 → 다음 묶음의 점'까지 긋는다(묶음 사이 간격 + 다음 점 높이만큼 아래로 넘친다) —
     마지막 묶음은 긋지 않는다. 그래서 묶음 하나하나가 리빌로 떠올라도 줄이 묶음과 함께 움직인다.
   ★ 내용 첫 줄은 연도 첫 줄과 가운데를 맞춘다(위 여백 = 연도 줄 반 − 내용 줄 반). */

.c4-about-timeline {
	padding: var(--c4-about-timeline-pt) var(--c4-container-pad) var(--c4-about-timeline-pb);
}

.c4-about-timeline__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: var(--c4-container-w);
	margin-inline: auto;
	text-align: center;
	overflow-wrap: break-word;
}

.c4-about-timeline__list {
	--_year-half: calc(var(--c4-about-timeline-year-fs) * var(--c4-about-timeline-year-lh) / 2);
	--_item-line: calc(var(--c4-fs-body1) * var(--c4-lh-body));
	display: flex;
	flex-direction: column;
	gap: var(--c4-about-timeline-group-gap);
	width: 100%;
	max-width: var(--c4-about-timeline-list-w);
	margin: var(--c4-about-timeline-list-gap) 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.c4-about-timeline__inner > :first-child { margin-top: 0; }   /* 제목 · 설명을 비웠을 때 목록이 위에 붙게 */

.c4-about-timeline__group {
	position: relative;
	display: grid;
	grid-template-columns: var(--c4-about-timeline-year-w) var(--c4-about-timeline-rail-w) minmax(0, 1fr);
	align-items: start;
}

/* 점 — 연도 첫 줄 가운데 · 점 칸 가운데 */
.c4-about-timeline__group::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: calc(var(--_year-half) - var(--c4-about-timeline-dot) / 2);
	left: calc(var(--c4-about-timeline-year-w) + (var(--c4-about-timeline-rail-w) - var(--c4-about-timeline-dot)) / 2);
	width: var(--c4-about-timeline-dot);
	height: var(--c4-about-timeline-dot);
	border-radius: 50%;
	background: var(--c4-color-accent);
}

/* 세로줄 — 내 점에서 다음 묶음의 점까지 */
.c4-about-timeline__group:not(:last-child)::after {
	content: "";
	position: absolute;
	top: var(--_year-half);
	bottom: calc(-1 * (var(--c4-about-timeline-group-gap) + var(--_year-half)));
	left: calc(var(--c4-about-timeline-year-w) + (var(--c4-about-timeline-rail-w) - var(--c4-about-timeline-line-w)) / 2);
	width: var(--c4-about-timeline-line-w);
	background: var(--c4-color-border);
}

.c4-about-timeline__year {
	grid-column: 1;
	margin: 0;
	font-size: var(--c4-about-timeline-year-fs);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-about-timeline-year-lh);
	color: var(--c4-color-text);
	word-break: keep-all;   /* 'Since 1988' 은 낱말 단위로만 접힌다 */
}

.c4-about-timeline__items {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: var(--c4-about-timeline-item-gap);
	margin: 0;
	padding: max(0px, calc(var(--_year-half) - var(--_item-line) / 2)) 0 0;
	list-style: none;
}

.c4-about-timeline__item {
	font-size: var(--c4-fs-body1);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text);
	word-break: keep-all;   /* 낱말 단위로 접기 — 긴 URL 등은 바깥 overflow-wrap 이 접는다 */
}

/* 월이 있는 연혁 — 모든 줄 앞에 월 칸(월이 없는 줄은 '-' · 참고 레이아웃) */
.c4-about-timeline__list--months .c4-about-timeline__item {
	display: grid;
	grid-template-columns: var(--c4-about-timeline-month-w) minmax(0, 1fr);
}

.c4-about-timeline__month {
	font-weight: var(--c4-fw-medium);
	font-variant-numeric: tabular-nums;
	color: var(--c4-color-text-sub);
}

/* 스크롤 따라 채워지는 연혁(2026-10-13 사용자 지시) — assets/js/timeline.js 가 목록에 .is-tracking 을 붙이고
   파란 줄 길이(--c4-tl-fill)와 묶음 .is-active 를 스크롤에 맞춰 바꾼다.
   · 기본: 연도 · 내용 · 점 모두 회색(--c4-about-timeline-idle). 회색 세로줄(묶음 ::after)은 그대로 깔려 있다.
   · 파란 줄(포인트 컬러): 첫 점에서 시작해 스크롤하면 화면 가운데를 따라 아래로 자란다(위로 올리면 줄어든다).
   · 파란 줄이 점에 닿으면 그 묶음이 활성 — 점 · 연도 파랑, 내용 검정. 첫 묶음(맨 위 연도)은 처음부터 활성.
   ★ 스크립트가 없으면(.is-tracking 없음) 예전 모습 그대로(진한 글자 · 포인트 컬러 점) — 회색으로 남지 않는다.
   ★ 이 목록의 묶음은 리빌 대상이 아니다(inc/reveal.php) — 묶음이 떠오르며 움직이면 고정된 파란 줄과 점이 어긋난다. 이 효과가 대신한다. */
.c4-about-timeline__list { position: relative; }

/* ★ 화면에서만(@media screen) — 인쇄는 스크롤 위치와 상관없이 예전 모습(전부 진한 글자 · 파란 줄 없음 · 2026-10-13 리뷰).
   ★ 색 바뀜(전환)은 .is-ready 부터 — timeline.js 가 첫 상태를 맞춘 다음 프레임에 붙인다. 연혁 중간에서 새로고침 · 뒤로가기 · 주소의 #으로 열면
     처음 칠할 때 모든 연도가 진하다가 0.5초 동안 회색으로 바래는 것이 보였다(같은 날 리뷰). 처음 상태는 전환 없이 바로. */
@media screen {
	.c4-about-timeline__list.is-tracking::after {
		content: "";
		position: absolute;
		top: var(--_year-half);
		left: calc(var(--c4-about-timeline-year-w) + (var(--c4-about-timeline-rail-w) - var(--c4-about-timeline-fill-w)) / 2);
		width: var(--c4-about-timeline-fill-w);
		height: var(--c4-tl-fill, 0px);
		background: var(--c4-color-accent);
		pointer-events: none;   /* 점(z-index 1)은 이 줄 위에 그려진다 */
	}

	.c4-about-timeline__list.is-tracking .c4-about-timeline__group::before { background: var(--c4-about-timeline-idle); }

	.c4-about-timeline__list.is-tracking .c4-about-timeline__year,
	.c4-about-timeline__list.is-tracking .c4-about-timeline__item,
	.c4-about-timeline__list.is-tracking .c4-about-timeline__month { color: var(--c4-about-timeline-idle); }

	.c4-about-timeline__list.is-tracking .c4-about-timeline__group.is-active::before { background: var(--c4-color-accent); }
	.c4-about-timeline__list.is-tracking .is-active .c4-about-timeline__year { color: var(--c4-color-accent); }
	.c4-about-timeline__list.is-tracking .is-active .c4-about-timeline__item { color: var(--c4-color-text); }
	.c4-about-timeline__list.is-tracking .is-active .c4-about-timeline__month { color: var(--c4-color-text-sub); }
}

@media screen and (prefers-reduced-motion: no-preference) {
	.c4-about-timeline__list.is-tracking.is-ready .c4-about-timeline__group::before { transition: background-color var(--c4-about-timeline-fade) ease; }

	.c4-about-timeline__list.is-tracking.is-ready .c4-about-timeline__year,
	.c4-about-timeline__list.is-tracking.is-ready .c4-about-timeline__item,
	.c4-about-timeline__list.is-tracking.is-ready .c4-about-timeline__month { transition: color var(--c4-about-timeline-fade) ease; }
}

/* ---------- 모바일 (768 미만) ---------- */

@media (max-width: 767.98px) {

	.c4-about-card__sign-name { font-size: var(--c4-about-sign-name-fs-m); }   /* 18(2026-10-14 — PC 22 와 함께 · 그 전 20) */

	.c4-about-content__inner--history {
		grid-template-areas:
			"photo"
			"card"
			"history";   /* 사진 → 소개 글 → 이력(2026-10-15 사용자 지시 '전문분야 섹션과 소개글 섹션 순서 변경' · 그 전 사진 → 이력 → 글) */
		grid-template-rows: none;
	}

	.c4-about-history { border-radius: var(--c4-about-radius-m); }

	.c4-about-history__body {
		max-height: var(--c4-about-history-max-h-m);   /* 넘치면 상자 안에서 스크롤(레퍼런스) */
		overflow-y: auto;
		padding: var(--c4-about-card-pad-m);
		/* 스크롤 단서 — 위 · 아래에 내용이 더 있을 때만 그 가장자리에 옅은 그림자(휴대폰은 스크롤바가 밀 때만 보여 상자가 끝난 것처럼 보였다).
		   'local' 덮개(상자 배경색)가 내용과 함께 움직이다 끝에 닿으면 그림자를 가린다 — CSS 만으로 동작한다.
		   ★ overscroll-behavior: contain 을 걸지 말 것 — 상자 끝에서 시작한 새 손가락 밀기가 페이지로 넘어가지 않아 화면이 멈춘 것처럼 보인다(2026-10-12 리뷰). */
		background:
			linear-gradient(var(--c4-about-history-bg) 30%, transparent) center top / 100% var(--c4-about-history-hint-cover) no-repeat local,
			linear-gradient(transparent, var(--c4-about-history-bg) 70%) center bottom / 100% var(--c4-about-history-hint-cover) no-repeat local,
			radial-gradient(farthest-side at 50% 0, var(--c4-about-history-hint-color), transparent) center top / 100% var(--c4-about-history-hint-h) no-repeat scroll,
			radial-gradient(farthest-side at 50% 100%, var(--c4-about-history-hint-color), transparent) center bottom / 100% var(--c4-about-history-hint-h) no-repeat scroll;
	}

	.c4-about-history__title {
		margin-bottom: var(--c4-about-card-gap-m);
		font-size: var(--c4-fs-article-h3-m);   /* 18 */
	}

	.c4-about-feature {
		padding: var(--c4-about-feature-pt-m) var(--c4-about-content-pad-m) var(--c4-about-feature-pb-m);
	}

	.c4-about-feature__title,
	.c4-about-timeline__title { font-size: var(--c4-about-feature-title-fs-m); }   /* Page Title2_m + 4 = 24 */
	.c4-about-feature__desc,
	.c4-about-timeline__desc { margin-top: var(--c4-about-feature-head-gap-m); }

	.c4-about-feature__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--c4-about-stack-gap-m);
		margin-top: var(--c4-about-feature-list-gap-m);
	}

	.c4-about-feature__photo { border-radius: var(--c4-about-radius-m); }
	.c4-about-feature__caption { margin-top: var(--c4-about-feature-caption-gap-m); font-size: var(--c4-about-feature-caption-fs-m); }

	/* 연혁 — 같은 배치 그대로(참고 사진이 좁은 화면 배치) · 칸 · 글자만 줄인다. 내용은 Body3(15) */
	.c4-about-timeline {
		--c4-about-timeline-group-gap: var(--c4-about-timeline-group-gap-m);
		--c4-about-timeline-year-w: var(--c4-about-timeline-year-w-m);
		--c4-about-timeline-rail-w: var(--c4-about-timeline-rail-w-m);
		--c4-about-timeline-year-fs: var(--c4-about-timeline-year-fs-m);
		--c4-about-timeline-dot: var(--c4-about-timeline-dot-m);
		--c4-about-timeline-item-gap: var(--c4-about-timeline-item-gap-m);
		padding: var(--c4-about-timeline-pt-m) var(--c4-about-content-pad-m) var(--c4-about-timeline-pb-m);
	}

	.c4-about-timeline__list {
		--_item-line: calc(var(--c4-fs-body3) * var(--c4-lh-body));
		margin-top: var(--c4-about-timeline-list-gap-m);
	}

	.c4-about-timeline__item { font-size: var(--c4-fs-body3); }
}