/*!
 * seran-notice.css — 공지·이벤트 (모듈: notice-banner)
 *
 * 소유 대상 DOM (전부 자체 생성 — Brizy 클래스 0개, CONTRACT-FRONT §0-1):
 *   inc/class-seran-notice-view.php  [notice_list] .seran-nlist / [event_list] .seran-elist
 *                                    [show_event_banner_with_nav] .seran-banner
 *                                    메인 자동 팝업 .seran-notice-popup
 *   single-clinic_notice.php         .seran-notice-single
 *
 * 색·치수는 전부 seran 디자인 토큰(assets/css/seran-tokens.css · static-pages 소유)에서 온다.
 * 아래 --sn-* 는 그 토큰의 별칭(alias) 레이어이며, 토큰 시트가 아직 실리지 않은 환경에서만
 * CONTRACT-FRONT §1 에 명시된 값이 폴백으로 쓰인다. 컴포넌트 규칙은 --sn-* 만 참조한다.
 *
 * 인라인 <style> 대체본 — 구 스니펫 015/055/056 과 Brizy editor-popup 30756 이
 * 쇼트코드마다 토해내던 CSS 를 이 파일 하나로 통합했다 (CONTRACT-FRONT §0-3).
 */

/* ============================================================
   0. 토큰 별칭 레이어
============================================================ */

