@charset "utf-8";
/* =========================================================================
 * 증상별 솔루션 > 기미 / 잡티 (www/solution/pigment.jsp 전용)
 * Figma node 594:8546 (파일 LPJO7VQPEN2dJpT30fBLAm, 1920w)
 *   ※ 해당 프레임도 주름 페이지를 복제해 만든 것이라 히어로 타이틀("기미 / 잡티")과
 *     시술 과정 제목만 바뀌어 있고, 서브탭·솔루션 카드 7종·배너 본문은 주름 원고 그대로다.
 *     내용은 기미/잡티에 맞게 새로 썼다(자세한 내용은 pigment.jsp 상단 주석).
 * 로드 순서: main_hero.css → jdh_sub.css → jdh_ba.css → 이 파일
 * 선택자는 모두 .pigment 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ── 자매 페이지와의 관계 ────────────────────────────────────────────────
 * 모공/흉터(pore) · 주름/꺼짐(wrinkle) · 처짐/윤곽(lifting) 과 같은 "증상별 솔루션" 4형제다.
 * 타이포 스케일(배너 60px 정점 → 46/40/26/19/18/16)·8단 구성·컴포넌트를 그대로 공유한다.
 * 최하단 4대 강점 배너(.pg_merit, 32/13px)도 세 페이지와 동일하게 원본 크기 유지.
 *
 * ── 주제 톤 전환 (4형제 공통 규칙) ─────────────────────────────────────
 * 탭으로 주제를 바꾸면 모델 사진은 그대로 두고 배경·텍스트의 색 온도만 살짝 바뀐다.
 * 루트의 [data-topic] 값에 따라 --pg-tone-* 변수만 갈아끼우고, 실제 요소들은 그 변수를
 * 참조하므로 규칙을 늘릴 필요가 없다. transition 은 .6s — 더 빠르면 "깜빡"하고,
 * 더 느리면 탭을 눌렀는데 반응이 없는 것처럼 느껴진다.
 *   · 기미(melasma) = 웜 앰버   — 색소·자외선의 따뜻한 톤
 *   · 잡티(spot)    = 쿨 자수정 — 점·잡티의 차분한 톤
 * ========================================================================= */

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

.pigment {
	--pg-green:      #3B5843;
	--pg-green-deep: #2C4632;
	--pg-ink:        #1C1E1A;
	--pg-body:       #5B615A;
	--pg-gold:       #C2A878;
	--pg-gold-lite:  #D8C49A;
	--pg-cream:      #FBF9F2;
	--pg-line:       #E7E2D8;
	--pg-paper:      #FFFDF8;

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

	/* ── 주제별 톤 (기본 = 기미: 웜 앰버) ── */
	--pg-tone-tint:   rgba(214,178,132,.30);   /* 배경 위에 얹는 색 필름 */
	--pg-tone-tint-2: rgba(228,204,172,.20);
	--pg-tone-fill:   #EFE6DA;                 /* 이미지 로드 전 폴백 */
	--pg-tone-accent: #A8814B;                 /* 아이브로우 등 포인트 글자 */
	--pg-tone-edge:   rgba(168,129,75,.34);    /* 헤어라인·테두리 ※ 2026-08-05 이후 참조처 없음 */
	/* 솔루션 섹션 면 색 — 탭 전환이 눈에 띄게(2026-08-28 사용자 지시).
	   두 탭의 카드 구성이 겹쳐 필터만으로는 화면이 그대로였다.
	   ⚠ 크림 계열에서 아주 옅게만 기울인다. 카드가 주인공이라 면이 세면 카드가 죽는다. */
	--pg-sol-bg:      #FBF8F1;                 /* 기미 = 웜 앰버 */

	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--pg-ink);
	background: #fff;
	overflow-x: clip;
}
/* 잡티 = 쿨 자수정. 모델 사진은 그대로 두고 색 온도만 바꿔 "바뀌었다"는 느낌을 준다. */
.pigment[data-topic="spot"] {
	--pg-tone-tint:   rgba(168,158,196,.30);
	--pg-tone-tint-2: rgba(196,190,220,.20);
	--pg-tone-fill:   #E4E2EC;
	--pg-tone-accent: #6E6394;
	--pg-tone-edge:   rgba(110,99,148,.34);
	--pg-sol-bg:      #F6F5FA;                 /* 잡티 = 쿨 자수정 */
}
/* 톤이 걸리는 요소들 — 색만 부드럽게 넘어간다(레이아웃은 그대로) */
.pg_hero,
.pg_banner,
.pg_hero__eyebrow,
.pg_banner__eyebrow,
.pg_tabs__ink {
	transition: background-color .6s ease, background-image .6s ease, color .6s ease, border-color .6s ease;
}

