@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/slimcare.jsp 전용)
 * Figma node 593:6909 (Frame 427320281)
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 *
 * 수치 기준: 흑자 X 리팟레이저(page_repot.css) 의 컴포넌트 값을 그대로 승계한다.
 *   - inner max-width 1440 / padding 0 40px
 *   - 섹션 padding 120px 0 (반응형 1024:76 / 768:56)
 *   - 타이틀 40px·800 / 리드 20px / 아이브로우 20px(세리프 30px)
 *   - 카드·이미지 박스 radius 8px (프로젝트 공통 규칙 — Figma 10px 대신 8px 통일)
 * 리팟과 다른 점(= Figma 구조 차이)
 *   - 작용 원리 4단계 (리팟은 5단계) → 그리드 4열
 *   - 시술정보 3칸에 보조문구(.slm_spec__note) 존재
 *   - 시술정보 값이 길어(국소 마취 / 무마취) 칸 최소폭을 리팟보다 넓게 잡음
 * ========================================================================= */

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

/* 공통 헤더 블록 */
.slm_head { text-align: center; }
.slm_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 전체 통일) — 되살리지 말 것.
   .slm_eyebrow(한글용) 는 Pretendard 라 이 규격을 적용하지 않는다. */
.slm_eyebrow--serif,
.slm_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(--slm-gold);
}
.slm_title {
	margin: 26px 0 0;
	font-weight: 800; font-size: 40px; line-height: 1.31; letter-spacing: -0.72px;
	color: var(--slm-ink);
}
.slm_title--left { text-align: left; }
.slm_lead {
	margin: 26px 0 0;
	font-weight: 400; font-size: 20px; line-height: 1.47; color: var(--slm-body);
}
.slm_lead--tight { margin-top: 14px; }
.slm_lead--left { text-align: left; }

/* ===== 1. 히어로 (Figma node 593:7381 = Frame 427320282) =====
 * 이미지 두 장 구조 — 바닥 배경(jd_body_bg.png 1920×802)은 background,
 * 우측 모델 컷(jd_body_model.png 529×802)은 .slm_hero__media 로 분리했다.
 *   ※ 2026-08-04 모델 컷 교체(622×800 → 529×802). 새 컷은 좌우 투명 여백이 거의 없고 인물이 캔버스를
 *     꽉 채운다 → 같은 width 를 주면 인물이 이전보다 크고 왼쪽으로 나와 보이므로 width·right 를 다시 잡았다.
 * 이 히어로는 **밝은 배경 + 어두운 카피** 조합(#3C2B0A / #284232 / #553908)이라
 * 리팟·커스텀처럼 화이트 베일을 깔지 않는다(베일을 깔면 배경 광선만 흐려진다).
 *
 * ⚠ 높이 — 2026-08-04 사용자 지시로 시그니처 4종(주름 X 쥬브젠 기준) 히어로 높이를 통일했다.
 *   aspect-ratio(1920/700) 로 폭에 따라 높이가 변하던 것을 걷어내고
 *   .slm_hero__inner 의 min-height 720px / 1280↓ 600px / 1024↓ 세로 쌓기로 맞췄다.
 *   (juvegen · repot 과 같은 값. 한쪽만 바꾸면 다시 어긋나므로 4개 파일을 함께 볼 것)
 *   배경은 cover 라 높이가 바뀌면 좌우가 조금 더 잘린다 — 곡선 광선 결은 유지되는 범위다.
 *
 * 모델 컷 크기 기준
 *   · 히어로 높이가 고정값이 됐으므로 모델도 폭(%)이 아니라 **높이 100%** 로 맞춘다.
 *     폭 기준(24.05%) 을 그대로 두면 높이 고정 구간에서 인물이 히어로를 넘치거나 바닥에 뜬다.
 *   · right 13%(=250/1920) — 이 PNG 는 캔버스 우측에 투명 여백이 143px 있고 인물 폭도
 *     397px(이전 컷 643px)로 좁아, 우측 여백만 상쇄하면(right 4.53%) 인물 중심이
 *     화면 1491px 까지 밀려 오른쪽으로 치우쳐 보인다.
 *     → right 13% 로 왼쪽으로 옮겨 인물을 화면 1130~1526px(중심 1328px)에 둔다.
 *       카피의 실제 최장 줄(타이틀 약 776px → 화면 1056px)과 74px 간격이 남는다.
 *   ⚠ right 를 15% 이상으로 더 키우면 인물이 타이틀 끝에 닿기 시작한다
 *     (15% → 인물 시작 1092px, 간격 36px). 그 이상 옮기려면 카피 폭도 함께 줄여야 한다.
 * ⚠ 모델 PNG 의 투명 여백이 바뀌면 right 값을 다시 잡아야 한다(폭은 높이 100% 에서 자동 산출). */
.slm_hero {
	position: relative;
	overflow: hidden;
	/* 높이는 .slm_hero__inner 의 min-height 가 정한다(시그니처 4종 공통 666px) */
	background: url('/img/jd_body_bg.png') center center / cover no-repeat;
	background-color: #EFE2CE;   /* 이미지 로드 전 폴백(배경 크림 톤) */
}
/* 우측 모델 컷 — 히어로 하단에 붙고 높이를 꽉 채운다 */
/* 2026-08-04 사용자 요청 — "허벅지 쪽 좀 잘려도 되니 크게, 살짝 왼쪽으로".
 *   · 기준을 bottom:0 → top:0 으로 뒤집었다. bottom 기준에서 키우면 머리가 잘리기 때문.
 *     top 기준 + height 116% 라 넘치는 16%(원본 y673 아래 = 허벅지 중간)가 .slm_hero 의
 *     overflow:hidden 에 잘려 나간다. 원본 상단 여백(40/802 ≈ 5%)이 머리 위 숨통을 만든다.
 *   · right 19% → 22% (1920px 화면에서 58px 왼쪽).
 * ⚠ 폭은 높이에서 자동 산출된다(종횡비 529/802) — 720px×116% → 표시폭 551px.
 *   그만큼 카피 쪽으로 넓어져 1440px 이하에서는 아래 반응형이 right 를 12% 로 되돌린다. */
/* 2026-08-28 모델 컷 교체(hero_body_model.png 1118×1400 — 사용자 지급 jd_body_model_06).
 *   새 컷은 세로 1400px 기준으로 리사이징하여 적용됨. */