.seran-notice-scope {
	--sn-accent: var(--seran-orange, #f68b1a);
	--sn-accent-soft: var(--seran-orange-soft, #f6a04d);
	--sn-accent-strong: var(--seran-cta, #d76e0f);
	--sn-olive: var(--seran-olive, #a9bc0d);
	--sn-ink: var(--seran-ink, #333);
	--sn-ink-2: var(--seran-ink-2, #555);
	--sn-ink-3: var(--seran-ink-3, #888);
	--sn-line: var(--seran-line, #ddd);
	--sn-soft: var(--seran-bg-soft, #fafafa);
	--sn-warm: var(--seran-bg-warm, #fff7ef);
	--sn-paper: var(--brand-secondary, #fff);
	--sn-radius: var(--seran-radius, 12px);
	--sn-radius-lg: var(--seran-radius-lg, 20px);
	--sn-radius-pill: 999px;
	--sn-font: var(--seran-font, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif);
	--sn-wrap: 1540px;
	--sn-gap: 20px;

	/* 배너 캐러셀 — 구 015 와 동일한 프레임/간격 (JS 정렬 보정이 --sb-side 를 덮어쓴다) */
	--sn-banner-frame: 1000px;
	--sn-banner-gap: 10px;
	--sn-banner-nav-gap: 10px;
	--sn-banner-btn-h: 50px;

	box-sizing: border-box;
	color: var(--sn-ink);
	font-family: var(--sn-font);
	line-height: 1.6;
}

.seran-notice-scope *,
.seran-notice-scope *::before,
.seran-notice-scope *::after {
	box-sizing: inherit;
}

.seran-notice-scope img {
	max-width: 100%;
}

/* ============================================================
   1. 섹션 제목 — 왼쪽 주황 바 + 30px 볼드 (목록 2종 공통)
============================================================ */

.seran-nlist__heading,
.seran-elist__heading {
	margin: 0 0 30px;
}

.seran-nlist__title,
.seran-elist__title {
	position: relative;
	margin: 0;
	padding-left: 16px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.24px;
	color: var(--sn-ink);
}

.seran-nlist__title::before,
.seran-elist__title::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 30px;
	border-radius: 2px;
	background: var(--sn-accent);
	transform: translateY(-50%);
}

.seran-nlist__empty,
.seran-elist__empty {
	margin: 0;
	padding: 40px 0;
	color: var(--sn-ink-3);
	text-align: center;
}

/* 공통 CTA 필 버튼 */
.seran-nlist__button,
.seran-elist__button {
	display: inline-block;
	width: -moz-fit-content;
	width: fit-content;
	margin-top: auto;
	padding: 6px 14px;
	border: 1px solid var(--sn-accent);
	border-radius: 25px;
	background: var(--sn-accent);
	color: var(--sn-paper);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	transition: background 0.25s ease, border-color 0.25s ease;
}

/* ============================================================
   2. [notice_list] — 1열 가로 카드
============================================================ */

.seran-nlist {
	max-width: var(--sn-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.seran-nlist__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sn-gap);
}

.seran-nlist__card {
	border: 1px solid var(--sn-line);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-paper);
	padding: 20px;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.seran-nlist__card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.seran-nlist__link {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	color: inherit;
	text-decoration: none;
}

.seran-nlist__thumb {
	position: relative;
	flex: 0 0 200px;
	width: 200px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--sn-radius-lg);
	background: var(--sn-soft);
}

.seran-nlist__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.seran-nlist__thumb-empty,
.seran-elist__thumb-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--sn-ink-3);
	font-size: 13px;
}

.seran-nlist__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.seran-nlist__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.seran-nlist__tag {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 21px;
	background: var(--sn-warm);
	color: var(--sn-ink);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.seran-nlist__date {
	color: var(--sn-ink-3);
	font-size: 16px;
	white-space: nowrap;
}

.seran-nlist__card-title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--sn-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.seran-nlist__excerpt {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--sn-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.seran-nlist__card:hover .seran-nlist__button {
	background: var(--sn-accent-soft);
	border-color: var(--sn-accent-soft);
}

/* ============================================================
   3. [event_list] — 정사각 썸네일 3열 카드
============================================================ */

.seran-elist {
	max-width: var(--sn-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.seran-elist__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sn-gap);
}

.seran-elist__grid[data-columns="1"] {
	grid-template-columns: minmax(0, 1fr);
}

.seran-elist__grid[data-columns="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seran-elist__grid[data-columns="4"] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.seran-elist__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sn-line);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-paper);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.seran-elist__card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
	transform: translateY(-5px);
}

.seran-elist__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.seran-elist__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--sn-soft);
}

.seran-elist__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.seran-elist__badges {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.seran-elist__badge {
	padding: 6px 12px;
	border-radius: 15px;
	background: rgba(51, 51, 51, 0.85);
	color: var(--sn-paper);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.seran-elist__info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}

.seran-elist__card-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--sn-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.seran-elist__period {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sn-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.seran-elist__card:hover .seran-elist__button {
	background: var(--sn-accent-soft);
	border-color: var(--sn-accent-soft);
}

/* ============================================================
   4. [show_event_banner_with_nav] — 배너 캐러셀
   왼쪽 큰 배너(+네비 버튼) · 오른쪽 정사각 2칸(상단 고정 + 하단 로테이션)
   좌/우 하단 정렬은 seran-notice.js 가 --sb-side 를 계산해 맞춘다(폴백 38%).
============================================================ */

.seran-banner {
	max-width: var(--sn-banner-frame);
	margin: 0 auto;
	padding: 10px;
}

.seran-banner__row {
	display: flex;
	align-items: flex-start;
	gap: var(--sn-banner-gap);
}

.seran-banner__main {
	flex: 1 1 auto;
	min-width: 0;
}

/* 큰 배너 스테이지 — 항상 1:1 */
.seran-banner__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--sn-soft);
}

.seran-banner__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateX(100%);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.seran-banner__slide.is-active {
	z-index: 2;
	opacity: 1;
	transform: translateX(0);
}

.seran-banner__a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.seran-banner__a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 네비 버튼 목록 — 3열 랩, 고정 높이(JS 정렬식이 실측한다) */
.seran-banner__nav {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: var(--sn-banner-nav-gap);
}

.seran-banner__navbtn {
	flex: 1 0 30%;
	min-width: 0;
	height: var(--sn-banner-btn-h);
	margin: -1px 0 0 -1px;
	padding: 0 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sn-line);
	background: var(--sn-paper);
	color: var(--sn-ink-2);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	word-break: break-word;
	white-space: normal;
	cursor: pointer;
	overflow: hidden;
	transition: background 0.3s ease, color 0.3s ease;
}

.seran-banner__navbtn:hover {
	background: var(--sn-warm);
	color: var(--sn-ink);
}

.seran-banner__navbtn.is-active {
	background: var(--sn-accent);
	border-color: var(--sn-accent);
	color: var(--sn-paper);
	font-weight: 700;
}

.seran-banner__navbtn:focus-visible {
	outline: 2px solid var(--sn-accent-strong);
	outline-offset: -2px;
	z-index: 3;
}

/* 오른쪽 정사각 컬럼 (PC) */
.seran-banner__side--pc {
	flex: 0 0 var(--sb-side, 38%);
	width: var(--sb-side, 38%);
	display: flex;
	flex-direction: column;
	gap: var(--sn-banner-gap);
}

.seran-banner__square {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--sn-soft);
}

/* 로테이션 칸 — 슬라이드가 absolute 로 겹친다 */
.seran-banner__rotator > .seran-banner__slide {
	position: absolute;
	inset: 0;
}

/* 모바일 상단 2칸 — PC 에서는 숨김 */
.seran-banner__side--mobile {
	display: none;
	flex-direction: row;
	gap: var(--sn-banner-gap);
	margin-bottom: var(--sn-banner-gap);
	justify-content: space-between;
}

/* 큰 배너 1~2장 레이아웃 — 중앙 600px, 오른쪽 컬럼 없음 */
.seran-banner--single-center .seran-banner__row,
.seran-banner--double-center .seran-banner__row {
	justify-content: center;
}

.seran-banner--single-center .seran-banner__main,
.seran-banner--double-center .seran-banner__main {
	flex: 0 1 600px;
	max-width: 600px;
}

.seran-banner--single-center .seran-banner__side,
.seran-banner--double-center .seran-banner__side {
	display: none;
}

/* 큰 배너가 없고 오른쪽 정사각만 있는 경우 — 가운데 정렬 */
.seran-banner[data-count="0"] .seran-banner__row {
	justify-content: center;
}

.seran-banner[data-count="0"] .seran-banner__side--pc {
	flex: 0 0 auto;
	width: min(400px, 100%);
	margin: 0 auto;
}

@media (max-width: 800px) {
	.seran-banner {
		max-width: 100%;
	}

	.seran-banner__row {
		flex-direction: column;
		align-items: center;
	}

	.seran-banner__side--pc {
		display: none;
	}

	.seran-banner--triple-split .seran-banner__side--mobile {
		display: flex;
		width: 100%;
		max-width: 350px;
		margin: 0 auto var(--sn-banner-gap);
	}

	.seran-banner__side--mobile .seran-banner__square {
		flex: 1 0 calc((100% - var(--sn-banner-gap)) / 2);
		max-width: calc((100% - var(--sn-banner-gap)) / 2);
	}

	.seran-banner__side--mobile.is-single {
		justify-content: flex-start;
	}

	.seran-banner__side--mobile.is-single .seran-banner__square {
		flex: 1 0 100%;
		max-width: 100%;
	}

	.seran-banner__main,
	.seran-banner--single-center .seran-banner__main,
	.seran-banner--double-center .seran-banner__main {
		width: 100%;
		max-width: 350px;
		flex: 0 0 auto;
	}

	.seran-banner__navbtn {
		height: 40px;
		font-size: 12px;
	}
}

/* ============================================================
   4-1. 배너 그리드 스타일 — 콘솔 배너 스타일 'grid' 트랙
   event 그룹 + notice 그룹 (각 정사각 슬라이드쇼 + 버튼 최대 6).
   PC: 두 그룹 좌우 배치 · 버튼 3열 격자.
   모바일: 그룹 세로 스택, 각 그룹 = [배너 2 : 버튼 1] 가로 · 버튼 1열 6행.
============================================================ */

.seran-banner--grid .seran-banner-grid__wrap {
	display: flex;
	align-items: flex-start;
	gap: var(--sn-banner-gap);
}

.seran-banner-grid__group {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sn-banner-gap);
}

/* 한 그룹뿐이면 중앙 600px — classic 의 single/double-center 와 동일 프레임 */
.seran-banner--grid.is-one .seran-banner-grid__wrap {
	justify-content: center;
}

.seran-banner--grid.is-one .seran-banner-grid__group {
	flex: 0 1 600px;
	max-width: 600px;
}

/* 버튼 격자 — 바깥 위/왼쪽 선 + 각 칸 오른쪽/아래 선으로 1px 격자 */
.seran-banner-grid__nav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--sn-line);
	border-left: 1px solid var(--sn-line);
}

.seran-banner-grid__nav .seran-banner__navbtn {
	height: auto;
	min-height: var(--sn-banner-btn-h);
	margin: 0;
	padding: 6px 8px;
	border: 0;
	border-right: 1px solid var(--sn-line);
	border-bottom: 1px solid var(--sn-line);
	font-size: 14px;
	line-height: 1.25;
}

/* 빈 슬롯 — PC 에서는 그리지 않고, 모바일 1열 6행에서만 자리를 지킨다 */
.seran-banner__navbtn.is-empty {
	display: none;
	background: var(--sn-paper);
	cursor: default;
}

/* 데스크탑 — 버튼이 1~2개면 좌우로 꽉 채운다 (3개부터 3열 유지) */
@media (min-width: 801px) {
	.seran-banner-grid__nav[data-cnt="1"] {
		grid-template-columns: 1fr;
	}

	.seran-banner-grid__nav[data-cnt="2"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 800px) {
	/* 그룹 세로 스택 + 그룹 사이 구분선 */
	.seran-banner--grid .seran-banner-grid__wrap {
		flex-direction: column;
		align-items: stretch;
		gap: 5px;
	}

	.seran-banner-grid__group + .seran-banner-grid__group {
		border-top: 1px solid var(--sn-line);
	}

	/* 각 그룹: 가로 [정사각 배너 2 : 버튼 1] — 그룹 비율 3:2 로 높이를 배너 기준 고정 */
	.seran-banner-grid__group {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		aspect-ratio: 3 / 2;
	}

	.seran-banner--grid.is-one .seran-banner-grid__group {
		max-width: 100%;
	}

	.seran-banner-grid__group .seran-banner__square {
		flex: 2 1 0;
		min-width: 0;
		aspect-ratio: auto; /* 그룹 비율(3:2)이 높이를 결정 — 배너 칸은 자동으로 1:1 */
	}

	/* 버튼: 1열 6행 고정 — 그룹(=배너) 높이를 6등분, 글자가 길어도 칸이 늘지 않는다 */
	.seran-banner-grid__nav {
		flex: 1 1 0;
		min-width: 0;
		height: 100%;
		overflow: hidden;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(6, minmax(0, 1fr));
		border: 1px solid var(--sn-line);
		border-top: 0;
		border-bottom: 0;
	}

	.seran-banner__navbtn.is-empty {
		display: block;
	}

	.seran-banner-grid__nav .seran-banner__navbtn {
		min-height: 0;
		padding: 2px 4px;
		border: 0;
		border-bottom: 1px solid var(--sn-line);
		font-size: 11px;
		line-height: 1.15;
	}

	.seran-banner-grid__nav .seran-banner__navbtn:last-child {
		border-bottom: 0;
	}
}

/* ============================================================
   5. 메인 자동 팝업 (구 Brizy editor-popup 30756 대체)
============================================================ */

.seran-notice-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

.seran-notice-popup.is-open {
	display: flex;
}

.seran-notice-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 18, 14, 0.72);
	cursor: pointer;
}

.seran-notice-popup__dialog {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: min(1040px, 94vw);
	max-height: calc(100vh - 80px);
	overflow: auto;
	background: transparent;
	overscroll-behavior: contain;
}

.seran-notice-popup__stage .seran-banner {
	margin: 0 auto;
	padding: 0;
}

.seran-notice-popup__foot {
	width: 100%;
	max-width: var(--sn-banner-frame);
	margin: 8px auto 0;
	padding: 2px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.seran-notice-popup__dismiss {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--brand-secondary, #fff);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.seran-notice-popup__dismiss input {
	width: 18px;
	height: 18px;
	accent-color: var(--sn-accent);
	cursor: pointer;
}

.seran-notice-popup__close {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--brand-secondary, #fff);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.seran-notice-popup__close:hover {
	opacity: 0.75;
}

/* 대화상자 컨테이너는 포커스를 받되 링은 그리지 않는다 — 모달 자체가 이미 시각적 신호다.
   (컨트롤의 :focus-visible 링은 아래에서 그대로 유지 — 키보드 위치 표시는 접근성 요건) */
.seran-notice-popup__dialog:focus,
.seran-notice-popup__dialog:focus-visible {
	outline: none;
}

.seran-notice-popup__close:focus-visible,
.seran-notice-popup__dismiss input:focus-visible {
	outline: 2px solid var(--sn-accent);
	outline-offset: 2px;
}

/* 팝업이 열려 있는 동안 배경 스크롤 잠금 (JS 가 클래스를 붙인다) */
html.seran-notice-popup-open,
body.seran-notice-popup-open {
	overflow: hidden;
}

@media (max-width: 640px) {
	.seran-notice-popup {
		padding: 24px 14px;
	}

	.seran-notice-popup__dismiss {
		font-size: 14px;
	}
}

/* ============================================================
   6. single-clinic_notice.php — 공지·이벤트 상세 카드
============================================================ */

.seran-notice-single {
	padding: 40px 0 72px;
	background: var(--sn-paper);
}

.seran-notice-single__wrap {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 20px;
}

.seran-notice-single__crumbs {
	margin-bottom: 16px;
	font-size: 15px;
}

.seran-notice-single__crumb-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sn-ink-2);
	text-decoration: none;
	transition: color 0.2s ease;
}

