@charset "utf-8";
/* =========================================================================
 * 항노화 / 스킨부스터 > JDH 줄기세포 (www/antiaging/stemcell.jsp 전용)
 * Figma node 461:209(정맥주사) · 461:528(피부주사) · 461:809(두피주사) — 1920w light
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 * 선택자는 모두 .stem 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ── 자매 페이지(증상별 솔루션 pore/wrinkle)와의 관계 ─────────────────────
 * 탭·카드·STEP 원형·진단 시스템·4대 강점 배너의 조형 언어를 page_pore.css 에서
 * 그대로 계승한다(사용자 요청: "탭 디자인도 모공/흉터 페이지 참고").
 * 다른 점은 세 가지다.
 *   ① 탭이 2개 → 3개 (정맥주사 / 피부주사 / 두피주사)
 *   ② pore 의 "대형 배너(60px)" 섹션이 없다 → 최대 폰트는 히어로 타이틀 46px
 *      (사이트 규칙: 모든 섹션 폰트는 히어로 타이틀 이하)
 *   ③ 탭이 바뀌면 배너 문구만이 아니라 개요·솔루션·시술과정 전체가 교체된다
 *
 * ── 타이포 스케일 ────────────────────────────────────────────────────
 * 46(h1) / 40(h2) / 26(카드명) / 19(리드) / 18(본문) / 16(설명)
 * ※ 최하단 4대 강점 배너 `.stem_merit` 는 Figma 원본 크기(32 / 13) 유지 → 2026-08-10 설명문만 16px 로 상향 — pore 와 동일 규칙
 * ========================================================================= */

/* headHtml·main_hero.css 에 없는 서체만 이 페이지에서 로드 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

.stem {
	--sc-green:      #3B5843;
	--sc-green-deep: #2C4632;
	--sc-ink:        #1C1E1A;
	--sc-body:       #5B615A;
	--sc-gold:       #C2A878;
	--sc-gold-lite:  #D8C49A;
	--sc-cream:      #FBF9F2;
	--sc-line:       #E7E2D8;
	--sc-paper:      #FFFDF8;

	/* 타이포 스케일 */
	--sc-t-h1:   46px;   /* 히어로 타이틀 — 이 페이지 최대 크기 */
	--sc-t-h2:   40px;
	--sc-t-card: 26px;
	--sc-t-lead: 19px;
	--sc-t-body: 18px;
	--sc-t-txt:  16px;

	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--sc-ink);
	background: #fff;
	overflow-x: clip;
}
.stem .stem_inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

/* ── 섹션 공통 타이포 ─────────────────────────────────────────────── */
.stem .stem_eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #6E8874;
}
.stem .stem_title {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: var(--sc-t-h2);
	line-height: 1.3;
	letter-spacing: -1.4px;
	color: var(--sc-ink);
	word-break: keep-all;
}

/* 탭 전환 시 내용이 그냥 바뀌지 않고 살짝 떠오르며 교체된다 */
@keyframes stemSwap {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.stem .is-swap { animation: stemSwap .42s cubic-bezier(.22,.61,.36,1); }

/* =========================================================================
 * 1. 히어로 — 어두운 그린 그라데이션 + 분자 그래픽
 *    배경 이미지는 JD시그니처 쥬브젠 "깊은 주름과 함몰 흉터…" 섹션과 같은 컷
 *    (/img/signature/juvegen/sec2_bg.jpg — 분자·육각형 그래픽).
 *    ⚠ 색 방향은 두 번 조정됐다(되돌리지 말 것):
 *      ① multiply 로 곱했더니 이미지까지 어두워져 그래픽이 묻히고 면이 칙칙했다
 *      ② 밝은 에메랄드(#4C8163~) 로 올렸더니 이번엔 초록이 너무 떠서 고급스럽지 않았다
 *      → 현재: 채도를 낮춘 딥 그린~차콜 그린(#234A39 → #0B211A) 대각 그라데이션 위에,
 *        분자 그래픽을 별도 레이어(screen + opacity .17)로 은은하게만 얹는다.
 *    (사선 반복 무늬는 사용자 요청으로 제거)
 *    ⚠ 이미지 경로가 /img/signature/juvegen/ 인 것은 의도된 공유다. 두 페이지가 같은 컷을
 *      쓰므로 파일을 복사하지 않았다 — juvegen 자산 교체 시 이 히어로도 함께 바뀐다.
 * ========================================================================= */
/* ⚠ 2026-08-18 전면 교체 — 사용자 지급 사진(stemcell_hero_bg)으로 바꾸면서 **밝은 히어로**가 됐다.
 *   위 문단이 설명하는 [딥 그린 그라데이션 + 분자 그래픽 screen 합성]은 전부 폐기된 설명이다.
 *   밝은 하늘색 사진이라 어두운 오버레이로 덮으면 사진이 보이지 않는다 → 사진을 살리고
 *   **카피를 어두운 색으로 뒤집었다**(아래 .stem_hero__eyebrow/__title/__desc).
 *   되돌린다면 배경·카피 색을 반드시 세트로 되돌릴 것 — 한쪽만 바꾸면 글자가 안 읽힌다.
 * ⚠ 이미지는 원본 PNG(www/img/stemcell_hero_bg.png · 4.4MB)가 아니라 1920px·q86 JPG(85KB) 를 쓴다. */
.stem_hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 520px;          /* 카테고리 대표 페이지답게 세로 존재감을 준다 */
	padding: 132px 0 128px;
	text-align: center;
	background: #DCE7F2 url('/img/antiaging/stemcell/hero_bg.jpg') center center / cover no-repeat;
	overflow: hidden;
}
/* 카피 스크림 — 사진 가운데(카피가 앉는 자리)만 밝게 띄운다.
 * 사진 오른쪽 아래에 큰 세포가 있어 그대로 두면 설명 문장이 그 위에 걸린다.
 * ⚠ 전면을 같은 알파로 덮지 말 것 — 사진이 흐린 하늘색 면이 되어 교체한 의미가 없어진다. */
.stem_hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(62% 58% at 50% 50%,
		rgba(255,255,255,.72) 0%,
		rgba(255,255,255,.46) 46%,
		rgba(255,255,255,0)   100%);
	pointer-events: none;
}
/* 상하 마감 — 위쪽은 헤더(크림색 바)와, 아래쪽은 흰 탭 바와 자연스럽게 이어지게 밝은 쪽으로 뺀다 */
.stem_hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(255,253,248,.55) 0%, rgba(255,253,248,0) 24%),
		linear-gradient(0deg,   rgba(255,253,248,.60) 0%, rgba(255,253,248,0) 20%);
	pointer-events: none;
}
.stem_hero > .stem_inner { position: relative; z-index: 1; width: 100%; }
/* ⚠ 카피 3종의 색은 배경(밝은 사진)과 세트다 — 배경을 어둡게 되돌리면 이 셋도 함께 밝게 돌릴 것 */
/* 2026-08-31 — 18px/400 은 아래 본문(.stem_hero__desc, 18px/400)과 크기·굵기가 같아
   타이틀 위의 도입 문장인데도 본문과 구분되지 않았다 → 20px/600 으로 올린다(사용자 지시).
   ⚠ 색은 그대로 둔다 — 밝은 사진 배경에 맞춰 잡아 둔 값이라 굵기만 올려도 충분히 또렷해진다. */
.stem_hero__eyebrow {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .3px;
	color: rgba(28,30,26,.66);
	word-break: keep-all;
}
.stem_hero__title {
	margin: 18px 0 0;
	font-weight: 800;
	font-size: var(--sc-t-h1);
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: var(--sc-ink);
}
.stem_hero__desc {
	margin: 22px auto 0;
	/* 2026-08-31 — 860 → 920px. 첫 문장의 실제 폭이 861px 이라 **딱 1px** 넘쳐
	 * "제공합니다." 한 마디만 다음 줄로 떨어졌다(고아 줄). 폭을 넓혀 문장 단위 2줄로 맞춘다.
	 * ⚠ 860 이하로 되돌리지 말 것 — 원고를 고치지 않는 한 같은 증상이 다시 난다. */
	max-width: 920px;
	font-size: var(--sc-t-body);
	font-weight: 400;
	line-height: 1.8;
	color: rgba(28,30,26,.72);
	word-break: keep-all;
}

/* =========================================================================
 * 2. 주제 탭 — 헤더(72px) 아래 고정되는 세그먼트 네비게이션
 *    Figma 의 알약 버튼 3개 대신, pore 페이지와 같은 언더라인 탭으로 통일
 * ========================================================================= */
