/* =========================================================================
   seran-price.css — 비급여 수가표(page /price/) 전용 스킨

   모듈: price-page — 소유 파일. 마크업은 scripts/migrate/11-price.php 가 만든다.

   로드 순서 (중요):
     clinic-skin-style(style.css) → seran-tokens → **seran-price**
     `seran-tokens.css` 의 `.seran-prose` 표 기본값 위에 얹는다. 겹치는 규칙은
     전부 `.seran-price` 스코프를 한 겹 더 두어 특정도로 이기게 했다
     (인큐 순서가 흔들려도 결과가 같도록). 배선은 _wiring/price-page.md.

   원칙 (CONTRACT-FRONT.md):
     · 색·간격·글꼴은 `var(--seran-*)` 토큰만 쓴다. 하드코딩 hex 0건. (§0-4)
     · Brizy 클래스·인라인 style 을 되살리지 않는다. (§0-1)
     · 모바일 우선. 표는 가로 스크롤 컨테이너 + 첫 열 고정.
     · `.seran-prose` 래퍼가 배선되지 않아도 혼자 읽힌다 (자립형 컨테이너).

   구조 (11-price.php 렌더):
     .seran-price
       └ header.seran-price__hero          (tag · h1 · lead · meta)
       └ section.seran-price__group ×6
           ├ h2.seran-price__group-title    (span.seran-price__num + 그룹명)
           └ div.seran-price__scroll        (role=region tabindex=0)
               └ table.seran-price__table
                   ├ caption                (시각적으로 숨김 — 표 이름)
                   ├ thead th / th.price-col.num
                   └ tbody th[scope=row](+span.desc) / td.price.num(+span.unit)
       └ aside.seran-price__notes           (h2 + ul > li > span.seran-price__bullet)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. 컨테이너
------------------------------------------------------------------------- */

.seran-price {
	/* 고정 헤더(.seran-hd, 스크롤 시 --sl-bar-h-sm) 아래에 표 머리글이 붙게 한다.
	   layout-pack 이 없으면 56px 폴백. 값 자체는 색이 아니라 치수이므로 토큰 규약에
	   어긋나지 않는다(_wiring/price-page.md §5-3 참조). */
	--seran-price-sticky-top: var(--sl-bar-h-sm, 56px);
	--seran-price-pad-x: 20px;

	box-sizing: border-box;
	max-width: var(--seran-content-width, 1120px);
	margin: 0 auto;
	padding: var(--seran-section, 64px) var(--seran-price-pad-x);
	font-family: var(--seran-font);
	font-size: var(--seran-fs-base);
	line-height: var(--seran-lh);
	color: var(--seran-ink);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.seran-price *,
.seran-price *::before,
.seran-price *::after {
	box-sizing: border-box;
}

/* `.seran-prose` 래퍼(page.php · page-template 모듈)가 붙은 경우 — 컨테이너가 두 겹이
   되므로 폭·좌우 여백을 바깥에 양보한다.

   루트에 함께 붙는 `.seran-prose__wide` 는 **prose-css 모듈 소유의 훅**이다
   (`seran-prose.css` 가 `.seran-prose .seran-prose__wide{max-width:none;
   margin-inline:calc(-1*var(--prose-bleed))}` 로 산문 컬럼 밖으로 빼낸다).
   같은 클래스를 여기서 다시 선언하면 같은 특정도로 부딪히므로 **선언하지 않는다.**
   래퍼가 없을 때의 폭은 위 `.seran-price` 자신이 잡는다. */
.seran-prose > .seran-price {
	max-width: none;
	padding-inline: 0;
	padding-block: var(--seran-gap-lg, 32px);
}

/* -------------------------------------------------------------------------
   2. 히어로
------------------------------------------------------------------------- */

.seran-price__hero {
	max-width: var(--seran-content-width);
	margin: 0 auto var(--seran-gap-lg, 32px);
	padding-bottom: var(--seran-gap-lg, 32px);
	border-bottom: 1px solid var(--seran-line);
	text-align: center;
}

.seran-price .seran-price__tag {
	display: inline-block;
	margin: 0 0 16px;
	padding: 4px 14px;
	border: 1px solid var(--seran-olive);
	border-radius: 999px;
	font-size: var(--seran-fs-xs);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--seran-olive-dark);
}

