/* ==========================================================================
   sections/header.css — 헤더 + 모바일 드로어
   --------------------------------------------------------------------------
   좌측 로고 · 중앙 메뉴 · 우측 문의하기 버튼.
   1024 미만에서는 로고 + 햄버거만 남고 메뉴·CTA 가 드로어로 들어간다.
   ========================================================================== */

/* ---------- 헤더 껍데기 ---------- */

.c4-header {
	position: sticky;
	top: var(--c4-admin-bar-h, 0px);
	z-index: 50;
	height: var(--c4-header-h);
	background: var(--c4-color-header-bg);
	-webkit-backdrop-filter: blur(var(--c4-header-blur));
	backdrop-filter: blur(var(--c4-header-blur));
	border-bottom: var(--c4-border-w) solid transparent;
	transition: border-color .2s ease;
}

/* backdrop-filter 미지원 → 반투명이 그냥 흐릿하지 않은 반투명이 되어 글자가 겹쳐 읽힌다.
   불투명 흰색으로 폴백한다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.c4-header { background: var(--c4-color-page-bg); }   /* 페이지 바탕(2026-10-14 · 처음엔 흰색) */
}

/* PC 는 스크롤했을 때만 하단 구분선. 초기 상태에 border 가 없는 것이 정상이다. */
.c4-header.is-scrolled { border-bottom-color: var(--c4-color-border); }

.c4-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--c4-menu-gap);
	width: 100%;
	max-width: calc(var(--c4-container-w) + var(--c4-container-pad) * 2);
	height: 100%;
	margin-inline: auto;
	padding-inline: var(--c4-container-pad);
}

/* ---------- 로고 (헤더·푸터 공용 규격) ---------- */

/* 확정값 '로고 슬롯 190×48' + '이미지 로고 표시 규격'.
   슬롯 높이 48 은 고정이고 가로 190 은 문구 길이에 따라 늘어난다.
   ★ 헤더 높이는 로고 때문에 절대 변하지 않는다 — 슬롯 안에서만 움직인다. */
.c4-logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;   /* 좌측 정렬 — 가운데·우측 정렬 금지 */
	justify-content: center;   /* 세로 가운데 */
	height: var(--c4-logo-h);
	max-width: var(--c4-logo-w);
	flex-shrink: 0;
}

.c4-logo__text {
	font-size: var(--c4-fs-logo);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-logo);
	letter-spacing: var(--c4-tracking-logo);   /* ★ 로고만 자간 0 */
	white-space: nowrap;
	color: var(--c4-color-text);
}

/* ★ 여섯 줄이 한 벌이다. 하나라도 빠지면 찌그러지거나 넘친다.
   wp_get_attachment_image 가 붙이는 width/height 속성을 여기서 덮는다. */
.c4-logo__img {
	width: 100%;
	max-width: var(--c4-logo-w);
	height: auto;
	max-height: var(--c4-logo-h);
	object-fit: contain;                 /* ★ cover 금지 — 로고가 잘린다 */
	object-position: left center;
}

/* ---------- 메뉴 ---------- */

.c4-header__nav {
	display: flex;
	min-width: 0;                 /* 넘칠 때 축소 허용 */
	overflow-x: auto;             /* 그래도 넘치면 nav 만 가로 스크롤 */
	scrollbar-width: none;
	/* ★ overflow-x 가 auto 면 세로도 잘린다 — 글자 아래 6px 의 마우스 올림 밑줄이 잘려 안 보였다(2026-10-14 '헤더 호버시 밑줄 그어지게' 확인 중 발견).
	   위아래 안쪽 여백으로 밑줄 자리를 주고, 같은 만큼 바깥 여백을 빼 헤더 안 배치는 그대로 둔다. */
	padding-block: var(--c4-menu-line-room);
	margin-block: calc(var(--c4-menu-line-room) * -1);
}

.c4-header__nav::-webkit-scrollbar { display: none; }