.stem_tabs {
	position: sticky;
	top: 72px;
	z-index: 20;
	background: rgba(255,253,248,.94);
	border-bottom: 1px solid var(--sc-line);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
/* 2026-08-10 — 탭을 가운데 정렬로 바꿨다(사용자 요청).
   안내 문구가 흐름에 있으면 탭이 왼쪽으로 밀리므로 문구만 절대 위치로 빼낸다.
   (1024↓ 에서는 inner 가 block 으로 풀리고 문구는 숨겨지므로 이 규칙이 무력화된다) */
.stem_tabs__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}
.stem_tabs__list { position: relative; display: flex; }
.stem_tab {
	position: relative;
	padding: 18px 30px 16px;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	transition: color .25s ease;
}
.stem_tab__ko {
	display: block;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -.3px;
	color: rgba(28,30,26,.45);
	white-space: nowrap;
	transition: color .25s ease;
}
.stem_tab__en {
	display: block;
	margin: 3px 0 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	color: rgba(28,30,26,.32);
	white-space: nowrap;
	transition: color .25s ease;
}
.stem_tab.is-on .stem_tab__ko { color: var(--sc-green); }
.stem_tab.is-on .stem_tab__en { color: var(--sc-gold); }
.stem_tab:hover .stem_tab__ko { color: var(--sc-ink); }
/* 활성 표식 — JS 가 left/width 를 지정하고 CSS 가 그 사이를 부드럽게 잇는다 */
.stem_tabs__ink {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--sc-green);
	transition: left .38s cubic-bezier(.22,.61,.36,1), width .38s cubic-bezier(.22,.61,.36,1);
}
.stem_tabs__note {
	position: absolute;
	right: 40px;              /* .stem_inner 의 좌우 패딩과 같은 값 */
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-size: 13px;
	color: rgba(28,30,26,.4);
}

/* 탭 패널 — 선택되지 않은 주제는 [hidden] 으로 감춘다.
 * display:none 을 명시하는 이유: 일부 브라우저에서 display 를 가진 요소는 [hidden] 이 무시된다. */
.stem [data-tab-panel][hidden] { display: none; }

/* =========================================================================
 * 2-1. 줄기세포란 — 기능 6가지 + 특징 3가지 (탭 공통, 2026-08-10 신설)
 *      비앤미 SVF 의 "중앙 비주얼 + 둘레 라벨 카드" 도식을 따르되, 쓸 수 있는 인물 컷이
 *      없어 중앙은 CSS 원형 코어로 세웠다(사진이 오면 코어 안에 넣으면 된다).
 * ========================================================================= */
/* 배경 = 선명한 세포 사진(::before) + 어두운 오버레이(::after). 2026-08-18 개편.
 * 이 섹션은 **어두운 섹션**이다 — 헤드 카피가 밝은 글자이므로 배경을 밝게 되돌리면 카피가 안 읽힌다.
 *   · 2026-08-10 초안: 400px 축소본 + blur(10px) + luminosity 로 흐리게 → 전부 폐기
 *   · 2026-08-11: 탭 구분을 섹션 배경색(--what-base)으로 냈었다 → 사진이 진해져 거의 안 보인다.
 *     지금 탭 구분은 어두운 오버레이 색(--what-dark)이 낸다.
 * background-color 는 사진이 뜨기 전 바탕용으로 남겨 둔다(탭 전환 transition 도 여기서 걸린다). */
.stem_what {
	--what-base: #E4F0EE;                 /* 섹션 베이스 — 기본 = 정맥주사(아쿠아 민트) */
	--what-tint: rgba(30,74,78,.22);      /* 모서리 쪽 색 강조 */
	--what-dark: 20,58,60;                /* 전체 어둡게 덮는 오버레이 색(RGB만) — 탭별로 갈아끼운다 */
	position: relative;
	padding: 104px 0 108px;
	background-color: var(--what-base);
	border-bottom: 1px solid var(--sc-line);
	overflow: hidden;
	transition: background-color .6s ease;
}
/* 2026-08-18 사용자 요청 — 배경을 stemcell_bg 로 갈고 "꽤 선명하게" 보이게 바꿨다.
 * 그래서 위 문단이 설명하던 [축소본 + blur + luminosity] 3종 세트를 전부 걷어냈다.
 *   · blur/inset:-40px → 블러가 없으니 가장자리를 넓힐 이유도 없다(inset:0).
 *   · mix-blend-mode:luminosity → 사진의 푸른 색을 죽여 선명함이 사라진다. normal 로 둘 것.
 *   · 이미지 → 원본 해상도(2018px·q88·124KB) JPG. 흐리게 쓸 게 아니라서 축소본은 계단이 보인다.
 * ⚠ 사진이 선명해진 만큼 탭 색(--what-base)은 거의 가려진다. 탭 구분은 ::after 의 모서리
 *   틴트(--what-tint)가 맡으므로 그 알파를 낮추지 말 것. */
.stem_what::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/img/antiaging/stemcell/stemcell_bg.jpg') center center / cover no-repeat;
	opacity: .92;
}
/* 어두운 오버레이 — 2026-08-18 사용자 지시로 "가운데만" 이 아니라 **섹션 전체**를 어둡게 덮는다.
 * ⚠ 이 섹션은 이제 어두운 섹션이다. 흰 스크림(밝게 덮던 레이어)을 되살리지 말 것 —
 *   되살리면 아래 헤드 카피(밝은 글자)가 배경과 붙어 안 읽힌다.
 * ⚠ 레이어 순서 = 위에 쓴 것이 위에 깔린다. 중앙 음영을 맨 앞에 두어 도식 뒤가 가장 진하게 남는다.
 * ⚠ 색은 검정이 아니라 탭 색 계열(--what-dark) — 검정은 사진의 푸른 색을 회색으로 죽인다. */
.stem_what::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* ① 도식(.stem_fn) 뒤 — 중심 60% 는 섹션 중앙이 아니라 도식 중심에 맞춘 값이다
		     (헤드 카피가 위를 차지해 도식이 아래로 내려와 있다). 도식 크기를 바꾸면 이 값도 같이 볼 것 */
		radial-gradient(48% 46% at 50% 60%,
			rgba(var(--what-dark),.30) 0%,
			rgba(var(--what-dark),.22) 52%,
			rgba(var(--what-dark),0) 100%),
		/* ② 섹션 전체 — 위아래를 조금 더 눌러 사진이 가장자리에서 떠 보이지 않게 한다 */
		linear-gradient(180deg,
			rgba(var(--what-dark),.58) 0%,
			rgba(var(--what-dark),.46) 42%,
			rgba(var(--what-dark),.60) 100%),
		radial-gradient(120% 95% at 8% -8%, var(--what-tint) 0%, rgba(255,255,255,0) 62%),
		radial-gradient(115% 92% at 96% 104%, var(--what-tint) 0%, rgba(255,255,255,0) 58%);
}
/* 어두운 배경 위 카피 — 잉크색 그대로 두면 읽히지 않는다(위 오버레이와 세트로 움직일 것) */
.stem_what .stem_eyebrow { color: var(--sc-gold-lite); }
.stem_what .stem_title   { color: var(--sc-paper); }
.stem_what > .stem_inner { position: relative; z-index: 1; }
/* 탭별 색감 — 2026-08-18 팔레트 전면 교체(사용자 요청: "청량하고 쨍하지 않은 깨끗한 색").
   ⚠ 세 탭 모두 **쿨톤 저채도**로 통일하고 색상(hue)만 벌려 구분한다 — 아쿠아 / 라일락 / 스카이블루.
     따뜻한 카퍼(두피)는 이 기준과 맞지 않아 폐기했다. 되살리지 말 것.
   ⚠ 한 탭의 색은 네 곳이 한 세트다: .stem_what · .stem_fn__core · --sc-ov-*(개요) · --hl-base(배너).
     하나만 고치면 같은 화면에서 두 계열이 부딪힌다. */
