@charset "utf-8";
/* =========================================================================
 * 증상별 솔루션 > 처짐 / 윤곽 (www/solution/lifting.jsp 전용)
 * Figma node 593:2320 (파일 LPJO7VQPEN2dJpT30fBLAm, 1920w)
 *   ※ 해당 프레임은 주름 페이지를 복제해 만든 것이라 서브탭·솔루션 제목 등 일부 텍스트가
 *     "주름/꺼짐" 그대로 남아 있다. 히어로와 시술 과정 제목만 처짐/윤곽으로 바뀌어 있으니
 *     프레임 내용을 그대로 옮기지 말 것(자세한 내용은 lifting.jsp 상단 주석).
 * 로드 순서: main_hero.css → jdh_sub.css → jdh_ba.css → 이 파일
 * 선택자는 모두 .lifting 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ── 자매 페이지와의 관계 ────────────────────────────────────────────────
 * 모공/흉터(page_pore.css) · 주름/꺼짐(page_wrinkle.css) 과 같은 "증상별 솔루션" 3형제다.
 * 타이포 스케일(배너 60px 정점 → 46/40/26/19/18/16)·8단 구성·컴포넌트를 그대로 공유한다.
 * 나란히 보게 되는 페이지들이라 정점이 다르면 위계가 어긋나므로 임의로 바꾸지 말 것.
 * (60px 은 pore 에서 사용자가 직접 지정한 값 — 40px 상한 규칙의 의도된 예외)
 * 최하단 4대 강점 배너(.lf_merit, 32/13px)도 두 페이지와 동일하게 원본 크기 유지.
 *
 * ── 두 페이지와 의도적으로 다른 부분 ───────────────────────────────────
 * · 대형 배너: pore 는 컷아웃 모델을 배경에 깔고, wrinkle 은 [사진|카피] 2열로 갔다.
 *   이 페이지는 Figma 원본에 모델 컷이 아예 없고 실버 물결 배경만 있어 → 배경 위에
 *   카피만 얹는 1단 중앙 구성으로 간다. 사진을 억지로 채우지 않는 편이 원본에 가깝다.
 * · 배경 톤: 처짐 페이지 소재는 wrinkle 과 같은 쿨 실버 계열(hero_bg·banner_bg)이다.
 *   포인트(그린/골드)는 브랜드 공통이라 동일.
 * ========================================================================= */

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

.lifting {
	--lf-green:      #3B5843;
	--lf-green-deep: #2C4632;
	--lf-ink:        #1C1E1A;
	--lf-body:       #5B615A;
	--lf-gold:       #C2A878;
	--lf-gold-lite:  #D8C49A;
	--lf-cream:      #FBF9F2;
	--lf-line:       #E7E2D8;
	--lf-paper:      #FFFDF8;
	--lf-silver:     #EFF1F3;   /* 실버 배경 위에 얹는 면 색 */

	/* ── 주제별 톤 (기본 = 처짐: 쿨 스카이) ──
	 * 탭으로 주제를 바꾸면 모델 사진은 그대로 두고 배경·글자의 색 온도만 살짝 바뀐다.
	 * 증상별 솔루션 4형제 공통 규칙 — 아래 [data-topic] 규칙에서 변수만 갈아끼운다. */
	--lf-tone-tint:   rgba(176,208,228,.40);
	--lf-tone-tint-2: rgba(214,232,240,.26);
	--lf-tone-fill:   #DEE8EE;
	--lf-tone-accent: #7E7053;
	--lf-tone-edge:   rgba(194,168,120,.65);   /* ※ 전후 포인트 원을 걷어내며(2026-08-05) 현재 참조처 없음 */
	/* 솔루션 섹션 면 색 — 탭 전환이 눈에 띄게(2026-08-28 사용자 지시).
	   ⚠ 이 페이지는 처짐/윤곽 카드가 9종 **완전히 같다** → 필터로는 화면이 전혀 안 바뀐다.
	     면 색과 카드 리빌(jdh_solgrid.css)이 유일한 전환 신호다. 지우지 말 것. */
	--lf-sol-bg:      #F4F8FA;                 /* 처짐 = 쿨 스카이 */

	/* 타이포 스케일 (page_pore.css · page_wrinkle.css 와 동일) */
	--lf-t-banner: 60px;
	--lf-t-h1:     46px;
	--lf-t-h2:     40px;
	--lf-t-card:   22px;   /* 시그니처 기준 통일(2026-08-04): 26 → 22 */
	--lf-t-solname: 28px;  /* 솔루션 대형 카드 시술명 — 스케일 한 단계 위(2026-08-05) */
	--lf-t-lead:   20px;   /* 시그니처 기준 통일(2026-08-04): 19 → 20 */
	--lf-t-body:   18px;
	--lf-t-txt:    16px;

	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--lf-ink);
	background: #fff;
	overflow-x: clip;
}
/* 윤곽 = 웜 샴페인. 같은 얼굴을 "받치는 힘"이 아니라 "선의 균형"으로 보는 전환. */
.lifting[data-topic="contour"] {
	--lf-tone-tint:   rgba(222,200,166,.38);
	--lf-tone-tint-2: rgba(236,222,200,.24);
	--lf-tone-fill:   #EDE4D8;
	--lf-tone-accent: #997C44;
	--lf-tone-edge:   rgba(153,124,68,.55);
	--lf-sol-bg:      #FBF6EE;                 /* 윤곽 = 웜 샴페인 */
}
/* 톤이 걸리는 요소들 — 색만 부드럽게 넘어간다(레이아웃은 그대로) */
.lf_hero,
.lf_banner,
.lf_hero__eyebrow,
.lf_banner__eyebrow,
.lf_tabs__ink {
	transition: background-color .6s ease, background-image .6s ease, color .6s ease, border-color .6s ease;
}
.lifting .lf_inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

/* ── 섹션 공통 타이포 ─────────────────────────────────────────────── */
/* 영문 아이브로우 공통 규격 — Cormorant Garamond 700 / 17px / 4.6px / UPPER (전 페이지 동일) */
.lifting .lf_eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #6E8874;
}
/* 제목 안의 주제 단어(<em data-topic-text>)는 탭에 따라 바뀐다 — 기울임 없이 본문과 같은 모양으로 */
.lifting .lf_title em,
.lf_hero__title em,
.lf_step__name em { font-style: normal; }

.lifting .lf_title {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: var(--lf-t-h2);
	line-height: 1.3;
	letter-spacing: -1.4px;
	color: var(--lf-ink);
	word-break: keep-all;
}

/* =========================================================================
 * 1. 히어로
 * ========================================================================= */