.seran-notice-single__crumb-link:hover {
	color: var(--sn-accent-strong);
}

.seran-notice-single__card {
	overflow: hidden;
	border: 1px solid var(--sn-line);
	border-radius: var(--sn-radius);
	background: var(--sn-paper);
}

/* 대표이미지 — 정사각 배너 */
.seran-notice-single__banner {
	margin: 0;
	padding: 24px 24px 0;
	text-align: center;
	background: var(--sn-soft);
}

.seran-notice-single__banner img {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--sn-radius);
	display: inline-block;
}

/* 헤더 — 배지 → 제목 → 부제 → 날짜/기간 */
.seran-notice-single__head {
	padding: 20px 24px;
	border-bottom: 1px solid var(--sn-line);
	background: var(--sn-soft);
}

.seran-notice-single__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.seran-notice-single__badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--sn-radius-pill);
	background: var(--sn-accent);
	color: var(--sn-paper);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
}

.seran-notice-single__badge--event {
	background: var(--sn-olive);
}

.seran-notice-single__badge--event_menu {
	background: var(--sn-accent-soft);
}

.seran-notice-single__badge--expired {
	background: var(--sn-ink-3);
}

.seran-notice-single__title {
	margin: 12px 0 4px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--sn-ink);
	word-break: keep-all;
}

