라 여기에 걸리지 않는다.
lazy 로 받는 두 장이 도착하기 전 흰 구멍이 뚫리던 자리다 (2026-08-25 D-19).
eager 를 늘리지 않는다 — LCP 히어로 1장 원칙 (design.md §7.2). */
figure.mosaic__cell { background: var(--color-photo-placeholder); }
.mosaic__cell img {
width: 100%;
height: 100%;
object-fit: cover;
filter: var(--photo-filter);
}
.mosaic__portrait { grid-area: portrait; }
.mosaic__sage {
grid-area: sage;
aspect-ratio: var(--aspect-square);
background: var(--color-sage);
}
.mosaic__glass { grid-area: glass; aspect-ratio: var(--aspect-card); }
/* 좁은 셀에서 중앙을 잡으면 가장 옅은 구간만 남아 빈 면처럼 보인다 */
.mosaic__glass img { object-position: center 62%; }
.mosaic__linen { grid-area: linen; aspect-ratio: 5 / 4; }
.mosaic__linen img { filter: var(--photo-filter-texture); }
.mosaic__etonne { grid-area: etonne; background: var(--color-sage-light); }
/* 컬러 블록에는 자간 넓은 라벨 한 줄만 앉힌다 — 문장·버튼·아이콘 금지 */
.mosaic__label {
position: absolute;
left: var(--space-3);
right: var(--space-3);
bottom: var(--space-3);
font-family: var(--font-family-latin), var(--font-family-kr);
font-size: var(--font-size-label);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-wordmark);
line-height: 1.3;
overflow-wrap: normal; /* body 의 anywhere 를 여기서만 되돌린다 */
}
.mosaic__sage .mosaic__label { color: var(--color-text-primary); }
.mosaic__etonne .mosaic__label { color: var(--color-brand); }
/* ── 텍스처 밴드 — 섹션의 직계 자식이다(.inner 밖) ───────────────────────
[2026-08-25 YM 회의 (8)] 그 자리 때문에 100vw 없이도 전폭이 되던 것을, 홈의 다른
사진들과 같은 폭으로 맞춘다 — .inner 와 **같은 상자 규칙**을 직접 준다.
구조를 바꿔 .inner 안으로 넣지 않는 이유: 밴드는 히어로 텍스트·모자이크가 들어 있는
그리드(.hero__grid)의 형제가 아니라 그 뒤에 오는 띠여서, 안으로 넣으면 그리드 항목이
하나 늘어난다. 상자만 맞추는 편이 판면 규칙을 덜 건드린다. */
.band {
max-width: var(--content-max-width);
margin-top: var(--space-12);
margin-inline: auto;
padding-inline: var(--gutter-inline);
height: var(--band-height);
overflow: hidden;
}
.band img {
width: 100%;
height: 100%;
object-fit: cover;
/* 원본 왼쪽이 초점 밖 여백이라 결이 살아 있는 오른쪽으로 프레임을 민다 */
object-position: 72% 45%;
filter: var(--photo-filter);
}
@media (min-width: 48em) {
.section--hero { padding-block-start: var(--space-20); }
.hero__grid {
/* 얇은 대형 헤드라인이 두 줄로 앉으려면 텍스트 칼럼이 조금 넓어야 한다 */
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
align-items: start;
}
.hero__intro { max-width: 26em; }
}
@media (min-width: 64em) {
.hero__grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--space-16);
}
.hero__headline { margin-top: var(--space-10); }
}
/* 스크롤 안내 — 괘선 + 텍스트. 화살표도 모션도 쓰지 않는다 (design.md §6) */
.scroll-cue {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding-block: var(--space-8);
font-size: var(--font-size-caption);
color: var(--color-text-muted);
}
.scroll-cue__rule {
width: clamp(2.5rem, 12vw, 4.5rem);
height: var(--border-width-hairline);
background: var(--color-border-strong);
}
/* ── definition — 항상 펼침. 접거나 캡션 크기로 축소하지 않는다 ──────────── */
.section--definition .definition__lead { margin-top: var(--space-6); }
/* ── prose ───────────────────────────────────────────────────────────────
읽기 폭은 컨테이너가 아니라 자식이 만든다 (design.md §4.3). */
.prose { margin-top: var(--space-8); }
.prose .body-text + .body-text,
.prose .prose__list + .body-text { margin-top: var(--space-5); }
/* [2026-08-25] 소제목 위 간격을 --space-10(40) → --space-5(20) 로 **절반**으로 줄였다
(사용자 로컬 비교 1차 피드백 ④). 375 전수 실측에서 시술 페이지 본문의 인접 블록 간격 중
기본 문단 간격(p↔p = 20)의 2배 이상인 자리는 이 한 규칙이 만드는 40px 뿐이었다
(본문↔소제목 3곳 · 목록↔소제목 1곳 · #aftercare 는 첫 블록이 소제목이라 lead↔미리보기도
이 값이 새어 나온다). 32px 대(1.6배)는 임계 아래라 건드리지 않았다.
⚠️ 소제목 아래 간격(.prose__h3 + .body-text = 16)보다 위가 4px 넓다 — 소제목이 뒤 문단에
붙는 관계는 유지되지만 여유가 좁다. 더 줄이려면 아래쪽을 함께 봐야 한다.
섹션 사이 리듬(--section-gap-*)은 이 변경과 무관하다. */
.prose__h3 {
margin-top: var(--space-5);
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-heading);
color: var(--color-text-primary);
}
.prose__h4 {
margin-top: var(--space-8);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
color: var(--color-text-primary);
}
.prose__h3 + .body-text,
.prose__h4 + .body-text { margin-top: var(--space-4); }
.prose__list {
margin-top: var(--space-5);
padding-inline-start: var(--space-5);
list-style: disc;
color: var(--color-text-secondary);
}
.prose__list li + li { margin-top: var(--space-2); }
.prose a { text-underline-offset: 0.2em; }
/* [2026-08-25 모바일 감사 G6] 인라인 링크·각주·참고문헌 링크의 히트 영역을 44px 로 — 글자 크기는 그대로.
inline 요소의 padding-block 은 판면을 밀지 않고 터치 영역만 넓힌다(행간 밖으로 겹침). */
.prose a,
a[data-popover] { padding-block: 0.75rem; }
a[data-popover] + a[data-popover] { margin-inline-start: 0.35em; }
/* [2026-08-25] 섹션 사진 — .compare__figure(#why-regenerative)의 판면을 그대로 받는다.
[2026-08-25 YM 회의 (8)] **폭은 본문 폭이다** — 375 에서 거터 밖까지 나가던
풀블리드(음수 margin)를 걷어냈다. 사진만 좌우 여백 없이 화면에 붙어 있는 것이
페이지 안에서 예외로 읽혔다. 자리는 eyebrow·heading·lead **아래**, 본문 **위**다 —
collapse: preview 여도 접히지 않는다 (사진이
안으로 들어가면 접힌 화면에서
섹션이 글자만 남는다). */
.prose__figure {
margin-top: var(--space-8);
aspect-ratio: var(--aspect-wide);
overflow: hidden;
background: var(--color-photo-placeholder);
}
.prose__figure img {
width: 100%;
height: 100%;
object-fit: cover;
filter: var(--photo-filter);
}
/* ── 영상 슬롯 (prose.video · steps.items[].video) ────────────────────────
[2026-08-25 YM 회의 (8)] 폭은 본문 폭이다 — .prose__figure·.compare__figure 와 함께
풀블리드(음수 margin)를 걷어냈다.
자리표시자는 클립을 아직 못 받았다는 사실을 감추지 않는다 (§1 ④) — 장식은 점선 한 겹까지(§1 ①). */
.media-slot {
margin-top: var(--space-8);
aspect-ratio: var(--aspect-wide);
overflow: hidden;
background: var(--color-surface-raised);
}
.media-slot video {
display: block;
/* 우하단 ✦ AI 워터마크는 2026-08-25 ffmpeg 재인코딩으로 파일에서 잘라냈다(우측 14%, 1280×838).
클립 비율(약 1.53:1)이 슬롯(16:9)보다 좁아 cover 가 상·하를 조금 자른다 — 중앙 구도 유지. */
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.media-slot--todo {
display: grid;
place-items: center;
/* .todo-slot 과 같은 토큰 — 미확보 자리는 한 가지 표기로 읽힌다 */
border: var(--border-width-hairline) dashed var(--color-border-strong);
}
/* 점선은 한 겹까지 (design.md §1 ①) — 바깥 자리표시자 테두리가 이미 그 역할을 한다 */
.media-slot--todo .todo-slot { border: 0; }
/* steps 항목 안에서는 카드 비율을 따른다 (.step__figure 와 같은 자리) */
.step__media {
margin-top: 0;
aspect-ratio: var(--aspect-card);
}
/* callout — 짧은 강조. 상자로 가두지 않고 괘선으로 묶는다 (design.md §1 ①) */
.prose-section--callout .prose {
padding-block: var(--space-6);
border-block: var(--border-width-hairline) solid var(--color-border-hairline);
}
/* notice — 리스크 고지·정직 안내 전용. 접지 않고 캡션색으로 축소하지 않는다 */
.prose-section--notice {
background: var(--color-notice-surface);
border-inline-start: var(--border-width-strong) solid var(--color-notice-border);
}
.prose-section--notice .prose .body-text { color: var(--color-text-primary); }
/* ── compare-table ───────────────────────────────────────────────────────
375 에서 **줄바꿈으로 들어간다 — 가로 스크롤이 생기지 않는다** (2026-08-22).
카드로 재배열하지 않는다 (design.md §6).
우열을 색으로만 표시하지 않으며 셀 안에 아이콘을 넣지 않는다. */
/* 사진이 있는 비교표 — 375 는 세로 스택, 768+ 는 사진·텍스트 2단
(m2v2-home.html 의 '왜 재생의학인가' 판면 승계).
[2026-08-25 YM 회의 (8)] 375 의 풀블리드(음수 margin)를 걷어내 본문 폭 안에 둔다. */
.compare__grid {
display: grid;
gap: var(--space-10);
}
.compare__figure {
aspect-ratio: var(--aspect-card);
overflow: hidden;
}
.compare__figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 62%;
filter: var(--photo-filter);
}
/* 표 위의 괘선(.table-label__rule)은 위·아래 공기가 같아야 한다 —
48/20 이면 라벨이 표가 아니라 앞 문단에 붙어 보인다 (2026-08-25 권이윤 5번, 이미지 02) */
.table-wrap { margin-top: var(--space-8); }
/* [2026-08-25 Q11·D-14] 표가 본문(intro) **앞**으로 왔다. 표 아래에 오는 보충 설명 블록이며,
표와의 간격은 lead → 표 간격(.table-wrap)과 같게 둔다 — 표가 두 텍스트 덩어리 사이에서
한쪽에 붙어 보이지 않게 (권이윤 5번의 대칭 원칙). 첫 자식의 자기 여백은 걷어낸다. */
.compare__body { margin-top: var(--space-8); }
.compare__body > .intro:first-child,
.compare__body > .preview:first-child > .intro:first-child,
.compare__body > .preview:first-child > .preview__clamp:first-child > .intro:first-child {
margin-top: 0;
}
/* 라벨 + 괘선 — 표가 시작하는 자리를 알리는 리듬 (design.md §7.3) */
.table-label {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.table-label__rule {
flex: 1;
height: var(--border-width-hairline);
background: var(--color-border-hairline);
}
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.ctable {
border-collapse: collapse;
width: 100%;
/* 열 폭을 내용이 아니라 규칙이 정하게 한다 — 375 에서 긴 셀이 표를 밀어내지 않는다 */
table-layout: fixed;
background: var(--color-surface-raised);
font-size: var(--font-size-small);
}
.ctable th,
.ctable td {
padding: var(--space-6) var(--space-2);
text-align: left;
vertical-align: top;
border-bottom: var(--border-width-hairline) solid var(--color-border-hairline);
}
.ctable thead th {
padding-block: var(--space-4);
font-family: var(--font-family-latin), var(--font-family-kr);
/* [2026-08-25 D-15·D-29] 12px(label) → 13px(caption). --font-size-label 은 자간을 벌린
**라틴 대문자 라벨** 전용이라 12px 가 성립하는 크기인데(design.md §2.1), 이 열 머리는
국문이라 그 전제가 없습니다. 가독성 하한(--font-size-min)에 붙어 있던 자리이기도 합니다. */
font-size: var(--font-size-caption);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-eyebrow-compact);
color: var(--color-text-muted);
border-bottom: var(--border-width-hairline) solid var(--color-border-strong);
/* 긴 열 머리는 줄바꿈으로 받는다 — nowrap 이 표를 375 밖으로 밀어내던 자리 */
white-space: normal;
word-break: keep-all;
overflow-wrap: anywhere;
}
.ctable tbody th {
position: sticky; /* 무해한 안전망 — 폭이 맞으면 스크롤 자체가 없다 */
left: 0;
width: 5rem;
background: var(--color-surface-raised);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
}
.ctable thead th:first-child {
position: sticky;
left: 0;
/* table-layout: fixed 는 **첫 행**의 폭만 봅니다 — 항목 열의 폭은 여기서 정해집니다
(tbody th 의 width 는 fixed 가 아닐 때를 위한 폴백) */
width: 5rem;
background: var(--color-surface-raised);
}
.ctable td { color: var(--color-text-secondary); }
.ctable td:last-child { color: var(--color-text-primary); }
.ctable tbody tr:last-child th,
.ctable tbody tr:last-child td { border-bottom: 0; }
.table-scroll:focus-visible { outline-offset: 0; }
@media (min-width: 48em) {
.compare__grid {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: var(--space-16);
align-items: center;
}
.compare__figure { aspect-ratio: var(--aspect-portrait); }
.table-wrap { margin-top: var(--space-12); }
.compare__body { margin-top: var(--space-12); }
.table-label { margin-bottom: var(--space-12); }
/* 폭이 넉넉해지면 항목 열을 넓힌다 — fixed 레이아웃이라 **첫 행**에 걸어야 듣는다 */
.ctable thead th:first-child { width: 10rem; }
.ctable tbody th { width: 10rem; }
}
/* ── steps — 세로 스택 + 텍스트 번호. 가로 타임라인·연결선 그래픽 없음 ────── */
.steps {
margin-top: var(--space-8);
display: grid;
gap: var(--space-8);
}
.step {
display: grid;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: var(--border-width-hairline) solid var(--color-border-hairline);
}
.step__marker {
font-family: var(--font-family-latin), var(--font-family-kr);
font-size: var(--font-size-caption);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-wordmark);
line-height: 1.4;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.step__heading {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-heading);
color: var(--color-text-primary);
}
.step__figure {
aspect-ratio: var(--aspect-card);
overflow: hidden;
}
.step__figure img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
@media (min-width: 48em) {
.step {
grid-template-columns: 9rem minmax(0, 1fr);
column-gap: var(--space-8);
}
.step__marker { grid-row: span 2; }
/* 사진·영상 자리는 같은 자리(2열)에 앉는다 — 빠지면 마커 열(9rem)로 들어가 판면이 깨진다 */
.step__figure,
.step__media { grid-column: 2; }
}
/* ── cards — 1열 세로 스택. 그림자 없음, 높이 강제 정렬 없음 ─────────────── */
.cards {
margin-top: var(--space-8);
display: grid;
gap: var(--space-8);
}
.card {
display: grid;
align-content: start;
gap: var(--space-3);
padding: var(--space-6);
background: var(--color-surface-raised);
border: var(--border-width-hairline) solid var(--color-border-hairline);
border-radius: var(--radius-lg);
}
.card__heading {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-heading);
color: var(--color-text-primary);
}
.card__body { font-size: var(--font-size-small); }
.card--link { padding: 0; }
.card__link {
display: grid;
align-content: start;
gap: var(--space-3);
padding: var(--space-6);
min-height: var(--tap-target-min);
color: inherit;
text-decoration: none;
}
.card__link .card__heading { color: var(--color-text-link); text-decoration: underline; }
.card--link:hover { border-color: var(--color-border-strong); }
.card__figure {
aspect-ratio: var(--aspect-card);
overflow: hidden;
border-radius: var(--radius-sm);
}
.card__figure img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
@media (min-width: 48em) {
.cards--grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
/* scroll 변형 — 가로 scroll-snap. JS 0 (design.md §6) */
.cards--scroll {
grid-auto-flow: column;
grid-auto-columns: minmax(15rem, 78%);
overflow-x: auto;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
padding-bottom: var(--space-2);
}
.cards--scroll > .card { scroll-snap-align: start; }
@media (min-width: 48em) {
.cards--scroll { grid-auto-columns: minmax(18rem, 40%); }
}
/* ── lineup — 부위·IV. **비교표와 같은 표 한 장**이다 (2026-08-25 YM 회의 (2)) ──
카드 다섯 장(.lineup/.line/.line__*)을 없앴으므로 그 CSS 도 남기지 않는다 —
쓰이지 않는 규칙이 남으면 다음 사람이 어느 쪽이 살아 있는지 알 수 없다
(.site-nav 드롭다운 폐기 때와 같은 처리). 판면은 .ctable 을 그대로 쓰고,
여기서는 라인 이름 열의 성격 차이 둘만 얹는다.
가격·증례 사진 필드는 여전히 존재하지 않는다. */
/* 라인 이름(Facial · On demand · Hair · IV injection)은 라틴 표기라 열 머리와 같은
폰트 스택을 준다. 비교표의 행 머리는 국문이라 이 규칙이 필요 없었다. */
.ctable--lineup tbody th {
font-family: var(--font-family-latin), var(--font-family-kr);
letter-spacing: var(--letter-spacing-heading);
}
/* 첫 열 폭 — 비교표 기본값(5rem)에서는 'IV injection' 이 세 줄로 접힌다.
⚠️ table-layout: fixed 는 **첫 행**의 폭만 보므로 thead 쪽에 걸어야 듣는다
(tbody th 의 width 는 fixed 가 아닐 때의 폴백).
375 에서 본문 폭 335px − 첫 열 104px = 231px 이 두 열에 남아 가로 스크롤이 생기지 않는다. */
.ctable--lineup thead th:first-child,
.ctable--lineup tbody th { width: 6.5rem; }
@media (min-width: 48em) {
.ctable--lineup thead th:first-child,
.ctable--lineup tbody th { width: 10rem; }
}
/* ── faq — 배타 열림(브라우저 기본 동작 · JS 0). 첫 항목 펼침 ── */
.faq { margin-top: var(--space-8); }
.faq__item { border-bottom: var(--border-width-hairline) solid var(--color-border-hairline); }
.faq__item:first-child {
border-top: var(--border-width-hairline) solid var(--color-border-hairline);
}
.faq__q {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
min-height: var(--tap-target-min);
padding-block: var(--space-4);
font-size: var(--font-size-body);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-heading);
color: var(--color-text-primary);
cursor: pointer;
list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
content: "";
flex: none;
margin-top: 0.45em;
width: 0.5em;
height: 0.5em;
border-right: var(--border-width-hairline) solid var(--color-text-muted);
border-bottom: var(--border-width-hairline) solid var(--color-text-muted);
transform: rotate(45deg);
}
.faq__item[open] .faq__q::after { transform: translateY(0.2em) rotate(-135deg); }
.faq__a {
padding-bottom: var(--space-6);
padding-right: var(--space-8);
}
.faq__a .body-text { line-height: var(--line-height-relaxed); }
/* ── references — 기본 접힘(collapse: self, 2026-08-21 결정 로그). 고지문은 목록과 같은
안에 있고 캡션색으로 축소하지 않는다. 목록은 접혀도 DOM 에 남는다 ── */
.ref-disclaimer {
margin-top: var(--space-6);
padding: var(--space-4) var(--space-5);
max-width: var(--content-max-width-prose);
background: var(--color-notice-surface);
border-left: var(--border-width-strong) solid var(--color-notice-border);
font-size: var(--font-size-small);
color: var(--color-text-primary);
}
.ref-list {
margin-top: var(--space-6);
max-width: var(--content-max-width-prose);
display: grid;
gap: var(--space-5);
padding-left: var(--space-6);
list-style: decimal;
}
.ref-item {
font-size: var(--font-size-small);
line-height: var(--line-height-body);
color: var(--color-text-secondary);
}
.ref-item__title { font-style: normal; color: var(--color-text-primary); }
.ref-item__link {
display: inline-block;
padding-block: 0.7rem; /* 히트 영역 ≈ 45px */
margin-block: -0.7rem; /* inline-block 은 마진 상자가 line box 를 정한다 — 같은 값으로 되감아 판면 간격 불변 */
}
.ref-item__ids,
.ref-item__link {
font-family: var(--font-family-numeric);
font-size: var(--font-size-caption);
}
.section__refs { margin-top: var(--space-5); }
.section__refs-label { color: var(--color-text-muted); }
/* 각주 번호는 문장 안 인라인 링크라 44px 규격의 대상이 아니지만, 캡션 크기 그대로면
손가락으로 누르기 어렵다. 패딩으로 히트 영역만 넓힌다 (줄 높이는 그대로). */
.section__refs a { padding-inline: var(--space-2); padding-block: 0.95rem; margin-block: -0.7rem; } /* 근거 줄 링크도 44px 히트 영역 (감사 R5) */
/* [2026-08-25] 근거 줄 접힘 — `collapse: preview` 섹션에서는 근거 줄이 본문 안으로
따라 들어가는데, `collapse: none` 인 섹션(#recovery-timeline)에는 접을 상자가 아예 없어
"근거 3 16 17 …" 이 절차 목록 바로 아래 본문처럼 남았다. 근거 줄만 제 몫의 작은
로 감싼다 — 컨트롤은 '더 읽기' 와 같은 .collapse 패턴(라벨 2개 + ˅ 마커)을 그대로 쓴다.
각주(note)는 접지 않는다: 시기 구분의 조건을 밝히는 고지라 절차와 같은 층에 남는다.
간격은 접기 전 .section__refs 의 margin-top(--space-5) 을 상자 쪽으로 옮겨 리듬을 지킨다. */
.collapse--section-refs { margin-top: var(--space-5); }
.collapse--section-refs > .collapse__body { margin-top: 0; }
.collapse--section-refs > .collapse__body > .section__refs { margin-top: var(--space-2); }
/* ── 각주 팝오버 — [[rN]] 마커를 누르면 하단 참고 문헌으로 내려가지 않고 각주가 제자리에서
뜬다 (2026-08-25 Q13 · 권이윤 6번, 위키백과 모바일의 하단 시트가 참고안).
375 는 화면 하단 전폭 시트, 64em 이상은 화면 하단 가운데 소형 카드다 — 마커 옆에 붙이려면
앵커 포지셔닝이 필요한데 지원이 아직 얇아 붙이지 않는다.
⚠️ 기본이 display:none 인 세 자리 중 하나다 (나머지 둘은 .fab·.fab__menu — layout.css).
popover 속성을 모르는 엔진에서는 이 가
평범한 문단으로 **본문에 34개 쏟아지기** 때문이다. 감추는 것은 같은 페이지 참고 문헌
목록의 사본이고 마커는 그 목록으로 점프하는
그대로라, 콘텐츠가 사라지는 경로가
아니다 (design.md §1 ④). 열림 상태는 @supports 안에서만 되살린다.
z-index 를 쓰지 않는다 — 열린 팝오버는 top layer 에 올라가 겹침 순서 밖이다. */
.fn-popover { display: none; }
@supports selector(:popover-open) {
.fn-popover {
position: fixed;
inset: auto 0 0 0;
margin: 0;
width: 100%;
max-width: none;
max-height: 70vh;
overflow: auto;
padding: var(--space-5) var(--gutter-inline) var(--space-4);
background: var(--color-surface-raised);
border: 0;
border-top: var(--border-width-hairline) solid var(--color-border-strong);
color: var(--color-text-primary);
}
.fn-popover:popover-open { display: block; }
@media (min-width: 64em) {
.fn-popover {
inset: auto 0 var(--space-8) 0;
margin-inline: auto;
width: min(32rem, calc(100% - 2 * var(--gutter-inline)));
border: var(--border-width-hairline) solid var(--color-border-strong);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6) var(--space-4);
}
}
}
.fn-popover__cite {
max-width: var(--content-max-width-prose);
margin-inline: auto;
font-size: var(--font-size-small);
line-height: var(--line-height-body);
color: var(--color-text-secondary);
}
.fn-popover__num {
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
}
.fn-popover__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
max-width: var(--content-max-width-prose);
margin-inline: auto;
font-size: var(--font-size-small);
}
/* 각주 안의 두 컨트롤은 44px 상자를 갖는다 — 시트 위에서 손가락으로 누르는 자리다 */
.fn-popover__actions a,
.fn-popover__close {
display: inline-flex;
align-items: center;
min-height: var(--tap-target-min);
}
.fn-popover__close {
min-width: var(--tap-target-min);
justify-content: center;
padding-inline: var(--space-3);
background: none;
border: 0;
font: inherit;
color: var(--color-text-link);
cursor: pointer;
}
/* ── doctors — 1열 스택. 시술 장면·증례 사진을 쓰지 않는다 ───────────────── */
.doctors {
margin-top: var(--space-8);
display: grid;
gap: var(--space-12);
}
.doctor {
display: grid;
gap: var(--space-3);
padding-top: var(--space-6);
border-top: var(--border-width-hairline) solid var(--color-border-hairline);
}
/* 사진 ↔ 이름 간격만 2배다 (2026-08-25 YM 회의 (7)) — grid gap 12px 에 12px 을 더해 24px.
gap 자체를 키우면 이름·직함·이력·본문 사이가 전부 벌어지므로 사진에만 여백을 준다.
48em 이상은 사진이 왼쪽 열에서 4행을 걸치므로 이 여백이 행 높이를 밀 수 있다 — 0 으로 되돌린다. */
.doctor__figure {
margin-block-end: var(--space-3);
aspect-ratio: var(--aspect-portrait);
overflow: hidden;
border-radius: var(--radius-lg);
}
.doctor__figure img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
.doctor__name {
font-size: var(--font-size-h2); /* h3 크기는 섹션 lead(23px)보다 작아 이름이 묻혔다 (2026-08-25 감사 D4) */
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-heading);
color: var(--color-text-primary);
}
.doctor__role { font-size: var(--font-size-small); color: var(--color-text-secondary); }
/* 경력 목록의 **항목 간격**을 절반으로 (8 → 4px, 2026-08-25 YM 회의 (7) — 사용자 확인:
"본문 줄간격"은 이 항목 간격을 가리킨다). 글줄의 line-height 는 건드리지 않는다. */
.doctor__credentials {
display: grid;
gap: var(--space-1);
font-size: var(--font-size-small);
color: var(--color-text-secondary);
}
.doctor__bio + .doctor__bio { margin-top: var(--space-4); }
@media (min-width: 48em) {
.doctor { grid-template-columns: 16rem minmax(0, 1fr); column-gap: var(--space-10); }
.doctor__figure { grid-row: span 4; margin-block-end: 0; }
}
/* ── 접힘 (collapse: self) ───────────────────────────────────────────────
heading·lead 는 항상 바깥이고, 내부에는 어떤 id 도 두지 않는다
(site-structure.md §4.5 — 구형 인앱 웹뷰 폴백). */
.collapse { margin-top: var(--space-6); }
.collapse__summary {
display: flex;
align-items: center;
min-height: var(--tap-target-min);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
color: var(--color-text-link);
cursor: pointer;
}
.collapse__body { margin-top: var(--space-2); }
/* ˅ 마커 — .faq__q::after 와 같은 패턴(테두리 두 변을 45° 돌린 갈매기표). 열리면 ˄ 로 뒤집힌다.
아이콘 세트를 도입하지 않는다는 §1 ②를 지키면서 '눌러서 펼치는 것'임을 표시한다.
currentColor 라 라벨 색을 그대로 따라간다 — 색 리터럴이 아니다. */
.collapse__summary::-webkit-details-marker { display: none; }
.collapse__summary::after {
content: "";
flex: none;
margin-left: var(--space-2);
width: 0.4em;
height: 0.4em;
border-right: var(--border-width-hairline) solid currentColor;
border-bottom: var(--border-width-hairline) solid currentColor;
transform: translateY(-0.15em) rotate(45deg);
}
.collapse[open] > .collapse__summary::after {
transform: translateY(0.1em) rotate(-135deg);
}
/* 라벨 2개(펼침 문구·접기 문구)를 에 함께 두고 열림 상태로 바꿔 단다 — JS 0.
CSS 가 없는 환경에서는 둘 다 보인다(콘텐츠가 사라지는 경로가 없다 — CLAUDE.md §6). */
.collapse__label--hide { display: none; }
.collapse[open] > .collapse__summary .collapse__label--show { display: none; }
.collapse[open] > .collapse__summary .collapse__label--hide { display: inline; }
/* 미리보기 접힘 (collapse: preview) — 본문의 첫 덩어리는 밖에 남고 나머지만 접힌다.
접힌 부분도 DOM 에 그대로 있다(검색·LLM 노출 유지). 는 미리보기 블록에 붙는
라벨이라 간격을 한 단계 좁힌다. 펼친 뒤 이어지는 본문은 원래 리듬 그대로다. */
.collapse--preview { margin-top: var(--space-4); }
.collapse--preview > .collapse__body > .prose,
.collapse--preview > .collapse__body > .cards,
.collapse--preview > .collapse__body > .intro { margin-top: var(--space-5); }
/* [2026-08-25 D-16·D-38] 펼친 뒤에는 접기 컨트롤이 본문 **아래**에 있어야 한다 —
위에만 있으면 다 읽고 되접으려고 다시 위로 스크롤해야 한다.
⚠️ flex 는 [open] 일 때만 건다. 를 늘 flex 컨테이너로 만들면 구형 WebKit 에서
**닫힘 상태의 콘텐츠 숨김**이 깨진 전례가 있다(layout.css 의 .site-nav summary 주석과
같은 계열의 사고). 닫힘 상태를 UA 기본에 그대로 두면 토글이 죽는 경로가 없고,
미지원 엔진에서는 접기 버튼이 지금처럼 위에 남을 뿐이다 (design.md §1 ④).
열림 상태에서는 본문이 이미 보이므로 재배치가 실패해도 잃는 것이 없다. */
.collapse--preview[open] {
display: flex;
flex-direction: column;
}
.collapse--preview[open] > .collapse__summary {
order: 1;
margin-top: var(--space-5);
}
/* [2026-08-25 D-38 · 권이윤 7번] 접힌 미리보기는 **세 줄에서 잘리고** 그 아래가 배경색으로
흐려진다 — 완결된 첫 문단이 통째로 보이면 '더 읽을 것이 있다'는 신호가 서지 않았다.
미리보기 상자(.preview)가 를 함께 품고 있어서 :has() 로 열림 상태를 위로 전달한다.
⚠️ 진보적 향상의 조건이 두 개다 (design.md §1 ④):
① -webkit-line-clamp 미지원 → 규칙째 무시되고 첫 덩어리가 지금처럼 통째로 보인다
② :has() 미지원 → **절단을 되돌릴 방법이 없으므로 애초에 걸지 않는다**.
두 조건을 한 @supports 로 묶는 이유가 이것이다 — 절단만 되고 해제가 안 되면
펼쳐도 세 줄만 보이는 콘텐츠 소실이 된다.
페이드는 opacity 초기값이 아니라 **배경색 그라데이션 오버레이**다 — 글자는 언제나 DOM 에
있고 불투명하며, 오버레이가 실패해도 잃는 것이 없다 (CLAUDE.md §10 'opacity: 0 금지').
그라데이션은 배경과 같은 색으로 끝나야 하므로 면이 다른 섹션은 --fade-bg 로 바꿔 준다. */
@supports (-webkit-line-clamp: 3) and selector(:has(> details)) {
.preview:has(> details:not([open])) > .preview__clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* clip 이지 hidden 이 아니다 — hidden 은 스크롤 컨테이너를 만들어서, 잘린 자리에 있는
각주 링크로 키보드 포커스가 가면 상자 안이 스크롤되며 글이 어긋난다(실측 확인). */
overflow: clip;
position: relative;
}
.preview:has(> details:not([open])) > .preview__clamp::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: var(--space-6);
/* transparent → 배경색. 그라데이션 보간은 프리멀티플라이드라 회색이 끼지 않는다 */
background: linear-gradient(to bottom, transparent, var(--fade-bg, var(--color-surface-page)));
pointer-events: none;
}
}
/* 면이 다른 섹션의 페이드 끝 색 — 값이 아니라 '무슨 면 위인가'를 적는다 */
.prose-section--notice { --fade-bg: var(--color-notice-surface); }
/* 참고 문헌 접힘 — 34편 목록을 기본 접는다. 는 44px 터치 타깃(.collapse__summary),
위 괘선으로 고지문·목록과의 경계를 만든다. */
.collapse--refs {
margin-top: var(--space-6);
padding-top: var(--space-2);
border-top: var(--border-width-hairline) solid var(--color-border-hairline);
}
.collapse--refs > .collapse__body { margin-top: 0; }
.collapse--refs .ref-disclaimer { margin-top: var(--space-4); }
/* [[rN]] 각주가 접힌 목록 안을 가리킬 때의 CSS 폴백(진보적 향상).
JS 가 살아 있으면 앵커 스크립트가 open 을 켜므로 이 규칙까지 오지 않는다.
::details-content 미지원 엔진에서는 규칙째 무시되고 사용자가 로 펼친다 —
접힌 상태가 기본이고 여기서 무언가를 '숨기지' 않으므로 콘텐츠 소실 경로가 없다. */
@supports selector(details::details-content) {
.collapse--refs:not([open]):has(:target)::details-content { content-visibility: visible; }
.collapse--refs:not([open]):has(:target) .collapse__label--show { display: none; }
.collapse--refs:not([open]):has(:target) .collapse__label--hide { display: inline; }
}
/* ── cta ─────────────────────────────────────────────────────────────────
화면당 CTA 는 1개. **이 섹션 안에** 고정 플로팅 버튼을 만들지 않는다 — 전역 플로팅 상담
버튼 1개(.fab)는 cta 섹션이 아니라 레이아웃이 낸다 (2026-08-25 · design.md §6). */
/* [2026-08-25 D-17] 세로 한 열. 375 에서 가로로 늘어놓으면 3번째 버튼이 혼자 다음 줄로
떨어져 '남은 것' 처럼 보였습니다. 폭은 읽기 폭까지만 — 넓은 화면에서 72rem 짜리
버튼이 되지 않게 합니다. 를 flex 로 만들어야 안의 .btn 이 칸을 채웁니다. */
.cta__actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-8);
max-width: var(--content-max-width-prose);
}
/* 를 flex 로 만들고 안의 버튼이 칸을 채우게 한다 — 그러지 않으면 세로로 쌓인 버튼의
폭이 라벨 길이대로 들쭉날쭉해진다(실렌더에서 확인). 폭은 위 max-width 가 잡는다. */
.cta__actions > li { display: flex; }
.cta__actions > li > * { flex: 1; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
/* 44px 는 접근성 하한이고 버튼의 목표 높이는 그보다 한 겹 위다 (design.md §4.4) */
min-height: var(--button-height);
padding-inline: var(--space-6);
border-radius: var(--radius-sm);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
text-decoration: none;
}
.btn--primary {
background: var(--color-brand);
color: var(--color-text-inverse);
border: var(--border-width-hairline) solid var(--color-brand);
}
.btn--primary:hover { background: var(--color-brand-strong); }
.btn--secondary {
background: var(--color-surface-raised);
color: var(--color-text-primary);
border: var(--border-width-hairline) solid var(--color-border-strong);
}
/* 링크 대상(전화번호·채널 URL)이 아직 없는 액션. 라벨은 감추지 않고 그대로 둔다.
primary 자리에 와도 브랜드 면을 칠하지 않는다 — 브랜드 면 위의 muted 글자는
대비가 무너진다(실렌더에서 확인). 눌리지 않는 버튼은 눌리지 않아 보여야 한다. */
.btn--pending {
background: var(--color-surface-raised);
border-color: var(--color-border-hairline);
color: var(--color-text-muted);
cursor: default;
}
/* ── 목차 활성 항목 (build.py 생성 — 콘텐츠의 navLabel 에서 파생) ───── */
:root:has(#what-is:target) .toc-link[data-toc="what-is"],
:root:has(#where-to-use:target) .toc-link[data-toc="where-to-use"],
:root:has(#how-to-use:target) .toc-link[data-toc="how-to-use"],
:root:has(#what-to-use:target) .toc-link[data-toc="what-to-use"],
:root:has(#how-it-works:target) .toc-link[data-toc="how-it-works"],
:root:has(#faq:target) .toc-link[data-toc="faq"] {
background: var(--color-brand-subtle);
color: var(--color-brand);
box-shadow: inset var(--border-width-strong) 0 0 0 var(--color-brand);
font-weight: var(--toc-active-weight, inherit);
}