/* 배경 — 대형 배너(.lf_banner)와 같은 실버 물결 컷(banner_bg.jpg)을 공유한다.
 * ⚠ 2026-08-03 사용자 지시로 교체했다. 이전에는 /img/jd_signature_bg_02.png 기반의
 *   hero_bg.jpg(웜 그레이 + 물방울)를 썼는데, 배너와 색 온도가 달라 한 페이지 안에서
 *   따로 놀았다. 같은 이미지·같은 톤 변수를 쓰되 크롭 위치만 달리해(히어로 top / 배너 center)
 *   똑같아 보이지는 않게 한다.
 *   ※ hero_bg.jpg 파일은 지우지 않고 남겨 두었다 — 되돌릴 일이 생기면 아래 url 만 바꾸면 된다. */
.lf_hero {
	position: relative;
	padding: 92px 0 88px;
	text-align: center;
	background:
		linear-gradient(176deg, var(--lf-tone-tint) 0%, var(--lf-tone-tint-2) 100%),
		url('/img/solution/lifting/banner_bg.jpg') center top / cover no-repeat,
		var(--lf-tone-fill);
}
/* 카피 뒤만 옅게 밝혀 대비를 확보한다(배경 질감은 살린 채).
   배너(.lf_banner::before)는 카피가 우측이라 중심이 68% 지만, 히어로는 가운데 정렬이라 50% 다. */
.lf_hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(58% 74% at 50% 50%, rgba(252,254,255,.58) 0%, rgba(252,254,255,0) 74%);
	pointer-events: none;
}
.lf_hero > .lf_inner { position: relative; z-index: 1; }
.lf_hero__eyebrow {
	margin: 0;
	font-size: 18px;
	font-weight: 600;          /* 실버 배경에서 얇으면 묻힌다(wrinkle 과 동일) */
	letter-spacing: .3px;
	color: var(--lf-tone-accent);   /* 주제 톤을 따라간다 */
	word-break: keep-all;
}
.lf_hero__title {
	margin: 18px 0 0;
	font-weight: 800;
	font-size: var(--lf-t-h1);
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #343434;
}
.lf_hero__desc {
	margin: 22px 0 0;
	font-size: var(--lf-t-body);
	font-weight: 400;
	line-height: 1.78;
	color: rgba(28,30,26,.64);
	word-break: keep-all;
}

/* =========================================================================
 * 2. 주제 탭 (처짐 / 윤곽) — 히어로 아래 경계에 걸치는 플로팅 캡슐
 *    이전에는 화면 폭 전체를 흰 띠로 채워 히어로와 배너 사이가 툭 끊겨 보였다
 *    (2026-08-03 사용자 지적). 띠를 걷어내고 캡슐만 띄워 두 섹션이 이어지게 한다.
 *    스크롤하면 그대로 헤더 아래(72px)에 붙는다 — sticky 동작은 그대로.
 * ========================================================================= */
.lf_tabs {
	--lf-tab-h: 68px;           /* 캡슐 높이 고정 — 아래 음수 마진이 이 값을 그대로 상쇄한다 */
	position: sticky;
	/* 헤더(72px) + 여백 14px — 고정됐을 때 GNB 에 딱 붙지 않게(2026-08-28 사용자 요청) */
	top: 86px;
	z-index: 20;
	/* 위아래 마진으로 캡슐 높이를 통째로 상쇄한다 → 흐름에서 0px.
	   히어로와 배너가 맞붙고, 캡슐은 그 경계선에 절반씩 걸쳐 뜬다. */
	margin: calc(var(--lf-tab-h) / -2) 0;
	pointer-events: none;       /* 캡슐 밖 영역은 아래 콘텐츠가 이벤트를 받는다 */
}
.lf_tabs__inner {
	display: flex;
	align-items: center;
	justify-content: center;
}
.lf_tabs__bar {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	height: var(--lf-tab-h);
	box-sizing: border-box;
	padding: 0 5px;
	border: 1px solid rgba(255,255,255,.72);
	border-radius: 999px;
	background: rgba(255,253,248,.84);
	/* 2026-08-05 사용자 요청으로 그림자 제거 — 테두리와 blur 배경만으로 띄운다 */
	backdrop-filter: blur(16px) saturate(130%);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
}
.lf_tabs__list { position: relative; display: flex; }
.lf_tab {
	position: relative;
	z-index: 1;                 /* 선택 알약(ink) 위에 글자가 와야 한다 */
	/* 2026-08-13 — 탭을 가로로 늘렸다(사용자 지시). 네 솔루션 페이지 동일 값. */
	min-width: 176px;
	padding: 10px 44px 9px;
	border: 0;
	border-radius: 999px;
	background: none;
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	transition: color .25s ease;
}
.lf_tab__ko {
	display: block;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -.3px;
	color: rgba(28,30,26,.54);
	transition: color .25s ease;
}
.lf_tab__en {
	display: block;
	margin: 3px 0 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	color: rgba(28,30,26,.32);
	transition: color .25s ease;
}
/* 선택 상태 — 2px 밑줄은 캡슐 안에서 잘 읽히지 않았다 → 알약을 채우고 글자를 반전.
   알약이 밝은 크림이라 글자는 흰색이 아니라 브랜드 그린으로 눌러야 읽힌다. */
.lf_tab.is-on .lf_tab__ko { color: var(--lf-green); }
.lf_tab.is-on .lf_tab__en { color: rgba(59,88,67,.72); }
.lf_tab:hover .lf_tab__ko { color: var(--lf-ink); }
.lf_tab.is-on:hover .lf_tab__ko { color: var(--lf-green); }
/* ⚠ 알약 배경은 주제 톤(--lf-tone-accent)이 아니라 4페이지 공통 크림 고정이다.
   톤 색은 페이지마다 밝기 편차가 커 글자 대비를 보장할 수 없다. */
.lf_tabs__ink {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 999px;
	background: #EDE4D3;
	/* 선택 알약 그림자도 제거(2026-08-05) — 바 그림자를 뺀 뒤라 여기만 남으면 겉돈다 */
	transition: left .38s cubic-bezier(.22,.61,.36,1), width .38s cubic-bezier(.22,.61,.36,1);
}

/* =========================================================================
 * 3. 대형 배너 — 좌 모델 컷 / 우 카피 (wrinkle 과 같은 2열 구성)
 *    모델은 /img/jd_signature_img_02.png 을 이 페이지 자산으로 복사한 banner_model.png.
 *    투명 배경 컷아웃 PNG 라 박스로 감싸지 않고 실버 물결 배경 위에 그대로 얹는다.
 *    ※ 흰 배경이 들어간 사각 사진으로 교체하면 배경과 경계가 드러난다 — 반드시 컷아웃 PNG 를 쓸 것.
 * ========================================================================= */
.lf_banner {
	position: relative;
	background:
		linear-gradient(176deg, var(--lf-tone-tint) 0%, var(--lf-tone-tint-2) 100%),
		url('/img/solution/lifting/banner_bg.jpg') center center / cover no-repeat,
		var(--lf-tone-fill);
	overflow: hidden;
}
/* 물결 배경이 밝아 그 위 본문이 흐려지므로 카피가 놓이는 우측만 옅게 밝혀 대비를 확보한다 */
.lf_banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(58% 72% at 68% 50%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 72%);
	pointer-events: none;
}
/* ⚠ min-height 는 4형제 페이지 공통 규격이다(2026-08-05) — 페이지마다 모델컷 폭이 달라
 *   배너 높이가 713~916px 로 제각각이었다. 한 페이지만 바꾸지 말 것. */