.c4-menu {
	display: flex;
	align-items: center;
	gap: var(--c4-menu-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.c4-menu > li { flex-shrink: 0; }

.c4-menu > li > a {
	display: block;
	font-size: var(--c4-fs-menu);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-menu);
	color: var(--c4-color-text);
	white-space: nowrap;
	transition: color .15s ease;
}

/* 마우스를 올려도 글자색은 그대로 — 헤더 메뉴는 아래 밑줄만(2026-10-14 사용자 지시 '헤더 호버시 색 변경 삭제하고 밑줄 그어지게') · 드로어 메뉴만 옅어진다. */
.c4-drawer .c4-menu > li > a:hover { color: var(--c4-color-text-sub); }

/* PC 헤더 메뉴 — 마우스를 올리면(키보드 초점도) 글자 아래 밑줄이 왼쪽부터 그어진다(2026-10-14 사용자 지시). 선 색은 글자색을 따른다(히어로 위 흰 글자면 흰 선 · 현재 항목이면 포인트 컬러).
   모바일 드로어 메뉴는 그대로. */
.c4-header .c4-menu > li > a { position: relative; }

.c4-header .c4-menu > li > a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: var(--c4-menu-line-offset);
	left: 0;
	height: var(--c4-menu-line-w);
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: none;   /* 마우스를 떼면 바로 사라진다 — 짧아지며 사라지지 않게(2026-10-14 사용자 지시). 그어질 때만 아래 전환 */
	pointer-events: none;
}

.c4-header .c4-menu > li > a:focus-visible::after {
	transform: scaleX(1);
	transition: transform var(--c4-menu-line-dur) var(--c4-menu-line-ease);
}

@media (hover: hover) {
	.c4-header .c4-menu > li > a:hover::after {
		transform: scaleX(1);
		transition: transform var(--c4-menu-line-dur) var(--c4-menu-line-ease);
	}
}

@media (prefers-reduced-motion: reduce) {
	.c4-header .c4-menu > li > a:hover::after,
	.c4-header .c4-menu > li > a:focus-visible::after { transition: none; }   /* 그어지는 움직임도 없이 바로 */
}

/* 현재 항목 = 포인트 컬러.
   ★ wp_page_menu() 폴백은 .current-menu-item 이 아니라 .current_page_item 을 출력한다.
      두 선택자를 함께 적어야 폴백에서도 강조가 산다. */
.c4-menu > .current-menu-item > a,
.c4-menu > .current-menu-parent > a,
.c4-menu > .current-menu-ancestor > a,
.c4-menu > .current_page_item > a,
.c4-menu > .current_page_parent > a,
.c4-menu > .current_page_ancestor > a {
	color: var(--c4-color-accent);
}

/* 헤더의 현재 항목은 굵게(2026-10-14 사용자 지시 '헤더에서 활성화된 메뉴는 볼드체로') — 나눔명조는 700 한 벌뿐이라 전화예약 글자처럼 둘레에 같은 색 선을 더한다. 드로어는 그대로. */
.c4-header .c4-menu > .current-menu-item > a,
.c4-header .c4-menu > .current-menu-parent > a,
.c4-header .c4-menu > .current-menu-ancestor > a,
.c4-header .c4-menu > .current_page_item > a,
.c4-header .c4-menu > .current_page_parent > a,
.c4-header .c4-menu > .current_page_ancestor > a {
	-webkit-text-stroke: var(--c4-cta-text-stroke) currentColor;
}

/*
 * 메뉴 항목이 늘어도 CTA 와 겹치지 않게 간격을 32 → 16 으로 줄인다.
 * ★★ 1279 는 **헤더 안에서만 쓰는 국소값**이다(헤더 컨테이너 1280 에서 도출).
 *    전환 기준선 3개(768 · 1024 · 1360)에 끼워 넣는 값이 아니다 —
 *    그 셋은 화면 구성이 바뀌는 선이고 이건 헤더 내부 사정이다.
 *    나중에 누가 기준선으로 오해하고 다른 곳에 쓰지 말 것.
 */
@media (max-width: 1279px) {
	.c4-header__inner { gap: var(--c4-menu-gap-narrow); }
	.c4-menu { gap: var(--c4-menu-gap-narrow); }
}

/* ---------- 문의하기 CTA ---------- */

