@charset "utf-8";
/* =========================================================================
 * 증상별 솔루션 > 주름 / 꺼짐 (www/solution/wrinkle.jsp 전용)
 * Figma node 440:346 (파일 PZUlzhuoLIjExVH7kLCad6, 1920w)
 *   ※ 해당 프레임은 이름만 "모공 / 흉터"로 남아 있고(복제 후 미변경) 내용은 주름/꺼짐이다.
 * 로드 순서: main_hero.css → jdh_sub.css → jdh_ba.css → 이 파일
 * 선택자는 모두 .wrinkle 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ── 타이포 스케일 ───────────────────────────────────────────────────────
 * 모공/흉터 페이지(page_pore.css)와 같은 스케일(배너 60px 정점 → 46/40/26/19/18/16)을 쓴다.
 * 같은 "증상별 솔루션" 자매 페이지라 나란히 보게 되는데 정점이 다르면 위계가 어긋난다.
 * (60px 은 pore 페이지에서 사용자가 직접 지정한 값 — 40px 상한 규칙의 의도된 예외)
 * 최하단 4대 강점 배너(.wr_merit, 32/13px)는 pore 와 동일하게 원본 크기 유지.
 *
 * ── pore 대비 의도적으로 다른 부분 ─────────────────────────────────────
 * · 배경 이미지 톤: 주름 페이지 소재는 쿨 실버 계열(hero_bg·banner_bg) → 크림 일변도인 pore 와
 *   달리 실버-크림을 섞어 쓴다. 포인트(그린/골드)는 브랜드 공통이라 동일.
 * · 대형 배너: pore 는 투명 컷아웃 모델을 배경에 깔았지만, 주름 페이지 모델컷은 흰 배경이 있는
 *   사각 사진이라 배경으로 깔면 경계가 드러난다 → [사진 박스 | 카피] 2열 그리드로 배치.
 * ========================================================================= */

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

.wrinkle {
	--wr-green:      #3B5843;
	--wr-green-deep: #2C4632;
	--wr-ink:        #1C1E1A;
	--wr-body:       #5B615A;
	--wr-gold:       #C2A878;
	--wr-gold-lite:  #D8C49A;
	--wr-cream:      #FBF9F2;
	--wr-line:       #E7E2D8;
	--wr-paper:      #FFFDF8;
	--wr-silver:     #EFF1F3;   /* 주름 페이지 전용 쿨 톤 */

	/* ── 주제별 톤 (기본 = 주름: 쿨 실버) ──
	 * 탭으로 주제를 바꾸면 모델 사진은 그대로 두고 배경·글자의 색 온도만 살짝 바뀐다.
	 * 증상별 솔루션 4형제 공통 규칙(2026-08-03) — 아래 [data-topic] 규칙에서 변수만 갈아끼운다. */
	--wr-tone-tint:   rgba(196,206,214,.30);
	--wr-tone-tint-2: rgba(220,228,234,.18);
	--wr-tone-fill:   #E7E9EC;
	--wr-tone-accent: #8F8469;
	--wr-tone-edge:   rgba(194,168,120,.65);   /* ※ 전후 포인트 원을 걷어내며(2026-08-05) 현재 참조처 없음 */
	/* 솔루션 섹션 면 색 — 탭 전환이 눈에 띄게(2026-08-28 사용자 지시).
	   두 탭의 카드 구성이 크게 겹쳐 필터만으로는 화면이 그대로였다.
	   ⚠ 크림 계열에서 아주 옅게만 기울인다. 카드가 주인공이라 면이 세면 카드가 죽는다. */
	--wr-sol-bg:      #F5F7F8;                 /* 주름 = 쿨 실버 */

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

	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--wr-ink);
	background: #fff;
	overflow-x: clip;
}
/* 꺼짐 = 웜 로즈베이지. 같은 얼굴을 "선"이 아니라 "볼륨"으로 보는 전환. */
.wrinkle[data-topic="volume"] {
	--wr-tone-tint:   rgba(224,198,186,.34);
	--wr-tone-tint-2: rgba(238,220,210,.20);
	--wr-tone-fill:   #EDE0DA;
	--wr-tone-accent: #A2765F;
	--wr-tone-edge:   rgba(162,118,95,.52);
	--wr-sol-bg:      #FBF5F1;                 /* 꺼짐 = 웜 로즈베이지 */
}
/* 톤이 걸리는 요소들 — 색만 부드럽게 넘어간다(레이아웃은 그대로) */
.wr_hero,
.wr_banner,
.wr_hero__eyebrow,
.wr_banner__eyebrow,
.wr_tabs__ink {
	transition: background-color .6s ease, background-image .6s ease, color .6s ease, border-color .6s ease;
}
.wrinkle .wr_inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

/* ── 섹션 공통 타이포 ─────────────────────────────────────────────── */
.wrinkle .wr_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>)는 탭에 따라 바뀐다 — 기울임 없이 본문과 같은 모양으로 */
.wrinkle .wr_title em,
.wr_hero__title em,
.wr_step__name em { font-style: normal; }

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

/* =========================================================================
 * 1. 히어로
 * ========================================================================= */