.slm_hero__media {
	position: absolute; right: 20%; top: 0; bottom: auto; z-index: 1;
	height: 116%; width: auto;
	line-height: 0;
	pointer-events: none;
}
.slm_hero__media img {
	width: auto; height: 100%; display: block;
}
.slm_hero__inner {
	position: relative; z-index: 2;
	max-width: 1440px; margin: 0 auto; padding: 0 40px;
	/* 시그니처 4종 공통 히어로 높이 — juvegen · repot · custom 과 같은 값(2026-08-04, 666 → 720px) */
	min-height: 720px;
	display: flex; align-items: center;
}
.slm_hero__copy { max-width: 680px; }
/* Figma: Cormorant Garamond 700 / 25px / letter-spacing 20.4%(=5.1px) / UPPER / #3C2B0A */
.slm_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: #3C2B0A;
}
/* Figma: 80px / #284232 (이 페이지의 최대 폰트 = 히어로 타이틀) */
.slm_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(--slm-green);
}
.slm_hero__title em { font-style: normal; }
/* Figma: 24px / #553908 / 블록 폭 525px (두 줄이 gap 10px 로 떨어져 있어 line-height 1.8 로 환산) */
.slm_hero__desc {
	margin: 30px 0 0;   /* Figma 카피그룹 gap 30px */
	max-width: 525px;
	font-weight: 400; font-size: 24px; line-height: 1.8; letter-spacing: -0.3px;
	color: #553908;
}

/* ===== 2. ABOUT JD SLIM CARE ===== */
.slm_about {
	padding: 120px 0;
	background: #EFE5DC url('/img/signature/slimcare/about_bg.jpg') center center / cover no-repeat;
}
.slm_about__sub {
	margin: 22px 0 0;
	font-weight: 700; font-size: 16px; line-height: 1.45; letter-spacing: -0.1px; color: #1F1F1F;
}
.slm_about .slm_title { margin-top: 6px; color: #2E4236; }

/* 4단계 원형 플로우 */
.slm_flow {
	display: flex; align-items: flex-start; justify-content: center;
	gap: 40px; margin: 60px 0 0; padding: 0; list-style: none;
}
.slm_flow__step {
	flex: 0 0 240px;
	display: flex; flex-direction: column; align-items: center;
	padding: 0 8px; text-align: center;
}
.slm_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);
}
.slm_flow__ic img { width: 100%; height: 100%; object-fit: cover; }
.slm_flow__name {
	display: block; margin-top: 18px;
	font-weight: 700; font-size: 20px; letter-spacing: -0.17px; color: var(--slm-green);
}
.slm_flow__desc {
	margin: 9px 0 0;
	font-weight: 400; font-size: 15px; line-height: 1.43; color: var(--slm-body-2);
	word-break: keep-all;
}
/* 단계 사이 화살표 (Figma arrow-right-alt 아이콘을 CSS 로 대체) */
.slm_flow__step + .slm_flow__step { position: relative; }
/* 화살표 — 2026-08-06(2차) CSS 로 그리던 축+촉을 이미지로 교체(사용자 지정 jd_cursor.png).
 * 원본 여백을 트림한 `/img/jd_cursor_arrow.png` 를 쓴다(원본은 여백이 70%라 그대로 쓰면 작아진다).
 * ⚠ 같은 화살표가 page_custom.css · page_juvegen.css 에도 있다. 고칠 때 셋을 함께 볼 것. */
.slm_flow__step + .slm_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;
}
.slm_flow__step + .slm_flow__step::after { content: none; }

/* 매선의 '한방실리프팅' 처럼 시술명에 붙는 부연 — 한 단 작고 옅게 */
.slm_flow__sub {
	display: inline-block; margin-top: 2px;
	font-weight: 500; font-size: 15px; letter-spacing: -0.2px; color: var(--slm-body-2);
}

/* =========================================================================
 * 복합시술 아치(반원) 배치 — 2026-08-07(7차, 전달 시안)
 * 6차까지는 온전한 원 둘레에 사진 4장 + 가운데 카피였는데,
 * 시안이 '위로 볼록한 호 위에 4장을 얹고 카피는 호 아래 가운데' 로 바뀌었다.
 *
 * ── 좌표 규칙 ─────────────────────────────────────────────────────────
 *   --arc-r  : 호의 반지름          --arc-cy : 컨테이너 상단 기준 호의 중심 y
 *   --node   : 노드 사진 지름       (중심은 가로 한가운데 = left:50%)
 *   노드는 호 위 -48° / -16° / +16° / +48° 에 얹는다(등간격 32°).
 *     x = 50% + R·sinθ,  y = --arc-cy − R·cosθ   → sin/cos 는 상수로 박아 뒀다
 *     sin16=.2756 cos16=.9613 / sin48=.7431 cos48=.6691
 *   호의 중심은 컨테이너 아래쪽 바깥에 있다(--arc-cy > 컨테이너 높이).
 *   그래서 화면에는 위쪽 호만 남고 양 끝은 아래로 빠져나간다.
 * ── 값을 바꿀 때 ──────────────────────────────────────────────────────
 *   --arc-r 을 키우면 호가 완만해지고 좌우로 넓어진다. 그때
 *     ① 컨테이너 width ≥ (R·.7431 + --node/2) * 2   ← 바깥 사진이 잘리지 않을 폭
 *     ② --arc-cy = R·.9613 + --node/2 + 위 여백      ← 안쪽 사진 윗변을 여백에 맞춘다
 *     ③ 컨테이너 height = --arc-cy − R·.6691 + --node/2 + 아래 여백
 *   세 줄을 함께 다시 잡아야 한다. SVG viewBox 도 데스크톱 컨테이너 크기와 같은 값이다.
 * ========================================================================= */
.slm_combo {
	--arc-r: 540px; --arc-cy: 619px; --node: 168px;
	position: relative;
	width: 1000px; max-width: 100%; height: 370px;
	margin: 56px auto 0;
}
/* 호 — SVG 한 줄. 양 끝을 그라데이션으로 흐려 화면 밖으로 빠지게 한다(딱 끊으면 잘린 선처럼 보인다).
 * preserveAspectRatio:none 이라 컨테이너가 줄어도 viewBox 가 그대로 늘어난다
 * → 노드 좌표(calc)와 호가 어긋나지 않는다. stroke 는 non-scaling 이라 굵기만 유지된다. */
.slm_combo__arc {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	overflow: hidden;   /* viewBox 밖으로 흘러내리는 꼬리를 자른다 — 잘리는 지점은 이미 거의 투명하다 */
	pointer-events: none;
}
/* 노드 4개 — 기본 .slm_flow(flex 가로 나열)를 절대배치로 갈아탄다 */
.slm_flow--arc { display: block; margin: 0; padding: 0; gap: 0; }
.slm_flow--arc .slm_flow__step {
	position: absolute; flex: none;
	width: var(--node); margin-left: calc(var(--node) / -2); padding: 0;
}
/* 가로 나열용 화살표/플러스 구분자는 여기서는 필요 없다 */
.slm_flow--arc .slm_flow__step + .slm_flow__step::before { content: none; }
/* 왼쪽 → 오른쪽. top 은 '사진 윗변' 기준이라 노드 반지름만큼 당겨 준다 */
.slm_flow__step--a1 { left: calc(50% - var(--arc-r) * .7431); top: calc(var(--arc-cy) - var(--arc-r) * .6691 - var(--node) / 2); }
.slm_flow__step--a2 { left: calc(50% - var(--arc-r) * .2756); top: calc(var(--arc-cy) - var(--arc-r) * .9613 - var(--node) / 2); }
.slm_flow__step--a3 { left: calc(50% + var(--arc-r) * .2756); top: calc(var(--arc-cy) - var(--arc-r) * .9613 - var(--node) / 2); }
.slm_flow__step--a4 { left: calc(50% + var(--arc-r) * .7431); top: calc(var(--arc-cy) - var(--arc-r) * .6691 - var(--node) / 2); }