.seran-price .seran-price__headline {
	margin: 0 0 10px;
	font-family: var(--seran-font-display);
	font-size: var(--seran-fs-h1);
	font-weight: 500;
	line-height: var(--seran-lh-tight);
	letter-spacing: -0.02em;
	color: var(--seran-ink);
}

.seran-price .seran-price__lead {
	margin: 0;
	font-size: var(--seran-fs-lg);
	line-height: 1.6;
	color: var(--seran-ink-2);
}

.seran-price .seran-price__meta {
	margin: 18px 0 0;
	font-size: var(--seran-fs-sm);
	color: var(--seran-ink-3);
}

/* -------------------------------------------------------------------------
   3. 그룹 (표 한 벌 = 한 섹션)

   `overflow:hidden` 으로 모서리를 자르지 않는다 — 스크롤 컨테이너가 생기면
   `position:sticky` 한 표 머리글이 화면이 아니라 이 상자에 붙어 버려
   "고정 헤더"가 무력화된다. 대신 `border-collapse:separate` 로 셀에 반경을 준다.
------------------------------------------------------------------------- */

/* 폭 상한 — 바깥 래퍼(`.seran-prose__wide` 의 bleed 등)가 아무리 넓어져도
   2열 표가 늘어나 항목과 금액이 멀어지지 않게 한다. */
.seran-price__group {
	max-width: var(--seran-content-width);
	margin: 0 auto var(--seran-gap-lg, 32px);
	background: var(--seran-bg);
	border: 1px solid var(--seran-line);
	border-radius: var(--seran-radius);
}

.seran-price .seran-price__group-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 18px 22px;
	background: var(--seran-bg-mega);
	border-bottom: 1px solid var(--seran-line);
	border-radius: calc(var(--seran-radius) - 1px) calc(var(--seran-radius) - 1px) 0 0;
	font-family: var(--seran-font-display);
	font-size: var(--seran-fs-h3);
	font-weight: 500;
	line-height: var(--seran-lh-tight);
	letter-spacing: -0.015em;
	color: var(--seran-ink);
	text-align: left;
}

.seran-price__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--seran-grad-orange, var(--seran-orange));
	color: var(--brand-secondary);
	font-family: var(--seran-font);
	font-size: var(--seran-fs-xs);
	font-weight: 700;
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   4. 스크롤 컨테이너

   데스크톱에서는 overflow 를 만들지 않는다 — `overflow-x:auto` 는 세로축까지
   스크롤 컨테이너로 만들어(`overflow-y` 가 visible 로 남지 못한다) 표 머리글
   sticky 를 죽인다. 좁은 화면에서만 가로 스크롤을 켜고, 그 대신 첫 열을 고정한다.
------------------------------------------------------------------------- */

.seran-price__scroll {
	overflow: visible;
}

.seran-price__scroll:focus-visible {
	outline: 2px solid var(--seran-orange);
	outline-offset: 2px;
	border-radius: var(--seran-radius);
}

/* -------------------------------------------------------------------------
   5. 표
------------------------------------------------------------------------- */

.seran-price .seran-price__table {
	display: table;
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--seran-fs-base);
	line-height: 1.55;
	table-layout: auto;
}

/* 표 이름 — 스크린리더 전용(그룹 제목이 시각적으로 같은 말을 하고 있다).
   시트가 실리지 않으면 그냥 보이는 캡션으로 퇴화한다(안전한 실패). */
.seran-price .seran-price__table caption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.seran-price .seran-price__table th,
.seran-price .seran-price__table td {
	padding: 14px 22px;
	border: 0;
	border-bottom: 1px solid var(--seran-line-soft);
	vertical-align: top;
	text-align: left;
}

/* 머리글 — 페이지를 스크롤해도 화면 상단(고정 헤더 아래)에 붙는다. */
.seran-price .seran-price__table thead th {
	position: sticky;
	top: var(--seran-price-sticky-top);
	z-index: 2;
	padding-top: 12px;
	padding-bottom: 12px;
	background: var(--seran-bg-soft);
	border-bottom: 1px solid var(--seran-line);
	font-family: var(--seran-font);
	font-size: var(--seran-fs-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--seran-ink-3);
	white-space: nowrap;
}

/* 항목 열 — 행 머리글. */
.seran-price .seran-price__table tbody th {
	font-weight: 400;
	color: var(--seran-ink);
}

