/*!
 * seran-layout.css — 레이아웃 팩 'seran'
 *
 *   1. 토큰 별칭          .seran-* 컴포넌트가 참조하는 --sl-* 레이어
 *   2. 헤더 상단바         .seran-hd      (스티키 64px · 로고 좌 / 1차메뉴 중앙 / 로그인 우)
 *   3. 메가 패널           .seran-mega    (풀폭 · 배너 1 + 1차별 컬럼)
 *   4. 모바일 드로어        .seran-mnav    (좌 1차 탭 / 우 2차 목록 + 하단 배너 3)
 *   5. 푸터                .seran-ft      (배경사진 + 3열 + 링크)
 *   6. 지도                .seran-map     ([naver_map])
 *
 * (플로팅 네비 .seran-fab 은 콘솔 관리형 FAB — fab.css/.pfab — 로 이관돼 제거됐다)
 *
 * 소유: layout-pack (CONTRACT-FRONT §3).
 * 색·치수는 전부 seran 디자인 토큰(assets/css/seran-tokens.css · static-pages 소유)에서 온다.
 * 아래 --sl-* 는 그 토큰의 별칭 레이어이며, 토큰 시트가 아직 실리지 않은 환경에서만
 * 계약서 §1 에 명시된 값이 폴백으로 쓰인다. 컴포넌트 규칙은 --sl-* 만 참조한다.
 * (Brizy 산 클래스·인라인 스타일 없음 — CONTRACT-FRONT §0-1·0-3)
 *
 * 모바일 분기 1280px = Seran_Layout::BREAKPOINT.
 * (구 044 mobile_break=960 승계였으나 961~1250px 에서 1차 메뉴 8개가 로고·로그인 위로
 *  겹치는 오버플로가 있어 1280 으로 상향 — 안 들어가는 폭은 햄버거+드로어로 전환)
 * 이 값을 바꾸면 클래스 상수·JS localize 값도 함께 바꿔야 한다.
 */

/* ============================================================
   1. 토큰 별칭
============================================================ */

