/**
 * datepicker.css — 13.Seohyeon 공통 날짜 선택기
 * 위치: /var/www/test_seohyeon/public/assets/css/datepicker.css
 * 사용: <input class="datepicker" data-mode="date|datetime">
 * 테마: theme.css CSS 변수 기반 (light/dark 자동 대응)
 */

/* ── 트리거 input ── */
.datepicker-wrap {
    position: relative;
    display: inline-flex;
    width: 100%;
}
.datepicker-input {
    width: 100%;
    padding: 8px 36px 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm-1);
    background: var(--surface);
    color: var(--text);
    font-family: 'InfinitySans', 'EliceBaeum', sans-serif;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
}
.datepicker-input:focus,
.datepicker-input.dp-open {
    border-color: var(--blade);
    box-shadow: 0 0 0 2px var(--bladeL);
}
.datepicker-input::placeholder {
    color: var(--muted);
    opacity: 0.6;
}
/* 캘린더 아이콘 */
.datepicker-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-size: 14px;
}

/* ── 드롭다운 패널 ── */
.dp-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    background: var(--surface-strong, var(--surface));
    border: 1px solid var(--line-strong, var(--border));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: 14px;
    min-width: 260px;
    user-select: none;
}
.dp-panel.dp-visible {
    display: block;
    animation: dpFadeIn .15s ease;
}
@keyframes dpFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 헤더 (년/월 이동) ── */
.dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.dp-header-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.dp-header-label:hover { color: var(--blade); }
.dp-nav {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 16px;
    padding: 2px 6px;
    border-radius: var(--radius-sm-1);
    transition: background var(--transition), color var(--transition);
    line-height: 1;
}
.dp-nav:hover {
    background: var(--bladeL);
    color: var(--blade);
}

/* ── 요일 헤더 ── */
.dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.dp-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    padding: 3px 0;
}
.dp-weekday:first-child { color: var(--red, #EF4444); }
.dp-weekday:last-child  { color: var(--blade); }

/* ── 날짜 그리드 ── */
.dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.dp-day {
    text-align: center;
    font-size: 12px;
    padding: 5px 2px;
    border-radius: var(--radius-sm-1);
    cursor: pointer;
    color: var(--text);
    transition: background var(--transition), color var(--transition);
    line-height: 1.4;
}
.dp-day:hover:not(.dp-day-empty):not(.dp-day-disabled) {
    background: var(--bladeL);
    color: var(--blade);
}
.dp-day-empty   { cursor: default; }
.dp-day-disabled { color: var(--muted); opacity: 0.4; cursor: default; }
.dp-day-sun     { color: var(--red, #EF4444); }
.dp-day-sat     { color: var(--blade); }
.dp-day-today {
    font-weight: 700;
    color: var(--blade);
}
.dp-day-selected {
    background: var(--blade);
    color: #fff !important;
    font-weight: 600;
}
.dp-day-selected:hover {
    background: var(--blade);
    opacity: 0.9;
}

/* ── 시간 선택 (datetime 전용) ── */
.dp-time-wrap {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line, var(--border));
    display: flex;
    align-items: center;
    gap: 6px;
}
.dp-time-label {
    font-size: 12px;
    color: var(--muted);
    flex-shrink: 0;
}
.dp-time-select {
    flex: 1;
    padding: 5px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm-1);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition);
}
.dp-time-select:focus { border-color: var(--blade); }
.dp-time-colon {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

/* ── 하단 버튼 ── */
.dp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line, var(--border));
}
.dp-btn {
    padding: 5px 12px;
    border-radius: var(--radius-sm-1);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: background var(--transition), color var(--transition);
}
.dp-btn-cancel {
    background: transparent;
    color: var(--muted);
}
.dp-btn-cancel:hover { background: var(--surface-soft, var(--bg)); }
.dp-btn-clear {
    background: transparent;
    color: var(--red, #EF4444);
    border-color: transparent;
}
.dp-btn-clear:hover { background: rgba(239,68,68,.08); }
.dp-btn-confirm {
    background: var(--blade);
    color: #fff;
    border-color: var(--blade);
}
.dp-btn-confirm:hover { opacity: 0.88; }

/* ── 년/월 선택 뷰 ── */
.dp-year-grid,
.dp-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 6px;
}
.dp-year-item,
.dp-month-item {
    text-align: center;
    padding: 7px 4px;
    border-radius: var(--radius-sm-1);
    font-size: 12px;
    cursor: pointer;
    color: var(--text);
    transition: background var(--transition), color var(--transition);
}
.dp-year-item:hover,
.dp-month-item:hover {
    background: var(--bladeL);
    color: var(--blade);
}
.dp-year-item.dp-selected,
.dp-month-item.dp-selected {
    background: var(--blade);
    color: #fff;
    font-weight: 600;
}