.pigment .pg_inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

/* ── 섹션 공통 타이포 ─────────────────────────────────────────────── */
/* 영문 아이브로우 공통 규격 — Cormorant Garamond 700 / 17px / 4.6px / UPPER (전 페이지 동일) */
.pigment .pg_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>)는 탭에 따라 바뀐다 — 기울임 없이 본문과 같은 모양으로 */
.pigment .pg_title em,
.pg_hero__title em,
.pg_step__name em { font-style: normal; }

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

/* =========================================================================
 * 1. 히어로 — 주제 톤 필름이 얹히는 곳
 * ========================================================================= */
.pg_hero {
	position: relative;
	padding: 92px 0 88px;
	text-align: center;
	background:
		linear-gradient(176deg, var(--pg-tone-tint) 0%, var(--pg-tone-tint-2) 100%),
		url('/img/solution/pigment/hero_bg.jpg') center center / cover no-repeat,
		var(--pg-tone-fill);
}
/* 카피 뒤만 옅게 밝혀 대비 확보(배경 질감은 살린다) */
.pg_hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(58% 74% at 50% 50%, rgba(255,255,255,.56) 0%, rgba(255,255,255,0) 74%);
	pointer-events: none;
}
.pg_hero > .pg_inner { position: relative; z-index: 1; }
.pg_hero__eyebrow {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--pg-tone-accent);   /* 주제 톤을 따라간다 */
	word-break: keep-all;
}
.pg_hero__title {
	margin: 18px 0 0;
	font-weight: 800;
	font-size: var(--pg-t-h1);
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #343434;
}
.pg_hero__desc {
	margin: 22px 0 0;
	font-size: var(--pg-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 동작은 그대로.
 * ========================================================================= */
.pg_tabs {
	--pg-tab-h: 68px;           /* 캡슐 높이 고정 — 아래 음수 마진이 이 값을 그대로 상쇄한다 */
	position: sticky;
	/* 헤더(72px) + 여백 14px — 고정됐을 때 GNB 에 딱 붙지 않게(2026-08-28 사용자 요청) */
	top: 86px;
	z-index: 20;
	/* 위아래 마진으로 캡슐 높이를 통째로 상쇄한다 → 흐름에서 0px.
	   히어로와 배너가 맞붙고, 캡슐은 그 경계선에 절반씩 걸쳐 뜬다. */
	margin: calc(var(--pg-tab-h) / -2) 0;
	pointer-events: none;       /* 캡슐 밖 영역은 아래 콘텐츠가 이벤트를 받는다 */
}
.pg_tabs__inner {
	display: flex;
	align-items: center;
	justify-content: center;
}
.pg_tabs__bar {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	height: var(--pg-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%);
}
.pg_tabs__list { position: relative; display: flex; }
.pg_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;
}
.pg_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;
}
.pg_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 밑줄은 캡슐 안에서 잘 읽히지 않았다 → 알약을 채우고 글자를 반전.
   알약이 밝은 크림이라 글자는 흰색이 아니라 브랜드 그린으로 눌러야 읽힌다. */
.pg_tab.is-on .pg_tab__ko { color: var(--pg-green); }
.pg_tab.is-on .pg_tab__en { color: rgba(59,88,67,.72); }
.pg_tab:hover .pg_tab__ko { color: var(--pg-ink); }
.pg_tab.is-on:hover .pg_tab__ko { color: var(--pg-green); }
/* ⚠ 알약 배경은 주제 톤(--pg-tone-accent)이 아니라 4페이지 공통 크림 고정이다.
   톤 색은 페이지마다 밝기 편차가 커 글자 대비를 보장할 수 없다. */
.pg_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. 대형 배너 — 좌 모델 컷 / 우 카피 (lifting 과 같은 2열 구성)
 *    ⚠ 모델 컷은 주제가 바뀌어도 교체하지 않는다. 배경 톤과 글자 색만 바뀌는 것이
 *      "같은 사람의 같은 피부를 다른 관점으로 본다" 는 이 페이지의 의도다.
 * ========================================================================= */
.pg_banner {
	position: relative;
	background:
		/* ① 흰색 필름 — 배경의 흰 곡선 무늬가 또렷해 카피와 경쟁하므로 한 겹 덮어 가라앉힌다.
		      값을 낮추면 무늬가 다시 도드라진다(2026-08-03 "배경 더 흐리게" 반영). */
		linear-gradient(0deg, rgba(255,255,255,.52), rgba(255,255,255,.52)),
		linear-gradient(176deg, var(--pg-tone-tint) 0%, var(--pg-tone-tint-2) 100%),
		url('/img/solution/pigment/banner_bg.jpg') center center / cover no-repeat,
		var(--pg-tone-fill);
	overflow: hidden;
}
/* 카피가 놓이는 우측만 옅게 밝힌다 */
.pg_banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(58% 72% at 68% 50%, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 72%);
	pointer-events: none;
}
/* ⚠ min-height 는 4형제 페이지 공통 규격이다(2026-08-05) — 페이지마다 모델컷 폭이 달라
 *   배너 높이가 713~916px 로 제각각이었다. 한 페이지만 바꾸지 말 것. */