.seran-notice-single__subtitle {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sn-ink-2);
	word-break: keep-all;
}

.seran-notice-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-top: 12px;
	font-size: 14px;
	color: var(--sn-ink-3);
}

.seran-notice-single__period-label {
	margin-right: 6px;
	padding: 2px 8px;
	border: 1px solid var(--sn-line);
	border-radius: var(--sn-radius-pill);
	font-size: 12px;
}

/* 본문 — post_content 그대로. 자체 <style> 을 가진 이관 콘텐츠(id 선택자)가
   항상 이겨야 하므로 여기서는 요소 선택자 수준의 기본값만 준다. */
.seran-notice-single__body {
	padding: 24px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--sn-ink);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.seran-notice-single__body > *:first-child {
	margin-top: 0;
}

.seran-notice-single__body > *:last-child {
	margin-bottom: 0;
}

.seran-notice-single__body p {
	margin: 0 0 16px;
}

.seran-notice-single__body h2,
.seran-notice-single__body h3,
.seran-notice-single__body h4 {
	margin: 28px 0 10px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--sn-ink);
}

.seran-notice-single__body h2 {
	font-size: 22px;
}

.seran-notice-single__body h3 {
	font-size: 19px;
}

.seran-notice-single__body h4 {
	font-size: 17px;
}