.wr_hero {
	padding: 92px 0 88px;
	text-align: center;
	background:
		linear-gradient(176deg, var(--wr-tone-tint) 0%, var(--wr-tone-tint-2) 100%),
		url('/img/solution/wrinkle/hero_bg.jpg') center center / cover no-repeat,
		var(--wr-tone-fill);
}
.wr_hero__eyebrow {
	margin: 0;
	font-size: 18px;
	font-weight: 600;          /* Figma 원본 600 — 실버 배경에서 얇으면 묻힌다 */
	letter-spacing: .3px;
	color: var(--wr-tone-accent);   /* 기본값은 Figma 지정 골드브라운(#8F8469), 주제 톤을 따라간다 */
	word-break: keep-all;
}
.wr_hero__title {
	margin: 18px 0 0;
	font-weight: 800;
	font-size: var(--wr-t-h1);
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #343434;            /* Figma 지정 */
}
.wr_hero__desc {
	margin: 22px 0 0;
	font-size: var(--wr-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 동작은 그대로.
 * ========================================================================= */
.wr_tabs {
	--wr-tab-h: 68px;           /* 캡슐 높이 고정 — 아래 음수 마진이 이 값을 그대로 상쇄한다 */
	position: sticky;
	/* 헤더(72px) + 여백 14px — 고정됐을 때 GNB 에 딱 붙지 않게(2026-08-28 사용자 요청) */
	top: 86px;
	z-index: 20;
	/* 위아래 마진으로 캡슐 높이를 통째로 상쇄한다 → 흐름에서 0px.
	   히어로와 배너가 맞붙고, 캡슐은 그 경계선에 절반씩 걸쳐 뜬다. */
	margin: calc(var(--wr-tab-h) / -2) 0;
	pointer-events: none;       /* 캡슐 밖 영역은 아래 콘텐츠가 이벤트를 받는다 */
}
.wr_tabs__inner {
	display: flex;
	align-items: center;
	justify-content: center;
}
.wr_tabs__bar {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	height: var(--wr-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%);
}
.wr_tabs__list { position: relative; display: flex; }
.wr_tab {
	position: relative;
	z-index: 1;                 /* 선택 알약(ink) 위에 글자가 와야 한다 */
	/* 2026-08-13 — 탭을 가로로 늘렸다(사용자 지시). 좌우 패딩 32 → 44px + min-width.
	   ⚠ min-width 가 있어야 두 글자 한글(주름/꺼짐)에서 두 탭 폭이 같아진다.
	     선택 알약(ink)은 JS 가 버튼 outerWidth 를 재서 따라오므로 별도 수정이 필요 없다. */
	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;
}
.wr_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;
}
.wr_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 밑줄은 캡슐 안에서 잘 읽히지 않았다 → 알약을 채우고 글자를 반전.
   알약이 밝은 크림이라 글자는 흰색이 아니라 브랜드 그린으로 눌러야 읽힌다. */
.wr_tab.is-on .wr_tab__ko { color: var(--wr-green); }
.wr_tab.is-on .wr_tab__en { color: rgba(59,88,67,.72); }
.wr_tab:hover .wr_tab__ko { color: var(--wr-ink); }
.wr_tab.is-on:hover .wr_tab__ko { color: var(--wr-green); }
/* ⚠ 알약 배경은 주제 톤(--wr-tone-accent)이 아니라 4페이지 공통 크림 고정이다.
   톤 색은 페이지마다 밝기 편차가 커 글자 대비를 보장할 수 없다. */
.wr_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. 대형 배너 — 좌 모델 사진 / 우 카피
 * ========================================================================= */
.wr_banner {
	position: relative;
	background:
		linear-gradient(176deg, var(--wr-tone-tint) 0%, var(--wr-tone-tint-2) 100%),
		url('/img/solution/wrinkle/banner_bg.jpg') center center / cover no-repeat,
		var(--wr-tone-fill);
	overflow: hidden;
}
/* 히어로와 맞붙이고 나니 두 배경(hero_bg / banner_bg)이 경계에서 계단처럼 끊겼다.
 * 위쪽만 흐리고 톤으로 덮어 히어로에서 자연스럽게 넘어오게 한다(2026-08-03 사용자 요청).
 * ⚠ 마스크로 아래쪽을 완전히 지우므로 배너 카피 영역까지 내려오지 않는다.
 *   backdrop-filter 미지원 브라우저에서도 색 페이드는 그대로 남는다. */
.wr_banner::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 190px;
	background: var(--wr-tone-fill);
	opacity: .78;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
	pointer-events: none;
}
/* ⚠ 배너 높이는 4형제 페이지 공통 규격이다(2026-08-05).
 *   패딩(108/112)은 원래 같았지만 모델컷 컬럼 폭이 페이지마다 달라 실제 높이가 713~916px 로
 *   제각각이었다 → min-height 로 바닥을 깔아 통일한다. 이 값을 한 페이지만 바꾸지 말 것.
 *   (모델컷은 grid align-items:end 라 항상 바닥에 붙고, 남는 높이는 위쪽 여백으로 간다) */
.wr_banner__inner {
	--wr-banner-pb: 112px;      /* 하단 패딩 — 모델컷 음수 마진이 이 값을 참조하므로 함께 관리 */
	position: relative;
	min-height: 920px;
	max-width: 1680px;
	margin: 0 auto;
	padding: 108px 40px var(--wr-banner-pb);
	display: grid;
	/* ⚠ 모델컷 컬럼 폭은 이 변수 하나로 관리한다(2026-08-14) — 아래 좌우 반전 규칙이 같은 값을 쓴다 */
	--wr-col-media: minmax(280px, 700px);   /* 560 → 700 : 인물이 형제 페이지보다 작았다 */
	grid-template-columns: var(--wr-col-media) 1fr;
	gap: 0 60px;
	align-items: end;           /* 모델컷을 배너 바닥에 붙인다 */
}
/* 2026-08-14 — 두 번째 탭(볼륨)에서는 [텍스트 | 모델] 로 좌우를 뒤집는다(사용자 지시).
 * ⚠ 768↓ 세로 스택(display:block)에서는 order 가 무시된다 — 모바일은 사진이 위로 유지. */