.pg_banner__inner {
	--pg-banner-pb: 112px;      /* 하단 패딩 — 모델컷 음수 마진이 이 값을 참조하므로 함께 관리 */
	position: relative;
	z-index: 1;
	min-height: 920px;
	max-width: 1680px;
	margin: 0 auto;
	padding: 108px 40px var(--pg-banner-pb);
	display: grid;
	/* ⚠ 모델컷 컬럼 폭은 이 변수 하나로 관리한다(2026-08-14) — 아래 좌우 반전 규칙이 같은 값을 쓴다 */
	--pg-col-media: minmax(320px, 644px);   /* 560 → 644 (1.15배, 2026-08-03) */
	grid-template-columns: var(--pg-col-media) 1fr;
	gap: 0 44px;
	align-items: end;           /* 모델컷을 배너 바닥에 붙인다 */
}
/* 2026-08-14 — 두 번째 탭(잡티)에서는 [텍스트 | 모델] 로 좌우를 뒤집는다(사용자 지시).
 * ⚠ 768↓ 세로 스택(display:block)에서는 order 가 무시된다 — 모바일은 사진이 위로 유지. */
.pigment[data-topic="spot"] .pg_banner__inner { grid-template-columns: 1fr var(--pg-col-media); }
.pigment[data-topic="spot"] .pg_banner__media { order: 2; }
/* 2026-08-18 — 좌우를 뒤집으면 카피가 화면 왼쪽 끝(컨테이너 패딩)에 바로 붙어 허전해 보인다
   (뒤집지 않은 탭은 모델컷 + gap 만큼 안쪽에서 시작한다) → 왼쪽 여백으로 안쪽에 앉힌다.
   ⚠ 768↓ 세로 스택에서는 0 으로 되돌린다(4형제 페이지 공통 처리). */
.pigment[data-topic="spot"] .pg_banner__body  { order: 1; padding-left: 96px; }
/* ⚠ 음수 마진: 컷아웃 원본이 허리 아래에서 잘린 사진이라 절단면을 배너 바닥에 딱 맞추면
 *   인물이 "뚝 끊긴" 것처럼 보인다. 하단 패딩만큼 내린 뒤 조금 더 밀어 밑단이 섹션 밖으로
 *   이어지게 한다(.pg_banner 의 overflow:hidden 이 잘라준다). */
.pg_banner__media {
	position: relative;
	margin-bottom: calc(-1 * var(--pg-banner-pb) - 26px);
	transform: translateX(30px);
}
/* 2026-08-10 — 탭별 모델 컷 2장이 같은 자리에서 교체된다(기미 / 잡티).
   두 파일은 캔버스 규격(760x944)이 같아야 한다 — 비율이 다르면 전환할 때 배너 높이가 튄다. */
.pg_banner__media img[hidden] { display: none; }
.pg_banner__media img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 26px rgba(60,68,78,.16));
}
.pg_banner__body { align-self: center; text-align: left; }
.pg_banner__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--pg-tone-accent);   /* 주제 톤 */
}
.pg_banner__eyebrow em { font-style: normal; }
.pg_banner__title {
	margin: 18px 0 0;
	font-weight: 700;
	font-size: var(--pg-t-banner);
	line-height: 1.24;
	letter-spacing: -2.6px;
	color: var(--pg-ink);
	word-break: keep-all;
}
/* ⚠ 두 주제 문구가 같은 자리에서 토글된다. 길이를 70자 내외로 맞춰 두었고,
   그래도 배너가 흔들리지 않도록 2줄분 높이를 확보한다(자매 페이지와 같은 방식). */