.seran-notice-single__body ul,
.seran-notice-single__body ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.seran-notice-single__body li {
	margin-bottom: 6px;
}

.seran-notice-single__body img {
	height: auto;
	border-radius: var(--sn-radius);
}

.seran-notice-single__body a {
	color: var(--sn-accent-strong);
}

.seran-notice-single__body blockquote {
	margin: 20px 0;
	padding: 16px 18px;
	border: 1px solid var(--sn-line);
	border-left: 4px solid var(--sn-accent);
	border-radius: var(--sn-radius);
	background: var(--sn-soft);
	color: var(--sn-ink-2);
}

.seran-notice-single__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
}

.seran-notice-single__body th,
.seran-notice-single__body td {
	padding: 10px 12px;
	border: 1px solid var(--sn-line);
	text-align: left;
}

.seran-notice-single__body th {
	background: var(--sn-soft);
	font-weight: 700;
}

/* 넓은 표/코드가 페이지를 가로로 밀지 않게 */
.seran-notice-single__body pre {
	overflow-x: auto;
}

/* 문의처 (옵션 seran_hospital_settings.basic_info 가 있을 때만 출력) */
.seran-notice-single__contact {
	margin: 0 24px;
	padding: 16px 0;
	border-top: 1px solid var(--sn-line);
}

