/* =========================================================
   user.popup.css — popup-box base / branch popups / hours / map / package-info / confirm / text-list
   ========================================================= */

/* ===== Component: .popup-box (common.js 의존, 명칭 보존) === */
/* common.js 가 popupOpen() 호출 시 .box[data-name] 을 동적 생성/주입.
   클래스명(.popup-box / .box / .popup-head / .popup-body / .agree-box)은
   common.js·user-components.js 가 하드코딩으로 사용 → BEM 변환 X */

.popup-box {
	--popup-gap-y: 24px;
	pointer-events:none; opacity:0;
	position:fixed; inset:0;
	z-index:9999; background:rgba(0,0,0,0.5);
	transition: opacity .2s var(--unc-ease);
}
@media (max-width:991px) {
	.popup-box { --popup-gap-y: 48px; }
}
.popup-box.fixed { pointer-events:auto; opacity:1; }

/* 스크롤 락 (common.js 가 body.fixed / html.fixed 추가) */
html.fixed, body.fixed { overflow:hidden; }

.popup-box .box {
	/* 기본: 콘텐츠 기반 자연 높이 + vertical center (작은 가드 메시지 등) */
	pointer-events:none; opacity:0;
	position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
	width:min(calc(100% - 32px), 480px);
	max-height:calc(100% - 48px);
	background:#fff; border-radius:22px;
	box-shadow:
		0 1px 0 rgba(15,42,18,0.04),
		0 32px 80px rgba(15,42,18,0.20);
	overflow:hidden;
	display:flex; flex-direction:column;
	transition: opacity .2s var(--unc-ease);
}
/* .wide / .space — 약관/캘린더 등 긴 콘텐츠: full height */
.popup-box .box.wide,
.popup-box .box.space {
	top:max(var(--popup-gap-y), env(safe-area-inset-top));
	bottom:max(var(--popup-gap-y), env(safe-area-inset-bottom));
	transform:translateX(-50%);
	max-height:none;
}
.popup-box.fixed .box.active {
	pointer-events:auto; opacity:1;
}
.popup-box .box::-webkit-scrollbar { width:4px; }
.popup-box .box::-webkit-scrollbar-thumb { background:var(--unc-ink-3); border-radius:4px; }

/* head — 타이틀 + 닫기 (body 추가로 legacy v2 보다 specificity 높임) */
body .popup-box .popup-head {
	position:relative; flex-shrink:0;
	display:flex; align-items:center; justify-content:space-between;
	padding:18px 16px;
	border-bottom:1px solid var(--unc-line);
}
body .popup-box .popup-head h2,
body.v2 .popup-box .popup-head h2,
body .popup-box .space .popup-head h2,
body.v2 .popup-box .space .popup-head h2 {
	flex:1; min-width:0;
	padding:0 !important; border:0 !important;
	font-size:1.125rem !important; font-weight:800 !important; color:var(--unc-ink);
	letter-spacing:0; text-align:left !important;
}
/* head 자체 정렬도 좌측 (close X는 우측 absolute로 유지) */
body .popup-box .popup-head,
body.v2 .popup-box .popup-head {
	justify-content:flex-start !important;
}
.popup-box .popup-head .close {
	flex-shrink:0;
	width:24px; height:24px; padding:0; border:0;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1D21' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / contain;
	font-size:0; cursor:pointer;
	position:absolute; right:16px; top:50%; transform:translateY(-50%);
	opacity:1; transition: opacity .15s var(--unc-ease);
}
.popup-box .popup-head .close:hover { opacity:0.6; }
/* 약관(space) 박스 head — 가운데 정렬 + 보더 (다른 popup 과 동일) +
   타이틀만 더 굵게 (사용자 선호) */
body .popup-box .space .popup-head {
	padding:18px 16px;
	border-bottom:1px solid var(--unc-line);
	justify-content:space-between;
}
body .popup-box .space .popup-head h2 {
	text-align:center;
	font-size:0.9375rem; font-weight:800; letter-spacing:0;
	padding:0; border:0;
}

/* body — 스크롤 영역 (위/아래 가로선 누적 방지 위해 border 명시적 0) */
body .popup-box .popup-body {
	flex:1; min-height:0; overflow-y:auto;
	overflow-x:hidden;
	padding:20px 18px;
	border-top:0; box-shadow:none;
}
/* body 안 첫 자식의 추가 border-top 차단 */
body .popup-box .popup-body > *:first-child {
	border-top:0; margin-top:0;
}
.popup-box .popup-body::-webkit-scrollbar { width:4px; }
.popup-box .popup-body::-webkit-scrollbar-thumb { background:var(--unc-ink-3); border-radius:4px; }

