/* ==========================================================================
   sections/popup.css — 알림 팝업(2026-10-13 사용자 지시 · 관리 화면 [팝업] · inc/popup.php)
   가운데 + 뒤 어둡게(<dialog> 모달) · 이미지(+ 링크) · 여러 장이면 한 창 안에서 좌우 슬라이드 · 아래 '오늘 하루 보지 않기 | 닫기'.
   이 화면에 띄울 팝업이 있을 때만 실린다(assets.php). 값은 DESIGN-TOKENS `--c4-popup-*` — 시안에 없는 화면이라 전화예약 팝업 톤을 따랐다.
   ========================================================================== */

/* 판 폭 = 올린 이미지의 원본 폭(inc/popup.php 가 --c4-popup-w · --c4-popup-ratio 를 인라인으로 준다 · 2026-10-13 사용자 지시).
   화면이 좁거나 낮으면 비율 그대로 줄인다 — 원본 폭 · 화면 폭 − 좌우 여백 · (화면 높이 − 위아래 여백 − 버튼 줄) × 가로 ÷ 세로 중 가장 작은 값.
   그래서 이미지 양옆 · 위아래에 흰 띠가 생기지 않는다. 비율이 없으면(옛 마크업) 높이 조건은 빠진다. */
.c4-popup {
	width: min(
		var(--c4-popup-w),
		calc(100vw - 2 * var(--c4-popup-edge)),
		calc((100svh - 2 * var(--c4-popup-edge-y) - var(--c4-popup-bar-h)) * var(--c4-popup-ratio, 100))
	);
	max-width: none;
	max-height: calc(100vh - 2 * var(--c4-popup-edge-y));
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c4-color-text);
	overflow: visible;
}

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

/* 열린 동안 뒤 페이지 스크롤 잠금 + 스크롤바 자리 어둡게 — 전화예약 팝업(header.css)과 같은 방식. 닫히면([open] 이 빠지면) 풀린다. */
html:has(.c4-popup[open]) {
	overflow: hidden;
	background-color: var(--c4-popup-gutter);
}

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

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

/* 흰 판 — 둥글기 안으로 이미지 · 버튼 줄을 자른다. 처음 초점이 여기 온다(링 없음 — 안쪽 버튼 · 링크는 링이 있다). */
.c4-popup__box {
	overflow: hidden;
	border-radius: var(--c4-popup-radius);
	background: var(--c4-color-white);
}

/* ---------- 이미지 · 슬라이드 ---------- */

.c4-popup__slider { position: relative; }

/* 가로로 한 장씩 붙는 줄 — 손가락 · 트랙패드로 밀어도 한 장씩 멈춘다(스크롤 스냅). 스크롤바는 감춘다(화살표 · 번호가 있다).
   높이는 지금 장에 맞춘다 — popup.js 가 지금 장 높이를 넣고 여기서 부드럽게 바뀐다(비율이 다른 이미지가 섞여도 위아래 흰 띠가 없다).
   스크립트 전(또는 한 장)에는 가장 긴 장 높이.
   ★ interpolate-size: numeric-only — sidebox.css 가 :root 에 allow-keywords 를 걸어 둔 화면에서는 처음 열 때 'auto(가장 긴 장) → 지금 장'이
     움직여 보였다(2026-10-13 리뷰). 숫자 ↔ 숫자만 부드럽게. */