/* 항목 부연 (구 `.desc`) */
.seran-price .seran-price__table .desc {
	display: block;
	margin-top: 4px;
	font-size: var(--seran-fs-xs);
	line-height: 1.5;
	color: var(--seran-ink-3);
}

/* 금액 열 — 우측 정렬 + 자릿수 고정 숫자. `.num` 은 마크업의 명시 훅이고
   `.price` / `.price-col` 은 seran-tokens 의 `.seran-prose` 기본값과 짝을 이룬다. */
.seran-price .seran-price__table .num,
.seran-price .seran-price__table .price,
.seran-price .seran-price__table .price-col {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.seran-price .seran-price__table td.price {
	width: 1%;
	min-width: 7.5rem;
	font-weight: 500;
	color: var(--seran-ink);
}

.seran-price .seran-price__table td.price .unit {
	margin-left: 2px;
	font-size: var(--seran-fs-xs);
	font-weight: 400;
	color: var(--seran-ink-3);
}

/* "200,000원부터 ~" 처럼 금액이 아니라 문장인 칸. */
.seran-price .seran-price__table td.price.is-text {
	font-size: var(--seran-fs-sm);
	font-weight: 400;
	color: var(--seran-ink-2);
}

/* 행 스트라이프 — sticky 셀이 아래 내용을 비추지 않도록 셀마다 배경을 준다. */
.seran-price .seran-price__table tbody > tr > th,
.seran-price .seran-price__table tbody > tr > td {
	background: var(--seran-bg);
}

.seran-price .seran-price__table tbody > tr:nth-child(even) > th,
.seran-price .seran-price__table tbody > tr:nth-child(even) > td {
	background: var(--seran-bg-soft);
}

.seran-price .seran-price__table tbody > tr:hover > th,
.seran-price .seran-price__table tbody > tr:hover > td {
	background: var(--seran-bg-warm);
}

/* 마지막 행은 그룹 테두리와 선이 겹치지 않게. */
.seran-price .seran-price__table tbody > tr:last-child > th,
.seran-price .seran-price__table tbody > tr:last-child > td {
	border-bottom: 0;
}

.seran-price .seran-price__table tbody > tr:last-child > th {
	border-bottom-left-radius: calc(var(--seran-radius) - 1px);
}

.seran-price .seran-price__table tbody > tr:last-child > td {
	border-bottom-right-radius: calc(var(--seran-radius) - 1px);
}

/* -------------------------------------------------------------------------
   6. 안내 말씀
------------------------------------------------------------------------- */

.seran-price__notes {
	max-width: var(--seran-content-width);
	margin: var(--seran-gap-lg, 32px) auto 0;
	padding: 20px 24px;
	background: var(--seran-bg-warm);
	border: 1px solid var(--seran-line-warm, var(--seran-line));
	border-radius: var(--seran-radius);
}

.seran-price .seran-price__notes-title {
	margin: 0 0 10px;
	font-family: var(--seran-font-display);
	font-size: var(--seran-fs-lg);
	font-weight: 500;
	line-height: var(--seran-lh-tight);
	color: var(--seran-ink);
}

.seran-price .seran-price__notes-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.seran-price .seran-price__notes-list > li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 1em;
	font-size: var(--seran-fs-sm);
	line-height: 1.7;
	color: var(--seran-ink-2);
}

.seran-price .seran-price__notes-list > li:last-child {
	margin-bottom: 0;
}

/* 글머리 문자는 원문 그대로 두되(원고 대조 도구가 "· …" 를 통째로 찾는다)
   위치만 안쪽 여백으로 빼고 스크린리더에서는 감춘다(aria-hidden). */
.seran-price__bullet {
	position: absolute;
	left: 0;
	color: var(--seran-orange);
}

.seran-price .seran-price__notes-list strong {
	font-weight: 700;
	color: var(--seran-ink);
}

