/* =========================================================
   user.calendar.css — calendar grid / datetime / time-select
   ========================================================= */

/* ===== Component: .calendar (날짜 선택 그리드) ======== */
/* sch-calendar popup 내부. 좌(시작 월) + 우(반납 월) 2-up 데스크탑, 모바일은 1-up */
.calendar { display:flex; flex-direction:column; }
.calendar__head {
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
	position:relative; margin:0 0 16px;
}
.calendar__nav {
	flex-shrink:0; width:32px; height:32px; border-radius:8px;
	font-size:0; cursor:pointer; background:transparent;
	position:absolute; top:50%; transform:translateY(-50%);
	transition: background-color .15s var(--unc-ease), opacity .15s var(--unc-ease);
}
.calendar__nav--prev {
	left:0;
	background-image: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' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
	background-repeat:no-repeat; background-position:center; background-size:20px;
}
.calendar__nav--next {
	right:0;
	background-image: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' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
	background-repeat:no-repeat; background-position:center; background-size:20px;
}
.calendar__nav:hover { background-color:var(--unc-bg-soft); }
.calendar__nav[aria-disabled="true"] { opacity:0.25; pointer-events:none; }
.calendar__month-label {
	flex:1; min-width:0;
	display:flex; align-items:center; justify-content:center;
}
.calendar__month-label .date {
	height:32px; font-size:1.125rem; font-weight:800; letter-spacing:0; color:var(--unc-ink);
	display:flex; align-items:center;
}
.calendar__body { display:flex; flex-wrap:wrap; gap:16px; }
.calendar__month { flex:1; min-width:0; table-layout:fixed; border-collapse:collapse; }
.calendar__weekdays tr th {
	height:36px; font-size:0.75rem; font-weight:700; color:var(--unc-muted);
	text-align:center;
}
.calendar__weekday--sun { color:var(--unc-danger); }
.calendar__grid td { padding:0; text-align:center; }
.calendar__td--sun .calendar__cell { color:var(--unc-danger); }
.calendar__cell {
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	height:38px; padding:0;
	font-size:0.875rem; font-weight:500; color:var(--unc-ink);
	text-decoration:none;
	transition: background-color .12s var(--unc-ease);
}
.calendar__cell--past {
	background:#F2F2F2; color:var(--unc-muted-2); cursor:not-allowed;
}
/* 선택 범위 */
.calendar__cell--start,
.calendar__cell.start {
	background:var(--unc-brand); color:#fff !important;
	border-radius:6px 0 0 6px;
	justify-content:flex-end; padding-bottom:4px;
}
.calendar__cell--start::after,
.calendar__cell.start::after {
	content:"픽업"; font-size:0.625rem; font-weight:400; color:#fff;
}
.calendar__cell--end,
.calendar__cell.end {
	background:var(--unc-brand); color:#fff !important;
	border-radius:0 6px 6px 0;
	justify-content:flex-end; padding-bottom:4px;
}
.calendar__cell--end::after,
.calendar__cell.end::after {
	content:"반납"; font-size:0.625rem; font-weight:400; color:#fff;
}
.calendar__cell--oneday,
.calendar__cell.oneday { border-radius:6px; }
.calendar__cell--oneday::after,
.calendar__cell.oneday::after { content:"픽업/반납"; }
.calendar__td .ing,
.calendar__cell.ing { background:#BDFFC0; }
.calendar__cell--disabled,
.calendar__cell.disabled {
	background:#F4F5F5; color:var(--unc-muted-2) !important; cursor:not-allowed;
}
.calendar__cell--today,
.calendar__cell.today,
.calendar__td--today .calendar__cell {
	border:1px dashed var(--unc-brand); border-radius:6px;
}
.calendar__cell:hover:not(.calendar__cell--past):not(.calendar__cell--disabled):not(.calendar__cell--start):not(.calendar__cell--end) {
	background:var(--unc-brand-soft); color:var(--unc-brand-strong);
}
@media (max-width:991px) {
	.calendar__head { justify-content:space-between; }
	.calendar__nav { position:static; transform:none; }
	.calendar__month-label--end,
	.calendar__month--end { display:none; }
	.calendar__cell { height:48px; }
}


/* ===== Component: .calendar-datetime (캘린더 하단) ==== */
.calendar-datetime {
	display:flex; flex-direction:column; gap:12px; margin-top:20px;
}
.calendar-datetime__row {
	display:grid; grid-template-columns:90px minmax(0, 1fr) minmax(0, 1fr);
	align-items:center; gap:12px;
}
.calendar-datetime__label {
	font-size:0.875rem; font-weight:700; color:var(--unc-ink);
}
.calendar-datetime__display {
	display:flex; align-items:center; min-width:0;
	height:48px; padding:0 14px;
	background:var(--unc-bg-soft); border:1px solid var(--unc-bg-soft); border-radius:12px;
}
.calendar-datetime__value {
	font-size:0.875rem; font-weight:500; color:var(--unc-muted-2); letter-spacing:0;
}
.calendar-datetime__display.active .calendar-datetime__value,
.calendar-datetime__display.is-filled .calendar-datetime__value {
	color:var(--unc-ink); font-weight:500;
}
.calendar-datetime__display.active,
.calendar-datetime__display.is-filled {
	background:#fff; border-color:var(--unc-ink);
}
@media (max-width:991px) {
	.calendar-datetime__row { grid-template-columns:78px minmax(0, 1fr) minmax(0, 1fr); gap:8px; }
	.calendar-datetime__label { font-size:0.8125rem; }
}


/* ===== Component: .time-select (시간 dropdown) ======== */
/* .branch-select 컴포넌트 위에 .time-select polish — 한 자리 selectable */
.time-select { position:relative; }
.time-select__trigger {
	display:flex; align-items:center; justify-content:space-between;
	width:100%; height:48px; padding:0 14px;
	background:#fff; border:1px solid var(--unc-ink); border-radius:12px;
	font-size:0.875rem; font-weight:500; color:var(--unc-ink); letter-spacing:0;
	cursor:pointer; text-align:left;
}
/* 값 select 박스 전체 통일 — calendar-datetime__display 와 동일한 시각 */
.time-select__value { font-weight:500; }
.time-select__trigger::after {
	content:""; flex-shrink:0; width:16px; height:16px; margin-left:6px;
	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' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / 16px;
	transition: transform .15s var(--unc-ease);
}
.time-select.focus .time-select__trigger::after { transform:rotate(180deg); }
.time-select__panel {
	display:none;
	position:absolute; left:0; top:calc(100% + 6px); right:0;
	background:#fff; border:1px solid var(--unc-line);
	border-radius:12px; box-shadow:var(--unc-shadow-md);
	z-index:20; max-height:200px; overflow-y:auto;
}
.time-select.focus .time-select__panel { display:block; }
.time-select__list { padding:6px 0; margin:0; }
.time-select__item { margin:0; }
.time-select__item a {
	display:flex; align-items:center; justify-content:space-between; gap:8px;
	padding:10px 14px; font-size:0.875rem; color:var(--unc-ink-2);
	text-decoration:none;
}
.time-select__item a:hover { background:var(--unc-bg-soft); color:var(--unc-brand-strong); }
.time-select__badge {
	flex-shrink:0; min-width:0;
	padding:3px 6px; border-radius:6px;
	background:var(--unc-brand-soft); color:var(--unc-brand-strong);
	font-size:0.6875rem; font-weight:700;
}
.time-select.is-empty .time-select__trigger,
.time-select.is-disabled .time-select__trigger {
	border-color:var(--unc-line); color:var(--unc-muted-2);
}
.time-select.is-disabled .time-select__trigger {
	cursor:not-allowed; background:var(--unc-bg-soft);
}
.time-select__item--empty span {
	display:block; padding:10px 14px;
	font-size:0.8125rem; color:var(--unc-muted-2);
}

/* 모바일 캘린더는 하단 액션 영역이 고정되어 있으므로 시간 목록을 위로 연다.
   목록은 캘린더 본문 안에서 스크롤되고 닫기/선택 버튼 뒤로 내려가지 않는다. */
@media (max-width:600px) {
	.calendar-popup .time-select.focus { z-index:40; }
	.calendar-popup .time-select__panel {
		top:auto !important;
		bottom:calc(100% + .375rem);
		max-height:min(12rem, 40dvh);
		z-index:100;
		overscroll-behavior:contain;
	}
}


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


/* =========================================================
   JS 가 생성하는 legacy 마크업 (.cal-head, .cal-body, table, a.date)
   에 대한 룰 — BEM .calendar__* 와 동일한 시각.
   ========================================================= */

/* 캘린더 컨테이너 (.calendar-box) */
.calendar-box { display:flex; flex-direction:column; position:relative; min-height:372px; }
.calendar-box.is-availability-loading .cal-head,
.calendar-box.is-availability-loading .cal-body { visibility:hidden; }
.calendar-box.is-availability-loading::after {
	content:"지점 현지 일정을 확인하고 있어요.";
	position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
	min-height:240px;
	font-size:0.875rem; font-weight:700; color:var(--unc-muted);
	background:linear-gradient(90deg, #F6F8F7 25%, #ECF3EF 50%, #F6F8F7 75%);
	background-size:200% 100%; border-radius:16px;
	animation:calendar-availability-loading 1.2s ease-in-out infinite;
}
@keyframes calendar-availability-loading {
	0% { background-position:100% 0; }
	100% { background-position:-100% 0; }
}

/* 헤더: [< prev] [월 라벨1] [월 라벨2] [next >]
   위쪽 .calendar__nav { position:absolute } 룰 강제 무효화하고 grid item 으로 배치 */
.calendar-box .cal-head {
	display:grid; grid-template-columns:32px 1fr 1fr 32px;
	align-items:center; gap:8px;
	margin:0 0 16px;
	position:static;
}
.calendar-box .cal-head .prev,
.calendar-box .cal-head .next {
	position:static !important; transform:none !important;
	left:auto !important; right:auto !important; top:auto !important;
	width:32px; height:32px; border-radius:8px;
	font-size:0; background-repeat:no-repeat; background-position:center; background-size:20px;
	background-color:transparent; cursor:pointer; text-decoration:none;
	transition: background-color .15s var(--unc-ease), opacity .15s var(--unc-ease);
}
.calendar-box .cal-head .prev {
	grid-column:1;
	background-image: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' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.calendar-box .cal-head .next {
	grid-column:4;
	background-image: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' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}
.calendar-box .cal-head .prev:hover,
.calendar-box .cal-head .next:hover { background-color:var(--unc-bg-soft); }
.calendar-box .cal-head .prev[aria-disabled="true"],
.calendar-box .cal-head .next[aria-disabled="true"] { opacity:0.25; pointer-events:none; }
/* 월 라벨 wrapper (div.cal-head-start/end) 도 grid 위치 명시 */
.calendar-box .cal-head .cal-head-start { grid-column:2; }
.calendar-box .cal-head .cal-head-end { grid-column:3; }
.calendar-box .cal-head .calendar__month-label,
.calendar-box .cal-head .date {
	display:flex; align-items:center; justify-content:center;
	font-size:1.125rem; font-weight:800; letter-spacing:0; color:var(--unc-ink);
}

/* 본문: 두 달 grid */
.calendar-box .cal-body {
	display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.calendar-box .cal-body > table {
	width:100%; table-layout:fixed; border-collapse:collapse;
}
.calendar-box .cal-body thead th {
	height:36px; padding:0;
	font-size:0.75rem; font-weight:700; color:var(--unc-muted);
	text-align:center; line-height:1;
}
.calendar-box .cal-body thead th:first-child { color:var(--unc-danger); }
.calendar-box .cal-body tbody td {
	padding:0; height:44px; text-align:center; vertical-align:middle;
	position:relative;
}
/* 일요일 — 톤다운 (시뻘건 #DC2626 보다 부드러운 살몬) */
.calendar-box .cal-body tbody td.sun a.date { color:#E15D6A; }

/* 오늘 — 점 표시만 (border/색 강제 없음 → sun 색 유지) */
.calendar-box .cal-body td.today a.date::after {
	content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
	width:4px; height:4px; border-radius:50%; background:var(--unc-brand);
}

/* 날짜 셀 — enable 기본 */
.calendar-box .cal-body a.date {
	position:relative;
	display:inline-flex; align-items:center; justify-content:center;
	width:38px; height:38px; border-radius:50%;
	font-size:0.875rem; font-weight:600; line-height:1; color:var(--unc-ink);
	text-decoration:none;
	transition: background-color .12s var(--unc-ease), color .12s var(--unc-ease);
}
.calendar-box .cal-body a.date:hover:not(.disabled):not(.past):not(.closed):not(.start):not(.end):not(.ing):not(.oneday) {
	background:var(--unc-brand-soft); color:var(--unc-brand-strong);
}

/* 과거 — 가장 옅게, 회색, decoration 없음 */
.calendar-box .cal-body a.date.past {
	color:#C5C9CE; font-weight:400;
	pointer-events:none; cursor:not-allowed;
	background:transparent; text-decoration:none; border:0;
}
.calendar-box .cal-body td.today a.date.past::after { display:none; }
/* 휴무 (closed) — 회색 텍스트 + 회색 strikethrough (빨강 X) */
.calendar-box .cal-body a.date.closed {
	color:#A8AEB5; font-weight:400;
	pointer-events:none; cursor:not-allowed;
	background:transparent;
	text-decoration:line-through;
	text-decoration-thickness:1.2px;
	text-decoration-color:#C5C9CE;
}
.calendar-box .cal-body td.sun a.date.closed { color:#D58A91; text-decoration-color:#C5C9CE; }
/* 그 외 disabled (out-of-range) */
.calendar-box .cal-body a.date.disabled:not(.past):not(.closed) {
	color:var(--unc-muted-2); font-weight:400;
	pointer-events:none; cursor:not-allowed;
	background:transparent;
}

/* 범위 연결 trail — td 자체에 brand-soft bg, a.date 동그라미가 그 위에 (z-index) */
/* start: 우측 절반 trail */
.calendar-box .cal-body td:has(> a.date.start:not(.end):not(.oneday))::before {
	content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
	width:50%; height:38px; background:var(--unc-brand-soft); z-index:0;
}
/* end: 좌측 절반 trail */
.calendar-box .cal-body td:has(> a.date.end:not(.start):not(.oneday))::before {
	content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
	width:50%; height:38px; background:var(--unc-brand-soft); z-index:0;
}
/* ing: 전체 폭 trail */
.calendar-box .cal-body td:has(> a.date.ing)::before {
	content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
	width:100%; height:38px; background:var(--unc-brand-soft); z-index:0;
}

/* 픽업 / 반납 / 같은날 — brand 동그라미 (sun/today color 강제 override) */
.calendar-box .cal-body td.sun a.date.start,
.calendar-box .cal-body td.sun a.date.end,
.calendar-box .cal-body td.sun a.date.oneday,
.calendar-box .cal-body a.date.start,
.calendar-box .cal-body a.date.end,
.calendar-box .cal-body a.date.oneday {
	background:var(--unc-brand); color:#fff; font-weight:700;
	border:0;
	text-decoration:none;
	z-index:1;  /* trail 위에 */
}
.calendar-box .cal-body td.today a.date.start::after,
.calendar-box .cal-body td.today a.date.end::after,
.calendar-box .cal-body td.today a.date.oneday::after {
	background:#fff;  /* 오늘 점도 흰색으로 동그라미 위에 */
}

/* ing — 그냥 a 자체엔 bg 없고 td trail 로 표시 */
.calendar-box .cal-body td.sun a.date.ing,
.calendar-box .cal-body a.date.ing,
.calendar-box .cal-body a.date.ing.closed,
.calendar-box .cal-body a.date.ing.disabled {
	background:transparent; color:var(--unc-brand-strong);
	border-radius:0;
	text-decoration:none;
	font-weight:600;
	z-index:1;
}
.calendar-box .cal-body a.date.ing:not(.closed):not(.disabled) {
	pointer-events:auto; cursor:pointer;
}
.calendar-box .cal-body a.date.ing.closed,
.calendar-box .cal-body a.date.ing.disabled {
	pointer-events:none; cursor:not-allowed;
}

/* 모바일: 두 번째 월 라벨/표는 JS 엔진(getCalendarVisibleMonths) 이 렌더 안 함.
   여기서는 grid 만 1열로 조정. cal-head 도 3열 + next 위치만 조정. */
@media (max-width:991px) {
	.calendar-box .cal-body { grid-template-columns:1fr; }
	.calendar-box .cal-head { grid-template-columns:32px 1fr 32px; }
	.calendar-box .cal-head .next { grid-column:3; }
}