/* ============================================================
   datepicker.css
   Hyomin Design System v1.0 — DatePicker Component

   사용법:
   <div class="datepicker" id="dp-1">
     <div class="datepicker__input-wrap">
       <input class="datepicker__input" type="text" readonly placeholder="날짜 선택" />
       <input class="datepicker__hidden" type="hidden" name="date" />
       <button class="datepicker__trigger" type="button" aria-label="달력 열기" aria-expanded="false">...</button>
     </div>
     <div class="datepicker__popup">...</div>
   </div>
   ============================================================ */

/* ─── Backdrop ─── */
.datepicker-backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 199;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-base) var(--easing-default);
}

.datepicker-backdrop--open {
	opacity: 1;
	pointer-events: auto;
}

/* ─── Root ─── */
.datepicker {
	position: relative;
	display: inline-block;
	width: 100%;
	/*max-width: 320px;*/
}

/* ─── Input Wrap ─── */
.datepicker__input-wrap {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	/*
	height: 44px;
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--radius-md);
	background-color: #ffffff;
	transition:
		border-color var(--duration-base) var(--easing-default),
		box-shadow var(--duration-base) var(--easing-default);
	overflow: hidden;
	*/
}

/*.datepicker__input-wrap:focus-within {
	border-color: var(--color-primary-main);
	box-shadow: 0 0 0 3px var(--color-primary-focus);
}*/

/* ─── Input ─── */
/*.datepicker__input {
	flex: 1;
	height: 100%;
	padding: 0 var(--spacing-3);
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-regular);
	color: var(--gray-700);
	cursor: pointer;
}

.datepicker__input::placeholder {
	color: var(--gray-300);
}*/

/* ─── Trigger Button ─── */
.datepicker__trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Crect x='2.5' y='4' width='15' height='13' rx='2' stroke='currentColor' stroke-width='1.5' /%3E%3Cpath d='M2.5 8h15' stroke='currentColor' stroke-width='1.5' /%3E%3Cpath d='M6.5 2v3M13.5 2v3' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' /%3E%3C/svg%3E");
	color: var(--gray-400);
	cursor: pointer;
	transition: color var(--duration-base) var(--easing-default);
}

.datepicker__trigger:hover {
	color: var(--color-primary-main);
}

.datepicker__trigger svg {
	width: 20px;
	height: 20px;
}

/* ─── Popup ─── */
.datepicker__popup {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 200;
	width: 264px;
	padding: var(--spacing-3); /* 12px */
	background-color: #ffffff;
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition:
		opacity var(--duration-base) var(--easing-default),
		transform var(--duration-base) var(--easing-default);
}

.datepicker__popup--open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* ─── 닫기(×) 버튼 ─── */
.datepicker__close {
	position: absolute;
	top: 18px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border: none;
	border-radius: var(--radius-full);
	background: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' aria-hidden='true'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='currentColor' stroke-width='1' stroke-linecap='round' /%3E%3C/svg%3E");
	color: var(--gray-400);
	cursor: pointer;
	transition: transform 0.3s ease-out;
}

.datepicker__close:hover {
	transform: rotate(270deg);
}

.datepicker__close svg {
	width: 14px;
	height: 14px;
}

/* ─── Header ─── */
.datepicker__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-3); /* 12px */
	padding-right: 20px; /* 닫기 버튼 공간 확보 */
}

.datepicker__month-year {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm); /* 16px */
	font-weight: var(--font-weight-bold);
	color: var(--gray-700);
}

/* ─── Nav Buttons ─── */
.datepicker__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--gray-500);
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--easing-default),
		color var(--duration-fast) var(--easing-default);
}

.datepicker__nav:hover {
	background-color: var(--gray-100);
	color: var(--gray-700);
}

.datepicker__nav svg {
	width: 16px;
	height: 16px;
}

/* ─── Weekdays ─── */
.datepicker__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 4px;
}

.datepicker__weekdays span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	font-weight: var(--font-weight-medium);
	color: var(--gray-400);
}

/* 일요일 빨강 */
.datepicker__weekdays span:first-child {
	color: var(--color-accent-main);
}
/* 토요일 파랑 */
.datepicker__weekdays span:last-child {
	color: var(--color-secondary-main);
}