.stem[data-tab="skin"]  .stem_what { --what-base: #EBE6F3; --what-tint: rgba(62,53,96,.22); --what-dark: 44,36,70; }
.stem[data-tab="scalp"] .stem_what { --what-base: #E5EDF5; --what-tint: rgba(38,68,95,.22); --what-dark: 26,48,68; }
/* 중앙 코어도 같은 계열로 — 배경만 색이 바뀌고 코어만 그린으로 남으면 탭이 바뀐 티가 안 난다 */
.stem[data-tab="skin"] .stem_fn__core {
	--core-hi: #5F5590; --core-mid: #463D70; --core-deep: #322A54; --core-shadow: rgba(50,42,84,.28);
}
.stem[data-tab="scalp"] .stem_fn__core {
	--core-hi: #3F6A90; --core-mid: #2C4F6E; --core-deep: #1F3A54; --core-shadow: rgba(30,58,84,.28);
}
.stem_what__head { text-align: center; }
.stem_what__lead {
	margin: 24px auto 0;
	max-width: 900px;
	font-size: var(--sc-t-body);
	line-height: 1.85;
	color: rgba(255,253,248,.82);
	word-break: keep-all;
}

/* ── 기능 6가지 — 중앙 코어 + 궤도 위 원형 노드 6개 ───────────────────
 * 사각 카드를 좌 3 / 우 3 으로 세웠던 초안을 2026-08-11 사용자 요청으로 방사형 도식으로 바꿨다.
 * 각 노드는 [원점에서 회전 → 반지름만큼 이동 → 같은 각도만큼 역회전] 한 자리에 놓인다.
 *   transform: rotate(A) translateY(-R) rotate(-A)
 * 마지막 역회전이 없으면 카드 자체가 기울어 글자가 돌아간다. 반드시 세 단계 모두 유지할 것.
 * ⚠ 크기는 --fn-size / --fn-r / --fn-node 세 변수로만 조절한다(브레이크포인트에서 이 셋만 갈아끼움).
 *   --fn-size = --fn-r * 2 + --fn-node 관계를 깨면 노드가 컨테이너 밖으로 잘린다. */
.stem_fn {
	--fn-size: 900px;    /* 도식 전체 정사각 크기 */
	--fn-r:    335px;    /* 코어 중심 → 노드 중심 거리(궤도 반지름) */
	--fn-node: 230px;    /* 노드 지름 */
	position: relative;
	width: var(--fn-size);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin: 56px auto 0;
}
/* 궤도 링 — 노드 중심을 지나므로 노드 뒤로 숨었다가 노드 사이 구간에서만 보인다 */
.stem_fn::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--fn-r) * 2);
	height: calc(var(--fn-r) * 2);
	transform: translate(-50%, -50%);
	border: 1px dashed rgba(178,150,100,.72);
	border-radius: 50%;
}
.stem_fn__ring {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.stem_fn__item {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--fn-node);
	height: var(--fn-node);
	margin: calc(var(--fn-node) / -2);
	padding: 0 26px;
	border: 1px solid var(--sc-line);
	border-radius: 50%;
	background: rgba(255,253,248,.94);
	box-shadow: 0 14px 32px rgba(76,64,44,.10);
	text-align: center;
	transform: rotate(var(--a)) translateY(calc(var(--fn-r) * -1)) rotate(calc(var(--a) * -1)) scale(var(--s, 1));
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* 12시부터 시계방향 60°씩 — li 순서가 곧 배치 순서다 */
.stem_fn__item:nth-child(1) { --a:   0deg; }
.stem_fn__item:nth-child(2) { --a:  60deg; }
.stem_fn__item:nth-child(3) { --a: 120deg; }
.stem_fn__item:nth-child(4) { --a: 180deg; }
.stem_fn__item:nth-child(5) { --a: 240deg; }
.stem_fn__item:nth-child(6) { --a: 300deg; }
.stem_fn__item:hover {
	--s: 1.05;
	border-color: rgba(194,168,120,.75);
	box-shadow: 0 20px 42px rgba(76,64,44,.16);
}
/* ⚠ 노드 안 영문 라벨(.stem_fn__en)은 2026-08-18 사용자 지시로 마크업째 제거했다 — 되살리지 말 것.
   라벨이 빠진 만큼 이름의 상단 여백을 0 으로 두어 두 줄이 원 가운데에 오게 한다. */
.stem_fn__item strong {
	display: block;
	margin: 0;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.35;
	letter-spacing: -.5px;
	color: var(--sc-ink);
	word-break: keep-all;
}
.stem_fn__txt {
	display: block;
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
/* 중앙 코어 — 그라데이션 원 + 골드 링(::before).
 * 2026-08-18 사용자 요청으로 코어 색을 **탭별**로 나눴다(정맥 그린 / 피부 바이올렛 / 두피 카퍼).
 * 세 변수만 갈아끼우면 되고, 색은 각 탭의 hl 배너(--hl-base)와 같은 계열로 맞춘 값이다. */
.stem_fn__core {
	--core-hi:     #3E7A76;                  /* 좌상단 하이라이트 — 기본 = 정맥주사(아쿠아 민트) */
	--core-mid:    #2A5D60;
	--core-deep:   #1D464A;
	--core-shadow: rgba(28,70,72,.28);
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 268px;
	height: 268px;
	border-radius: 50%;
	background: radial-gradient(60% 60% at 38% 30%, var(--core-hi) 0%, var(--core-mid) 46%, var(--core-deep) 100%);
	box-shadow: 0 24px 50px var(--core-shadow);
	color: #FFFDF8;
	text-align: center;
	transform: translate(-50%, -50%);
}
.stem_fn__core::before {
	content: '';
	position: absolute;
	inset: -14px;
	border: 1px solid rgba(194,168,120,.5);
	border-radius: 50%;
	animation: stemRingPulse 4.6s ease-in-out infinite;
}
/* 반짝임 — 표면을 대각으로 스치는 광택 바(::before) + 우상단 스파클(::after).
 * ⚠ 광택 바는 코어 밖으로 나가면 안 되므로 이 요소가 overflow:hidden 을 맡는다
 *   (코어 자신은 골드 링이 inset:-14px 로 밖에 있어 hidden 을 걸 수 없다). */
.stem_fn__sheen {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	pointer-events: none;
}
.stem_fn__sheen::before {
	content: '';
	position: absolute;
	top: -50%;
	left: 0;
	width: 38%;
	height: 200%;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
	filter: blur(7px);
	animation: stemSheen 6.4s ease-in-out infinite;
}
.stem_fn__sheen::after {
	content: '';
	position: absolute;
	top: 24%;
	left: 71%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #FFFDF8;
	/* 두 번째 스파클(좌하)은 요소를 늘리지 않고 box-shadow 로 찍는다 — 같은 타이밍에 함께 반짝인다 */
	box-shadow:
		0 0 12px 4px rgba(255,253,248,.55),
		-112px 126px 0 -1px rgba(255,253,248,.85),
		-112px 126px 10px 1px rgba(255,253,248,.4);
	animation: stemTwinkle 3.8s ease-in-out infinite;
}
@keyframes stemSheen {
	0%   { transform: translateX(-180%) rotate(20deg); opacity: 0; }
	7%   { opacity: 1; }
	34%  { opacity: 1; }
	42%  { transform: translateX(320%) rotate(20deg); opacity: 0; }
	100% { transform: translateX(320%) rotate(20deg); opacity: 0; }
}
@keyframes stemRingPulse {
	0%, 100% { opacity: .55; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.012); }
}
@keyframes stemTwinkle {
	0%, 62%, 100% { opacity: 0;   transform: scale(.4); }
	74%           { opacity: .95; transform: scale(1); }
	86%           { opacity: 0;   transform: scale(.4); }
}
/* 모션 최소화 설정을 켠 사용자에게는 반짝임을 멈춘다 */
@media (prefers-reduced-motion: reduce) {
	.stem_fn__sheen::before,
	.stem_fn__sheen::after,
	.stem_fn__core::before { animation: none; }
	.stem_fn__sheen::after { opacity: 0; }
}
/* 코어에서 궤도 쪽으로 번지는 옅은 후광 — 노드와 코어 사이 빈 면을 잡아 준다 */
.stem_fn__core::after {
	content: '';
	position: absolute;
	inset: -60px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(59,88,67,.10) 0%, rgba(59,88,67,0) 100%);
	z-index: -1;
}
.stem_fn__core-en {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: 3px;
}
.stem_fn__core-ko {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -.3px;
	color: var(--sc-gold-lite);
}

/* =========================================================================
 * 2-2. 특징 3가지 — 사진 카드 3장 (독립 섹션)
 * -------------------------------------------------------------------------
 * 2026-08-18 사용자 요청으로 두 번 바뀐 섹션이다. 최종 형태만 지킬 것.
 *   ① 위 원형 도식(.stem_what)에서 떼어내 독립 섹션으로
 *   ② 섹션 배경 사진은 **없앤다 → 흰 면**. 사진은 카드 안에서만 쓴다
 *      (섹션에도 사진을 깔면 카드 사진과 겹쳐 어느 쪽도 안 보인다)
 *   ③ 카드 3장 = 각각 ft_01~03.jpg 를 배경으로 깐 사진 카드
 * ⚠ 되살리지 말 것 — 영문 라벨(.stem_ftz__en), 칸 구분 hairline(사진 카드에는 쓸 자리가 없다). */
.stem_ftz {
	position: relative;
	padding: 132px 0 140px;
	background: var(--sc-paper);
	border-bottom: 1px solid var(--sc-line);
}
.stem_ftz > .stem_inner { position: relative; z-index: 1; }
.stem_ftz__head { text-align: center; }
.stem_ftz__lead {
	margin: 16px 0 0;
	font-size: var(--sc-t-h2);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -.8px;
	color: var(--sc-ink);
	word-break: keep-all;
}
.stem_ftz__lead em {
	font-style: normal;
	font-weight: 700;
	color: var(--sc-green);
}
/* 사진 카드 3장 — 사진을 카드 면 전체에 깔고 아래쪽에만 밝은 스크림을 얹어 카피를 앉힌다 */
.stem_ftz__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}
/* ⚠ radius 8px — 사진을 담는 박스는 사이트 공통 8px 규칙을 따른다(다른 값으로 바꾸지 말 것) */
.stem_ftz__item {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 8px;
	background: #E9EFF4 center center / cover no-repeat;   /* 사진이 뜨기 전 바탕색 */
	box-shadow: 0 18px 40px rgba(76,64,44,.14);
}
/* 카드 순서 = 이미지 번호. JSP 의 li 순서를 바꾸면 여기도 같이 바꿔야 한다
   (01 분열 → 자가복제 / 02 세포 클로즈업 → 분화 / 03 DNA → 호밍) */
