@charset "utf-8";
/* =========================================================================
 * 항노화 / 스킨부스터 > 한·양방 스킨부스터 (www/antiaging/booster.jsp 전용)
 * Figma node 463:462 (1920w light)
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 * 선택자는 모두 .bst 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ── 형제 페이지(JDH 줄기세포)와의 관계 ────────────────────────────────
 * 구조·조형은 page_stemcell.css 를 그대로 계승한다(사용자 요청).
 * 탭(3개) · 개요+Before&After · 제품 카드 · 시술 과정 원형 · 진단 시스템 · 4대 강점 배너까지
 * 같은 언어를 쓰고, **히어로만 색과 배경을 달리해 페이지를 구별**한다.
 *   · 줄기세포 = 딥 그린 + 분자 그래픽(juvegen sec2_bg)
 *   · 스킨부스터 = 딥 브론즈 + 실크 드레이프(brand/story precision_bg → booster/hero_silk.jpg)
 * 본문 액센트(그린·골드)는 사이트 통일성을 위해 형제 페이지와 동일하게 둔다.
 *
 * ── 타이포 스케일 ────────────────────────────────────────────────────
 * 46(h1) / 40(h2) / 26(카드명) / 19(리드) / 18(본문) / 16(설명)
 * ※ 최하단 4대 강점 배너 `.bst_merit` 는 Figma 원본 크기(32 / 13) 유지 → 2026-08-10 설명문만 16px 로 상향
 * ========================================================================= */

/* 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');

.bst {
	--bs-green:      #3B5843;
	--bs-ink:        #1C1E1A;
	--bs-gold:       #C2A878;
	--bs-gold-lite:  #D8C49A;
	--bs-cream:      #FBF9F2;
	--bs-line:       #E7E2D8;
	--bs-paper:      #FFFDF8;

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

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

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

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

/* =========================================================================
 * 1. 히어로 — 라이트 크림 스튜디오 (2026-08-10 전면 교체)
 *    배경 이미지: /img/jd_skinbooster_bg.png (3719x1576, 사용자 지정)
 *    ⚠ **톤이 뒤집혔다.** 이전에는 딥 브론즈 다크 배경 + 실크 컷을 screen 으로 얹고
 *      흰 카피를 올렸는데, 새 컷은 밝은 크림 스튜디오라 그 처리를 그대로 두면
 *      ① screen + brightness/contrast 가 이미지를 하얗게 날려버리고
 *      ② 흰 카피가 밝은 벽면에 묻힌다.
 *      그래서 filter·mix-blend-mode·다크 그라데이션을 전부 걷고 **글자를 먹으로** 내렸다.
 *      다크 톤으로 되돌리려면 배경·블렌드·카피 색 셋을 함께 되돌려야 한다.
 *    ⚠ 원본 비율이 2.36:1 로 가로가 길다. cover 라 좁은 화면에서는 좌우가 잘리는데,
 *      피사체(우측 커튼·골드 오브제)가 오른쪽에 몰려 있어 position 을 center 로 두면
 *      모바일에서 벽면만 남는다 → 1024↓ 에서 우측을 살리도록 따로 잡아 준다.
 * ========================================================================= */
.bst_hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 520px;          /* 카테고리 대표 페이지답게 세로 존재감을 준다 */
	padding: 132px 0 128px;
	text-align: center;
	background: #F3E9DC url('/img/jd_skinbooster_bg.png') center center / cover no-repeat;
	overflow: hidden;
}
/* 카피 뒤 스크림 — 밝은 배경이라 어둡게 누르는 대신 **흰 베일**을 깐다.
 * 벽면 자체가 밝아 먹 글자는 이미 읽히지만, 우측 커튼·바닥 반사와 겹치는 구간에서
 * 획이 흐려져 아주 옅은 크림 베일로 중앙을 정리한다.
 * ⚠ 불투명도를 올리면 사진이 뿌예진다 — .34 이상 가지 말 것. */
.bst_hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(66% 82% at 50% 50%, rgba(255,251,244,.34) 0%, rgba(255,251,244,.14) 54%, rgba(255,251,244,0) 80%),
		linear-gradient(180deg, rgba(255,251,244,.30) 0%, rgba(255,251,244,0) 24%);
	pointer-events: none;
}
.bst_hero > .bst_inner { position: relative; z-index: 1; width: 100%; }
/* ⚠ 밝은 배경으로 바뀌면서 카피를 흰색 → 먹으로 내렸다(2026-08-10).
   그림자도 어두운 그림자가 아니라 **흰 헤일로**다 — 밝은 사진 위에서 획을 띄우는 역할.
   배경을 다시 어둡게 하면 이 셋(색·그림자·위 스크림)을 함께 되돌릴 것. */
.bst_hero__eyebrow {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .3px;
	color: #8A6F43;
	text-shadow: 0 1px 12px rgba(255,251,244,.9);
	word-break: keep-all;
}
.bst_hero__title {
	margin: 18px 0 0;
	font-weight: 800;
	font-size: var(--bs-t-h1);
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #241C12;
	text-shadow: 0 2px 16px rgba(255,251,244,.85);
}
.bst_hero__desc {
	margin: 22px auto 0;
	max-width: 900px;
	font-size: var(--bs-t-body);
	font-weight: 400;
	line-height: 1.8;
	color: rgba(36,28,18,.78);
	text-shadow: 0 1px 12px rgba(255,251,244,.9);
	word-break: keep-all;
}

/* =========================================================================
 * 2. 주제 탭 — 헤더(72px) 아래 고정되는 세그먼트 네비게이션
 *    Figma 는 퀵네비(앵커 이동) 3개 + 제품별 세로 나열이었다 →
 *    형제 페이지(줄기세포)와 같은 탭 전환 구조로 통일해, 스크롤 길이를 1/3 로 줄였다.
 * ========================================================================= */