/* ─── Days Grid ─── */
.datepicker__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px 0;
	margin-bottom: var(--spacing-3); /* 12px */
}

/* ─── Day Cell ─── */
.datepicker__day {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	border: none;
	border-radius: var(--radius-full);
	background: transparent;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-700);
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--easing-default),
		color var(--duration-fast) var(--easing-default);
}

.datepicker__day:hover:not(:disabled) {
	background-color: var(--gray-100);
}

.datepicker__day:focus-visible {
	outline: 2px solid var(--color-primary-main);
	outline-offset: 1px;
}

/* 오늘 */
.datepicker__day--today {
	border: 1.5px solid var(--color-primary-main);
	color: var(--color-primary-main);
	font-weight: var(--font-weight-bold);
}

/* 선택됨 */
.datepicker__day--selected {
	background-color: var(--color-primary-main);
	color: #ffffff;
	font-weight: var(--font-weight-bold);
}

.datepicker__day--selected:hover {
	background-color: var(--color-primary-hover);
}

/* 오늘 + 선택됨 겹칠 때 */
.datepicker__day--today.datepicker__day--selected {
	border-color: transparent;
}

/* 비활성 */
.datepicker__day--disabled {
	color: var(--gray-300);
	cursor: not-allowed;
}

.datepicker__day--disabled:hover {
	background: transparent;
}

/* 빈 셀 (앞 공백) */
.datepicker__day--empty {
	pointer-events: none;
}

/* ─── Footer ─── */
.datepicker__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-2); /* 8px */
	padding-top: var(--spacing-3); /* 12px */
	border-top: var(--border-width) solid var(--border-color);
}

.datepicker__today-btn,
.datepicker__clear-btn,
.datepicker__confirm-btn {
	height: 32px;
	padding: 0 var(--spacing-3); /* 0 12px */
	border-radius: var(--radius-md);
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--easing-default),
		color var(--duration-fast) var(--easing-default);
}

.datepicker__today-btn,
.datepicker__clear-btn {
	border: var(--border-width) solid var(--border-color);
	background: transparent;
	color: var(--gray-600);
}

.datepicker__today-btn:hover,
.datepicker__clear-btn:hover {
	background-color: var(--gray-100);
}

.datepicker__confirm-btn {
	border: none;
	background-color: var(--color-primary-main);
	color: #ffffff;
}

.datepicker__confirm-btn:hover {
	background-color: var(--color-primary-hover);
}

/* ─── Disabled (전체) ─── */
.datepicker--disabled .datepicker__input-wrap {
	background-color: var(--gray-50);
	border-color: var(--gray-200);
	pointer-events: none;
}

.datepicker--disabled .datepicker__input {
	color: var(--gray-300);
	cursor: not-allowed;
}

.datepicker--disabled .datepicker__trigger {
	color: var(--gray-300);
	cursor: not-allowed;
}

/* ─── Dark mode ─── */
[data-theme="dark"] .datepicker__input-wrap {
	background-color: var(--gray-800);
	border-color: var(--gray-600);
}

[data-theme="dark"] .datepicker__input {
	color: var(--gray-200);
}

[data-theme="dark"] .datepicker__input::placeholder {
	color: var(--gray-600);
}

[data-theme="dark"] .datepicker__trigger {
	color: var(--gray-500);
}

[data-theme="dark"] .datepicker__popup {
	background-color: var(--gray-800);
	border-color: var(--gray-600);
}

[data-theme="dark"] .datepicker__month-year {
	color: var(--gray-200);
}

[data-theme="dark"] .datepicker__close {
	color: var(--gray-500);
}

[data-theme="dark"] .datepicker__close:hover {
	background-color: var(--gray-700);
	color: var(--gray-200);
}

[data-theme="dark"] .datepicker__nav {
	color: var(--gray-400);
}

[data-theme="dark"] .datepicker__nav:hover {
	background-color: var(--gray-700);
	color: var(--gray-200);
}

[data-theme="dark"] .datepicker__weekdays span {
	color: var(--gray-500);
}