/* foot — 액션 영역 (기본 작은 popup: 보더/그림자 없음) */
.popup-box .popup-foot {
	flex-shrink:0;
	background:#fff;
	border-top:0; box-shadow:none;
	padding:14px 16px max(14px, env(safe-area-inset-bottom));
}
.popup-box .popup-foot .btn { width:100%; }

/* 차량 조회/상세 유휴 만료 안내 — 확인 전에는 오래된 예약 화면을 다시 조작할 수 없다. */
.booking-idle-popup__message {
	margin:0;
	font-size:0.9375rem;
	font-weight:500;
	line-height:1.65;
	color:var(--unc-ink-2);
	word-break:keep-all;
}
/* 큰 popup (약관/캘린더 등 스크롤 가능): foot 보더로 본문/액션 구분 */
.popup-box .box.wide .popup-foot,
.popup-box .box.space .popup-foot {
	border-top:1px solid var(--unc-line);
	box-shadow:0 -8px 20px rgba(0,0,0,0.03);
}

/* agree-box — 약관/개인정보 본문 (fetched HTML 컨테이너) */
.popup-box .agree-box {
	font-size:0.8125rem; font-weight:400; line-height:1.7;
	color:var(--unc-ink-3); letter-spacing:0;
}
.popup-box .agree-box p { margin:0 0 12px; word-break:keep-all; }
.popup-box .agree-box p:last-child { margin-bottom:0; }
.popup-box .agree-box table {
	width:100%; margin:8px 0 16px;
	border-collapse:collapse; font-size:0.75rem;
	/* table-layout:fixed → 컬럼 균등 분배. 없으면 내용 긴 컬럼이 폭을 독식해
	   다른 컬럼(예: "수집 및 이용 목적")이 ~40px 로 짓눌려 글자 단위로 부서짐 */
	table-layout:fixed;
}
.popup-box .agree-box table th,
.popup-box .agree-box table td {
	padding:8px 10px; border:1px solid var(--unc-line);
	text-align:left; vertical-align:top; overflow-wrap:anywhere;
}
.popup-box .agree-box table th {
	background:var(--unc-bg-soft); font-weight:600; color:var(--unc-ink);
}