.bst_tabs {
	position: sticky;
	top: 72px;
	z-index: 20;
	background: rgba(255,253,248,.94);
	border-bottom: 1px solid var(--bs-line);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* 고정(stuck) 상태 — 스크롤로 헤더 아래에 붙은 뒤에만 적용한다(2026-08-28 사용자 지시:
   "스크롤 내려서 고정될 때 색상을 가독성 좋게, 맨 위 상태는 그대로").
   ⚠ 맨 위에서는 히어로와 이어지는 반투명 크림이 디자인이므로 위 기본 규칙을 건드리지 말 것.
   ⚠ .is-stuck 은 CSS 만으로 판별할 수 없다 — booster.jsp 의 syncStuck() 이 붙인다.
     (sticky 요소는 붙어도 선택자가 바뀌지 않는다.) */
.bst_tabs.is-stuck {
	background: #FFFDF8;                       /* 반투명 → 불투명. 뒤 사진이 비쳐 글자가 흐려지던 것을 막는다 */
	border-bottom-color: rgba(28,30,26,.14);   /* 헤어라인을 한 단계 진하게 — 헤더와의 경계가 읽힌다 */
	box-shadow: 0 8px 20px -16px rgba(28,30,26,.55);
}
/* 글자 대비도 함께 올린다 — 배경만 불투명하게 하면 비활성 탭이 여전히 흐리다 */
.bst_tabs.is-stuck .bst_tab__ko { color: rgba(28,30,26,.62); }
.bst_tabs.is-stuck .bst_tab__en { color: rgba(28,30,26,.46); }
.bst_tabs.is-stuck .bst_tab.is-on .bst_tab__ko { color: var(--bs-green); }
.bst_tabs.is-stuck .bst_tab.is-on .bst_tab__en { color: var(--bs-gold); }
.bst_tabs.is-stuck .bst_tabs__note { color: rgba(28,30,26,.52); }
/* 2026-08-10 — 탭을 가운데 정렬로 바꿨다(사용자 요청).
   안내 문구가 흐름에 있으면 탭이 왼쪽으로 밀리므로 문구만 절대 위치로 빼낸다.
   (1024↓ 에서는 inner 가 block 으로 풀리고 문구는 숨겨지므로 이 규칙이 무력화된다) */
.bst_tabs__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}
.bst_tabs__list { position: relative; display: flex; }
.bst_tab {
	position: relative;
	padding: 18px 30px 16px;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	transition: color .25s ease;
}
.bst_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;
}
.bst_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;
}
.bst_tab.is-on .bst_tab__ko { color: var(--bs-green); }
.bst_tab.is-on .bst_tab__en { color: var(--bs-gold); }
.bst_tab:hover .bst_tab__ko { color: var(--bs-ink); }
.bst_tabs__ink {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--bs-green);
	transition: left .38s cubic-bezier(.22,.61,.36,1), width .38s cubic-bezier(.22,.61,.36,1);
}
.bst_tabs__note {
	position: absolute;
	right: 40px;              /* .bst_inner 의 좌우 패딩과 같은 값 */
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-size: 13px;
	color: rgba(28,30,26,.4);
}
.bst [data-tab-panel][hidden] { display: none; }

/* =========================================================================
 * 3. 개요 + Before & After
 *    좌 = 제품 개요 카피(탭별) / 우 = 전후 뷰어(공통 컴포넌트 jdh_ba)
 * ========================================================================= */
.bst_over {
	position: relative;
	padding: 104px 0 108px;
	background:
		radial-gradient(58% 68% at 82% 12%, var(--bs-ov-glow1) 0%, rgba(194,168,120,0) 62%),
		radial-gradient(52% 62% at 6% 90%,  var(--bs-ov-glow2) 0%, rgba(59,88,67,0)   64%),
		linear-gradient(162deg, var(--bs-ov-a) 0%, var(--bs-ov-b) 48%, var(--bs-ov-c) 100%);
	border-bottom: 1px solid var(--bs-ov-line);
	overflow: hidden;
}
/* 제품별로 면의 색을 바꿔, 탭을 옮겼다는 것이 색으로도 읽히게 한다.
 * ⚠ 2026-08-18 팔레트 전면 교체 — 기존 [앰버 / 소프트 그린 / 쿨 블루그레이 / 더스티 로즈]는
 *   히어로(웜 크림 스튜디오 컷)와 온도가 부딪혔다(사용자: "보라·연두·하늘색은 안 어울린다").
 *   → **네 탭 모두 웜 뉴트럴**로 통일하고, 색상(hue)만 노랑 → 샌드 → 모카 → 로즈로 옮겨 구분했었다.
 * ⚠ 2026-08-28 이전에는 개요 면과 키포인트 배너(--hl-base)가 한 세트로 같은 계열이었지만,
 *   지금은 **갈라져 있다** — 면은 제품 컷을, 배너는 그 배경 사진(웜 크림 인물)을 따라간다.
 *   아래 --hl-base 규칙의 주석을 함께 볼 것.
 *
 * ── 2026-08-28 재교체 (사용자 지시: "제품의 색상과 비슷한 색으로", **미주안 제외**) ──
 *   이 섹션 우측이 전후 사진에서 **제품 컷**으로 바뀌면서 면 색을 그 제품의 지배색에서 가져온다.
 *   쥬베룩 = 스테인리스 실버 + 블루 캡 / 리쥬란 = 블랙 패키지 + 틸 포인트 / 리투오 = 코랄 오렌지 박스.
 *   ⚠ 이는 위 2026-08-18 의 "웜 뉴트럴 통일 · 쿨톤 금지"를 **이번 지시로 대체한 것**이다.
 *     그때 쿨톤을 뺀 이유는 면이 웜 크림 히어로와 부딪혀서였는데, 지금은 면이 제품 컷을 받치는
 *     역할이라 근거가 달라졌다. 웜 뉴트럴로 되돌리지 말 것.
 *   ⚠ 다만 그때의 지적("보라·연두·하늘색은 안 어울린다")을 감안해 **채도는 최대한 낮춰** 뉴트럴에
 *     가깝게 둔다. 더 선명하게 올리지 말 것 — 면이 제품 사진보다 튀면 안 된다.
 *   ⚠ 미주안은 처음엔 제품 컷이 없어 제외했다가, 같은 날 컷을 받아 네 탭 모두 제품색으로 맞췄다. */