.wrinkle[data-topic="volume"] .wr_banner__inner { grid-template-columns: 1fr var(--wr-col-media); }
.wrinkle[data-topic="volume"] .wr_banner__media { order: 2; }
/* 2026-08-18 — 좌우를 뒤집으면 카피가 화면 왼쪽 끝(컨테이너 패딩)에 바로 붙어 허전해 보인다
   (뒤집지 않은 탭은 모델컷 + gap 만큼 안쪽에서 시작한다) → 왼쪽 여백으로 안쪽에 앉힌다.
   ⚠ 768↓ 세로 스택에서는 0 으로 되돌린다(4형제 페이지 공통 처리). */
.wrinkle[data-topic="volume"] .wr_banner__body  { order: 1; padding-left: 96px; }
.wr_banner__body { align-self: center; }
/* 모델 컷 — 투명 배경 PNG(Figma 컷아웃 원본)라 박스로 감싸지 않고 배너 배경 위에 그대로 얹는다.
 * ※ 흰 배경이 들어간 사각 사진으로 교체하면 배경과 경계가 드러난다 — 반드시 컷아웃 PNG 를 쓸 것. */
/* ⚠ 음수 마진: 컷아웃 원본이 가슴 아래에서 직선으로 잘린 사진이라 절단면을 배너 바닥에
 *   딱 맞추면 인물이 "뚝 끊긴" 것처럼 보인다. 하단 패딩만큼 내린 뒤 조금 더 밀어
 *   밑단이 섹션 밖으로 이어지게 한다(.wr_banner 의 overflow:hidden 이 잘라준다). */
.wr_banner__media {
	position: relative;
	margin-bottom: calc(-1 * var(--wr-banner-pb) - 26px);   /* -34 → -26 : 형제 페이지와 동일 규격 */
}
.wr_banner__media img {
	display: block;
	width: 100%;
	height: auto;
	/* 인물이 배경에 붕 떠 보이지 않도록 컷아웃 외곽을 따라 아주 옅은 그림자만 */
	filter: drop-shadow(0 16px 26px rgba(60,68,78,.16));
}
/* 2026-08-11 — 탭별 모델 컷 2장이 같은 자리에서 교체된다(주름 / 꺼짐).
   두 파일은 캔버스 규격(789x900)이 같아야 한다 — 비율이 다르면 전환할 때 배너 높이가 튀고
   하단 절단면이 배너 바닥에서 떠오른다(위 음수 마진이 이 비율 기준). */
.wr_banner__media img[hidden] { display: none; }
.wr_banner__body { position: relative; z-index: 1; }
.wr_banner__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--wr-tone-accent);   /* 주제 톤 */
}
.wr_banner__eyebrow em { font-style: normal; }
.wr_banner__title {
	margin: 18px 0 0;
	font-weight: 700;
	font-size: var(--wr-t-banner);
	line-height: 1.24;
	letter-spacing: -2.6px;
	color: var(--wr-ink);
	word-break: keep-all;
}
.wr_banner__desc {
	margin: 28px 0 0;
	max-width: 760px;
	/* ⚠ 본문을 5줄 → 2줄로 줄이면서(2026-08-03) 배너가 얕아지지 않도록 이전 5줄분 높이를 확보한다.
	   9.3em = line-height 1.86 × 5줄. em 이라 반응형에서 폰트가 줄면 같이 줄어든다.
	   이 값을 빼면 배너 세로가 100px 이상 주저앉는다 — 문구 길이를 다시 손볼 때 함께 조정할 것. */
	min-height: 9.3em;
	font-size: var(--wr-t-lead);
	font-weight: 400;
	line-height: 1.86;
	color: rgba(28,30,26,.7);
	word-break: keep-all;
}
/* 2026-08-10 — 사용자가 원고에서 붉게 표시한 부분("레이저" · "재생을 촉진하고")을
   화면에서도 붉게 강조한다. 브랜드 톤(그린/골드) 위에서 튀지 않게 순수 red 대신 한 톤 낮춘
   버밀리언을 쓰고, 굵기는 본문보다 한 단계만 올린다(600) — 700 이면 문단이 두 덩어리로 쪼개져 보인다. */
