#awakeTimeVisualization {
    background-color: transparent; /* 배경색 제거 */
    padding: 0; /* 여백 최소화 */
    margin-top: 20px; /* 도넛 차트와의 간격 설정 */
    width: 100%;
    max-width: 400px; /* 최대 너비 설정 */
}

.awake-time-viz-container {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    padding: 20px 10px;
}

@media (min-width: 1200px) {
    .flex-container {
        position: relative;  /* 포지셔닝 컨텍스트 설정 */
    }

    .awake-time-viz-container {
        position: absolute;  /* 차트 위치에 맞추기 위한 절대 위치 */
        width: 33.33%;      /* 차트와 동일한 너비 */
        right: 33.33%;      /* 차트 위치에 맞춤 */
        top: 20px;          /* 상단 여백 */
        max-width: none;    /* PC에서는 최대 너비 제한 해제 */
    }
}

.awake-time-slider {
    position: relative;
    height: 80px;
    width: 100%;
    margin: 0px 0;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 기본 슬라이더 바 */
.awake-time-slider::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 16px;
    background: linear-gradient(to right, #81d9e9, #128192e8);
    border-radius: 12px;
}

/* 권장 범위 영역 */
.range-highlight {
    position: absolute;
    top: 9px;  /* 위치를 약간 위로 조정하여 슬라이더와 중앙 정렬 */
    left: 30%;
    width: 100px;
    height: 24px;  /* 높이를 더 증가 */
    background-color: rgba(224, 244, 247, 0.63);
    border: 2px solid rgba(240, 187, 107, 0.5);
    border-radius: 12px;  /* 높이의 절반으로 설정하여 완벽한 둥근 모서리 유지 */
}

/* 현재 값 마커 */
.current-value-marker {
    position: absolute;
    top: 18px;  /* 위치 조정 */
    width: 10px;
    height: 10px;
    background-color: #c98b6f;
    border-radius: 50%;
    transform: translateX(-50%);
}

/* 시간 마커 텍스트 */
.time-marker {
    position: absolute;
    top: 30px;  /* 슬라이더 바와의 간격 */
    transform: translateX(-50%);
    font-size: 12px;
    color: #6B5344;
    white-space: nowrap;  /* 이미 있는 속성 */
    padding: 0 10px;      /* 좌우 여백 추가 */
}

/* 라벨 컨테이너 */
.slider-labels {
    display: flex;
    justify-content: space-between; /* 텍스트를 양쪽 끝에 배치 */
    margin-top: 10px;
    font-size: 14px;
    color: var(--color-text);
    padding: 0 10px;
}

/* 라벨 아이템 정렬 */
.label-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 권장범위를 나타내는 하이라이트 박스 */
.highlight-box {
    width: 30px;
    height: 10px;
    border: 2px solid rgba(240, 187, 107, 0.5); /* 하이라이트와 동일한 테두리 */
    background-color: transparent;
    border-radius: 5px; /* 둥근 테두리 */
}

/* 내 아이 시간을 나타내는 마커 박스 */
.current-marker-box {
    width: 10px;
    height: 10px;
    background-color: #c98b6f; /* 마커 색상과 동일 */
    border-radius: 50%; /* 동그라미 모양 */
}

/* 시간 마커 위치 - 60분부터 300분까지 */
.time-marker[data-time="60"] { left: 0; }
.time-marker[data-time="120"] { left: 25%; }
.time-marker[data-time="180"] { left: 50%; }
.time-marker[data-time="240"] { left: 75%; }
.time-marker[data-time="300"] { left: 100%; }