.lf_banner__inner {
	--lf-banner-pb: 112px;      /* 하단 패딩 — 모델컷 음수 마진이 이 값을 참조하므로 함께 관리 */
	position: relative;
	z-index: 1;
	min-height: 920px;
	max-width: 1680px;
	margin: 0 auto;
	padding: 108px 40px var(--lf-banner-pb);
	display: grid;
	/* ⚠ 모델컷 컬럼 폭은 이 변수 하나로 관리한다(2026-08-14) — 아래 좌우 반전 규칙이 같은 값을 쓴다 */
	/* 2026-08-18 사용자 요청으로 모델컷을 키웠다(580 → 690).
	   ⚠ 이 값이 곧 모델 크기다 — 이미지는 width:100% 라 열 폭을 그대로 따라간다.
	     4형제 중 리프팅만 유독 작아 보였다(모공 672 / 주름 610 / 색소 564 기준). */
	--lf-col-media: minmax(300px, 690px);
	grid-template-columns: var(--lf-col-media) 1fr;
	gap: 0 56px;
	align-items: end;           /* 모델컷을 배너 바닥에 붙인다 */
}
/* 2026-08-14 — 두 번째 탭(윤곽)에서는 [텍스트 | 모델] 로 좌우를 뒤집는다(사용자 지시).
 * ⚠ 768↓ 세로 스택(display:block)에서는 order 가 무시된다 — 모바일은 사진이 위로 유지. */
.lifting[data-topic="contour"] .lf_banner__inner { grid-template-columns: 1fr var(--lf-col-media); }
.lifting[data-topic="contour"] .lf_banner__media { order: 2; }
/* 2026-08-18 — 좌우를 뒤집으면 카피가 화면 왼쪽 끝(컨테이너 패딩)에 바로 붙어 허전해 보인다
   (뒤집지 않은 탭은 모델컷 + gap 만큼 안쪽에서 시작한다) → 왼쪽 여백으로 안쪽에 앉힌다.
   ⚠ 768↓ 세로 스택에서는 0 으로 되돌린다(4형제 페이지 공통 처리). */
.lifting[data-topic="contour"] .lf_banner__body  { order: 1; padding-left: 96px; }
/* ⚠ 음수 마진: 컷아웃 원본이 가슴 아래에서 직선으로 잘린 사진이라 절단면을 배너 바닥에
 *   딱 맞추면 인물이 "뚝 끊긴" 것처럼 보인다. 하단 패딩만큼 내린 뒤 조금 더 밀어
 *   밑단이 섹션 밖으로 이어지게 한다(.lf_banner 의 overflow:hidden 이 잘라준다). */
.lf_banner__media {
	position: relative;
	margin-bottom: calc(-1 * var(--lf-banner-pb) - 30px);
	/* 컬럼 안에서 살짝 오른쪽으로. 레이아웃(그리드 폭)은 건드리지 않도록 transform 으로 민다
	   — margin-left 로 밀면 이미지가 컬럼을 넘어 카피 쪽 여백을 잡아먹는다. */
	transform: translateX(38px);
}
/* 2026-08-10 — 탭별 모델 컷 2장이 같은 자리에서 교체된다(처짐 / 윤곽).
   두 파일은 캔버스 규격(792x916)이 같아야 한다 — 비율이 다르면 전환할 때 배너 높이가 튀고
   하단 절단면이 배너 바닥에서 떠오른다(음수 마진이 이 비율 기준). */
.lf_banner__media img[hidden] { display: none; }
.lf_banner__media img {
	display: block;
	width: 100%;
	height: auto;
	/* 인물이 배경에 붕 떠 보이지 않도록 컷아웃 외곽을 따라 아주 옅은 그림자만 */
	filter: drop-shadow(0 16px 26px rgba(60,68,78,.16));
}
.lf_banner__body { align-self: center; text-align: left; }
.lf_banner__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--lf-tone-accent);   /* 주제 톤 */
}
.lf_banner__eyebrow em { font-style: normal; }
.lf_banner__title {
	margin: 18px 0 0;
	font-weight: 700;
	font-size: var(--lf-t-banner);
	line-height: 1.24;
	letter-spacing: -2.6px;
	color: var(--lf-ink);
	word-break: keep-all;
}
/* ⚠ 두 주제(처짐/윤곽) 문구가 같은 자리에서 토글된다. 길이를 70자 내외로 맞춰 두었고,
   그래도 배너가 흔들리지 않도록 2줄분 높이를 확보한다(pore/wrinkle 과 같은 방식). */
