@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&display=swap');
/* =========================================================================
 * JD시그니처 > 처짐 X JD커스텀레이저 (www/signature/custom.jsp 전용)
 * Figma node 594:7951 (Frame 427320287)
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 *
 * 수치 기준: 흑자 X 리팟레이저(page_repot.css) / 주름 X 쥬브젠(page_juvegen.css) 승계
 *   - inner max-width 1440 / padding 0 40px
 *   - 섹션 padding 120px 0 (반응형 1024:76 / 768:56)
 *   - 타이틀 40px·800 / 리드 20px / 아이브로우 20px(세리프 30px)
 *   - 카드·이미지 박스 radius 8px (프로젝트 공통 규칙 — Figma 10px/12px 대신 8px 통일)
 * 리팟과 다른 점(= Figma 구조 차이)
 *   - 시술정보 spec 4칸 (Time/Anesthesia/Recovery/Duration) → 쥬브젠 4칸 패턴
 *   - 효과 카드 5개 → 쥬브젠 3+2 flex 패턴
 *   - 작용 원리 4단계 (리팟은 5단계)
 * ========================================================================= */

.cst {
	--cst-gold:      #B2A678;   /* 세리프 아이브로우 골드 */
	--cst-gold-deep: #A68B5B;   /* 골드 그라데이션 끝 */
	--cst-gold-lite: #D8BD8B;   /* 히어로 카피 골드(Figma) */
	--cst-green:     #284232;   /* 포인트 딥그린(Figma 히어로 타이틀) */
	--cst-green-2:   #1F5135;   /* 효과 카드 아이콘/텍스트 그린 */
	--cst-green-3:   #285D2D;   /* 작용원리 번호 그린 */
	--cst-ink:       #26231D;   /* 헤드라인 */
	--cst-body:      #7C746B;   /* 본문 */
	--cst-body-2:    #6E6A60;   /* 보조 본문 */
	--cst-line:      #E7E0D3;   /* 헤어라인 */
	font-family: 'Pretendard', sans-serif;
	color: var(--cst-ink);
}
.cst .cst_inner { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

/* 공통 헤더 블록 */
.cst_head { text-align: center; }
.cst_eyebrow {
	display: block;
	font-weight: 700; font-size: 16px; line-height: 1.45; letter-spacing: -0.1px;
	color: #B79C63;
}
/* 영문 아이브로우 공통 규격 — Cormorant Garamond 700 / 17px / 4.6px / UPPER (전 페이지 동일).
   ⚠ 이전의 italic 은 제거했다(2026-08-03 전체 통일) — 되살리지 말 것.
   .cst_eyebrow(한글용) 는 Pretendard 라 이 규격을 적용하지 않는다. */
.cst_eyebrow--serif,
.cst_eyebrow--line {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700; font-style: normal; font-size: 17px; letter-spacing: 4.6px;
	text-transform: uppercase; color: var(--cst-gold);
}
.cst_title {
	margin: 26px 0 0;
	font-weight: 800; font-size: 40px; line-height: 1.31; letter-spacing: -0.72px;
	color: var(--cst-ink);
}
.cst_title--left { text-align: left; }
.cst_lead {
	margin: 26px 0 0;
	font-weight: 400; font-size: 20px; line-height: 1.47; color: var(--cst-body);
}
.cst_lead--tight { margin-top: 14px; }
.cst_lead--left { text-align: left; }

/* ===== 1. 히어로 (Figma node 594:8941 = Frame 427320288) =====
 * 배경 hero_bg.jpg(2050×1024) 우측에 리프팅 화살표가 얹힌 모델이 합성된 컷.
 * 좌측 절반이 비어 있어 그 자리에 카피를 얹는다.
 *
 * 카피가 얹히는 좌측만 화이트 베일을 옅게 깔아 가독성을 확보하고,
 * 우측(모델)은 베일 0 으로 두어 원본 선명도를 유지한다.
 * 타이포는 Figma 실측값 — 바디 X JD슬림케어 히어로와 동일 스펙(eyebrow 25 / 타이틀 80 / 본문 25).
 *
 * ⚠ 높이 — 2026-08-04 사용자 지시로 시그니처 4종(주름 X 쥬브젠 기준) 히어로 높이를 통일했다.
 *   aspect-ratio(1920/700) 로 폭에 따라 높이가 변하던 것을 걷어내고
 *   .cst_hero__inner 의 min-height 720px / 1280↓ 600px / 1024↓ 세로 쌓기로 맞췄다.
 *   (juvegen · repot · slimcare 와 같은 값. 한쪽만 바꾸면 다시 어긋나므로 4개 파일을 함께 볼 것)
 *
 * ⚠ 배경 크롭 — Figma 재현값(size 106.77% / y 6.48%, 원본 y21~721 구간)을 걷어냈다.
 *   그 크롭은 모델을 정수리부터 담느라 아래쪽(손·어깨)을 잘라 먹었고,
 *   "아래가 너무 잘린다, 머리 위는 살짝 잘려도 된다" 는 지시(2026-08-04)에 따라 다시 잡았다.
 *     size     : cover — 106.77% 는 폭 기준이라 히어로가 높아지면 세로에 빈 곳이 생긴다
 *                (0.5333W < 720px 인 1388px 미만 구간). cover 는 어떤 폭에서도 덮는다.
 *     position : center 22% — 1920px 화면에서 원본 y56~825 구간이 보인다.
 *                정수리(y31)가 25px 잘리는 대신 손끝(y≈800)과 어깨가 모두 들어온다.
 *   ※ 값을 더 키우면(예: 30%) 이마까지 잘리고, 줄이면 다시 손이 잘린다. */
.cst_hero {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(100deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,.28) 40%, rgba(255,255,255,.06) 68%, rgba(255,255,255,0) 100%),
		url('/img/signature/custom/hero_bg.jpg') center 22% / cover no-repeat;
	background-color: #EAE0D7;   /* 이미지 로드 전 폴백(배경 크림 톤) */
}
/* Figma 카피 블록: 세로 중앙보다 48px 위(프레임 700px 기준 top 183px).
 * padding-bottom 을 2×48=96px 주면 높이가 얼마든 카피가 중앙에서 48px 위로 올라간다. */
.cst_hero__inner {
	position: relative; z-index: 1;
	max-width: 1440px; margin: 0 auto; padding: 0 40px 96px;
	/* 시그니처 4종 공통 히어로 높이 — juvegen · repot · slimcare 와 같은 값(2026-08-04) */
	min-height: 720px;
	display: flex; align-items: center;
}
.cst_hero__copy { max-width: 787px; }   /* Figma 카피 블록 폭 */
/* Figma: Cormorant Garamond 700 / 25px / letter-spacing 20.4%(=5.1px) / UPPER / #D8BD8B */
.cst_hero__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	/* 히어로는 타이틀이 커서 크기(20px)만 위계용으로 남기고, 서체·굵기·자간·대문자는 공통 규격 */
	font-weight: 700; font-style: normal; font-size: 20px;
	letter-spacing: 4.6px; text-transform: uppercase;
	color: var(--cst-gold-lite);
}
/* Figma: 80px / #284232 (이 페이지의 최대 폰트 = 히어로 타이틀) */
.cst_hero__title {
	margin: 10px 0 0;   /* Figma gap 10px */
	font-weight: 800;
	/* 상한 80px — 시그니처 히어로 타이틀만 사용자 지정 예외(2026-08-04).
	 * 다른 서브페이지 h1(46px)·메인 히어로(54px) 상한을 넘지만 의도된 값이니 내리지 말 것. */
	font-size: clamp(40px, 4.6vw, 80px);
	line-height: 1.1; letter-spacing: -1.2px;
	color: var(--cst-green);
}
.cst_hero__title em { font-style: normal; }
/* Figma: 25px / #C8A66A
 * ⚠ max-width 를 주지 않는다 — Figma 컨테이너는 525px 지만 둘째 줄 실측이 617px 로
 *   컨테이너를 넘겨 한 줄로 그려져 있다. 525px 로 묶으면 의도치 않은 줄바꿈이 생긴다.
 * 줄 간격: Figma 는 두 줄이 각 30px 높이 + gap 10px = 40px → line-height 40/25 = 1.6 */
/* ⚠ 색: Figma 원본은 #C8A66A(밝은 골드)였는데, 히어로 배경이 밝은 크림·골드라
 *   글자가 배경에 묻혀 읽히지 않았다(2026-08-07 지적). 골드 계열은 유지하되 명도를 크게 낮춘
 *   딥브론즈로 바꾸고 크기·굵기를 한 단 올렸다. 밝은 골드로 되돌리지 말 것.
 *   ※ 대비는 색으로만 만든다 — text-shadow 를 겹치면 검은 후광이 생긴다(레이아웃 방침). */
.cst_hero__desc {
	margin: 30px 0 0;   /* Figma 카피그룹 gap 30px */
	font-weight: 500; font-size: 22px; line-height: 1.6; letter-spacing: -0.3px;
	color: #5A4A2E;
	white-space: nowrap;   /* 두 줄은 <br> 로만 나눈다(폭이 좁아지면 아래 반응형에서 해제) */
}