.wr_banner__hi {
	font-style: normal;
	font-weight: 600;
	color: #C4382C;
}
.wr_banner__note {
	margin: 24px 0 0;
	font-size: 13px;
	color: rgba(28,30,26,.46);
}
/* 탭 전환 시 타이틀·본문이 살짝 떠오르며 교체된다 */
.wr_banner__title.is-swap,
.wr_banner__desc.is-swap { animation: wrSwap .42s cubic-bezier(.22,.61,.36,1); }
@keyframes wrSwap {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================================
 * 4. Before & After — 좌 카피 / 우 전후 뷰어
 *    뷰어 본체(.jdh_ba)는 공통 컴포넌트 /css/jdh_ba.css 담당
 * ========================================================================= */
/* 배경 — 2026-09-01 개편(사용자 지시 "고급스러운 느낌"). 4형제 페이지 공통 규격이다.
   이 섹션은 위의 딥 면(.wr_hl)과 아래 밝은 면(.wr_sol) **사이의 전환 구간**이다.
   직전 값은 162deg 라 위가 밝고 아래가 짙어, 딥 면에서 툭 튀고 아래 섹션과도 경계가 끊겼다.
   지금은 반대로 **위가 짙고 아래로 갈수록 다음 섹션 색으로 수렴**한다.
   ⚠ 베이스는 반드시 background-color(단색) — gradient 로 두면 탭 전환 transition 이 안 걸려
     색이 툭 끊긴다(.wr_hl 과 같은 이유). 질감·광원은 background-image 레이어가 얹는다.
   ⚠ 레이어 순서가 곧 위아래다: 사진 후광 → 골드 미광 → 그린 미광 → 상단 그림자 → 상단 샴페인.
   ⚠ 사선 결(빗살무늬)은 2026-08-04 사용자 요청으로 걷어낸 연출이다. 되살리지 말 것. */
.wr_ba {
	position: relative;
	padding: 104px 0 108px;
	background-color: var(--wr-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 테두리는 면을 잘라 놓은 것처럼 보인다. 가운데가 진하고 양끝으로
   사라지는 골드 헤어라인으로 바꿔 딥 면과 이 면이 이어지게 한다.
   ⚠ 아래쪽에는 선을 두지 않는다 — 배경이 다음 섹션 색으로 수렴하므로 선이 있으면 되레 끊긴다. */
.wr_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 사용자 요청으로 제거 — 되살리지 말 것 */
.wr_ba > .wr_inner { position: relative; z-index: 1; }
.wr_ba__grid {
	display: grid;
	grid-template-columns: minmax(300px, 420px) 1fr;
	gap: 0 78px;
	align-items: center;
}
/* 넓은 1단 카피 영역이라 카드 본문(--wr-t-txt)과 같은 크기면 작아 보인다
   → 한 단계 위인 --wr-t-body 를 쓴다(2026-08-03, 4형제 페이지 동일 규격) */
.wr_ba__desc {
	margin: 24px 0 0;
	font-size: var(--wr-t-body);
	font-weight: 400;
	line-height: 1.85;
	color: rgba(28,30,26,.72);
	word-break: keep-all;
}
/* ※ 전후 관찰 포인트 목록(.wr_ba__points)은 2026-08-05 사용자 요청으로 걷어내고
 *   Before&After 앞의 개선 포인트 배너(.wr_hl) 로 옮겼다. 아래 4-1 항목 참조. */
.wr_ba__note {
	margin: 30px 0 0;
	font-size: 14px;
	color: rgba(28,30,26,.48);
}
/* 공통 뷰어(.jdh_ba)와 증례 슬라이드(.jdh_baslide)에 이 페이지 톤을 넘겨준다 */
/* ⚠ 그리드 칸(1fr)의 기본 min-width:auto 는 슬라이드 트랙의 가로 스크롤을 막고
 *   칸을 사진 여러 장 폭으로 부풀린다 — 0 으로 풀어야 한 장씩 넘어간다. */
.wr_ba__viewer { min-width: 0; }
.wr_ba__viewer .jdh_ba,
.wr_ba__viewer .jdh_baslide {
	--ba-ink:   var(--wr-ink);
	--ba-green: var(--wr-green);
	--ba-gold:  var(--wr-gold);
	--ba-line:  var(--wr-line);
}

/* =========================================================================
 * 4-1. 개선 포인트 배너 (Before&After 바로 앞) — 2026-08-05 사용자 요청
 *      전후 사진 옆 목록으로만 있던 관찰 포인트를, 사진을 보기 전에 한 번에 읽히는
 *      브랜드 그린 면 + 흰 칩으로 끌어냈다.
 *      ※ 처음엔 padding 58/62(≈290px)로 잡았으나 2026-08-05 사용자 요청으로 세로 1.5배 + 칩 확대.
 * ========================================================================= */
/* 배경 — 단색 대각 그라데이션이 평평해 보여 다층으로 바꿨다(2026-08-05 사용자 요청).
   ⚠ 레이어 순서가 곧 위아래다: 골드 → 좌상단 광원 → 하단 비네트 → 베이스.
     골드 알파(.16)를 더 올리면 그린이 탁한 카키로 넘어간다. */
/* 배경 — 2026-08-05 탭에 따라 색이 바뀐다(항노화 stemcell 페이지와 같은 방식).
   ⚠ 베이스는 반드시 background-color(단색) — gradient 는 transition 이 안 걸려 색이 툭 끊긴다.
     질감은 ::after 오버레이가 고정으로 얹는다. 색은 페이지 톤 변수(--wr-tone-*)의 딥 버전. */
.wr_hl {
	--hl-base: #2C3A43;              /* 주름 — 딥 슬레이트(톤 tint rgba(196,206,214) 계열) */
	position: relative;
	padding: 88px 0 94px;
	background-color: var(--hl-base);
	overflow: hidden;
	text-align: center;
	transition: background-color .6s ease;
}
.wrinkle[data-topic="volume"] .wr_hl { --hl-base: #4C3129; }   /* 꺼짐 — 딥 테라코타(톤 accent #A2765F 계열) */
/* 질감 오버레이 — 어떤 탭 색이 와도 같은 결이 얹히도록 색을 중립(흰/검)으로 둔다 */
.wr_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;
}
/* 배경 워터마크 — 면이 비어 보이지 않게 브랜드 이니셜을 크게 깐다 */
.wr_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;
}
.wr_hl > .wr_inner { position: relative; z-index: 1; }
.wr_hl__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--wr-gold-lite);
}
.wr_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;
}
.wr_hl__title em { font-style: normal; color: var(--wr-gold-lite); }
.wr_hl__list {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
/* ⚠ 2026-08-10 — 칩 목록이 탭별로 둘이다. display:flex 가 hidden 의 기본값을 덮으므로
   이 규칙이 없으면 두 탭 목록이 한꺼번에 쌓여 보인다(booster 에서 겪은 것과 같은 함정). */
.wr_hl__list[hidden] { display: none; }
.wr_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(--wr-t-lead);
	font-weight: 600;
	letter-spacing: -.3px;
	color: var(--wr-ink);
	box-shadow: 0 12px 30px rgba(0,0,0,.13);
}
/* 체크 아이콘 — 이미지 없이 두 변만 남긴 사각형을 45° 돌려 만든다 */
.wr_hl__list i {
	flex: 0 0 auto;
	width: 17px;
	height: 10px;
	margin-top: -6px;
	border-left: 2.5px solid var(--wr-green);
	border-bottom: 2.5px solid var(--wr-green);
	transform: rotate(-45deg);
}