.pg_banner__desc {
	margin: 26px 0 0;
	max-width: 760px;
	min-height: 3.8em;         /* = line-height 1.86 × 2줄 */
	font-size: var(--pg-t-lead);
	font-weight: 400;
	line-height: 1.86;
	color: rgba(28,30,26,.72);
	word-break: keep-all;
}
.pg_banner__note {
	margin: 24px 0 0;
	font-size: 13px;
	color: rgba(28,30,26,.46);
}
/* 탭 전환 시 타이틀·본문이 살짝 떠오르며 교체된다 */
.pg_banner__title.is-swap,
.pg_banner__desc.is-swap { animation: pgSwap .42s cubic-bezier(.22,.61,.36,1); }
@keyframes pgSwap {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================================
 * 4. Before & After — 좌 카피 / 우 전후 뷰어
 * ========================================================================= */
/* 배경 — 2026-09-01 개편(사용자 지시 "고급스러운 느낌"). 4형제 페이지 공통 규격이다.
   이 섹션은 위의 .pg_hl 면과 아래 밝은 면(.pg_sol) **사이의 전환 구간**이다.
   직전 값은 162deg 라 위가 밝고 아래가 짙어, 윗 면에서 툭 튀고 아래 섹션과도 경계가 끊겼다.
   지금은 반대로 **위가 짙고 아래로 갈수록 다음 섹션 색으로 수렴**한다.
   ⚠ 베이스는 반드시 background-color(단색) — gradient 로 두면 탭 전환 transition 이 안 걸려
     색이 툭 끊긴다(.pg_hl 과 같은 이유). 질감·광원은 background-image 레이어가 얹는다.
   ⚠ 상단 그림자(④)만 4형제 중 이 페이지가 한 단계 옅다(.14) — 기미 탭의 .pg_hl 이 밝은
     웜 샌드 크림(#E8DCD0)이라 다른 페이지의 딥 면 기준값(.20)을 쓰면 위쪽이 무겁게 눌린다.
   ⚠ 사선 결(빗살무늬)은 2026-08-04 사용자 요청으로 걷어낸 연출이다. 되살리지 말 것. */
.pg_ba {
	position: relative;
	padding: 104px 0 108px;
	background-color: var(--pg-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,.14) 0%, rgba(74,60,38,.04) 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 테두리는 면을 잘라 놓은 것처럼 보인다. 가운데가 진하고 양끝으로
   사라지는 골드 헤어라인으로 바꿔 위 면과 이 면이 이어지게 한다.
   ⚠ 아래쪽에는 선을 두지 않는다 — 배경이 다음 섹션 색으로 수렴하므로 선이 있으면 되레 끊긴다. */
.pg_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 사용자 요청으로 제거 — 되살리지 말 것 */
.pg_ba > .pg_inner { position: relative; z-index: 1; }
.pg_ba__grid {
	display: grid;
	grid-template-columns: minmax(300px, 420px) 1fr;
	gap: 0 78px;
	align-items: center;
}
.pg_ba__desc {
	margin: 24px 0 0;
	font-size: var(--pg-t-body);
	font-weight: 400;
	line-height: 1.85;
	color: rgba(28,30,26,.72);
	word-break: keep-all;
}
/* ※ 전후 관찰 포인트 목록(.pg_ba__points)은 2026-08-05 사용자 요청으로 걷어내고
 *   Before&After 앞의 개선 포인트 배너(.pg_hl) 로 옮겼다 — 이 파일 아래쪽 4-1 항목 참조. */
.pg_ba__note {
	margin: 30px 0 0;
	font-size: 14px;
	color: rgba(28,30,26,.48);
}
/* 공통 뷰어(.jdh_ba)와 증례 슬라이드(.jdh_baslide)에 이 페이지 톤을 넘겨준다 */
/* ⚠ 그리드 칸(1fr)의 기본 min-width:auto 는 슬라이드 트랙의 가로 스크롤을 막고
 *   칸을 사진 여러 장 폭으로 부풀린다 — 0 으로 풀어야 한 장씩 넘어간다. */
.pg_ba__viewer { min-width: 0; }
.pg_ba__viewer .jdh_ba,
.pg_ba__viewer .jdh_baslide {
	--ba-ink:   var(--pg-ink);
	--ba-green: var(--pg-green);
	--ba-gold:  var(--pg-gold);
	--ba-line:  var(--pg-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 오버레이가 고정으로 얹는다. 색은 페이지 톤 변수(--pg-tone-*)의 딥 버전. */
.pg_hl {
	/* 2026-08-24 사용자 지시 — 기미 컷의 오트밀 니트(#DED0C8)에 맞춘 **웜 샌드 크림**.
	   윤곽 탭(page_lifting, #F2ECE1)보다 한 단계 진한 값이다("조금 더 진한 크림톤").
	   ⚠ 밝은 면이라 글자·워터마크·질감·칩을 전부 뒤집어야 한다 — 아래 [기미 = 밝은 면] 블록이 한 세트다. */
	--hl-base: #E8DCD0;              /* 기미 — 웜 샌드 크림(의상 오트밀 니트 톤온톤) */
	position: relative;
	padding: 88px 0 94px;
	background-color: var(--hl-base);
	overflow: hidden;
	text-align: center;
	transition: background-color .6s ease;
}
/* 2026-08-24 사용자 지시 — 모델 의상에 맞춘다. 잡티 컷은 블랙 슬립(#2D272E)이라 직전의 채도 높은
   바이올렛(#38315C)은 의상과 따로 놀았다 → 잉크차콜(#302B36)을 거쳐 **거의 검정**까지 내렸다.
   ⚠ 보랏기(H≈285)는 남겨 둔다 — 순수 검정으로 만들면 골드 아이브로우가 탁해지고 면이 죽는다.
   ⚠ 두 탭이 [밝은 크림 ↔ 거의 검정] 으로 갈리므로 전환이 가장 크게 읽히는 페이지다. */
.pigment[data-topic="spot"] .pg_hl { --hl-base: #1F1B24; }   /* 잡티 — 거의 검정(의상 블랙 슬립 계열) */

/* ===== 기미 = 밝은 면 — 어두운 면 기준으로 짜인 아래 규칙들을 전부 뒤집는다 =====
   ⚠ 잡티 탭(어두운 면)은 원래 값을 그대로 쓰므로, 여기 선택자에서 :not() 을 빼지 말 것. */
/* 질감 — 흰 광원 + 검정 비네트를 그대로 두면 크림 위에서 뿌옇게 뜬다 */
.pigment:not([data-topic="spot"]) .pg_hl::after {
	background:
		radial-gradient(120% 92% at 84% 6%,  rgba(168,129,75,.20) 0%, rgba(168,129,75,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,88,60,.16)  0%, rgba(108,88,60,0)  62%);
}
.pigment:not([data-topic="spot"]) .pg_hl::before { color: rgba(76,60,40,.07); }   /* 워터마크: 흰 → 웜 브라운 */
.pigment:not([data-topic="spot"]) .pg_hl__eyebrow { color: var(--pg-tone-accent); }   /* 밝은 골드는 크림 위에서 날아간다 */
.pigment:not([data-topic="spot"]) .pg_hl__title { color: var(--pg-ink); }
.pigment:not([data-topic="spot"]) .pg_hl__title em { color: var(--pg-green); }
/* 칩 — 크림 위에서는 흰 면만으로 구분이 약하다 → 순백 + 얇은 테두리.
   ⚠ 테두리는 border 가 아니라 box-shadow 스프레드로 준다(border 는 칩 크기를 2px 키운다). */
.pigment:not([data-topic="spot"]) .pg_hl__list li {
	background: #fff;
	box-shadow: 0 10px 24px rgba(76,60,40,.10), 0 0 0 1px rgba(76,60,40,.10);
}
/* 질감 오버레이 — 어떤 탭 색이 와도 같은 결이 얹히도록 색을 중립(흰/검)으로 둔다 */
.pg_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;
}
/* 배경 워터마크 — 면이 비어 보이지 않게 브랜드 이니셜을 크게 깐다 */
.pg_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;
}
.pg_hl > .pg_inner { position: relative; z-index: 1; }
/* ⚠ 아래 세 규칙의 색은 **어두운 면(잡티 탭) 기준**이다.
   기미 탭은 크림 면이라 위쪽 [기미 = 밝은 면] 블록에서 전부 덮어쓴다.
   transition 은 탭 전환 때 배경(.6s)과 글자색이 함께 넘어가도록 맞춘 것이다. */
.pg_hl__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--pg-gold-lite);
	transition: color .6s ease;
}
.pg_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;
}
.pg_hl__title em { font-style: normal; color: var(--pg-gold-lite); transition: color .6s ease; }
.pg_hl__list {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.pg_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(--pg-t-lead);
	font-weight: 600;
	letter-spacing: -.3px;
	color: var(--pg-ink);
	box-shadow: 0 12px 30px rgba(0,0,0,.13);
}
/* 체크 아이콘 — 이미지 없이 두 변만 남긴 사각형을 45° 돌려 만든다 */
.pg_hl__list i {
	flex: 0 0 auto;
	width: 17px;
	height: 10px;
	margin-top: -6px;
	border-left: 2.5px solid var(--pg-green);
	border-bottom: 2.5px solid var(--pg-green);
	transform: rotate(-45deg);
}
/* 2026-08-10 — 칩도 주제탭 필터를 탄다(기미 탭에 잡티 칩, 잡티 탭에 기미 칩을 두지 않는다).
   스크립트가 카드와 같은 .is-hide 를 붙이므로 여기서 자리까지 빼야 가운데 정렬이 유지된다. */
