/* 날짜 슬라이더 컨테이너 (화살표 포함 부모 블록) */
    .date-slider-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        box-sizing: border-box;
        border-bottom: 1px solid #f0f0f0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
        /* [해결] 부모 영역 밖으로 나가는 요소를 숨겨 화면 전체 흔들림 방지 */
        overflow: hidden; 
    }

    /* 화살표 버튼 스타일 */
    .slider-arrow {
        background: none;
        border: none;
        color: #999999;
        cursor: pointer;
        padding: 20px 15px;
        user-select: none;
        z-index: 10;
        flex-shrink: 0; /* 모바일에서 화살표 크기 고정 */
    }

    .slider-arrow.left {
        background: url('/images/Member/ico_select.png');
        transform: rotate(90deg); /* 좌로 90도 회전 */
        background-repeat: no-repeat;
        background-position: center; 
        background-size: 20px;
    }

    .slider-arrow.right {
        background: url('/images/Member/ico_select.png');
        transform: rotate(-90deg);  /* 우로 90도 회전 */
        background-repeat: no-repeat;
        background-position: center; 
        background-size: 20px;
    }
    
    .slider-arrow:hover {
        color: #333333;
    }

    /* 날짜들을 감싸는 마스크 (넘치는 부분 숨김) */
    .date-slider-viewport {
        flex: 1;
        overflow: hidden;
        position: relative;
        height: 55px; /* 높이 고정 */
        min-width: 0; /* 뷰포트 유연성 확보 */
        cursor: grab; /* 드래그 가능함을 마우스 포인터로 표시 */
    }
    .date-slider-viewport:active {
        cursor: grabbing;
    }

    /* 실제로 좌우로 움직일 움직임 판 */
    .date-track {
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        will-change: transform; /* 모바일 부드러운 가속 최적화 */
    }

    /* 개별 날짜 칸 */
    .date-item {
        width: 85px; /* 고정 너비 */
        flex-shrink: 0; /* 너비가 절대 줄어들지 않도록 고정 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        color: #888888;
        cursor: pointer;
        user-select: none;
        position: relative;
        box-sizing: border-box;
    }

    
    .date-item:hover{
        background-color: #a9a9a9;
        color : #fff;
    }


    /* 선택된 날짜 스타일에만 볼드 및 빨간색 밑줄 적용 */
    .date-item.active {
        font-weight: bold;
        color: #000000;
    }
    
    /* 빨간 밑줄 애니메이션 처리 */
    .date-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 3px;
        background-color: #ff3b30;
        transform: scaleX(0);
        transition: transform 0.2s ease;
    }
    .date-item.active::after {
        transform: scaleX(1); /* 활성화 시 스무스하게 나타남 */
    }