.bst {
	/* 미주안 — 흰 패키지 + 버밀리언 트레이(2026-08-28 제품 컷 지급으로 앰버에서 교체).
	   ⚠ 면 전체를 주황으로 물들이면 리투오(코랄)와 구별이 안 된다 → **면은 패키지의 흰/웜 그레이**를
	     따르고, 트레이의 버밀리언은 글로우에만 쓴다. 면 색을 주황 쪽으로 더 밀지 말 것. */
	--bs-ov-glow1: rgba(217,65,39,.16);
	--bs-ov-glow2: rgba(150,60,40,.10);
	--bs-ov-a: #FBF7F5;
	--bs-ov-b: #F5EEEA;
	--bs-ov-c: #EDE2DC;
	--bs-ov-line: rgba(196,120,96,.28);
}
/* 쥬베룩 — 스테인리스 실버 (제품 컷의 메탈 배경 + 블루 캡에서 뽑았다) */
.bst[data-tab="juvelook"] {
	--bs-ov-glow1: rgba(148,164,180,.20);   /* 캡의 블루 — 하이라이트에만 쓴다 */
	--bs-ov-glow2: rgba(104,118,132,.13);
	--bs-ov-a: #F7F8FA;
	--bs-ov-b: #EEF1F4;
	--bs-ov-c: #E2E7EC;
	--bs-ov-line: rgba(142,158,172,.30);
}
/* 리쥬란 — 틸 그레이 (블랙 패키지의 청록 포인트 + 배경 대리석) */
.bst[data-tab="rejuran"] {
	--bs-ov-glow1: rgba(116,166,162,.20);
	--bs-ov-glow2: rgba(66,94,94,.13);
	--bs-ov-a: #F5F9F8;
	--bs-ov-b: #EAF1F0;
	--bs-ov-c: #DBE7E5;
	--bs-ov-line: rgba(118,156,152,.30);
}
/* 리투오 — 코랄 피치 (오렌지 박스 + 크림 실크 배경) */
.bst[data-tab="re2o"] {
	--bs-ov-glow1: rgba(230,152,112,.24);
	--bs-ov-glow2: rgba(176,96,64,.14);
	--bs-ov-a: #FDF6F0;
	--bs-ov-b: #FAEBE0;
	--bs-ov-c: #F4DCCC;
	--bs-ov-line: rgba(214,150,114,.32);
}
/* 오버레이: 사선 스트라이프 무늬 → 부드러운 그라데이션으로 교체(2026-08-03, 사용자 요청).
   무늬 없이도 면이 밋밋하지 않도록 상단/하단에 옅은 화이트 빛만 얹는다. */
.bst_over::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;
}
.bst_over > .bst_inner { position: relative; z-index: 1; }
.bst_over__grid {
	display: grid;
	grid-template-columns: minmax(300px, 470px) 1fr;
	gap: 0 78px;
	align-items: center;
}
/* 개요 카피는 넓은 1단 영역에 놓여 카드 본문(--bs-t-txt)과 같은 크기면 작아 보인다
   → 한 단계 위인 --bs-t-body 를 쓴다(2026-08-03, 줄기세포·수액테라피와 동일 규격). */
.bst_over__desc {
	margin: 24px 0 0;
	font-size: var(--bs-t-body);
	font-weight: 400;
	line-height: 1.85;
	color: rgba(28,30,26,.72);
	word-break: keep-all;
}
/* ※ 개요 옆 포인트 목록(.bst_over__points)은 2026-08-05 사용자 요청으로 걷어내고
 *   개선 포인트 배너(.bst_hl)의 탭별 칩으로 옮겼다. 마크업도 함께 제거했다. */
.bst_over__note {
	margin: 30px 0 0;
	font-size: 14px;
	color: rgba(28,30,26,.48);
}
.bst_over__viewer .jdh_ba {
	--ba-ink:   var(--bs-ink);
	--ba-green: var(--bs-green);
	--ba-gold:  var(--bs-gold);
	--ba-line:  var(--bs-line);
}
/* 제품 컷 (2026-08-28) — 전후 사진을 대신한다. 탭별로 컷이 확보된 제품만 이 형식으로 간다.
   ⚠ [hidden] 규칙이 반드시 있어야 한다 — display 를 지정하는 순간 hidden 의 기본값이 덮여
     탭을 바꿔도 사라지지 않는다(이 페이지의 .bst_hl__list 에서 이미 겪은 문제).
   ⚠ **박스는 1:1 고정**이다. 탭마다 비율이 다르면 전환할 때 박스 높이가 출렁인다.
     리쥬란(1432x1448)·리투오(2054x2048)가 정사각이라 그쪽에 맞췄고, 저장할 때 중앙 정사각
     크롭 + 900px 리사이즈 + JPEG q90 을 거쳤다(원본은 2.8MB·5MB 라 그대로 쓰면 안 된다).
   ⚠ 폭을 그리드 전폭(약 850px)까지 늘리면 흐려진다(쥬베룩 원본이 545px) → max-width 로 묶는다. */