.pg_hl__list li.is-hide { display: none; }

/* =========================================================================
 * 5. 치료 솔루션 — [이미지 | 텍스트] 가로형 카드 2열
 * ========================================================================= */
/* ⚠ 배경은 반드시 background-color(단색)로 둘 것 — gradient 는 transition 이 걸리지 않아
   탭을 눌러도 색이 툭 끊긴다(.pg_hl 과 같은 이유). */
.pg_sol {
	padding: 104px 0 110px;
	background-color: var(--pg-sol-bg);
	transition: background-color .55s ease;
}
/* 탭 전환 시 섹션 헤더(타이틀의 주제 단어가 바뀐다)도 함께 떠오른다 */
.pg_sol__head.is-swap { animation: pgSwap .42s cubic-bezier(.22,.61,.36,1); }
/* ─── 섹션 헤더 축 다양화 (2026-08-04, 4형제 페이지 공통) ─────────────────
 * 헤더가 전부 가운데 정렬이라 섹션이 바뀌어도 같은 화면으로 읽혔다.
 *   전후비교 = 좌우 비대칭(기존) → 솔루션 = 스플릿 → 시술과정 = 좌측 → 진단 = 중앙(유지)
 * ⚠ 넷을 전부 바꾸면 다시 균질해진다. 진단 섹션의 가운데 정렬은 일부러 남긴 것. */