/* =========================================================================
 * 5. 치료 솔루션 — [이미지 | 텍스트] 가로형 카드 2열
 * ========================================================================= */
/* ⚠ 배경은 반드시 background-color(단색)로 둘 것 — gradient 는 transition 이 걸리지 않아
   탭을 눌러도 색이 툭 끊긴다(.wr_hl 과 같은 이유). */
.wr_sol {
	padding: 104px 0 110px;
	background-color: var(--wr-sol-bg);
	transition: background-color .55s ease;
}
/* 탭 전환 시 섹션 헤더(타이틀의 주제 단어가 바뀐다)도 함께 떠오른다 */
.wr_sol__head.is-swap { animation: wrSwap .42s cubic-bezier(.22,.61,.36,1); }
/* ─── 섹션 헤더 정렬 ────────────────────────────────────────────────
 * 2026-08-04 에는 "축 다양화"(솔루션=스플릿 / 시술과정=좌측)로 갔었으나,
 * **2026-08-11 사용자 지시로 솔루션·시술과정 헤더를 가운데 정렬로 통일**했다.
 * ⚠ 스플릿 grid(좌 타이틀 / 우 설명)나 좌측 축으로 되돌리지 말 것 — 4형제 페이지 공통. */
.wr_sol__head {
	text-align: center;
	margin: 0 0 52px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--wr-line);
}
.wr_sol__desc {
	max-width: 760px;
	margin: 16px auto 0;
	font-size: var(--wr-t-body);
	font-weight: 300;
	line-height: 1.75;
	color: rgba(28,30,26,.55);
	word-break: keep-all;
}
/* ─── 솔루션 = [세로 목록 | 상세 스테이지] 쇼케이스 (2026-08-05 사용자 요청) ────
 * 지그재그 대형 카드 나열 → 좌측 시술명 목록에서 고르면 우측 상세만 바뀌는 형태로 바꿨다.
 * 시술이 최대 9종이라 스크롤 없이 전체를 훑고 비교하는 편이 낫다는 판단.
 * ⚠ 좌측 목록 버튼은 마크업에 없다 — wrinkle.jsp 의 스크립트가 `.wr_card__name` 을 읽어
 *   자동 생성한다. 시술명을 고치면 목록도 따라오므로 두 곳에 같은 문구를 두지 말 것.
 * ⚠ 주제탭 필터(.is-hide)가 걸리면 목록을 다시 만들고 첫 항목을 자동 선택한다. */
.wr_sol__wrap {
	display: grid;
	grid-template-columns: minmax(0, 286px) minmax(0, 1fr);
	gap: 0 58px;
	align-items: start;
}
.wr_sol__nav { border-top: 1px solid var(--wr-line); }
.wr_solnav__btn {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 21px 30px 21px 0;
	border: 0;
	border-bottom: 1px solid var(--wr-line);
	border-radius: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wr-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 — 선택 항목과 헷갈리지 않게 도트 없이 색·들여쓰기·아주 옅은 면만 움직인다 */
.wr_solnav__btn:hover { color: rgba(28,30,26,.86); padding-left: 7px; background-color: rgba(28,30,26,.022); }
/* 선택 표시 — 골드 도트(헤일로) + 오른쪽 화살촉 + 왼쪽에서 사그라드는 골드 틴트.
   2026-08-05 이전에는 배경을 아예 칠하지 않아 선택 항목이 색 하나로만 구분돼 약했다.
   면을 꽉 칠하는 대신 84% 지점에서 완전히 사라지는 그라데이션이라 목록은 여전히 조용하다. */
.wr_solnav__btn.is-on {
	color: var(--wr-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);
}
.wr_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(--wr-gold);
	box-shadow: 0 0 0 4px rgba(255,255,255,.6);   /* 흰 헤일로 — 골드 틴트 위에서 도트가 묻히지 않게 떼어낸다 */
}
.wr_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(--wr-gold);
	border-top: 1.5px solid var(--wr-gold);
	transform: rotate(45deg);
}
.wr_sol__list { position: relative; }
/* ⚠ 스테이지 카드는 display:none 으로 대기한다 → 공통 리빌(.jdh-up)의 교차 관찰이 걸리지 않아
   opacity:0 인 채 남고 카드가 통째로 안 보인다. 이 영역에서만 리빌을 해제한다. */
