/*! * seran-prose.css — 본문(산문) 지면 스타일시트 (모듈: prose-css) * * 소유 계약: assets/css/seran-prose.css · _wiring/prose-css.md * * 무엇을 위한 시트인가 * Brizy 를 걷어내며 scripts/migrate/07-pages.php 가 본문을 "정적화"했다. * 컨테이너(div/section/span/…)는 전면 평탄화됐고 클래스는 거의 남지 않았다 → * 지금 본문은 사실상 **p·h·img·ul·table 이 평평하게 나열된 문서**다. * 이 시트의 목표는 딱 하나: **시맨틱 HTML 만 있어도 읽을 만한 지면이 되게 한다.** * 콘텐츠 페이지(병원소개·의료진·진단서·비급여) · 증상가이드 · 공지/이벤트 본문이 * 모두 `.seran-prose` 컨테이너 하나를 공유한다. * * 원칙 (CONTRACT-FRONT.md) * §0-1 Brizy 클래스(brz-*)·토큰·엔드포인트를 되살리지 않는다. 구조만 읽고 새로 쓴다. * §0-3 인라인 style 금지. 전부 클래스 기반. * §0-4 색·반경·글꼴은 seran 디자인 토큰(assets/css/seran-tokens.css · static-pages 소유)만. * **이 파일에는 hex 리터럴이 한 개도 없다.** 투명 틴트가 필요하면 color-mix() 로 * 토큰에서 유도한다. * 모바일 우선 — 기본 규칙이 좁은 화면, 확장은 `@media (min-width:…)`. * 다크 모드 없음(라이트 전용). 토큰만 쓰므로 토큰이 바뀌면 자동으로 따라간다. * * 로드 순서 (중요 — _wiring/prose-css.md §5-1) * clinic-skin-style(style.css) → seran-tokens → **seran-prose** → seran-{layout,guide,notice,…} * `seran-tokens` 에 의존을 걸어 등록한다. * * 특정도 메모 (읽고 고칠 것) * `seran-tokens.css` §4 가 이미 `.seran-prose p{…}` `.seran-prose table{…}` 같은 * **(0,1,1)** 규칙을 들고 있다. 그래서 이 시트에서 그 값을 갈아끼우려면 * (0,1,1) 이상이 필요하다. 흐름 여백처럼 `> *` 로 걸어야 하는 규칙은 * 클래스를 두 번 적어(`.seran-prose.seran-prose > *` = (0,2,0)) 특정도를 올린다. * 반대로 **다른 모듈이 자기 클래스로 그린 표**(예: [clinician_schedule] 의 * `table.cs-matrix2`)는 건드리지 않도록, 표 규칙은 `table:not([class])` 와 * `table.seran-table` 에만 건다. * * 목차 * 1. 컨테이너 · 지역 변수 · 폭 * 2. 섹션 리듬(수직 여백) * 3. 타이포 — 제목 · 문단 · 리드 · 인용 · 강조 * 4. 링크 · 버튼(.seran-btn) * 5. 리스트 — ul/ol/중첩 · 체크리스트 · 다단 * 6. 강조 박스(.seran-callout — 정보/주의) * 7. 이미지 · figure · 아이콘 크기 이미지 * 8. 아이콘 카드 그리드(.seran-cards) * 9. 정의형 행(.seran-deflist) * 10. 표 — 래퍼 스크롤 · 반응형 카드 변환 · 숫자 정렬 * 11. 정적화 잔존 클래스 호환(비급여 수가표 등) * 12. 유틸리티 · 접근성 · prefers-reduced-motion */ /* ========================================================================= 1. 컨테이너 · 지역 변수 · 폭 `.seran-prose` 자체(최대폭·글꼴·행간)는 seran-tokens §4 가 이미 선언한다. 여기서는 그 위에 **지역 변수**를 얹고, 본문 측정폭(measure)과 넓은 요소의 breakout 을 정의한다. 전역 토큰을 새로 만들지 않는다 — 아래 --prose-* 는 `.seran-prose` 안에서만 산다. ========================================================================= */ .seran-prose { /* 본문 한 줄 길이. 한글 기준 68ch ≈ 37~40자/행. */ --prose-measure: 68ch; /* 수직 리듬 */ --prose-rhythm: 1.15em; /* 형제 요소 사이 기본 간격 */ --prose-rhythm-lg: 2.4em; /* h2 앞(=섹션 경계) */ --prose-rhythm-md: 1.8em; /* h3 앞 */ /* 넓은 요소(표·이미지·카드)가 본문 폭 밖으로 나가는 양. (100vw - 여유 - 컨테이너 폭) / 2 를 0~150px 로 자른다. 화면이 좁으면 자동으로 0 이 되므로 가로 스크롤이 생기지 않는다. 여유 56px = 컨테이너 좌우 패딩(40px) + 세로 스크롤바 보정(100vw 는 스크롤바를 포함하므로 그만큼 넘칠 수 있다). */ --prose-bleed: clamp(0px, (100vw - 56px - 100%) / 2, 150px); /* 컴포넌트 치수 */ --prose-card-min: 200px; --prose-icon: 56px; --prose-anchor-offset: 96px; /* 고정 헤더 아래로 앵커가 숨지 않게 */ /* 토큰에서 유도한 틴트 — hex 를 새로 만들지 않기 위한 color-mix 레이어 */ --prose-tint-orange: color-mix(in srgb, var(--seran-orange) 8%, transparent); --prose-tint-olive: color-mix(in srgb, var(--seran-olive) 10%, transparent); --prose-tint-error: color-mix(in srgb, var(--seran-error) 8%, transparent); --prose-hairline: color-mix(in srgb, var(--seran-line) 55%, transparent); --prose-row-hover: color-mix(in srgb, var(--seran-bg-warm) 60%, transparent); } /* 컨테이너 변형 --------------------------------------------------------- */ /* 넓은 지면 — 표·카드 위주 페이지(비급여 등). seran-tokens 가 선언한 별칭과 짝. */ .seran-prose.seran-prose--wide { max-width: var(--seran-content-width); } /* 좁은 지면 — 읽기 전용 안내문 */ .seran-prose.seran-prose--narrow { max-width: var(--prose-measure); } /* 이미 폭·패딩을 가진 부모 안에 들어갈 때(증상가이드 `.seran-guide__body`, 공지 `.seran-notice-single__body` 처럼) 이중 여백을 없앤다. → the_content 래퍼 배선에서 페이지가 아닌 글에는 이 변형을 준다. */ .seran-prose.seran-prose--flush { max-width: none; margin-inline: 0; padding-inline: 0; } /* 본문 측정폭 — 글자 블록만 68ch 로 잡고 가운데 정렬한다. 표·이미지·카드는 여기서 빠지므로 컨테이너 폭을 그대로 쓴다. (0,2,x) 로 걸어 seran-tokens §4 의 margin 선언을 이긴다. */ .seran-prose.seran-prose > :is(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6), .seran-prose.seran-prose > .seran-prose__lead, .seran-prose.seran-prose > .seran-callout { max-width: var(--prose-measure); margin-inline: auto; } /* …단, 컴포넌트는 측정폭 밖이다. 카드 그리드·정의행·표는