.stem_ftz__item:nth-child(1) { background-image: url('/img/antiaging/stemcell/ft_01.jpg'); }
.stem_ftz__item:nth-child(2) { background-image: url('/img/antiaging/stemcell/ft_02.jpg'); }
.stem_ftz__item:nth-child(3) { background-image: url('/img/antiaging/stemcell/ft_03.jpg'); }
/* 카피 스크림 — 사진이 밝은 파스텔이라 어두운 막이 아니라 **밝은 막**을 쓴다.
   위 절반은 건드리지 않아야 사진이 사진으로 읽힌다. */
.stem_ftz__item::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(255,253,248,0)   28%,
		rgba(255,253,248,.62) 50%,
		rgba(255,253,248,.93) 72%,
		rgba(255,253,248,.99) 100%);
}
.stem_ftz__body {
	position: relative;
	width: 100%;
	padding: 0 30px 34px;
	text-align: center;
}
/* ⚠ 이름 밑 짧은 골드 선(.stem_ftz__name::after)은 2026-08-18 사용자 지시로 제거했다 — 되살리지 말 것 */
.stem_ftz__name {
	display: block;
	margin: 0;
	padding: 0 0 12px;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: -.8px;
	color: var(--sc-ink);
}
.stem_ftz__txt {
	margin: 0;
	font-size: var(--sc-t-txt);
	line-height: 1.8;
	color: rgba(28,30,26,.7);
	word-break: keep-all;
}

/* =========================================================================
 * 3. 시술 부위 3종 — 지그재그 (2026-08-20 개편)
 *    이전에는 [좌 개요 카피 / 우 전후 뷰어] 한 벌을 **주제 탭**이 통째로 갈아끼웠다.
 *    사용자 지시로 탭을 없애고 정맥·피부·두피 세 블록을 한 페이지에 지그재그로 편다.
 *    · 면(배경·오버레이)은 옛 .stem_over 것을 그대로 물려받는다 — 그래서 두 선택자를 함께 둔다.
 *      (.stem_over 마크업은 이제 없지만 색 토큰 --sc-ov-* 는 살아 있다)
 *    · 홀/짝 교차는 `article:nth-of-type(2n)` 이 맡는다. 행을 추가·삭제해도 자동으로 지그재그가 유지된다.
 *      ⚠ :nth-child 로 바꾸지 말 것 — 섹션 첫 자식이 헤더(div)라 순번이 밀린다.
 * ========================================================================= */
.stem_area {
	position: relative;
	padding: 104px 0 108px;
	background:
		/* ⚠ 종료색은 골드·그린 알파0 이 아니라 흰색 알파0 이어야 한다 — 알파 0 이라도 보간 과정에
		   그 색이 섞여, 탭 색을 쿨톤으로 바꾼 뒤에는 면이 누렇게 탁해 보인다(2026-08-18) */
		radial-gradient(58% 68% at 82% 12%, var(--sc-ov-glow1) 0%, rgba(255,255,255,0) 62%),
		radial-gradient(52% 62% at 6% 90%,  var(--sc-ov-glow2) 0%, rgba(255,255,255,0) 64%),
		linear-gradient(162deg, var(--sc-ov-a) 0%, var(--sc-ov-b) 48%, var(--sc-ov-c) 100%);
	border-bottom: 1px solid var(--sc-ov-line);
	overflow: hidden;
}
/* 주사 종류별로 면의 색을 바꿔, 탭을 옮겼다는 것이 색으로도 읽히게 한다.
 * 2026-08-18 — 기존은 [웜 샌드 / 라벤더 / 세이지] 였는데 온도가 섞여 있었다.
 *   사용자 요청("청량하고 쨍하지 않은 깨끗한 색")으로 **셋 다 쿨톤 저채도**로 다시 짰다:
 *     정맥주사 = 아쿠아 민트 / 피부주사 = 소프트 라일락 / 두피주사 = 소프트 스카이블루
 *   ⚠ 채도를 올려 선명하게 만들지 말 것 — 카피(잉크)와 골드 액센트가 얹히는 면이라 금방 쨍해진다.
 *   ⚠ 개요 면만 바꾸면 안 된다. 같은 탭의 .stem_what · .stem_fn__core · .stem_hl 과 한 세트다. */
.stem {
	--sc-ov-glow1: rgba(120,170,170,.18);
	--sc-ov-glow2: rgba(60,110,110,.10);
	--sc-ov-a: #F2F8F7;
	--sc-ov-b: #E6F1EF;
	--sc-ov-c: #D9E9E6;
	--sc-ov-line: rgba(60,120,120,.28);
}
.stem[data-tab="skin"] {
	--sc-ov-glow1: rgba(140,124,180,.18);
	--sc-ov-glow2: rgba(90,86,140,.10);
	--sc-ov-a: #F6F4FA;
	--sc-ov-b: #EDE9F5;
	--sc-ov-c: #E1DBEE;
	--sc-ov-line: rgba(110,96,160,.26);
}
.stem[data-tab="scalp"] {
	--sc-ov-glow1: rgba(120,160,200,.18);
	--sc-ov-glow2: rgba(70,110,150,.10);
	--sc-ov-a: #F2F6FA;
	--sc-ov-b: #E7EFF7;
	--sc-ov-c: #D9E6F1;
	--sc-ov-line: rgba(70,110,150,.26);
}
/* 오버레이: 사선 스트라이프 무늬 → 부드러운 그라데이션으로 교체(2026-08-03, 사용자 요청).
   무늬 없이도 면이 밋밋하지 않도록 상단/하단에 옅은 화이트 빛만 얹는다. */
.stem_area::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(255,255,255,.42) 0%,
		rgba(255,255,255,.10) 38%,
		rgba(255,255,255,0)   62%,
		rgba(255,255,255,.30) 100%);
	pointer-events: none;
}
.stem_area > .stem_inner { position: relative; z-index: 1; }

.stem_area__head { max-width: 940px; margin: 0 auto 66px; text-align: center; }
.stem_area__lead {
	margin: 20px 0 0;
	font-size: var(--sc-t-body);
	line-height: 1.85;
	color: rgba(28,30,26,.72);
	word-break: keep-all;
}

/* 한 행 = [미디어 | 카피]. 짝수 행만 미디어를 오른쪽으로 보내 지그재그를 만든다. */
.stem_area__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 76px;
	align-items: center;
}
.stem_area__row + .stem_area__row { margin-top: 94px; }
.stem_area__row:nth-of-type(2n) .stem_area__media { order: 2; }
.stem_area__row:nth-of-type(2n) .stem_area__body  { order: 1; }

/* ⚠ min-width:0 이 없으면 그리드 1fr 칸의 기본 min-width:auto 때문에
     안쪽 사진 폭이 칸을 밀어내 좌우 균형이 깨진다. */
.stem_area__media { min-width: 0; }
/* 전후 뷰어 본체(.jdh_ba)는 공통 컴포넌트 /css/jdh_ba.css 담당.
 * 이 페이지에서는 페이지 톤(그린/골드)만 넘겨준다. */
.stem_area__media .jdh_ba {
	--ba-ink:   var(--sc-ink);
	--ba-green: var(--sc-green);
	--ba-gold:  var(--sc-gold);
	--ba-line:  var(--sc-line);
}
/* 두피 컷은 **가로형**(285x218 / 294x211)이다. 공통 뷰어의 split 비율(1.7/1)은 세로형 증례 기준이라
 * 그대로 쓰면 두피 사진의 좌우가 크게 잘린다 → 이 블록만 [가로형 두 장 나란히] = 2.7/1 로 넓힌다.
 * ⚠ 더 큰(또는 세로형) 컷으로 교체하면 이 값도 다시 볼 것. */
.stem_area__media--scalp .jdh_ba[data-mode="split"] .jdh_ba__stage { aspect-ratio: 2.7 / 1; }

/* ⚠ 블록 번호(.stem_area__no 01·02·03)는 2026-08-20 사용자 지시로 제거했다 — 되살리지 말 것 */
.stem_area__name {
	margin: 14px 0 0;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.3;
	letter-spacing: -1.2px;
	color: var(--sc-ink);
	word-break: keep-all;
}
.stem_area__desc {
	margin: 20px 0 0;
	font-size: var(--sc-t-body);
	line-height: 1.85;
	color: rgba(28,30,26,.72);
	word-break: keep-all;
}
/* 포인트 목록 — 2026-08-20 "가독성 더 좋고 잘 보이게".
 * 배경 위에 글자만 떠 있던 형태(16px, 점 하나)에서 **흰 카드 줄**로 바꿨다:
 * 글자를 한 단계 키우고(17.5/600) 흰 면을 깔아 개요 문단과 구분되게 한다.
 * ⚠ 옛 형태(투명 배경 + 24px 들여쓰기)로 되돌리지 말 것. */