html.jdh-anim .jdh_sub .wr_sol__list .jdh-up { opacity: 1; transform: none; }
.wr_card {
	display: none;
	/* 미디어 .92 : 텍스트 1.08 — 사진 자산이 390~720px 폭이라 반반이면 저해상 컷이 뭉갠다 */
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	background: #fff;
	border: 1px solid var(--wr-line);
	border-radius: 12px;
	overflow: hidden;
}
.wr_card.is-active { display: grid; animation: wrSwap .42s cubic-bezier(.22,.61,.36,1); }
.wr_card.is-hide { display: none; }
.wr_card__media {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #F7F5F0 0%, #EFEBE2 100%);
	min-height: 430px;
}
.wr_card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
/* 장비 카드는 /img/skin_solution/jd_*.png (흰 배경 누끼, 세로형) 를 쓴다 → 잘라내지 않고 여백 안에 통째로.
   ⚠ 2026-08-03 의 "장비컷도 cover" 규칙은 232px 썸네일 시절 기준이다. 570px 대형 카드에서
     세로 누끼를 cover 하면 장비 몸통만 남아 무슨 장비인지 알 수 없어 contain 으로 되돌렸다(2026-08-05).
   ※ 사진(시술 컷) 카드는 --device 없이 그대로 cover 를 쓴다. */
.wr_card__media--device { background: linear-gradient(160deg, #FBFAF7 0%, #F1EEE7 100%); }
/* padding 44/40 → 20/16 (2026-08-05). PNG 의 투명 여백을 트림한 뒤라 이 padding 이 곧 여백이다.
   예전 값은 이미지 자체 여백 위에 padding 이 겹쳐 장비가 카드 안에서 지나치게 작아 보였다. */
.wr_card__media--device img { object-fit: contain; padding: 20px 16px; }
/* 일러스트 카드(--illust, 새살침 단면도)는 jdh_solgrid.css 가 담당한다 —
   그 파일이 뒤에 로드되고 선택자도 더 강해서, 여기 써 봐야 먹지 않는다. */
.wr_card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 54px 58px;
}
/* 카드 넘버링(01·02…)은 2026-08-05 사용자 요청으로 뺐다 — 시술명이 첫 요소다.
   마크업의 .wr_card__no 도 함께 제거했으니 되살리려면 JSP 부터 손볼 것. */
.wr_card__name {
	margin: 0;
	font-weight: 700;
	font-size: var(--wr-t-solname);
	line-height: 1.28;
	letter-spacing: -1px;
	color: var(--wr-ink);
}
.wr_card__sub {
	margin: 10px 0 0;
	font-size: var(--wr-t-lead);
	font-weight: 500;
	color: var(--wr-green);
}
.wr_card__txt {
	margin: 20px 0 0;
	font-size: var(--wr-t-body);
	font-weight: 400;
	line-height: 1.8;
	color: rgba(28,30,26,.62);
	word-break: keep-all;
}
.wr_card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.wr_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(--wr-green);
}
/* 스테이지 카드는 목록에서 고른 결과라 hover 로 뜨지 않는다(클릭 대상이 아님).
   사진 확대만 남겨 화면이 정지된 느낌이 들지 않게 한다. */
.wr_card:hover .wr_card__media img { transform: scale(1.04); }

/* =========================================================================
 * 6. 시술 과정
 * ========================================================================= */
.wr_process {
	padding: 104px 0 108px;
	background: #F2EEE7 url('/img/solution/wrinkle/process_bg.jpg') center center / cover no-repeat;
}
/* 시술 과정 — 2026-08-11 좌측 축 → 가운데 정렬(사용자 지시).
   eyebrow 가 없는 섹션이라 짧은 골드 라인이 그 자리를 대신한다(중앙 대칭 그라디언트로 바꿈) */
.wr_process__head { text-align: center; max-width: none; margin: 0 0 56px; }
.wr_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(--wr-gold) 50%, rgba(194,168,120,.25) 100%);
}
.wr_process__desc {
	max-width: 760px;
	margin: 22px auto 0;
	font-size: var(--wr-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.wr_steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}
/* 원형 카드 — 사각 박스 대신 원형 이미지 디스크.
 * ※ 이미지 박스 radius 8px 규칙의 의도된 예외(pore 페이지와 동일) */
.wr_step {
	position: relative;
	padding: 0 10px;
	text-align: center;
}
/* 단계 사이 점선 연결선은 사용자 지시로 제거(2026-08-03) — 원만 나열한다 */
.wr_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;
}
.wr_step__disc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wr_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;
}
.wr_step:hover .wr_step__disc {
	transform: translateY(-5px);
	box-shadow: 0 20px 38px rgba(76,64,44,.24);
}
.wr_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(--wr-gold);
}
.wr_step__name {
	display: block;
	margin: 10px 0 0;
	font-weight: 600;
	font-size: var(--wr-t-lead);
	line-height: 1.44;
	letter-spacing: -.7px;
	color: var(--wr-ink);
	word-break: keep-all;
}

/* =========================================================================
 * 7. 차별화 진단 시스템
 * ========================================================================= */
/* 유리 카드가 성립하려면 뒤에 비칠 결이 있어야 한다 — 순백 위에서는 반투명이 티가 나지 않는다.
 * 아주 옅은 골드·그린 광원을 대각으로 깔아 카드가 그 위에 떠 보이게 한다(2026-08-04). */
