@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 리팟레이저 (www/signature/repot.jsp 전용)
 * Figma node 593:6462
 * 로드 순서: main_hero.css → jdh_sub.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 대신 8px 통일)
 * ========================================================================= */

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

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

/* ===== 1. 히어로 ===== */
/* 배경(/img/jd_lazor_bg.png 1920×741)에 모델·레이저 광선이 합성돼 있다.
 * 카피가 얹히는 좌측만 화이트 베일을 옅게 깔아 가독성을 확보하고,
 * 우측(모델·광선)은 베일 0 으로 두어 원본 선명도를 유지한다.
 * ⚠ 이미지 비율(1920/741 = 2.591)이 바뀌면 1024↓ 반응형의 .rpt_hero::after aspect-ratio 도
 *   같이 계산해야 한다(aspect = 1 ÷ (background-size ÷ 이미지 비율)). */
.rpt_hero {
	position: relative;
	overflow: hidden;
	/* x 62% — 히어로가 720px 로 높아지면서(2026-08-04) 1440px 급 화면에서 cover 의 좌우 크롭이
	 * 커졌다. center 로 두면 우측 모델의 어깨 바깥선이 잘려 나가므로 우측을 살리는 쪽으로 옮긴다.
	 * (1920px 화면은 폭이 그대로 맞아떨어져 이 값의 영향을 받지 않는다) */
	background:
		linear-gradient(100deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.26) 40%, rgba(255,255,255,.05) 68%, rgba(255,255,255,0) 100%),
		url('/img/jd_lazor_bg.png') 62% center / cover no-repeat;
	background-color: #EFEFF0;   /* 이미지 로드 전 폴백 */
}
.rpt_hero__inner {
	position: relative; z-index: 1;
	max-width: 1440px; margin: 0 auto; padding: 0 40px;
	/* 시그니처 4종 공통 히어로 높이 — juvegen · slimcare · custom 과 같은 값.
	 * 2026-08-04 사용자 요청으로 666 → 720px */
	min-height: 720px;
	display: flex; align-items: center;
}
.rpt_hero__copy { max-width: 640px; }
.rpt_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(--rpt-gold-lite);
}
.rpt_hero__title {
	margin: 18px 0 0;
	font-weight: 800;
	/* 상한 80px — 시그니처 히어로 타이틀만 사용자 지정 예외(2026-08-04).
	 * 다른 서브페이지 h1(46px)·메인 히어로(54px) 상한을 넘지만 의도된 값이니 내리지 말 것. */
	font-size: clamp(40px, 4.6vw, 80px);
	line-height: 1.05; letter-spacing: -1.2px;
	color: var(--rpt-green);
}
.rpt_hero__title em { font-style: normal; }
/* ⚠ 색: Figma 원본 #D8BD8B → #C6A461 로 한 번 낮췄지만 여전히 밝은 배경에 묻혔다(2026-08-07 지적).
 *   딥브론즈로 다시 낮추고 크기·굵기를 한 단 올렸다. 시그니처 3종(쥬브젠·리팟·커스텀) 공통값이다. */
.rpt_hero__desc {
	margin: 22px 0 0;
	font-weight: 500; font-size: 22px; line-height: 1.55;
	color: #5A4A2E;
}

/* ===== 2. 리팟 레이저 원리 (4단계 영상 슬라이드) =====
 * 레이아웃 뼈대는 구 사이트(bbs/laser.php) 의 "난치성 색소 질환의 새로운 제안" 섹션,
 * 콘텐츠는 제조사 공식 페이지(reepotlaser.com) 의 원리 4단계 영상.
 * 좌: 모델 컷(섹션 바닥에 붙임) / 우: 타이틀 + 슬라이드(타이틀 → 영상 → 설명).
 * 이 자리를 쓰던 4단계 플로우(.rpt_flow) · 효과 카드(.rpt_effect) 스타일은 제거했다(git 이력 참조). */
.rpt_tech {
	padding: 110px 0 120px;
	background: #F4F5F2 url('/img/signature/repot/about_bg.jpg') center center / cover no-repeat;
	overflow: hidden;
}
/* 2026-08-06(사용자 요청): 좌측 모델 컷을 걷어내고 1열 중앙 정렬로 바꿨다.
 *   max-width 는 영상 폭 기준 — 영상이 3:2 라 이보다 넓히면 슬라이드 한 장이 화면을 다 먹는다.
 *   좌우 110px = 화살표(46px)가 슬라이더 바깥(-58px)에 서도 잘리지 않는 최소치.
 * ⚠ minmax(0, …) 와 아래 .rpt_tech__body 의 min-width:0 을 지우지 말 것.
 *   그리드 아이템 기본값(min-width:auto)이면 Swiper 가 계산한 슬라이드 폭이 컬럼을 넓히고,
 *   넓어진 컬럼을 Swiper 가 다시 읽어 폭이 무한히 부풀어 오른다(실제 발생). */
.rpt_tech__grid {
	max-width: 1100px; margin: 0 auto;
	padding: 0 110px;
	display: grid; grid-template-columns: minmax(0, 1fr);
}
.rpt_tech__body { min-width: 0; text-align: center; }
/* ⚠ 아래 .rpt_tech__visual* 는 현재 미사용 — JSP 에서 모델 컷을 주석 처리했다(2026-08-06).
 *    되살릴 때를 위해 남겨 둔 규칙이니, 컷을 다시 넣지 않을 거라면 통째로 지워도 된다.
 * 모델 컷 — 원본(2059×1716)은 인물이 우측에 치우쳐 있고 좌측 절반이 빈 배경이다.
 * 세로 슬롯으로 잘라 인물만 크게 보이게 하고(object-position), 흰 배경이 섹션 배경과
 * 부딪히지 않도록 좌·우·상단을 마스크로 흐린다. 하단은 섹션 경계와 맞물리므로 자르지 않는다. */