.c4-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--c4-cta-gap);
	flex-shrink: 0;                        /* ★ 항상 온전히 클릭 가능해야 한다 */
	min-width: var(--c4-cta-w);            /* ★ width 가 아니라 하한선 — 문구가 옵션이라 길어질 수 있다 */
	height: var(--c4-cta-h);
	padding: var(--c4-cta-pad);
	border-radius: var(--c4-radius-btn);
	background: var(--c4-color-accent);
	color: var(--c4-color-white);
	/* 기본 상태에도 같은 폭의 투명 테두리 — 호버 반전 시 박스가 흔들리지 않게 */
	border: var(--c4-cta-border) solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.c4-cta__text {
	font-size: var(--c4-fs-cta);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-cta);
	white-space: nowrap;
}

/* 헤더 전화예약 글자 — 더 굵게(2026-10-14 사용자 지시 '볼드체로'). 나눔명조는 굵기가 700 한 벌뿐이라 글자 둘레에 같은 색 선을 더해 굵어 보이게 한다
   (currentColor — 마우스를 올려 글자색이 바뀌면 선도 같이 바뀐다). 메인 하단 '예약 및 상담' 버튼도 헤더와 같게(같은 날 사용자 지시 '전화예약 텍스트 헤더랑 동일하게'). 드로어는 그대로. */
.c4-header .c4-cta__text,
.c4-main-info__cta .c4-cta__text,
.c4-single__back .c4-cta__text,
.c4-location-buttons__cta .c4-cta__text { -webkit-text-stroke: var(--c4-cta-text-stroke) currentColor; }   /* 글 상세 '목록으로' · 오시는 길 '전화예약'도 헤더와 같게(2026-10-14) */

.c4-cta__icon {
	width: var(--c4-cta-icon);
	height: var(--c4-cta-icon);
	flex-shrink: 0;
}

/* Hover = 반전형(시안 `Button / Hover`): 흰 배경 + accent 테두리 + accent 문구·아이콘.
   아이콘이 fill="currentColor" 라 글자색을 따라 함께 바뀐다. */
.c4-cta:hover,
.c4-cta:focus-visible {
	background: var(--c4-color-white);
	border-color: var(--c4-color-accent);
	color: var(--c4-color-accent);
}

/* ---------- 햄버거 ---------- */

.c4-burger {
	display: none;                 /* 1024 이상에서는 없다 */
	width: var(--c4-burger-size);
	height: var(--c4-burger-size);
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--c4-color-text);
}

.c4-burger__icon {
	width: 100%;
	height: 100%;
}

.c4-burger__line { transition: opacity .2s ease; }

/* 열리면 X 가 아니라 **가운데 가로선 1개**(시안 asset 그대로) */
.c4-drawer-toggle:checked ~ .c4-header .c4-burger__line--top,
.c4-drawer-toggle:checked ~ .c4-header .c4-burger__line--bottom {
	opacity: 0;
}

/* 체크박스가 sr-only 라 포커스 링이 안 보인다. 라벨에 링을 넘겨 준다. */
.c4-drawer-toggle:focus-visible ~ .c4-header .c4-burger {
	outline: var(--c4-focus-ring-w) solid var(--c4-color-focus);
	outline-offset: var(--c4-focus-ring-offset);
}

/* ---------- 드로어 ---------- */

/*
 * 헤더 아래 전체를 덮는 불투명 흰 패널.
 * ★ 높이 기준은 var(--c4-header-h) 다 — 드로어는 1024 미만에서 뜨는데
 *   헤더 높이는 768 에서 바뀌므로 숫자로 박으면 768~1023 구간이 어긋난다.
 */
.c4-drawer {
	position: fixed;
	top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h));
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	padding-left: env(safe-area-inset-left, 0px);    /* 가로 아이폰 노치 쪽 — 화면에 고정된 칸이라 body 여백을 받지 않는다(viewport-fit=cover · 2026-10-15) */
	padding-right: env(safe-area-inset-right, 0px);
	background: var(--c4-color-page-bg);   /* 드로어 — 페이지 바탕(2026-10-14) */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.c4-drawer-toggle:checked ~ .c4-drawer { display: flex; }