.seran-hd,
.seran-mega,
.seran-mnav,
.seran-ft,
.seran-map {
	--sl-accent: var(--seran-orange, #f68b1a);
	--sl-accent-soft: var(--seran-orange-soft, #f6a04d);
	--sl-accent-grad: var(--seran-orange-grad, #f79a22);
	--sl-cta: var(--seran-cta, #d76e0f);
	--sl-olive: var(--seran-olive, #a9bc0d);
	--sl-ink: var(--seran-ink, #333);
	--sl-ink-2: var(--seran-ink-2, #555);
	--sl-ink-3: var(--seran-ink-3, #888);
	--sl-line: var(--seran-line, #ddd);
	--sl-paper: var(--brand-secondary, #fff);
	--sl-mega-bg: var(--seran-bg-mega, #f6f8f2);
	--sl-warm: var(--seran-bg-warm, #fff7ef);
	--sl-radius: var(--seran-radius, 12px);
	--sl-radius-lg: var(--seran-radius-lg, 20px);
	--sl-font: var(--seran-font, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif);

	/* 토큰 시트에 아직 없는 값들 — static-pages 에 신설 요청 중(_wiring/layout-pack.md §5-7).
	   토큰이 생기면 이 줄들은 자동으로 그 값을 따른다. */
	--sl-line-soft: var(--seran-line-soft, #e8e8e8);   /* 메가 컬럼·드로어 구분선 */
	--sl-hairline: var(--seran-hairline, rgba(0, 0, 0, 0.06));
	--sl-veil: var(--seran-veil-ink, rgba(51, 51, 51, 0.95)); /* 푸터 사진 위 오버레이 */
	--sl-veil-line: var(--seran-veil-line, rgba(255, 255, 255, 0.25));
	--sl-veil-ink-2: var(--seran-veil-ink-2, rgba(255, 255, 255, 0.72));

	--sl-wrap: 1520px;
	--sl-bar-h: 64px;
	--sl-bar-h-sm: 56px;
	--sl-pad-x: 24px;
	--sl-z-header: 900;
	--sl-z-drawer: 1000;
}

.seran-hd *,
.seran-mnav *,
.seran-ft * {
	box-sizing: border-box;
}

/* 스크린리더 전용 (메뉴 토글 라벨 등). */
.seran-sr {
	position: absolute !important;
	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-nav-lock,
.seran-nav-lock body {
	overflow: hidden;
}

/* ============================================================
   2. 헤더 상단바
============================================================ */

/* ============================================================
   상단 마퀴(흐르는 공지) — 팩 기본색
   마크업·동작은 Clinic_Console_Banner::render_marquee() 와 style.css 가 갖고 있다.
   여기서는 seran 지면에 어울리는 **기본값**만 준다. 콘솔(스타일 › 크롬)에서
   --chrome-marquee-* 를 지정하면 var() 가 그 값을 먼저 잡으므로 여기 값은 물러난다.
   기본색을 두는 이유: 원래 기본값(#33392a 짙은 올리브)은 arc 팩 시절 색이라
   흰 상단바 위에 얹으면 이 지면의 색과 겉돈다.
============================================================ */
.seran-body .clinic-marquee {
	background: var(--chrome-marquee-bg, var(--seran-ink, #333));
	color: var(--chrome-marquee-ink, #fff);
	font-family: var(--seran-font, "Noto Sans KR", sans-serif);
	/* 스티키 헤더(z 900) 아래 일반 흐름에 있으므로 z-index 를 다툴 일이 없다. */
	z-index: auto;
}

.seran-body .clinic-marquee-title {
	color: var(--chrome-marquee-ink, #fff);
}

.seran-body .clinic-marquee-dot {
	color: var(--chrome-marquee-dot, var(--seran-orange, #f68b1a));
	opacity: 1;
}

.seran-body .clinic-marquee-item:hover .clinic-marquee-title {
	color: var(--chrome-marquee-hover, var(--seran-orange-soft, #f6a04d));
}

.seran-hd {
	position: sticky;
	top: 0;
	z-index: var(--sl-z-header);
	background: var(--sl-paper);
	color: var(--sl-ink);
	font-family: var(--sl-font);
}

.seran-hd__bar {
	position: relative;
	z-index: 2;
	height: var(--sl-bar-h);
	background: var(--sl-paper);
	border-bottom: 1px solid var(--sl-hairline);
	transition: height 0.2s ease, box-shadow 0.2s ease;
}

.seran-hd.is-scrolled .seran-hd__bar {
	height: var(--sl-bar-h-sm);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.seran-hd__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 100%;
	max-width: var(--sl-wrap);
	margin: 0 auto;
	padding: 0 var(--sl-pad-x);
}

/* 로고 */
.seran-hd__logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	max-width: 220px;
	text-decoration: none;
}

.seran-hd__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 38px;
	transition: height 0.2s ease;
}

/*
 * 로고 축소는 바가 실제로 줄어드는 폭에서만 한다.
 * 1280px 이하에서는 바가 처음부터 56px 고정(--sl-bar-h-sm)이라, 여기서도 같이
 * 줄이면 바는 가만한데 로고만 혼자 작아져 튄다(모바일에서 그렇게 보였다).
 */
@media (min-width: 1281px) {
	.seran-hd.is-scrolled .seran-hd__logo img {
		height: 32px;
	}
}

.seran-hd__logo-text {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--sl-ink);
	white-space: nowrap;
}

/* 1차 메뉴 (중앙) */
.seran-hd__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.seran-hd__list {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seran-hd__item {
	position: relative;
}

.seran-hd__link {
	position: relative;
	display: inline-block;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sl-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.seran-hd__link::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--sl-accent);
	transition: width 0.2s ease;
}

.seran-hd__link:hover,
.seran-hd__link:focus-visible,
.seran-hd__item.is-current .seran-hd__link,
.seran-hd__item.is-active .seran-hd__link {
	color: var(--sl-accent);
}

.seran-hd__link:hover::after,
.seran-hd__link:focus-visible::after,
.seran-hd__item.is-current .seran-hd__link::after,
.seran-hd__item.is-active .seran-hd__link::after {
	width: 100%;
}

/* 로그인 (우) */
.seran-hd__account {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
}

.seran-hd__divider {
	display: block;
	width: 1px;
	height: 12px;
	background: var(--sl-line);
}

.seran-hd__login {
	font-size: 14px;
	font-weight: 400;
	color: var(--sl-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.seran-hd__login:hover,
.seran-hd__login:focus-visible {
	color: var(--sl-accent);
}

.seran-hd__login.is-member {
	font-weight: 600;
	color: var(--sl-cta);
}

/* 햄버거 (모바일) */
.seran-hd__burger {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.seran-hd__burger-box {
	position: relative;
	display: block;
	width: 24px;
	height: 16px;
}

.seran-hd__burger-box span {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	background: var(--sl-ink);
	border-radius: 2px;
}

.seran-hd__burger-box span:nth-child(1) { top: 0; }
.seran-hd__burger-box span:nth-child(2) { top: 7px; }
.seran-hd__burger-box span:nth-child(3) { bottom: 0; }

/* ============================================================
   3. 메가 패널
============================================================ */

.seran-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 24px 0 32px;
	background: var(--sl-mega-bg);
	border-bottom: 1px solid var(--sl-olive);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* CSS 만으로도 열린다 (JS 없이 동작) — JS 는 활성 컬럼 강조·Esc 닫기만 보강. */
.seran-hd:hover .seran-mega,
.seran-hd:focus-within .seran-mega,
.seran-hd.is-mega-open .seran-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Esc 로 닫은 뒤에는 포인터가 헤더를 떠날 때까지 잠근다. */
.seran-hd.is-mega-locked .seran-mega {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.seran-mega__grid {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 30px;
	width: 100%;
	max-width: var(--sl-wrap);
	margin: 0 auto;
	padding: 0 var(--sl-pad-x);
}

.seran-mega__banner {
	flex: 0 0 200px;
	width: 200px;
}

.seran-mega__banner a {
	display: block;
	overflow: hidden;
	border-radius: 8px;
}

.seran-mega__banner img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.seran-mega__banner a:hover img {
	transform: scale(1.05);
}

.seran-mega__col {
	flex: 1 1 0;
	min-width: 140px;
	padding-right: 30px;
	border-right: 1px solid var(--sl-line-soft);
	text-align: center;
}

.seran-mega__col:last-child {
	padding-right: 0;
	border-right: 0;
}

.seran-mega__parent {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.seran-mega__parent a {
	color: var(--sl-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.seran-mega__col.is-active .seran-mega__parent a,
.seran-mega__parent a:hover,
.seran-mega__parent a:focus-visible {
	color: var(--sl-accent);
}

.seran-mega__children {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seran-mega__children a {
	display: block;
	padding: 6px 8px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--sl-ink-2);
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.2s ease, color 0.2s ease;
}

.seran-mega__children a:hover,
.seran-mega__children a:focus-visible {
	background: var(--sl-accent-soft);
	color: var(--sl-paper);
}

/* ============================================================
   4. 모바일 드로어 (좌 1차 / 우 2차 분할)
============================================================ */

.seran-mnav {
	position: fixed;
	inset: 0;
	z-index: var(--sl-z-drawer);
	display: flex;
	flex-direction: column;
	padding: 16px 16px 24px;
	overflow: hidden;
	background: var(--sl-paper);
	color: var(--sl-ink);
	font-family: var(--sl-font);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.seran-mnav[hidden] {
	display: none;
}

.seran-mnav.is-open {
	opacity: 1;
	visibility: visible;
}

.seran-mnav__head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding: 0 0 16px;
}

.seran-mnav__login {
	font-size: 14px;
	color: var(--sl-ink);
	text-decoration: none;
	white-space: nowrap;
}

.seran-mnav__close {
	padding: 4px 8px;
	background: transparent;
	border: 0;
	font-size: 14px;
	line-height: 1;
	color: var(--sl-ink);
	cursor: pointer;
}

.seran-mnav__split {
	display: flex;
	flex: 1 1 auto;
	gap: 16px;
	min-height: 0;
	overflow: hidden;
}

.seran-mnav__primary {
	flex: 0 0 40%;
	overflow-y: auto;
	background: var(--sl-mega-bg);
	-webkit-overflow-scrolling: touch;
}

.seran-mnav__primary ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seran-mnav__tab {
	width: 100%;
	padding: 15px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--sl-line-soft);
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	color: var(--sl-ink-3);
	text-align: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.seran-mnav__tab:hover {
	color: var(--sl-accent);
}

.seran-mnav__tab.is-active {
	background: var(--sl-accent);
	font-weight: 600;
	color: var(--sl-paper);
}

.seran-mnav__secondary {
	flex: 1 1 auto;
	padding-left: 4px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.seran-mnav__panel {
	display: none;
}

.seran-mnav__panel.is-active {
	display: block;
}

.seran-mnav__panel-title {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--sl-line-soft);
	font-size: 16px;
	font-weight: 700;
	color: var(--sl-ink);
}

.seran-mnav__panel-title a {
	color: inherit;
	text-decoration: none;
}

.seran-mnav__panel-title a:hover,
.seran-mnav__panel-title a:focus-visible {
	color: var(--sl-accent);
}

.seran-mnav__panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.seran-mnav__panel ul a {
	display: block;
	padding: 18px 5px;
	border-radius: 4px;
	font-size: 14px;
	color: var(--sl-ink-2);
	text-decoration: none;
	transition: color 0.2s ease;
}

.seran-mnav__panel ul a:hover,
.seran-mnav__panel ul a:focus-visible {
	color: var(--sl-accent);
}

/* 드로어 하단 배너 (큰 1 + 작은 2) */
.seran-mnav__banner {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	gap: 4%;
	width: 100%;
	margin-top: 25px;
}

.seran-mnav__banner-lg {
	flex: 0 0 60%;
	width: 60%;
}

.seran-mnav__banner-lg a {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
}

.seran-mnav__banner-stack {
	display: flex;
	flex: 0 0 28%;
	flex-direction: column;
	gap: 4%;
	align-self: stretch;
	width: 28%;
}

.seran-mnav__banner-sm {
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
}

.seran-mnav__banner-sm a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 8px;
}

.seran-mnav__banner img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   5. 푸터
============================================================ */


/* 배경 사진 — URL 은 Seran_Layout 이 --seran-ft-bg 로 주입(정적 파일에는 경로 없음). */








/* 주소·진료시간은 줄바꿈과 정렬 공백을 원고 그대로 살린다. */








/* ============================================================
   6. 지도 ([naver_map])
============================================================ */

.seran-map {
	width: 100%;
}

.seran-map__canvas {
	width: 100%;
	height: 500px;
	overflow: hidden;
	border-radius: 24px;
	background: var(--sl-mega-bg);
}

.seran-map--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	padding: 24px;
	border: 1px solid var(--sl-line);
	border-radius: 24px;
	background: var(--sl-mega-bg);
}

.seran-map__link {
	font-size: 15px;
	font-weight: 600;
	color: var(--sl-cta);
	text-decoration: none;
}

.seran-map__link:hover,
.seran-map__link:focus-visible {
	text-decoration: underline;
}

/* 마커 라벨 / 주차장 커스텀 오버레이 — JS 가 이 클래스로 만든다 (인라인 스타일 금지). */
.seran-map__pin,
.seran-map__label {
	padding: 2px 6px;
	background: var(--sl-paper);
	border: 1px solid var(--sl-line);
	border-radius: 4px;
	font-family: var(--sl-font, inherit);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--sl-ink);
}

.seran-map__pin {
	position: absolute;
	transform: translate(-50%, -100%);
	z-index: 1000;
}

.seran-map__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

/* ============================================================
   7. 반응형 — 1280px = Seran_Layout::BREAKPOINT
   (메가 패널은 >1280 전용이라 별도 압축 구간이 필요 없다)
============================================================ */

@media (min-width: 1281px) {
	.seran-mnav {
		display: none !important;
	}
}

@media (max-width: 1280px) {
	.seran-hd__nav,
	.seran-hd__account {
		display: none;
	}

	.seran-hd__burger {
		display: flex;
		margin-left: auto;
	}

	.seran-hd__bar {
		height: var(--sl-bar-h-sm);
	}

	.seran-mega {
		display: none;
	}

	.seran-map__canvas {
		height: 340px;
		border-radius: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seran-hd__bar,
	.seran-hd__logo img,
	.seran-hd__link::after,
	.seran-mega,
	.seran-mnav,
	.seran-mega__banner img {
		transition: none !important;
	}
}

/* ============================================================
   5. 푸터 — 시안(CraftStudio 1223 .contact + .site-footer) 톤
   지도 → 밝은 연락처 밴드 → 얇은 먹색 하단 바
============================================================ */
.seran-ft {
	--ft-ink: #1e2523;
	--ft-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
	background: #f0f3f0;
	color: var(--ft-ink);
}
.seran-ft *,
.seran-ft *::before,
.seran-ft *::after { box-sizing: border-box; }

.seran-ft__inner {
	width: min(calc(100% - 48px), 1240px);
	margin-inline: auto;
}

.seran-ft__map { line-height: 0; }
.seran-ft__map iframe,
.seran-ft__map > div { width: 100%; }

/* ---- 연락처 밴드 ---- */
.seran-ft__contact { background: #f0f3f0; padding: clamp(56px, 7vw, 88px) 0; }
.seran-ft__contact-grid {
	display: grid;
	grid-template-columns: .75fr 1.25fr;
	gap: 70px;
	align-items: start;
}
.seran-ft__eyebrow {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
	color: #315f52;
	text-transform: uppercase;
}
.seran-ft__brand {
	margin: 0 0 13px;
	font-family: var(--ft-serif);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 600;
	letter-spacing: -.045em;
	line-height: 1.25;
	color: var(--ft-ink);
}
.seran-ft__intro-desc { margin: 0; color: #68716d; font-size: 15px; line-height: 1.7; }

.seran-ft__cols {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.seran-ft__col { border-left: 1px solid #ccd4cf; padding-left: 22px; }
.seran-ft__label { margin: 0 0 13px; font-size: 11px; font-weight: 700; color: #7c8581; letter-spacing: .02em; }
.seran-ft__value { margin: 0; font-size: 14px; line-height: 1.75; color: #48514d; }
.seran-ft__value--pre { white-space: pre-line; }
.seran-ft__value--tel a {
	font-family: Georgia, serif;
	font-size: 21px;
	color: var(--ft-ink);
	text-decoration: none;
}
.seran-ft__value--tel a:hover { color: #315f52; }

/* ---- 하단 바 ---- */
.seran-ft__bar { background: #18201e; color: #84908b; padding: 26px 0; font-size: 11px; }
.seran-ft__bar-inner {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}
.seran-ft__bar-brand { color: #d7dcda; font-size: 13px; font-weight: 700; }
.seran-ft__biz { margin: 0; flex: 1; display: flex; gap: 14px; flex-wrap: wrap; }
.seran-ft__links { display: flex; gap: 16px; }
.seran-ft__links a { color: #b7c0bc; text-decoration: none; }
.seran-ft__links a:hover { color: #fff; text-decoration: underline; }
.seran-ft__copy { letter-spacing: .08em; }

@media (max-width: 820px) {
	.seran-ft__inner { width: min(calc(100% - 36px), 1240px); }
	.seran-ft__contact-grid { grid-template-columns: 1fr; gap: 36px; }
	.seran-ft__cols { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 540px) {
	.seran-ft__inner { width: min(calc(100% - 28px), 1240px); }
	.seran-ft__contact { padding: 48px 0; }
	.seran-ft__col { padding-left: 16px; }
	.seran-ft__bar-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
	.seran-ft__biz { flex: none; }
}