.lf_banner__desc {
	margin: 26px 0 0;
	max-width: 760px;
	min-height: 3.8em;         /* = line-height 1.86 × 2줄 */
	font-size: var(--lf-t-lead);
	font-weight: 400;
	line-height: 1.86;
	color: rgba(28,30,26,.72);
	word-break: keep-all;
}
.lf_banner__note {
	margin: 24px 0 0;
	font-size: 13px;
	color: rgba(28,30,26,.46);
}
/* 탭 전환 시 타이틀·본문이 살짝 떠오르며 교체된다 */
.lf_banner__title.is-swap,
.lf_banner__desc.is-swap { animation: lfSwap .42s cubic-bezier(.22,.61,.36,1); }
@keyframes lfSwap {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================================
 * 4. Before & After — 좌 카피 / 우 전후 뷰어
 *    뷰어 본체(.jdh_ba)는 공통 컴포넌트 /css/jdh_ba.css 담당
 * ========================================================================= */
/* 배경 — 2026-09-01 개편(사용자 지시 "고급스러운 느낌"). 4형제 페이지 공통 규격이다.
   이 섹션은 위의 딥 면(.lf_hl)과 아래 밝은 면(.lf_sol) **사이의 전환 구간**이다.
   직전 값은 162deg 라 위가 밝고 아래가 짙어, 딥 면에서 툭 튀고 아래 섹션과도 경계가 끊겼다.
   지금은 반대로 **위가 짙고 아래로 갈수록 다음 섹션 색으로 수렴**한다.
   ⚠ 베이스는 반드시 background-color(단색) — gradient 로 두면 탭 전환 transition 이 안 걸려
     색이 툭 끊긴다(.lf_hl 과 같은 이유). 질감·광원은 background-image 레이어가 얹는다.
   ⚠ 레이어 순서가 곧 위아래다: 사진 후광 → 골드 미광 → 그린 미광 → 상단 그림자 → 상단 샴페인.
   ⚠ 사선 결(빗살무늬)은 2026-08-04 사용자 요청으로 걷어낸 연출이다. 되살리지 말 것. */
.lf_ba {
	position: relative;
	padding: 104px 0 108px;
	background-color: var(--lf-sol-bg);
	background-image:
		/* ① 사진 뒤 후광 — 우측 전후 사진이 무대 위에 올라간 것처럼 떠오른다(그리드 우측 = 약 70%) */
		radial-gradient(46% 62% at 70% 44%, rgba(255,253,247,.88) 0%, rgba(255,253,247,0) 72%),
		/* ② 우상단 골드 미광 */
		radial-gradient(60% 62% at 94% 0%,  rgba(196,166,112,.28) 0%, rgba(196,166,112,0) 58%),
		/* ③ 좌하단 그린 미광 — 면이 한 색으로 비지 않게 잡아 준다 */
		radial-gradient(50% 60% at 0% 100%, rgba(59,88,67,.12)    0%, rgba(59,88,67,0)    60%),
		/* ④ 상단 그림자 — 딥 면에서 내려오는 무게. 사진 윗단이 밝은 바닥에 묻히지 않게 한다 */
		linear-gradient(180deg, rgba(74,60,38,.20) 0%, rgba(74,60,38,.05) 30%, rgba(74,60,38,0) 58%),
		/* ⑤ 상단 샴페인 — ④의 회색기를 덮어 따뜻한 금빛으로 눌러 준다 */
		linear-gradient(180deg, rgba(226,208,176,.52) 0%, rgba(226,208,176,0) 76%);
	transition: background-color .55s ease;
	overflow: hidden;
}
/* 상단 경계 — 단색 1px 테두리는 면을 잘라 놓은 것처럼 보인다. 가운데가 진하고 양끝으로
   사라지는 골드 헤어라인으로 바꿔 딥 면과 이 면이 이어지게 한다.
   ⚠ 아래쪽에는 선을 두지 않는다 — 배경이 다음 섹션 색으로 수렴하므로 선이 있으면 되레 끊긴다. */
.lf_ba::before {
	content: '';
	position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 1px;
	background: linear-gradient(90deg, rgba(194,168,120,0) 0%, rgba(194,168,120,.55) 50%, rgba(194,168,120,0) 100%);
	pointer-events: none;
}
/* 사선 결(빗살무늬) 오버레이는 2026-08-04 사용자 요청으로 제거 — 되살리지 말 것 */
.lf_ba > .lf_inner { position: relative; z-index: 1; }
.lf_ba__grid {
	display: grid;
	grid-template-columns: minmax(300px, 420px) 1fr;
	gap: 0 78px;
	align-items: center;
}
.lf_ba__desc {
	margin: 24px 0 0;
	font-size: var(--lf-t-body);
	font-weight: 400;
	line-height: 1.85;
	color: rgba(28,30,26,.72);
	word-break: keep-all;
}
/* ※ 전후 관찰 포인트 목록(.lf_ba__points)은 2026-08-05 사용자 요청으로 걷어내고
 *   Before&After 앞의 개선 포인트 배너(.lf_hl) 로 옮겼다 — 이 파일 아래쪽 4-1 항목 참조. */
.lf_ba__note {
	margin: 30px 0 0;
	font-size: 14px;
	color: rgba(28,30,26,.48);
}
/* 공통 뷰어(.jdh_ba)와 증례 슬라이드(.jdh_baslide)에 이 페이지 톤을 넘겨준다 */
/* ⚠ 그리드 칸(1fr)의 기본 min-width:auto 는 슬라이드 트랙의 가로 스크롤을 막고
 *   칸을 사진 여러 장 폭으로 부풀린다 — 0 으로 풀어야 한 장씩 넘어간다. */
.lf_ba__viewer { min-width: 0; }
.lf_ba__viewer .jdh_ba,
.lf_ba__viewer .jdh_baslide {
	--ba-ink:   var(--lf-ink);
	--ba-green: var(--lf-green);
	--ba-gold:  var(--lf-gold);
	--ba-line:  var(--lf-line);
}

/* =========================================================================
 * 4-1. 개선 포인트 배너 (Before&After 바로 앞) — 2026-08-05 사용자 요청
 *      전후 사진 옆 목록으로만 있던 관찰 포인트를, 사진을 보기 전에 한 번에 읽히는
 *      브랜드 그린 면 + 흰 칩으로 끌어냈다.
 *      ※ 처음엔 padding 58/62(≈290px)로 잡았으나 2026-08-05 사용자 요청으로 세로 1.5배 + 칩 확대.
 * ========================================================================= */
/* 배경 — 2026-08-05 탭에 따라 색이 바뀐다(항노화 stemcell 페이지와 같은 방식).
   ⚠ 베이스는 반드시 background-color(단색)로 둘 것 — gradient 는 transition 이 걸리지 않아
     탭을 눌러도 색이 툭 끊긴다. 질감(골드 광택·광원·비네트)은 ::after 오버레이가 고정으로 얹는다.
   색은 페이지 톤 변수(--lf-tone-*)와 같은 계열의 딥 버전이다. */
.lf_hl {
	/* 2026-08-24 사용자 지시 — 배경색을 **탭별 모델 의상에 맞춘다**.
	   처짐 컷은 웜 베이지 실크 블라우스(#D0AEA0) → 같은 계열의 딥 모카브라운(톤온톤).
	   ⚠ 같은 페이지의 두 탭이므로 아래 윤곽 색과 확실히 갈려야 한다 — 둘 다 브라운으로 두지 말 것. */
	--hl-base: #443229;              /* 처짐 — 딥 모카브라운(의상 베이지 실크 계열) */
	position: relative;
	padding: 88px 0 94px;
	background-color: var(--hl-base);
	overflow: hidden;
	text-align: center;
	transition: background-color .6s ease;
}
/* 윤곽 컷은 아이보리 탑(#F1E0D8) → 2026-08-24 사용자 지시로 **밝은 크림톤**(의상 톤온톤).
   ⚠ 이 탭만 면이 밝다 → 글자·워터마크·질감·칩을 **전부 뒤집어야** 한다. 아래 블록이 한 세트다.
     --hl-base 만 밝게 바꾸면 흰 타이틀·흰 칩이 배경에 묻혀 섹션이 통째로 사라진다.
   ⚠ 처짐 탭(딥 모카)은 어두운 채로 둔다 — 두 탭이 명암으로 갈려 전환이 확실히 읽힌다. */
.lifting[data-topic="contour"] .lf_hl { --hl-base: #F2ECE1; }   /* 윤곽 — 밝은 크림(아이보리 탑 톤온톤) */
/* 질감 — 어두운 면용 값(흰 광원 + 검정 비네트)을 그대로 두면 크림 위에서 뿌옇게 뜬다.
   광원은 흰색을 살짝만, 비네트는 검정 대신 웜 브라운을 옅게 깐다. */
.lifting[data-topic="contour"] .lf_hl::after {
	background:
		radial-gradient(120% 92% at 84% 6%,  rgba(194,168,120,.20) 0%, rgba(194,168,120,0) 56%),
		radial-gradient(92% 120% at 10% 0%,  rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 62%),
		radial-gradient(130% 86% at 50% 122%, rgba(108,92,64,.16)  0%, rgba(108,92,64,0)  62%);
}
.lifting[data-topic="contour"] .lf_hl::before { color: rgba(76,64,44,.07); }   /* 워터마크: 흰 → 웜 브라운 */
.lifting[data-topic="contour"] .lf_hl__eyebrow { color: var(--lf-tone-accent); }   /* 밝은 골드는 크림 위에서 날아간다 */
.lifting[data-topic="contour"] .lf_hl__title { color: var(--lf-ink); }
.lifting[data-topic="contour"] .lf_hl__title em { color: var(--lf-green); }
/* 칩 — 크림 위에서는 흰 면만으로 구분이 약하다 → 순백 + 얇은 테두리(퍼진 그림자는 줄인다).
   ⚠ 테두리는 border 가 아니라 box-shadow 스프레드로 준다 — border 를 넣으면 칩 크기가 2px 커져
     어두운 탭과 칩 폭이 달라진다. */
.lifting[data-topic="contour"] .lf_hl__list li {
	background: #fff;
	box-shadow: 0 10px 24px rgba(76,64,44,.10), 0 0 0 1px rgba(76,64,44,.10);
}
/* 질감 오버레이 — 어떤 탭 색이 와도 같은 결이 얹히도록 색을 중립(흰/검)으로 둔다 */
.lf_hl::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 92% at 84% 6%,  rgba(212,186,138,.18) 0%, rgba(212,186,138,0) 56%),
		radial-gradient(92% 120% at 10% 0%,  rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 62%),
		radial-gradient(130% 86% at 50% 122%, rgba(0,0,0,.46)      0%, rgba(0,0,0,0)      62%);
	pointer-events: none;
}
/* 배경 워터마크 — 면이 비어 보이지 않게 브랜드 이니셜을 크게 깐다 */
.lf_hl::before {
	content: 'JDH';
	position: absolute;
	right: -1%;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 340px;
	line-height: 1;
	letter-spacing: -10px;
	color: rgba(255,255,255,.055);
	pointer-events: none;
}
.lf_hl > .lf_inner { position: relative; z-index: 1; }
/* ⚠ 아래 세 규칙의 색은 **어두운 면(처짐 탭) 기준**이다.
   윤곽 탭은 크림 면이라 위쪽 [data-topic="contour"] 블록에서 전부 덮어쓴다.
   transition 은 탭 전환 때 배경(.6s)과 글자색이 함께 넘어가도록 맞춘 것이다. */