/* ⚠ 2026-08-11 사용자 지시로 **가운데 정렬**로 통일했다(솔루션·시술과정 공통).
   스플릿 grid(좌 타이틀 / 우 설명)로 되돌리지 말 것 — 4형제 페이지 공통. */
.pg_sol__head {
	text-align: center;
	margin: 0 0 52px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--pg-line);
}
.pg_sol__desc {
	max-width: 760px;
	margin: 16px auto 0;
	font-size: var(--pg-t-body);
	font-weight: 300;
	line-height: 1.75;
	color: rgba(28,30,26,.55);
	word-break: keep-all;
}
/* ─── 솔루션 = [세로 목록 | 상세 스테이지] 쇼케이스 (2026-08-05 사용자 요청) ────
 * 지그재그 대형 카드 나열 → 좌측 시술명 목록에서 고르면 우측 상세만 바뀌는 형태로 바꿨다.
 * ⚠ 좌측 목록 버튼은 마크업에 없다 — pigment.jsp 의 스크립트가 `.pg_card__name` 을 읽어
 *   자동 생성한다. 시술명을 고치면 목록도 따라오므로 두 곳에 같은 문구를 두지 말 것.
 * ⚠ 주제탭 필터(.is-hide)가 걸리면 목록을 다시 만들고 첫 항목을 자동 선택한다. */
.pg_sol__wrap {
	display: grid;
	grid-template-columns: minmax(0, 286px) minmax(0, 1fr);
	gap: 0 58px;
	align-items: start;
}
.pg_sol__nav { border-top: 1px solid var(--pg-line); }
.pg_solnav__btn {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 21px 30px 21px 0;
	border: 0;
	border-bottom: 1px solid var(--pg-line);
	border-radius: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--pg-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 — 선택 항목과 헷갈리지 않게 도트 없이 색·들여쓰기·아주 옅은 면만 움직인다 */
.pg_solnav__btn:hover { color: rgba(28,30,26,.86); padding-left: 7px; background-color: rgba(28,30,26,.022); }
/* 선택 표시 — 골드 도트(헤일로) + 오른쪽 화살촉 + 왼쪽에서 사그라드는 골드 틴트.
   2026-08-05 이전에는 배경을 아예 칠하지 않아 선택 항목이 색 하나로만 구분돼 약했다.
   면을 꽉 칠하는 대신 84% 지점에서 완전히 사라지는 그라데이션이라 목록은 여전히 조용하다. */
.pg_solnav__btn.is-on {
	color: var(--pg-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);
}
.pg_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(--pg-gold);
	box-shadow: 0 0 0 4px rgba(255,255,255,.6);   /* 흰 헤일로 — 골드 틴트 위에서 도트가 묻히지 않게 떼어낸다 */
}
.pg_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(--pg-gold);
	border-top: 1.5px solid var(--pg-gold);
	transform: rotate(45deg);
}
.pg_sol__list { position: relative; }
/* ⚠ 스테이지 카드는 display:none 으로 대기한다 → 공통 리빌(.jdh-up)의 교차 관찰이 걸리지 않아
   opacity:0 인 채 남고 카드가 통째로 안 보인다. 이 영역에서만 리빌을 해제한다. */