/* ===== 2. ABOUT JD CUSTOM LASER ===== */
.cst_about {
	padding: 120px 0;
	background: #E8DAC4 url('/img/signature/custom/about_bg.jpg') center center / cover no-repeat;
}
.cst_about__sub {
	margin: 22px 0 0;
	font-weight: 700; font-size: 16px; line-height: 1.45; letter-spacing: -0.1px; color: #1F1F1F;
}
.cst_about .cst_title { margin-top: 6px; color: #2E4236; }

/* 4단계 원형 플로우 */
/* 칸 폭 300px — 4×300 + gap 3×32 = 1296px ≤ 컨테이너 1360px.
 * 2026-08-06 원고 교체로 설명이 2줄이 됐지만, "레이저, 매선, 실리프팅, 침, 약침…" 처럼
 * 한 줄이 긴 문구가 있어 폭은 그대로 둔다(줄이면 자동 줄바꿈이 끼어 단계별 줄 수가 어긋난다). */
.cst_flow {
	display: flex; align-items: flex-start; justify-content: center;
	gap: 32px; margin: 60px 0 0; padding: 0; list-style: none;
}
.cst_flow__step {
	flex: 0 0 300px;
	display: flex; flex-direction: column; align-items: center;
	padding: 0 8px; text-align: center;
}
.cst_flow__ic {
	display: block; width: 110px; height: 110px;
	border-radius: 50%; overflow: hidden; line-height: 0;
	background: #fff;
	box-shadow: 0 12px 26px -18px rgba(70, 58, 40, .45);
}
.cst_flow__ic img { width: 100%; height: 100%; object-fit: cover; }
.cst_flow__name {
	display: block; margin-top: 18px;
	font-weight: 700; font-size: 20px; letter-spacing: -0.17px; color: var(--cst-green);
}
.cst_flow__desc {
	margin: 9px 0 0;
	font-weight: 400; font-size: 15px; line-height: 1.43; color: var(--cst-body-2);
	word-break: keep-all;
}
/* 단계 사이 화살표 (Figma arrow-right-alt 아이콘을 CSS 로 대체) */
.cst_flow__step + .cst_flow__step { position: relative; }
/* 화살표 — 2026-08-06(2차) CSS 로 그리던 축+촉을 이미지로 교체(사용자 지정 jd_cursor.png).
 * 원본은 여백이 화면의 70% 라 그대로 쓰면 화살표가 작아진다 → 알파 기준으로 트림한
 * `/img/jd_cursor_arrow.png`(1497×579)를 쓴다. 새 화살표를 받으면 같은 방식으로 트림할 것.
 * ⚠ 같은 화살표가 page_juvegen.css · page_slimcare.css 에도 있다. 고칠 때 셋을 함께 볼 것. */
.cst_flow__step + .cst_flow__step::before {
	content: '';
	position: absolute; top: 48px; left: -44px;
	width: 34px; height: 14px;
	background: url('/img/jd_cursor_arrow.png') center / contain no-repeat;
}
.cst_flow__step + .cst_flow__step::after { content: none; }

/* 4개 효과 썸네일 카드 */
.cst_effect {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 30px; margin: 70px 0 0; padding: 0; list-style: none;
}
.cst_effect__item {
	border-radius: 8px;   /* 이미지 박스 공통 radius */
	overflow: hidden;
	background: #fff;
	box-shadow: 0 14px 30px -22px rgba(70, 58, 40, .45);
	transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.cst_effect__item:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 40px -22px rgba(70, 58, 40, .5);
}
.cst_effect__thumb { display: block; aspect-ratio: 286 / 154; line-height: 0; }
.cst_effect__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cst_effect__label {
	display: flex; align-items: center; justify-content: center;
	height: 60px;
	font-weight: 700; font-size: 20px; letter-spacing: -0.2px; color: var(--cst-green);
}

/* ===== 3. 커스텀레이저 소개 ===== */
.cst_intro { padding: 120px 0; background: #fff; }
.cst_intro__grid {
	display: grid; grid-template-columns: 764fr 637fr;
	gap: 39px; align-items: center;
}
.cst_intro__media {
	position: relative;
	border-radius: 8px; overflow: hidden; line-height: 0;
	background: #F6EFE6;   /* Figma 미디어 박스 배경색 */
}
.cst_intro__media img { width: 100%; height: auto; display: block; }

/* ⚠ 아래 .cst_intro__tags* 는 현재 미사용 —
 *   라벨이 인쇄된 새 이미지(about_model_v2.png)로 교체하면서 오버레이가 필요 없어졌다(2026-08-06 2차).
 *   되살릴 일이 없다면 통째로 지워도 된다.
 * 부위 라벨 — 이미지에 인쇄된 옛 라벨을 덮어쓰는 오버레이(JSP 주석 참조).
 * ⚠ 좌표는 about_model.jpg(2498×1696) 의 알약 위치를 비율로 옮긴 값이다. 이미지를 바꾸면 다시 잡아야 한다.
 *   · top    = 원본 알약의 세로 중앙(translateY(-50%) 와 짝)
 *   · min-width = 원본 알약 폭. 이보다 좁으면 아래 옛 글씨가 삐져나온다.
 *   · 흰 알약이라 베이지색 원본 위에서 확실히 가려진다(투명·반투명 금지). */
.cst_intro__tags { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.cst_intro__tags li {
	position: absolute; left: 7.5%;
	transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	/* 원본 알약보다 위아래로 넉넉해야 아래 글씨가 비치지 않는다(패딩을 줄이지 말 것) */
	padding: .8em 1.2em;
	background: #fff; border-radius: 999px;
	font-weight: 700; font-size: clamp(11px, 1.06vw, 15px); line-height: 1.2; letter-spacing: -0.3px;
	color: var(--cst-green); white-space: nowrap;
	box-shadow: 0 8px 18px -12px rgba(90, 74, 48, .55);
}
.cst_intro__tags li:nth-child(1) { top: 27.6%; min-width: 27.5%; }
.cst_intro__tags li:nth-child(2) { top: 40.4%; min-width: 25.0%; }
.cst_intro__tags li:nth-child(3) { top: 54.2%; min-width: 23.4%; }
.cst_intro__tags li:nth-child(4) { top: 67.4%; min-width: 30.2%; }
.cst_intro__tags li:nth-child(5) { top: 82.6%; min-width: 29.2%; }
.cst_intro__body { display: flex; flex-direction: column; }
.cst_intro__sub {
	margin: 0;
	font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: -0.2px; color: #111;
}
.cst_intro__title {
	margin: 8px 0 0;
	font-weight: 800; font-size: 30px; line-height: 1.3; letter-spacing: -0.2px; color: #2E4236;
}
.cst_intro__title em { font-style: normal; color: var(--cst-gold-deep); }
.cst_intro__desc {
	margin: 24px 0 0;
	font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.2px; color: #333;
}
.cst_intro__desc + .cst_intro__desc { margin-top: 20px; }

/* 시술 정보 4칸 (쥬브젠 패턴 — 균등 분배) */
/* ⚠ 열 간격·좌우 패딩을 줄인 이유(2026-08-10): 우측 컬럼 안이라 칸이 좁아 '12~18개월' 이
 * 두 줄로 접혔다. 값이 한 줄로 들어가는 최소치이니 다시 벌리지 말 것(juvegen 과 같은 규격). */
.cst_spec {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 20px 12px; margin: 56px 0 0; padding: 0; list-style: none;
}
.cst_spec__item {
	display: flex; flex-direction: column; align-items: center;
	padding: 8px 4px;
	text-align: center;
}
/* 2026-08-10 — 원형 SVG 아이콘(.cst_spec__ic)과 영문 라벨(.cst_spec__label)을 걷어내고
 * 사용자가 준 픽토그램 이미지 한 장으로 대체했다(아이콘 + 라벨을 둘 다 대신한다).
 * ⚠ 라벨(TIME·ANESTHESIA…)을 되살리지 말 것. 시그니처 4개 페이지 공통 규격(88px). */
.cst_spec__pic {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
}
/* 항목명(2026-08-11) — 픽토그램만으로 마취/회복이 구분되지 않는다는 지적으로 추가.
   ⚠ 되살리지 말라던 건 영문 라벨(TIME·ANESTHESIA…)이다. 이 한글 항목명은 지우지 말 것. */
.cst_spec__name {
	display: block; margin-top: 14px;
	font-weight: 500; font-size: 13px; letter-spacing: -0.2px; color: rgba(28,30,26,.5);
}
.cst_spec__value {
	display: block; margin-top: 5px;
	font-weight: 700; font-size: 19px; letter-spacing: -0.3px; color: var(--cst-green);
	white-space: nowrap;   /* '약 30분~60분' 이 줄바꿈되지 않도록 */
}

/* ===== 3-1. 커스텀의 핵심 — 강조 밴드 (2026-08-07 신설) =====
 * 앞(3번=#fff)·뒤(4번=크림 스튜디오 컷) 사이에 놓이는 섹션이라 색을 어떻게 잡느냐가 관건이었다.
 *   · 다크 밴드는 쓰지 않는다 — 밝은 앞뒤 사이에 어두운 섹션을 끼우는 방식은
 *     리팟레이저(page_repot.css 6번 섹션)에서 되돌린 이력이 있다.
 *   · 대신 옅은 샌드 그라데이션 + 위아래 골드 헤어라인. 색 대비가 아니라
 *     타이포 크기·골드 하이라이트·마지막 칸의 딥그린으로 강조를 만든다.
 * ⚠ 뒤 섹션(.cst_benefit)도 크림이라 헤어라인을 빼면 두 섹션이 한 덩어리로 보인다. 지우지 말 것. */
.cst_core {
	position: relative;
	padding: 110px 0;
	background:
		radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 62%),
		linear-gradient(180deg, #FBF8F3 0%, #F5EFE4 100%);
}
.cst_core::before,
.cst_core::after {
	content: '';
	position: absolute; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, rgba(166,139,91,0) 0%, rgba(166,139,91,.32) 50%, rgba(166,139,91,0) 100%);
}
.cst_core::before { top: 0; }
.cst_core::after  { bottom: 0; }
.cst_core__head { text-align: center; }
.cst_core__sub {
	margin: 20px 0 0;
	font-weight: 500; font-size: 17px; letter-spacing: -0.2px; color: var(--cst-body);
}
/* 이 섹션의 주인공 문장 — 페이지 h2 상한(40px)을 지키되 line-height 를 넉넉히 줘 선언처럼 읽히게 한다 */
.cst_core__title {
	margin: 14px 0 0;
	font-weight: 800; font-size: 40px; line-height: 1.36; letter-spacing: -0.8px;
	color: var(--cst-green);
	word-break: keep-all;   /* 좁은 화면에서 '있습니'/'다' 로 끊기던 걸 어절 단위로 넘긴다 */
}
/* 강조 — 글자색을 바꾸는 대신 뒤에 골드 형광펜 띠를 깐다(글자는 딥그린 그대로라 가독성이 떨어지지 않는다) */
.cst_core__title em {
	position: relative; font-style: normal; z-index: 0;
}
.cst_core__title em::after {
	content: '';
	position: absolute; z-index: -1;
	left: -4px; right: -4px; bottom: 4px; height: 14px;
	background: linear-gradient(90deg, rgba(216,189,139,.55) 0%, rgba(216,189,139,.28) 100%);
	border-radius: 2px;
}

/* 4단계 체인 — 축선 위 노드(2026-08-07 2차 개편).
 * 흰 카드 4개는 위 2번 섹션의 카드들과 모양이 겹쳐 무거웠다. 박스를 지우고
 * 번호 → 노드 → 단계명 세 줄만 남겨 배경이 그대로 비치게 했다.
 * ⚠ 축선은 li 마다 rail 안에 반쪽씩 그린다(첫 칸은 오른쪽만, 끝 칸은 왼쪽만) —
 *   컨테이너에 통짜 선을 깔면 양 끝이 화면 밖으로 삐져나간다. */
.cst_core__chain {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 62px 0 0; padding: 0; list-style: none;
}
.cst_core__link {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	padding: 0 18px;
	text-align: center;
}
/* 번호는 원 안에 가두지 않는다(레이아웃 방침) — Cormorant 타이포로만.
 * 'Result' 는 글자 수가 달라 폰트가 작다 → 높이를 고정해 네 칸의 노드 라인을 맞춘다. */
.cst_core__no {
	display: flex; align-items: center; justify-content: center;
	height: 36px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: 2px;
	color: rgba(166, 139, 91, .78);
}
.cst_core__link--goal .cst_core__no {
	font-size: 19px; letter-spacing: 4.4px; text-transform: uppercase;
	color: var(--cst-green);
}
/* 축선 + 노드 */
.cst_core__rail { position: relative; display: block; width: 100%; height: 26px; margin-top: 16px; }
/* ⚠ 좌우 -18px 은 li 의 가로 패딩만큼 밖으로 빼는 값이다. 0 으로 두면 칸 사이 36px 이
 *   빈 채로 남아 축선이 토막토막 끊겨 보인다(실제 발생). li 패딩을 바꾸면 이 값도 함께 고칠 것. */
.cst_core__rail::before {
	content: '';
	position: absolute; top: 50%; left: -18px; right: -18px; height: 1px;
	background: rgba(166, 139, 91, .34);
}
.cst_core__link:first-child .cst_core__rail::before { left: 50%; }
.cst_core__link:last-child .cst_core__rail::before  { right: 50%; }
/* 결과 직전 구간만 그린으로 물들여 흐름이 끝에 닿았음을 보인다 */
.cst_core__link--goal .cst_core__rail::before {
	background: linear-gradient(90deg, rgba(166,139,91,.34) 0%, var(--cst-green) 100%);
}
/* 노드 크기 — 2026-08-07 사용자 지시로 한 단 키웠다(11 → 15px / 결과 15 → 22px) */
.cst_core__rail i {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 15px; height: 15px;
	background: #FBF8F3; border: 1px solid var(--cst-gold-deep); border-radius: 50%;
}
/* 마지막(결과) 노드만 살아 있는 느낌 — 은은한 골드 광채 + 밖으로 퍼지는 파동.
 * ⚠ 깜빡임(opacity 토글)이 아니라 서서히 밝아졌다 잦아드는 방식이다. 눈에 피로하지 않게 2.6s 로 길게 둔다. */
.cst_core__link--goal .cst_core__rail i {
	width: 22px; height: 22px;
	background: var(--cst-green); border-color: var(--cst-green);
	animation: cst-core-glow 2.6s ease-in-out infinite;
}
/* 퍼져 나가는 링 — i 는 이미 translate 로 중앙에 놓였고, 이 링은 자식이라 scale 만 쓴다 */
.cst_core__link--goal .cst_core__rail i::after {
	content: '';
	position: absolute; left: -1px; right: -1px; top: -1px; bottom: -1px;
	border: 1px solid var(--cst-green); border-radius: 50%;
	animation: cst-core-ripple 2.6s ease-out infinite;
}
@keyframes cst-core-glow {
	0%, 100% { box-shadow: 0 0 0 5px rgba(40, 66, 50, .10), 0 0 0 0 rgba(196, 164, 105, 0); }
	50%      { box-shadow: 0 0 0 6px rgba(40, 66, 50, .14), 0 0 16px 3px rgba(196, 164, 105, .55); }
}
@keyframes cst-core-ripple {
	0%   { transform: scale(1);   opacity: .5; }
	70%  { transform: scale(2.2); opacity: 0; }
	100% { transform: scale(2.2); opacity: 0; }
}
/* 움직임을 줄이도록 설정한 사용자에게는 정지 상태로 보여 준다 */
@media (prefers-reduced-motion: reduce) {
	.cst_core__link--goal .cst_core__rail i { animation: none; box-shadow: 0 0 0 5px rgba(40, 66, 50, .12); }
	.cst_core__link--goal .cst_core__rail i::after { animation: none; opacity: 0; }
}
/* 이름 칸은 항상 2줄 높이를 차지한다 — 1줄('정밀 분석')과 2줄('…수립과 복합 시술')이 섞여 있어
 * 자동 높이로 두면 칸마다 아래 여백이 달라 보인다. */
.cst_core__name {
	display: flex; align-items: flex-start; justify-content: center;
	margin-top: 18px; min-height: 2.84em;   /* line-height 1.42 × 2줄 */
	font-weight: 700; font-size: 21px; line-height: 1.42; letter-spacing: -0.3px;
	color: var(--cst-ink);
	word-break: keep-all;
}
.cst_core__link--goal .cst_core__name { color: var(--cst-green); }

/* ===== 4. 커스텀레이저의 다양한 효과 =====
 * 장비 컷을 카드 바로 옆에 붙인다 — 주름 X 쥬브젠(jvg_benefit) 과 같은 방식.
 *   · 통짜 배경(effect_bg.jpg)을 우측 정렬로 깔면 장비가 화면 오른쪽 끝까지 밀려나
 *     카드와 멀어진다 → **장비 부분만 크롭한 컷**(effect_device.jpg 918×688,
 *     effect_bg 의 x600~1518 구간)을 ::before 레이어로 카드 오른쪽 옆에 놓는다.
 *   · left: calc(50% - 40px) → 컨테이너가 가운데 정렬이고 카드가 좌측 절반을 쓰므로
 *     어떤 화면 폭에서도 '카드 오른쪽 옆' 위치가 유지된다(음수 오프셋이 과하면
 *     좁은 화면에서 카드를 덮으므로 -40px 로 제한).
*   · `auto 100%`(높이 기준) → 이미지가 섹션 높이를 항상 꽉 채운다.
 *     ⚠ 폭 기준(`100% auto`)으로 깔면 이미지 높이(688px)가 섹션 높이(약 820px)보다 작아
 *       상·하에 이미지가 없는 띠가 생기고, 그 경계가 잘린 것처럼 보인다. 그래서 높이 기준으로 맞춘다.
 *     좌우로 넘치는 만큼은 잘리지만 장비는 컷의 중앙~우측에 있어 영향이 없다.
 *   · mask 는 좌·우만 (쥬브젠과 동일). 상·하는 이미지가 꽉 차므로 페이드가 필요 없고,
 *     오히려 페이드를 주면 위아래에 옅은 띠가 생긴다.
 *   · 베이스 그라데이션은 좌측을 흰색에 가깝게(#FAF6F0) 두어 위쪽 흰 배경 섹션과 이어지고,
 *     우측은 크롭 컷의 좌측 픽셀색(#E5DED4)에 맞춰 mask 페이드 구간의 이음새를 없앴다.
 * ⚠ 이 컷은 Figma 원본이 쥬브젠 페이지를 복제한 잔재로 **JUVGEN 장비**가 찍혀 있다.
 *   커스텀레이저 장비 컷으로 교체 시 effect_bg.jpg 를 갈고 크롭을 다시 뜨면 된다. */
/* 2026-08-06: 배경을 jd_custom_bg.png 로 지정받았다(크림·골드 스튜디오 — 우측에 유리 오브제).
 * 좌측 2/3 이 비어 있어 카드가 그 위에 놓인다. 이전에 우측을 채우던 장비 컷 레이어(::before)는 걷어냈다.
 * ⚠ 폴백 그라데이션은 컷의 크림 톤에 맞춘 값이다. 컷을 바꾸면 함께 볼 것. */
.cst_benefit {
	position: relative;
	overflow: hidden;
	padding: 120px 0;
	background:
		url('/img/jd_custom_bg.png') center center / cover no-repeat,
		linear-gradient(100deg, #FAF6F0 0%, #F4EEE4 55%, #EDE5D9 100%);
}
/* 이 섹션만 컨테이너를 넓히고 우측 패딩을 줄인다(2026-08-06 요청 — 장비를 더 크게).
 * 쥬브젠 효과 섹션(.jvg_benefit > .jvg_inner)과 같은 처리다. 좌측 패딩은 카드 가독성 때문에 유지. */
.cst_benefit > .cst_inner {
	position: relative; z-index: 1;
	max-width: 1680px;
	padding-right: 8px;
}

/* 장비 진열 (2026-08-06) — 우측 칸을 채우는 장식 블록.
 * 2026-08-07: 17종 → **커스텀레이저에 쓰는 10종**으로 줄였다(5+5).
 *   개수가 줄어든 만큼 개당 크기를 키우고 겹침을 줄여, 진열 덩어리의 크기감은 이전과 비슷하게 맞췄다.
 *   ⚠ 아래 세 값은 한 세트다 — 하나만 고치면 덩어리 크기가 틀어진다:
 *     장비 높이(.cst_fleet__row--back/--front .cst_fleet__unit) · 겹침(.cst_fleet__unit + .cst_fleet__unit)
 *     · 두 줄 물림(.cst_fleet__row--front 의 margin-top)
 * 진열대처럼 보이게 하는 장치가 셋이다. 하나만 빼도 "그냥 나열" 로 돌아간다:
 *   ① 두 줄로 나누고 서로 겹친다(음수 margin).
 *   ② 뒷줄은 작게·흐리게 두어 원근을 만든다. 앞줄이 뒷줄을 덮도록 z-index 를 준다.
 *   ③ 아래로 갈수록 진해지는 그림자 — 바닥에 서 있는 느낌.
 * ⚠ 세로형 누끼라 object-fit 은 contain 이어야 한다(cover 면 바퀴·핸드피스가 잘려 무슨 장비인지 모른다). */
/* margin-top 은 진열 전체를 아래로 내리는 값이다(2026-08-06 요청).
 * 그리드가 align-items:center 라 카드와 세로 중앙이 맞는데, 배경 컷의 바닥선보다 높이 떠 보였다.
 * ⚠ 2026-08-07 장비가 커지며 진열 높이가 늘어 150 → 116px 로 줄였다(섹션이 길어지는 것을 상쇄).
 * ⚠ 진열을 "더 내리는" 조정은 margin-top 이 아니라 아래 top 으로 한다(2026-08-07).
 *   배경 컷은 섹션보다 가로로 길어 **세로 기준(cover)** 으로 깔린다 → 배경 높이 = 섹션 높이.
 *   그래서 margin-top 을 키우면 섹션이 길어지고 배경(=단상)도 같은 비율로 함께 내려가
 *   장비와 단상의 상대 위치가 거의 그대로다(실제로 두 번 키웠지만 효과가 미미했다).
 *   top(position:relative)은 레이아웃 높이를 건드리지 않아 단상은 그대로 두고 장비만 내려간다.
 *   ⚠ transform 으로 내리면 안 된다 — 이 블록에 붙은 진입 애니메이션(.jdh-up.is-in)이
 *     transform:none 으로 덮어써서 값이 죽는다(실제로 겪음).
 *   배경 컷(jd_custom_bg.png)을 바꾸면 이 두 값을 함께 다시 볼 것. */
.cst_fleet {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	gap: 0;
	padding: 10px 0 0;
	margin-top: 116px;
	top: 44px;   /* 앞줄 바퀴를 배경 단상의 맨 앞 단 윗면에 앉히는 값 (56 → 44: 살짝 위로) */
}
/* ⚠ 배경 컷(jd_custom_bg.png)의 유리 기둥 위에 장비를 그냥 얹으면 서로 섞여 둘 다 안 보인다(실제로 그랬다).
 *   장비 뒤에 크림빛 빛무리를 깔아 배경을 눌러 주는 것이 이 블록의 핵심이다 — 지우지 말 것. */
.cst_fleet::before {
	content: '';
	position: absolute; z-index: 0;
	left: -6%; right: -6%; top: -8%; bottom: 4%;
	background: radial-gradient(56% 60% at 50% 48%,
		rgba(255,252,246,.94) 0%, rgba(255,252,246,.72) 42%, rgba(255,252,246,.28) 68%, rgba(255,252,246,0) 84%);
	pointer-events: none;
}
.cst_fleet__row {
	position: relative; z-index: 1;   /* ::before 빛무리 위 */
	display: flex; align-items: flex-end; justify-content: center;
	width: 100%;
}
/* 겹침 폭 — 좁힐수록 촘촘해진다. 장비 폭이 제각각이라 %가 아니라 px 로 고정한다.
 * 2026-08-06(2차): 장비를 키우라는 요청에 겹침도 -16 → -34 → -56px 로 늘렸다.
 * 2026-08-07: 17개 → 10개가 되며 줄에 여유가 생겨 -56 → -26px 로 되돌렸다.
 *   (17개일 때 크게 겹친 건 자리가 없어서였다. 10개에서 그대로 두면 장비가 서로 파묻힌다)
 * 키우기만 하면 줄이 컬럼 밖으로 넘치므로 높이와 겹침은 항상 같이 조정해야 한다. */
.cst_fleet__unit { display: block; line-height: 0; }
.cst_fleet__unit + .cst_fleet__unit { margin-left: -26px; }
/* 뒷줄은 더 벌린다(2026-08-07) — 앞줄에 가려지는 데다 같은 겹침을 주면 장비끼리 파묻혀
 * 무슨 기기가 몇 대인지 읽히지 않는다. 앞줄은 겹쳐야 진열대처럼 보이므로 그대로 둔다. */
.cst_fleet__row--back .cst_fleet__unit + .cst_fleet__unit { margin-left: -4px; }
.cst_fleet__unit img {
	width: auto; height: 100%; max-width: none; display: block;
	object-fit: contain;
}
.cst_fleet__row--back {
	z-index: 1;
	opacity: .78;
	filter: saturate(.92);
}
.cst_fleet__row--back .cst_fleet__unit { height: 296px; }   /* 2026-08-07: 250 → 296 (10종으로 축소하며 키움) */
.cst_fleet__row--back img { filter: drop-shadow(0 10px 14px rgba(96, 78, 50, .18)); }
/* 앞줄은 뒷줄 위로 올라타 진열대처럼 보인다 */
.cst_fleet__row--front {
	z-index: 2;
	margin-top: -62px;
}
.cst_fleet__row--front .cst_fleet__unit { height: 392px; }   /* 2026-08-07: 328 → 392 */
.cst_fleet__row--front img { filter: drop-shadow(0 18px 22px rgba(96, 78, 50, .3)); }
/* ⚠ 진열 아래 "10 LASERS" 캡션(.cst_fleet__count)은 2026-08-11 사용자 지시로 마크업째 삭제했다.
   장비 진열만 남긴다 — 다시 넣지 말 것. */
.cst_benefit__grid {
	display: grid; grid-template-columns: 1fr 1.02fr;
	gap: 40px; align-items: center;
}
/* 5개 → 3+2 로 줄바꿈, 두 번째 줄은 가운데 정렬 (쥬브젠 패턴) */
.cst_benefit__list {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 16px; margin: 44px 0 0; padding: 0; list-style: none;
}
.cst_benefit__item {
	position: relative;
	flex: 0 0 calc((100% - 32px) / 3);
	aspect-ratio: 1 / 1;         /* 정사각형 카드 */
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 16px;
	padding: 20px 12px;
	background: linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 48%, #FBF9F5 100%);
	border: 1px solid #E4E7E1;
	border-left: 5px solid #BBC1B7;   /* Figma: 좌측 굵은 라인 */
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 12px 26px -20px rgba(120, 98, 58, .32);
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
/* Figma: 텍스트 아래 짧은 구분선 */
.cst_benefit__item::after {
	content: '';
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
	width: 46px; height: 1px; background: #BBC1B7;
}
.cst_benefit__item:hover {
	transform: translateY(-5px);
	border-left-color: var(--cst-green-2);
	box-shadow: 0 22px 38px -22px rgba(120, 98, 58, .45);
}
.cst_benefit__ic { display: inline-flex; color: var(--cst-green-2); }
.cst_benefit__ic svg { width: 41px; height: 41px; }
.cst_benefit__item strong {
	font-weight: 700; font-size: 18px; letter-spacing: -0.3px; color: var(--cst-green-2);
	word-break: keep-all;
}

/* ===== 5. 처짐X커스텀레이저 작용 원리 (4단계) ===== */
/* 2026-08-06: 이 섹션의 내용이 "작용 원리 4단계" → "한방 복합 시술 3종"(.cst_orient)으로 바뀌었다.
 * 섹션 껍데기(.cst_step, 배경 process_bg.jpg)와 헤더는 그대로 쓰고, 카드만 갈아 끼운 것이다.
 * ⚠ 아래 .cst_step__* (옛 4단계 카드) 는 현재 미사용 — 되돌릴 때를 대비해 남겨 뒀다. */
.cst_step {
	padding: 110px 0 120px;
	background: #DFD9C9 url('/img/signature/custom/process_bg.jpg') center center / cover no-repeat;
}
/* 한방 3종 카드 — 사진 자산이 없어 선 아이콘으로 세운다(장식이 아니라 구분 기호 역할).
 * 배경이 이미 무늬가 있는 컷이라 카드는 흰 반투명으로 눌러 글이 읽히게 한다. */
.cst_orient {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 26px; margin: 56px 0 0; padding: 0; list-style: none;
}
/* 2026-08-06(2차): 선 아이콘 → 사진 카드. 사진이 카드 폭을 꽉 채우고 아래를 흰 면이 받는 구조
 * (리팟 한방약침 섹션 .rpt_herb__item 과 같은 형태 — 두 섹션의 생김새를 맞춰 둔다). */
.cst_orient__item {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	padding: 0 0 34px;
	background: #fff;
	border: 1px solid rgba(90, 74, 48, .10);
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 20px 38px -30px rgba(60, 52, 36, .6);
	transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.cst_orient__item:hover {
	transform: translateY(-6px);
	border-color: rgba(166, 139, 91, .38);
	box-shadow: 0 30px 50px -30px rgba(60, 52, 36, .55);
}
.cst_orient__img {
	position: relative;
	display: block; width: 100%; aspect-ratio: 4 / 3;
	line-height: 0; overflow: hidden; background: #F4F2ED;
}
.cst_orient__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.cst_orient__item:hover .cst_orient__img img { transform: scale(1.05); }
/* 사진 하단을 흰 카드로 흘려보내 경계선을 지운다 — 컷마다 배경색이 달라 흰 페이드가 가장 무난하다 */
.cst_orient__img::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 100%);
	pointer-events: none;
}
.cst_orient__name {
	display: block; margin-top: 18px;
	font-weight: 700; font-size: 22px; letter-spacing: -0.3px; color: var(--cst-green);
}
.cst_orient__desc {
	margin: 12px 0 0;
	font-weight: 400; font-size: 16px; line-height: 1.65; color: #666;
	word-break: keep-all;
}
.cst_step .cst_title { margin-top: 12px; }
.cst_step .cst_lead { color: #666; font-weight: 500; }
.cst_step__list {
	display: grid; grid-template-columns: repeat(4, 1fr);
	align-items: stretch;   /* 설명 줄 수가 달라도 카드 높이는 동일하게 */
	gap: 26px; margin: 60px 0 0; padding: 0; list-style: none;
}
.cst_step__card {
	position: relative;
	height: 100%;
	display: flex; flex-direction: column; align-items: center;
	padding: 0 0 30px;
	background: linear-gradient(180deg, #FFFFFF 0%, #FDFDFB 100%);
	border: 1px solid #E6EAE2;
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 12px 28px -22px rgba(60, 80, 60, .4);
	transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.cst_step__card:hover {
	transform: translateY(-6px);
	border-color: #CBD9C6;
	box-shadow: 0 26px 44px -26px rgba(60, 80, 60, .55);
}
.cst_step__card:hover .cst_step__img img { transform: scale(1.05); }
/* 원본 컷의 가로세로가 미세하게 달라 비율을 고정해 카드 상단을 맞춘다 */
.cst_step__img {
	display: block; width: 100%; aspect-ratio: 600 / 340;
	line-height: 0; overflow: hidden;
}
.cst_step__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.cst_step__no {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin-top: 24px;
	background: var(--cst-green-3); border-radius: 20px;
	font-weight: 700; font-size: 20px; color: #fff;
}
.cst_step__name {
	display: block; margin-top: 14px;
	font-weight: 700; font-size: 22px; letter-spacing: -0.4px; color: var(--cst-green-3);
}
.cst_step__desc {
	margin: 14px 20px 0;
	font-weight: 500; font-size: 16px; line-height: 1.6; letter-spacing: -0.2px;
	color: #666;
	word-break: keep-all;
}

/* ===== 6. 이런 분께 추천합니다 ===== */
.cst_reco {
	padding: 110px 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #FBF7F0 100%);
}
.cst_reco__grid {
	display: grid; grid-template-columns: 1fr 1.12fr;
	gap: 52px; align-items: center;
}
/* 2026-08-07 컷 교체(jd_custom_sub_img.png, 1542x1536 = 거의 정사각).
 * 원본 비율대로 두면 사진 높이가 560px 을 넘어 오른쪽 글 덩어리(약 380px)보다 한참 커진다
 * → 4:3 으로 잘라 높이를 맞춘다. 자르는 위치는 인물 얼굴이 위쪽 1/3 에 있어 'center 22%'.
 * ⚠ 컷을 바꾸면 aspect-ratio 와 object-position 을 함께 다시 잡아야 한다.
 *   (옛 컷 reco.jpg 는 1474x870 = 가로 1.69 라 자르지 않고 height:auto 로 썼다) */
.cst_reco__media {
	border-radius: 8px; overflow: hidden; line-height: 0;
	aspect-ratio: 4 / 3;
	box-shadow: 0 26px 50px -34px rgba(90, 74, 48, .5);
}
.cst_reco__media img {
	width: 100%; height: 100%; display: block;
	object-fit: cover; object-position: center 22%;
}
.cst_reco__title {
	margin: 18px 0 0;
	font-weight: 800; font-size: 34px; line-height: 1.35; letter-spacing: -0.6px; color: var(--cst-ink);
}
.cst_reco__title em { font-style: normal; color: var(--cst-gold-deep); }
/* ⚠ 2026-08-07 사용자 지시로 마크업에서 뺐다(타이틀 아래 바로 리스트). 되살릴 때를 대비해 규칙만 남긴다. */
.cst_reco__desc {
	margin: 20px 0 0;
	font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--cst-body);
	word-break: keep-all; text-wrap: pretty;
}
/* 2열 체크 리스트 — 박스 없이 헤어라인으로 구획.
 * 2026-08-07 가독성 보강(사용자 지시): 글자 16 → 17.5 / 행간 1.5 → 1.6 / 자간 -0.4 → -0.25 /
 * 칸 높이 17 → 21 / 열 간격 28 → 32 / 글자색 한 단 진하게 / 체크 20 → 22.
 * ⚠ 시그니처 4종(repot·juvegen·custom·slimcare)이 같은 값이다. 한 곳만 고치면 어긋난다. */
.cst_reco__list {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px; margin: 36px 0 0; padding: 0; list-style: none;
	grid-auto-rows: 1fr;   /* 항목 길이가 달라도 모든 행 높이를 통일 → 좌우 줄맞춤 */
	border-top: 1px solid var(--cst-line);
}
.cst_reco__list li {
	display: flex; align-items: center; gap: 14px;
	padding: 21px 2px;
	border-bottom: 1px solid var(--cst-line);
	font-weight: 500; font-size: 17.5px; line-height: 1.6; letter-spacing: -0.25px;
	color: #3B382F;
	word-break: keep-all;
	text-wrap: pretty;
	transition: color .25s ease;
}
.cst_reco__list li:hover { color: var(--cst-green); }
/* 얇은 원형 체크 */
.cst_check {
	position: relative; flex: 0 0 auto;
	width: 22px; height: 22px;
	border: 1px solid #D6C6A4; border-radius: 50%;
	transition: background .25s ease, border-color .25s ease;
}
.cst_check::after {
	content: '';
	position: absolute; left: 5.5px; top: 6.5px;
	width: 9px; height: 4.5px;
	border-left: 1.5px solid var(--cst-gold-deep); border-bottom: 1.5px solid var(--cst-gold-deep);
	transform: rotate(-45deg);
	transition: border-color .25s ease;
}
.cst_reco__list li:hover .cst_check { background: var(--cst-gold-deep); border-color: var(--cst-gold-deep); }
.cst_reco__list li:hover .cst_check::after { border-left-color: #fff; border-bottom-color: #fff; }

/* ===== 7. 자주하는 질문 ===== */
.cst_faq { padding: 110px 0 120px; background: #fff; }
.cst_faq__grid {
	display: grid; grid-template-columns: 380px minmax(0, 1fr);
	gap: 80px; align-items: start;
}
.cst_faq__head { position: sticky; top: 110px; }
.cst_faq__head .cst_title { margin-top: 18px; }
.cst_faq__head .cst_lead { margin-top: 18px; font-size: 18px; line-height: 1.7; }
.cst .cst_faq__cta {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 32px; padding: 14px 28px;
	border: 1px solid var(--cst-green); border-radius: 999px;
	font-weight: 700; font-size: 16px; color: var(--cst-green); text-decoration: none;
	transition: background .25s ease, color .25s ease;
}
/* 화살표 — 2026-08-07 사용자 지시로 CSS 로 그리던 '가는 선 + 45° 촉' 을 이미지로 교체.
 * ⚠ background-image 가 아니라 **mask** 다(hover 에 글자가 흰색이 되므로 currentColor 를 따라가야 한다).
 * ⚠ 같은 화살표가 repot·juvegen·slimcare 의 FAQ CTA 와 main_content 의 .jdh_skin__cta 에도 있다. */
.cst .cst_faq__cta i {
	display: inline-block; width: 24px; height: 9px;
	background-color: currentColor;
	-webkit-mask: url('/img/jd_cursor_arrow.png') center / contain no-repeat;
	        mask: url('/img/jd_cursor_arrow.png') center / contain no-repeat;
}
.cst .cst_faq__cta:hover { background: var(--cst-green); color: #fff; }

/* 아코디언 — 인셋 배경 리스트 (2026-08-10 리디자인, 시그니처 4종 공통 규격)
 * ⚠ 열고 닫을 때 글자가 좌우로 움직이면 안 된다. 예전엔 .is-open 에 padding-left 를 더해
 *   질문 줄이 오른쪽으로 밀렸는데(사용자 지적), 지금은 항목 자체에
 *   `margin: 0 -인셋 / padding: 0 인셋` 을 깔아 **배경만** 좌우로 퍼지게 한다.
 * ⚠ 구분선은 border 가 아니라 ::before/::after 다 — 인셋 배경보다 안쪽(콘텐츠 폭)에 맞춰야 하고,
 *   열린 항목 위아래만 골라서 지워야 카드처럼 떠 보이기 때문.
 * ⚠ Q 는 원형 배지를 걷어내고 세리프 레터로, 답변 머리에는 CSS 로 A 를 붙인다(마크업 수정 불필요).
 *   질문 텍스트 시작선(22+16=38px) 과 답변 들여쓰기를 같은 값으로 맞춰 둔 것이니 한쪽만 바꾸지 말 것. */
.cst_acc {
	--acc-inset: 24px;
	position: relative;
	margin: 0 calc(var(--acc-inset) * -1);
	padding: 0 var(--acc-inset);
	border-radius: 8px;
	transition: background-color .35s ease;
}
.cst_acc::before, .cst_acc::after {
	content: ''; position: absolute; left: var(--acc-inset); right: var(--acc-inset);
	height: 1px; background: var(--cst-line);
	transition: opacity .3s ease;
}
.cst_acc::before { top: 0; opacity: 0; }          /* 리스트 맨 윗선 — 첫 항목만 노출 */
.cst_acc::after  { bottom: 0; }
.cst_acc:first-child::before { opacity: 1; }
.cst_acc.is-open::before, .cst_acc.is-open::after { opacity: 0; }
.cst_acc:has(+ .cst_acc.is-open)::after { opacity: 0; }
.cst_acc:hover:not(.is-open) { background: #FAF8F3; }
.cst_acc__q {
	position: relative;
	display: flex; align-items: flex-start; gap: 16px;
	width: 100%; padding: 26px 44px 26px 0;
	background: none; border: 0; cursor: pointer; text-align: left;
	transition: padding-bottom .4s cubic-bezier(.22,.61,.36,1);
	outline: none; -webkit-tap-highlight-color: transparent;
}
/* 21px×1.25 = 26.25px — 질문 텍스트 첫 줄(18×1.45=26.1px) 과 광학 정렬 */
.cst_acc__mark {
	flex: 0 0 22px;
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: 21px; line-height: 1.25; color: #C0AC7E;
	transition: color .3s ease;
}
.cst_acc__txt {
	flex: 1 1 auto;
	font-weight: 600; font-size: 18px; line-height: 1.45; letter-spacing: -0.3px; color: #33302A;
	transition: color .3s ease;
}
/* +/− 토글 — 세로획만 눕혀서 마이너스가 된다. top 은 질문 첫 줄 중앙(26+13) */
.cst_acc__chev {
	position: absolute; right: 2px; top: 39px;
	width: 15px; height: 15px; margin-top: -7px;
}
.cst_acc__chev::before, .cst_acc__chev::after {
	content: ''; position: absolute; left: 0; top: 50%;
	width: 100%; height: 1.5px; margin-top: -0.75px; border-radius: 2px;
	background: #B3AB9E;
	transition: transform .4s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.cst_acc__chev::after { transform: rotate(90deg); }
.cst_acc__q:hover .cst_acc__txt { color: var(--cst-green); }
.cst_acc__q:hover .cst_acc__mark { color: var(--cst-gold-deep); }
.cst_acc__q:hover .cst_acc__chev::before,
.cst_acc__q:hover .cst_acc__chev::after { background: var(--cst-gold-deep); }
/* 답변 — 높이 애니메이션 */
.cst_acc__a {
	display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows .4s cubic-bezier(.22,.61,.36,1);
}
.cst_acc__a > p {
	position: relative; overflow: hidden;
	margin: 0; padding: 0 44px 0 38px; max-width: 820px;
	font-weight: 400; font-size: 16px; line-height: 1.85; color: var(--cst-body);
	opacity: 0; transition: opacity .3s ease, padding .4s ease;
}
.cst_acc__a > p::before {
	content: 'A'; position: absolute; left: 0; top: 0;
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: 20px; line-height: 1.85; color: var(--cst-green); opacity: .5;
}
.cst_acc.is-open { background: #FAF7F0; }
.cst_acc.is-open .cst_acc__q { padding-bottom: 14px; }
.cst_acc.is-open .cst_acc__mark { color: var(--cst-gold-deep); }
.cst_acc.is-open .cst_acc__txt { color: var(--cst-green); }
.cst_acc.is-open .cst_acc__chev::after { transform: rotate(0deg); }
.cst_acc.is-open .cst_acc__chev::before,
.cst_acc.is-open .cst_acc__chev::after { background: var(--cst-gold-deep); }
.cst_acc.is-open .cst_acc__a { grid-template-rows: 1fr; }
.cst_acc.is-open .cst_acc__a > p { opacity: 1; padding-bottom: 30px; }

/* ===== 8. 장덕한방병원의 약속 ===== */
/* 마지막 섹션 — 그라데이션이 흰색으로 끝나면 푸터 사이에 흰 띠처럼 보이므로
   연한 그린 톤으로 마감하고 여백/마진을 0 으로 정리 */
.cst_promise {
	padding: 110px 0 100px;
	margin-bottom: 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #F1F5EA 42%, #E9F0DF 100%);
}
.cst_promise + * { margin-top: 0; }
.jdh_sub { margin-bottom: 0; }
.jdh_sub + footer.jdh_footer { margin-top: 0; }
.cst_promise__list {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 0; margin: 60px 0 0; padding: 0; list-style: none;
}
.cst_promise__item {
	padding: 6px 34px;
	text-align: center;
}
.cst_promise__item + .cst_promise__item { border-left: 1px solid #E2E7DA; }
/* ⚠ 항목 넘버링(.cst_promise__no 01~04)은 2026-08-11 사용자 지시로 마크업째 제거했다 — 되살리지 말 것. */
.cst_promise__name {
	display: block; margin-top: 0;
	font-weight: 700; font-size: 22px; letter-spacing: -0.4px; color: #223224;
}
.cst_promise__desc {
	margin: 22px 0 0;
	font-weight: 400; font-size: 16px; line-height: 1.75; color: #67706A;
}
/* 하단 문구 바 */
/* ⚠ 2026-08-11 배경을 서명 이미지의 크림 종이색(#F2EEE5)에 맞췄다(투명 배경이 아닌 이미지).
   같은 이유로 `_promise__sign img` 의 mix-blend-mode 도 뺐다. */
.cst_promise__foot {
	display: flex; align-items: center; justify-content: center; gap: 48px;
	margin: 64px 0 0; padding: 26px 40px;
	background: #F2EEE5;
	border: 1px solid #E4DBC6; border-radius: 8px;
}
.cst_promise__foot-txt {
	margin: 0;
	font-weight: 400; font-size: 16px; line-height: 1.75; color: #67706A;
}
.cst_promise__sign { flex: 0 0 auto; line-height: 0; }
.cst_promise__sign img { width: 390px; height: auto; display: block; }

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1440px) {
	/* 4단 스텝은 폭이 좁아지면 설명이 3줄로 깨져 카드 높이가 들쭉날쭉해진다 */
	.cst_step__desc { font-size: 16px; }
	.cst_step__name { font-size: 21px; }
}
@media all and (max-width: 1280px) {
	.cst .cst_inner { padding: 0 28px; }
	/* 시그니처 4종 공통 — 이 구간 히어로 높이 600px (juvegen · repot · slimcare 와 동일) */
	.cst_hero__inner { min-height: 600px; padding: 0 28px 96px; }
	.cst_faq__grid { grid-template-columns: 320px minmax(0, 1fr); gap: 52px; }
	.cst_reco__grid { gap: 44px; }
	.cst_effect { gap: 22px; }
	.cst_step__list { gap: 18px; }
	.cst_promise__item { padding: 6px 20px; }
	.cst_flow { gap: 20px; }
	.cst_flow__step { flex: 0 0 275px; }   /* 4×275 + 3×20 = 1160 ≤ 컨테이너 1224 */
	/* 칸 사이(gap 20px)에 맞춰 화살표를 줄인다 */
	.cst_flow__step + .cst_flow__step::before { left: -26px; width: 22px; height: 10px; }
	.cst_spec { gap: 12px; }
	.cst_spec__value { font-size: 18px; }
}
@media all and (max-width: 1024px) {
	.cst_about, .cst_intro, .cst_core, .cst_benefit, .cst_step, .cst_reco, .cst_faq, .cst_promise { padding: 76px 0; }
	/* 핵심 밴드 — 4칸을 2×2 로. 줄이 바뀌면 축선이 허공을 가리키므로
	 * 두 번째 줄로 넘어가는 칸(3번째)의 왼쪽 축, 첫 줄 끝 칸(2번째)의 오른쪽 축을 끊는다. */
	.cst_core__title { font-size: 30px; }
	.cst_core__sub { font-size: 16px; }
	.cst_core__chain { grid-template-columns: repeat(2, 1fr); gap: 40px 0; margin-top: 48px; }
	.cst_core__no { font-size: 30px; height: 32px; }
	.cst_core__link--goal .cst_core__no { font-size: 17px; }
	.cst_core__name { font-size: 19px; margin-top: 14px; }
	.cst_core__link:nth-child(2) .cst_core__rail::before { right: 50%; }
	.cst_core__link:nth-child(3) .cst_core__rail::before { left: 50%; }
	.cst_title { font-size: 32px; margin-top: 20px; }
	.cst_lead { font-size: 18px; margin-top: 18px; }
	/* 히어로 — 2026-08-04 구조 변경(사용자 지시 "모바일 히어로가 이상하다").
	 * ⚠ 이전 방식의 실제 결함: 배경을 하단 정렬로 깔고 padding-bottom 으로 모델 자리를 비웠는데,
	 *   그 여백(47vw)을 **프레임 비율 2.743** 으로 계산했다. 나눠야 할 값은 이미지 비율
	 *   2050/1024 = 2.002 이므로 배경 실제 높이는 64.9vw — 18vw 가 카피 영역을 파고들어
	 *   본문 아래쪽과 모델이 겹쳐 보였다.
	 * 지금: ::after 이미지 블록이 문서 흐름 안에서 자리를 차지한다 → 블록 높이 = 곧 이미지 높이라
	 *   여백을 손으로 맞출 일이 없다. aspect-ratio 1.335 = 1 ÷ (150% ÷ 2.002).
	 * x 100% + size 150% — 이미지 우측 2/3 만 잘라 써서 우측에 치우쳐 있던 모델을 화면 중앙으로. */
	.cst_hero {
		min-height: 0;
		background: none;
		background-color: #EAE0D7;
	}
	.cst_hero::after {
		content: '';
		display: block;
		width: 100%;
		aspect-ratio: 1.335;
		background: url('/img/signature/custom/hero_bg.jpg') 100% center / 150% auto no-repeat;
		/* 카피 면과의 이음매 — 2026-09-01 사용자 지적("뚝 잘려 보인다").
		   카피 면(.cst_hero 의 background-color #EAE0D7)과 사진의 색이 달라 맞닿는 선이 드러났다.
		   사진 윗변을 마스크로 지우면 그 자리에 부모의 배경색이 비쳐 자연스럽게 이어진다.
		   ⚠ 색을 직접 얹지 않는 이유 — 카피 면 색이 바뀌어도 이 값은 손댈 필요가 없다.
		   ⚠ repot 페이지(page_repot.css .rpt_hero::after)와 같은 처리다. 한쪽만 고치지 말 것. */
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
		        mask-image: linear-gradient(180deg, transparent 0, #000 14%);
	}
	.cst_hero__inner {
		display: block;
		min-height: 0;
		padding: 56px 28px 40px;
	}
	/* 폭이 좁아지면 한 줄 유지가 불가능하므로 자연 줄바꿈을 허용 */
	.cst_hero__desc { white-space: normal; }
	.cst_hero__copy { max-width: none; }
	.cst_hero__desc { font-size: 18px; }
	/* 플로우: 2열 */
	.cst_flow { flex-wrap: wrap; gap: 34px 0; }
	.cst_flow__step { flex: 0 0 50%; }
	.cst_flow__step + .cst_flow__step::before,
	.cst_flow__step + .cst_flow__step::after { display: none; }
	.cst_about__sub { font-size: 18px; }
	/* 효과 카드 2열 */
	.cst_effect { grid-template-columns: repeat(2, 1fr); margin-top: 46px; }
	/* 좌우 2열 → 1열 */
	.cst_intro__grid, .cst_benefit__grid, .cst_reco__grid { grid-template-columns: 1fr; gap: 36px; }
	/* 1열 전환 시: 배경 합성 장비 컷 대신 이미지 블록으로 상단에 노출 */
	/* 1열에서도 배경 컷(jd_custom_bg.png)은 데스크톱과 같은 방식으로 깔린다 — 패딩만 줄인다.
	 * 예전의 1열용 컷 블록(.cst_benefit__grid::before)과 장비 레이어는 2026-08-06 에 함께 걷어냈다. */
	.cst_benefit { padding: 56px 0; }
	/* 장비 진열 — 1열에서는 컬럼이 좁아 데스크톱 크기 그대로면 줄이 넘쳐 잘린다.
	 * 높이와 겹침을 함께 줄여야 한다(둘은 짝). */
	/* 10종 기준 — 데스크톱과 같은 비율로 줄인 값이다(2026-08-07) */
	.cst_fleet__row--back .cst_fleet__unit { height: 140px; }
	.cst_fleet__row--front .cst_fleet__unit { height: 182px; }
	.cst_fleet__row--front { margin-top: -28px; }
	.cst_fleet__unit + .cst_fleet__unit { margin-left: -12px; }
	.cst_fleet__row--back .cst_fleet__unit + .cst_fleet__unit { margin-left: -2px; }
	/* 2026-08-12 — 효과 카드를 **한 줄에 2개씩**(사용자 지시). 기본 3열은 이 폭에서 라벨이 뭉개지고,
	 * 520 이하에서 쓰던 1열은 5장이 화면 하나를 통째로 먹었다.
	 * ⚠ 효과가 5개(홀수)라 마지막 하나가 wrap 된 뒤 justify-content:center 때문에 두 열 사이 중앙에 뜬다
	 *   → 마지막 카드만 한 줄을 다 쓰게 하고 아이콘·글자를 가로로 눕힌다(쥬브젠 .jvg_benefit__item 과 같은 처리).
	 *   정사각(aspect-ratio)을 함께 해제하지 않으면 폭이 두 배가 되면서 높이도 두 배가 된다.
	 * ⚠ 효과 개수가 짝수로 바뀌면 :last-child 규칙을 지울 것. */
	.cst_benefit__list { margin-top: 30px; gap: 10px; }
	.cst_benefit__item { flex: 0 0 calc((100% - 10px) / 2); padding: 20px 10px; gap: 10px; }
	.cst_benefit__item:last-child {
		flex-basis: 100%;
		aspect-ratio: auto;
		flex-direction: row;
		justify-content: center;
		gap: 12px;
		padding: 20px 12px 26px;
	}
	.cst_benefit__item strong { font-size: 16px; }
	.cst_benefit__ic svg { width: 34px; height: 34px; }
	.cst_spec { margin-top: 40px; }
	.cst_intro__title { font-size: 26px; }
	.cst_intro__desc { font-size: 18px; }
	/* 1열로 떨어지면 사진 아래에 글이 통째로 놓인다 — 왼쪽 정렬로 두면 넓은 오른쪽이 비어 보인다.
	 * 시그니처 4종(repot·juvegen·custom·slimcare)이 같은 규칙이다(2026-08-07 사용자 지시). */
	.cst_intro__body { text-align: center; }
	/* 원문 <br> 로 잡아 둔 줄이 좁은 폭에서 한 번 더 접힌다 — keep-all 이 없으면 단어 중간에서 갈린다.
	 * ⚠ <br> 자체는 숨기면 안 된다(원문에 공백이 없어 단어가 붙는다). */
	.cst_intro__desc { word-break: keep-all; }
	.cst_reco__title { font-size: 28px; }
	/* 작용 원리 2열 */
	.cst_step__list { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	/* 한방 3종 — 2026-08-12: 1열 세로 나열은 카드 3장에 1,180px 을 썼다 → **가로 스와이프**.
	 * (설명이 두 줄이라 2열로는 못 접는다는 판단은 그대로다 — 폭을 82% 로 넉넉히 주고 옆으로 넘긴다)
	 * ⚠ max-width:520px + margin auto 를 반드시 함께 걷어낼 것. 남겨 두면 스크롤 영역이 520px 에 묶여
	 *   음수 마진이 어긋난다. 음수 마진(-18px)은 .cst_inner 의 좌우 패딩과 짝이다. */
	.cst_orient {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		gap: 12px;
		margin: 40px -18px 0;
		padding: 0 18px 14px;
		max-width: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 18px;
		-webkit-overflow-scrolling: touch;
	}
	.cst_orient::-webkit-scrollbar { height: 3px; }
	.cst_orient::-webkit-scrollbar-track { background: rgba(60,52,36,.10); border-radius: 999px; }
	.cst_orient::-webkit-scrollbar-thumb { background: rgba(166,139,91,.65); border-radius: 999px; }
	.cst_orient__item { scroll-snap-align: center; }
	.cst_orient__item { padding: 32px 22px 30px; }
	.cst_orient__ic { width: 64px; height: 64px; }
	.cst_orient__ic svg { width: 34px; height: 34px; }
	.cst_orient__name { margin-top: 16px; font-size: 20px; }
	.cst_orient__desc { font-size: 15px; }
	.cst_orient__desc br { display: none; }
	/* FAQ 1열 */
	.cst_faq__grid { grid-template-columns: 1fr; gap: 34px; }
	.cst_faq__head { position: static; }
	/* 약속 2열 */
	.cst_promise__list { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
	.cst_promise__item:nth-child(odd) { border-left: 0; }
	.cst_promise__foot { flex-direction: column; gap: 22px; text-align: center; }
	.cst_promise__sign img { width: 280px; }
}
@media all and (max-width: 768px) {
	/* 2026-08-12 — 좁은 폭에서 어절 중간이 갈리는 곳이 있었다('매선·약 / 침·침을').
	 * 개별 셀렉터 대신 페이지 루트에 한 번만 건다(리팟 .jdh_sub.rpt 와 같은 처리).
	 * ⚠ keep-all 은 영문 단어 사이 줄바꿈은 그대로 허용하므로 낱말이 넘치지 않는다. */
	.jdh_sub.cst { word-break: keep-all; }
	.cst .cst_inner, .cst_hero__inner { padding: 0 18px; }
	.cst_about, .cst_intro, .cst_core, .cst_benefit, .cst_step, .cst_reco, .cst_faq, .cst_promise { padding: 56px 0; }
	/* 2026-09-02 사용자 지시 — 좁은 화면에서도 **가로 축선**을 유지한다("선 부분 가로로 보이게").
	 * 직전에는 1열 + 좌측 세로 타임라인이었다(세로 축 .cst_core__link::before + rail 재배치).
	 * 그 구조로 되돌리지 말 것 — 데스크톱과 같은 4칸 가로 흐름을 크기만 줄여 쓴다.
	 * ⚠ .cst_core__link 의 가로 패딩과 .cst_core__rail::before 의 좌우 음수값은 **같은 값**이어야
	 *   축선이 칸 사이에서 끊기지 않는다(데스크톱은 18px 짝, 여기서는 5px 짝).
	 * ⚠ 이름은 min-height(2.84em)를 푼다 — 좁은 칸에서는 3~5줄이 되므로 고정 최소높이가 의미 없고,
	 *   칸마다 줄 수가 달라도 grid 가 행 높이를 맞춰 준다. */
	.cst_core__title { font-size: 25px; line-height: 1.42; }
	.cst_core__title em::after { height: 10px; bottom: 2px; }
	.cst_core__chain { grid-template-columns: repeat(4, 1fr); gap: 0; margin: 34px 0 0; }
	.cst_core__link { padding: 0 5px; }
	.cst_core__rail { height: 22px; margin-top: 10px; }
	.cst_core__rail::before { left: -5px; right: -5px; }
	/* 1024↓(2×2)에서 줄이 바뀌는 자리라 끊어 뒀던 축선을 다시 잇는다 — 여기서는 한 줄 4칸이다 */
	.cst_core__link:nth-child(2) .cst_core__rail::before { right: -5px; }
	.cst_core__link:nth-child(3) .cst_core__rail::before { left: -5px; }
	.cst_core__rail i { width: 12px; height: 12px; }
	.cst_core__link--goal .cst_core__rail i { width: 17px; height: 17px; }
	.cst_core__no { height: 26px; font-size: 21px; letter-spacing: 1px; }
	.cst_core__link--goal .cst_core__no { font-size: 12.5px; letter-spacing: 2px; }
	.cst_core__name { margin-top: 10px; min-height: 0; font-size: 13px; line-height: 1.42; }
	/* 효과 섹션 — 2026-09-02 사용자 지시로 **장비 진열을 감추고 섹션을 줄인다**
	 * ("기기 이미지 안 보여도 되니 섹션 길이 줄여줘").
	 * 좁은 폭에서 10종을 늘어놓으면 기기 하나가 30px 남짓이라 무엇인지 알아볼 수 없는데,
	 * 그 대가로 섹션만 200px 넘게 길어진다. 장비 라인업은 메인의 증상별 솔루션 칩이 담당한다.
	 * ⚠ 배경 컷(jd_custom_bg.png)도 함께 걷는다 — 진열이 사라진 자리에 배경의 장비 실루엣만
	 *   남으면 맥락 없는 사진이 된다. 아래 크림 그라데이션(데스크톱 배경의 폴백 층)만 남긴다.
	 * ⚠ background-image:none 으로 지우지 말 것 — 그라데이션까지 같이 사라져 흰 면이 된다. */
	.cst_fleet { display: none; }
	.cst_benefit {
		padding: 48px 0 52px;
		background: linear-gradient(100deg, #FAF6F0 0%, #F4EEE4 55%, #EDE5D9 100%);
	}
	.cst_benefit__grid { gap: 0; }
	/* 화면이 좁을수록 인물이 작아지므로 크롭을 한 단 더 키운다(150% → 175%).
	 * aspect-ratio 1.144 = 1 ÷ (175% ÷ 2.002) — size 와 항상 짝으로 고칠 것. */
	.cst_hero::after { aspect-ratio: 1.144; background-size: 175% auto; }
	.cst_hero__inner { padding: 40px 18px 32px; }
	.cst_hero__eyebrow { font-size: 18px; letter-spacing: 3.6px; }
	.cst_hero__desc { font-size: 16px; margin-top: 18px; }
	.cst_title { font-size: 28px; }
	.cst_eyebrow { font-size: 14px; }
	.cst_eyebrow--serif,
	.cst_eyebrow--line { font-size: 14px; letter-spacing: 3.6px; }
	.cst_lead { font-size: 17px; }
	/* 주의: 원문 <br> 에 공백이 없어 br 을 숨기면 단어가 붙는다 → 모바일에서도 유지 */
	/* 플로우 */
	.cst_flow { gap: 26px 0; margin-top: 36px; }
	.cst_flow__ic { width: 86px; height: 86px; }
	.cst_flow__name { font-size: 18px; margin-top: 12px; }
	.cst_flow__desc { font-size: 14px; }
	.cst_about__sub { font-size: 16px; margin-top: 18px; }
	/* 효과 카드 */
	.cst_effect { gap: 12px; margin-top: 36px; }
	/* 2열에서 '처짐 원인 집중 케어' 같은 라벨은 두 줄이 된다 — 고정 높이면 글자가 카드 밖으로 잘린다 */
	.cst_effect__label { height: auto; min-height: 53px; padding: 8px 10px; font-size: 16px; line-height: 1.35; text-align: center; word-break: keep-all; }
	/* 개요/스펙 */
	.cst_intro__sub { font-size: 16px; }
	.cst_intro__title { font-size: 22px; }
	.cst_intro__desc { font-size: 16px; }
	/* 4칸은 모바일에서 너무 좁아 2×2 로 */
	.cst_spec { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
	.cst_spec__item { padding: 8px 2px; }
	.cst_spec__pic { width: 72px; height: 72px; }
	.cst_spec__value { font-size: 16px; }
	/* 효과 카드(5개) 2열 */
	.cst_benefit__list { gap: 10px; }
	.cst_benefit__item { flex: 0 0 calc((100% - 10px) / 2); padding: 20px 10px; gap: 10px; border-left-width: 4px; }
	.cst_benefit__item::after { bottom: 20px; width: 36px; }
	.cst_benefit__item strong { font-size: 15px; }
	.cst_benefit__ic svg { width: 34px; height: 34px; }
	/* 장비 진열 — 앞줄 9개가 화면 폭 안에 들어가는 최대치. 더 키우면 좌우가 잘린다(실측 기준). */
	.cst_fleet__row--back .cst_fleet__unit { height: 94px; }
	.cst_fleet__row--front .cst_fleet__unit { height: 120px; }
	.cst_fleet__row--front { margin-top: -18px; }
	.cst_fleet__unit + .cst_fleet__unit { margin-left: -10px; }
	.cst_fleet__row--back .cst_fleet__unit + .cst_fleet__unit { margin-left: -2px; }
	/* 작용 원리 2열 유지 */
	.cst_step__list { gap: 14px; margin-top: 40px; }
	.cst_step__card { padding-bottom: 24px; }
	.cst_step__no { width: 34px; height: 34px; margin-top: 18px; font-size: 18px; }
	.cst_step__name { font-size: 18px; margin-top: 10px; }
	.cst_step__desc { font-size: 14px; margin: 10px 12px 0; }
	/* 추천 리스트 1열 */
	.cst_reco__title { font-size: 22px; }
	.cst_reco__desc { font-size: 16px; }
	.cst_reco__list { grid-template-columns: 1fr; margin-top: 26px; }
	.cst_reco__list li { font-size: 16.5px; padding: 17px 2px; }
	/* FAQ */
	.cst_acc { --acc-inset: 14px; }   /* inner padding 18px 보다 좁게 — 넘치면 가로 스크롤 생긴다 */
	.cst_acc__q { gap: 12px; padding: 20px 30px 20px 0; }
	.cst_acc.is-open .cst_acc__q { padding-bottom: 12px; }
	.cst_acc__chev { right: 0; top: 32px; width: 13px; height: 13px; }
	.cst_acc__mark { flex-basis: 18px; font-size: 18px; }
	.cst_acc__txt { font-size: 16px; }
	.cst_acc__a > p { padding: 0 0 0 30px; font-size: 15px; }
	.cst_acc__a > p::before { font-size: 18px; }
	.cst_acc.is-open .cst_acc__a > p { padding-bottom: 22px; }
	.cst .cst_faq__cta { margin-top: 24px; padding: 12px 22px; font-size: 15px; }
	/* 약속 1열 */
	/* 2026-09-02 사용자 지시 — 좁은 화면에서 **한눈에 들어오도록 카드 2×2**로 바꾼다.
	   1열 + 구분선 목록은 네 항목이 세로로만 800px 넘게 늘어져 한 번에 훑기 어려웠다.
	   ⚠ 1열로 되돌리지 말 것. 시그니처 4종(juvegen·repot·custom·slimcare)이 같은 규칙이다 —
	     한 파일만 고치면 페이지끼리 어긋난다.
	   ⚠ 기본 규칙의 `__item + __item { border-left }` 를 이기려면 인접 선택자를 함께 적어야 한다
	     (예전의 `border-left:0 !important` 는 이 방식으로 대체했다). */
	.cst_promise__list { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
	.cst_promise__item,
	.cst_promise__item + .cst_promise__item {
		padding: 20px 12px 18px;
		background: rgba(255,255,255,.72);
		border: 1px solid #E2E7DA;
		border-radius: 10px;
	}
	/* ⚠ keep-all 필수 — 칸이 149px 로 좁아 없으면 '시스/템', '진/료' 처럼 낱말 중간에서 갈린다 */
	.cst_promise__name { font-size: 16px; letter-spacing: -.3px; word-break: keep-all; }
	.cst_promise__desc { font-size: 13px; line-height: 1.62; margin-top: 8px; word-break: keep-all; }
	.cst_promise__foot { margin-top: 40px; padding: 22px 18px; }
	.cst_promise__foot-txt { font-size: 15px; }
	.cst_promise__sign img { width: 230px; }
}
@media all and (max-width: 520px) {
	/* 4단계 카드는 2열에서 설명이 과하게 접히므로 1열로 */
	.cst_step__list { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
	/* ⚠ 2026-08-12 — .cst_effect 를 1열로 내리던 규칙을 걷어냈다.
	 *   카드가 [사진 + 라벨 한 줄]뿐이라 2열에서도 충분히 읽히는데, 1열로 내리면 4장이 980px 을 먹었다.
	 *   2열이면 4장이 2×2 로 딱 떨어져 빈 칸도 없다(같은 이유로 슬림케어 .slm_effect 도 2열을 유지한다). */
	.cst_flow__step { flex: 0 0 100%; }
	/* ⚠ 2026-08-12 — .cst_benefit__item 을 1열(flex-basis 100%)로 내리던 규칙을 걷어냈다.
	 *   위 768 블록의 2열 + 마지막 와이드 배치가 이 폭에서도 그대로 유지된다(사용자 지시: 한 줄에 2개). */
	.cst_spec { grid-template-columns: repeat(2, 1fr); }
}