/* 손가락 · 마우스로 열면 초점이 서랍 자체에 온다(header.js · 2026-10-15) — 상자 테두리는 그리지 않는다 */
.c4-drawer:focus { outline: none; }

.c4-drawer__nav {
	padding: var(--c4-drawer-pad-top) var(--c4-drawer-pad-x) var(--c4-drawer-pad-bottom);
}

.c4-menu--drawer {
	flex-direction: column;
	align-items: stretch;
	gap: var(--c4-drawer-item-gap);
}

.c4-menu--drawer > li > a {
	font-size: var(--c4-fs-menu-m);
	line-height: var(--c4-lh-menu-m);
	white-space: normal;
}

.c4-drawer__cta {
	padding: 0 var(--c4-drawer-pad-x) var(--c4-drawer-cta-bottom);
}

/* 드로어 CTA 는 폭 100% */
.c4-cta--block {
	display: flex;
	width: 100%;
}

/* ---------- 뷰포트 전환 ---------- */

/* 메뉴 → 드로어 전환선. CTA 도 이 선에서 헤더를 떠나 드로어로 들어간다.
   ★ 태블릿 768–1023 구간에서도 헤더에 CTA 가 보이지 않는 것이 정상이다. */
@media (max-width: 1023.98px) {
	.c4-header__nav,
	.c4-header__cta { display: none; }

	.c4-burger { display: inline-flex; }
}

@media (min-width: 1024px) {
	/* 드로어는 데스크톱에서 존재하지 않는다 — 체크박스가 켜져 있어도 뜨지 않게 */
	.c4-drawer,
	.c4-drawer-toggle:checked ~ .c4-drawer { display: none; }
}

/* 모바일 헤더 — 불투명 흰색, 하단선 상시, 좌우 패딩 20(로고 기준선은 24) */
@media (max-width: 767.98px) {
	.c4-header {
		background: var(--c4-color-page-bg);   /* 페이지 바탕(2026-10-14) */
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom-color: var(--c4-color-border);
	}

	.c4-header__inner { padding-inline: var(--c4-gutter-mobile-chrome); }

	/* 컨테이너 패딩 20 + 로고만 안에서 4 들여써 기준선 24. 햄버거는 20 에 맞는다. */
	.c4-header__logo { padding-left: var(--c4-logo-indent-m); }

	/* 로고 · 햄버거 축소 — 헤더 높이 60(2026-10-15 사용자 지시) */
	.c4-header .c4-logo { height: var(--c4-logo-h-m); max-width: var(--c4-logo-w-m); }
	.c4-header .c4-logo__img { max-width: var(--c4-logo-w-m); max-height: var(--c4-logo-h-m); }
	.c4-burger { width: var(--c4-burger-size-m); height: var(--c4-burger-size-m); }

	/* 서랍 아래 전화예약은 휴대폰에서 빼고 화면 아래 고정 띠가 맡는다(아래 .c4-fixed-cta) — 태블릿(768 ~ 1023) 서랍은 그대로 */
	.c4-drawer__cta { display: none; }
}

/* 서랍 메뉴 — 열릴 때 위에서부터 차례로 떠오른다(2026-10-15 사용자 지시 '계단식 리빌') · 지금 페이지는 굵게(헤더처럼 둘레 선 — 나눔명조는 700 한 벌뿐) */
@media (prefers-reduced-motion: no-preference) {
	.c4-drawer-toggle:checked ~ .c4-drawer .c4-menu--drawer > li {
		animation: c4-drawer-item-in var(--c4-drawer-item-dur) var(--c4-reveal-ease) both;
		animation-delay: calc(var(--c4-drawer-i, 0) * var(--c4-drawer-item-step));
	}
}

.c4-menu--drawer > li:nth-child(2) { --c4-drawer-i: 1; }
.c4-menu--drawer > li:nth-child(3) { --c4-drawer-i: 2; }
.c4-menu--drawer > li:nth-child(4) { --c4-drawer-i: 3; }
.c4-menu--drawer > li:nth-child(5) { --c4-drawer-i: 4; }
.c4-menu--drawer > li:nth-child(6) { --c4-drawer-i: 5; }
.c4-menu--drawer > li:nth-child(7) { --c4-drawer-i: 6; }
.c4-menu--drawer > li:nth-child(n+8) { --c4-drawer-i: 7; }