/* -------------------------------------------------------------------------
   7. 좁은 화면 — 가로 스크롤 + 첫 열 고정

   2열 표라 보통은 넘치지 않는다. `min-width` 를 화면보다 작게 잡아 평소에는
   스크롤이 생기지 않고, 항목명이 길거나 사용자가 글자를 키웠을 때만
   금액 열이 찌그러지는 대신 가로로 스크롤된다. 그때 항목명은 왼쪽에 고정된다.
------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.seran-price {
		--seran-price-pad-x: 16px;

		/* 아래에서 스크롤 컨테이너(overflow-x)가 생기면 sticky 의 기준이 화면이 아니라
		   그 상자가 된다. 그 상태로 오프셋을 남기면 표 머리글이 상자 안에서 56px 아래로
		   밀려 첫 행을 덮어 버린다(첫 항목이 사라진 것처럼 보인다). 0 으로 되돌린다. */
		--seran-price-sticky-top: 0px;

		padding-block: var(--seran-gap-lg, 32px);
	}

	.seran-price .seran-price__group-title {
		gap: 10px;
		padding: 14px 16px;
		font-size: var(--seran-fs-lg);
	}

	.seran-price__num {
		width: 28px;
		height: 28px;
	}

	.seran-price .seran-price__scroll {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		border-radius: 0 0 calc(var(--seran-radius) - 1px) calc(var(--seran-radius) - 1px);
	}

	.seran-price .seran-price__table {
		min-width: 18rem;
	}

	.seran-price .seran-price__table th,
	.seran-price .seran-price__table td {
		padding: 12px 16px;
		font-size: var(--seran-fs-sm);
	}

	/* 첫 열(항목) 고정 — 가로로 밀어도 무엇의 금액인지 보인다. */
	.seran-price .seran-price__table thead th:first-child,
	.seran-price .seran-price__table tbody > tr > th {
		position: sticky;
		left: 0;
		z-index: 1;
		box-shadow: 1px 0 0 var(--seran-line-soft);
	}

	.seran-price .seran-price__table thead th:first-child {
		z-index: 3; /* 세로 고정 머리글 × 가로 고정 첫 열 = 모서리 칸 */
	}

	.seran-price .seran-price__table td.price {
		min-width: 6.5rem;
	}

	.seran-price__notes {
		padding: 16px 18px;
	}
}

/* -------------------------------------------------------------------------
   8. 인쇄 — 접수처에서 그대로 뽑아 게시할 수 있어야 한다.
      (의료법 §45 비급여 고지: 홈페이지 게시 + 원내 게시)
------------------------------------------------------------------------- */

@media print {
	.seran-price {
		max-width: none;
		margin: 0;
		padding: 0;
		font-size: 10pt;
		line-height: 1.45;
		color: var(--seran-ink);
	}

	.seran-price__hero {
		padding-bottom: 12pt;
		margin-bottom: 12pt;
	}

	.seran-price .seran-price__headline {
		font-size: 18pt;
	}

	.seran-price .seran-price__lead,
	.seran-price .seran-price__meta {
		font-size: 9pt;
	}

	/* 스크롤 컨테이너를 풀어 표 전체가 인쇄되게 한다. */
	.seran-price .seran-price__scroll {
		overflow: visible;
	}

	.seran-price .seran-price__table {
		min-width: 0;
	}

	/* 표가 여러 장에 걸치면 머리글을 매 장 반복한다. */
	.seran-price .seran-price__table thead {
		display: table-header-group;
	}

	.seran-price .seran-price__table thead th {
		position: static;
		background: transparent;
		color: var(--seran-ink);
		border-bottom: 1pt solid var(--seran-ink-3);
	}

	/* 한 항목이 페이지 경계에서 잘리지 않게. 그룹 자체는 잘려도 된다. */
	.seran-price .seran-price__table tr {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.seran-price__group {
		border-color: var(--seran-ink-3);
		page-break-inside: auto;
		break-inside: auto;
	}

	.seran-price .seran-price__group-title {
		background: transparent;
		border-bottom: 1pt solid var(--seran-ink-3);
		page-break-after: avoid;
		break-after: avoid;
	}

	.seran-price__num {
		background: transparent;
		color: var(--seran-ink);
		border: 1pt solid var(--seran-ink-3);
	}

	/* 잉크를 아끼고 대비를 살린다 — 스트라이프·호버 제거. */
	.seran-price .seran-price__table tbody > tr > th,
	.seran-price .seran-price__table tbody > tr > td,
	.seran-price .seran-price__table tbody > tr:nth-child(even) > th,
	.seran-price .seran-price__table tbody > tr:nth-child(even) > td,
	.seran-price .seran-price__table tbody > tr:hover > th,
	.seran-price .seran-price__table tbody > tr:hover > td {
		background: transparent;
		position: static;
		box-shadow: none;
	}

	.seran-price__notes {
		background: transparent;
		border-color: var(--seran-ink-3);
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.seran-price__bullet {
		color: var(--seran-ink);
	}
}