.bst_prod {
	display: block;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;          /* 이미지 박스 공통 규격 */
	background: linear-gradient(160deg, #F4F3F1 0%, #E8E7E4 100%);   /* 로드 전 톤 */
}
.bst_prod[hidden] { display: none; }
.bst_prod img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* ⚠ 쥬베룩만 원본이 가로형(545x454)이라 1:1 박스에서 좌우가 잘린다.
   병 두 개가 오른쪽에 몰려 있고 왼쪽은 회색 여백이므로 **오른쪽 정렬**로 두어야
   잘리는 쪽이 여백이 된다. center 로 되돌리면 우측 병의 몸통이 잘린다. */
.bst_prod--juvelook img { object-position: right center; }

/* =========================================================================
 * 3-1. 개선 포인트 배너 (제품 라인업 앞) — 2026-08-05 사용자 요청
 *      증상별 솔루션 4형제의 `_hl` 섹션을 그대로 가져오되, 배경만 그린이 아니라
 *      **탭 색**으로 간다(사용자 지시). 루트 [data-tab] 이 바뀌면 --hl-base 가 갈아끼워진다.
 *      ⚠ 색 전환을 부드럽게 하려고 베이스는 background-color(단색)로 두고, 질감(광원·비네트)은
 *        ::after 오버레이로 고정했다. gradient 는 transition 이 걸리지 않기 때문이다.
 * ========================================================================= */
/* 2026-08-18 — 단색 배경에 사용자 지급 사진(www/img/skinbooster_bg.png)을 깔았다.
 * ⚠ 인물 클로즈업이라 **어두운 배너 톤을 유지**한다(카피 흰색·칩 흰 면 그대로).
 *   중간에 크림톤 스튜디오 컷(jd_skinbooster_bg)으로 짰다가 사진이 인물로 교체되어 되돌린 것이다 —
 *   밝은 사진이 다시 오면 배경·카피·칩 색을 **세트로** 함께 뒤집을 것. 한쪽만 바꾸면 글자가 안 읽힌다.
 * ⚠ 탭 색(--hl-base)은 사진 위 오버레이 색으로 계속 살아 있다. 알파를 .5 아래로 내리지 말 것 —
 *   얼굴 위에 흰 카피가 얹히므로 대비가 무너진다.
 * ⚠ 이미지는 원본 PNG 대신 q88 JPG 를 쓴다. 2026-08-20 사진 교체분은 원본이 3588x1184 로 커져
 *   **1920x634 (95KB)** 로 줄여 저장했다(옛 판은 원본이 1512폭이라 그대로 썼다).
 *   원본보다 크게 늘려 저장하지 말 것 — 용량만 늘고 화질은 나빠진다.
 * ⚠ 사진 구도가 [좌측 여백 + 우측 인물] 이다. background-position 을 right 로 고정하고
 *   오버레이를 **왼쪽만 진하게** 걸어, 가운데 카피는 어두운 면 위에 앉고 인물은 우측에 남게 했다.
 *   position 을 center 로 되돌리면 인물이 카피 뒤로 들어와 글자와 겹친다. */
.bst_hl {
	--hl-base: 74,53,36;             /* 기본 = 미주안(딥 브론즈) — 오버레이용이라 RGB 만 */
	position: relative;
	padding: 132px 0 138px;          /* 2026-08-18 사용자 승인으로 세로를 키웠다(기존 88/94) */
	/* ?v= 는 캐시 무효화용 — 같은 파일명으로 사진을 갈면 이 값도 올릴 것.
	 * ⚠ 2026-08-20 사용자 지시("모델이 크게 보여도 되니 더 오른쪽에") — `cover` 를 버리고
	 *   **폭 124% 확대 + left 정렬**로 바꿨다. 원리: 사진 구도가 [좌 여백 | 우 인물] 이라
	 *   확대해서 왼쪽부터 붙이면 잘리는 쪽이 **인물의 바깥쪽(머리카락)** 이고 얼굴은 우측으로 밀린다.
	 *   `right` 정렬로 되돌리면 잘리는 쪽이 좌측 여백이라 인물이 되레 화면 가운데로 들어온다. */
	background: #3A2A1E url('/img/antiaging/booster/hl_bg.jpg?v=20260820') left center / 138% auto no-repeat;
	overflow: hidden;
	text-align: center;
}
/* ⚠ **이 배너만은 웜 계열을 유지한다**(2026-08-28 사용자 지시: "이 부분은 색상 전처럼").
   개요 면(--bs-ov-*)을 제품 색으로 바꾸면서 여기도 같이 쿨톤(딥 스틸·딥 틸)으로 옮겼다가
   되돌린 값이다. 이유: 배너 배경이 **웜 크림 톤의 인물 클로즈업 사진**이라, 그 위에 쿨 오버레이를
   깔면 피부색이 탁하게 죽는다. 면 색은 제품을, 배너 색은 사진을 따라간다 —
   여기가 개요 면과 계열이 갈리는 유일한 지점이니 "세트로 맞춘다"며 다시 쿨톤으로 끌고 오지 말 것.
   ⚠ 알파가 .5 아래로 내려가면 흰 카피가 안 읽힌다 — 명도만 낮게 유지할 것. */
.bst[data-tab="juvelook"] .bst_hl { --hl-base: 82,62,44; }   /* 쥬베룩 — 딥 샌드브라운 */
.bst[data-tab="rejuran"]  .bst_hl { --hl-base: 70,52,44; }   /* 리쥬란 — 딥 모카 */
.bst[data-tab="re2o"]     .bst_hl { --hl-base: 78,44,42; }   /* 리투오 — 딥 로즈우드 */
/* 탭 색 오버레이 — 좌 → 우로 옅어져 우측 인물이 살아난다.
   ⚠ 2026-08-18 사용자 요청으로 전체 알파를 한 단계 낮췄다(.86/.80/.62/.40 → 아래 값).
     더 내리면 가운데 흰 카피가 얼굴 위에서 읽히지 않는다 — 좌측 .70 아래로 가지 말 것. */
.bst_hl::after {
	content: '';
	position: absolute;
	inset: 0;
	/* 2026-08-20 사진 교체 — 새 컷은 인물이 이전보다 **가운데까지 들어와** 카피와 겹친다.
	   카피가 앉는 좌측~중앙만 한 단계 올리고, 우측(얼굴)은 그대로 둬 인물을 살린다. */
	background:
		linear-gradient(90deg,
			rgba(var(--hl-base),.80) 0%,
			rgba(var(--hl-base),.74) 42%,
			rgba(var(--hl-base),.48) 72%,
			rgba(var(--hl-base),.24) 100%),
		linear-gradient(180deg, rgba(var(--hl-base),.16) 0%, rgba(var(--hl-base),0) 34%, rgba(var(--hl-base),.22) 100%);
	pointer-events: none;
	transition: background .6s ease;
}
/* ⚠ 배경 워터마크(JDH)는 2026-08-18 사용자 지시로 뺐다 — 되살리지 말 것.
   배경이 단색이던 시절 빈 면을 채우려던 장치라, 인물 사진이 깔린 지금은 얼굴 위에 겹쳐 지저분하다. */
.bst_hl > .bst_inner { position: relative; z-index: 2; }
/* ⚠ 카피 색은 배경과 세트다 — 배경 사진을 밝은 것으로 바꾸면 이 셋도 어둡게 함께 뒤집을 것 */
.bst_hl__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--bs-gold-lite);
}
.bst_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;
}
.bst_hl__title em { font-style: normal; color: var(--bs-gold-lite); }
.bst_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 을 덮어쓰므로 이 규칙이 없으면 세 목록이 한꺼번에 쌓여 보인다. */
.bst_hl__list[hidden] { display: none; }
.bst_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(--bs-t-lead);
	font-weight: 600;
	letter-spacing: -.3px;
	color: var(--bs-ink);
	box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