.lf_hl__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--lf-gold-lite);
	transition: color .6s ease;
}
.lf_hl__title {
	margin: 16px 0 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -1px;
	color: #fff;
	word-break: keep-all;
	transition: color .6s ease;
}
.lf_hl__title em { font-style: normal; color: var(--lf-gold-lite); transition: color .6s ease; }
.lf_hl__list {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.lf_hl__list li {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 22px 38px;
	border-radius: 12px;
	background: rgba(255,255,255,.96);
	font-size: var(--lf-t-lead);
	font-weight: 600;
	letter-spacing: -.3px;
	color: var(--lf-ink);
	box-shadow: 0 12px 30px rgba(0,0,0,.13);
}
/* 체크 아이콘 — 이미지 없이 두 변만 남긴 사각형을 45° 돌려 만든다 */
.lf_hl__list i {
	flex: 0 0 auto;
	width: 17px;
	height: 10px;
	margin-top: -6px;
	border-left: 2.5px solid var(--lf-green);
	border-bottom: 2.5px solid var(--lf-green);
	transform: rotate(-45deg);
}

/* =========================================================================
 * 5. 치료 솔루션 — [이미지 | 텍스트] 가로형 카드 2열
 * ========================================================================= */
/* ⚠ 배경은 반드시 background-color(단색)로 둘 것 — gradient 는 transition 이 걸리지 않아
   탭을 눌러도 색이 툭 끊긴다(.lf_hl 과 같은 이유). */
.lf_sol {
	padding: 104px 0 110px;
	background-color: var(--lf-sol-bg);
	transition: background-color .55s ease;
}
/* 탭 전환 시 섹션 헤더(타이틀의 주제 단어가 바뀐다)도 함께 떠오른다 */
.lf_sol__head.is-swap { animation: lfSwap .42s cubic-bezier(.22,.61,.36,1); }
/* ─── 섹션 헤더 정렬 ────────────────────────────────────────────────
 * 2026-08-04 에는 "축 다양화"(솔루션=스플릿 / 시술과정=좌측)로 갔었으나,
 * **2026-08-11 사용자 지시로 솔루션·시술과정 헤더를 가운데 정렬로 통일**했다.
 * ⚠ 스플릿 grid(좌 타이틀 / 우 설명)나 좌측 축으로 되돌리지 말 것 — 4형제 페이지 공통. */
.lf_sol__head {
	text-align: center;
	margin: 0 0 52px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--lf-line);
}
.lf_sol__desc {
	max-width: 760px;
	margin: 16px auto 0;
	font-size: var(--lf-t-body);
	font-weight: 300;
	line-height: 1.75;
	color: rgba(28,30,26,.55);
	word-break: keep-all;
}
/* ─── 솔루션 = [세로 목록 | 상세 스테이지] 쇼케이스 (2026-08-05 사용자 요청) ────
 * 지그재그 대형 카드 나열 → 좌측 시술명 목록에서 고르면 우측 상세만 바뀌는 형태로 바꿨다.
 * ⚠ 좌측 목록 버튼은 마크업에 없다 — lifting.jsp 의 스크립트가 `.lf_card__name` 을 읽어
 *   자동 생성한다. 시술명을 고치면 목록도 따라오므로 두 곳에 같은 문구를 두지 말 것.
 * ⚠ 주제탭 필터(.is-hide)가 걸리면 목록을 다시 만들고 첫 항목을 자동 선택한다. */
.lf_sol__wrap {
	display: grid;
	grid-template-columns: minmax(0, 286px) minmax(0, 1fr);
	gap: 0 58px;
	align-items: start;
}
.lf_sol__nav { border-top: 1px solid var(--lf-line); }
.lf_solnav__btn {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 21px 30px 21px 0;
	border: 0;
	border-bottom: 1px solid var(--lf-line);
	border-radius: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--lf-t-lead);
	font-weight: 600;
	letter-spacing: -.4px;
	line-height: 1.4;
	color: rgba(28,30,26,.52);
	word-break: keep-all;
	transition: color .3s ease, padding .3s ease, background-color .35s ease;
}
/* hover — 선택 항목과 헷갈리지 않게 도트 없이 색·들여쓰기·아주 옅은 면만 움직인다 */
.lf_solnav__btn:hover { color: rgba(28,30,26,.86); padding-left: 7px; background-color: rgba(28,30,26,.022); }
/* 선택 표시 — 골드 도트(헤일로) + 오른쪽 화살촉 + 왼쪽에서 사그라드는 골드 틴트.
   2026-08-05 이전에는 배경을 아예 칠하지 않아 선택 항목이 색 하나로만 구분돼 약했다.
   면을 꽉 칠하는 대신 84% 지점에서 완전히 사라지는 그라데이션이라 목록은 여전히 조용하다. */
