/* =========================================================================
   seran-page.css — 콘텐츠 페이지 골격 (히어로 · 본문 여백 · 위젯 호스트 예외)

   모듈: page-template — 소유 파일 (CONTRACT-FRONT.md §3).
   짝이 되는 템플릿: page.php · templates/parts/seran-page-hero.php
   배선: _wiring/page-template.md (page.php 의 seran_page_assets() 가 직접 인큐)

   로드 순서
     clinic-skin-style(style.css) → seran-tokens → seran-page
     seran-tokens 를 의존으로 걸어 두었으므로 항상 그 **뒤**에 실린다.

   경계 (중요)
     본문 요소(p·h2~h6·ul·table·img·blockquote…)의 타이포는 **전부 seran-tokens.css 의
     `.seran-prose` 블록 소관**이다. 이 시트는 그 규칙을 다시 쓰지 않는다
     (CONTRACT-FRONT §3 파일 소유권 · "중복 정의 금지").
     여기서 다루는 것은 세 가지뿐이다.
       1) `.seran-page-hero`  — 페이지 제목 블록 (이 모듈이 새로 만든 마크업)
       2) `.seran-page`/`.seran-page__body` — 지면 골격과 세로 리듬
       3) `.seran-page__body--host` — 쇼트코드 위젯만 있는 지면의 본문 여백
          (그 지면은 `.seran-prose` 를 아예 붙이지 않는다 — §4 근거)
     셸의 `.seran-page--host` 는 규칙 없는 **훅 클래스**다. 나중에 호스트 지면만
     따로 손봐야 할 때 잡을 자리로 남겨 둔다.

   색은 전부 var(--seran-*) 토큰. 하드코딩 hex 없음 (CONTRACT-FRONT §0-4).
   모바일 우선 — 기본 규칙이 좁은 화면, 미디어쿼리는 min-width 로 넓힌다.
   분기점 783px 는 seran-tokens.css 의 타이포 스케일 분기(max-width:782px)와 짝이다.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. 지면 셸
------------------------------------------------------------------------- */

.seran-page {
	box-sizing: border-box;
	width: 100%;
	padding-bottom: 56px;
	font-family: var(--seran-font);
	color: var(--seran-ink);
}

@media (min-width: 783px) {
	.seran-page {
		padding-bottom: 80px;
	}
}

/* -------------------------------------------------------------------------
   2. 히어로 — 가운데 정렬 제목 + 짧은 주황 악센트 선

   구 사이트 계측(_audit/rendered/page_병원-소개.html):
     h1(가운데) → 2px 선(주황 .75 알파, 데스크톱 폭 20% / 모바일 75%) → 간격 → 리드문
   알파 .75 는 새 토큰을 만들지 않고 opacity 로 낸다(§0-4 토큰만 사용).
------------------------------------------------------------------------- */

.seran-page-hero {
	padding: 40px 20px 0;
	text-align: center;
}

@media (min-width: 783px) {
	.seran-page-hero {
		padding-top: 64px;
	}
}

.seran-page-hero__inner {
	max-width: var(--seran-content-width);
	margin-left: auto;
	margin-right: auto;
}

.seran-page-hero__title {
	margin: 0;
	font-family: var(--seran-font-display);
	font-size: var(--seran-fs-h1);
	font-weight: 500;
	line-height: var(--seran-lh-tight);
	letter-spacing: -0.01em;
	color: var(--seran-ink);
	/* 한글 줄바꿈 — 어절 단위로 끊는다. */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.seran-page-hero__rule {
	display: block;
	width: 75%;
	max-width: 220px;
	height: 0;
	margin: 20px auto 0;
	border-top: 2px solid var(--seran-orange);
	opacity: 0.75;
}

@media (min-width: 783px) {
	.seran-page-hero__rule {
		width: 20%;
		max-width: 224px;
		margin-top: 24px;
	}
}

.seran-page-hero__lede {
	max-width: var(--seran-prose-width);
	margin: 18px auto 0;
	font-size: var(--seran-fs-lg);
	line-height: var(--seran-lh);
	color: var(--seran-ink-2);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

@media (min-width: 783px) {
	.seran-page-hero__lede {
		margin-top: 24px;
	}
}

.seran-page-hero__media {
	margin: 28px auto 0;
	padding: 0;
}

@media (min-width: 783px) {
	.seran-page-hero__media {
		margin-top: 40px;
	}
}

.seran-page-hero__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--seran-radius-lg);
}