/* 체크 아이콘 — 이미지 없이 두 변만 남긴 사각형을 45° 돌려 만든다 */
.bst_hl__list i {
	flex: 0 0 auto;
	width: 17px;
	height: 10px;
	margin-top: -6px;
	border-left: 2.5px solid var(--bs-green);
	border-bottom: 2.5px solid var(--bs-green);
	transform: rotate(-45deg);
}

/* =========================================================================
 * 4. 제품 라인업 — 텍스트 카드 (형제 페이지의 치료 솔루션 자리)
 *    Figma 카드에는 제품 사진이 있었으나 전부 미확정 더미(풍경컷)라 텍스트 카드로 구성.
 *    사진 확보 시 .bst_card 상단에 미디어 블록을 얹으면 된다.
 * ========================================================================= */
.bst_sol { padding: 104px 0 110px; background: var(--bs-cream); }
.bst_sol__head { text-align: center; margin: 0 0 52px; }
.bst_sol__desc {
	margin: 20px auto 0;
	max-width: 900px;
	font-size: var(--bs-t-body);
	font-weight: 300;
	line-height: 1.75;
	color: rgba(28,30,26,.55);
	word-break: keep-all;
}
/* 2026-08-28 개편 — 에디토리얼 행 레이아웃 → **심플 카드**(사용자 지시: "심플한 카드 형식으로,
 * 넘버링은 빼줘"). 직전(2026-08-10)에는 반대 방향이었다("카드 말고 세련되게") — 이번 지시가 그것을
 * 대체한 것이니 행 레이아웃으로 되돌리지 말 것.
 * ⚠ 넘버(.bst_card__no)는 마크업·CSS 모두 제거했다. 되살리지 말 것.
 * ⚠ 이제 grid-area 배치가 아니라 **마크업 순서 그대로 흐르는** 세로 카드다
 *   (name → sub → txt → tags). 순서를 바꾸면 그대로 화면에 반영된다.
 * ⚠ 줄기세포 페이지(page_stemcell.css 의 .stem_card)는 예전 행 레이아웃 그대로다 —
 *   이번 지시 범위가 스킨부스터뿐이라 일부러 두 페이지의 규격이 갈렸다. */