@keyframes c4-drawer-item-in {
	from {
		opacity: 0;
		translate: 0 calc(var(--c4-reveal-shift) / 2);
	}
}

.c4-drawer .c4-menu > .current-menu-item > a,
.c4-drawer .c4-menu > .current-menu-parent > a,
.c4-drawer .c4-menu > .current-menu-ancestor > a,
.c4-drawer .c4-menu > .current_page_item > a,
.c4-drawer .c4-menu > .current_page_parent > a,
.c4-drawer .c4-menu > .current_page_ancestor > a {
	-webkit-text-stroke: var(--c4-cta-text-stroke) currentColor;
}

/* 화면 아래 고정 전화예약(휴대폰만 · 모든 페이지 · 가로 가득 — 2026-10-15 사용자 지시) — 서랍 전화예약과 같은 버튼(.c4-cta · 같은 링크 · 글자).
   ★ 페이지 맨 아래(푸터)가 띠에 가리지 않게 그 높이만큼 body 아래를 비운다. 아이폰 홈 막대 자리(안전 영역)는 띠 아래에 덧댄다. */
.c4-fixed-cta { display: none; }

@media (max-width: 767.98px) {
	.c4-fixed-cta {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 45;   /* 서랍(40) 위 · 헤더(50) 아래 · 팝업(dialog)은 맨 위 층 */
		display: block;
		/* ★ 아래 안전 영역(홈 막대) 여백을 넣지 않는다 — 아이폰 Safari 에서 도구막대가 접히면 띠(56) 전체가 화면 맨 아래로 내려간다(2026-10-15 사용자 지시 '파란 버튼 자체가 내려가야 · 아래만 파랗게 늘어나는 게 아니라').
		     그 전엔 viewport-fit 기본값이라 Safari 가 띠를 홈 막대 칸 위에 세우고 그 칸을 띠 색으로 채워 '아래만 늘어난' 모양(약 88)이었다. 글자는 띠 가운데(바닥에서 28) — 홈 막대(바닥 약 8)와 겹치지 않는다. */
		background: var(--c4-color-accent);
		transition: transform var(--c4-fixed-cta-dur) var(--c4-reveal-ease), visibility 0s;
	}

	/* 첫 화면에서는 숨겼다가 처음 스크롤할 때 아래에서 스르륵(2026-10-15 사용자 지시) — <head> 인라인 스크립트(c4_fixed_cta_head_flag)가 <html> 에 c4-cta-wait 를 붙이고 첫 스크롤에 뗀다.
	   ★ 숨은 동안 visibility 도 꺼서 키보드 초점이 화면 밖 버튼에 가지 않게 · 메뉴(서랍)를 열면 바로 보인다(서랍이 띠 위에서 끝나 빈칸이 생기지 않게) · 스크립트가 없으면 처음부터 보인다. */
	.c4-cta-wait .c4-fixed-cta {
		transform: translateY(100%);
		visibility: hidden;
		transition: transform var(--c4-fixed-cta-dur) var(--c4-reveal-ease), visibility 0s linear var(--c4-fixed-cta-dur);
	}

	.c4-cta-wait:has(#c4-drawer-toggle:checked) .c4-fixed-cta {
		transform: none;
		visibility: visible;
		transition: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.c4-fixed-cta,
		.c4-cta-wait .c4-fixed-cta { transition: none; }
	}

	.c4-fixed-cta .c4-cta {
		width: 100%;
		height: var(--c4-fixed-cta-h);
		border: 0;
		border-radius: 0;
	}

	.c4-fixed-cta .c4-cta:hover,
	.c4-fixed-cta .c4-cta:focus-visible { background: var(--c4-color-accent); color: var(--c4-color-white); }   /* 반전 없이(가득 찬 띠) */
	.c4-fixed-cta .c4-cta:focus-visible { outline: var(--c4-focus-ring-w) solid var(--c4-color-white); outline-offset: -4px; }

	body:has(.c4-fixed-cta) { padding-bottom: var(--c4-fixed-cta-h); }

	/* 서랍도 띠 위에서 끝난다 — 가로로 눕힌 폰처럼 낮은 화면에서 마지막 메뉴가 띠에 가려 눌리지 않았다(2026-10-15 검증) */
	body:has(.c4-fixed-cta) .c4-drawer { bottom: var(--c4-fixed-cta-h); }

	/* 화면보다 짧은 페이지 — 푸터를 화면 바닥에 붙이는 최소 높이에서 띠 높이를 뺀다(처음 화면에서 저작권 줄이 띠에 반쯤 가렸다 · 같은 날 검증) */
	body:has(.c4-fixed-cta) .c4-site { min-height: calc(100vh - var(--c4-admin-bar-h, 0px) - var(--c4-fixed-cta-h)); }
	@supports (min-height: 100svh) {
		body:has(.c4-fixed-cta) .c4-site { min-height: calc(100svh - var(--c4-admin-bar-h, 0px) - var(--c4-fixed-cta-h)); }
	}
}