/* -------------------------------------------------------------------------
   3. 본문 컨테이너

   폭·타이포는 `.seran-prose`(seran-tokens.css)가 정한다. 여기서는 세로 여백만 준다.
   `.seran-prose` 가 쓰는 margin-inline / padding-inline 과 겹치지 않는 롱핸드만 쓴다.
------------------------------------------------------------------------- */

.seran-page__body {
	margin-top: 36px;
	margin-bottom: 0;
}

@media (min-width: 783px) {
	.seran-page__body {
		margin-top: 48px;
	}
}

/* 히어로가 없는 지면(비급여 안내처럼 본문이 자체 문서 제목을 갖는 경우)은
   본문이 곧 지면의 시작이므로 위 여백을 히어로 몫만큼 벌려 준다. */
.seran-page > .seran-page__body:first-child {
	margin-top: 40px;
}

@media (min-width: 783px) {
	.seran-page > .seran-page__body:first-child {
		margin-top: 64px;
	}
}

/* 단, 위젯 호스트는 위젯 자신의 상단 패딩이 그 몫을 한다(§4). */
.seran-page > .seran-page__body--host:first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   4. 위젯 호스트 지면 — 쇼트코드 출력만 있는 본문

   어디아프세요(`[symptom_body_map]`) · 이벤트 및 공지사항(`[notice_list][event_list]`)
   처럼 제목을 걷고 나면 본문이 쇼트코드 하나뿐인 지면.

   이 지면의 `<article>` 에는 **`.seran-prose` 를 붙이지 않는다**(page.php 가 판정).
   붙이면 `.seran-prose p`(0,1,1) 같은 산문 규칙이 위젯 자신의
   `.seran-nlist__excerpt{margin:0 0 8px}`(0,1,0) 을 이겨 카드 여백·타이포가 무너진다.
   더 센 규칙으로 되돌리려 해도(0,2,1) 이번엔 위젯 자신의 규칙까지 함께 눌린다 —
   "산문만 끄고 위젯은 살린다"는 CSS 로 표현할 수 없다.
   호스트 지면의 본문에는 산문이 애초에 없으므로 안 붙이는 것이 정답이다.

   위젯은 자체 CSS 로 폭·여백을 완비하고 있다(`.sbm` 1400px · `.seran-nlist` `--sn-wrap`).
   그래서 여기서 할 일은 히어로와의 간격을 위젯 자신의 상단 패딩에 넘기는 것뿐이다.
------------------------------------------------------------------------- */

.seran-page__body--host {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   5. 콘솔 연동 섹션 (장비 · 프로그램 · 칼럼)

   clinic-skin 콘솔이 그리는 전폭 섹션. 마크업과 내부 스타일은 콘솔 소유이고,
   여기서는 본문과의 간격만 잡는다.
------------------------------------------------------------------------- */

.seran-page__linked {
	margin-top: 56px;
}

@media (min-width: 783px) {
	.seran-page__linked {
		margin-top: 80px;
	}
}

/* -------------------------------------------------------------------------
   6. 인쇄 — 비급여 수가표를 종이로 뽑는 경우가 잦다.
------------------------------------------------------------------------- */

@media print {
	.seran-page-hero__rule,
	.seran-page__linked {
		display: none;
	}

	.seran-page {
		padding-bottom: 0;
	}
}