.lf_solnav__btn.is-on {
	color: var(--lf-ink);
	font-weight: 700;
	padding-left: 18px;
	/* 좌측도 페이드시킨다 — 0% 에서 바로 진하게 시작하면 왼쪽 모서리가 각진 블록처럼 뚝 잘려 보인다.
	   양끝이 모두 투명이라 띠가 목록 위에 얹힌 게 아니라 배어 나온 것처럼 읽힌다. */
	background: linear-gradient(90deg,
		rgba(194,168,120,0)   0%,
		rgba(194,168,120,.14) 11%,
		rgba(194,168,120,.05) 52%,
		rgba(194,168,120,0)   86%);
	border-bottom-color: rgba(194,168,120,.42);
}
.lf_solnav__btn.is-on::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--lf-gold);
	box-shadow: 0 0 0 4px rgba(255,255,255,.6);   /* 흰 헤일로 — 골드 틴트 위에서 도트가 묻히지 않게 떼어낸다 */
}
.lf_solnav__btn.is-on::after {
	content: '';
	position: absolute;
	right: 7px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	/* 화살촉도 골드로 — 도트와 같은 색이라 좌우 표식이 한 쌍으로 읽힌다 */
	border-right: 1.5px solid var(--lf-gold);
	border-top: 1.5px solid var(--lf-gold);
	transform: rotate(45deg);
}
.lf_sol__list { position: relative; }
/* ⚠ 스테이지 카드는 display:none 으로 대기한다 → 공통 리빌(.jdh-up)의 교차 관찰이 걸리지 않아
   opacity:0 인 채 남고 카드가 통째로 안 보인다. 이 영역에서만 리빌을 해제한다. */
html.jdh-anim .jdh_sub .lf_sol__list .jdh-up { opacity: 1; transform: none; }
.lf_card {
	display: none;
	/* 미디어 .92 : 텍스트 1.08 — 사진 자산이 390~720px 폭이라 반반이면 저해상 컷이 뭉갠다 */
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	background: #fff;
	border: 1px solid var(--lf-line);
	border-radius: 12px;
	overflow: hidden;
}
.lf_card.is-active { display: grid; animation: lfSwap .42s cubic-bezier(.22,.61,.36,1); }
.lf_card.is-hide { display: none; }
.lf_card__media {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #F7F5F0 0%, #EFEBE2 100%);
	min-height: 430px;
}
.lf_card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
/* ⚠ 장비/제품 컷도 박스를 꽉 채운다(2026-08-03 사용자 지시).
   이전에는 contain + 여백이라 장비 원본의 검은 배경이 카드 안에 그대로 드러나고
   좌우가 비어 카드마다 사진 크기가 들쭉날쭉했다. cover 로 통일해 그리드가 정돈된다.
   ※ 대신 피사체가 잘릴 수 있다 — 장비 컷을 교체할 때 중앙에 오도록 크롭해 둘 것. */
/* 장비 카드는 /img/skin_solution/jd_*.png (흰 배경 누끼, 세로형) 를 쓴다 → 잘라내지 않고 여백 안에 통째로.
   ⚠ 위 2026-08-03 "cover" 규칙은 232px 썸네일 시절 기준이다. 570px 대형 카드에서 세로 누끼를
     cover 하면 장비 몸통만 남아 무슨 장비인지 알 수 없어 contain 으로 되돌렸다(2026-08-05). */