.stem_area__points {
	margin: 28px 0 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.stem_area__points li {
	position: relative;
	padding: 13px 20px 13px 44px;
	border-radius: 10px;
	background: rgba(255,255,255,.80);
	border: 1px solid rgba(59,88,67,.14);
	box-shadow: 0 6px 18px rgba(28,30,26,.045);
	font-size: 17.5px;
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: -.3px;
	color: var(--sc-ink);
	word-break: keep-all;
}
.stem_area__points li::before {
	content: '';
	position: absolute;
	left: 18px;
	top: 50%;
	margin-top: -4.5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--sc-green);
	box-shadow: 0 0 0 5px rgba(59,88,67,.14);
}
.stem_area__note {
	margin: 56px 0 0;
	text-align: center;
	font-size: 14px;
	color: rgba(28,30,26,.48);
}

/* 단일 이미지(피부주사 블록) — 원본 비율 그대로 놓는다.
 * 롤링·전후 뷰어처럼 비율을 고정하면 여백이 생기므로 여기서는 aspect-ratio 를 쓰지 않는다
 * (지그재그는 행마다 높이가 달라도 align-items:center 라 균형이 유지된다). */
.stem_pic {
	margin: 0;
	border-radius: 8px;                       /* 이미지 박스 radius 규칙 */
	overflow: hidden;
	box-shadow: 0 26px 54px rgba(76,64,44,.16);
}
.stem_pic img { display: block; width: 100%; height: auto; }

/* 이미지 롤링(정맥주사 블록).
 * ⚠ 2026-08-20 사용자 지급 컷이 **글자가 박힌 인포그래픽**(추이 그래프 / 혈류 비교)이라
 *   cover 로 채우면 위아래 글자가 잘린다 → `object-fit: contain` + 흰 박스로 바꿨다.
 *   두 컷 비율(1.48 / 1.54)의 가운데인 1.50 을 박스 비율로 잡아 여백을 최소화한다.
 *   사진(글자 없는 컷)으로 다시 바뀌면 cover + 1.7/1(전후 뷰어와 같은 비율)로 되돌리면 된다. */
.stem_roll { position: relative; }
.stem_roll__stage {
	position: relative;
	aspect-ratio: 1.5 / 1;
	border-radius: 8px;                       /* 이미지 박스 radius 규칙 */
	overflow: hidden;
	background: #fff;
	box-shadow: 0 26px 54px rgba(76,64,44,.16);
}
.stem_roll__stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity .8s cubic-bezier(.4,0,.2,1);
}
/* contain 이라 컷 비율(1.48 / 1.36)과 박스(1.45) 차이만큼 여백이 남는다.
 * 그 여백을 **각 컷의 바탕색**으로 칠해 경계가 보이지 않게 한다(01 크림빛 / 02 청백).
 * ⚠ 컷을 교체하면 이 두 색도 새 컷의 모서리 색으로 다시 뽑을 것. */
.stem_roll__stage img:nth-child(1) { background: #FBF6EC; }
.stem_roll__stage img:nth-child(2) { background: #EAE9E7; }   /* 2026-08-20 02 컷 교체분(회백색 바탕) */
.stem_roll__stage img.is-on { opacity: 1; }
.stem_roll__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
}
.stem_roll__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(28,30,26,.20);
	cursor: pointer;
	transition: background .25s ease, width .25s ease;
}
.stem_roll__dot.is-on { width: 22px; border-radius: 999px; background: var(--sc-green); }

/* =========================================================================
 * 3-1. 개선 포인트 배너 (치료 솔루션 앞) — 2026-08-05 사용자 요청
 *      증상별 솔루션 4형제의 `_hl` 섹션을 그대로 가져오되, 배경만 그린이 아니라
 *      **탭 색**으로 간다(사용자 지시). 루트 [data-tab] 이 바뀌면 --hl-base 가 갈아끼워진다.
 *      ⚠ 색 전환을 부드럽게 하려고 베이스는 background-color(단색)로 두고, 질감(광원·비네트)은
 *        ::after 오버레이로 고정했다. gradient 는 transition 이 걸리지 않기 때문이다.
 * ========================================================================= */
.stem_hl {
	--hl-base: #1E4A4E;              /* 기본 = 정맥주사(딥 아쿠아 틸) */
	position: relative;
	padding: 88px 0 94px;
	background-color: var(--hl-base);
	overflow: hidden;
	text-align: center;
	transition: background-color .6s ease;
}
.stem[data-tab="skin"]  .stem_hl { --hl-base: #3A3260; }   /* 피부주사 — 딥 라일락(뮤티드 인디고) */
.stem[data-tab="scalp"] .stem_hl { --hl-base: #26445F; }   /* 두피주사 — 딥 스카이블루(슬레이트) */
/* 배경 영상(2026-08-18 사용자 요청) — 탭 색 위에 반투명으로 얹어 색이 비쳐 나오게 한다.
 * ⚠ opacity 를 1 로 올리지 말 것 — 탭 색(--hl-base)이 완전히 가려져 세 탭이 똑같아 보인다.
 * ⚠ z-index 0(영상) < 1(질감·워터마크) < 2(카피) 순서를 유지할 것. */
.stem_hl__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .42;
	pointer-events: none;
}
/* 질감 오버레이 — 어떤 탭 색이 와도 같은 결(우상단 광택 → 좌상단 광원 → 하단 비네트)이 얹힌다.
   영상이 깔린 뒤로는 카피 가독성도 이 레이어가 함께 맡는다(중앙을 살짝 눌러 흰 글자를 띄운다). */
.stem_hl::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(120% 92% at 84% 6%,   rgba(255,232,196,.17) 0%, rgba(255,232,196,0) 56%),
		radial-gradient(92% 120% at 10% 0%,   rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 62%),
		radial-gradient(130% 86% at 50% 122%, rgba(0,0,0,.46)       0%, rgba(0,0,0,0)       62%),
		radial-gradient(78% 86% at 50% 44%,   rgba(0,0,0,.28)       0%, rgba(0,0,0,0)       78%),
		linear-gradient(148deg, rgba(255,255,255,.05) 0%, rgba(0,0,0,.12) 100%);
	pointer-events: none;
}
/* 배경 워터마크 — 면이 비어 보이지 않게 브랜드 이니셜을 크게 깐다 */
.stem_hl::before {
	content: 'JDH';
	position: absolute;
	right: -1%;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 340px;
	line-height: 1;
	letter-spacing: -10px;
	color: rgba(255,255,255,.055);
	pointer-events: none;
}
.stem_hl > .stem_inner { position: relative; z-index: 2; }
.stem_hl__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--sc-gold-lite);
}
.stem_hl__title {
	margin: 16px 0 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -1px;
	color: #fff;
	word-break: keep-all;
}
.stem_hl__title em { font-style: normal; color: var(--sc-gold-lite); }
.stem_hl__list {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
/* ⚠ 탭별 목록이 3개라 안 보이는 것은 hidden 으로 접는다. display:flex 가 hidden 의 기본
   display:none 을 덮어쓰므로 이 규칙이 없으면 세 목록이 한꺼번에 쌓여 보인다. */
.stem_hl__list[hidden] { display: none; }
.stem_hl__list li {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 22px 38px;
	border-radius: 12px;
	background: rgba(255,255,255,.96);
	font-size: var(--sc-t-lead);
	font-weight: 600;
	letter-spacing: -.3px;
	color: var(--sc-ink);
	box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
/* 체크 아이콘 — 이미지 없이 두 변만 남긴 사각형을 45° 돌려 만든다 */
.stem_hl__list i {
	flex: 0 0 auto;
	width: 17px;
	height: 10px;
	margin-top: -6px;
	border-left: 2.5px solid var(--sc-green);
	border-bottom: 2.5px solid var(--sc-green);
	transform: rotate(-45deg);
}

/* =========================================================================
 * 4. 치료 솔루션
 *    Figma 는 [이미지+제목+설명] 카드였으나 이미지가 모두 미확정(더미)이라,
 *    시술 설명이 먼저 읽히는 텍스트 카드로 구성했다.
 *    → 사진이 확보되면 .stem_card 상단에 미디어 블록을 추가하면 된다.
 * ========================================================================= */
.stem_sol { padding: 104px 0 110px; background: var(--sc-cream); }
.stem_sol__head { text-align: center; margin: 0 0 52px; }
.stem_sol__desc {
	margin: 20px auto 0;
	max-width: 900px;
	font-size: var(--sc-t-body);
	font-weight: 300;
	line-height: 1.75;
	color: rgba(28,30,26,.55);
	word-break: keep-all;
}
/* 2026-08-28 개편 — 에디토리얼 행 레이아웃 → **심프 카드**(사용자 지시: "스킨부스터처럼 카드 형식").
 * 스킨부스터(page_booster.css 의 .bst_card)와 **같은 규격**이다 — 한쪽만 고치지 말 것.
 * 직전(2026-08-10)에는 반대 방향이었다("카드 말고 세련되게") — 이번 지시가 그것을 대체했으니
 * 행 레이아웃으로 되돌리지 말 것. 넘버(.stem_card__no)도 마크업·CSS 에서 함께 제거했다.
 * ⚠ 이제 grid-area 배치가 아니라 **마크업 순서 그대로 흐르는** 세로 카드다(name → sub → txt → tags). */
.stem_sol__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 26px;
	max-width: 1120px;
	margin: 0 auto;
}
.stem_card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 40px 36px 36px;
	background: #fff;
	border: 1px solid var(--sc-line);
	border-radius: 12px;
	overflow: hidden;          /* 상단 액센트 바를 카드 라운드에 맞춰 잘라낸다 */
	transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
/* 상단 액센트 바 — hover 때만. ⚠ 바에 radius 를 주고 카드 밖으로 빼면 3px 높이에 라운드가
   그려지지 않아 모서리에서 직선으로 삐져나온다(booster 에서 겪은 문제) → overflow 로 자른다. */
.stem_card::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: var(--sc-green);
	opacity: 0;
	transition: opacity .35s ease;
}
.stem_card:hover::before { opacity: 1; }
/* 섹션 면이 크림이라 흰 카드만으로 이미 떠 보인다 → 들어올림은 얕게 */
.stem_card:hover {
	transform: translateY(-4px);
	border-color: rgba(59,88,67,.42);
	box-shadow: 0 20px 36px -24px rgba(59,88,67,.5);
}
.stem_card__no {
	display: none;   /* 넘버링 제거(2026-08-28) — 마크업에서도 뺐다. 되살리지 말 것 */
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 3.4px;
	line-height: 1;
	color: var(--sc-gold);
	transition: color .3s ease;
}
.stem_card__name {
	margin: 0;
	font-weight: 700;
	font-size: var(--sc-t-card);
	line-height: 1.34;
	letter-spacing: -.9px;
	color: var(--sc-ink);
	word-break: keep-all;
}
.stem_card__sub {
	margin: 10px 0 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -.2px;
	color: rgba(28,30,26,.45);
}
/* margin-bottom 은 아래 태그 줄이 margin-top:auto 로 바닥에 붙기 때문에 필요하다 —
   본문이 긴 카드에서 글과 태그가 맞닿는 것을 막는 최소 간격이다(짧은 카드에서는 auto 가 이긴다). */