.bst_sol__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 26px;
	max-width: 1120px;
	margin: 0 auto;
}
.bst_card {
	/* hover 색 (2026-08-28 사용자 지시: "효과의 색상은 제품의 색상과 동일하게").
	   값은 실제 제품 컷(img/antiaging/booster/prod_*.jpg)에서 픽셀을 뽑아 평균 낸 것이다 —
	   눈대중으로 고치지 말고, 컷이 갈리면 같은 방식으로 다시 뽑을 것.
	   기본값은 미주안용 골드다(제품 컷이 아직 없어 페이지 기본색을 쓴다). */
	--bs-card-hi: 196,164,105;   /* 폴백(페이지 골드) — 네 탭 모두 아래에서 제품색으로 덮는다 */
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 40px 36px 36px;
	background: #fff;
	border: 1px solid var(--bs-line);
	border-radius: 12px;
	overflow: hidden;          /* 상단 액센트 바를 카드 라운드에 맞춰 잘라낸다(::before 주석 참조) */
	transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.bst[data-tab="mijuan"]   .bst_card { --bs-card-hi: 217,65,39; }    /* 미주안 = 패키지 트레이의 버밀리언 */
.bst[data-tab="juvelook"] .bst_card { --bs-card-hi: 72,96,125; }    /* 쥬베룩 = 바이알 뚜껑의 블루 */
.bst[data-tab="rejuran"]  .bst_card { --bs-card-hi: 26,148,149; }   /* 리쥬란 = 패키지 로고의 틸 */
.bst[data-tab="re2o"]     .bst_card { --bs-card-hi: 240,123,86; }   /* 리투오 = 박스면의 코랄 */
/* 상단 액센트 바 — hover 때만 나타난다.
   ⚠ 바에 border-radius 를 주고 카드 밖으로(-1px) 빼는 방식은 쓰지 말 것 —
     3px 높이에 12px 라운드는 그려지지 않아 **모서리에서 바가 직선으로 삐져나온다**(2026-08-28 지적).
     대신 카드에 overflow:hidden 을 주고 바는 안쪽에 딱 맞춰, 카드의 라운드가 바를 잘라내게 한다.
     box-shadow 는 요소 바깥이라 overflow:hidden 에 잘리지 않으므로 hover 그림자는 그대로 나온다. */
.bst_card::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: rgb(var(--bs-card-hi));
	opacity: 0;
	transition: opacity .35s ease;
}
.bst_card:hover::before { opacity: 1; }
/* 섹션 면이 크림이라 흰 카드만으로 이미 떠 보인다 → 들어올림은 얕게, 색으로 반응을 준다 */
.bst_card:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--bs-card-hi), .55);
	box-shadow: 0 20px 36px -24px rgba(var(--bs-card-hi), .55);
}
.bst_card__name {
	margin: 0;
	font-weight: 700;
	font-size: var(--bs-t-card);
	line-height: 1.34;
	letter-spacing: -.9px;
	color: var(--bs-ink);
	word-break: keep-all;
}
.bst_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 가 이긴다). */
.bst_card__txt {
	margin: 20px 0 22px;
	font-size: var(--bs-t-txt);
	font-weight: 400;
	line-height: 1.78;
	letter-spacing: -.2px;
	color: rgba(28,30,26,.68);
	word-break: keep-all;
}
/* 해시태그 — Figma 원본의 #모공지우개 형식은 유지하되 pill 은 뺀다(알약이 늘어서면 카드 안이 시끄럽다).
   ⚠ margin-top:auto — 카드 높이가 그리드 행에 맞춰 늘어나므로, 태그 줄을 바닥에 붙여야
     본문 길이가 제각각인 카드들의 태그 줄이 한 선에 놓인다. */
.bst_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);
}
.bst_card__tags i {
	position: relative;
	font-style: normal;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.1px;
	color: var(--bs-green);
}
.bst_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);
}

/* =========================================================================
 * 5. 시술 과정 — 원형 디스크 (탭 공통 4단계)
 *    ※ Figma 원본에는 없는 섹션이다. 형제 페이지와 구조를 맞추라는 요청에 따라
 *      한·양방 부스터 공통 진료 흐름으로 신설했다(제품별로 갈리지 않는 공통 과정).
 * ========================================================================= */
.bst_process {
	padding: 104px 0 108px;
	background: #F2EEE7 url('/img/antiaging/booster/process_bg.jpg') center center / cover no-repeat;
}
/* 시술 과정 — 좌측 축(2026-08-04, 증상별 솔루션 4종과 동일 규격).
 * 페이지 안 헤더가 전부 가운데 정렬이면 섹션이 바뀌어도 같은 화면으로 읽힌다.
 * eyebrow 가 없는 섹션이라 짧은 골드 라인이 그 자리를 대신한다. */
.bst_process__head { text-align: left; max-width: none; margin: 0 0 56px; }
/* 타이틀의 제품명 강조 (2026-08-28, 탭별 타이틀과 한 세트).
   ⚠ 이 섹션은 밝은 크림 면이라 --bs-gold-lite(.bst_hl__title em 의 값)는 날아간다 → 그린. */
.bst_process__head .bst_title em { font-style: normal; color: var(--bs-green); }
.bst_process__head::before {
	content: '';
	display: block;
	width: 44px;
	height: 2px;
	margin: 0 0 22px;
	background: linear-gradient(90deg, var(--bs-gold) 0%, rgba(194,168,120,.25) 100%);
}
.bst_process__desc {
	max-width: 760px;
	margin: 22px 0 0;
	font-size: var(--bs-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.bst_steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 20px;
}
.bst_step {
	position: relative;
	padding: 0 10px;
	text-align: center;
}
/* 단계 사이 점선 연결선은 사용자 지시로 제거(2026-08-03) — 원만 나열한다 */
.bst_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;
}
.bst_step__disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bst_step__disc::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.75);
	/* 2026-08-18 — STEP 02·04 처럼 배경이 밝은 컷이 오면 크림 면과 섞여 원의 윤곽이 사라진다.
	   골드 인셋 링을 한 단계 올려(.30 → .42) 어떤 사진이 와도 원형이 읽히게 했다(iv 페이지와 동일). */
	box-shadow: inset 0 0 0 1px rgba(194,168,120,.42);
	pointer-events: none;
}
.bst_step:hover .bst_step__disc {
	transform: translateY(-5px);
	box-shadow: 0 20px 38px rgba(76,64,44,.24);
}
.bst_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(--bs-gold);
}
.bst_step__name {
	display: block;
	margin: 10px 0 0;
	font-weight: 600;
	font-size: var(--bs-t-lead);
	line-height: 1.44;
	letter-spacing: -.7px;
	color: var(--bs-ink);
	word-break: keep-all;
}

/* =========================================================================
 * 6. 차별화 진단 시스템 (탭 공통)
 *    ⚠ Figma 원본은 이 구간이 어두운 그린 면이지만, 사용자 지시로 형제 페이지
 *      (JDH 줄기세포)의 밝은 디자인을 따른다 — 은은한 광채 배경 + 흰 유리 카드.
 * ========================================================================= */