html.jdh-anim .jdh_sub .pg_sol__list .jdh-up { opacity: 1; transform: none; }
.pg_card {
	display: none;
	/* 미디어 .92 : 텍스트 1.08 — 사진 자산이 390~720px 폭이라 반반이면 저해상 컷이 뭉갠다 */
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	background: #fff;
	border: 1px solid var(--pg-line);
	border-radius: 12px;
	overflow: hidden;
}
.pg_card.is-active { display: grid; animation: pgSwap .42s cubic-bezier(.22,.61,.36,1); }
.pg_card.is-hide { display: none; }
.pg_card__media {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #F7F5F0 0%, #EFEBE2 100%);
	min-height: 430px;
}
.pg_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 를 쓴다. */
.pg_card__media--device { background: linear-gradient(160deg, #FBFAF7 0%, #F1EEE7 100%); }
/* padding 44/40 → 20/16 (2026-08-05). PNG 의 투명 여백을 트림한 뒤라 이 padding 이 곧 여백이다.
   예전 값은 이미지 자체 여백 위에 padding 이 겹쳐 장비가 카드 안에서 지나치게 작아 보였다. */
.pg_card__media--device img { object-fit: contain; padding: 20px 16px; }
.pg_card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 54px 58px;
}
/* 카드 넘버링(01·02…)은 2026-08-05 사용자 요청으로 뺐다 — 시술명이 첫 요소다.
   마크업의 .pg_card__no 도 함께 제거했으니 되살리려면 JSP 부터 손볼 것. */
.pg_card__name {
	margin: 0;
	font-weight: 700;
	font-size: var(--pg-t-solname);
	line-height: 1.28;
	letter-spacing: -1px;
	color: var(--pg-ink);
}
/* 정식 표기의 괄호 부분(듀얼토닝(큐마스터플러스))은 한 단계 작게 — 시술명 줄이 무거워지지 않게 */
.pg_card__name-sub {
	display: block;
	margin: 6px 0 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -.3px;
	color: rgba(28,30,26,.5);
}
.pg_card__sub {
	margin: 10px 0 0;
	font-size: var(--pg-t-lead);
	font-weight: 500;
	color: var(--pg-green);
}
.pg_card__txt {
	margin: 20px 0 0;
	font-size: var(--pg-t-body);
	font-weight: 400;
	line-height: 1.8;
	color: rgba(28,30,26,.62);
	word-break: keep-all;
}
.pg_card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.pg_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(--pg-green);
}
/* 스테이지 카드는 목록에서 고른 결과라 hover 로 뜨지 않는다(클릭 대상이 아님).
   사진 확대만 남겨 화면이 정지된 느낌이 들지 않게 한다. */
.pg_card:hover .pg_card__media img { transform: scale(1.04); }

/* =========================================================================
 * 6. 시술 과정
 * ========================================================================= */
/* 배경 이미지는 2026-08-05 사용자 요청으로 주름 페이지 것(뉴트럴 실버-크림)으로 교체했다.
   원래 자산은 로즈 핑크가 너무 강했다 — 되살릴 일이 있으면 같은 폴더의 _old_process_bg_rose.jpg.
   ⚠ 색 보정 필름을 얹지 말고 파일 자체를 맞춘다(형제 페이지와 같은 면으로 보이는 게 목적). */
.pg_process {
	padding: 104px 0 108px;
	background: #F2EEE7 url('/img/solution/pigment/process_bg.jpg') center center / cover no-repeat;
}
/* 시술 과정 — 좌측 축. eyebrow 가 없는 섹션이라 짧은 골드 라인이 그 자리를 대신한다 */
/* 2026-08-11 좌측 축 → 가운데 정렬(사용자 지시). 골드 라인도 중앙 대칭으로 */
.pg_process__head { text-align: center; max-width: none; margin: 0 0 56px; }
.pg_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(--pg-gold) 50%, rgba(194,168,120,.25) 100%);
}
.pg_process__desc {
	max-width: 760px;
	margin: 22px auto 0;
	font-size: var(--pg-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.pg_steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}
/* 원형 카드 — ※ 이미지 박스 radius 8px 규칙의 의도된 예외(자매 페이지와 동일) */
.pg_step {
	position: relative;
	padding: 0 10px;
	text-align: center;
}
/* 단계 사이 점선 연결선은 사용자 지시로 제거(2026-08-03) — 원만 나열한다 */
.pg_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;
}
.pg_step__disc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pg_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;
}
.pg_step:hover .pg_step__disc {
	transform: translateY(-5px);
	box-shadow: 0 20px 38px rgba(76,64,44,.24);
}
.pg_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(--pg-gold);
}
.pg_step__name {
	display: block;
	margin: 10px 0 0;
	font-weight: 600;
	font-size: var(--pg-t-lead);
	line-height: 1.44;
	letter-spacing: -.7px;
	color: var(--pg-ink);
	word-break: keep-all;
}

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