.lf_card__media--device { background: linear-gradient(160deg, #FBFAF7 0%, #F1EEE7 100%); }
/* padding 44/40 → 20/16 (2026-08-05). PNG 의 투명 여백을 트림한 뒤라 이 padding 이 곧 여백이다.
   예전 값은 이미지 자체 여백 위에 padding 이 겹쳐 장비가 카드 안에서 지나치게 작아 보였다. */
.lf_card__media--device img { object-fit: contain; padding: 20px 16px; }
.lf_card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 54px 58px;
}
/* 카드 넘버링(01·02…)은 2026-08-05 사용자 요청으로 뺐다 — 시술명이 첫 요소다.
   마크업의 .lf_card__no 도 함께 제거했으니 되살리려면 JSP 부터 손볼 것. */
.lf_card__name {
	margin: 0;
	font-weight: 700;
	font-size: var(--lf-t-solname);
	line-height: 1.28;
	letter-spacing: -1px;
	color: var(--lf-ink);
}
.lf_card__sub {
	margin: 10px 0 0;
	font-size: var(--lf-t-lead);
	font-weight: 500;
	color: var(--lf-green);
}
.lf_card__txt {
	margin: 20px 0 0;
	font-size: var(--lf-t-body);
	font-weight: 400;
	line-height: 1.8;
	color: rgba(28,30,26,.62);
	word-break: keep-all;
}
.lf_card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.lf_card__tags i {
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(59,88,67,.07);
	font-style: normal;
	font-size: 13px;
	font-weight: 500;
	color: var(--lf-green);
}
/* 스테이지 카드는 목록에서 고른 결과라 hover 로 뜨지 않는다(클릭 대상이 아님).
   사진 확대만 남겨 화면이 정지된 느낌이 들지 않게 한다. */
.lf_card:hover .lf_card__media img { transform: scale(1.04); }

/* =========================================================================
 * 6. 시술 과정
 * ========================================================================= */
.lf_process {
	padding: 104px 0 108px;
	/* 배경 소재가 웜 피치 계열이라 히어로(하늘빛)와 온도가 어긋난다 →
	   이미지를 갈아끼우지 않고 하늘색 필름만 얹어 톤을 맞춘다(2026-08-03).
	   ⚠ 알파를 더 올리면 피치가 완전히 죽어 회색빛으로 탁해진다. */
	background:
		linear-gradient(176deg, rgba(170,206,230,.36) 0%, rgba(206,228,240,.24) 100%),
		url('/img/solution/lifting/process_bg.jpg') center center / cover no-repeat,
		#E6EDF2;
}
/* 시술 과정 — 좌측 축. eyebrow 가 없는 섹션이라 짧은 골드 라인이 그 자리를 대신한다 */
/* 2026-08-11 좌측 축 → 가운데 정렬(사용자 지시). 골드 라인도 중앙 대칭으로 */
.lf_process__head { text-align: center; max-width: none; margin: 0 0 56px; }
.lf_process__head::before {
	content: '';
	display: block;
	width: 44px;
	height: 2px;
	margin: 0 auto 22px;
	background: linear-gradient(90deg, rgba(194,168,120,.25) 0%, var(--lf-gold) 50%, rgba(194,168,120,.25) 100%);
}
.lf_process__desc {
	max-width: 760px;
	margin: 22px auto 0;
	font-size: var(--lf-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.lf_steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}
/* 원형 카드 — 사각 박스 대신 원형 이미지 디스크.
 * ※ 이미지 박스 radius 8px 규칙의 의도된 예외(pore·wrinkle 과 동일) */
.lf_step {
	position: relative;
	padding: 0 10px;
	text-align: center;
}
/* 단계 사이 점선 연결선은 사용자 지시로 제거(2026-08-03) — 원만 나열한다 */
.lf_step__disc {
	position: relative;
	display: block;
	width: 180px;
	max-width: 100%;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: #EDE7DC;
	box-shadow: 0 14px 30px rgba(76,64,44,.16);
	transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.lf_step__disc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lf_step__disc::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.75);
	box-shadow: inset 0 0 0 1px rgba(194,168,120,.30);
	pointer-events: none;
}
.lf_step:hover .lf_step__disc {
	transform: translateY(-5px);
	box-shadow: 0 20px 38px rgba(76,64,44,.24);
}
.lf_step__no {
	margin-top: 22px;
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 3.4px;
	text-transform: uppercase;
	color: var(--lf-gold);
}
.lf_step__name {
	display: block;
	margin: 10px 0 0;
	font-weight: 600;
	font-size: var(--lf-t-lead);
	line-height: 1.44;
	letter-spacing: -.7px;
	color: var(--lf-ink);
	word-break: keep-all;
}

/* =========================================================================
 * 7. 차별화 진단 시스템
 * ========================================================================= */
/* 유리 카드가 성립하려면 뒤에 비칠 결이 있어야 한다 — 순백 위에서는 반투명이 티가 나지 않는다.
 * 아주 옅은 골드·그린 광원을 대각으로 깔아 카드가 그 위에 떠 보이게 한다(2026-08-04). */
.lf_diag {
	position: relative;
	padding: 104px 0 110px;
	background:
		radial-gradient(64% 58% at 18% 10%, rgba(194,168,120,.13) 0%, rgba(194,168,120,0) 64%),
		radial-gradient(58% 54% at 86% 88%, rgba(59,88,67,.08) 0%, rgba(59,88,67,0) 66%),
		linear-gradient(180deg, #FFFFFF 0%, #FBF8F2 100%);
	overflow: hidden;
}
.lf_diag__head { text-align: center; max-width: 1000px; margin: 0 auto; }
.lf_diag__desc {
	margin: 22px 0 0;
	font-size: var(--lf-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.lf_diag__label {
	margin: 54px 0 22px;
	text-align: center;
	font-size: var(--lf-t-lead);
	font-weight: 700;
	color: var(--lf-ink);
}
.lf_diag__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* 크림 단색 카드 → 반투명 유리(2026-08-04 사용자 요청).
 * ⚠ 불투명도(.58)를 더 올리면 유리감이 사라지고 그냥 흰 카드가 된다. */
.lf_dev {
	position: relative;
	padding: 0 0 26px;
	background: rgba(255,255,255,.58);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	border: 1px solid rgba(255,255,255,.9);
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(28,30,26,.09), inset 0 1px 0 rgba(255,255,255,.95);
	overflow: hidden;
	text-align: center;
	transition: background .5s ease, box-shadow .5s ease;
}
.lf_dev:hover {
	background: rgba(255,255,255,.74);
	box-shadow: 0 20px 46px rgba(28,30,26,.13), inset 0 1px 0 #fff;
}
.lf_dev__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(233,229,220,.55);   /* 이미지 로드 전 폴백 — 유리 톤에 맞춰 반투명 */
	border-radius: 8px 8px 0 0;
}
.lf_dev__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf_dev__name {
	display: block;
	margin: 24px 0 0;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -.6px;
	color: var(--lf-ink);
}
.lf_dev__txt {
	margin: 10px 24px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.68;
	color: rgba(28,30,26,.58);
	word-break: keep-all;
}

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

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1440px) {
	.lifting { --lf-t-banner: 52px; --lf-t-h1: 42px; --lf-t-h2: 36px; --lf-t-card: 21px; }
	.lf_banner__inner { --lf-banner-pb: 96px; --lf-col-media: minmax(280px, 600px); min-height: 800px; padding: 92px 40px var(--lf-banner-pb); gap: 0 40px; }
	.lf_banner__media { transform: translateX(30px); }
	.lf_ba__grid { gap: 0 52px; }
	.lf_sol__wrap { grid-template-columns: minmax(0, 262px) minmax(0, 1fr); gap: 0 46px; }
	.lf_card__media { min-height: 396px; }
	.lf_card__body { padding: 46px 44px; }
	.lf_step__disc { width: 164px; }
}

@media all and (max-width: 1200px) {
	.lifting { --lf-t-banner: 46px; --lf-t-h1: 38px; --lf-t-h2: 33px; --lf-t-lead: 19px; --lf-t-body: 17px; }
	.lf_hero { padding: 78px 0 74px; }
	.lf_banner__inner { --lf-banner-pb: 84px; --lf-col-media: minmax(240px, 478px); min-height: 640px; padding: 80px 32px var(--lf-banner-pb); gap: 0 30px; }
	.lifting[data-topic="contour"] .lf_banner__body { padding-left: 56px; }
	.lf_banner__media { transform: translateX(22px); }
	.lf_ba { padding: 84px 0 88px; }
	.lf_ba__grid { grid-template-columns: 1fr; gap: 40px 0; }
	.lf_sol, .lf_process, .lf_diag { padding: 84px 0 88px; }
	.lf_sol__wrap { grid-template-columns: minmax(0, 232px) minmax(0, 1fr); gap: 0 36px; }
	.lf_solnav__btn { padding: 17px 26px 17px 0; }
	.lf_card { grid-template-columns: 1fr 1fr; }
	.lf_card__media { min-height: 356px; }
	.lf_card__body { padding: 38px 36px; }
	.lf_steps { grid-template-columns: repeat(3, 1fr); gap: 34px 16px; }
	.lf_step__disc { width: 156px; }
}

@media all and (max-width: 1024px) {
	.lf_tabs { top: 70px; }             /* 헤더 60px + 여백 10px */
	/* 스플릿 헤더는 좌우로 벌릴 폭이 있어야 성립한다 → 1열로 되돌리되 좌측 축은 유지 */
	/* 좌우 2열은 폭이 있어야 성립한다 → 목록을 위로 올려 가로 스크롤 탭으로 바꾼다 */
	.lf_sol__wrap { grid-template-columns: 1fr; gap: 28px 0; }
	.lf_sol__nav {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-top: 0;
		border-bottom: 1px solid var(--lf-line);
	}
	.lf_sol__nav::-webkit-scrollbar { display: none; }
	.lf_solnav__btn { flex: 0 0 auto; width: auto; padding: 14px 18px; border-bottom: 0; white-space: nowrap; }
	/* 가로 스크롤 탭에서는 골드 틴트·헤일로가 어색하다 → 밑줄 하나로 단순화 */
	.lf_solnav__btn.is-on { padding-left: 18px; background: none; border-bottom-color: transparent; }
	.lf_solnav__btn:hover { padding-left: 18px; background: none; }
	.lf_solnav__btn.is-on::before { left: 12px; right: 12px; top: auto; bottom: -1px; width: auto; height: 2px; margin: 0; border-radius: 0; box-shadow: none; }
	.lf_solnav__btn.is-on::after { display: none; }
	.lf_sol__head { padding-bottom: 24px; }
	.lf_diag__grid { grid-template-columns: 1fr 1fr; }
	/* 2열에서는 왼쪽 칸(1·3번째)의 구분선을 지운다 — 남기면 섹션 좌측에 선이 뜬다 */
	.lf_merit__grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
	.lf_merit__item:nth-child(2n+1)::before { display: none; }
}

@media all and (max-width: 768px) {
	.lifting { --lf-t-banner: 34px; --lf-t-h1: 29px; --lf-t-h2: 26px; --lf-t-card: 19px; --lf-t-solname: 22px; --lf-t-lead: 18px; --lf-t-body: 16px; --lf-t-txt: 15px; }
	/* 좁은 폭에서 어절 중간이 갈리지 않게 페이지 루트에 한 번만 건다.
	   솔루션 4종(pore·wrinkle·lifting·pigment)이 같은 처리를 쓴다. */
	.jdh_sub.lifting { word-break: keep-all; }
	.lifting .lf_inner { padding: 0 24px; }
	.lifting .lf_eyebrow { font-size: 14px; letter-spacing: 3.6px; }

	.lf_hero { padding: 58px 0 56px; }
	.lf_hero__eyebrow { font-size: 15px; }
	.lf_hero__desc { font-size: 15px; }
	.lf_hero__desc br { display: none; }

	.lf_tabs { --lf-tab-h: 62px; }
	.lf_tab { min-width: 132px; padding: 9px 32px 8px; }
	.lf_tab__ko { font-size: 16px; }

	/* 좁은 화면에서는 사진을 위로 올리고 카피를 아래로(wrinkle 과 동일) */
	.lf_banner__inner { display: block; min-height: 0; padding: 44px 24px 52px; }   /* 세로 스택에서는 높이 통일 해제 */
	/* 세로 스택에서는 좌우 반전이 없다 — 위에서 준 왼쪽 여백을 되돌리지 않으면 글만 오른쪽으로 밀린다 */
	.lifting[data-topic="contour"] .lf_banner__body { padding-left: 0; }
	/* 2026-08-12 — 좁은 화면에서 인물이 과하게 커 배너만 화면 하나를 먹었다 → 330px.
	 * ⚠ 마스크가 핵심이다. 컷아웃 원본이 가슴 아래에서 직선으로 잘려 있어, 데스크톱은 음수 마진으로
	 *   절단면을 섹션 밖으로 밀어 감춘다. 세로 스택에서는 그게 풀려 단면이 배경 위에 드러난다
	 *   → 밑단만 알파 페이드로 흘려 경계선을 지운다(솔루션 4종 공통 처리). */
	.lf_banner__media { max-width: 330px; margin: 0 auto 26px; transform: none; }   /* 세로 스택에서는 중앙 정렬이므로 오른쪽 이동 해제 */
	.lf_banner__media img {
		-webkit-mask-image: linear-gradient(180deg, #000 0 88%, rgba(0,0,0,.55) 95%, rgba(0,0,0,0) 100%);
		        mask-image: linear-gradient(180deg, #000 0 88%, rgba(0,0,0,.55) 95%, rgba(0,0,0,0) 100%);
	}
	.lf_banner__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.lf_banner__title br { display: none; }
	.lf_banner__desc { margin-top: 20px; font-size: 15px; line-height: 1.8; min-height: 0; }

	.lf_ba { padding: 62px 0 66px; }
	.lf_hl { padding: 62px 0 66px; }
	.lf_hl::before { font-size: 210px; }
	.lf_hl__title { font-size: 25px; }
	.lf_hl__list { margin-top: 28px; gap: 12px; }
	.lf_hl__list li { gap: 11px; padding: 17px 24px; font-size: 17px; }
	.lf_hl__list i { width: 15px; height: 9px; }

	.lf_sol, .lf_process, .lf_diag { padding: 62px 0 66px; }
	.lf_sol__head { margin-bottom: 32px; padding-bottom: 20px; }
	.lf_process__head { margin-bottom: 36px; }
	.lf_process__head::before { width: 34px; margin-bottom: 16px; }
	/* 좁은 화면에서는 스테이지도 1열 — 사진 위, 설명 아래 */
	.lf_card { grid-template-columns: 1fr; }
	.lf_card__media { min-height: 0; aspect-ratio: 16 / 10; }
	.lf_card__media img { position: static; }
	.lf_card__media--device img { padding: 14px 12px; }
	.lf_card__sub { margin-top: 8px; font-size: 16px; }
	.lf_card__txt { margin-top: 14px; }
	.lf_card__tags { margin-top: 18px; }
	.lf_card__body { padding: 30px 24px 32px; }

	/* 2026-08-12 — 진행 5단계를 **가로 스와이프**로. 2열은 5개(홀수)라 마지막이 홀로 남고,
	 * 480 이하에서 쓰던 1열은 1,200px 을 먹었다. 번호가 붙은 순서형이라 옆으로 넘기는 흐름과 맞다.
	 * ⚠ 음수 마진(-24px)은 .lf_inner 의 좌우 패딩과 짝이다(480 이하는 18px → 아래 블록에서 다시 잡는다). */
	.lf_steps {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 62%;
		gap: 0 12px;
		margin: 0 -24px;
		padding: 0 24px 14px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
	}
	.lf_steps::-webkit-scrollbar { height: 3px; }
	.lf_steps::-webkit-scrollbar-track { background: rgba(60,68,78,.10); border-radius: 999px; }
	.lf_steps::-webkit-scrollbar-thumb { background: rgba(60,68,78,.34); border-radius: 999px; }
	.lf_step { padding: 0 4px; scroll-snap-align: start; }
	.lf_step__disc { width: 132px; }
	.lf_step__no { margin-top: 16px; }

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

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

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

@media (prefers-reduced-motion: reduce) {
	.lf_card__media img,
	.lf_solnav__btn,
	.lf_tabs__ink { transition: none; }
	.lf_banner__title.is-swap,
	.lf_banner__desc.is-swap,
	.lf_sol__head.is-swap,
	.lf_card.is-active { animation: none; }
	.lf_sol { transition: none; }
}