.wr_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;
}
.wr_diag__head { text-align: center; max-width: 1000px; margin: 0 auto; }
.wr_diag__desc {
	margin: 22px 0 0;
	font-size: var(--wr-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.wr_diag__label {
	margin: 54px 0 22px;
	text-align: center;
	font-size: var(--wr-t-lead);
	font-weight: 700;
	color: var(--wr-ink);
}
.wr_diag__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* 크림 단색 카드 → 반투명 유리(2026-08-04 사용자 요청).
 * ⚠ 불투명도(.58)를 더 올리면 유리감이 사라지고 그냥 흰 카드가 된다. */
.wr_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;
}
.wr_dev:hover {
	background: rgba(255,255,255,.74);
	box-shadow: 0 20px 46px rgba(28,30,26,.13), inset 0 1px 0 #fff;
}
.wr_dev__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(233,229,220,.55);   /* 이미지 로드 전 폴백 — 유리 톤에 맞춰 반투명 */
	border-radius: 8px 8px 0 0;
}
.wr_dev__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wr_dev__name {
	display: block;
	margin: 24px 0 0;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -.6px;
	color: var(--wr-ink);
}
.wr_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 페이지와 동일하게 이 섹션의 폰트 크기는 원본(32 / 13) 유지 → 2026-08-10 사용자 지시로 설명문만 16px 로 상향(제목 32 는 그대로).
 *      위 스케일 변수(--wr-t-*)를 여기에 적용하지 말 것.
 * ========================================================================= */
/* ⚠ 2026-08-10 — 제목(국내최대크기·프리미엄레이저…)을 걷어내고 문장만 남겼다(사용자 원고).
 *   제목 32px 이 빠진 만큼 ① 문장을 16→19px 로 키우고 ② 항목 사이에 세로 헤어라인을 넣는다.
 *   문장 4개만 나란히 두면 어디까지가 한 항목인지 읽히지 않아서다(gap 만으로는 부족).
 *   ※ 4형제 페이지 공통 규격이니 한 페이지만 바꾸지 말 것. */
.wr_merit {
	padding: 66px 0 70px;
	background: #EFECE4 url('/img/solution/wrinkle/cat_bg.jpg') center center / cover no-repeat;
}
.wr_merit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.wr_merit__item { position: relative; padding: 0 30px; text-align: center; }
/* 칸 사이 구분선 — 첫 칸 왼쪽에는 붙지 않는다(인접 형제 선택자) */
.wr_merit__item + .wr_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개 페이지 공통 규격 */
.wr_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) {
	.wrinkle { --wr-t-banner: 52px; --wr-t-h1: 42px; --wr-t-h2: 36px; --wr-t-card: 21px; }
	.wr_banner__inner { --wr-banner-pb: 96px; --wr-col-media: minmax(260px, 610px); min-height: 800px; padding: 92px 40px var(--wr-banner-pb); gap: 0 44px; }
	.wr_ba__grid { gap: 0 52px; }
	.wr_sol__wrap { grid-template-columns: minmax(0, 262px) minmax(0, 1fr); gap: 0 46px; }
	.wr_card__media { min-height: 396px; }
	.wr_card__body { padding: 46px 44px; }
	.wr_step__disc { width: 164px; }
}

@media all and (max-width: 1200px) {
	.wrinkle { --wr-t-banner: 46px; --wr-t-h1: 38px; --wr-t-h2: 33px; --wr-t-lead: 19px; --wr-t-body: 17px; }
	.wr_hero { padding: 78px 0 74px; }
	.wr_banner__inner { --wr-banner-pb: 84px; --wr-col-media: minmax(220px, 490px); min-height: 640px; padding: 80px 32px var(--wr-banner-pb); gap: 0 30px; }
	.wrinkle[data-topic="volume"] .wr_banner__body { padding-left: 56px; }
	.wr_ba { padding: 84px 0 88px; }
	.wr_ba__grid { grid-template-columns: 1fr; gap: 40px 0; }
	.wr_sol, .wr_process, .wr_diag { padding: 84px 0 88px; }
	.wr_sol__wrap { grid-template-columns: minmax(0, 232px) minmax(0, 1fr); gap: 0 36px; }
	.wr_solnav__btn { padding: 17px 26px 17px 0; }
	.wr_card { grid-template-columns: 1fr 1fr; }
	.wr_card__media { min-height: 356px; }
	.wr_card__body { padding: 38px 36px; }
	.wr_steps { grid-template-columns: repeat(3, 1fr); gap: 34px 16px; }
	.wr_step__disc { width: 156px; }
}

