@charset "utf-8";
/* =========================================================================
 * JDH 치료 솔루션 그리드 (공통 컴포넌트) — 2026-08-07
 * · 사용 페이지: /solution/wrinkle · pore · lifting · pigment 의 "○○ 치료 솔루션" 섹션
 *
 * ── 왜 만들었나 ───────────────────────────────────────────────────────
 * 이전에는 [좌측 시술 목록] + [고른 시술 하나만 우측에 크게] 구조였다.
 * 한 번에 한 장만 보여 화면이 비어 보이고, 다른 시술을 보려면 매번 눌러야 했다
 * (2026-08-07 "무난하고 허전하다 / 버튼 눌러 카드 나오는 방식은 별로" 지적).
 * → **전부 펼친 카드 그리드**로 바꿨다. 목록 버튼이 사라져 시술 수가 한눈에 들어온다.
 *
 * ── 페이지마다 클래스 접두어가 다르다 ─────────────────────────────────
 * wr_card / pore_card / lf_card / pg_card … 네 페이지가 각자 이름을 쓴다.
 * 마크업을 통째로 바꾸는 대신, 컨테이너에 `jdh_solgrid` 만 붙이고 여기서는
 * **속성 선택자**(`[class*="__media"]` 등)로 잡는다. 그래서 각 페이지 JSP 는
 * 클래스 한 개만 추가하면 되고, 기존 문구·이미지·필터(data-topics)는 그대로 쓴다.
 * ⚠ 이 파일은 페이지 전용 CSS **뒤에** 로드해야 한다(옛 카드 규칙을 덮어야 하므로).
 * ⚠ `> article.is-active` 를 함께 지정하는 이유: 옛 CSS 가
 *    `.wr_card{display:none} .wr_card.is-active{display:grid}` 였다. is-active 가
 *    남아 있어도 그리드가 깨지지 않도록 명시도를 맞춰 둔 것이다.
 * ========================================================================= */

.jdh_solgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── 카드 ────────────────────────────────────────────────────────────── */
/* 2026-08-21 개편(3차·확정) — 사용자 지시
 *   "카드를 **이미지가 다 덮고 그 위에 내용 텍스트가 있는** 형식으로. 그대신 가독성은 좋아야 해."
 * 진행 경과: ① 작은 썸네일+텍스트(요청 취지와 반대라 폐기) → ② 정사각 사진 위 / 글 아래
 *           → ③ **사진이 카드 전체를 덮고 글이 그 위에 얹히는** 지금 형태.
 *
 * 가독성 장치(빼지 말 것 — 이게 빠지면 장비 컷·밝은 사진 위에서 글이 사라진다):
 *   · 사진 위에 아래로 갈수록 짙어지는 **스크림 그라디언트**(article::after)
 *   · 글 색은 흰색 계열 + 옅은 그림자, 부제는 골드
 *   · 글 덩어리는 카드 **하단**에 붙인다(사진의 주요 피사체는 위쪽에 오게 크롭)
 * ⚠ 장비 누끼(--device)는 cover 로 채우면 몸통만 남는다 → contain 을 유지하되
 *   하단 패딩으로 장비를 글 위쪽에 앉힌다(아래 --device 규칙 참조). */
