/* ============================================================
 * hy_datepicker_skin.css — jQuery UI Datepicker 모던 스킨
 * hayan_total 입력폼 공통 (dateinput, checkcombo3 자녀 생년월일 등)
 * jquery-ui.css 뒤에 로드해야 오버라이드됨
 * [2026-07-05 신설 / 화살표 높이·라인 정리 v2]
 * ============================================================ */

.ui-datepicker {
    width: 302px;
    padding: 16px 16px 12px;
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16);
    font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
}

/* ── 헤더 ───────────────────────────────── */
.ui-datepicker .ui-datepicker-header {
    background: transparent;
    border: 0;
    padding: 0 0 12px;
    font-weight: 700;
}
.ui-datepicker .ui-datepicker-title {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    line-height: 1;
    margin: 0 36px;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: auto;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    cursor: pointer;
}
.ui-datepicker select.ui-datepicker-month:focus,
.ui-datepicker select.ui-datepicker-year:focus {
    outline: none;
    border-color: var(--primary, #f0473e);
}

/* ── 이전/다음 화살표 (년/월 셀렉트와 수직 중앙 정렬) ── */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 0 !important;
    width: 31px;
    height: 31px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev { left: 0 !important; }
.ui-datepicker .ui-datepicker-next { right: 0 !important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: #f6f7f9;
    border-color: #eceff3;
}
/* 스프라이트 아이콘 제거 후 문자 화살표 */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
    content: '\2039'; /* ‹ */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
    font-size: 22px;
    font-weight: 600;
    color: #6b7280;
    line-height: 1;
}
.ui-datepicker .ui-datepicker-next::after {
    content: '\203A'; /* › */
}

/* ── 요일 헤더 ───────────────────────────── */
.ui-datepicker table { margin: 0; font-size: 14px; border: 0; }
.ui-datepicker th {
    padding: 8px 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    border: 0;
    background: transparent;
}
.ui-datepicker th:first-child { color: #ef4444; }   /* 일 */
.ui-datepicker th:last-child  { color: #3b82f6; }   /* 토 */

/* ── 날짜 셀 ─────────────────────────────── */
.ui-datepicker td { padding: 2px; border: 0; background: transparent; }
/* 기본 상태: 회색 원/테두리 전부 제거 (jquery-ui 기본 테마 강제 오버라이드) */
.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: none;
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;
    color: #374151;
    transition: background 0.12s;
}
.ui-datepicker td:first-child a.ui-state-default { color: #ef4444; } /* 일요일 */
.ui-datepicker td:last-child  a.ui-state-default { color: #3b82f6; } /* 토요일 */

/* hover: 배경과 살짝만 차이나는 아주 연한 회색 */
.ui-datepicker td a.ui-state-default.ui-state-hover {
    background: #f6f7f9 !important;
    border: 0 !important;
}

/* 오늘: 메인컬러 라인(링)만 */
.ui-datepicker td a.ui-state-default.ui-state-highlight,
.ui-datepicker td a.ui-state-highlight {
    background: #fff !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1.5px var(--primary, #f0473e) !important;
    color: var(--primary, #f0473e) !important;
    font-weight: 700;
}

/* 선택(클릭)한 날: 메인컬러 채움, 라인 없음 */
.ui-datepicker td a.ui-state-default.ui-state-active,
.ui-datepicker td a.ui-state-active {
    background: var(--primary, #f0473e) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 700;
}

/* 다른 달/선택불가 날짜 */
.ui-datepicker td.ui-datepicker-other-month span,
.ui-datepicker td.ui-datepicker-unselectable span,
.ui-datepicker td.ui-state-disabled span {
    color: #d1d5db;
    background: transparent !important;
    border: 0 !important;
}

/* ── 하단 버튼(오늘/닫기) — 쓸 경우 대비 ── */
.ui-datepicker .ui-datepicker-buttonpane {
    border-top: 1px solid #f3f4f6;
    margin: 10px 0 0;
    padding: 8px 0 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
    padding: 7px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    opacity: 1;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover {
    background: #f6f7f9;
}

/* ── 모바일 ─────────────────────────────── */
@media (max-width: 480px) {
    .ui-datepicker { width: 288px; padding: 12px 12px 10px; }
    .ui-datepicker td a.ui-state-default,
    .ui-datepicker td span.ui-state-default { width: 32px; height: 32px; }
}