.bst_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;
}
.bst_diag__head { text-align: center; max-width: 1000px; margin: 0 auto; }
.bst_diag__desc {
	margin: 22px 0 0;
	font-size: var(--bs-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.bst_diag__label {
	margin: 54px 0 22px;
	text-align: center;
	font-size: var(--bs-t-lead);
	font-weight: 700;
	color: var(--bs-ink);
}
.bst_diag__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* 크림 단색 카드 → 반투명 유리(2026-08-05 사용자 요청 · wrinkle/pigment/lifting 과 동일 규격).
 * ⚠ 불투명도(.58)를 더 올리면 유리감이 사라지고 그냥 흰 카드가 된다. */
.bst_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;
}
.bst_dev:hover {
	background: rgba(255,255,255,.74);
	box-shadow: 0 20px 46px rgba(28,30,26,.13), inset 0 1px 0 #fff;
}
.bst_dev__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(233,229,220,.55);   /* 이미지 로드 전 폴백 — 유리 톤에 맞춰 반투명 */
	border-radius: 8px 8px 0 0;
}
.bst_dev__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bst_dev__name {
	display: block;
	margin: 24px 0 0;
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -.6px;
	color: var(--bs-ink);
}
.bst_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 로 상향
 * ========================================================================= */
/* ⚠ 2026-08-10 — 제목(국내최대크기·프리미엄부스터…)을 걷어내고 문장만 남겼다(사용자 원고).
 *   제목 32px 이 빠진 만큼 ① 문장을 16→19px 로 키우고 ② 항목 사이에 세로 헤어라인을 넣는다.
 *   ※ 증상별 솔루션 4형제 + 항노화 3형제 **7개 페이지 공통 규격**이니 한쪽만 바꾸지 말 것. */
.bst_merit {
	padding: 66px 0 70px;
	background: #EFECE4 url('/img/antiaging/booster/cat_bg.jpg') center center / cover no-repeat;
}
.bst_merit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.bst_merit__item { position: relative; padding: 0 30px; text-align: center; }
/* 칸 사이 구분선 — 첫 칸 왼쪽에는 붙지 않는다(인접 형제 선택자) */
.bst_merit__item + .bst_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. 7개 페이지 공통 규격 */
.bst_merit__item p {
	margin: 0;
	font-size: 21.5px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: -.4px;
	color: rgba(28,30,26,.74);
	word-break: keep-all;
}

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1440px) {
	.bst { --bs-t-h1: 42px; --bs-t-h2: 36px; --bs-t-card: 24px; }
	.bst_over__grid { gap: 0 52px; }
	.bst_step__disc { width: 164px; }
}

@media all and (max-width: 1200px) {
	.bst { --bs-t-h1: 38px; --bs-t-h2: 33px; --bs-t-lead: 18px; --bs-t-body: 17px; }
	/* 가로 2.36:1 컷이라 좁아질수록 좌우가 크게 잘린다 — 오른쪽 커튼·오브제가 살도록 당긴다 */
	.bst_hero { min-height: 430px; padding: 100px 0 96px; background-position: 68% center; }
	.bst_over { padding: 84px 0 88px; }
	.bst_over__grid { grid-template-columns: 1fr; gap: 40px 0; }
	.bst_sol, .bst_process, .bst_diag { padding: 84px 0 88px; }
	.bst_steps { grid-template-columns: repeat(2, 1fr); gap: 34px 16px; }
	.bst_step__disc { width: 156px; }
}

@media all and (max-width: 1024px) {
	.bst_tabs { top: 60px; }             /* 헤더 높이 60px 구간 */
	.bst_tabs__inner { display: block; }
	.bst_tabs__list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.bst_tabs__list::-webkit-scrollbar { display: none; }
	.bst_tabs__note { display: none; }
	.bst_tab { padding: 15px 22px 13px; }
	.bst_diag__grid { grid-template-columns: 1fr 1fr; }
	/* 2열에서는 왼쪽 칸(1·3번째)의 구분선을 지운다 — 남기면 섹션 좌측에 선이 뜬다 */
	.bst_merit__grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
	.bst_merit__item:nth-child(2n+1)::before { display: none; }
	/* 카드는 auto-fit 이라 폭에 맞춰 알아서 2열로 접힌다 — 안쪽 여백만 줄인다 */
	.bst_sol__list { gap: 22px; }
	.bst_card { padding: 34px 28px 30px; }
}