@media all and (max-width: 1200px) {
	.pigment { --pg-t-banner: 46px; --pg-t-h1: 38px; --pg-t-h2: 33px; --pg-t-lead: 19px; --pg-t-body: 17px; }
	.pg_hero { padding: 78px 0 74px; }
	.pg_banner__inner { --pg-banner-pb: 84px; --pg-col-media: minmax(260px, 449px); min-height: 640px; padding: 80px 32px var(--pg-banner-pb); gap: 0 24px; }
	.pigment[data-topic="spot"] .pg_banner__body { padding-left: 56px; }
	.pg_banner__media { transform: translateX(18px); }
	.pg_ba { padding: 84px 0 88px; }
	.pg_ba__grid { grid-template-columns: 1fr; gap: 40px 0; }
	.pg_sol, .pg_process, .pg_diag { padding: 84px 0 88px; }
	.pg_sol__wrap { grid-template-columns: minmax(0, 232px) minmax(0, 1fr); gap: 0 36px; }
	.pg_solnav__btn { padding: 17px 26px 17px 0; }
	.pg_card { grid-template-columns: 1fr 1fr; }
	.pg_card__media { min-height: 356px; }
	.pg_card__body { padding: 38px 36px; }
	.pg_steps { grid-template-columns: repeat(3, 1fr); gap: 34px 16px; }
	.pg_step__disc { width: 156px; }
}

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

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

	.pg_hero { padding: 58px 0 56px; }
	.pg_hero__eyebrow { font-size: 15px; }
	.pg_hero__desc { font-size: 15px; }
	.pg_hero__desc br { display: none; }

	.pg_tabs { --pg-tab-h: 62px; }
	.pg_tab { min-width: 132px; padding: 9px 32px 8px; }
	.pg_tab__ko { font-size: 16px; }

	/* 좁은 화면에서는 사진을 위로 올리고 카피를 아래로 */
	.pg_banner__inner { display: block; min-height: 0; padding: 44px 24px 52px; }   /* 세로 스택에서는 높이 통일 해제 */
	/* 세로 스택에서는 좌우 반전이 없다 — 위에서 준 왼쪽 여백을 되돌리지 않으면 글만 오른쪽으로 밀린다 */
	.pigment[data-topic="spot"] .pg_banner__body { padding-left: 0; }
	/* 2026-08-12 — 좁은 화면에서 인물이 과하게 커 배너만 화면 하나를 먹었다 → 330px.
	 * ⚠ 마스크가 핵심이다. 컷아웃 원본이 가슴 아래에서 직선으로 잘려 있어, 데스크톱은 음수 마진으로
	 *   절단면을 섹션 밖으로 밀어 감춘다. 세로 스택에서는 그게 풀려 단면이 배경 위에 드러난다
	 *   → 밑단만 알파 페이드로 흘려 경계선을 지운다(솔루션 4종 공통 처리). */
	.pg_banner__media { max-width: 330px; margin: 0 auto 26px; transform: none; }
	.pg_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%);
	}
	.pg_banner__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.pg_banner__title br { display: none; }
	.pg_banner__desc { margin-top: 20px; font-size: 15px; line-height: 1.8; min-height: 0; }

	.pg_ba { padding: 62px 0 66px; }
	.pg_hl { padding: 62px 0 66px; }
	.pg_hl::before { font-size: 210px; }
	.pg_hl__title { font-size: 25px; }
	.pg_hl__list { margin-top: 28px; gap: 12px; }
	.pg_hl__list li { gap: 11px; padding: 17px 24px; font-size: 17px; }
	.pg_hl__list i { width: 15px; height: 9px; }

	.pg_sol, .pg_process, .pg_diag { padding: 62px 0 66px; }
	.pg_sol__head { margin-bottom: 32px; padding-bottom: 20px; }
	.pg_process__head { margin-bottom: 36px; }
	.pg_process__head::before { width: 34px; margin-bottom: 16px; }
	/* 좁은 화면에서는 스테이지도 1열 — 사진 위, 설명 아래 */
	.pg_card { grid-template-columns: 1fr; }
	.pg_card__media { min-height: 0; aspect-ratio: 16 / 10; }
	.pg_card__media img { position: static; }
	.pg_card__media--device img { padding: 14px 12px; }
	.pg_card__body { padding: 30px 24px 32px; }
	.pg_card__sub { margin-top: 8px; font-size: 16px; }
	.pg_card__txt { margin-top: 14px; }
	.pg_card__tags { margin-top: 18px; }

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

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

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

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

@media (prefers-reduced-motion: reduce) {
	.pg_card__media img,
	.pg_solnav__btn,
	.pg_tabs__ink,
	.pg_hero,
	.pg_banner { transition: none; }
	.pg_banner__title.is-swap,
	.pg_banner__desc.is-swap,
	.pg_sol__head.is-swap,
	.pg_card.is-active { animation: none; }
	.pg_sol { transition: none; }
}