.stem_card__txt {
	margin: 20px 0 22px;
	font-size: var(--sc-t-txt);
	font-weight: 400;
	line-height: 1.78;
	letter-spacing: -.2px;
	color: rgba(28,30,26,.68);
	word-break: keep-all;
}
/* 태그 — pill 을 없애고 얇은 구분선으로 나열. 알약이 늘어서면 카드 안이 시끄럽다.
   ⚠ margin-top:auto — 카드 높이가 그리드 행에 맞춰 늘어나므로 태그 줄을 바닥에 붙여야
     본문 길이가 제각각인 카드들의 태그 줄이 한 선에 놓인다. */
.stem_card__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 18px;
	margin: auto 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(28,30,26,.08);
}
.stem_card__tags i {
	position: relative;
	font-style: normal;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.1px;
	color: var(--sc-green);
}
.stem_card__tags i + i::before {
	content: '';
	position: absolute;
	left: -10px;
	top: 50%;
	width: 1px;
	height: 11px;
	margin-top: -5px;
	background: rgba(59,88,67,.28);
}

/* 인증 배지 — Figma 미라셀 탭의 FDA·NECA 로고 자리.
 * 2026-08-11 텍스트 배지(.stem_cert__mark) → 실제 로고 이미지로 교체. 설명 문구는 alt 로만 남겼다.
 * ⚠ 두 로고는 비율도 구성도 달라 높이를 같게 맞추면 NECA 가 작아 보인다
 *   (NECA 는 로고 아래 한글 한 줄이 붙어 있어 "NECA" 글자가 전체 높이의 절반 남짓).
 *   → FDA 46px / NECA 58px 로 **글자 크기가 비슷해 보이는 높이**를 따로 준다. 같은 값으로 통일하지 말 것. */
/* ⚠ 2026-08-11 pill 박스 제거(사용자 지시) — 로고를 배경 위에 그대로 놓고 크기를 키웠다.
 *   배경/테두리/그림자/min-width 를 되살리지 말 것. 두 로고를 가르는 건 얇은 세로선 하나뿐이다. */
.stem_cert {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 56px;
	margin: 44px 0 0;
}
.stem_cert__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.stem_cert__item + .stem_cert__item::before {
	content: '';
	position: absolute;
	left: -28px;
	top: 50%;
	width: 1px;
	height: 44px;
	margin-top: -22px;
	background: rgba(59,88,67,.18);
}
.stem_cert__item img {
	display: block;
	height: 66px;
	width: auto;
}
.stem_cert__item--neca img { height: 82px; }

/* =========================================================================
 * 5. 시술 과정 — 원형 디스크 (탭에 따라 4~5단계)
 *    ※ 이미지 박스 radius 8px 규칙의 의도된 예외(원형 디스크) — pore 와 동일
 * ========================================================================= */
.stem_process {
	padding: 104px 0 108px;
	background: #F2EEE7 url('/img/antiaging/stemcell/process_bg.jpg') center center / cover no-repeat;
}
/* 시술 과정 — 좌측 축(2026-08-04, 증상별 솔루션 4종과 동일 규격).
 * 페이지 안 헤더가 전부 가운데 정렬이면 섹션이 바뀌어도 같은 화면으로 읽힌다.
 * eyebrow 가 없는 섹션이라 짧은 골드 라인이 그 자리를 대신한다. */
.stem_process__head { text-align: left; max-width: none; margin: 0 0 56px; }
.stem_process__head::before {
	content: '';
	display: block;
	width: 44px;
	height: 2px;
	margin: 0 0 22px;
	background: linear-gradient(90deg, var(--sc-gold) 0%, rgba(194,168,120,.25) 100%);
}
.stem_process__desc {
	max-width: 760px;
	margin: 22px 0 0;
	font-size: var(--sc-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
/* 단계 수가 탭마다 달라(4~5개) auto-fit 으로 균등 분배한다 */
.stem_steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 20px;
}
.stem_step {
	position: relative;
	padding: 0 10px;
	text-align: center;
}
/* 단계 사이 점선 연결선은 사용자 지시로 제거(2026-08-03) — 원만 나열한다 */
.stem_step__disc {
	position: relative;
	display: block;
	width: 180px;
	max-width: 100%;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: #EDE7DC;
	box-shadow: 0 14px 30px rgba(76,64,44,.16);
	transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.stem_step__disc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 유리알 같은 얇은 링 — 원형 디스크가 배경에 묻히지 않게 */
.stem_step__disc::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.75);
	/* 2026-08-18 — STEP 04·05 처럼 배경이 밝은 컷이 오면 크림 면과 섞여 원의 윤곽이 사라진다.
	   골드 인셋 링을 한 단계 올려(.30 → .42) 어떤 사진이 와도 원형이 읽히게 했다(iv·booster 와 동일). */
	box-shadow: inset 0 0 0 1px rgba(194,168,120,.42);
	pointer-events: none;
}
.stem_step:hover .stem_step__disc {
	transform: translateY(-5px);
	box-shadow: 0 20px 38px rgba(76,64,44,.24);
}
.stem_step__no {
	margin-top: 22px;
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 3.4px;
	text-transform: uppercase;
	color: var(--sc-gold);
}
.stem_step__name {
	display: block;
	margin: 10px 0 0;
	font-weight: 600;
	font-size: var(--sc-t-lead);
	line-height: 1.44;
	letter-spacing: -.7px;
	color: var(--sc-ink);
	word-break: keep-all;
}

/* =========================================================================
 * 6. 차별화 진단 시스템 (탭 공통)
 * ========================================================================= */
