/* ==========================================================================
sections/card.css — 글 카드 (목록 · 카테고리 · 검색 공용)
========================================================================== */
.c4-card {
position: relative; /* stretched link 의 기준 */
display: flex;
align-items: flex-start;
gap: var(--c4-card-gap); /* PC 썸네일 ↔ 텍스트 */
}
/* 썸네일 칸 — **항상 렌더한다.** 비우거나 생략하면 카드 높이가 흔들린다.
3단 폴백의 ③(옵션까지 비었을 때)에서는 배경색만 있는 빈 박스로 남는다. */
.c4-card__thumb {
flex-shrink: 0;
width: var(--c4-card-thumb-w);
height: var(--c4-card-thumb-h);
overflow: hidden;
border-radius: var(--c4-radius-card-img); /* 16 — 2026-10-13 사용자 지시(시안 20) */
background: var(--c4-color-img-placeholder);
}
/* 사진이 있으면 회색 바탕을 뺀다(2026-10-14 사용자 지시 '호버했다가 떼면 이미지 주변에 검은 선이 생겼다 사라짐') —
확대 · 흐림이 움직이는 동안 사진이 따로 그려지고(GPU 합성) 둥근 모서리 · 가장자리의 반투명 픽셀로 바로 뒤 회색(#BCBCBC)이 비쳐 가는 선처럼 보였다.
바탕이 없으면 그 픽셀 뒤는 카드 밖 사이트 바탕(밝은 색)이라 선이 보이지 않는다. 사진이 없는 카드(폴백 ③)는 회색 빈 칸 그대로. */
.c4-card__thumb:has(> .c4-card__img) { background: none; }
.c4-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 카드 썸네일만 고정 크롭(5:3) */
}
.c4-card__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--c4-card-text-gap);
min-width: 0;
flex: 1;
padding-top: var(--c4-card-text-pt); /* PC 만 */
}
/* 카테고리 라벨 — ★ 상세의 라벨과 줄간격이 다르다(같은 크기·굵기여도 다른 값).
통일하지 말 것. */
.c4-card__cat {
position: relative; /* stretched link 위로 올린다 */
z-index: 1;
font-size: var(--c4-fs-body2);
font-weight: var(--c4-fw-bold);
line-height: var(--c4-lh-cat-label-card);
color: var(--c4-color-accent);
}
.c4-card__cat:hover { text-decoration: underline; }
.c4-card__title {
margin: 0;
font-size: var(--c4-fs-post-title);
font-weight: var(--c4-fw-bold);
line-height: var(--c4-lh-post-title);
color: var(--c4-color-text);
/* 2줄 클램프 + 말줄임 */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/*
* ★ 카드 전체를 로 감싸지 않는다 — 안에 카테고리 링크가 또 들어가면
* 중첩 가 되어 HTML 파서가 마크업을 무너뜨린다.
* 대신 제목 링크에 오버레이를 씌운다(stretched link).
*/
.c4-card__title a::after {
content: "";
position: absolute;
inset: 0;
}
/* 키보드 포커스 링은 카드 전체(위 오버레이)에 그린다 — 제목 가 두 줄 말줄임(overflow: hidden)이라 링크 자체의 링은
바깥이 전부 잘려 안 보였다(2026-10-13 리뷰 · 가로 · 세로 · 사진 위 글 공통). */
.c4-card__title a:focus-visible { outline: none; }
.c4-card__title a:focus-visible::after {
outline: var(--c4-focus-ring-w) solid var(--c4-color-focus);
outline-offset: var(--c4-focus-ring-offset);
border-radius: var(--c4-radius-card-img);
}
/* 부제목 — 제목 위 한 줄(글 편집 화면 '부제목' · inc/subtitle.php · 2026-10-13 사용자 지시). 비면 요소가 없다. */
.c4-card__subtitle {
margin: 0;
font-size: var(--c4-fs-body2);
line-height: var(--c4-lh-body);
color: var(--c4-color-text-sub);
}
/* ==========================================================================
세로 카드 — [블로그 > 목록] '카드 모양' 세로(2026-10-13 사용자 지시 · 시안에 없는 값)
사진(5 : 3) + 왼쪽 위 카테고리 배지(포인트 컬러) → 아래 부제목 · 제목 두 줄. 목록은 PC · 태블릿 두 칸 · 모바일 한 칸.
========================================================================== */
.c4-list__cards--stack {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--c4-card-stack-gap-y) var(--c4-card-stack-gap-x);
}
.c4-card--stack {
flex-direction: column;
align-items: stretch;
gap: var(--c4-card-stack-text-gap); /* 사진 → 글 */
}
.c4-card__media { position: relative; }
.c4-card--stack .c4-card__thumb {
width: 100%;
height: auto;
aspect-ratio: var(--c4-card-thumb-ratio); /* 5 / 3 */
}
.c4-card--stack .c4-card__body {
padding-top: 0;
gap: var(--c4-card-stack-sub-gap); /* 부제목 → 제목 */
}
/* 제목 → 날짜는 따로(부제목 → 제목만 2026-10-13 사용자 지시로 1/3 줄였다). */
.c4-card--stack .c4-card__date { margin-top: var(--c4-card-stack-line-gap); }
/* 카테고리 배지 — 사진 왼쪽 위. 링크가 아니다(카드 전체가 글 링크 · 위에 겹친 오버레이가 눌림을 받는다). */
.c4-card__badge {
position: absolute;
top: var(--c4-card-badge-inset);
left: var(--c4-card-badge-inset);
z-index: 1;
padding: var(--c4-card-badge-pad);
border-radius: var(--c4-radius-tag); /* 헤더 전화예약 버튼과 같은 둥글기(2026-10-14 사용자 지시 — 처음엔 알약) */
background: var(--c4-color-accent);
color: var(--c4-color-white);
font-size: var(--c4-fs-body4);
font-weight: var(--c4-fw-bold);
line-height: var(--c4-lh-body);
pointer-events: none;
}
/* 블로그 목록('전체' 탭)에서만 — 배지를 마우스를 올렸을 때(또는 키보드로 카드에 들어왔을 때 — :has(:focus-visible) · 2026-10-14 :focus-within 에서 바꿈:
마우스로 눌러 상세로 갔다가 뒤로 오면 그 링크에 초점이 남아 마우스를 안 올렸는데도 올린 모양으로 멈춰 보였다) 사진 위쪽 가장자리에서 내려오며 보인다
(2026-10-13 사용자 지시). 마우스가 없는 기기(휴대폰 · 태블릿)는 늘 보인다 — (hover: hover) 안에서만 숨긴다.
사진 칸(.c4-card__media)이 넘침을 잘라 배지가 사진 밖에서 미끄러져 들어오는 것처럼 보인다(둥글기도 사진과 같게). */
@media (hover: hover) {
.c4-list__cards--badge-hover .c4-card__media {
overflow: hidden;
border-radius: var(--c4-radius-card-img);
}
.c4-list__cards--badge-hover .c4-card__badge {
opacity: 0;
translate: 0 calc(-100% - var(--c4-card-badge-inset));
transition: opacity var(--c4-card-badge-dur) ease, translate var(--c4-card-badge-dur) var(--c4-card-badge-ease);
}
html:not(.c4-hover-reset) .c4-list__cards--badge-hover .c4-card:hover .c4-card__badge,
.c4-list__cards--badge-hover .c4-card:has(:focus-visible) .c4-card__badge {
opacity: 1;
translate: none;
}
}
/* ==========================================================================
사진 위 글 — [블로그 > 목록] '카드 모양' 사진 위 글(2026-10-13 사용자 지시 · 시안에 없는 값)
세로 카드(.c4-card--stack)와 같은 마크업에 --overlay 를 더한다: 부제목 · 제목(· 날짜)이 사진 왼쪽 아래 검은 글자(사진을 어둡게 하지 않는다 · 사용자 지시).
오른쪽 아래 화살표(흰 동그라미 + 포인트 컬러 화살표 · 배지도 흰 바탕 + 포인트 컬러 글자) — 마우스를 올리면(또는 키보드로 카드에 들어오면) 사진 오른쪽 밖에서 왼쪽으로 들어온 뒤
좌우로 살짝 흔들린다. 마우스가 없는 기기(휴대폰 · 태블릿)는 화살표를 숨긴다(2026-10-13 사용자 지시 '모바일에선 화살표 히든').
========================================================================== */
.c4-list__cards--stack.c4-list__cards--overlay {
gap: var(--c4-card-overlay-gap-y) var(--c4-card-stack-gap-x); /* 줄 사이 = 칸 사이(사진 아래 글이 없다) */
}
/* 사진 · 글을 한 칸에 겹친다 — 글(뒤 순서)이 사진 위에 그려진다.
★ 사진 칸 · 글 칸에 position 을 주지 않는다: 제목 링크의 오버레이(::after) · 배지 · 화살표의 기준이 카드(.c4-card)로 남아야
카드 어디를 눌러도 글로 간다(글 칸이 기준이 되면 글자 둘레만 눌린다). 사진이 곧 카드라 기준이 같다. */
.c4-card--overlay {
--c4-card-arrow-room: calc(var(--c4-card-arrow-size) + var(--c4-card-arrow-gap)); /* 글 오른쪽에 비워 둘 화살표 자리 — 화살표가 없는 기기는 0(아래) */
display: grid;
overflow: hidden; /* 화살표 · 배지가 사진 가장자리 밖에서 미끄러져 들어오게 */
border-radius: var(--c4-radius-card-img);
}
.c4-card--overlay > .c4-card__media,
.c4-card--overlay > .c4-card__body { grid-area: 1 / 1; }
/* 글 칸을 늘 사진 위에(2026-10-14 '호버하면 글씨 사라지는 오류') — 마우스를 올리면 사진에 scale · filter 가 걸려 사진이 따로 쌓임 층이 되고,
그 층은 일반 글 칸보다 나중에 그려져 글을 덮었다. 그리드 칸은 position 없이도 z-index 가 먹는다 — 글 칸에 position 을 주지 않아
제목 링크 오버레이(::after) · 화살표의 기준은 그대로 카드다(위 ★). */
.c4-card--overlay > .c4-card__body { z-index: 1; }
.c4-card--overlay .c4-card__media { position: static; }
/* 포커스 링 — 카드가 넘침을 자르니 안쪽에 그리고, 어두운 사진에서도 보이게 안쪽에 흰 줄을 한 겹 더 */
.c4-card--overlay .c4-card__title a:focus-visible::after {
outline-offset: calc(var(--c4-focus-ring-w) * -1);
box-shadow: inset 0 0 0 calc(var(--c4-focus-ring-w) * 2) var(--c4-color-white);
}
.c4-card--overlay .c4-card__thumb { aspect-ratio: var(--c4-card-overlay-ratio); } /* 1 : 1 — 모바일 5 : 3 규칙보다 우선(선택자가 더 구체적) */
.c4-card--overlay .c4-card__body {
justify-content: flex-end; /* 글은 사진 아래쪽으로 */
padding: var(--c4-card-overlay-pad);
padding-right: calc(var(--c4-card-overlay-pad) + var(--c4-card-arrow-room));
}
/* 배지 — 흰 바탕 + 포인트 컬러 글자(2026-10-13 사용자 지시 "배지랑 화살표는 흰색, 글자랑 화살표는 파랑"). 사진 위에서만 — 세로 카드 · 상세 배지는 그대로.
밝은 사진에서도 흰 판이 묻히지 않게 옅은 그림자(--c4-card-chip-shadow). */
/* 배지 자리 — 사진 가장자리에서 글(부제목 · 제목)과 같은 여백(24 / 모바일 20 · 2026-10-13 사용자 지시 "특화진료 왼쪽 · 위쪽 패딩을 제목 부분과 동일하게").
위에서 내려오는 움직임(card.css 위 --badge-hover)도 이 값으로 계산된다. */
.c4-card--overlay { --c4-card-badge-inset: var(--c4-card-overlay-pad); }
.c4-card--overlay .c4-card__badge {
font-size: var(--c4-card-overlay-badge-fs); /* 14 + 2 = 16(2026-10-13 사용자 지시 '특화진료 글자 +2px') */
background: var(--c4-color-white);
color: var(--c4-color-accent);
box-shadow: var(--c4-card-chip-shadow);
}
/* 글자는 전부 검정(grey900 · 2026-10-13 사용자 지시 "dim 없애고 글자를 전부 블랙으로") — 부제목 · 날짜도 제목과 같은 색 */
.c4-card--overlay .c4-card__subtitle,
.c4-card--overlay .c4-card__title,
.c4-card--overlay .c4-card__date { color: var(--c4-color-text); }
/* 글자 크기 — 제목 32 · 부제목 20(2026-10-13 사용자 지시 · 모바일 24 · 16). 가로 · 세로 카드는 그대로. */
.c4-card--overlay .c4-card__title { font-size: var(--c4-card-overlay-title-fs); }
.c4-card--overlay .c4-card__subtitle { font-size: var(--c4-card-overlay-sub-fs); }
/* 화살표 — 제목 마지막 줄 가운데 높이(날짜가 있으면 그 줄 근처)에 맞춘다. 장식이라 눌림은 아래 링크 오버레이가 받는다. */
.c4-card__arrow {
position: absolute;
right: var(--c4-card-overlay-pad);
bottom: calc(var(--c4-card-overlay-pad) + (var(--c4-card-overlay-title-fs) * var(--c4-lh-post-title) - var(--c4-card-arrow-size)) / 2);
z-index: 1;
display: grid;
place-items: center;
width: var(--c4-card-arrow-size);
height: var(--c4-card-arrow-size);
border-radius: 50%;
background: var(--c4-color-white); /* 흰 동그라미 + 포인트 컬러 화살표(2026-10-13 사용자 지시 — 처음엔 포인트 컬러 동그라미 + 흰 화살표) */
color: var(--c4-color-accent);
box-shadow: var(--c4-card-chip-shadow);
pointer-events: none;
}
.c4-card__arrow-icon {
width: var(--c4-card-arrow-icon);
height: var(--c4-card-arrow-icon);
}
@media (hover: hover) {
.c4-card__arrow {
opacity: 0;
translate: calc(100% + var(--c4-card-overlay-pad)) 0; /* 사진 오른쪽 밖 — 카드가 넘침을 자른다 */
transition: opacity var(--c4-card-arrow-dur) ease, translate var(--c4-card-arrow-dur) var(--c4-card-arrow-ease);
}
html:not(.c4-hover-reset) .c4-card--overlay:hover .c4-card__arrow,
.c4-card--overlay:has(:focus-visible) .c4-card__arrow {
opacity: 1;
translate: none;
}
/* 화살표만 좌우로 — 동그라미는 제자리. 왼쪽 끝 ↔ 오른쪽 끝을 사인 곡선으로 오간다(가운데에서 멈칫하지 않게 — 예전에 0 지점에서 서던 것이
버벅임으로 보였다). 들어오는 동안(0.5초)에는 흔들림이 ±2 라 묻혀 보이지 않아, 들어온 뒤 흔들리는 것처럼 보인다.
will-change — 합성 레이어에서 소수점 픽셀로 움직이게(없으면 1px 단위로 끊겨 보인다). */
@media (prefers-reduced-motion: no-preference) {
html:not(.c4-hover-reset) .c4-card--overlay:hover .c4-card__arrow-icon,
.c4-card--overlay:has(:focus-visible) .c4-card__arrow-icon {
will-change: translate;
animation: c4-card-arrow-sway var(--c4-card-arrow-sway-dur) cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
}
/* 움직임 줄이기 — 미끄러지지 않고 나타나기만 */
@media (prefers-reduced-motion: reduce) {
.c4-card__arrow { translate: none; }
}
}
/* 사진 위 글 카드 — 마우스를 올리면 사진이 아주 살짝 커지며 살짝 흐려진다(이즈 아웃 — 빠르게 시작해 천천히 멈춤 · 2026-10-14 사용자 지시).
진료과목 목록 · 메인 특화진료 / 만성질환 카드가 같다. 글자는 그대로 또렷(사진만). 카드가 넘침을 자르니 흐린 가장자리는 보이지 않는다. */
.c4-card--overlay .c4-card__img {
/* 사진을 칸보다 사방 --c4-card-img-hover-bleed 만큼 크게(칸이 자른다) — 흐림(blur)은 사진 가장자리에서 바깥의 빈 곳까지 섞어 테두리가 어두워지는데,
마우스를 뗄 때 확대가 먼저 풀리며 그 어두운 테두리가 잠깐 칸 안에 보였다(2026-10-14 사용자 지시 '호버했다가 떼면 이미지 주변에 검은 선' · 실측 0.1 ~ 0.17초 · 밝기 214 → 132).
늘 칸 밖에 두면 흐림이 얼마든 보이지 않는다. 잘리는 폭은 사방 6px(칸 287 의 2%). */
width: calc(100% + var(--c4-card-img-hover-bleed) * 2);
max-width: none;
height: calc(100% + var(--c4-card-img-hover-bleed) * 2);
margin: calc(var(--c4-card-img-hover-bleed) * -1);
transition: scale var(--c4-card-img-hover-dur) var(--c4-card-img-hover-ease), filter var(--c4-card-img-hover-dur) var(--c4-card-img-hover-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
html:not(.c4-hover-reset) .c4-card--overlay:hover .c4-card__img {
scale: var(--c4-card-img-hover-zoom);
filter: blur(var(--c4-card-img-hover-blur));
}
}
/* 마우스가 없는 기기(휴대폰 · 태블릿) — 화살표를 숨기고 그 자리도 비우지 않는다(글이 오른쪽 끝까지 · 2026-10-13 사용자 지시) */
@media (hover: none) {
.c4-card--overlay { --c4-card-arrow-room: 0px; }
.c4-card__arrow { display: none; }
}
@keyframes c4-card-arrow-sway {
from { translate: calc(var(--c4-card-arrow-sway) * -1) 0; }
to { translate: var(--c4-card-arrow-sway) 0; }
}
/* ==========================================================================
세 칸 카드 — [블로그 > 목록] '카드 모양' 세 칸 카드(2026-10-14 사용자 지시 "닥터노트 목록 페이지만 3열로" · 참고 그림)
사진 16 : 9(둥글게) → 카테고리(글자 · 포인트 컬러) → 제목 두 줄 → 요약 세 줄 → 작성일. 세로 카드(--stack)의 칸 배치(넓은 목록 세 칸 · 휴대폰 한 칸)를 그대로 쓴다.
★ 제목 → 요약 · 요약 → 작성일 여백은 처음 안(14 · 20)의 절반(같은 날 사용자 지시 "1/2 로 축소") · 병원 이름 없이 작성일만.
========================================================================== */
.c4-list__cards--stack.c4-list__cards--note { gap: var(--c4-card-note-gap-y) var(--c4-card-note-gap-x); }
.c4-card--stack.c4-card--note { gap: var(--c4-card-note-text-gap); } /* 사진 → 카테고리(세로 카드 휴대폰 규칙보다 우선) */
.c4-card--note .c4-card__thumb { aspect-ratio: var(--c4-card-note-ratio); border-radius: var(--c4-card-note-radius); }
.c4-card--note .c4-card__img { transition: scale var(--c4-card-img-hover-dur) var(--c4-card-img-hover-ease); }
/* 글 칸 — [카테고리 ······ 작성일](한 줄 · 작성일 오른쪽 · 2026-10-14 사용자 지시 '날짜를 카테고리 라인으로 올리고 우측 정렬') → 제목 → 요약. 마크업 순서(작성일이 맨 끝)는 그대로 두고 칸 자리만 옮긴다. */
.c4-card--note .c4-card__body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-content: start; /* 같은 줄 옆 카드보다 요약이 짧아도 제목이 내려가지 않게(남는 높이는 아래로 · 2026-10-15 검증) */
gap: 0;
}
.c4-card--note .c4-card__body > * { grid-column: 1 / -1; }
.c4-card--note .c4-card__body > .c4-card__cat { grid-column: 1; grid-row: 1; justify-self: start; align-self: baseline; }
.c4-card--note .c4-card__cat {
margin-bottom: var(--c4-card-note-cat-gap);
font-size: var(--c4-card-note-cat-fs);
line-height: var(--c4-lh-body);
}
.c4-card--note .c4-card__title {
font-size: var(--c4-card-note-title-fs);
line-height: var(--c4-card-note-title-lh);
letter-spacing: -.02em;
word-break: keep-all;
overflow-wrap: break-word;
}
.c4-card__excerpt {
margin: var(--c4-card-note-excerpt-gap) 0 0;
font-size: var(--c4-card-note-excerpt-fs);
line-height: var(--c4-card-note-excerpt-lh);
color: var(--c4-color-text-sub);
word-break: keep-all;
overflow-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2; /* 두 줄까지 · 넘치면 말줄임(2026-10-15 사용자 지시 '최대 2줄 · 이상은 말줄임' — PC 도 · 그 전 PC 세 줄) */
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.c4-card--note .c4-card__body > .c4-card__date {
grid-column: 2;
grid-row: 1;
align-self: baseline; /* 카테고리 글자와 바닥선을 맞춘다 */
margin: 0 0 var(--c4-card-note-cat-gap) var(--c4-card-note-date-gap); /* 아래 = 카테고리 → 제목 간격과 같게 · 왼쪽 = 긴 카테고리와 붙지 않게 */
font-size: var(--c4-card-note-date-fs);
line-height: var(--c4-lh-body);
color: var(--c4-color-text-muted);
text-align: right;
white-space: nowrap;
}
/* 마우스를 올리면 사진만 살짝 확대(메인 닥터노트와 같은 결 · 흐림 없음) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
html:not(.c4-hover-reset) .c4-card--note:hover .c4-card__img { scale: var(--c4-main-note-zoom); }
}
@media (max-width: 767.98px) {
.c4-list__cards--stack.c4-list__cards--note { gap: var(--c4-card-note-gap-y-m); }
.c4-card--stack.c4-card--note { gap: var(--c4-card-note-text-gap-m); }
.c4-card--note .c4-card__cat { font-size: var(--c4-card-note-cat-fs-m); }
.c4-card--note .c4-card__title { font-size: var(--c4-card-note-title-fs-m); }
.c4-card__excerpt { font-size: var(--c4-card-note-excerpt-fs-m); } /* 휴대폰 글자 15 · 두 줄은 PC 와 같다(위) */
.c4-card--note .c4-card__date { font-size: var(--c4-card-note-date-fs-m); }
}
/* 날짜 — ★ 상세 화면의 날짜와 크기·굵기·색이 모두 다르다. 같은 토큰을 쓰지 말 것. */
.c4-card__date {
font-size: var(--c4-fs-body4);
font-weight: var(--c4-fw-regular);
line-height: var(--c4-lh-body);
color: var(--c4-color-text-faint);
}
@media (max-width: 767.98px) {
.c4-card {
flex-direction: column;
gap: var(--c4-card-gap-m); /* 썸네일 위 → 텍스트 12 */
/*
* ★★ align-items 를 stretch 로 되돌린다. 위의 flex-start 는 **가로 배치**일 때
* 썸네일과 텍스트의 세로 정렬을 잡으라고 준 값인데, 방향이 column 으로 바뀌면
* 같은 속성이 **가로 폭**을 지배해 본문 칸이 글자 폭만큼 쪼그라든다.
* (327 이어야 할 본문이 241 이 되어 제목이 한 박자 일찍 줄바꿈된다.)
* 썸네일은 width:100% 를 따로 갖고 있어 멀쩡해 보이므로 눈에 잘 안 띄고,
* CSS 에러도 나지 않는다.
*/
align-items: stretch;
}
.c4-card__thumb {
width: 100%;
height: auto;
aspect-ratio: var(--c4-card-thumb-ratio); /* 5 / 3 */
}
/* 모바일은 상단 패딩이 없다 — 썸네일과의 간격 12 가 그 역할을 한다. */
.c4-card__body { padding-top: 0; }
.c4-list__cards--stack {
grid-template-columns: minmax(0, 1fr);
gap: var(--c4-card-stack-gap-y-m);
}
/* 사진 위 글 카드(진료과목 목록)는 휴대폰에서도 두 칸(2026-10-15 사용자 지시 '이미지를 전부 2열로') — 카드가 약 160 이라 글자 · 여백을 줄인다 */
.c4-list__cards--stack.c4-list__cards--overlay {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--c4-card-overlay-2col-gap-m);
}
.c4-list__cards--overlay .c4-card--overlay {
--c4-card-overlay-title-fs-m: var(--c4-card-overlay-2col-title-fs-m);
--c4-card-overlay-sub-fs-m: var(--c4-card-overlay-2col-sub-fs-m);
--c4-card-overlay-pad-m: var(--c4-card-overlay-2col-pad-m);
--c4-card-arrow-room: 0px; /* 작은 카드 — 오른쪽 아래 화살표를 빼고 그 자리도 글에 */
}
.c4-list__cards--overlay .c4-card__arrow { display: none; }
.c4-list__cards--overlay .c4-card__badge { display: none; }
/* 진료과목 '전체' 탭만 1열 · 사진 2 : 1(2026-10-15 사용자 지시 '모바일에서만 진료과목 전체 탭만 1열 · 카드 비율 2x1' — 분류 탭은 위 2열 정사각 그대로) · 글자 · 여백은 메인 휴대폰 카드와 같게 */
.c4-list__cards--stack.c4-list__cards--overlay.c4-list__cards--all {
grid-template-columns: minmax(0, 1fr);
gap: var(--c4-card-overlay-all-gap-m);
}
.c4-list__cards--all .c4-card--overlay {
--c4-card-overlay-ratio: var(--c4-card-overlay-all-ratio-m);
--c4-card-overlay-title-fs-m: var(--c4-card-overlay-all-title-fs-m);
--c4-card-overlay-sub-fs-m: var(--c4-card-overlay-all-sub-fs-m);
--c4-card-overlay-pad-m: var(--c4-card-overlay-all-pad-m);
} /* 사진 위 분류 배지 숨김 — 진료과목 이미지 카드 전부(2026-10-15 사용자 지시 '모바일에서는 진료과목 이미지 카드 위의 배지 전부 히든' · 메인 카드는 main.css 에서 이미) */
.c4-list__cards--overlay .c4-card__subtitle,
.c4-list__cards--overlay .c4-card__title { word-break: keep-all; } /* 낱말 가운데서 접히지 않게('질 / 병' · '관 / 절염') */
.c4-card--stack { gap: var(--c4-card-gap-m); } /* 사진 → 글 12 — 가로 카드 모바일과 같다 */
/* 사진 위 글 — 가장자리 여백 20(배지 자리도 같은 값) */
.c4-card--overlay { --c4-card-badge-inset: var(--c4-card-overlay-pad-m); }
.c4-card--overlay .c4-card__body {
padding: var(--c4-card-overlay-pad-m);
padding-right: calc(var(--c4-card-overlay-pad-m) + var(--c4-card-arrow-room));
}
.c4-card--overlay .c4-card__title { font-size: var(--c4-card-overlay-title-fs-m); }
.c4-card--overlay .c4-card__subtitle { font-size: var(--c4-card-overlay-sub-fs-m); }
.c4-card__arrow {
right: var(--c4-card-overlay-pad-m);
bottom: calc(var(--c4-card-overlay-pad-m) + (var(--c4-card-overlay-title-fs-m) * var(--c4-lh-post-title) - var(--c4-card-arrow-size)) / 2);
}
}