/**
 * Clinic Skin — 주의사항 인쇄 (화면 버튼 + A4 시트)
 *
 * 화면: .cprn-btn — 상세 페이지 히어로/하단에 JS 가 꽂는 인쇄 버튼.
 * 인쇄: #cprn-sheet — JS 가 본문을 복제해 만든 A4 한 장짜리 시트. 이것만 인쇄하고
 *       나머지(헤더·CTA·푸터·FAB)는 감춘다. 시트가 만들어졌을 때만(body.cprn-on)
 *       감추므로, 스크립트가 죽어도 인쇄가 백지가 되지는 않는다.
 *
 * 색은 텍스트·테두리로만 낸다 — 크롬의 "배경 그래픽" 기본값이 꺼짐이라
 * background-color 에 기댄 요소(불릿 등)는 종이에서 사라진다.
 */

/* ============================================================
   화면 — 인쇄 버튼
============================================================ */
.cprn-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid var(--brand-2, #d8c3b2);
	border-radius: 999px;
	background: #fff;
	color: var(--brand-accent, #7a6255);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.01em;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
	-webkit-appearance: none;
	appearance: none;
}

.cprn-btn:hover,
.cprn-btn:focus-visible {
	background: var(--brand-accent, #7a6255);
	border-color: var(--brand-accent, #7a6255);
	color: #fff;
}

.cprn-btn svg {
	width: 15px;
	height: 15px;
	flex: none;
}

/* 히어로 안내문 아래 — 히어로가 가운데 정렬이라 그대로 따라간다. */
.cprn-btn--hero { margin-top: 28px; }

/* 하단 안내문과 "전체 주의사항 보기" 사이 — 링크와 한 줄에 서지 않게 블록으로. */
.cprn-btn--foot { display: flex; margin: 0 auto 20px; }

@media (max-width: 720px) {
	.cprn-btn { padding: 10px 18px; font-size: 13px; }
}

/* ============================================================
   A4 시트 — 화면에서는 숨고, 측정할 때만 화면 밖으로 펼친다
============================================================ */
.cprn-sheet {
	display: none;
	/* A4(210mm) - 좌우 여백(15mm×2) — 인쇄 시 실제 본문 폭과 같게 맞춰 측정한다. */
	width: 180mm;
	font-family: var(--font-body, var(--sans, "Pretendard", "Noto Sans KR", sans-serif));
	font-size: 10.4pt;
	line-height: 1.55;
	color: #1c1917;
	background: #fff;
	-webkit-text-size-adjust: 100%;
}

.cprn-sheet.is-measuring {
	display: block;
	position: fixed;
	left: -20000px;
	top: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: -1;
}

.cprn-sheet * { box-sizing: border-box; }

/* --- 머리글 --- */
.cprn-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	padding-bottom: .5em;
	border-bottom: 1.4px solid #2c2521;
	margin-bottom: 1.15em;
}

.cprn-head__brand {
	font-size: 1.18em;
	font-weight: 700;
	letter-spacing: -.02em;
}

.cprn-head__logo {
	height: 9mm;
	width: auto;
	max-width: 60mm;
	object-fit: contain;
	object-position: left center;
}

.cprn-head__kicker {
	font-size: .8em;
	font-weight: 600;
	letter-spacing: .1em;
	color: #6f625b;
}

/* --- 제목 --- */
.cprn-cat {
	margin: 0 0 .35em;
	font-size: .82em;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--brand-accent, #7a6255);
}

.cprn-title {
	margin: 0 0 1.05em;
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.03em;
	color: #2c2521;
}

/* --- 본문 (복제본 — 클래스를 떼고 data-cprn 역할만 남긴다) --- */
.cprn-body { margin: 0; }
.cprn-body p { margin: 0 0 .5em; }
.cprn-body b { font-weight: 700; }
.cprn-body img { max-width: 100%; height: auto; }

.cprn-body [data-cprn~="lead"] {
	margin: 0 0 .9em;
	color: #4f4842;
}

.cprn-body h2,
.cprn-body h3,
.cprn-body h4 {
	margin: 1.15em 0 .5em;
	padding-left: .5em;
	border-left: 2.5px solid var(--brand-accent, #7a6255);
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.02em;
	color: #2c2521;
	break-after: avoid;
	page-break-after: avoid;
}

.cprn-body [data-cprn~="block"] + [data-cprn~="block"] { margin-top: 1.1em; }

.cprn-body ul,
.cprn-body ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cprn-body li {
	position: relative;
	margin: 0 0 .34em;
	padding-left: 1.05em;
	color: #35302c;
	break-inside: avoid;
	page-break-inside: avoid;
}

.cprn-body li::before {
	content: "•";
	position: absolute;
	left: .1em;
	top: 0;
	color: var(--brand-accent, #7a6255);
	font-weight: 700;
}

/* 번호 항목(b.mk)이 있는 줄은 번호가 불릿을 대신한다 (역할은 JS 가 붙인다 — :has 미지원 대비). */
.cprn-body [data-cprn~="num"]::before { content: none; }

.cprn-body [data-cprn~="mk"] {
	position: absolute;
	left: 0;
	top: 0;
	color: var(--brand-accent, #7a6255);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cprn-body [data-cprn~="sub"] { margin-left: 1.1em; }

.cprn-body [data-cprn~="cont"] {
	display: block;
	margin-top: .12em;
	color: #5b534d;
	font-size: .95em;
}

.cprn-body [data-cprn~="figure"] {
	margin: .8em 0;
	text-align: center;
	break-inside: avoid;
	page-break-inside: avoid;
}

.cprn-body [data-cprn~="figure"] img {
	max-height: 78mm;
	width: auto;
	object-fit: contain;
}

.cprn-body [data-cprn~="figure"] figcaption {
	margin-top: .35em;
	font-size: .82em;
	color: #6f625b;
}

/* 하단 안내 문구 — 배경 없이 테두리로만 (배경 그래픽 꺼짐 대비) */
.cprn-body [data-cprn~="note"] {
	margin-top: 1.1em;
	padding: .65em .85em;
	border: 1px solid #d8c3b2;
	border-radius: .3em;
	font-size: .95em;
	color: #4f4842;
	text-align: left;
	break-inside: avoid;
	page-break-inside: avoid;
}

.cprn-body [data-cprn~="note"] p { margin: 0; }
.cprn-body [data-cprn~="note"] b { color: var(--brand-accent, #7a6255); }

/* --- 꼬리말 --- */
.cprn-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	margin-top: 1.3em;
	padding-top: .55em;
	border-top: 1px solid #c9c1ba;
	font-size: .8em;
	color: #6f625b;
}

.cprn-foot__l { flex: 1 1 auto; }
.cprn-foot__r { flex: none; }

/* ============================================================
   인쇄 — 시트만 남긴다
============================================================ */
@media print {
	@page {
		size: A4;
		margin: 14mm 15mm;
	}

	html,
	body {
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
	}

	/* 시트가 만들어진 경우에만 나머지를 감춘다. */
	body.cprn-on > *:not(#cprn-sheet) { display: none !important; }

	body.cprn-on #cprn-sheet {
		display: block !important;
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		visibility: visible !important;
		z-index: auto !important;
	}

	.cprn-btn { display: none !important; }
}