.jdh_solgrid > article,
.jdh_solgrid > article.is-active {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;      /* 글 덩어리를 카드 바닥에 붙인다 */
	position: relative;
	min-height: 500px;              /* 사진이 주인공이 되는 최소 높이. 글이 길면 알아서 늘어난다 */
	overflow: hidden;
	background: #20241E;            /* 사진 로드 전/여백 톤 */
	border: 1px solid #E3DACA;
	border-radius: 14px;
	box-shadow: 0 16px 34px -28px rgba(70, 58, 40, .5);
	transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease, border-color .38s ease;
	animation: none;   /* 옛 카드 전환 애니메이션(wrSwap 등) 무력화 */
}
/* 스크림 — 사진과 글 사이. z-index 1 로 사진(0) 위, 글(2) 아래에 깔린다.
   ⚠ 상단은 완전 투명이라 사진이 그대로 보이고, 아래로 내려오며 짙어져 글이 또렷해진다.
   2026-08-21(2차) — "너무 까매 보인다" → 하단 농도를 .93/.82 에서 낮췄다.
     한 번 .66/.54 까지 내려 봤더니 **밝은 장비 컷 위에서 흰 글씨가 흐려져** 다시 올린 값이 지금(.76/.66)이다.
     사진 위쪽 절반은 거의 손대지 않아 컷은 밝게 보이고, 글이 놓이는 아래쪽만 눌린다.
   ⚠ 더 밝게 하려면 글자색·그림자를 함께 손봐야 한다 — 이 값만 낮추면 부제(골드)부터 읽히지 않는다. */
/* ⚠ 2026-08-24 — 기본 상태의 농도를 한 단계 낮췄다(사용자 지시: "텍스트가 이미지를 안 가릴
   정도로만 보이고, 호버하면 다 보이게"). 기본에서는 설명 문단이 접혀 글 덩어리가 짧으므로
   이만큼만으로도 시술명·부제·태그가 읽힌다. 호버해서 설명이 펼쳐질 때의 가독성은
   아래 `__body::before` 가 따로 받쳐 준다 — 이 값을 다시 올려 해결하려 하지 말 것
   (올리면 접힌 상태에서 사진이 다시 어두워져 요청의 취지가 사라진다). */
.jdh_solgrid > article::after {
	content: '';
	position: absolute; z-index: 1; inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(20,24,20,0)   0%,
		rgba(20,24,20,.03) 40%,
		rgba(20,24,20,.24) 62%,
		rgba(18,22,18,.50) 82%,
		rgba(16,20,16,.62) 100%);
}
/* 밝은 컷 전용 보강 — `data-cut="bright"` 를 단 카드에만 스크림을 한 단계 올린다.
   ⚠ 왜 필요한가: 대부분의 카드 사진은 중간톤이라 위 값으로 충분하지만, **투명 컷아웃**(스킨부스터)은
     글 뒤가 인물의 밝은 피부라 흰 글씨·골드 부제가 흐려진다. 공통값을 올려 해결하면 나머지 카드가
     다시 어두워져 "사진이 잘 보이게" 라는 요청과 어긋난다 → 해당 카드에만 속성을 단다.
   ⚠ 새로 밝은 컷을 넣을 때는 JSP 의 <article> 에 data-cut="bright" 를 함께 달 것. */
.jdh_solgrid > article[data-cut="bright"]::after {
	background: linear-gradient(180deg,
		rgba(20,24,20,0)   0%,
		rgba(20,24,20,.05) 38%,
		rgba(20,24,20,.36) 60%,
		rgba(18,22,18,.62) 80%,
		rgba(16,20,16,.74) 100%);
}
/* 주제탭 필터 — 이 규칙이 없으면 숨겨야 할 카드가 위 규칙에 밀려 보인다 */
.jdh_solgrid > article.is-hide { display: none; }

/* ── 탭 전환 리빌 (2026-08-28) ─────────────────────────────────────────
 * "탭을 눌러도 바뀐 느낌이 안 든다"는 지적. 원인은 페이지마다 두 탭의 카드 구성이
 * 크게 겹치기 때문(lifting 은 처짐/윤곽 9종이 아예 동일)이라, 필터만으로는 화면이
 * 그대로다. → 탭을 누르면 남은 카드들이 **왼쪽부터 차례로 다시 떠오르게** 한다.
 * JS 가 .jdh_solgrid 에 is-swap 을 붙였다 애니메이션이 끝날 때 떼는 방식.
 * ⚠ 위 기본 규칙의 `animation: none`(옛 wrSwap 무력화용)을 이겨야 하므로
 *   선택자를 `.jdh_solgrid.is-swap > article` 로 잡아 명시도를 한 단계 높였다. */