.c4-popup__track {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	interpolate-size: numeric-only;
	transition: height var(--c4-popup-resize);
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

/* 마우스로 끄는 동안(popup.js) — 글자 · 이미지가 잡혀 끌리지 않게 */
.c4-popup__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* 한 장 — 판 폭 그대로. */
.c4-popup__slide {
	display: flex;
	flex: 0 0 100%;
	justify-content: center;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* 여러 장 — 아주 납작한 이미지(가로로 긴 띠 배너)에서도 아래 점이 이미지 안에 들어오는 최소 높이.
   이미지가 그보다 낮으면 위아래 흰 여백을 두고 가운데에 놓인다. */
.c4-popup__slider:has(.c4-popup__dots) .c4-popup__slide {
	align-items: center;
	min-height: var(--c4-popup-slide-min-h);
}

.c4-popup__link {
	position: relative;
	display: block;
	width: 100%;
}

/* 이미지 — 올린 크기 그대로(판보다 넓으면 판 폭으로 · 여러 장이 크기가 다르면 좁은 장은 가운데). 화면보다 길면 버튼 줄까지 화면 안에 들어오게 줄인다.
   ★ width 100% + 장마다 보이는 폭 상한(--c4-popup-img-w · inc/popup.php 인라인) — width auto 였을 때는 이미지를 받기 전 칸 높이가 0 이라
     두 장 이상일 때 popup.js 가 잰 판 높이가 납작하게 굳었다(2026-10-14). 이제 받기 전에도 가로세로 비율로 자리를 잡는다. */
.c4-popup__img {
	display: block;
	width: 100%;
	max-width: var(--c4-popup-img-w, 100%);
	height: auto;
	max-height: calc(100svh - 2 * var(--c4-popup-edge-y) - var(--c4-popup-bar-h));
	object-fit: contain;
}

/* 아래 가운데 점 — 몇 번째 장인지 · 누르면 그 장(2026-10-14 사용자 지시 "좌우 화살표 없애고 아래 슬라이드 점으로" · 화살표 · '1 / 2' 번호 대신).
   지금 장은 포인트 컬러로 길게(알약) · 나머지는 옅은 회색 점. 눌리는 칸은 점보다 크게(24) — 손가락으로도 누르기 쉽게. */
.c4-popup__dots {
	position: absolute;
	right: 0;
	bottom: var(--c4-popup-dot-bottom);
	left: 0;
	display: flex;
	justify-content: center;
	gap: 0;
	pointer-events: none;        /* 점 사이 빈 곳은 아래 이미지 링크가 받는다 */
}

.c4-popup__dot {
	display: grid;
	place-items: center;
	width: calc(var(--c4-popup-dot) + var(--c4-popup-dot-gap));
	height: var(--c4-popup-dot-hit);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}

.c4-popup__dot::before {
	content: "";
	width: var(--c4-popup-dot);
	height: var(--c4-popup-dot);
	border-radius: var(--c4-radius-pill);
	background: var(--c4-popup-dot-bg);
	transition: width var(--c4-popup-dot-dur) ease, background-color var(--c4-popup-dot-dur) ease;
}

.c4-popup__dot[aria-current="true"] { width: calc(var(--c4-popup-dot-on-w) + var(--c4-popup-dot-gap)); }

.c4-popup__dot[aria-current="true"]::before {
	width: var(--c4-popup-dot-on-w);
	background: var(--c4-color-accent);
}

@media (hover: hover) {
	.c4-popup__dot:not([aria-current="true"]):hover::before { background: var(--c4-popup-dot-hover); }
}

/* ---------- 아래 버튼 줄 ---------- */

.c4-popup__bar {
	display: flex;
	border-top: 1px solid var(--c4-color-border);
}

.c4-popup__btn {
	flex: 1 1 0;
	min-width: 0;
	height: var(--c4-popup-bar-h);
	padding: 0 12px;
	border: 0;
	background: transparent;
	color: var(--c4-color-text-sub);
	font: inherit;
	font-size: var(--c4-fs-body4);
	line-height: var(--c4-lh-body);
	cursor: pointer;
}

.c4-popup__btn + .c4-popup__btn { border-left: 1px solid var(--c4-color-border); }

.c4-popup__btn--close {
	color: var(--c4-color-text);
	font-weight: var(--c4-fw-bold);
}

@media (hover: hover) {
	.c4-popup__btn:hover { color: var(--c4-color-text); }
}

/* ---------- 키보드 초점 ---------- */

/* 판이 넘침을 자르니 링을 안쪽에 그린다. 점은 둥근 점 둘레에. */
.c4-popup__dot:focus-visible { outline: none; }
.c4-popup__dot:focus-visible::before { outline: var(--c4-focus-ring-w) solid var(--c4-color-focus); outline-offset: 2px; }

.c4-popup :focus-visible {
	outline: var(--c4-focus-ring-w) solid var(--c4-color-focus);
	outline-offset: calc(var(--c4-focus-ring-w) * -1);
}

/* 처음 초점이 가는 판 자체에는 링을 그리지 않는다 — 위 규칙이 판에도 걸려 열리자마자 테두리가 보였다 */
.c4-popup .c4-popup__box:focus-visible { outline: none; }

/* 이미지 링크 — 이미지가 링을 덮지 않게 위에 한 겹(어두운 이미지에서도 보이게 안쪽 흰 줄) */
.c4-popup__link:focus-visible { outline: none; }

.c4-popup__link:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	outline: var(--c4-focus-ring-w) solid var(--c4-color-focus);
	outline-offset: calc(var(--c4-focus-ring-w) * -1);
	box-shadow: inset 0 0 0 calc(var(--c4-focus-ring-w) * 2) var(--c4-color-white);
}

@media (prefers-reduced-motion: reduce) {
	.c4-popup__track { transition: none; }
}

/* ---------- 모바일 ---------- */

/* 휴대폰 — 좌우 20 을 두고 가로 폭 가득(이미지 원본 폭과 상관없이 · 2026-10-13 사용자 지시). 가로로 눕혀 화면이 낮으면 비율 그대로 줄인다. */
@media (max-width: 767.98px) {
	.c4-popup {
		width: min(
			calc(100vw - 2 * var(--c4-popup-edge-m)),
			calc((100svh - 2 * var(--c4-popup-edge-m) - var(--c4-popup-bar-h-m)) * var(--c4-popup-ratio, 100))
		);
		max-height: calc(100vh - 2 * var(--c4-popup-edge-m));
	}

	.c4-popup__img {
		width: 100%;
		max-width: none;   /* 휴대폰은 원본 폭과 상관없이 가로 가득 */
		max-height: calc(100svh - 2 * var(--c4-popup-edge-m) - var(--c4-popup-bar-h-m));
	}

	.c4-popup__btn { height: var(--c4-popup-bar-h-m); }
}