/* 배경 스크롤 잠금 — JS 가 body 에 붙인다(드로어가 열린 동안만) */
body.c4-drawer-open { overflow: hidden; }

/* ---------- 문의하기 버튼 PC 팝업(옵션 '전화번호'가 있을 때만 · 2026-10-12 사용자 지시) ----------
   <dialog> 모달 — 맨 위 층(헤더보다 위) · 어두운 배경은 ::backdrop · 가운데 정렬은 브라우저 기본(inset 0 + margin auto).
   ★ 사이트 톤(2차): 흰 상자 · 둥글기 20(이미지 · 썸네일과 같다) · 아이콘 · 작은 제목은 포인트 컬러 · 안내는 회색 상자(소개 이력 상자와 같은 톤).
     값은 DESIGN-TOKENS `--c4-cta-popup-*` — 시안에 없는 화면이라 기존 토큰을 조합했다. */
.c4-cta-popup {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c4-color-text);
	overflow: visible;                       /* 닫기 버튼이 상자 위로 나와 있다 */
	max-width: calc(100vw - 2 * var(--c4-cta-popup-edge));
	max-height: calc(100vh - 2 * var(--c4-cta-popup-edge));
}

.c4-cta-popup::backdrop {
	background: var(--c4-cta-popup-dim);
}

/* 팝업이 열린 동안 뒤 페이지 스크롤 잠금 — 휠 · 방향키로 뒤 화면이 움직였다(2026-10-12 리뷰 · 드로어의 body.c4-drawer-open 과 같은 취지).
   닫는 길(Esc · × · 바깥)이 무엇이든 [open] 이 빠지면 풀린다 — JS 0. html 에 걸어도 scrollbar-gutter: stable(base.css)이라 화면이 흔들리지 않고 스크롤 위치도 그대로다. */
html:has(.c4-cta-popup[open]) {
	overflow: hidden;
	/* ↑ 스크롤바가 사라진 자리(scrollbar-gutter 로 남긴 오른쪽 띠)는 ::backdrop 이 덮지 못해 흰 띠로 남았다(2026-10-12 리뷰) —
	   그 띠만 어두운 배경과 같은 색으로. body 는 자기 흰 배경을 그대로 칠하므로 페이지 영역은 바뀌지 않는다. */
	background-color: var(--c4-cta-popup-gutter);
}

.c4-cta-popup[open],
.c4-cta-popup[open]::backdrop {
	animation: c4-cta-popup-in var(--c4-cta-popup-fade) both;
}

@keyframes c4-cta-popup-in {
	from { opacity: 0; }
}

/* 바깥 틀 — 폭 · × 의 기준. 넘침을 자르지 않는다(× 가 위로 나와 있다). */
.c4-cta-popup__box {
	position: relative;
	width: var(--c4-cta-popup-w);
	max-width: 100%;
}