.rpt_tech__visual {
	position: relative;
	line-height: 0;
	margin-bottom: -1px;   /* 배경 위 1px 틈 방지 */
	/* 원본은 인물이 가로 25~85% 구간에만 있다. 슬롯을 세로로 길게 잡아야 좌우 빈 배경이
	 * 잘려 나가고 인물이 꽉 찬다(가로로 납작하면 인물이 좌하단에 몰려 보인다). */
	aspect-ratio: 620 / 820;
	overflow: hidden;
	/* 상단 페이드는 6% — 더 키우면 인물 이마를 먹는다(아래 img 의 height 96% 와 짝) */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, #000 6%);
	mask-image:
		linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, #000 6%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
/* object-fit:cover 로는 "슬롯을 덮는 최소 배율" 밖에 못 준다 → 인물이 작고 좌하단에 몰려 보였다.
 * 배율(height)과 좌우 위치(translateX)를 따로 잡으려고 절대배치로 바꿨다.
 *   height 96%   … 머리 위로 4% 여백을 남겨 상단 페이드가 이마를 먹지 않게 한다.
 *   bottom 0     … 원본 하단(가슴선)을 섹션 경계에 붙이는 축. 건드리지 말 것.
 *   translateX   … 원본에서 얼굴이 가로 62% 지점에 있다. -58% 면 얼굴이 슬롯 중앙보다 살짝 우측. */
.rpt_tech__visual img {
	position: absolute; left: 50%; bottom: 0;
	width: auto; height: 96%; max-width: none; display: block;
	transform: translateX(-58%);
}
.rpt_tech__title {
	margin: 22px 0 0;
	font-weight: 800; font-size: 40px; line-height: 1.33; letter-spacing: -0.72px;
	color: #2E4236;
}
.rpt_tech__lead {
	margin: 20px 0 0;
	font-weight: 400; font-size: 18px; line-height: 1.6; color: var(--rpt-body);
}

/* --- 슬라이더 --- */
/* 1열 중앙 정렬(2026-08-06)이 되면서 컨테이너 폭이 곧 영상 폭이 됐다. 그대로 두면 3:2 영상이
 * 화면 높이를 다 먹으므로 슬라이더만 따로 좁혀 중앙에 세운다.
 * 760 + 화살표 자리(좌우 58px) = 876px ≤ 컨테이너 안쪽 폭 880px — 화살표가 잘리지 않는 상한이다. */
.rpt_tech__slider { position: relative; max-width: 760px; margin: 40px auto 0; min-width: 0; }
/* 좌우 화살표가 슬라이드 바깥에 서도록 슬라이더 안쪽으로 여백을 준다 */
.rpt_tech__swiper { padding: 0 6px; }
.rpt_tech__slide { height: auto; }
.rpt_tech__name {
	display: block;
	font-weight: 700; font-size: 24px; letter-spacing: -0.3px; color: var(--rpt-green);
}
/* 원본은 번호를 이미지(ex_img_no0*.png)로 얹었지만, 여기서는 타이포 + 밑줄로 대체 */
.rpt_tech__no {
	display: inline-block; margin-right: 18px;
	font-family: 'Cormorant Garamond', serif;
	font-style: normal; font-weight: 700; font-size: 26px; letter-spacing: 1px;
	color: var(--rpt-gold-deep);
}
.rpt_tech__no::after {
	content: '';
	display: inline-block; vertical-align: middle;
	width: 34px; height: 1px; margin: -2px 0 0 10px;
	background: var(--rpt-gold-deep);
}
/* 기술명(CPTL·Auto Derm·VSLS) 뱃지 */
.rpt_tech__name span {
	display: inline-block; margin-left: 10px; padding: 4px 12px; vertical-align: middle;
	border: 1px solid rgba(166,139,91,.5); border-radius: 999px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700; font-size: 17px; letter-spacing: 1.6px; text-transform: uppercase;
	color: var(--rpt-gold-deep);
}
/* 영상 프레임 — 직사각형 대신 대각으로 크게 굴린 리프 형태(사용자 요청).
 * radius 값을 바꿀 때는 .rpt_tech__navwrap 안쪽 화살표가 곡면에 물리지 않는지 같이 볼 것. */
.rpt_tech__media {
	display: block; margin-top: 22px;
	/* 원본 영상은 800×800 정사각이다. 가로로 눕힐수록 위아래가 잘려 핸드피스 팁이 날아가므로
	 * 3:2 이상으로는 넓히지 말 것. object-position 도 짝으로 조정해야 한다. */
	aspect-ratio: 3 / 2;
	border-radius: 160px 28px 160px 28px;
	overflow: hidden; line-height: 0;
	background: #0B1512;
	box-shadow: 0 22px 44px -28px rgba(70, 58, 40, .6);
}
.rpt_tech__media video {
	width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
	display: block;
}
.rpt_tech__desc {
	margin: 22px 0 0;
	font-weight: 400; font-size: 18px; line-height: 1.6; color: var(--rpt-body-2);
}

/* 화살표 — 영상의 세로 중앙.
 * 타이틀·설명 줄 수가 달라져도 위치가 흔들리지 않도록, 영상 블록(타이틀 높이 + 여백 + 16:10)과
 * 같은 규격의 투명 오버레이(.rpt_tech__navwrap)를 기준선으로 쓴다. */
.rpt_tech__navwrap {
	position: absolute; top: 58px; left: 0; right: 0;   /* 58px = 타이틀 1줄 + margin-top */
	aspect-ratio: 3 / 2;
	pointer-events: none;   /* 영상 위 드래그(grabCursor)를 막지 않는다 */
}
.rpt_tech__nav {
	position: absolute; top: 50%;
	z-index: 2;
	width: 46px; height: 46px; padding: 0;
	border: 0; background: none; cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .25s ease;
	pointer-events: auto;
}
.rpt_tech__nav::before {
	content: '';
	display: block; width: 15px; height: 15px; margin: 0 auto;
	border-top: 1.6px solid var(--rpt-green); border-right: 1.6px solid var(--rpt-green);
}
.rpt_tech__nav--prev { left: -58px; }
.rpt_tech__nav--prev::before { transform: rotate(-135deg); }
.rpt_tech__nav--next { right: -58px; }
.rpt_tech__nav--next::before { transform: rotate(45deg); }
.rpt_tech__nav:hover { opacity: .55; }

/* --- 영상 아래 5단계 "리팟 레이저, 이렇게 작용합니다" (2026-08-06 이 섹션으로 편입) ---
 * 슬라이더(760px)와 달리 .rpt_inner(1440) 폭을 써야 5칸이 좁아지지 않는다.
 * 페이지네이션 바로 아래라 위 여백을 넉넉히 줘야 슬라이드와 한 덩어리로 보이지 않는다. */
/* ⚠ 이 블록은 .rpt_inner 를 함께 달고 있다. `.rpt .rpt_inner`(0,2,0) 의 margin/padding 단축이
 *   `.rpt_tech__flow`(0,1,0) 를 이겨 상단 여백이 0 으로 죽는다(실제 발생) → 선택자를 맞춰 쓴다.
 *   아래 반응형의 .rpt .rpt_tech__flow 도 같은 이유다. */
.rpt .rpt_tech__flow {
	margin-top: 118px;
	padding-top: 66px;
	border-top: 1px solid var(--rpt-line);   /* 슬라이드 ↔ 5단계 경계 */
	text-align: center;
}
.rpt_tech__flow-title {
	margin: 0;
	font-weight: 800; font-size: 32px; line-height: 1.35; letter-spacing: -0.6px;
	color: var(--rpt-green-3);
}
/* 뒷문장('이렇게 작용합니다.')만 잉크색 — 장비명은 그린으로 남겨 둘이 갈리게 한다(2026-08-07 사용자 지시) */
.rpt_tech__flow-title em { font-style: normal; color: var(--rpt-ink); }
.rpt_tech__flow-lead {
	margin: 18px 0 0;
	font-weight: 500; font-size: 18px; line-height: 1.6; color: #666;
}

/* 5단계 가로 타임라인 (.rpt_route) — 2026-08-06(2차)
 * 이전의 흰 카드 5장(.rpt_step__list)은 밝은 배경 위에 판이 떠 보였다. 카드 껍데기를 걷어내고
 * "사진 → 연결선 위 번호 → 이름 → 설명" 한 줄기로 세운다. 배경·테두리·그림자 없음이 핵심이다.
 * ⚠ 연결선은 각 칸의 노드에서 좌우로 뻗어 이웃과 만나는 방식(left/right: -50%)이라
 *   칸 수가 바뀌어도 자동으로 이어진다. 첫/마지막 칸만 바깥쪽을 잘라 낸다. */
/* 2026-08-07 사용자 지시로 한 단 키웠다(번호 32→40 / 이름 19→22 / 설명 15→16.5).
 * 사진은 원본이 600x340 이라 비율을 못 바꾼다(cover 로 늘리면 일러스트 좌우가 잘려 병변이 안 보인다)
 * → 칸 사이 간격을 26→18 로 좁혀 칸 폭을 벌리는 방식으로 사진을 키웠다. */
.rpt_route {
	display: grid; grid-template-columns: repeat(5, 1fr);
	gap: 0 18px; margin: 52px 0 0; padding: 0; list-style: none;
	align-items: start;
}
.rpt_route__step { position: relative; text-align: center; }
.rpt_route__img {
	display: block; aspect-ratio: 600 / 340;
	border-radius: 8px;          /* 이미지 박스 radius 8px 규칙 */
	overflow: hidden; line-height: 0;
	background: #ECEAE4;
	box-shadow: 0 18px 32px -26px rgba(60, 70, 60, .55);
}
.rpt_route__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.rpt_route__step:hover .rpt_route__img img { transform: scale(1.05); }
/* 번호 노드 + 단계를 잇는 가는 선 */
.rpt_route__node { display: block; position: relative; height: 40px; margin-top: 26px; }
.rpt_route__node::before {
	content: '';
	position: absolute; top: 50%; left: -50%; right: -50%;
	height: 1px; background: var(--rpt-line);
}
.rpt_route__step:first-child .rpt_route__node::before { left: 50%; }
.rpt_route__step:last-child  .rpt_route__node::before { right: 50%; }
.rpt_route__node i {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	background: #FBFBFA; border: 1px solid rgba(166,139,91,.55); border-radius: 50%;
	font-family: 'Cormorant Garamond', serif;
	font-style: normal; font-weight: 700; font-size: 18px; letter-spacing: .6px;
	color: var(--rpt-gold-deep);
	transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.rpt_route__step:hover .rpt_route__node i {
	background: var(--rpt-gold-deep); border-color: var(--rpt-gold-deep); color: #fff;
}
.rpt_route__name {
	display: block; margin-top: 18px;
	font-weight: 700; font-size: 22px; letter-spacing: -0.3px; color: var(--rpt-green-3);
}
.rpt_route__desc {
	margin: 10px 0 0;
	font-weight: 400; font-size: 16.5px; line-height: 1.6; color: var(--rpt-body-2);
	word-break: keep-all;
}

/* 페이지네이션 */
.rpt_tech__pager {
	display: flex; align-items: center; justify-content: center;
	gap: 10px; margin-top: 28px;
}
.rpt_tech__pager .swiper-pagination-bullet {
	width: 8px; height: 8px; margin: 0 !important;
	border-radius: 50%; background: #C9C3B4; opacity: 1;
	transition: width .3s ease, background .3s ease;
}
.rpt_tech__pager .swiper-pagination-bullet-active {
	width: 26px; border-radius: 4px; background: var(--rpt-gold-deep);
}

/* ===== 3. 인증 포인트 3개 (구 '3가지 모드' 섹션) =====
 * 2026-08-06: 섹션 자체는 4번(소개)에 흡수됐다. 타이틀·리드는 4번의 sub/desc 로 들어갔고,
 *   카드 3개만 4번 하단(.rpt_intro__points)에서 아래 .rpt_mode__* 규칙을 재사용한다.
 * ⚠ .rpt_mode(섹션 껍데기)와 .rpt_mode .rpt_lead 는 미사용 — 카드 규칙만 살아 있다. */
.rpt_mode {
	padding: 120px 0;
	background:
		radial-gradient(90% 55% at 50% 0%, rgba(201,174,123,.09) 0%, rgba(201,174,123,0) 72%),
		#FFFFFF;
}
.rpt_mode .rpt_lead { margin-top: 40px; font-size: 18px; line-height: 1.78; }
.rpt_mode__list {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 34px; margin: 60px 0 0; padding: 0; list-style: none;
}
.rpt_mode__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 26px; padding: 52px 20px;
	border-radius: 20px;
	background: linear-gradient(180deg, #F5F0E7 0%, #EDE6D9 100%);
}
.rpt_mode__ic {
	display: flex; align-items: center; justify-content: center;
	height: 62px;
	color: #22303A;   /* 아이콘 선 색 — FDA 로고(#1A5CA8 계열)와 나란히 서는 톤 */
}
.rpt_mode__ic svg { width: 64px; height: 64px; }
.rpt_mode__ic--img img { width: auto; height: 56px; display: block; }
.rpt_mode__label {
	font-weight: 700; font-size: 20px; line-height: 1.45; letter-spacing: -0.3px;
	text-align: center; color: #26231D;
}

/* ===== 4. 리팟레이저 소개 ===== */
/* 3번(흰색)과 갈리도록 크림-그레이를 통짜로 깐다. 아래로 갈수록 한 톤 더 가라앉혀
 * 다음 다크 섹션(5번)으로 넘어가는 계단을 만든다. */
.rpt_intro {
	padding: 120px 0;
	background:
		radial-gradient(70% 50% at 88% 12%, rgba(201,174,123,.13) 0%, rgba(201,174,123,0) 70%),
		linear-gradient(180deg, #F7F5F1 0%, #F4F2ED 55%, #EEEBE5 100%);
}
.rpt_intro__grid {
	display: grid; grid-template-columns: 764fr 637fr;
	gap: 39px; align-items: center;
}
.rpt_intro__media {
	border-radius: 8px; overflow: hidden; line-height: 0;
	background: #F1F2F0;
}
.rpt_intro__media img { width: 100%; height: auto; display: block; }
.rpt_intro__body { display: flex; flex-direction: column; }
.rpt_intro__sub {
	margin: 0;
	font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: -0.2px; color: #111;
}
.rpt_intro__title {
	margin: 8px 0 0;
	font-weight: 800; font-size: 30px; line-height: 1.3; letter-spacing: -0.2px; color: #2E4236;
}
/* 2026-08-07: 시그니처 3종(리팟·커스텀·슬림케어)의 소개 본문 값을 맞췄다.
 * 리팟만 18px/1.62 였다 — 같은 섹션인데 글이 작고 촘촘해 톤이 달라 보인다는 지적.
 * ⚠ 커스텀·슬림케어와 같은 20px/1.5 다. 한 곳만 고치면 다시 어긋난다. */
.rpt_intro__desc {
	margin: 24px 0 0;
	font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.2px; color: #333;
}
.rpt_intro__desc + .rpt_intro__desc { margin-top: 20px; }

/* 인증 포인트 3개 — 2026-08-06(2차): 흰 카드 3장이 촌스럽다는 지적에 카드 껍데기를 걷어냈다.
 *   · 박스·그림자 없이 섹션 배경 위에 그대로 얹고, 위쪽 헤어라인 하나로 영역만 긋는다.
 *   · 칸 사이 세로 실선이 카드 테두리 역할을 대신한다(첫 칸 앞에는 긋지 않는다).
 *   · 아이콘 원의 흰 배경은 FDA 로고(파랑)와 선 아이콘(골드)의 톤 차이를 묶어 주는 장치다 — 빼지 말 것.
 * ⚠ .rpt_inner 를 함께 달고 있어 `.rpt .rpt_inner`(0,2,0) 의 margin/padding 단축이 이긴다 →
 *   선택자를 맞추지 않으면 위 여백이 0 이 된다(.rpt_tech__flow 와 같은 함정). */
.rpt .rpt_intro__points {
	margin-top: 84px;
	padding-top: 56px;
	border-top: 1px solid rgba(38, 35, 29, .10);
}
.rpt_intro__points .rpt_mode__list { margin-top: 0; gap: 0; }
.rpt_intro .rpt_mode__item {
	position: relative;
	gap: 22px;
	padding: 8px 28px;
	background: none; border: 0; border-radius: 0; box-shadow: none;
}
.rpt_intro .rpt_mode__item + .rpt_mode__item::before {
	content: '';
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 62%;
	background: rgba(38, 35, 29, .10);
}
.rpt_intro .rpt_mode__ic {
	width: 96px; height: 96px;
	background: #fff; border: 1px solid rgba(166, 139, 91, .28); border-radius: 50%;
	box-shadow: 0 14px 28px -22px rgba(70, 58, 40, .55);
	transition: border-color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.rpt_intro .rpt_mode__item:hover .rpt_mode__ic {
	transform: translateY(-4px);
	border-color: var(--rpt-gold-deep);
}
.rpt_intro .rpt_mode__ic svg { width: 44px; height: 44px; }
.rpt_intro .rpt_mode__ic--img img { height: 40px; }
.rpt_intro .rpt_mode__label { font-size: 19px; line-height: 1.5; }

/* 시술 정보 3칸 — Figma 처럼 좌측에 모아 배치(칸 폭 135px, 쥬브젠 4칸 균등분배와 다른 점) */
.rpt_spec {
	display: grid; grid-template-columns: repeat(3, minmax(0, 172px));   /* "필요 시 연고 마취" 가 한 줄로 들어가는 최소 폭 */
	gap: 20px; margin: 56px 0 0; padding: 0; list-style: none;
}
.rpt_spec__item {
	display: flex; flex-direction: column; align-items: center;
	padding: 8px 12px;
	text-align: center;
}
/* 2026-08-10 — 원형 SVG 아이콘(.rpt_spec__ic)과 영문 라벨(.rpt_spec__label)을 걷어내고
 * 사용자가 준 픽토그램 이미지 한 장으로 대체했다(아이콘 + 라벨을 둘 다 대신한다).
 * ⚠ 라벨(TIME·ANESTHESIA…)을 되살리지 말 것. 시그니처 4개 페이지 공통 규격(88px). */
.rpt_spec__pic {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
}
/* 값 크기도 커스텀 페이지와 맞췄다(20 → 19px). 리팟만 한 단 커서 눈에 띄었다.
 * ⚠ nowrap 은 넣지 않는다 — '필요 시 연고 마취' 가 172px 칸에서 좁아지면 접혀야 한다. */
/* 항목명(2026-08-11) — 픽토그램만으로 마취/회복이 구분되지 않는다는 지적으로 추가.
   ⚠ 되살리지 말라던 건 영문 라벨(TIME·ANESTHESIA…)이다. 이 한글 항목명은 지우지 말 것. */
.rpt_spec__name {
	display: block; margin-top: 14px;
	font-weight: 500; font-size: 13px; letter-spacing: -0.2px; color: rgba(28,30,26,.5);
}
.rpt_spec__value {
	display: block; margin-top: 5px;
	font-weight: 700; font-size: 19px; letter-spacing: -0.3px; color: var(--rpt-green);
}

/* ===== 5. 리팟레이저의 다양한 효과 =====
 * 배경 컷: jd_repot_bg.png(1840×1027) — 밝은 회백 스튜디오(벽 + 바닥 반사).
 *
 * 2026-08-06(2차, 사용자 요청): "배경 이미지의 효과를 다 없애고 이미지 그대로".
 *   걷어낸 것 — ① 다크 그라데이션 베이스 ② 컷을 얹던 ::before 슬롯(네 변 mask 페이드,
 *   --rpt-cut-w / --rpt-cut-shift) ③ 컷 뒤에 깔던 ::after blur 번짐 레이어.
 *   이제 섹션 background 로 cover 한 장만 깐다.
 * ⚠ 컷이 밝아졌으므로 이 섹션의 글자·카드는 라이트 톤이어야 읽힌다(다크로 되돌리지 말 것).
 *   이전 다크 구현과 이전 컷(effect_bg.jpg / effect_device.jpg)은 git 이력·자산에 남아 있다. */
.rpt_benefit {
	position: relative;
	/* ⚠ 다른 섹션(120px)보다 얕다 — 의도된 값.
	 * 장비를 더 키우면서 섹션 총 높이는 그대로 두려고(2026-08-06 요청) 상하 패딩에서 140px 을 덜어
	 * 그만큼 장비 높이(880 → 1020px)로 옮겼다. 총 높이 = 100 + 1020 = 1120px 로 이전과 같다.
	 * 좌측 카드 블록은 align-items:center 라 패딩이 줄어도 위치가 흔들리지 않는다.
	 * 패딩을 되돌릴 거면 .rpt_benefit__device img 의 max-height 도 함께 되돌릴 것.
	 * 2026-08-06(2차): 섹션이 길다는 지적에 40px 로 한 번 더 줄였다(장비 높이도 1020 → 950). */
	padding: 40px 0;
	/* 배경 컷은 아무 가공 없이 그대로 깐다 — cover 로 섹션을 덮기만 한다.
	 * 폴백 색은 컷 상단의 실제 픽셀(#DCE1E4)에 맞췄다. */
	background: #DCE1E4 url('/img/jd_repot_bg.png') center center / cover no-repeat;
}
.rpt_benefit > .rpt_inner { position: relative; z-index: 2; }
/* 라이트 톤 — 헤드/아이브로우는 공통 클래스를 쓰므로 이 섹션 안에서만 색을 덮어쓴다.
 * 컷이 밝은 회백(#E9EBEC 대)이라 골드는 한 톤 진하게 써야 읽힌다. */
.rpt_benefit .rpt_eyebrow { color: #9A7C46; }
.rpt_benefit .rpt_title { color: var(--rpt-ink); }
.rpt_benefit__grid {
	display: grid; grid-template-columns: 1fr 1.02fr;
	gap: 40px; align-items: center;
}
/* 우측 장비 컷 — 배경(빈 스튜디오)에 세워 놓는 느낌이라 그림자를 바닥 쪽으로만 깐다.
 * 원본이 세로형(703×1327)이라 높이를 기준으로 묶어야 카드 두 줄과 키가 맞는다. */
.rpt_benefit__device {
	display: flex; align-items: center; justify-content: center;
	line-height: 0;
}
/* 세로 컷이라 높이가 곧 크기다 — 620px 로는 우측 칸 폭(약 620px)의 절반밖에 못 채워 작아 보였다
 * (2026-08-06 지적). 620 → 880 → 1020px 로 키웠고, 섹션 총 높이는 위 .rpt_benefit 의
 * 패딩을 줄여 그대로 유지한다. 폭 상한은 우측 칸(약 620px)을 넘지 않는 선. */
.rpt_benefit__device img {
	width: auto; max-width: min(100%, 560px); max-height: 950px; display: block;
	filter: drop-shadow(0 30px 34px rgba(40, 48, 56, .24));
}
/* 2026-08-27 — 원고 반영으로 효과 카드가 6개 → 4개가 됐다. 3열이면 둘째 줄에 한 장만 남아
   줄이 비어 보이므로 2열(2×2)로 바꾼다. 카드를 다시 6개로 늘리면 repeat(3, 1fr) 로 되돌릴 것. */
/* 2026-08-31 — 카드 폭을 좌측 칸 절반(319px)에서 고정 210px 로 줄였다(사용자 지시 — 정사각 느낌).
   1fr 로 두면 카드가 칸을 다 채워 가로로 길어진다. 좌측 정렬은 제목·아이브로우 축과 맞추는 것.
   ⚠ 480↓ 에서는 아래 미디어쿼리가 다시 1fr 로 덮는다(좁은 폭에선 고정폭이 화면을 못 채운다). */
.rpt_benefit__list {
	display: grid; grid-template-columns: repeat(2, 210px);
	justify-content: start;
	gap: 16px; margin: 44px 0 0; padding: 0; list-style: none;
}
.rpt_benefit__item {
	position: relative;
	/* 2026-08-31 — 정사각(aspect-ratio:1/1)을 걷어냈다.
	 * 카드가 6개(3열)일 때는 폭이 좁아 정사각이 맞았지만, 4개(2열)로 바뀌며 폭이 319px 로 넓어져
	 * 높이까지 319px 이 됐다 — 내용(아이콘 41 + 제목 26)은 83px 뿐이라 빈 칸이 236px 이었다.
	 * ⚠ 정사각으로 되돌리지 말 것. 카드를 다시 6개(3열)로 늘릴 때만 재검토한다. */
	min-height: 200px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 16px;
	padding: 20px 12px;
	/* 2026-08-06(2차): 반투명(.6)에서 불투명으로 바꿨다(사용자 요청 — 뒤 배경이 비쳐 글이 흐렸다).
	 * ⚠ backdrop-filter 는 여전히 쓰지 않는다(컷을 흐리지 않기로 한 결정). */
	background: linear-gradient(180deg, #FFFFFF 0%, #FAF9F7 100%);
	border: 1px solid rgba(38,35,29,.09);
	border-left: 5px solid var(--rpt-gold-deep);   /* Figma: 좌측 굵은 라인 */
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 14px 30px -22px rgba(70, 58, 40, .45);
	/* ⚠ background 단축이 아니라 background-image 만 전환한다(2026-08-07).
	 *   hover 에서 그라데이션 → 단색(#FFF)으로 바꾸면 CSS 가 보간하지 못해 전환이 툭 끊긴다(=깜빡임).
	 *   hover 값도 같은 형태의 그라데이션으로 두어야 부드럽게 이어진다. */
	transition: border-color .3s ease, background-image .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
/* hover 로 카드가 뜰 때 커서가 카드 하단 밖으로 밀려 hover 가 풀렸다 걸렸다 반복(=진동)하는 걸 막는다.
 * 원래 자리까지 덮는 투명 히트영역을 카드 뒤(z-index:-1)에 깔아 둔다. */
.rpt_benefit__item::before {
	content: '';
	position: absolute; left: 0; right: 0; top: 0; bottom: -8px;
	z-index: -1;
}
/* Figma: 텍스트 아래 짧은 구분선 */
.rpt_benefit__item::after {
	content: '';
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
	width: 46px; height: 1px; background: rgba(38,35,29,.16);
}
.rpt_benefit__item:hover {
	transform: translateY(-6px);   /* 다른 카드(.rpt_step__card·.rpt_herb__item)와 동일한 상승폭 */
	background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);  /* 단색 아님 — 위 주석 참고 */
	border-left-color: #8E7340;
	box-shadow: 0 24px 42px -24px rgba(70, 58, 40, .55);
}
.rpt_benefit__ic { display: inline-flex; color: var(--rpt-gold-deep); }
.rpt_benefit__ic svg { width: 41px; height: 41px; }
.rpt_benefit__item strong {
	font-weight: 700; font-size: 18px; letter-spacing: -0.3px; color: var(--rpt-ink);
}

/* ===== 6. 리팟레이저 x 한방재생약침 (2026-08-06 신설) =====
 * 앞(5번 효과 = 밝은 스튜디오 컷) · 뒤(7번 추천 = 흰-크림)가 모두 밝아, 여기만 딥그린으로 눌러
 * 페이지에 리듬을 준다. 한·양방 협진이 주제라 그린 톤이 내용과도 맞는다.
 * ⚠ 카드 안에는 흰 바탕을 깐다 — 이미지가 일러스트(흰 배경)와 사진이 섞여 있어
 *   그린 위에 바로 얹으면 일러스트만 흰 사각형으로 튄다. */
/* 2026-08-06(3차): 다크 톤을 걷어내고 밝은 세이지-크림으로 바꿨다(사용자 요청).
 * 앞(5번 효과 = 밝은 회백 스튜디오)·뒤(7번 추천 = 흰-크림)와 구분되도록
 * 이 섹션만 옅은 그린기를 넣는다 — 한방이 주제라 색으로도 맞다.
 * ⚠ 배경이 밝아졌으니 카드·글자도 라이트 톤이어야 한다(아래 .rpt_herb__item). 다크로 되돌리지 말 것. */
.rpt_herb {
	position: relative;
	padding: 120px 0;
	background:
		radial-gradient(62% 48% at 50% -4%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(168deg, #F3F7F2 0%, #EFF4EE 48%, #E9F0E8 100%);
}
/* 위·아래 경계의 얇은 그린 헤어라인 — 앞뒤 섹션과 맞닿는 면을 정리해 준다 */
.rpt_herb::before,
.rpt_herb::after {
	content: '';
	position: absolute; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, rgba(46,66,54,0) 0%, rgba(46,66,54,.16) 50%, rgba(46,66,54,0) 100%);
}
.rpt_herb::before { top: 0; }
.rpt_herb::after  { bottom: 0; }
.rpt_herb > .rpt_inner { position: relative; z-index: 1; }
.rpt_herb .rpt_eyebrow--serif { color: var(--rpt-gold-deep); }
/* 2026-08-10: 초록 글자를 먹으로 내렸다(사용자 지시). 배경이 옅은 그린기라 그린 글자가 묻혔다. */
.rpt_herb__title { color: var(--rpt-ink); }
.rpt_herb__title em { font-style: normal; color: var(--rpt-gold-deep); }
.rpt_herb__lead { color: var(--rpt-body); }
.rpt_herb__list {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 30px; margin: 60px 0 0; padding: 0; list-style: none;
}
/* 카드(2026-08-06 3차) — 밝은 배경에 맞춘 흰 카드.
 * 사진이 카드 폭을 꽉 채우고, 그 아래를 흰 면으로 이어 받는 구조. 테두리는 아주 옅게만 둔다
 * (배경과 카드가 둘 다 밝아 테두리를 진하게 하면 선이 먼저 보인다). */
.rpt_herb__item {
	position: relative;
	padding: 0 0 32px;
	background: #FFFFFF;
	border: 1px solid rgba(46, 66, 54, .09);
	border-radius: 8px;          /* 이미지 박스 radius 8px 규칙 */
	overflow: hidden;
	text-align: center;
	box-shadow: 0 20px 40px -30px rgba(46, 66, 54, .55);
	transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .35s ease;
}
.rpt_herb__item:hover {
	transform: translateY(-6px);
	border-color: rgba(166, 139, 91, .38);
	box-shadow: 0 30px 52px -30px rgba(46, 66, 54, .5);
}
.rpt_herb__img {
	position: relative;
	display: block; width: 100%; aspect-ratio: 4 / 3;
	line-height: 0; overflow: hidden; background: #F1F5F0;
}
/* 사진 하단을 흰 카드로 흘려보내는 스크림 — 사진과 텍스트의 경계선을 없앤다.
 * 컷마다 배경색이 달라(흰 일러스트 / 크림 사진) 흰색 페이드가 가장 무난하다. */
.rpt_herb__img::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 100%);
	pointer-events: none;
}
.rpt_herb__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
/* 컷마다 원본 비율이 달라(1.79 / 1.44 / 1.04) 4:3 박스에서 잘리는 방향이 다르다.
 *   ③ 얼굴 클로즈업은 세로가 22% 잘리는데 center 로 두면 눈이 상단에서 잘린다 → 위쪽을 더 살린다.
 * ⚠ 이미지를 교체하면 이 값도 다시 볼 것(2026-08-07). */
.rpt_herb__item:nth-child(3) .rpt_herb__img img { object-position: center 30%; }
.rpt_herb__item:hover .rpt_herb__img img { transform: scale(1.05); }
/* ⚠ 2026-08-10 사용자 지시로 번호 배지를 마크업에서 뺐다 — 아래 .rpt_herb__no 는 현재 미사용.
 *   되살리려면 repot.jsp 의 <em class="rpt_herb__no"> 3개를 되돌리고
 *   .rpt_herb__name 의 margin-top 을 다시 16px 로 내릴 것. */
.rpt_herb__no {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin-top: -22px;
	/* 흰 카드 위 — 딥그린 원에 크림색 숫자(밝은 배경에서 번호가 가장 먼저 읽힌다) */
	background: var(--rpt-green); border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
	font-family: 'Cormorant Garamond', serif;
	font-style: normal; font-weight: 700; font-size: 17px; letter-spacing: .8px;
	color: #E8DCC2;
}
/* margin-top 은 번호 배지가 빠진 자리를 대신 받는 값이다(배지 시절 -22px + 16px 였다) */
.rpt_herb__name {
	display: block; margin-top: 26px;
	font-weight: 700; font-size: 21px; letter-spacing: -0.3px; color: var(--rpt-ink);
}
.rpt_herb__desc {
	margin: 12px 22px 0;
	font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--rpt-body-2);
	word-break: keep-all;
}

/* ===== 6. 리팟 레이저, 이렇게 작용합니다 (구 5단계 카드) =====
 * ⚠ 아래 .rpt_step* 는 전부 미사용이다(2026-08-06).
 *   ① 5단계를 독립 섹션에서 2번 원리 섹션 안으로 옮겼고(섹션 껍데기 .rpt_step 폐기),
 *   ② 그 뒤 카드 그리드도 가로 타임라인(.rpt_route, 위 2번 블록)으로 교체했다.
 *   되돌릴 일이 없다면 이 블록과 반응형의 .rpt_step__* 규칙을 통째로 지워도 된다. */
.rpt_step {
	padding: 110px 0 120px;
	background: #F3F7F0 url('/img/signature/repot/process_bg.jpg') center center / cover no-repeat;
}
.rpt_step .rpt_lead { color: #666; font-weight: 500; }
.rpt_step__list {
	display: grid; grid-template-columns: repeat(5, 1fr);
	align-items: stretch;   /* 설명 줄 수가 달라도 카드 높이는 동일하게 */
	gap: 26px; margin: 60px 0 0; padding: 0; list-style: none;
}
.rpt_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;
}
.rpt_step__card:hover {
	transform: translateY(-6px);
	border-color: #CBD9C6;
	box-shadow: 0 26px 44px -26px rgba(60, 80, 60, .55);
}
.rpt_step__card:hover .rpt_step__img img { transform: scale(1.05); }
/* 원본 5컷의 가로세로가 미세하게 달라(600·618×340) 비율을 고정해 카드 상단을 맞춘다 */
.rpt_step__img {
	display: block; width: 100%; aspect-ratio: 600 / 340;
	line-height: 0; overflow: hidden;
}
.rpt_step__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.rpt_step__no {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin-top: 24px;
	background: var(--rpt-green-3); border-radius: 20px;
	font-weight: 700; font-size: 20px; color: #fff;
}
.rpt_step__name {
	display: block; margin-top: 14px;
	font-weight: 700; font-size: 22px; letter-spacing: -0.4px; color: var(--rpt-green-3);
}
.rpt_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;
}

/* ===== 7. 이런 분께 추천합니다 ===== */
.rpt_reco {
	padding: 110px 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #FBF7F0 100%);
}
/* 2026-08-13 — 사진 카드를 **정사각**으로 바꾸고 오른쪽 텍스트와 위·아래 끝을 맞췄다(사용자 지시).
 * 맞추는 방식이 핵심이다:
 *   ① 카드는 aspect-ratio 1/1 → 폭(열 비율)이 곧 높이다. 열 비율 1 : 1.5 에서 정사각 높이가
 *      텍스트 높이보다 커지므로, 행 높이는 사진이 정한다.
 *   ② 텍스트는 flex column + 리스트에 flex:1 → 남는 높이를 체크 리스트가 균등하게(grid-auto-rows:1fr)
 *      나눠 가진다. 그래서 사진 아랫변과 마지막 항목의 밑줄이 정확히 같은 선에서 끝난다.
 *   ⚠ body 에 justify-content: space-between 은 쓰지 말 것 — 타이틀과 리스트 사이만 크게 벌어진다(검토 후 폐기).
 *   ⚠ 열 비율을 1.12 로 되돌리면 사진이 커져 리스트 행이 과하게 늘어난다. */
.rpt_reco__grid {
	display: grid; grid-template-columns: 1fr 1.5fr;
	gap: 52px; align-items: stretch;
}
.rpt_reco__media {
	align-self: start;
	aspect-ratio: 1 / 1;
	border-radius: 8px; overflow: hidden; line-height: 0;
	box-shadow: 0 26px 50px -34px rgba(90, 74, 48, .5);
}
/* 자산도 1200x1200 정사각본이라 cover 로 잘려 나가는 부분은 사실상 없다 */
.rpt_reco__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpt_reco__body { display: flex; flex-direction: column; }
.rpt_reco__title {
	margin: 18px 0 0;
	font-weight: 800; font-size: 34px; line-height: 1.35; letter-spacing: -0.6px; color: var(--rpt-ink);
}
.rpt_reco__title em { font-style: normal; color: var(--rpt-gold-deep); }
/* ⚠ 2026-08-07 사용자 지시로 마크업에서 뺐다(타이틀 아래 바로 리스트). 되살릴 때를 대비해 규칙만 남긴다. */
.rpt_reco__desc {
	margin: 20px 0 0;
	font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--rpt-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)이 같은 값이다. 한 곳만 고치면 어긋난다. */
.rpt_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(--rpt-line);
	flex: 1 1 auto;        /* 사진(정사각) 높이에서 남는 만큼을 리스트가 채운다 — 위 .rpt_reco__grid 주석 참조 */
}
.rpt_reco__list li {
	display: flex; align-items: center; gap: 14px;
	padding: 21px 2px;
	border-bottom: 1px solid var(--rpt-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;
}
.rpt_reco__list li:hover { color: var(--rpt-green); }
/* 얇은 원형 체크 */
.rpt_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;
}
.rpt_check::after {
	content: '';
	position: absolute; left: 5.5px; top: 6.5px;
	width: 9px; height: 4.5px;
	border-left: 1.5px solid var(--rpt-gold-deep); border-bottom: 1.5px solid var(--rpt-gold-deep);
	transform: rotate(-45deg);
	transition: border-color .25s ease;
}
.rpt_reco__list li:hover .rpt_check { background: var(--rpt-gold-deep); border-color: var(--rpt-gold-deep); }
.rpt_reco__list li:hover .rpt_check::after { border-left-color: #fff; border-bottom-color: #fff; }

/* ===== 8. 자주하는 질문 ===== */
.rpt_faq { padding: 110px 0 120px; background: #fff; }
.rpt_faq__grid {
	display: grid; grid-template-columns: 380px minmax(0, 1fr);
	gap: 80px; align-items: start;
}
.rpt_faq__head { position: sticky; top: 110px; }
.rpt_faq__head .rpt_title { margin-top: 18px; }
.rpt_faq__head .rpt_lead { margin-top: 18px; font-size: 18px; line-height: 1.7; }
.rpt .rpt_faq__cta {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 32px; padding: 14px 28px;
	border: 1px solid var(--rpt-green); border-radius: 999px;
	font-weight: 700; font-size: 16px; color: var(--rpt-green); text-decoration: none;
	transition: background .25s ease, color .25s ease;
}
/* 화살표 — 2026-08-07 사용자 지시로 CSS 로 그리던 '가는 선 + 45° 촉' 을 이미지로 교체.
 * ⚠ background-image 가 아니라 **mask** 다. 이 버튼은 hover 에 배경이 그린으로 차고 글자가 흰색이 되는데,
 *   background-image 로 깔면 화살표만 어두운 채 남아 안 보인다. mask + currentColor 라야 글자색을 따라간다.
 * ⚠ 같은 화살표가 juvegen·custom·slimcare 의 FAQ CTA 와 main_content 의 .jdh_skin__cta 에도 있다
 *   (2026-08-07 다섯 곳을 함께 교체). 고칠 때 다섯을 함께 볼 것. */
.rpt .rpt_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;
}
.rpt .rpt_faq__cta:hover { background: var(--rpt-green); color: #fff; }

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

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

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1440px) {
	/* 5단 스텝은 폭이 좁아지면 설명이 3줄로 깨져 카드 높이가 들쭉날쭉해진다 */
	.rpt_step__desc { font-size: 16px; }
	.rpt_step__name { font-size: 21px; }
}
@media all and (max-width: 1280px) {
	.rpt .rpt_inner, .rpt_hero__inner { padding: 0 28px; }
	.rpt_hero__inner { min-height: 600px; }   /* 시그니처 4종 공통 */
	.rpt_faq__grid { grid-template-columns: 320px minmax(0, 1fr); gap: 52px; }
	.rpt_reco__grid { gap: 44px; }
	.rpt_step__list { gap: 18px; }
	.rpt_promise__item { padding: 6px 20px; }
	/* 화살표를 바깥에 둘 여백이 사라지므로 영상 위로 겹쳐 올린다 */
	.rpt_tech__grid { padding: 0 28px; }
	.rpt_tech__title { font-size: 34px; }
	.rpt_tech__media { border-radius: 120px 24px 120px 24px; }
	.rpt_tech__nav {
		width: 40px; height: 40px;
		background: rgba(255,255,255,.82); border-radius: 50%;
		box-shadow: 0 6px 16px -8px rgba(70,58,40,.45);
		display: flex; align-items: center; justify-content: center;
	}
	.rpt_tech__nav--prev { left: 10px; }
	.rpt_tech__nav--next { right: 10px; }
}
@media all and (max-width: 1024px) {
	.rpt_mode, .rpt_intro, .rpt_benefit, .rpt_herb, .rpt_step, .rpt_reco, .rpt_faq, .rpt_promise { padding: 76px 0; }
	.rpt_tech { padding: 76px 0; }
	.rpt_herb__list { gap: 20px; margin-top: 44px; }
	.rpt_herb__name { font-size: 19px; }
	.rpt_herb__desc { margin: 10px 16px 0; font-size: 15px; }
	/* 리드의 br 은 데스크톱 기준 줄바꿈이라 이 폭부터는 어긋난다.
	   JSP 에서 br 앞에 공백을 넣어 뒀으므로 숨겨도 단어가 붙지 않는다. */
	.rpt_mode .rpt_lead { margin-top: 30px; }
	.rpt_mode .rpt_lead br { display: none; }
	.rpt_mode__list { gap: 20px; margin-top: 46px; }
	.rpt_mode__item { padding: 40px 14px; gap: 20px; }
	.rpt_mode__label { font-size: 18px; }
	/* ⚠ 4번 섹션 안의 카드는 .rpt_intro .rpt_mode__*(0,2,0) 로 덮어 뒀으므로 여기서도 같은 특이도로 써야 한다 */
	.rpt .rpt_intro__points { margin-top: 60px; padding-top: 44px; }
	.rpt_intro .rpt_mode__item { padding: 6px 16px; gap: 18px; }
	.rpt_intro .rpt_mode__ic { width: 82px; height: 82px; }
	.rpt_intro .rpt_mode__ic svg { width: 38px; height: 38px; }
	.rpt_intro .rpt_mode__ic--img img { height: 34px; }
	.rpt_intro .rpt_mode__label { font-size: 17px; }
	.rpt_title { font-size: 32px; margin-top: 20px; }
	.rpt_lead { font-size: 18px; margin-top: 18px; }
	/* 히어로 — 2026-08-04 구조 변경(사용자 지시 "모바일 히어로가 이상하다").
	 * 이전: 배경을 하단 정렬로 깔고 .rpt_hero__inner 의 padding-bottom(50vw) 으로 모델 자리를 비웠다.
	 *   배경 크기(130%)와 여백(50vw)을 손으로 맞추는 방식이라 한쪽만 손대면 카피와 모델이 겹치거나
	 *   아래가 텅 빈다. 실제로 형제 페이지(custom)는 이 계산이 어긋나 있었다.
	 * 지금: ::after 이미지 블록이 문서 흐름 안에서 자리를 차지한다 → 블록 높이 = 곧 이미지 높이.
	 *   aspect-ratio 1.727 = 1 ÷ (150% ÷ 이미지 비율 2.591). size 를 바꾸면 이 값도 함께 고칠 것.
	 * x 100% + size 150% — 이미지 우측 2/3 만 잘라 쓴다. 원본에서 우측 73% 지점에 있던 모델이
	 *   화면 32~87% 구간으로 들어와, 좌측이 텅 비던 문제가 사라진다. */
	.rpt_hero {
		background: none;
		background-color: #F0F0F1;
	}
	.rpt_hero::after {
		content: '';
		display: block;
		width: 100%;
		aspect-ratio: 1.727;
		background: url('/img/jd_lazor_bg.png') 100% center / 150% auto no-repeat;
		/* 카피 면과의 이음매 — 2026-09-01 사용자 지적("뚝 잘려 보인다").
		   카피 면(.rpt_hero 의 background-color)과 사진의 색이 달라 맞닿는 선이 그대로 드러났다.
		   사진 윗변을 마스크로 지우면 그 자리에 부모의 배경색이 비쳐 자연스럽게 이어진다.
		   ⚠ 색을 직접 얹지 않는 이유 — 카피 면 색이 바뀌어도 이 값은 손댈 필요가 없다.
		   ⚠ 14% 보다 깊게 지우면 모델의 머리 위쪽이 흐려진다. */
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
		        mask-image: linear-gradient(180deg, transparent 0, #000 14%);
	}
	.rpt_hero__inner {
		display: block;
		min-height: 0;
		padding: 56px 28px 40px;
	}
	.rpt_hero__copy { max-width: none; }
	.rpt_hero__desc { font-size: 18px; }
	/* 원리 슬라이드 — 데스크톱부터 이미 1열 중앙이라 여기서는 좌우 여백만 줄인다.
	 * (모델 컷이 있던 시절의 order/마스크 규칙은 2026-08-06 에 걷어냈다) */
	.rpt_tech__grid { padding: 0 28px; }
	.rpt_tech__title { font-size: 30px; }
	.rpt_tech__lead { font-size: 17px; margin-top: 16px; }
	.rpt_tech__slider { margin-top: 34px; }
	.rpt_tech__name { font-size: 22px; }
	.rpt_tech__desc { font-size: 17px; }
	.rpt .rpt_tech__flow { margin-top: 76px; padding-top: 48px; }
	.rpt_tech__flow-title { font-size: 26px; }
	.rpt_tech__flow-lead { font-size: 16px; margin-top: 14px; }
	/* 5단계 → 3열. 줄이 바뀌면 연결선이 행 끝에서 끊겨 어색하므로 선은 감추고 번호만 남긴다. */
	.rpt_route { grid-template-columns: repeat(3, 1fr); gap: 34px 20px; margin-top: 40px; }
	.rpt_route__node::before { display: none; }
	.rpt_route__name { font-size: 20px; }
	.rpt_route__desc { font-size: 16px; }
	/* 좌우 2열 → 1열 */
	.rpt_intro__grid, .rpt_benefit__grid, .rpt_reco__grid { grid-template-columns: 1fr; gap: 36px; }
	/* 1열에서는 정사각을 푼다 — 사진이 본문 폭 전체를 정사각으로 먹으면 한 화면을 통째로 차지한다.
	   맞출 텍스트가 옆에 없으니 리스트도 늘릴 이유가 없다. */
	.rpt_reco__media { aspect-ratio: auto; }
	.rpt_reco__media img { height: auto; }
	.rpt_reco__list { flex: 0 1 auto; }
	/* 1열에서도 배경 컷은 데스크톱과 같은 방식(가공 없이 cover) — 패딩만 줄인다.
	 * 예전에는 여기서 컷을 .rpt_benefit__grid::before 이미지 블록으로 따로 얹고 네 모서리를
	 * 페이드했는데, "이미지 그대로" 요청에 따라 그 블록과 다크 배경을 함께 걷어냈다(2026-08-06). */
	.rpt_benefit { padding: 56px 0; }
	.rpt_benefit__list { margin-top: 30px; }
	/* 1열에서는 장비가 카드 아래로 내려간다 — 세로 컷이라 높이를 더 묶어야 화면을 덜 먹는다 */
	.rpt_benefit__device img { max-height: 560px; }
	.rpt_spec { margin-top: 40px; }
	.rpt_intro__title { font-size: 26px; }
	.rpt_intro__desc { font-size: 18px; }
	/* 1열로 떨어지면 사진 아래에 글이 통째로 놓인다 — 왼쪽 정렬로 두면 넓은 오른쪽이 비어 보인다.
	 * 시그니처 4종(repot·juvegen·custom·slimcare)이 같은 규칙이다(2026-08-07 사용자 지시). */
	.rpt_intro__body { text-align: center; }
	/* 원문 <br> 로 잡아 둔 줄이 좁은 폭에서 한 번 더 접힌다 — keep-all 이 없으면
	 * '관계없이' 가 '관계 / 없이' 로 갈린다. ⚠ <br> 자체는 숨기면 안 된다(원문에 공백이 없어 단어가 붙는다). */
	.rpt_intro__desc { word-break: keep-all; }
	.rpt_reco__title { font-size: 28px; }
	/* 작용 원리 3열 → 나머지 2개는 다음 줄 */
	.rpt_step__list { grid-template-columns: repeat(3, 1fr); gap: 22px; }
	/* FAQ 1열 */
	.rpt_faq__grid { grid-template-columns: 1fr; gap: 34px; }
	.rpt_faq__head { position: static; }
	/* 약속 2열 */
	.rpt_promise__list { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
	.rpt_promise__item:nth-child(odd) { border-left: 0; }
	.rpt_promise__foot { flex-direction: column; gap: 22px; text-align: center; }
	.rpt_promise__sign img { width: 280px; }
}
@media all and (max-width: 768px) {
	/* 2026-08-12 — 좁은 폭에서 문장이 어절 중간에서 갈리는 곳이 페이지 곳곳에 있었다
	 * ('설계합/니다', 'AutoDerm 기/술을', '과냉각시킴으로/써', '적음에/관계없이').
	 * 개별 셀렉터로 하나씩 잡는 대신 페이지 루트에 한 번만 건다 — 이 페이지는 본문이 전부 한국어다.
	 * ⚠ keep-all 은 영문 단어 사이 줄바꿈은 그대로 허용하므로 'AutoDerm' 같은 낱말이 넘치지 않는다. */
	.jdh_sub.rpt { word-break: keep-all; }
	.rpt .rpt_inner, .rpt_hero__inner { padding: 0 18px; }
	.rpt_mode, .rpt_intro, .rpt_benefit, .rpt_herb, .rpt_step, .rpt_reco, .rpt_faq, .rpt_promise { padding: 56px 0; }
	/* 2026-08-12 — 1열 세로 나열은 카드 3장에 1,230px 을 썼다 → **가로 스와이프**.
	 * ⚠ max-width:420px + margin auto(가운데 정렬)를 반드시 함께 걷어낼 것.
	 *   남겨 두면 스크롤 영역이 420px 로 묶여 음수 마진이 어긋난다.
	 * 사진 비율은 16:9 로 넓힌 값을 유지한다(4:3 으로 되돌리면 카드가 다시 길어진다). */
	.rpt_herb__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		gap: 12px;
		margin: 34px -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;
	}
	.rpt_herb__list::-webkit-scrollbar { height: 3px; }
	.rpt_herb__list::-webkit-scrollbar-track { background: rgba(60,70,60,.10); border-radius: 999px; }
	.rpt_herb__list::-webkit-scrollbar-thumb { background: rgba(166,139,91,.65); border-radius: 999px; }
	.rpt_herb__item { scroll-snap-align: center; }
	.rpt_herb__img { aspect-ratio: 16 / 9; }
	.rpt_herb__item { padding-bottom: 28px; }
	.rpt_herb__no { width: 40px; height: 40px; margin-top: -20px; font-size: 16px; }
	.rpt_herb__name { margin-top: 12px; font-size: 18px; }
	.rpt_herb__desc { font-size: 14.5px; }
	.rpt_herb__desc br { display: none; }
	.rpt_tech { padding: 56px 0; }
	/* 3가지 모드 — 리드는 데스크톱 기준 줄바꿈이라 좁은 폭에서 어긋난다.
	   JSP 에서 br 앞에 공백을 넣어 뒀으므로 여기서 숨겨도 단어가 붙지 않는다. */
	.rpt_mode .rpt_lead br { display: none; }
	.rpt_mode .rpt_lead { text-align: left; }
	/* 좁은 폭에서 "정확한 시술!" 이 음절 단위로 끊기지 않게 */
	.rpt_mode .rpt_title { word-break: keep-all; }
	/* 카드 — 3열은 좁아서 라벨이 깨진다 → 1열 */
	.rpt_mode__list { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
	.rpt_mode__item { flex-direction: row; justify-content: flex-start; gap: 22px; padding: 22px 24px; }
	/* 1열 — 아이콘 좌 / 문구 우 가로 배치가 되므로 세로 구분선 대신 가로 구분선을 쓴다 */
	.rpt .rpt_intro__points { margin-top: 44px; padding-top: 34px; }
	.rpt_intro .rpt_mode__item { padding: 18px 4px; gap: 20px; }
	.rpt_intro .rpt_mode__item + .rpt_mode__item::before {
		left: 0; right: 0; top: 0; width: auto; height: 1px; transform: none;
	}
	.rpt_intro .rpt_mode__ic { flex: 0 0 68px; width: 68px; height: 68px; }
	.rpt_intro .rpt_mode__ic svg { width: 32px; height: 32px; }
	.rpt_intro .rpt_mode__ic--img img { height: 28px; }
	.rpt_intro .rpt_mode__label { text-align: left; font-size: 16.5px; }
	.rpt_mode__ic { flex: 0 0 52px; height: 52px; }
	.rpt_mode__ic svg { width: 46px; height: 46px; }
	.rpt_mode__ic--img img { height: 40px; }
	.rpt_mode__label { text-align: left; font-size: 17px; }
	/* 화면이 좁을수록 인물이 작아지므로 크롭을 한 단 더 키운다(150% → 175%).
	 * aspect-ratio 1.481 = 1 ÷ (175% ÷ 2.591) — size 와 항상 짝으로 고칠 것. */
	.rpt_hero::after { aspect-ratio: 1.481; background-size: 175% auto; }
	.rpt_hero__inner { padding: 40px 18px 32px; }
	.rpt_hero__eyebrow { font-size: 18px; letter-spacing: 3.6px; }
	.rpt_hero__desc { font-size: 16px; margin-top: 18px; }
	.rpt_title { font-size: 28px; }
	.rpt_eyebrow { font-size: 14px; }
	.rpt_eyebrow--serif,
	.rpt_eyebrow--line { font-size: 14px; letter-spacing: 3.6px; }
	.rpt_lead { font-size: 17px; }
	/* 주의: 원문 <br> 에 공백이 없어 br 을 숨기면 단어가 붙는다 → 모바일에서도 유지 */
	/* 원리 영상 슬라이드 */
	.rpt_tech__grid { padding: 0 18px; }
	.rpt_tech__title { font-size: 24px; margin-top: 18px; }
	.rpt_tech__lead { font-size: 15px; margin-top: 14px; }
	.rpt_tech__slider { margin-top: 28px; }
	.rpt_tech__name { font-size: 18px; }
	.rpt_tech__no { margin-right: 12px; font-size: 21px; }
	.rpt_tech__no::after { width: 22px; margin-left: 8px; }
	/* 좁은 화면에서는 기술명 뱃지를 다음 줄로 내린다 */
	.rpt_tech__name span { display: inline-block; margin: 8px 0 0; padding: 3px 10px; font-size: 15px; }
	.rpt_tech__media { margin-top: 16px; border-radius: 90px 20px 90px 20px; }
	.rpt_tech__desc { font-size: 15px; margin-top: 16px; }
	.rpt_tech__pager { margin-top: 22px; }
	/* 좁은 화면에서는 타이틀이 1줄(01)/2줄(02~04)로 들쭉날쭉해 영상 중앙에 화살표를 맞출 수 없다.
	 * → 영상 위가 아니라 페이지네이션과 같은 줄, 좌우 끝으로 내린다. */
	.rpt_tech__navwrap {
		top: auto; bottom: 0; height: 36px;
		aspect-ratio: auto;
	}
	.rpt_tech__nav { width: 36px; height: 36px; }
	.rpt_tech__nav--prev { left: 0; }
	.rpt_tech__nav--next { right: 0; }
	/* 개요/스펙 */
	.rpt_intro__sub { font-size: 16px; }
	.rpt_intro__title { font-size: 22px; }
	.rpt_intro__desc { font-size: 16px; }
	.rpt_spec { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.rpt_spec__item { padding: 8px 2px; }
	.rpt_spec__pic { width: 72px; height: 72px; }
	.rpt_spec__value { font-size: 16px; }
	/* 효과 카드(6개) 2열 */
	.rpt_benefit__list { grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: 10px; }
	.rpt_benefit__item { min-height: 150px; padding: 20px 10px; gap: 10px; border-left-width: 4px; }
	.rpt_benefit__item::after { bottom: 20px; width: 36px; }
	.rpt_benefit__item strong { font-size: 15px; }
	.rpt_benefit__ic svg { width: 34px; height: 34px; }
	/* 작용 원리 2열 */
	.rpt .rpt_tech__flow { margin-top: 56px; padding-top: 38px; }
	.rpt_tech__flow-title { font-size: 21px; }
	.rpt_tech__flow-lead { font-size: 15px; margin-top: 12px; }
	/* 2026-08-12 — 2열에서는 5단계 중 **마지막 하나가 왼쪽에 홀로 남아** 오른쪽이 비었고,
	 * 단계를 잇는 연결선도 2·3번 사이에서 끊겨 '순서'가 읽히지 않았다. 세로도 750px 을 썼다.
	 * → 데스크톱과 같은 **한 줄 타임라인**으로 되돌리되 가로 스와이프로 넘긴다.
	 *   연결선(.rpt_route__node::before, left/right:-50%)이 이웃과 자동으로 이어지므로
	 *   1행이 되는 순간 5단계가 하나의 흐름으로 보인다 — 이 섹션에는 이 배치가 원래 맞다.
	 * ⚠ 칸 폭 62% = 한 화면에 1.6칸. 다음 단계가 걸쳐 보여야 "이어진다"는 게 전달된다.
	 * ⚠ 음수 마진(-18px)은 .rpt_inner 의 좌우 패딩과 짝이다(이 블록 첫 줄에서 18px). */
	.rpt_route {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 62%;
		gap: 0 14px;
		margin: 32px -18px 0;
		padding: 0 18px 14px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-left: 18px;
		-webkit-overflow-scrolling: touch;
	}
	.rpt_route::-webkit-scrollbar { height: 3px; }
	.rpt_route::-webkit-scrollbar-track { background: rgba(60,70,60,.10); border-radius: 999px; }
	.rpt_route::-webkit-scrollbar-thumb { background: rgba(166,139,91,.65); border-radius: 999px; }
	.rpt_route__step { scroll-snap-align: start; }
	.rpt_route__node { height: 34px; margin-top: 18px; }
	.rpt_route__node i { width: 34px; height: 34px; font-size: 16px; }
	.rpt_route__name { margin-top: 12px; font-size: 18px; }
	.rpt_route__desc { margin-top: 7px; font-size: 15px; }
	.rpt_benefit__device img { max-height: 420px; }
	.rpt_step__list { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; }
	.rpt_step__card { padding-bottom: 24px; }
	.rpt_step__no { width: 34px; height: 34px; margin-top: 18px; font-size: 18px; }
	.rpt_step__name { font-size: 18px; margin-top: 10px; }
	.rpt_step__desc { font-size: 14px; margin: 10px 12px 0; }
	/* 추천 리스트 1열 */
	.rpt_reco__title { font-size: 24px; }
	.rpt_reco__desc { font-size: 16px; }
	.rpt_reco__list { grid-template-columns: 1fr; margin-top: 26px; }
	.rpt_reco__list li { font-size: 16.5px; padding: 17px 2px; }
	/* FAQ */
	.rpt_acc { --acc-inset: 14px; }   /* inner padding 18px 보다 좁게 — 넘치면 가로 스크롤 생긴다 */
	.rpt_acc__q { gap: 12px; padding: 20px 30px 20px 0; }
	.rpt_acc.is-open .rpt_acc__q { padding-bottom: 12px; }
	.rpt_acc__chev { right: 0; top: 32px; width: 13px; height: 13px; }
	.rpt_acc__mark { flex-basis: 18px; font-size: 18px; }
	.rpt_acc__txt { font-size: 16px; }
	.rpt_acc__a > p { padding: 0 0 0 30px; font-size: 15px; }
	.rpt_acc__a > p::before { font-size: 18px; }
	.rpt_acc.is-open .rpt_acc__a > p { padding-bottom: 22px; }
	.rpt .rpt_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` 는 이 방식으로 대체했다). */
	.rpt_promise__list { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
	.rpt_promise__item,
	.rpt_promise__item + .rpt_promise__item {
		padding: 20px 12px 18px;
		background: rgba(255,255,255,.72);
		border: 1px solid #E2E7DA;
		border-radius: 10px;
	}
	/* ⚠ keep-all 필수 — 칸이 149px 로 좁아 없으면 '시스/템', '진/료' 처럼 낱말 중간에서 갈린다 */
	.rpt_promise__name { font-size: 16px; letter-spacing: -.3px; word-break: keep-all; }
	.rpt_promise__desc { font-size: 13px; line-height: 1.62; margin-top: 8px; word-break: keep-all; }
	.rpt_promise__foot { margin-top: 40px; padding: 22px 18px; }
	.rpt_promise__foot-txt { font-size: 15px; }
	.rpt_promise__sign img { width: 230px; }
}
@media all and (max-width: 520px) {
	/* 5단계 카드는 2열에서 설명이 과하게 접히므로 1열로 */
	.rpt_step__list { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
	.rpt_tech__nav { width: 34px; height: 34px; }
	.rpt_tech__nav::before { width: 11px; height: 11px; }
}