/* ===== Component: .branch-popup ======================== */
/* sch-branch popup (지점 검색) — common.js 가 box[data-name=sch-branch] 으로 활성 */
.branch-popup .popup-head { padding:18px 16px; border-bottom:1px solid var(--unc-line); }
.branch-popup__body { padding:18px 18px 4px; }
/* 도시 검색 + 지점 선택 가로 2-col (popup 세로 길이 축소) */
.branch-popup__row {
	display:grid; grid-template-columns:1fr 1fr; gap:12px;
	margin-bottom:18px;
}
.branch-popup__row > *,
.branch-popup__group,
.branch-select { min-width:0; max-width:100%; }
.branch-popup__row .branch-popup__group { margin-bottom:0; }
@media (max-width:600px) {
	.branch-popup__row { grid-template-columns:1fr; gap:14px; }
}
.branch-popup__group { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.branch-popup__group-label {
	font-size:0.8125rem; font-weight:600; color:var(--unc-ink-2); letter-spacing:0;
}
.branch-popup__search {
	position:relative;
	background:var(--unc-bg-soft); border:1px solid var(--unc-bg-soft); border-radius:12px;
	transition: border-color .15s var(--unc-ease), background-color .15s var(--unc-ease);
}
.branch-popup__search:focus-within {
	background:#fff; border-color:var(--unc-brand);
	box-shadow:0 0 0 3px rgba(36,210,44,0.18);
}
.branch-popup__search-input {
	width:100%; height:48px; padding:0 3.25rem 0 1rem;
	background:transparent; border:0; outline:none;
	font-size:0.9375rem; font-weight:500; color:var(--unc-ink); letter-spacing:0;
}
.branch-popup__search-input::placeholder { color:var(--unc-muted-2); }
.branch-popup__search-clear {
	position:absolute; top:50%; right:.125rem; z-index:2;
	width:2.75rem; height:2.75rem; padding:0;
	transform:translateY(-50%);
	border:0; border-radius:50%; background:transparent;
	cursor:pointer; touch-action:manipulation;
}
.branch-popup__search-clear[hidden] { display:none; }
.branch-popup__search-clear:hover,
.branch-popup__search-clear:focus-visible { background:var(--unc-bg-soft-2, #edf4ed); }
.branch-popup__search-clear span,
.branch-popup__search-clear span::after {
	position:absolute; top:50%; left:50%;
	width:.875rem; height:.125rem; border-radius:.125rem;
	background:var(--unc-muted);
	content:'';
}
.branch-popup__search-clear span { transform:translate(-50%, -50%) rotate(45deg); }
.branch-popup__search-clear span::after { transform:translate(-50%, -50%) rotate(90deg); }
.branch-popup__divider {
	height:1px; background:var(--unc-line); margin:18px 0; border:0;
}
.branch-popup__actions { display:flex; gap:10px; }
.branch-popup__actions .btn { flex:1; min-width:0; height:48px; }


/* ===== Component: .branch-detail-popup ================ */
.branch-detail-popup .popup-head { padding:18px 16px; border-bottom:1px solid var(--unc-line); }
.branch-detail-popup__body { padding:20px 18px; }
.branch-detail-popup__actions { display:flex; gap:10px; }
.branch-detail-popup__actions .btn { flex:1; min-width:0; height:48px; }

/* 선택된 지점 헤더 (도시검색/지점선택 input 대체) */
.branch-detail-popup__selected {
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:14px 16px;
	background:var(--unc-bg-soft); border-radius:12px;
}
.branch-detail-popup__selected-info {
	display:flex; align-items:center; gap:8px; min-width:0; flex:1;
}
.branch-detail-popup__selected-text {
	display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0;
}
.branch-detail-popup__selected-name {
	font-size:1rem; font-weight:700; color:var(--unc-ink); letter-spacing:0;
}
.branch-detail-popup__selected-hours {
	flex-basis:100%;
	font-size:0.75rem; font-weight:500; color:var(--unc-muted); letter-spacing:0;
}
.branch-detail-popup__change {
	flex-shrink:0; padding:8px 14px;
	background:#fff; border:1px solid var(--unc-line-2); border-radius:8px;
	font-size:0.8125rem; font-weight:600; color:var(--unc-ink-2);
	cursor:pointer;
	transition: border-color .15s var(--unc-ease), color .15s var(--unc-ease);
}
.branch-detail-popup__change:hover {
	border-color:var(--unc-brand); color:var(--unc-brand-strong);
}
/* 영업시간(좌) + 지도(우) 가로 2-col */
.branch-detail-popup__split {
	display:grid; grid-template-columns:1fr 1fr; gap:16px;
	align-items:start; margin-top:16px;
}
.branch-detail-popup__split > .hours-table,
.branch-detail-popup__split > .branch-map { margin-top:0; }
@media (max-width:600px) {
	.branch-detail-popup__split { grid-template-columns:1fr; }
}


/* ===== Component: .branch-info (지점 정보) ============ */
.branch-info {
	display:flex; align-items:center; min-height:60px;
	padding:16px 18px; border:1px solid var(--unc-line); border-radius:12px;
	background:var(--unc-bg-soft); margin-top:8px;
}
.branch-info__head { margin-bottom:10px; }
.branch-info__name {
	font-size:1.0625rem; font-weight:800; letter-spacing:0; color:var(--unc-ink);
}
.branch-info__name-en {
	margin-top:2px;
	font-size:0.75rem; font-weight:500; color:var(--unc-muted); letter-spacing:0;
}
.branch-info__body { display:flex; flex-direction:column; justify-content:center; gap:6px; width:100%; }
.branch-info__meta:empty { display:none; }
/* legacy pickup-box p 의 색이 cascade로 흐림 — 명시적 ink 색 */
body .branch-info .branch-info__meta,
body .branch-info p.branch-info__meta {
	font-size:0.8125rem; font-weight:500; line-height:1.55;
	color:var(--unc-ink-2);
	word-break:break-all;
	margin:0;
}


/* ===== Component: .hours-table (영업시간 4-col grid) === */
.hours-table { margin-top:16px; }
.hours-table__head { margin-bottom:10px; }
.hours-table__title {
	font-size:0.875rem; font-weight:700; color:var(--unc-ink); display:flex; align-items:center; gap:6px;
}
.hours-table__caution-tag {
	font-size:0.6875rem; font-weight:600; color:var(--unc-danger);
	font-style:normal; padding:2px 6px;
	background:var(--unc-danger-soft); border-radius:4px;
}
/* 기존 사용자 페이지와 같은 강조 — 볼드 + 로고 초록 + 한 단계 큰 글씨. */
.hours-table__notes {
	margin-top:6px;
	font-size:0.8125rem; line-height:1.5; font-weight:700; color:var(--unc-brand-text);
}
/* base.css 의 * { font-size:0.875rem } 강제 reset 회피 */
.hours-table__notes p {
	margin:0;
	font-size:inherit; line-height:inherit; color:inherit;
}
/* 7일 → 3 column 그리드 (월/화/수 + 목/금/토 + 일) — legacy flex override */
body .hours-table .hours-table__list {
	list-style:none; padding:0; margin:0;
	display:grid !important; grid-template-columns:repeat(3, 1fr) !important;
	border:1px solid var(--unc-line); border-radius:10px; overflow:hidden;
}
body .hours-table .hours-table__list .hours-table__row {
	display:flex !important; flex-direction:column; align-items:stretch;
	padding:0; min-height:64px;
	width:auto !important; margin:0 !important;
	border:0; border-right:1px solid var(--unc-line);
	border-bottom:1px solid var(--unc-line);
}
body .hours-table .hours-table__row:nth-child(3n) { border-right:0; }
/* 마지막 행 cell 만 border-bottom 0 (3-col, 7-item = 마지막 1개 cell 만) */
body .hours-table .hours-table__row:last-child { border-bottom:0; }
.hours-table__day {
	background:var(--unc-bg-soft);
	height:28px; display:flex; align-items:center; justify-content:center;
	font-size:0.8125rem; font-weight:700; color:var(--unc-ink);
}
.hours-table__hours {
	flex:1;
	display:flex; align-items:center; justify-content:center;
	padding:6px 2px;
	text-align:center;
	font-size:0.6875rem; line-height:1.5; color:var(--unc-ink-2);
}
.hours-table__row.is-closed .hours-table__hours {
	color:var(--unc-muted); font-weight:600;
}


/* ===== Component: .branch-map (지점 지도) ============ */
.branch-map { position:relative; margin-top:16px; }
.branch-map__frame {
	width:100%; height:260px; border-radius:12px; overflow:hidden;
	border:1px solid var(--unc-line); background:var(--unc-bg-soft);
}
.branch-map__frame iframe { width:100%; height:100%; border:0; display:block; }
/* 지도 확대 — 우측 상단 작은 배지 (legacy: position absolute) */
.branch-map__resize {
	position:absolute; right:12px; top:12px; z-index:2;
	display:inline-flex; align-items:center; padding:6px 12px;
	background:var(--unc-brand); color:var(--unc-ink); border-radius:999px;
	font-size:0.75rem; font-weight:700; text-decoration:none;
	box-shadow:0 4px 10px rgba(36,210,44,0.25);
	transition: background-color .15s var(--unc-ease);
}
.branch-map__resize:hover { background:var(--unc-brand-strong); color:#fff; }

/* .active = viewport 전체 풀스크린 */
.branch-map.active {
	position:fixed; inset:0; z-index:10000;
	background:#fff; padding:16px;
	display:flex; flex-direction:column;
	margin-top:0;
}
.branch-map.active .branch-map__frame {
	flex:1; width:100%; height:auto; border-radius:8px;
}
.branch-map.active .branch-map__resize {
	right:24px; top:24px;
	background:var(--unc-ink); color:#fff;
	padding:10px 18px; font-size:0.875rem;
}
.branch-map.active .branch-map__resize:hover { background:#000; }
body.is-map-expanded { overflow:hidden; }

/* 지점 선택/상세는 모바일 글자 배율을 따라가도록 rem 기준으로 재정의한다. */
@media (max-width:600px) {
	.popup-box { --popup-gap-y:1rem; }
	.popup-box .box {
		width:calc(100% - 1rem);
		max-width:calc(100% - 1rem);
		max-height:calc(100% - 2rem);
		border-radius:1.25rem;
	}
	body .popup-box .popup-head,
	body .popup-box .space .popup-head { padding:1rem; }
	body .popup-box .popup-head h2,
	body.v2 .popup-box .popup-head h2 { font-size:1.25rem !important; }
	.popup-box .popup-head .close { width:1.5rem; height:1.5rem; right:1rem; }
	body .popup-box .popup-body { padding:1rem; }
	.popup-box .popup-foot { padding:.75rem 1rem max(.75rem, env(safe-area-inset-bottom)); }
	.branch-popup__body,
	.branch-detail-popup__body { padding:1rem; }
	.branch-popup__row { gap:.75rem; margin-bottom:1rem; }
	.branch-popup__group { gap:.5rem; margin-bottom:1rem; }
	.branch-popup__group-label { font-size:.9375rem; line-height:1.4; }
	.branch-popup__search { border-radius:.75rem; }
	body .popup-box .branch-popup .branch-popup__search-input {
		height:3.25rem; padding:0 1rem;
		font-size:1rem !important; line-height:1.4;
	}
	.branch-popup__divider { margin:1rem 0; }
	.branch-popup__actions,
	.branch-detail-popup__actions { gap:.625rem; }
	.branch-popup__actions .btn,
	.branch-detail-popup__actions .btn { height:3rem; }
	.branch-detail-popup__selected { gap:.75rem; padding:.875rem 1rem; border-radius:.75rem; }
	.branch-detail-popup__selected-name { font-size:1rem; }
	.branch-detail-popup__selected-hours { font-size:.75rem; }
	.branch-detail-popup__change { padding:.5rem .875rem; border-radius:.5rem; font-size:.8125rem; }
	.branch-detail-popup__split { gap:1rem; margin-top:1rem; }
	.branch-map__frame { height:15rem; border-radius:.75rem; }
	.branch-map__resize { right:.75rem; top:.75rem; padding:.375rem .75rem; font-size:.75rem; }
}


/* ===== Component: .package-info (보험 popup 내용) ===== */
.package-info__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
.package-info__item {
	padding:14px 16px; border:1px solid var(--unc-line); border-radius:12px;
	background:var(--unc-bg-soft);
}
.package-info__name {
	font-size:0.875rem; font-weight:800; color:var(--unc-ink); letter-spacing:0;
	line-height:1.45;
}
.package-info__desc {
	display:block; margin-top:8px;
	font-size:0.8125rem; line-height:1.55; color:var(--unc-ink-3);
}


/* ===== Component: .confirm-popup (예약 취소 / 완료) === */
.confirm-popup__message {
	padding:24px 16px;
	text-align:center; font-size:1rem; font-weight:600; color:var(--unc-ink);
	line-height:1.5; word-break:keep-all;
}
.confirm-popup__actions { display:flex; gap:10px; }
.confirm-popup__actions .btn { flex:1; min-width:0; height:48px; }


/* ===== Component: .popup-catalog (popup.html dev catalog) === */
.popup-catalog {
	display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
	gap:10px; margin-top:20px;
}
.popup-catalog .btn { height:48px; font-size:0.875rem; }


/* ===== Component: .text-list (팝업 안 체크 리스트) ===== */
.text-list-box,
.text-list {
	font-size:0.875rem; line-height:1.65; color:var(--unc-ink-2);
	letter-spacing:0;
}
.text-list > strong {
	display:block; font-size:0.9375rem; font-weight:700;
	color:var(--unc-ink); margin-bottom:10px;
}
.text-list-box ul,
.text-list ul {
	padding:0; margin:0; list-style:none;
	font-size:inherit; line-height:inherit;
}
.text-list-box ul li,
.text-list ul li {
	position:relative; padding-left:18px; margin-bottom:8px; word-break:keep-all;
	font-size:inherit; line-height:inherit;
}
.text-list-box ul li::before,
.text-list ul li::before {
	content:""; position:absolute; left:0; top:.825em; transform:translateY(-50%);
	width:6px; height:6px; border-radius:50%; background:var(--unc-brand);
}
.text-list-box p {
	margin:14px 0 0; padding-top:14px; border-top:1px solid var(--unc-line);
	font-size:0.8125rem; line-height:1.65; word-break:keep-all;
}
.text-list-box a { color:var(--unc-brand-strong); font-weight:700; text-decoration:underline; }
.text-list ul li.inner {
	padding-left:34px; color:var(--unc-ink-3); font-size:0.8125rem;
}
.text-list ul li.inner::before {
	left:18px; width:4px; height:4px; background:var(--unc-muted-2);
}
.text-list ul li b { font-weight:700; color:var(--unc-ink); }
.text-list ul li button {
	display:inline; padding:0; margin-left:4px;
	background:none; border:0; font:inherit;
	color:var(--unc-brand-strong); text-decoration:underline; cursor:pointer;
}