@media all and (max-width: 1024px) {
	.wr_tabs { top: 70px; }             /* 헤더 60px + 여백 10px */
	.wr_sol__head { padding-bottom: 24px; }
	/* 좌우 2열은 폭이 있어야 성립한다 → 목록을 위로 올려 가로 스크롤 탭으로 바꾼다 */
	.wr_sol__wrap { grid-template-columns: 1fr; gap: 28px 0; }
	.wr_sol__nav {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-top: 0;
		border-bottom: 1px solid var(--wr-line);
	}
	.wr_sol__nav::-webkit-scrollbar { display: none; }
	.wr_solnav__btn { flex: 0 0 auto; width: auto; padding: 14px 18px; border-bottom: 0; white-space: nowrap; }
	/* 가로 스크롤 탭에서는 골드 틴트·헤일로가 어색하다 → 밑줄 하나로 단순화 */
	.wr_solnav__btn.is-on { padding-left: 18px; background: none; border-bottom-color: transparent; }
	.wr_solnav__btn:hover { padding-left: 18px; background: none; }
	.wr_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;
	}
	.wr_solnav__btn.is-on::after { display: none; }
	.wr_diag__grid { grid-template-columns: 1fr 1fr; }
	/* 2열에서는 왼쪽 칸(1·3번째)의 구분선을 지운다 — 남기면 섹션 좌측에 선이 뜬다 */
	.wr_merit__grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
	.wr_merit__item:nth-child(2n+1)::before { display: none; }
}

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

	.wr_hero { padding: 58px 0 56px; }
	.wr_hero__eyebrow { font-size: 15px; }
	.wr_hero__desc { font-size: 15px; }
	.wr_hero__desc br { display: none; }

	.wr_tabs { --wr-tab-h: 62px; }
	.wr_tab { min-width: 132px; padding: 9px 32px 8px; }
	.wr_tab__ko { font-size: 16px; }
	/* 영문 보조 라벨은 자간이 2.6px 라 글자 수가 늘면 금방 알약을 넘는다 —
	   영문판 'Hollowing'(9자)이 좁은 화면에서 12px 삐져나왔다(2026-09-04 실측).
	   자간만 줄여 맞춘다(글자 크기는 그대로 둬야 한글판과 위계가 같다).
	   ⚠ 같은 구조인 pore/lifting/pigment 는 라벨이 짧아 아직 넘치지 않는다 —
	     그쪽 라벨을 늘리면 여기와 같은 처리가 필요하다. */
	html[lang="en"] .wr_tab__en,
	html[lang="ja"] .wr_tab__en,
	html[lang="zh-Hans"] .wr_tab__en { letter-spacing: 1px; }

	/* 좁은 화면에서는 사진을 위로 올리고 카피를 아래로 */
	.wr_banner__inner { display: block; min-height: 0; padding: 44px 24px 52px; }   /* 세로 스택에서는 높이 통일 해제 */
	/* 세로 스택에서는 좌우 반전이 없다 — 위에서 준 왼쪽 여백을 되돌리지 않으면 글만 오른쪽으로 밀린다 */
	.wrinkle[data-topic="volume"] .wr_banner__body { padding-left: 0; }
	/* 2026-08-12 — 420px 은 좁은 화면에서 인물이 과하게 커 배너만 830px 을 먹었다 → 330px.
	 * ⚠ 마스크가 핵심이다. 이 컷은 가슴 아래에서 **직선으로 잘린 컷아웃**이라,
	 *   데스크톱은 음수 마진으로 절단면을 섹션 밖으로 밀어 감춘다(.wr_banner__media margin-bottom).
	 *   세로 스택에서는 그 음수 마진이 풀려 잘린 단면이 배경 위에 그대로 드러났다 —
	 *   밑단만 알파 페이드로 흘려 경계선을 지운다(시그니처 히어로와 같은 처리). */
	.wr_banner__media { max-width: 330px; margin: 0 auto 26px; }
	.wr_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%);
	}
	.wr_banner__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.wr_banner__title br { display: none; }
	.wr_banner__desc { margin-top: 20px; font-size: 15px; line-height: 1.8; }

	.wr_ba { padding: 62px 0 66px; }
	.wr_hl { padding: 62px 0 66px; }
	.wr_hl::before { font-size: 210px; }
	.wr_hl__title { font-size: 25px; }
	.wr_hl__list { margin-top: 28px; gap: 12px; }
	.wr_hl__list li { gap: 11px; padding: 17px 24px; font-size: 17px; }
	.wr_hl__list i { width: 15px; height: 9px; }

	.wr_sol, .wr_process, .wr_diag { padding: 62px 0 66px; }
	.wr_sol__head { margin-bottom: 32px; padding-bottom: 20px; }
	.wr_process__head { margin-bottom: 36px; }
	.wr_process__head::before { width: 34px; margin-bottom: 16px; }
	/* 좁은 화면에서는 스테이지도 1열 — 사진 위, 설명 아래 */
	.wr_card { grid-template-columns: 1fr; }
	.wr_card__media { min-height: 0; aspect-ratio: 16 / 10; }
	.wr_card__media img { position: static; }
	.wr_card__media--device img { padding: 14px 12px; }
	.wr_card__body { padding: 30px 24px 32px; }
	.wr_card__sub { margin-top: 8px; font-size: 16px; }
	.wr_card__txt { margin-top: 14px; }
	.wr_card__tags { margin-top: 18px; }

	/* 2026-08-12 — 진행 5단계를 **가로 스와이프**로. 2열은 5개(홀수)라 마지막이 홀로 남고,
	 * 480 이하에서 쓰던 1열은 1,200px 을 먹었다. 번호가 붙은 순서형이라 옆으로 넘기는 흐름과 맞다.
	 * ⚠ 음수 마진(-24px)은 .wr_inner 의 좌우 패딩과 짝이다(480 이하는 18px 이라 아래 블록에서 다시 잡는다). */
	.wr_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;
	}
	.wr_steps::-webkit-scrollbar { height: 3px; }
	.wr_steps::-webkit-scrollbar-track { background: rgba(60,68,78,.10); border-radius: 999px; }
	.wr_steps::-webkit-scrollbar-thumb { background: rgba(60,68,78,.34); border-radius: 999px; }
	.wr_step { padding: 0 4px; scroll-snap-align: start; }
	.wr_step__disc { width: 132px; }
	.wr_step__no { margin-top: 16px; }

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

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

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

@media (prefers-reduced-motion: reduce) {
	.wr_card__media img,
	.wr_solnav__btn,
	.wr_tabs__ink { transition: none; }
	.wr_banner__title.is-swap,
	.wr_banner__desc.is-swap,
	.wr_sol__head.is-swap,
	.wr_card.is-active { animation: none; }
	.wr_sol { transition: none; }
}