/* jQuery Timepicker 커스텀 스타일 - 모바일 최적화 */

/* 타임피커 컨테이너 */
.ui-timepicker-container {
    z-index: 9999 !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

/* timepicker 오픈/클로즈 시 불필요한 애니메이션(transition/animation) 제거 */
/*.ui-timepicker-container,*/
/*.ui-timepicker,*/
/*.ui-timepicker-viewport,*/
/*.ui-timepicker a {*/
/*    transition: none !important;*/
/*    animation: none !important;*/
/*}*/

/*
 * 스크롤바가 생길 때 우측이 가려지는 문제 보정
 * - 플러그인 기본 CSS는 .ui-timepicker / .ui-timepicker-viewport 가 box-sizing: content-box 인데,
 *   세로 스크롤바가 생기면 실제 표시 영역이 줄어 우측이 잘려 보일 수 있습니다.
 * - viewport에 padding-right를 주고 box-sizing을 border-box로 고정해 스크롤바 폭을 흡수합니다.
 */
.ui-timepicker-viewport {
    box-sizing: border-box;
    /*padding-right: 12px; !* 스크롤바+여백 확보 (OS/브라우저별 차이 흡수) *!*/
}

.ui-menu-item {
    padding-right: 6px !important; /* 스크롤바+여백 확보 (OS/브라우저별 차이 흡수) */
}

.ui-state-hover {
    border-radius: 8px !important;
}

/* 링크 영역도 border-box로 맞춰서 텍스트가 잘리지 않게 */
.ui-timepicker a {
    box-sizing: border-box;
    width: 100%;
}

/* 스크롤바 스타일 */
.ui-timepicker-viewport::-webkit-scrollbar {
    width: 6px;
}

.ui-timepicker-viewport::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 8px;
}

.ui-timepicker-viewport::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 8px;
}

.ui-timepicker-viewport::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}