@keyframes jdhSolIn {
	from { opacity: 0; transform: translateY(18px) scale(.985); }
	to   { opacity: 1; transform: none; }
}
.jdh_solgrid.is-swap > article,
.jdh_solgrid.is-swap > article.is-active {
	animation: jdhSolIn .52s cubic-bezier(.22,.61,.36,1) both;
}
/* 계단식 지연 — 숨은 카드도 순번을 차지하면 중간이 비므로 :nth-child 가 아니라
   보이는 카드만 세는 방법이 이상적이지만, CSS 만으로는 불가능하다.
   대신 JS 가 보이는 카드에 --sg-i(0,1,2…)를 심어 준다(없으면 0 = 동시 등장). */
.jdh_solgrid.is-swap > article { animation-delay: calc(var(--sg-i, 0) * .055s); }

@media (prefers-reduced-motion: reduce) {
	.jdh_solgrid.is-swap > article,
	.jdh_solgrid.is-swap > article.is-active { animation: none; }
}

/* 상단 골드 헤어라인 — 카드가 흰 면뿐이라 밋밋하던 것을 잡아 주는 장치 */
.jdh_solgrid > article::before {
	content: '';
	position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px;
	background: linear-gradient(90deg, rgba(196,164,105,0) 0%, rgba(196,164,105,.55) 50%, rgba(196,164,105,0) 100%);
	opacity: 0;
	transition: opacity .38s ease;
}
.jdh_solgrid > article:hover {
	transform: translateY(-6px);
	border-color: #DFD3BC;
	box-shadow: 0 28px 46px -28px rgba(70, 58, 40, .55);
}
.jdh_solgrid > article:hover::before { opacity: 1; }

/* ── 사진 ────────────────────────────────────────────────────────────── */
/* 카드 **전체**를 덮는다(2026-08-21 3차). absolute 로 깔고 글은 그 위에 얹는다.
   ⚠ 다시 문서 흐름(상단 이미지 + 하단 글)으로 되돌리지 말 것. */