.slm_flow--arc .slm_flow__ic {
	box-sizing: border-box;
	width: var(--node); height: var(--node);
	border: 6px solid #fff;
	box-shadow: 0 18px 34px -18px rgba(70, 58, 40, .5);
}

/* 4가지를 합친 결과 카피 — 호 아래 가운데. 바깥쪽 사진 두 장과 같은 높이대라
 * 호가 카피를 감싸 안는 모양이 된다(= 시안).
 * 폭은 안쪽 사진 두 장 사이가 아니라 바깥쪽 사진 사이 — 세로가 겹치는 건 바깥쪽뿐이다. */
.slm_combo__msg {
	position: absolute; left: 50%;
	top: calc(var(--arc-cy) - var(--arc-r) * .6691);
	transform: translate(-50%, -50%);
	width: calc((var(--arc-r) * .7431 - var(--node) / 2 - 20px) * 2); margin: 0;
	font-weight: 700; font-size: 26px; line-height: 1.4; letter-spacing: -0.5px;
	text-align: center; color: var(--slm-green);
	word-break: keep-all;
}
.slm_combo__msg strong { display: inline-block; margin-top: 6px; font-size: 32px; }
.slm_combo__msg em {
	font-style: normal; margin: 0 2px;
	color: var(--slm-gold-deep);
}
/* '강력한 효과!' 만 골드 형광펜 — 글자색은 그대로 둬야 밝은 배경에서도 또렷하다 */
.slm_combo__msg strong {
	position: relative; z-index: 0; font-weight: 800;
}
.slm_combo__msg strong::after {
	content: '';
	position: absolute; z-index: -1;
	left: -6px; right: -6px; bottom: 4px; height: 14px;
	background: linear-gradient(90deg, rgba(216,189,139,.6) 0%, rgba(216,189,139,.3) 100%);
	border-radius: 2px;
}

/* 구분선 — 가운데 영문 라벨을 얹은 헤어라인(원고 지시).
 * 복합시술 블록과 효과 카드가 같은 크림 배경 위에 연달아 놓여 경계가 없어 보이던 걸 갈라 준다. */
.slm_divider {
	display: flex; align-items: center; gap: 26px;
	margin: 58px auto 0; max-width: 900px;
}
.slm_divider::before,
.slm_divider::after {
	content: ''; flex: 1 1 auto; height: 1px;
	background: linear-gradient(90deg, rgba(166,139,91,0) 0%, rgba(166,139,91,.4) 100%);
}
.slm_divider::after { background: linear-gradient(90deg, rgba(166,139,91,.4) 0%, rgba(166,139,91,0) 100%); }
.slm_divider span {
	flex: 0 0 auto;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700; font-size: 22px; letter-spacing: 4.6px; text-transform: uppercase;
	color: var(--slm-gold-deep);
	white-space: nowrap;
}

/* 4개 효과 썸네일 카드 */
.slm_effect {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 30px; margin: 70px 0 0; padding: 0; list-style: none;
}
.slm_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;
}
.slm_effect__item:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 40px -22px rgba(70, 58, 40, .5);
}
/* 세로 비율 — 2026-08-07 사용자 지시로 늘렸다(286/154 → 286/196).
 * 라벨을 걷어낸 뒤 카드가 납작해 보였고, 세로형인 온다 장비 컷도 이 비율에서 더 크게 들어간다. */
.slm_effect__thumb { display: block; aspect-ratio: 286 / 196; line-height: 0; }
.slm_effect__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 2026-08-07(3차): 2번 칸에 있던 contain + 흰 바탕 예외를 걷어냈다.
 * 저해상도 누끼(288x681)를 쓰던 시절의 임시 처리였고, 지금은 배경이 들어간 정식 컷
 * (/img/jd_onda_02.png)이라 다른 카드와 똑같이 cover 로 채우면 된다. */
/* 사진만 남기는 모드 — 2026-08-07 잠깐 썼다가 6차에 라벨을 되살리며 마크업에서 뺐다.
 * ⚠ 규칙은 남겨 둔다(클래스만 다시 붙이면 사진 카드로 돌아간다). 지금은 쓰이지 않는다. */
.slm_effect--nolabel .slm_effect__item { line-height: 0; }
.slm_effect--nolabel .slm_effect__label { display: none; }
/* 카드 아래 설명 — '매선실과 한약재, 약침 주사기' 처럼 긴 문구가 있어
 * 높이는 고정이 아니라 최소값으로 두고 두 줄까지 흘릴 수 있게 한다. */
.slm_effect__label {
	display: flex; align-items: center; justify-content: center;
	min-height: 60px; padding: 8px 12px;
	font-weight: 700; font-size: 20px; line-height: 1.35; letter-spacing: -0.2px;
	text-align: center; color: var(--slm-green);
	word-break: keep-all;
}