[data-theme="dark"] .datepicker__weekdays span:first-child {
	color: var(--red-400);
}
[data-theme="dark"] .datepicker__weekdays span:last-child {
	color: var(--blue-400);
}

[data-theme="dark"] .datepicker__day {
	color: var(--gray-200);
}

[data-theme="dark"] .datepicker__day:hover:not(:disabled) {
	background-color: var(--gray-700);
}

[data-theme="dark"] .datepicker__day--disabled {
	color: var(--gray-600);
}

[data-theme="dark"] .datepicker__footer {
	border-color: var(--gray-600);
}

[data-theme="dark"] .datepicker__today-btn {
	border-color: var(--gray-600);
	color: var(--gray-400);
}

[data-theme="dark"] .datepicker__today-btn:hover {
	background-color: var(--gray-700);
}

[data-theme="dark"] .datepicker--disabled .datepicker__input-wrap {
	background-color: var(--gray-900);
	border-color: var(--gray-700);
}

[data-theme="dark"] .datepicker--disabled .datepicker__input,
[data-theme="dark"] .datepicker--disabled .datepicker__trigger {
	color: var(--gray-600);
}

/* ================================================================
   Range DatePicker
   ================================================================ */

/* ─── Range Root ─── */
.datepicker--range {
	/*max-width: 480px;*/
}

/* ─── Range Inputs Row ─── */
.datepicker__range-inputs {
	display: flex;
	align-items: center;
	gap: var(--spacing-2); /* 8px */
}

.datepicker__range-inputs .datepicker__input-wrap {
	flex: 1;
	min-width: 0;
}

.datepicker__range-sep {
	flex-shrink: 0;
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	color: var(--gray-400);
}

/* ─── Range Phase Hint ─── */
.datepicker__range-phase {
	display: block;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	color: var(--color-primary-main);
	font-weight: var(--font-weight-medium);
	text-align: center;
	margin-bottom: var(--spacing-2); /* 8px */
}

/* ─── Range Day States ─── */

/* 범위 시작일 */
.datepicker__day--range-start {
	background-color: var(--color-primary-main) !important;
	color: #ffffff !important;
	font-weight: var(--font-weight-bold);
	border-radius: var(--radius-full) 0 0 var(--radius-full);
}

/* 범위 종료일 */
.datepicker__day--range-end {
	background-color: var(--color-primary-main) !important;
	color: #ffffff !important;
	font-weight: var(--font-weight-bold);
	border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* 시작일 = 종료일 */
.datepicker__day--range-start.datepicker__day--range-end {
	border-radius: var(--radius-full);
}

/* 범위 내 날짜 */
.datepicker__day--in-range {
	background-color: var(--green-50);
	border-radius: 0;
	color: var(--gray-700);
}

.datepicker__day--in-range:hover {
	background-color: var(--green-100);
}

/* Hover 미리보기 종료일 */
.datepicker__day--range-hover-end {
	background-color: var(--color-primary-light);
	color: var(--color-primary-main);
	font-weight: var(--font-weight-bold);
	border-radius: 0 var(--radius-full) var(--radius-full) 0;
	outline: 1.5px dashed var(--color-primary-main);
	outline-offset: -1.5px;
}

/* ─── Range Footer ─── */
.datepicker__reset-btn {
	height: 32px;
	padding: 0 var(--spacing-3);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--radius-md);
	background: transparent;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--easing-default);
}

.datepicker__reset-btn:hover {
	background-color: var(--gray-100);
	color: var(--gray-700);
}

/* ─── Range Dark mode ─── */
[data-theme="dark"] .datepicker__range-phase {
	color: var(--green-400);
}

[data-theme="dark"] .datepicker__day--in-range {
	background-color: var(--green-900);
	color: var(--gray-200);
}

[data-theme="dark"] .datepicker__day--in-range:hover {
	background-color: var(--green-800);
}

[data-theme="dark"] .datepicker__reset-btn {
	border-color: var(--gray-600);
	color: var(--gray-400);
}

[data-theme="dark"] .datepicker__reset-btn:hover {
	background-color: var(--gray-700);
	color: var(--gray-200);
}