@media all and (max-width: 768px) {
	.bst { --bs-t-h1: 29px; --bs-t-h2: 26px; --bs-t-card: 21px; --bs-t-lead: 17px; --bs-t-body: 16px; --bs-t-txt: 15px; }
	/* 좁은 폭에서 어절 중간이 갈리지 않게 페이지 루트에 한 번만 건다(고지 문구가 '있을 수 있습니 / 다.' 로 갈렸다) */
	.jdh_sub.bst { word-break: keep-all; }
	.bst .bst_inner { padding: 0 24px; }
	.bst .bst_eyebrow { font-size: 14px; letter-spacing: 3.6px; }

	.bst_hero { min-height: 330px; padding: 72px 0 68px; }
	.bst_hero__eyebrow { font-size: 15px; }
	.bst_hero__desc { font-size: 15px; }
	.bst_hero__desc br { display: none; }

	/* 탭 4개를 **한 화면에 모두** 보이게(2026-08-28 사용자 지시).
	   1024↓ 의 가로 스크롤(overflow-x:auto)을 여기서 되돌리고 균등 4열로 깐다 —
	   좁은 화면에서 뒤쪽 탭(리투오)이 화면 밖에 숨어 있는 게 요청의 발단이다.
	   ⚠ 열 폭이 좁아 영문 라벨('ELRAVIE RE2O' 가 가장 길다)의 자간을 크게 줄여야 넘치지 않는다.
	     한글·영문 크기를 다시 키우려면 그 라벨이 390px 화면에서 한 줄에 들어가는지 먼저 볼 것.
	   ⚠ 밑줄(ink)은 JS 가 버튼 위치를 재서 넣으므로 grid 로 바꿔도 그대로 따라온다. */
	.bst_tabs__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow-x: visible;
	}
	.bst_tab { padding: 13px 2px 11px; min-width: 0; }
	.bst_tab__ko { font-size: 14px; }
	.bst_tab__en { font-size: 9px; letter-spacing: .5px; margin-top: 2px; }
	/* 번역판은 영문 줄이 **제품명이 아니라 보조설명**이라 한국어판보다 길다
	   (한국어 'Juvelook' 8자 ↔ 번역판 'Collagen Booster' 16자).
	   9px 로 줄여도 81px 칸을 17px 넘겨 옆 탭 글자와 겹쳤다(2026-09-04 실측·3개 언어 공통).
	   → 이 언어들에서만 두 줄을 허용하고, min-height 로 **네 탭의 영문 영역 높이를 2줄로 통일**한다
	     (통일하지 않으면 긴 탭 하나만 아래로 삐져나와 밑줄·글자선이 어긋난다).
	   ⚠ 한국어판은 라벨이 짧아 한 줄이면 충분하므로 여기에 포함하지 않는다. */
	html[lang="en"] .bst_tab__en,
	html[lang="ja"] .bst_tab__en,
	html[lang="zh-Hans"] .bst_tab__en {
		white-space: normal;
		line-height: 1.25;
		min-height: 2.5em;
		letter-spacing: .2px;
	}

	.bst_over { padding: 62px 0 66px; }
	/* ⚠ 데스크톱의 [138% 확대 + left 정렬]을 여기서 **cover 로 되돌린다**.
	   좁은 폭에서는 138% 가 화면 폭보다 짧아져(가로 3:1 사진) 배너 위아래에 배경색 띠가 드러난다.
	   모바일은 사진이 배너를 꽉 덮되 인물이 우측에 오도록 right 정렬만 유지한다. */
	.bst_hl { padding: 86px 0 90px; background-size: cover; background-position: right center; }
	/* 좁은 폭에서는 사진이 크게 확대돼 인물이 화면 전체를 덮는다 — 좌우 그라데이션 대신
	   전면을 고르게 눌러 카피를 지킨다(가로로 나눌 폭이 없다) */
	.bst_hl::after {
		background:
			linear-gradient(180deg, rgba(var(--hl-base),.70) 0%, rgba(var(--hl-base),.62) 46%, rgba(var(--hl-base),.72) 100%);
	}
	.bst_hl__title { font-size: 25px; }
	.bst_hl__list { margin-top: 28px; gap: 12px; }
	.bst_hl__list li { gap: 11px; padding: 17px 24px; font-size: 17px; }
	.bst_hl__list i { width: 15px; height: 9px; }

	.bst_sol, .bst_process, .bst_diag { padding: 62px 0 66px; }
	.bst_sol__head { margin-bottom: 32px; }
	.bst_process__head { margin-bottom: 36px; }
	.bst_process__head::before { width: 34px; margin-bottom: 16px; }
	/* 카드 폭을 유지할 자리가 없다 — minmax 하한을 풀어 1열로 내린다 */
	.bst_sol__list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.bst_card { padding: 28px 22px 26px; border-radius: 10px; }
	.bst_card__txt  { margin: 16px 0 18px; }
	.bst_card__tags { padding-top: 16px; }
	/* 1열에서는 카드 높이가 각자 정해지므로 바닥 정렬이 의미 없다 — 여백만 남기고 푼다 */
	.bst_card__tags { margin-top: 0; }

	/* 2026-08-12 — 진행 단계를 **가로 스와이프**로. 480 이하에서 쓰던 1열은 950px 을 먹었다.
	 * 번호가 붙은 순서형이라 옆으로 넘기는 흐름과 맞다(솔루션·줄기세포와 같은 처리).
	 * ⚠ 음수 마진(-24px)은 .bst_inner 의 좌우 패딩과 짝이다(480 이하는 18px → 아래 블록에서 다시 잡는다). */
	.bst_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;
	}
	.bst_steps::-webkit-scrollbar { height: 3px; }
	.bst_steps::-webkit-scrollbar-track { background: rgba(60,68,78,.10); border-radius: 999px; }
	.bst_steps::-webkit-scrollbar-thumb { background: rgba(60,68,78,.34); border-radius: 999px; }
	.bst_step { padding: 0 4px; scroll-snap-align: start; }
	.bst_step__disc { width: 132px; }
	.bst_step__no { margin-top: 16px; }

	/* 진단 3종도 같은 이유로 가로 스와이프(1열 세로 나열은 1,030px 이었다) */
	.bst_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;
	}
	.bst_diag__grid::-webkit-scrollbar { height: 3px; }
	.bst_diag__grid::-webkit-scrollbar-track { background: rgba(60,68,78,.10); border-radius: 999px; }
	.bst_diag__grid::-webkit-scrollbar-thumb { background: rgba(60,68,78,.34); border-radius: 999px; }
	.bst_diag__grid > * { scroll-snap-align: center; }
	.bst_diag__label { margin: 38px 0 18px; }

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

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

@media (prefers-reduced-motion: reduce) {
	.bst_card,
	.bst_card::before,
	.bst_tabs__ink { transition: none; }
	.bst .is-swap { animation: none; }
	.bst_card:hover { transform: none; }
}