.seran-notice-single__contact-title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--sn-ink);
}

.seran-notice-single__contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	color: var(--sn-ink-2);
}

.seran-notice-single__contact-label {
	display: inline-block;
	min-width: 66px;
	margin-right: 8px;
	color: var(--sn-ink-3);
	font-size: 13px;
}

.seran-notice-single__contact-item a {
	color: var(--sn-accent-strong);
	font-weight: 700;
	text-decoration: none;
}

/* 해시태그 칩 */
.seran-notice-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 24px;
	padding: 16px 0 24px;
	border-top: 1px solid var(--sn-line);
}

.seran-notice-single__tag {
	display: inline-block;
	padding: 5px 12px;
	border-radius: var(--sn-radius-pill);
	background: var(--sn-warm);
	color: var(--sn-accent-strong);
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.seran-notice-single__tag:hover {
	background: var(--sn-accent-soft);
	color: var(--sn-paper);
}

/* 목록으로 돌아가기 */
.seran-notice-single__foot {
	margin-top: 28px;
	text-align: center;
}

.seran-notice-single__back {
	display: inline-block;
	padding: 12px 28px;
	border: 1px solid var(--sn-accent);
	border-radius: var(--sn-radius-pill);
	background: var(--sn-accent);
	color: var(--sn-paper);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.seran-notice-single__back:hover {
	background: var(--sn-accent-soft);
	border-color: var(--sn-accent-soft);
}

/* 이전/다음 */
.seran-notice-single__adj {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 28px;
}

.seran-notice-single__adj-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--sn-line);
	border-radius: var(--sn-radius);
	background: var(--sn-paper);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.seran-notice-single__adj-item--next {
	text-align: right;
}

a.seran-notice-single__adj-item:hover {
	border-color: var(--sn-accent);
	background: var(--sn-warm);
}

.seran-notice-single__adj-item--empty {
	background: var(--sn-soft);
	color: var(--sn-ink-3);
}

.seran-notice-single__adj-label {
	font-size: 12px;
	color: var(--sn-ink-3);
}

.seran-notice-single__adj-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ============================================================
   7. 반응형 (목록 · 상세)
============================================================ */

@media (max-width: 1024px) {
	.seran-nlist__title,
	.seran-elist__title {
		font-size: 28px;
	}

	.seran-nlist__card-title {
		font-size: 22px;
	}

	.seran-elist__grid[data-columns="4"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.seran-nlist,
	.seran-elist {
		padding: 0 16px;
	}

	.seran-nlist__title,
	.seran-elist__title {
		font-size: 24px;
	}

	.seran-nlist__grid {
		gap: 16px;
	}

	.seran-nlist__card {
		padding: 10px;
		border-radius: 16px;
	}

	.seran-nlist__link {
		gap: 12px;
	}

	.seran-nlist__thumb {
		flex: 0 0 130px;
		width: 130px;
		border-radius: 16px;
	}

	.seran-nlist__info {
		gap: 5px;
	}

	.seran-nlist__card-title {
		font-size: 20px;
	}

	.seran-nlist__excerpt,
	.seran-nlist__date {
		font-size: 14px;
	}

	.seran-elist__grid,
	.seran-elist__grid[data-columns="3"],
	.seran-elist__grid[data-columns="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.seran-notice-single {
		padding: 24px 0 48px;
	}

	.seran-notice-single__wrap {
		padding: 0 16px;
	}

	.seran-notice-single__banner,
	.seran-notice-single__head,
	.seran-notice-single__body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.seran-notice-single__contact,
	.seran-notice-single__tags {
		margin-left: 16px;
		margin-right: 16px;
	}

	.seran-notice-single__title {
		font-size: 22px;
	}

	.seran-notice-single__adj {
		grid-template-columns: minmax(0, 1fr);
	}

	.seran-notice-single__adj-item--next {
		text-align: left;
	}
}

@media (max-width: 480px) {
	.seran-nlist__tag {
		padding: 5px 10px;
		font-size: 12px;
	}

	.seran-nlist__date {
		font-size: 12px;
	}

	.seran-nlist__card-title {
		font-size: 16px;
		-webkit-line-clamp: 1;
	}

	.seran-nlist__excerpt {
		font-size: 13px;
		-webkit-line-clamp: 1;
	}

	.seran-elist__grid,
	.seran-elist__grid[data-columns="2"],
	.seran-elist__grid[data-columns="3"],
	.seran-elist__grid[data-columns="4"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
   8. 접근성 — 모션 민감 사용자
============================================================ */

@media (prefers-reduced-motion: reduce) {
	.seran-notice-scope *,
	.seran-notice-scope *::before,
	.seran-notice-scope *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.seran-banner__slide {
		transform: none;
	}
}


/* ── 커버리지 감사 보완 — 마크업에 있으나 정의가 없던 4종 ── */
.seran-notice-single__date {
	font-size: 13px;
	color: var(--seran-ink-3, #888);
	font-variant-numeric: tabular-nums;
}

.seran-notice-single__badge--notice {
	background: var(--seran-bg-mega, #f6f8f2);
	color: var(--seran-olive-dark, #87970a);
}

.seran-notice-single__crumb-arrow {
	margin: 0 6px;
	color: var(--seran-ink-3, #888);
}

.seran-notice-single__adj-item--prev {
	text-align: left;
}