/* 흰 판 — 낮은 화면에서는 이 안에서 스크롤(× 는 바깥 틀에 있어 잘리지 않는다) */
.c4-cta-popup__panel {
	box-sizing: border-box;
	/* 위아래로 '가장자리 + × 자리'를 남긴다 — 가운데 정렬이라 낮은 화면에서도 × 가 화면 안에 있다 */
	max-height: calc(100vh - 2 * (var(--c4-cta-popup-edge) + var(--c4-cta-popup-close) + var(--c4-cta-popup-close-gap)));
	overflow-y: auto;
	padding: var(--c4-cta-popup-pad);
	border-radius: var(--c4-radius-img);
	/* 늘 보이는 스크롤바(윈도 등)도 둥근 모서리 안으로 자른다 — border-radius 만으로는 스크롤바가 오른쪽 모서리를 덮었다(2026-10-12 리뷰).
	   × 는 바깥 상자(__box)에 있어 잘리지 않는다. */
	clip-path: inset(0 round var(--c4-radius-img));
	background: var(--c4-color-white);
	overflow-wrap: break-word;
}

/* 위쪽 — 가운데: 아이콘 → 작은 제목 → 번호 → 안내 문구 */
.c4-cta-popup__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.c4-cta-popup__icon {
	display: block;
	flex: none;
	width: var(--c4-cta-popup-icon);
	height: var(--c4-cta-popup-icon);
	color: var(--c4-color-accent);
}

.c4-cta-popup__label {
	margin-top: var(--c4-cta-popup-icon-gap);
	font-size: var(--c4-fs-body2);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-body);
	letter-spacing: var(--c4-cta-popup-label-ls);
	color: var(--c4-color-accent);
}

.c4-cta-popup__tel {
	margin-top: var(--c4-cta-popup-tel-gap);
	font-size: var(--c4-cta-popup-tel-fs);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-page-title2);
	white-space: nowrap;
}

.c4-cta-popup__label + .c4-cta-popup__tel { margin-top: var(--c4-cta-popup-label-gap); }

.c4-cta-popup__tel a { color: inherit; }

.c4-cta-popup__text {
	margin-top: var(--c4-cta-popup-text-gap);
	font-size: var(--c4-fs-body2);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-sub);
	word-break: keep-all;   /* 낱말 단위로 접고 줄 길이를 고르게 — 긴 안내('… 다시 전화 드리겠습니다.')가 '다.' 한 글자만 다음 줄에 남겼다(2026-10-13) */
	text-wrap: balance;
}

/* 아래쪽 — 예약 안내(EEEBE8 상자 · 왼쪽 정렬) */
.c4-cta-popup__notes {
	display: flex;
	flex-direction: column;
	gap: var(--c4-cta-popup-note-gap);
	margin-top: var(--c4-cta-popup-notes-gap);
	padding: var(--c4-cta-popup-notes-pad);
	border-radius: var(--c4-radius-box);
	background: var(--c4-cta-popup-notes-bg);
}

.c4-cta-popup__note-title {
	margin: 0;
	font-size: var(--c4-fs-body1);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text);
}

.c4-cta-popup__note-text {
	font-size: var(--c4-fs-body3);
	line-height: var(--c4-cta-popup-note-lh);
	color: var(--c4-color-text-sub);
	word-break: keep-all;   /* 낱말 단위로 접는다 — 스크롤바로 판이 좁아졌을 때 '다.' 한 글자만 다음 줄에 남았다 */
}

.c4-cta-popup__note-title + .c4-cta-popup__note-text { margin-top: var(--c4-cta-popup-note-title-gap); }

/* 닫기 — 상자 오른쪽 위 바깥(어두운 배경 위 흰 ×) */
.c4-cta-popup__close {
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--c4-cta-popup-close-gap));
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--c4-cta-popup-close);
	height: var(--c4-cta-popup-close);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c4-color-white);
}

.c4-cta-popup__close svg {
	width: 100%;
	height: 100%;
}

.c4-cta-popup :focus-visible {
	outline: var(--c4-focus-ring-w) solid var(--c4-color-accent);
	outline-offset: var(--c4-focus-ring-offset);
}

.c4-cta-popup__close:focus-visible { outline-color: var(--c4-color-white); }