.stem_diag {
	position: relative;
	padding: 104px 0 110px;
	background:
		radial-gradient(64% 58% at 18% 10%, rgba(194,168,120,.13) 0%, rgba(194,168,120,0) 64%),
		radial-gradient(58% 54% at 86% 88%, rgba(59,88,67,.08) 0%, rgba(59,88,67,0) 66%),
		linear-gradient(180deg, #FFFFFF 0%, #FBF8F2 100%);
	overflow: hidden;
}
.stem_diag__head { text-align: center; max-width: 1000px; margin: 0 auto; }
.stem_diag__desc {
	margin: 22px 0 0;
	font-size: var(--sc-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.stem_diag__label {
	margin: 54px 0 22px;
	text-align: center;
	font-size: var(--sc-t-lead);
	font-weight: 700;
	color: var(--sc-ink);
}
.stem_diag__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* 크림 단색 카드 → 반투명 유리(2026-08-05 사용자 요청 · wrinkle/pigment/lifting 과 동일 규격).
 * ⚠ 불투명도(.58)를 더 올리면 유리감이 사라지고 그냥 흰 카드가 된다. */
.stem_dev {
	position: relative;
	padding: 0 0 26px;
	background: rgba(255,255,255,.58);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	border: 1px solid rgba(255,255,255,.9);
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(28,30,26,.09), inset 0 1px 0 rgba(255,255,255,.95);
	overflow: hidden;
	text-align: center;
	transition: background .5s ease, box-shadow .5s ease;
}
.stem_dev:hover {
	background: rgba(255,255,255,.74);
	box-shadow: 0 20px 46px rgba(28,30,26,.13), inset 0 1px 0 #fff;
}
.stem_dev__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(233,229,220,.55);   /* 이미지 로드 전 폴백 — 유리 톤에 맞춰 반투명 */
	border-radius: 8px 8px 0 0;
}
.stem_dev__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stem_dev__name {
	display: block;
	margin: 24px 0 0;
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -.6px;
	color: var(--sc-ink);
}
.stem_dev__txt {
	margin: 10px 24px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.68;
	color: rgba(28,30,26,.58);
	word-break: keep-all;
}

/* =========================================================================
 * 7. 4대 강점 배너 (탭 공통)
 *    ⚠ 이 섹션의 폰트 크기는 Figma 원본(32 / 13) 유지였으나 2026-08-10 사용자 지시로 설명문만 16px 로 상향한다 — pore 와 동일 규칙.
 *      위 스케일 변수(--sc-t-*)를 여기에 적용하지 말 것.
 * ========================================================================= */
/* ⚠ 2026-08-10 — 제목(국내최대크기·프리미엄레이저…)을 걷어내고 문장만 남겼다(사용자 원고).
 *   제목 32px 이 빠진 만큼 ① 문장을 16→19px 로 키우고 ② 항목 사이에 세로 헤어라인을 넣는다.
 *   ※ 증상별 솔루션 4형제 + 항노화 3형제 **7개 페이지 공통 규격**이니 한쪽만 바꾸지 말 것. */
.stem_merit {
	padding: 66px 0 70px;
	background: #EFECE4 url('/img/antiaging/stemcell/cat_bg.jpg') center center / cover no-repeat;
}
.stem_merit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stem_merit__item { position: relative; padding: 0 30px; text-align: center; }
/* 칸 사이 구분선 — 첫 칸 왼쪽에는 붙지 않는다(인접 형제 선택자) */
.stem_merit__item + .stem_merit__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 64px;
	transform: translateY(-50%);
	background: rgba(28,30,26,.14);
}
/* 2026-08-11 가독성 상향(사용자 지시) — 19→21.5px / 500→600 / 색도 한 단 진하게.
   4대 강점 배너는 7개 페이지가 같은 규격이니 한쪽만 바꾸지 말 것. */
.stem_merit__item p {
	margin: 0;
	font-size: 21.5px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: -.4px;
	color: rgba(28,30,26,.86);
	word-break: keep-all;
}

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1440px) {
	.stem { --sc-t-h1: 42px; --sc-t-h2: 36px; --sc-t-card: 24px; }
	.stem_area__row { gap: 0 52px; }
	.stem_area__row + .stem_area__row { margin-top: 82px; }
	.stem_area__name { font-size: 29px; }
	.stem_step__disc { width: 164px; }
}

@media all and (max-width: 1200px) {
	.stem { --sc-t-h1: 38px; --sc-t-h2: 33px; --sc-t-lead: 18px; --sc-t-body: 17px; }
	.stem_hero { min-height: 430px; padding: 100px 0 96px; }
	.stem_area { padding: 84px 0 88px; }
	.stem_what { padding: 84px 0 88px; }
	.stem_ftz { padding: 132px 0 138px; }
	.stem_ftz__list { margin-top: 74px; }
	.stem_ftz__item { padding: 12px 26px 16px; }
	.stem_ftz__name { font-size: 24px; }
	/* 도식은 세 변수만 줄이면 비례가 유지된다(--fn-r*2 + --fn-node ≤ --fn-size) */
	.stem_fn { --fn-size: 800px; --fn-r: 296px; --fn-node: 205px; }
	.stem_fn__item { padding: 0 22px; }
	.stem_fn__item strong { font-size: 18px; }
	.stem_fn__txt { font-size: 13.5px; }
	.stem_fn__core { width: 236px; height: 236px; }
	.stem_fn__core-en { font-size: 31px; }
	/* 1열로 내려가면 지그재그가 의미가 없다 — 모든 행을 [사진 → 글] 순서로 되돌린다.
	   ⚠ order 를 되돌리지 않으면 짝수 행만 글이 위로 올라가 순서가 뒤죽박죽이 된다. */
	.stem_area__row { grid-template-columns: 1fr; gap: 36px 0; }
	.stem_area__row + .stem_area__row { margin-top: 72px; }
	.stem_area__row:nth-of-type(2n) .stem_area__media,
	.stem_area__row:nth-of-type(2n) .stem_area__body { order: 0; }
	.stem_area__head { margin-bottom: 52px; }
	.stem_area__name { font-size: 27px; }
	.stem_sol, .stem_process, .stem_diag { padding: 84px 0 88px; }
	.stem_steps { grid-template-columns: repeat(3, 1fr); gap: 34px 16px; }
	.stem_step__disc { width: 156px; }
	/* 카드는 auto-fit 이라 폭에 맞춰 알아서 접힌다 — 안쪽 여백만 줄인다 */
	.stem_sol__list { gap: 22px; }
	.stem_card { padding: 34px 28px 30px; }
}