/* ===== 3. JD슬림케어 소개 ===== */
.slm_intro { padding: 120px 0; background: #fff; }
.slm_intro__grid {
	display: grid; grid-template-columns: 764fr 637fr;
	gap: 39px; align-items: center;
}
.slm_intro__media {
	border-radius: 8px; overflow: hidden; line-height: 0;
	background: #F1F2F0;
}
.slm_intro__media img { width: 100%; height: auto; display: block; }
.slm_intro__body { display: flex; flex-direction: column; }
.slm_intro__sub {
	margin: 0;
	font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: -0.2px; color: #111;
}
.slm_intro__title {
	margin: 8px 0 0;
	font-weight: 800; font-size: 30px; line-height: 1.3; letter-spacing: -0.2px; color: #2E4236;
}
.slm_intro__title em { font-style: normal; color: var(--slm-gold-deep); }
.slm_intro__desc {
	margin: 24px 0 0;
	font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.2px; color: #333;
}
.slm_intro__desc + .slm_intro__desc { margin-top: 20px; }

/* 시술 정보 3칸 — Figma 처럼 좌측에 모아 배치.
 * '국소 마취 / 무마취' 가 한 줄로 들어가는 최소 폭(192px)으로 잡았다. */
.slm_spec {
	display: grid; grid-template-columns: repeat(3, minmax(0, 192px));
	gap: 20px; margin: 56px 0 0; padding: 0; list-style: none;
}
.slm_spec__item {
	display: flex; flex-direction: column; align-items: center;
	padding: 8px 10px;
	text-align: center;
}
/* 2026-08-10 — 원형 SVG 아이콘(.slm_spec__ic)과 영문 라벨(.slm_spec__label)을 걷어내고
 * 사용자가 준 픽토그램 이미지 한 장으로 대체했다(아이콘 + 라벨을 둘 다 대신한다).
 * ⚠ 라벨(TIME·ANESTHESIA…)을 되살리지 말 것. 시그니처 4개 페이지 공통 규격(88px). */
.slm_spec__pic {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
}
/* 항목명(2026-08-11) — 픽토그램만으로 마취/회복이 구분되지 않는다는 지적으로 추가.
   ⚠ 되살리지 말라던 건 영문 라벨(TIME·ANESTHESIA…)이다. 이 한글 항목명은 지우지 말 것. */
.slm_spec__name {
	display: block; margin-top: 14px;
	font-weight: 500; font-size: 13px; letter-spacing: -0.2px; color: rgba(28,30,26,.5);
}
.slm_spec__value {
	display: block; margin-top: 5px;
	font-weight: 700; font-size: 18px; letter-spacing: -0.3px; color: var(--slm-green);
	white-space: nowrap;
}
/* Figma 보조문구 — 값 아래 작은 회색 한 줄 */
.slm_spec__note {
	display: block; margin-top: 6px;
	font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: -0.2px;
	color: #9A958C;
	word-break: keep-all;
}

/* ===== 4. 온다(ONDA) 다양한 효과 =====
 * 장비 컷을 카드 바로 옆에 붙인다 — 주름 X 쥬브젠(jvg_benefit) · 처짐 X 커스텀레이저와 같은 방식.
 *   · 통짜 배경(effect_bg.jpg 1795×951)을 우측 정렬로 깔면 장비가 화면 오른쪽 끝까지
 *     밀려나 카드와 멀어진다 → **장비 부분만 크롭한 컷**(effect_device.jpg 1075×951,
 *     effect_bg 의 x720~1795 구간)을 ::before 레이어로 카드 오른쪽 옆에 놓는다.
 *   · left: calc(50% - 40px) → 컨테이너가 가운데 정렬이고 카드가 좌측 절반을 쓰므로
 *     어떤 화면 폭에서도 '카드 오른쪽 옆' 위치가 유지된다.
 *   · `auto 100%`(높이 기준) → 이미지가 섹션 높이를 꽉 채운다.
 *     폭 기준으로 깔면 이미지 높이가 섹션보다 작아 상·하에 띠가 생겨 잘린 것처럼 보인다.
 *   · ⚠ 레이어 폭 주의 — 이 컷은 비율이 1.13(세로로 긴 편)이라 높이를 꽉 채워도 폭이
 *     크게 늘지 않는다(섹션 824px → 이미지 폭 약 927px). 레이어가 그보다 넓으면 좌우에
 *     빈 공간이 생기므로 44vw / 최대 900px 로 제한했다(커스텀레이저는 비율 1.33 이라 50vw).
 *   · mask 는 좌·우만. 베이스 그라데이션 우측은 크롭 컷 좌측 픽셀색(#F1EAE4)에 맞췄다. */
.slm_benefit {
	position: relative;
	overflow: hidden;
	padding: 120px 0;
	background: linear-gradient(100deg, #FCFAF7 0%, #F7F2EE 55%, #F2EBE5 100%);
}
/* 2026-09-14 — 사용자 지급 컷으로 **배경과 장비를 분리**했다(중국어 검수 "이미지 수정").
 *   · ::before = 배경 /img/body_sub_bg.png (1249×697, 오른쪽에 링·왼쪽에 파동)
 *   · ::after  = 장비 /img/body_onda.png (935×977, 투명 PNG, 받침대 포함)
 *   두 레이어 모두 **같은 기준점 X = 50% + 300px**(카드 오른쪽 열 가운데) 에 놓는다 —
 *   배경은 링 중심(이미지 폭의 78% 지점)이, 장비는 자기 중심이 그 점에 오도록 translateX 로 맞춘다.
 *   그래서 화면 폭·섹션 높이(언어별 카드 문구 길이)가 달라져도 장비가 항상 링 안에 선다.
 *   · 높이는 top/bottom 으로 잡고 폭은 aspect-ratio 로 따라오게 한다(배경은 auto 100% 와 같은 효과).
 *   · 배경 좌·우 가장자리는 mask 로 흐려 베이스 그라데이션에 녹인다.
 *   ⚠ 옛 합성 컷(effect_device.jpg)은 남겨 두었다 — 되돌릴 때는 이 두 규칙을 지우고 예전 ::before 를 복구할 것. */
.slm_benefit::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: calc(50% + 300px);
	width: auto;
	aspect-ratio: 1249 / 697;
	transform: translateX(-78%);
	background: url('/img/body_sub_bg.png') center center / 100% 100% no-repeat;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 220px, #000 calc(100% - 120px), transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, #000 220px, #000 calc(100% - 120px), transparent 100%);
	pointer-events: none;
}
.slm_benefit::after {
	content: '';
	position: absolute;
	top: 7%; bottom: 5%;
	left: calc(50% + 300px);
	width: auto;
	aspect-ratio: 935 / 977;
	transform: translateX(-50%);
	background: url('/img/body_onda.png') center center / contain no-repeat;
	pointer-events: none;
}
.slm_benefit > .slm_inner { position: relative; z-index: 1; }
.slm_benefit__grid {
	display: grid; grid-template-columns: 1fr 1.02fr;
	gap: 40px; align-items: center;
}
/* ⚠ 열은 `1fr` 이 아니라 `minmax(0, 1fr)` 이어야 한다.
   `1fr` 의 최소값은 auto(=min-content) 라, 카드 안 문구가 길면 열이 그만큼 **부풀어**
   그리드가 컨테이너를 통째로 넘는다. 한국어는 낱말이 짧아 드러나지 않았지만
   일본어에서 카드 목록이 부모보다 64px 넓어져 오른쪽으로 삐져나왔다(2026-09-04 실측).
   minmax(0,…) 로 두면 열이 컨테이너를 넘지 않고 문구가 접힌다. */
.slm_benefit__list {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px; margin: 44px 0 0; padding: 0; list-style: none;
}
.slm_benefit__item {
	position: relative;
	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: 텍스트 아래 짧은 구분선 */
.slm_benefit__item::after {
	content: '';
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
	width: 46px; height: 1px; background: #BBC1B7;
}
.slm_benefit__item:hover {
	transform: translateY(-5px);
	border-left-color: var(--slm-green-2);
	box-shadow: 0 22px 38px -22px rgba(120, 98, 58, .45);
}
.slm_benefit__ic { display: inline-flex; color: var(--slm-green-2); }
.slm_benefit__ic svg { width: 41px; height: 41px; }
.slm_benefit__item strong {
	font-weight: 700; font-size: 18px; letter-spacing: -0.3px; color: var(--slm-green-2);
	word-break: keep-all;
}

/* ===== 5. 온다(ONDA) 리프팅, 이렇게 작용합니다 (4단계) ===== */
.slm_step {
	padding: 110px 0 120px;
	background: #E1E7DA url('/img/signature/slimcare/process_bg.jpg') center center / cover no-repeat;
}
.slm_step .slm_title { margin-top: 12px; }
.slm_step .slm_lead { color: #666; font-weight: 500; }
.slm_step__list {
	display: grid; grid-template-columns: repeat(4, 1fr);
	align-items: stretch;   /* 설명 줄 수가 달라도 카드 높이는 동일하게 */
	gap: 26px; margin: 60px 0 0; padding: 0; list-style: none;
}
.slm_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;
}
.slm_step__card:hover {
	transform: translateY(-6px);
	border-color: #CBD9C6;
	box-shadow: 0 26px 44px -26px rgba(60, 80, 60, .55);
}
.slm_step__card:hover .slm_step__img img { transform: scale(1.05); }
/* 원본 컷의 가로세로가 미세하게 달라 비율을 고정해 카드 상단을 맞춘다 */
.slm_step__img {
	display: block; width: 100%; aspect-ratio: 600 / 340;
	line-height: 0; overflow: hidden;
}
.slm_step__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
/* 2026-08-10: 번호·제목의 딥그린(--slm-green-3)을 걷어내고 골드로 바꿨다(사용자 지시 "초록 말고 다른색").
 * 배경이 연한 민트그레이 사진이라 그린이 배경에 묻혔다. 골드는 이 페이지가 이미 쓰는 포인트색
 * (아이브로우·복합시술 강조)이라 새 색을 들이지 않고도 대비가 선다.
 * 제목은 먹(--slm-ink)으로 — 배지까지 골드라 제목도 골드면 카드 4장이 산만해진다. */
.slm_step__no {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin-top: 24px;
	background: linear-gradient(135deg, #C0A473 0%, var(--slm-gold-deep) 100%);
	border-radius: 20px;
	box-shadow: 0 6px 14px -8px rgba(150, 118, 68, .8);
	font-weight: 700; font-size: 20px; color: #fff;
}
.slm_step__name {
	display: block; margin-top: 14px;
	font-weight: 700; font-size: 22px; letter-spacing: -0.4px; color: var(--slm-ink);
}
.slm_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. 이런 분께 추천합니다 ===== */
.slm_reco {
	padding: 110px 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #FBF7F0 100%);
}
.slm_reco__grid {
	display: grid; grid-template-columns: 1fr 1.12fr;
	gap: 52px; align-items: center;
}
.slm_reco__media {
	border-radius: 8px; overflow: hidden; line-height: 0;
	box-shadow: 0 26px 50px -34px rgba(90, 74, 48, .5);
}
.slm_reco__media img { width: 100%; height: auto; display: block; }
.slm_reco__title {
	margin: 18px 0 0;
	font-weight: 800; font-size: 34px; line-height: 1.35; letter-spacing: -0.6px; color: var(--slm-ink);
}
.slm_reco__title em { font-style: normal; color: var(--slm-gold-deep); }
/* ⚠ 2026-08-07 사용자 지시로 마크업에서 뺐다(타이틀 아래 바로 리스트). 되살릴 때를 대비해 규칙만 남긴다. */
.slm_reco__desc {
	margin: 20px 0 0;
	font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--slm-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)이 같은 값이다. 한 곳만 고치면 어긋난다. */
.slm_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(--slm-line);
}
.slm_reco__list li {
	display: flex; align-items: center; gap: 14px;
	padding: 21px 2px;
	border-bottom: 1px solid var(--slm-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;
}
.slm_reco__list li:hover { color: var(--slm-green); }
/* 얇은 원형 체크 */
.slm_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;
}
.slm_check::after {
	content: '';
	position: absolute; left: 5.5px; top: 6.5px;
	width: 9px; height: 4.5px;
	border-left: 1.5px solid var(--slm-gold-deep); border-bottom: 1.5px solid var(--slm-gold-deep);
	transform: rotate(-45deg);
	transition: border-color .25s ease;
}
.slm_reco__list li:hover .slm_check { background: var(--slm-gold-deep); border-color: var(--slm-gold-deep); }
.slm_reco__list li:hover .slm_check::after { border-left-color: #fff; border-bottom-color: #fff; }

/* ===== 7. 자주하는 질문 ===== */
.slm_faq { padding: 110px 0 120px; background: #fff; }
.slm_faq__grid {
	display: grid; grid-template-columns: 380px minmax(0, 1fr);
	gap: 80px; align-items: start;
}
.slm_faq__head { position: sticky; top: 110px; }
.slm_faq__head .slm_title { margin-top: 18px; }
.slm_faq__head .slm_lead { margin-top: 18px; font-size: 18px; line-height: 1.7; }
.slm .slm_faq__cta {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 32px; padding: 14px 28px;
	border: 1px solid var(--slm-green); border-radius: 999px;
	font-weight: 700; font-size: 16px; color: var(--slm-green); text-decoration: none;
	transition: background .25s ease, color .25s ease;
}
/* 화살표 — 2026-08-07 사용자 지시로 CSS 로 그리던 '가는 선 + 45° 촉' 을 이미지로 교체.
 * ⚠ background-image 가 아니라 **mask** 다(hover 에 글자가 흰색이 되므로 currentColor 를 따라가야 한다).
 * ⚠ 같은 화살표가 repot·juvegen·custom 의 FAQ CTA 와 main_content 의 .jdh_skin__cta 에도 있다. */
.slm .slm_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;
}
.slm .slm_faq__cta:hover { background: var(--slm-green); color: #fff; }

/* 아코디언 — 인셋 배경 리스트 (2026-08-10 리디자인, 시그니처 4종 공통 규격)
 * ⚠ 열고 닫을 때 글자가 좌우로 움직이면 안 된다. 예전엔 .is-open 에 padding-left 를 더해
 *   질문 줄이 오른쪽으로 밀렸는데(사용자 지적), 지금은 항목 자체에
 *   `margin: 0 -인셋 / padding: 0 인셋` 을 깔아 **배경만** 좌우로 퍼지게 한다.
 * ⚠ 구분선은 border 가 아니라 ::before/::after 다 — 인셋 배경보다 안쪽(콘텐츠 폭)에 맞춰야 하고,
 *   열린 항목 위아래만 골라서 지워야 카드처럼 떠 보이기 때문.
 * ⚠ Q 는 원형 배지를 걷어내고 세리프 레터로, 답변 머리에는 CSS 로 A 를 붙인다(마크업 수정 불필요).
 *   질문 텍스트 시작선(22+16=38px) 과 답변 들여쓰기를 같은 값으로 맞춰 둔 것이니 한쪽만 바꾸지 말 것. */
.slm_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;
}
.slm_acc::before, .slm_acc::after {
	content: ''; position: absolute; left: var(--acc-inset); right: var(--acc-inset);
	height: 1px; background: var(--slm-line);
	transition: opacity .3s ease;
}
.slm_acc::before { top: 0; opacity: 0; }          /* 리스트 맨 윗선 — 첫 항목만 노출 */
.slm_acc::after  { bottom: 0; }
.slm_acc:first-child::before { opacity: 1; }
.slm_acc.is-open::before, .slm_acc.is-open::after { opacity: 0; }
.slm_acc:has(+ .slm_acc.is-open)::after { opacity: 0; }
.slm_acc:hover:not(.is-open) { background: #FAF8F3; }
.slm_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) 과 광학 정렬 */
.slm_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;
}
.slm_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) */
.slm_acc__chev {
	position: absolute; right: 2px; top: 39px;
	width: 15px; height: 15px; margin-top: -7px;
}
.slm_acc__chev::before, .slm_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;
}
.slm_acc__chev::after { transform: rotate(90deg); }
.slm_acc__q:hover .slm_acc__txt { color: var(--slm-green); }
.slm_acc__q:hover .slm_acc__mark { color: var(--slm-gold-deep); }
.slm_acc__q:hover .slm_acc__chev::before,
.slm_acc__q:hover .slm_acc__chev::after { background: var(--slm-gold-deep); }
/* 답변 — 높이 애니메이션 */
.slm_acc__a {
	display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows .4s cubic-bezier(.22,.61,.36,1);
}
.slm_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(--slm-body);
	opacity: 0; transition: opacity .3s ease, padding .4s ease;
}
.slm_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(--slm-green); opacity: .5;
}
.slm_acc.is-open { background: #FAF7F0; }
.slm_acc.is-open .slm_acc__q { padding-bottom: 14px; }
.slm_acc.is-open .slm_acc__mark { color: var(--slm-gold-deep); }
.slm_acc.is-open .slm_acc__txt { color: var(--slm-green); }
.slm_acc.is-open .slm_acc__chev::after { transform: rotate(0deg); }
.slm_acc.is-open .slm_acc__chev::before,
.slm_acc.is-open .slm_acc__chev::after { background: var(--slm-gold-deep); }
.slm_acc.is-open .slm_acc__a { grid-template-rows: 1fr; }
.slm_acc.is-open .slm_acc__a > p { opacity: 1; padding-bottom: 30px; }

/* ===== 8. 장덕한방병원의 약속 ===== */
/* 마지막 섹션 — 그라데이션이 흰색으로 끝나면 푸터 사이에 흰 띠처럼 보이므로
   연한 그린 톤으로 마감하고 여백/마진을 0 으로 정리 */
.slm_promise {
	padding: 110px 0 100px;
	margin-bottom: 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #F1F5EA 42%, #E9F0DF 100%);
}
.slm_promise + * { margin-top: 0; }
.jdh_sub { margin-bottom: 0; }
.jdh_sub + footer.jdh_footer { margin-top: 0; }
.slm_promise__list {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 0; margin: 60px 0 0; padding: 0; list-style: none;
}
.slm_promise__item {
	padding: 6px 34px;
	text-align: center;
}
.slm_promise__item + .slm_promise__item { border-left: 1px solid #E2E7DA; }
/* ⚠ 항목 넘버링(.slm_promise__no 01~04)은 2026-08-11 사용자 지시로 마크업째 제거했다 — 되살리지 말 것. */
.slm_promise__name {
	display: block; margin-top: 0;
	font-weight: 700; font-size: 22px; letter-spacing: -0.4px; color: #223224;
}
.slm_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 도 뺐다. */
.slm_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;
}
.slm_promise__foot-txt {
	margin: 0;
	font-weight: 400; font-size: 16px; line-height: 1.75; color: #67706A;
}
.slm_promise__sign { flex: 0 0 auto; line-height: 0; }
.slm_promise__sign img { width: 390px; height: auto; display: block; }

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1440px) {
	/* 4단 스텝은 폭이 좁아지면 설명이 3줄로 깨져 카드 높이가 들쭉날쭉해진다 */
	.slm_step__desc { font-size: 16px; }
	.slm_step__name { font-size: 21px; }
	/* 화면이 좁아지면 인물이 카피 쪽으로 다가온다 → 데스크톱보다 우측에 붙인다
	   (데스크톱 25% 기준, 이 구간은 15%) */
	.slm_hero__media { right: 15%; }
}
@media all and (max-width: 1280px) {
	.slm .slm_inner, .slm_hero__inner { padding: 0 28px; }
	.slm_hero__inner { min-height: 600px; }   /* 시그니처 4종 공통 */
	.slm_faq__grid { grid-template-columns: 320px minmax(0, 1fr); gap: 52px; }
	.slm_reco__grid { gap: 44px; }
	.slm_effect { gap: 22px; }
	.slm_step__list { gap: 18px; }
	.slm_promise__item { padding: 6px 20px; }
	.slm_flow { gap: 28px; }
	.slm_flow__step { flex: 0 0 214px; }
	/* 칸 사이가 좁아지므로 화살표를 줄인다 */
	.slm_flow__step + .slm_flow__step::before { left: -34px; width: 26px; height: 11px; }
	/* 복합시술 아치 — 반지름·노드만 줄이면 호와 사진이 함께 따라온다(위 좌표 규칙 참조) */
	.slm_combo {
		--arc-r: 470px; --arc-cy: 542px; --node: 148px;
		/* 폭은 바깥 사진(중심 ±349) 기준 최소 846 + 그림자 여유 — 1025px 화면의 inner(945)에도 들어간다 */
		width: 900px; height: 320px; margin-top: 48px;
	}
	.slm_combo__msg { font-size: 24px; }
	.slm_combo__msg strong { font-size: 28px; }
	.slm_flow--arc .slm_flow__ic { border-width: 5px; }
	/* 카드 폭이 좁아져 긴 라벨이 두 줄로 접힌다 — 한 단 줄여 한 줄로 버티게 */
	.slm_effect__label { font-size: 18px; }
	.slm_spec { grid-template-columns: repeat(3, minmax(0, 178px)); gap: 12px; }
	.slm_spec__value { font-size: 18px; }
}
@media all and (max-width: 1024px) {
	.slm_about, .slm_intro, .slm_benefit, .slm_step, .slm_reco, .slm_faq, .slm_promise { padding: 76px 0; }
	.slm_title { font-size: 32px; margin-top: 20px; }
	.slm_lead { font-size: 18px; margin-top: 18px; }
	/* 히어로: 좁은 화면에서는 배경 비율(2.394)을 유지하면 높이가 카피보다 낮아지고
	 * 모델 컷이 카피를 덮는다 → 비율 고정을 풀고 카피 위 / 모델 컷 아래로 세로로 쌓는다
	 * (column-reverse: DOM 은 media → inner 순서라 뒤집어야 카피가 위로 온다). */
	.slm_hero {
		min-height: 0;
		display: flex; flex-direction: column-reverse;
		background-position: 72% center;
	}
	.slm_hero__inner {
		display: block;
		min-height: 0;
		padding: 56px 28px 0;
	}
	.slm_hero__copy { max-width: none; }
	/* 세로 스택에서는 모델을 다시 폭 기준으로 되돌린다(높이 100% 는 데스크톱 전용) */
	.slm_hero__media {
		position: relative; right: auto; bottom: auto; height: auto;
		/* 2026-08-04 컷 교체 — 새 PNG(529×802)는 인물이 캔버스를 거의 꽉 채운다.
		 * 이전 컷은 인물이 캔버스의 64%(우여백 143px)라 650px 로 키워야 인물 460px 이 나왔지만,
		 * 새 컷은 그대로 두면 인물이 1.5배로 커진다 → 인물 크기를 유지하도록 450px 로 내린다. */
		width: 100%; max-width: 450px; margin: 0 auto;
	}
	.slm_hero__media img { width: 100%; height: auto; }
	.slm_hero__eyebrow { font-size: 22px; letter-spacing: 4.6px; }
	.slm_hero__desc { font-size: 18px; margin-top: 22px; max-width: none; }
	/* 플로우: 2열 */
	.slm_flow { flex-wrap: wrap; gap: 34px 0; }
	.slm_flow__step { flex: 0 0 50%; }
	.slm_flow__step + .slm_flow__step::before,
	.slm_flow__step + .slm_flow__step::after { display: none; }
	/* 복합시술 원형 — 태블릿까지는 원을 유지한다(2열로 떨어뜨리면 조합의 뜻이 흐려진다) */
	.slm_combo {
		/* 769px 화면의 inner(689) 안에 들어가야 해서 폭을 660 으로 묶고, 반지름을 그에 맞춰 줄였다 */
		--arc-r: 340px; --arc-cy: 399px; --node: 116px;
		width: 660px; height: 250px; margin-top: 40px;
	}
	.slm_combo__msg { font-size: 20px; }
	.slm_combo__msg strong { font-size: 24px; }
	.slm_flow--arc .slm_flow__ic { border-width: 4px; }
	.slm_divider { margin-top: 44px; gap: 18px; }
	.slm_divider span { font-size: 19px; letter-spacing: 3.6px; }
	.slm_about__sub { font-size: 18px; }
	/* 효과 카드 2열 */
	.slm_effect { grid-template-columns: repeat(2, 1fr); margin-top: 46px; }
	/* 좌우 2열 → 1열 */
	.slm_intro__grid, .slm_benefit__grid, .slm_reco__grid { grid-template-columns: 1fr; gap: 36px; }
	/* 1열 전환 시: 배경으로 깔면 장비가 카드 뒤에 묻히므로 이미지 블록으로 상단에 노출 */
	.slm_benefit {
		padding: 56px 0;
		background: radial-gradient(120% 90% at 78% 45%, #FFFDF8 0%, #FAF5EF 42%, #FFFFFF 100%);
	}
	.slm_benefit::before, .slm_benefit::after { display: none; }
	/* 2026-09-14 — 분리 컷 2장을 한 블록에 겹쳐 그린다(위 = 장비, 아래 = 배경). 링 중심(78%·45%)에 장비를 맞춘다. */
	.slm_benefit__grid::before {
		content: '';
		display: block;
		width: 100%;
		aspect-ratio: 1249 / 697;   /* body_sub_bg.png 실제 비율 */
		background:
			url('/img/body_onda.png') 76% 62% / auto 82% no-repeat,
			url('/img/body_sub_bg.png') center / cover no-repeat;
		border-radius: 8px;
	}
	.slm_benefit__list { margin-top: 30px; }
	.slm_spec { margin-top: 40px; }
	.slm_intro__title { font-size: 26px; }
	.slm_intro__desc { font-size: 18px; }
	/* 1열로 떨어지면 사진 아래에 글이 통째로 놓인다 — 왼쪽 정렬로 두면 넓은 오른쪽이 비어 보인다.
	 * 시그니처 4종(repot·juvegen·custom·slimcare)이 같은 규칙이다(2026-08-07 사용자 지시). */
	.slm_intro__body { text-align: center; }
	/* 원문 <br> 로 잡아 둔 줄이 좁은 폭에서 한 번 더 접힌다 — keep-all 이 없으면 단어 중간에서 갈린다.
	 * ⚠ <br> 자체는 숨기면 안 된다(원문에 공백이 없어 단어가 붙는다). */
	.slm_intro__desc { word-break: keep-all; }
	.slm_reco__title { font-size: 28px; }
	/* 작용 원리 2열 */
	.slm_step__list { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	/* FAQ 1열 */
	.slm_faq__grid { grid-template-columns: 1fr; gap: 34px; }
	.slm_faq__head { position: static; }
	/* 약속 2열 */
	.slm_promise__list { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
	.slm_promise__item:nth-child(odd) { border-left: 0; }
	.slm_promise__foot { flex-direction: column; gap: 22px; text-align: center; }
	.slm_promise__sign img { width: 280px; }
}
@media all and (max-width: 768px) {
	/* 2026-08-12 — 좁은 폭에서 어절 중간이 갈리지 않도록 페이지 루트에 한 번만 건다
	 * (리팟 .jdh_sub.rpt · 커스텀 .jdh_sub.cst 와 같은 처리). 영문 단어 줄바꿈은 그대로 허용된다. */
	.jdh_sub.slm { word-break: keep-all; }
	.slm .slm_inner, .slm_hero__inner { padding: 0 18px; }
	.slm_about, .slm_intro, .slm_benefit, .slm_step, .slm_reco, .slm_faq, .slm_promise { padding: 56px 0; }
	.slm_hero__inner { padding: 40px 18px 0; }
	.slm_hero__media { max-width: 480px; }
	.slm_hero__eyebrow { font-size: 18px; letter-spacing: 3.6px; }
	.slm_hero__desc { font-size: 16px; line-height: 1.7; margin-top: 20px; }
	.slm_title { font-size: 28px; }
	.slm_eyebrow { font-size: 14px; }
	.slm_eyebrow--serif,
	.slm_eyebrow--line { font-size: 14px; letter-spacing: 3.6px; }
	.slm_lead { font-size: 17px; }
	/* 주의: 원문 <br> 에 공백이 없어 br 을 숨기면 단어가 붙는다 → 모바일에서도 유지 */
	/* 플로우 */
	.slm_flow { gap: 26px 0; margin-top: 36px; }
	.slm_flow__ic { width: 86px; height: 86px; }
	.slm_flow__name { font-size: 18px; margin-top: 12px; }
	.slm_flow__desc { font-size: 14px; }
	.slm_flow__sub { font-size: 13px; }
	/* 복합시술 — 모바일에서는 호를 풀고 2x2 그리드로 떨어뜨린다.
	 * 이 폭에서 호를 유지하면 사진 4장이 가로로 늘어서 하나하나가 손톱만 해진다.
	 * '더해진다' 는 뜻은 그리드 아래로 내려온 결과 카피(.slm_combo__msg)가 대신 전한다. */
	.slm_combo { width: auto; height: auto; margin-top: 36px; }
	.slm_combo__arc { display: none; }
	.slm_flow--arc { display: flex; flex-wrap: wrap; gap: 26px 0; }
	.slm_flow--arc .slm_flow__step {
		position: static; width: 50%; margin-left: 0;
	}
	.slm_flow--arc .slm_flow__ic { width: 86px; height: 86px; border-width: 3px; }
	.slm_combo__msg {
		position: static; transform: none;
		width: auto; margin: 28px 0 0;
		font-size: 19px;
	}
	.slm_combo__msg strong { font-size: 22px; }
	.slm_divider { margin-top: 34px; gap: 12px; }
	.slm_divider span { font-size: 15px; letter-spacing: 2.6px; }
	.slm_about__sub { font-size: 16px; margin-top: 18px; }
	/* 효과 카드 */
	.slm_effect { gap: 12px; margin-top: 36px; }
	/* 2열에서 '매선실과 한약재, 약침 주사기' 같은 긴 라벨은 두 줄이 된다 — 높이는 최소값으로만 */
	.slm_effect__label { min-height: 53px; padding: 8px 10px; font-size: 16px; line-height: 1.35; }
	/* 개요/스펙 */
	.slm_intro__sub { font-size: 16px; }
	.slm_intro__title { font-size: 22px; }
	.slm_intro__desc { font-size: 16px; }
	.slm_spec { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.slm_spec__item { padding: 8px 2px; }
	.slm_spec__pic { width: 72px; height: 72px; }
	/* 좁은 화면에서는 '국소 마취 / 무마취' 를 두 줄로 흘려 칸을 넘지 않게 한다 */
	.slm_spec__value { font-size: 15px; white-space: normal; word-break: keep-all; }
	.slm_spec__note { font-size: 13px; margin-top: 4px; }
	/* 효과 카드(6개) 2열 */
	.slm_benefit__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.slm_benefit__item { padding: 20px 10px; gap: 10px; border-left-width: 4px; }
	.slm_benefit__item::after { bottom: 20px; width: 36px; }
	.slm_benefit__item strong { font-size: 15px; }
	.slm_benefit__ic svg { width: 34px; height: 34px; }
	/* 작용 원리 2열 유지 */
	.slm_step__list { gap: 14px; margin-top: 40px; }
	.slm_step__card { padding-bottom: 24px; }
	.slm_step__no { width: 34px; height: 34px; margin-top: 18px; font-size: 18px; }
	.slm_step__name { font-size: 18px; margin-top: 10px; }
	.slm_step__desc { font-size: 14px; margin: 10px 12px 0; }
	/* 추천 리스트 1열 */
	.slm_reco__title { font-size: 24px; }
	.slm_reco__desc { font-size: 16px; }
	.slm_reco__list { grid-template-columns: 1fr; margin-top: 26px; }
	.slm_reco__list li { font-size: 16.5px; padding: 17px 2px; }
	/* FAQ */
	.slm_acc { --acc-inset: 14px; }   /* inner padding 18px 보다 좁게 — 넘치면 가로 스크롤 생긴다 */
	.slm_acc__q { gap: 12px; padding: 20px 30px 20px 0; }
	.slm_acc.is-open .slm_acc__q { padding-bottom: 12px; }
	.slm_acc__chev { right: 0; top: 32px; width: 13px; height: 13px; }
	.slm_acc__mark { flex-basis: 18px; font-size: 18px; }
	.slm_acc__txt { font-size: 16px; }
	.slm_acc__a > p { padding: 0 0 0 30px; font-size: 15px; }
	.slm_acc__a > p::before { font-size: 18px; }
	.slm_acc.is-open .slm_acc__a > p { padding-bottom: 22px; }
	.slm .slm_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` 는 이 방식으로 대체했다). */
	.slm_promise__list { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
	.slm_promise__item,
	.slm_promise__item + .slm_promise__item {
		padding: 20px 12px 18px;
		background: rgba(255,255,255,.72);
		border: 1px solid #E2E7DA;
		border-radius: 10px;
	}
	/* ⚠ keep-all 필수 — 칸이 149px 로 좁아 없으면 '시스/템', '진/료' 처럼 낱말 중간에서 갈린다 */
	.slm_promise__name { font-size: 16px; letter-spacing: -.3px; word-break: keep-all; }
	.slm_promise__desc { font-size: 13px; line-height: 1.62; margin-top: 8px; word-break: keep-all; }
	.slm_promise__foot { margin-top: 40px; padding: 22px 18px; }
	.slm_promise__foot-txt { font-size: 15px; }
	.slm_promise__sign img { width: 230px; }
}
@media all and (max-width: 520px) {
	/* 작용 원리 4단계 — 2026-08-12: 1열 세로 나열은 카드 4장에 1,460px 을 썼다(2열은 설명이 과하게 접힌다).
	 * → **가로 스와이프**. 번호가 붙은 순서형 카드라 옆으로 넘기는 흐름과도 맞는다.
	 * ⚠ max-width:380px + margin auto 를 함께 걷어낼 것(남기면 스크롤 영역이 380px 로 묶인다).
	 * ⚠ 음수 마진(-18px)은 .slm_inner 의 좌우 패딩과 짝이다. */
	.slm_step__list {
		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;
	}
	.slm_step__list::-webkit-scrollbar { height: 3px; }
	.slm_step__list::-webkit-scrollbar-track { background: rgba(60,52,36,.10); border-radius: 999px; }
	.slm_step__list::-webkit-scrollbar-thumb { background: rgba(166,139,91,.65); border-radius: 999px; }
	.slm_step__card { scroll-snap-align: center; }
	/* ⚠ .slm_effect 를 1열로 내리던 규칙을 걷어냈다 — 카드가 [사진 + 라벨]뿐이라 2열에서도 읽히는데,
	 *   1열이면 4장이 1,200px 을 먹었다. 2열이면 2×2 로 딱 떨어진다(커스텀 .cst_effect 와 같은 판단). */
	.slm_flow__step { flex: 0 0 100%; }
	/* 복합시술 4가지는 시술명만 있어 이 폭에서도 2열이 낫다 — 위 1열 규칙에서 제외 */
	.slm_flow--orbit .slm_flow__step { width: 50%; }
	.slm_combo__msg { font-size: 18px; }
	.slm_spec { grid-template-columns: repeat(3, 1fr); }
}