.jdh_solgrid > article > [class*="__media"] {
	position: absolute; z-index: 0; inset: 0;
	display: block;
	width: 100%; height: 100%;
	min-height: 0;              /* 옛 CSS 의 min-height:430px 을 푼다 */
	aspect-ratio: auto;         /* 카드를 덮으므로 비율을 따로 잡지 않는다 */
	overflow: hidden;
	background: linear-gradient(160deg, #F8F6F1 0%, #EFEBE2 100%);
	line-height: 0;
}
.jdh_solgrid > article > [class*="__media"] img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 50% 32%;   /* 인물·시술 사진은 위쪽이 주 피사체 — 아래는 글에 덮인다 */
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.jdh_solgrid > article:hover [class*="__media"] img { transform: scale(1.05); }
/* 장비 누끼(세로형 PNG, 비율 0.2~0.5)는 잘라내지 않는다 — cover 로 채우면 몸통만 남아 무슨 장비인지 모른다.
   ⚠ 세로형이라 contain 에서 **높이가 제한 요소**다 → 장비 크기는 하단 패딩이 결정한다.
   ⚠ 2026-08-24 — 사용자 지시("카드에 꽉 안 차 보인다 / 기기가 위쪽으로 치우쳐 있다")로 두 값을 바꿨다.
       · padding-bottom 232 → 150 : 그림 영역이 250 → 330px 로 커져 장비가 그만큼 커진다.
         232 는 설명 문단이 **항상 펼쳐져 있던 시절**의 값이다. 지금은 기본이 접힘이라 그만큼 비울 필요가 없다.
       · object-position 50% 0 → 50% 50% : 상단 정렬이라 장비가 그림 영역 위쪽에 붙어 있었다.
         영역 한가운데로 내려 카드 위쪽 치우침을 없앤다.
   ⚠ 호버로 글이 펼쳐지면 장비 다리 아래쪽과 살짝 겹치는데, 그때는 본문 뒤 스크림이 짙어져 가려 준다.
     겹침이 싫다고 이 값을 다시 키우면 접힌 상태(대부분의 시간)에서 장비가 도로 작아진다. */
.jdh_solgrid > article > [class*="--device"] {
	background: linear-gradient(165deg, #FCFBF8 0%, #EFEBE1 62%, #E4DFD2 100%);
}
.jdh_solgrid > article > [class*="--device"] img {
	object-fit: contain;
	object-position: 50% 50%;
	padding: 20px 18px 150px;
}
/* 누끼 컷은 확대하면 여백만 커져 어색하다 → 사진 카드만 줌 */
.jdh_solgrid > article:hover [class*="--device"] img { transform: scale(1.03); }
/* 일러스트 카드(새살침 단면도, 2026-08-11) — 가로형 투명 PNG.
   cover 로 깔면 좌우가 잘려 침과 진피층이 화면 밖으로 나간다 → 통째로.
   ⚠ 이 규칙은 반드시 **이 파일**에 둔다. page_wrinkle/page_pore 에 같은 걸 써도
     여기 `[class*="__media"] img`(특이도 0,2,1)에 밀려 먹히지 않는다(2026-08-11 실제로 겪음). */
/* ⚠ 일러스트는 **가로형**이라 폭이 제한 요소다 → 좌우 패딩을 줄여야 커진다(장비와 반대).
   세로 정렬·하단 패딩은 장비와 같은 이유로 2026-08-24 에 함께 조정했다. */
.jdh_solgrid > article > [class*="--illust"] img {
	object-fit: contain;
	object-position: 50% 50%;
	padding: 24px 12px 150px;
}
.jdh_solgrid > article:hover [class*="--illust"] img { transform: scale(1.03); }

/* ── 본문(사진 위 오버레이) ──────────────────────────────────────────── */
/* ⚠ 2026-08-24 — **absolute 로 카드 바닥에 고정**한다. 문서 흐름에 두면 호버로 설명이 펼쳐질 때
   카드 높이가 늘어나 그리드 한 행 전체가 밀린다(옆 카드까지 들썩인다).
   absolute 면 카드 높이는 min-height 로 고정되고 글만 그 안에서 자란다. */
.jdh_solgrid > article > [class*="__body"] {
	position: absolute; z-index: 2;   /* 스크림(1) 위 */
	left: 0; right: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px 24px 24px;
}
/* 호버용 스크림 — 펼쳐진 설명 뒤를 받친다.
   ⚠ z-index:-1 은 __body 안에서만 뒤로 간다(부모가 z-index:2 로 스택 컨텍스트를 만든다)
     → 사진 위·글 아래라는 정확한 자리에 깔린다.
   ⚠ 카드 전체 스크림(::after)을 올리는 대신 이걸 쓰는 이유는, 접힌 상태의 사진을 밝게 두기 위해서다. */
.jdh_solgrid > article > [class*="__body"]::before {
	content: '';
	position: absolute; z-index: -1;
	left: 0; right: 0; bottom: 0; top: -70px;
	background: linear-gradient(180deg,
		rgba(16,20,16,0)   0%,
		rgba(16,20,16,.42) 34%,
		rgba(16,20,16,.72) 66%,
		rgba(14,18,14,.82) 100%);
	opacity: 0;
	transition: opacity .42s ease;
	pointer-events: none;
}
.jdh_solgrid > article:hover > [class*="__body"]::before { opacity: 1; }
/* 부제를 시술명 **위**로 올린다(order:-1) — 아이브로우처럼 읽혀 위계가 생긴다.
 * ⚠ 마크업 순서(이름 → 부제)는 그대로 두고 표시 순서만 바꾼 것이다. */
.jdh_solgrid > article [class*="__sub"] {
	order: -1;
	margin: 0 0 7px;
	font-weight: 600; font-size: 14px; line-height: 1.45; letter-spacing: .2px;
	color: #EDCF92;
	text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 10px rgba(0,0,0,.4);
	word-break: keep-all;
}
.jdh_solgrid > article [class*="__name"] {
	position: relative;
	margin: 0 0 13px;
	padding-bottom: 13px;
	font-weight: 700; font-size: 22px; line-height: 1.3; letter-spacing: -.5px;
	color: #FFFDF8;
	text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 2px 14px rgba(0,0,0,.5);
}
/* 이름 아래 짧은 구분선 — 부제/이름 덩어리와 본문을 갈라 준다.
   ⚠ :not([class*="__name-"]) 을 뺄 것 — 시술명 안에 괄호 표기를 담는 자식
     (예: 색소 페이지의 <span class="pg_card__name-sub">(큐마스터플러스)</span>)도
     [class*="__name"] 에 걸려 **금색 선이 두 줄** 그려졌다(2026-09-01 사용자 지적). */
.jdh_solgrid > article [class*="__name"]:not([class*="__name-"])::after {
	content: '';
	position: absolute; left: 0; bottom: 0;
	width: 26px; height: 2px;
	background: #D9BC7C;
}
/* 시술명 안의 괄호 표기 = 이름의 둘째 줄. 위 [class*="__name"] 규칙이 그대로 걸리면
   이름 한 벌 분량의 여백(margin+padding 13px씩)까지 겹쳐 선과 이름이 멀어진다.
   ⚠ 색은 지정하지 않는다 — 상속(흰색)을 유지해야 어두운 사진 위에서 읽힌다.
     페이지 CSS 쪽 회색(.pg_card__name-sub)은 흰 카드 시절 값이라 되살리지 말 것. */
.jdh_solgrid > article [class*="__name-"] {
	margin: 0; padding: 0;
	font-size: 17px; font-weight: 600; letter-spacing: -.3px;
}
/* 설명 문단 — **기본은 접고 호버에서 편다**(2026-08-24 사용자 지시:
 * "텍스트가 이미지를 안 가릴 정도로만 보이고, 마우스 호버하면 텍스트가 다 보이게").
 * 접힌 상태에서는 부제 · 시술명 · 태그만 남아 글 덩어리가 카드 아래 1/4 로 줄고, 장비 컷이 온전히 보인다.
 * ⚠ height 대신 max-height 로 여는 이유 — 내용 높이가 카드마다 달라 고정값을 쓸 수 없다.
 *   380px 은 가장 긴 카드(설명 5줄)도 넘는 여유값이다. 실제 높이만큼만 열린다.
 * ⚠ display:none ↔ block 으로 토글하지 말 것 — 전환이 뚝 끊기고, 접힌 높이를 브라우저가
 *   계산하지 못해 태그 띠가 튄다.
 * ⚠ margin-bottom 은 설명이 길어 태그 띠에 바짝 붙는 카드를 위한 최소 간격이다(2026-08-11 요청).
 *   접힐 때 0 으로 함께 줄여야 접힌 상태에 빈 줄이 남지 않는다. */
.jdh_solgrid > article [class*="__txt"] {
	max-height: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	font-weight: 400; font-size: 15px; line-height: 1.7;
	color: rgba(255,253,248,.94);
	text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 12px rgba(0,0,0,.45);
	word-break: keep-all;
	transition: max-height .42s cubic-bezier(.22,.61,.36,1),
	            margin .42s cubic-bezier(.22,.61,.36,1),
	            opacity .3s ease;
}
.jdh_solgrid > article:hover [class*="__txt"] {
	max-height: 380px;
	margin: 0 0 16px;
	opacity: 1;
}
/* 태그 — 2026-08-11 알약 칩을 걷고 **카드 하단을 꽉 채우는 띠**로 바꿨다(사용자 지시:
 * "pill 말고 카드 하단에 꽉차게 시원하게, 가독성 좋게").
 * ⚠ 좌우/아래 음수 마진으로 body 의 패딩을 상쇄해 카드 폭까지 넓힌다 —
 *   `__body` 의 padding(26px 24px 28px)이 바뀌면 이 값도 같이 바꿔야 띠가 어긋나지 않는다.
 * ⚠ 알약(background/border/border-radius)으로 되돌리지 말 것. 항목 구분은 얇은 세로선이 맡는다.
 * 항상 카드 맨 아래에 붙어(margin-top:auto) 카드 높이가 달라도 아랫줄이 맞는다. */
/* ⚠ 2026-08-21 3차 — 사진 위 오버레이가 되면서 크림색 띠는 쓸 수 없다(사진을 가로로 가른다).
   대신 **얇은 구분선 위 골드 텍스트**로 둔다. 크림 배경 띠를 되살리지 말 것. */
.jdh_solgrid > article [class*="__tags"] {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 4px 20px;
	margin: 0;
	padding: 13px 0 0;
	background: none;
	border-top: 1px solid rgba(255,253,248,.24);
}
.jdh_solgrid > article [class*="__tags"] i {
	position: relative;
	padding: 0;
	font-style: normal; font-weight: 600; font-size: 14.5px; letter-spacing: -.3px;
	color: #EACD92;
	text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 10px rgba(0,0,0,.4);
	white-space: nowrap;
}
/* 항목 사이 얇은 세로 구분선 — 알약 대신 이것만으로 나눈다 */
.jdh_solgrid > article [class*="__tags"] i + i::before {
	content: '';
	position: absolute; left: -10px; top: 50%;
	width: 1px; height: 12px; margin-top: -6px;
	background: rgba(227,198,140,.45);
}

/* ── 반응형 ──────────────────────────────────────────────────────────── */
@media all and (max-width: 1200px) {
	.jdh_solgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
	.jdh_solgrid > article > [class*="__body"] { padding: 24px 22px 22px; }
	.jdh_solgrid > article [class*="__name"] { font-size: 21px; }
}

/* ===== 1024px 이하 = 가로 스와이프 (2026-08-07 사용자 지시) ==============
 * 시술이 최대 9종이라 좁은 화면에서 1열로 쌓으면 섹션 하나가 화면 8~9개 높이가 됐다.
 * → 세로로 쌓지 않고 옆으로 민다. 스크롤 스냅만 쓰는 CSS 전용 구현이라 JS 가 없고,
 *   터치 스와이프 · 트랙패드 · 스크롤바 드래그가 모두 그대로 먹는다.
 * PC(1025px↑)는 그대로 3열 그리드다 — 가로 캐러셀로 바꾸면 한 화면에 3장만 남아
 * '이만큼 보유하고 있다' 가 안 보이고, 세로 길이도 3행뿐이라 애초에 문제가 없다.
 *
 * ⚠ 풀블리드 트릭: 페이지 inner 의 좌우 여백(--sg-pad)만큼 음수 마진으로 빠져나온 뒤
 *   같은 값을 padding 으로 되돌린다. 그래야 카드가 화면 끝까지 흘러가면서도
 *   첫 카드는 본문과 같은 선에서 시작한다. 값은 solution 4개 페이지의 inner 여백
 *   (40 → 768:24 → 480:18) 과 맞춰 둔 것이다 — 페이지 여백을 바꾸면 여기도 함께 본다.
 * ⚠ scroll-padding-inline 이 없으면 스냅이 화면 왼쪽 끝(= padding 안쪽)에 붙어
 *   첫 카드가 여백을 먹고 잘린다. */
@media all and (max-width: 1024px) {
	.jdh_solgrid {
		--sg-pad: 40px;
		display: flex;
		gap: 14px;
		margin-inline: calc(var(--sg-pad) * -1);
		padding: 2px var(--sg-pad) 16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--sg-pad);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: rgba(168, 134, 63, .55) rgba(70, 58, 40, .08);
	}
	/* 스크롤바를 일부러 보이게 둔다 — '옆으로 밀 수 있다' 는 유일한 시각 신호다 */
	.jdh_solgrid::-webkit-scrollbar { height: 4px; }
	.jdh_solgrid::-webkit-scrollbar-track { background: rgba(70, 58, 40, .08); border-radius: 999px; }
	.jdh_solgrid::-webkit-scrollbar-thumb { background: rgba(168, 134, 63, .55); border-radius: 999px; }

	.jdh_solgrid > article,
	.jdh_solgrid > article.is-active {
		flex: 0 0 46%;
		scroll-snap-align: start;
	}
	/* 터치 화면에서는 hover 로 카드가 떠오를 일이 없다 — 뜨면 스크롤 박스에 잘리기만 한다 */
	.jdh_solgrid > article:hover { transform: none; box-shadow: 0 16px 34px -28px rgba(70, 58, 40, .5); }

	/* ⚠ 2026-08-24 — 데스크톱의 [기본 접힘 / 호버 펼침]을 여기서 **반드시 되돌린다**.
	 *   터치 기기에는 hover 가 없어 그대로 두면 설명을 영영 볼 수 없다.
	 *   본문도 absolute → 문서 흐름으로 되돌린다. 좁은 화면에서는 카드가 낮아(420~500px)
	 *   펼친 글이 카드 밖으로 넘치므로, 카드 높이가 글에 맞춰 늘어나야 한다. */
	.jdh_solgrid > article > [class*="__body"] { position: relative; flex: 0 0 auto; }
	.jdh_solgrid > article > [class*="__body"]::before { opacity: 1; }
	.jdh_solgrid > article [class*="__txt"] { max-height: none; margin: 0 0 16px; opacity: 1; }
	/* 글이 항상 펼쳐져 있으므로 그림 하단 여백도 데스크톱(150px)보다 크게 되돌린다 —
	   그러지 않으면 장비가 설명 문단 뒤로 깊이 들어간다. */
	.jdh_solgrid > article > [class*="--device"] img { padding: 20px 18px 230px; }
	.jdh_solgrid > article > [class*="--illust"] img { padding: 24px 14px 200px; }
}
@media all and (max-width: 768px) {
	.jdh_solgrid { --sg-pad: 24px; }
	.jdh_solgrid > article,
	.jdh_solgrid > article.is-active { flex-basis: 62%; }
}
@media all and (max-width: 640px) {
	/* 한 장이 화면을 거의 채우고 다음 장이 살짝 보이는 폭 — 옆에 더 있다는 게 드러난다 */
	.jdh_solgrid > article,
	.jdh_solgrid > article.is-active { flex-basis: 80%; }
	/* 카드가 화면 폭을 거의 채우므로 최소 높이를 낮춘다(사진 전면 + 글 오버레이는 그대로) */
	.jdh_solgrid > article,
	.jdh_solgrid > article.is-active { min-height: 420px; }
	.jdh_solgrid > article > [class*="--device"] img { padding: 22px 18px 190px; }
	.jdh_solgrid > article > [class*="--illust"] img { padding: 26px 16px 180px; }
	.jdh_solgrid > article > [class*="__body"] { padding: 22px 20px 20px; }
	.jdh_solgrid > article [class*="__name"] { font-size: 20px; margin-bottom: 12px; padding-bottom: 12px; }
	.jdh_solgrid > article [class*="__txt"] { font-size: 14.5px; }
	.jdh_solgrid > article [class*="__tags"] { padding-top: 12px; gap: 4px 18px; }
	.jdh_solgrid > article [class*="__tags"] i { font-size: 13.5px; }
}
@media all and (max-width: 480px) {
	.jdh_solgrid { --sg-pad: 18px; }
	.jdh_solgrid > article,
	.jdh_solgrid > article.is-active { flex-basis: 84%; }
}