@media all and (max-width: 1024px) {
	.stem_tabs { top: 60px; }             /* 헤더 높이 60px 구간 */
	/* 탭 3개는 좁은 화면에서 줄바꿈되므로 가로 스크롤로 전환한다 */
	.stem_tabs__inner { display: block; }
	.stem_tabs__list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.stem_tabs__list::-webkit-scrollbar { display: none; }
	.stem_tabs__note { display: none; }
	.stem_tab { padding: 15px 22px 13px; }
	.stem_diag__grid { grid-template-columns: 1fr 1fr; }
	/* 2열에서는 왼쪽 칸(1·3번째)의 구분선을 지운다 — 남기면 섹션 좌측에 선이 뜬다 */
	.stem_merit__grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
	.stem_merit__item:nth-child(2n+1)::before { display: none; }

	/* 기능 도식 — 좁은 화면에서 원형 궤도를 유지하면 노드가 서로 겹치고 글자가 뭉갠다
	   → 원형 배치를 통째로 풀고 [코어 → 사각 카드 6장 2열] 로 되돌린다.
	   ⚠ 아래 4가지를 모두 되돌려야 한다: 컨테이너의 정사각(aspect-ratio) · 궤도 링(::before)
	     · 노드의 absolute+transform · 코어의 absolute. 하나라도 남으면 카드가 겹쳐 보인다.
	   ⚠ display:contents 로 ul 을 풀어 li 를 그리드 셀로 올린다. 이 줄을 지우면 카드가
	     ul 한 덩어리로 남아 2열이 되지 않는다. */
	.stem_fn {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		width: auto;
		aspect-ratio: auto;
		margin-top: 44px;
	}
	.stem_fn::before { display: none; }
	.stem_fn__ring { position: static; display: contents; }
	.stem_fn__item {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 22px 26px;
		border-radius: 14px;
		align-items: flex-start;
		text-align: left;
		transform: none;
		box-shadow: 0 10px 24px rgba(76,64,44,.07);
	}
	.stem_fn__item:hover { transform: none; }
	.stem_fn__txt { font-size: var(--sc-t-txt); }
	.stem_fn__core {
		position: static;
		order: -1;
		grid-column: 1 / -1;
		justify-self: center;
		width: 200px;
		height: 200px;
		margin-bottom: 10px;
		transform: none;
	}
	.stem_fn__core::after { display: none; }
	.stem_fn__core-en { font-size: 28px; }
	/* 사진 카드 3장 — 3열을 유지하면 카드가 좁고 길어져 사진이 거의 안 보인다.
	   1열로 세우면서 세로 비율도 가로로 눕힌다(사진이 잘 보이는 쪽이 우선). */
	.stem_ftz { padding: 104px 0 110px; }
	.stem_ftz__list { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
	.stem_ftz__item { aspect-ratio: 16 / 9; }
	.stem_ftz__body { padding: 0 24px 30px; }
}

@media all and (max-width: 768px) {
	.stem { --sc-t-h1: 29px; --sc-t-h2: 26px; --sc-t-card: 21px; --sc-t-lead: 17px; --sc-t-body: 16px; --sc-t-txt: 15px; }
	.stem .stem_inner { padding: 0 24px; }
	.stem .stem_eyebrow { font-size: 14px; letter-spacing: 3.6px; }

	.stem_hero { min-height: 330px; padding: 72px 0 68px; }
	.stem_hero__eyebrow { font-size: 16px; }
	.stem_hero__desc { font-size: 15px; }
	.stem_hero__desc br { display: none; }

	.stem_tab__ko { font-size: 15px; }

	.stem_area { padding: 62px 0 66px; }
	.stem_area__row + .stem_area__row { margin-top: 56px; }
	.stem_area__name { font-size: 24px; }
	.stem_area__points li { padding: 12px 16px 12px 40px; font-size: 16px; }
	.stem_area__points li::before { left: 16px; }
	/* ⚠ 두피 뷰어 — 2026-09-02 공통 뷰어(jdh_ba.css)가 768↓ 에서도 split 을 **좌우 2열**로
	   유지하도록 바뀌면서, 여기 있던 세로 2행용 비율(0.66/1)은 필요 없어져 걷어냈다.
	   그대로 두면 칸이 152×468px 로 길쭉해져 가로형 두피 컷이 심하게 잘린다.
	   지금은 데스크톱 override(2.7/1 — 가로형 두 장 나란히)를 그대로 쓴다. 다시 넣지 말 것. */
	.stem_area__lead br { display: none; }
	.stem_area__note { margin-top: 40px; }
	.stem_what { padding: 62px 0 66px; }
	.stem_what__lead br { display: none; }
	.stem_ftz { padding: 78px 0 84px; }
	.stem_ftz__list { margin-top: 36px; gap: 16px; }
	/* 16:9 는 모바일 폭에서 너무 납작해 카피가 사진을 다 덮는다 — 정사각으로 세운다 */
	.stem_ftz__item { aspect-ratio: 1 / 1; }
	/* 카드가 작아진 만큼 카피가 차지하는 비율이 커진다 — 스크림 시작점을 위로 올려
	   글자가 사진 위에 반쯤 걸치지 않게 한다(PC 값 그대로 두면 이름이 세포 무늬 위에 얹힌다) */
	.stem_ftz__item::before {
		background: linear-gradient(180deg,
			rgba(255,253,248,0)   14%,
			rgba(255,253,248,.72) 40%,
			rgba(255,253,248,.97) 60%,
			rgba(255,253,248,1)   100%);
	}
	.stem_ftz__body { padding: 0 20px 26px; }
	.stem_ftz__name { font-size: 21px; padding-bottom: 10px; }
	/* PC 에서만 쓰는 줄바꿈 — 좁은 화면에서는 어색한 위치에서 끊긴다 */
	.stem_ftz__txt br { display: none; }
	/* 2026-08-12 — 배경 사진이 cover 라, 세로로 길어진 모바일 섹션(2,200px)에서는 세포 무늬가
	 * 통째로 확대돼 **카드 뒤를 큰 곡선이 가로지르는** 것처럼 보였다(사용자: "선이 이상하다").
	 * 2026-08-18 "꽤 선명하게" 요청으로 blur 는 걷어내고, 대신 사진을 눌러 + 흰 스크림을 올려
	 * 카드 6장이 배경에 묻히지 않게만 정리한다(PC 는 선명한 원본 그대로). */
	.stem_what::before { opacity: .8; }
	/* 어두운 섹션이므로 밝게 덮지 않는다 — 세로로 길어진 만큼 위아래를 조금 더 눌러 균일하게 간다
	   (여기서 흰 스크림을 쓰면 밝은 헤드 카피가 배경에 붙는다) */
	.stem_what::after {
		background:
			linear-gradient(180deg,
				rgba(var(--what-dark),.64) 0%,
				rgba(var(--what-dark),.56) 42%,
				rgba(var(--what-dark),.66) 100%),
			radial-gradient(120% 95% at 8% -8%, var(--what-tint) 0%, rgba(255,255,255,0) 62%),
			radial-gradient(115% 92% at 96% 104%, var(--what-tint) 0%, rgba(255,255,255,0) 58%);
	}
	/* 2026-08-12 — 기능 6장을 1열로 세우던 규칙을 걷어냈다. 카드가 [영문 라벨 + 이름 + 한 줄 설명]
	 * 정도라 2열에서도 읽히는데, 1열이면 이 블록만 1,060px 을 먹었다(코어 원까지 더하면 화면 1.5개).
	 * ⚠ 2열에서는 이름이 두 줄로 접히므로 패딩·글자를 함께 줄여야 카드 높이가 들쭉날쭉하지 않다. */
	/* ⚠ minmax(0,1fr) 이어야 두 열이 정확히 반씩 나뉜다. 1fr 은 최소 크기가 min-content 라
	 *   'IMMUNOMODULATION' 같은 긴 영문 라벨이 든 칸이 상대 칸을 밀어 154/172 처럼 어긋났다. */
	.stem_fn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
	.stem_fn__item { padding: 18px 16px; }
	.stem_fn__item strong { font-size: 16.5px; }
	.stem_fn__txt { font-size: 13.5px; line-height: 1.5; }
	.stem_fn__core { width: 176px; height: 176px; }
	.stem_fn__core-en { font-size: 25px; }
	.stem_hl { padding: 62px 0 66px; }
	.stem_hl::before { font-size: 210px; }
	.stem_hl__title { font-size: 25px; }
	.stem_hl__list { margin-top: 28px; gap: 12px; }
	.stem_hl__list li { gap: 11px; padding: 17px 24px; font-size: 17px; }
	.stem_hl__list i { width: 15px; height: 9px; }

	.stem_sol, .stem_process, .stem_diag { padding: 62px 0 66px; }
	.stem_sol__head { margin-bottom: 32px; }
	.stem_process__head { margin-bottom: 36px; }
	.stem_process__head::before { width: 34px; margin-bottom: 16px; }
	/* 카드 폭을 유지할 자리가 없다 — minmax 하한을 풀어 1열로 내린다 */
	.stem_sol__list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.stem_card { padding: 28px 22px 26px; border-radius: 10px; }
	.stem_card__txt  { margin: 16px 0 18px; }
	/* 1열에서는 카드 높이가 각자 정해지므로 바닥 정렬이 의미 없다 — 여백만 남기고 푼다 */
	.stem_card__tags { margin-top: 0; padding-top: 16px; }
	.stem_cert { gap: 34px; }
	.stem_cert__item + .stem_cert__item::before { left: -17px; height: 34px; margin-top: -17px; }
	.stem_cert__item img { height: 46px; }
	.stem_cert__item--neca img { height: 58px; }

	/* 2026-08-12 — 진행 5단계를 **가로 스와이프**로. 2열은 5개(홀수)라 마지막이 홀로 남고,
	 * 480 이하에서 쓰던 1열은 1,200px 을 먹었다. 번호가 붙은 순서형이라 옆으로 넘기는 흐름과 맞다.
	 * (증상별 솔루션 4종 .{pore,wr,lf,pg}_steps 와 같은 처리 — 사이트 안에서 동작을 통일한다)
	 * ⚠ 음수 마진(-24px)은 .stem_inner 의 좌우 패딩과 짝이다(480 이하는 18px → 아래 블록에서 다시 잡는다). */
	.stem_steps {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 62%;
		gap: 0 12px;
		margin: 0 -24px;
		padding: 0 24px 14px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
	}
	.stem_steps::-webkit-scrollbar { height: 3px; }
	.stem_steps::-webkit-scrollbar-track { background: rgba(60,68,78,.10); border-radius: 999px; }
	.stem_steps::-webkit-scrollbar-thumb { background: rgba(60,68,78,.34); border-radius: 999px; }
	.stem_step { padding: 0 4px; scroll-snap-align: start; }
	.stem_step__disc { width: 132px; }
	.stem_step__no { margin-top: 16px; }

	/* 진단 3종도 같은 이유로 가로 스와이프(1열 세로 나열은 1,030px 이었다) */
	.stem_diag__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		gap: 12px;
		margin: 0 -24px;
		padding: 0 24px 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
	}
	.stem_diag__grid::-webkit-scrollbar { height: 3px; }
	.stem_diag__grid::-webkit-scrollbar-track { background: rgba(60,68,78,.10); border-radius: 999px; }
	.stem_diag__grid::-webkit-scrollbar-thumb { background: rgba(60,68,78,.34); border-radius: 999px; }
	.stem_diag__grid > * { scroll-snap-align: center; }
	.stem_diag__label { margin: 38px 0 18px; }

	.stem_merit { padding: 50px 0 54px; }
	.stem_merit__item { padding: 0 16px; }
	.stem_merit__item p { font-size: 19px; }
}

@media all and (max-width: 480px) {
	.stem { --sc-t-h1: 25px; --sc-t-h2: 23px; }
	.stem .stem_inner { padding: 0 18px; }
	.stem_hero { min-height: 280px; padding: 58px 0 56px; }
	/* 가로 스와이프는 위 768 블록이 담당한다 — 여기서는 .stem_inner 패딩(18px)에 맞춰
	   음수 마진만 다시 맞춘다(어긋나면 첫 칸이 본문 축에서 밀린다). */
	.stem_steps,
	.stem_diag__grid { margin: 0 -18px; padding: 0 18px 14px; scroll-padding-left: 18px; }
	.stem_step__disc { width: 150px; }
	/* 2열에서는 문장이 두세 단어씩 끊긴다 → 1열로 풀고 세로 구분선도 없앤다 */
	.stem_merit__grid { grid-template-columns: 1fr; gap: 20px 0; }
	.stem_merit__item { padding: 0; }
	.stem_merit__item + .stem_merit__item::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.stem_card,
	.stem_card::before,
	.stem_tabs__ink { transition: none; }
	.stem .is-swap { animation: none; }
	.stem_card:hover { transform: none; }
}