/* .controls { */
/*     position: absolute; */
/*     top: 10px; */
/* /*     left: 10px; */ */
/*     z-index: 100; */
/*     background: rgba(255, 255, 255, 0.9); */
/*     padding: 15px; */
/*     border-radius: 8px; */
/*     box-shadow: 0 4px 12px rgba(0,0,0,0.2); */
/* /*     display: flex; */ */
/*     flex-direction: column; */
/*     gap: 10px; */
/* } */
/* .control-group { */
/*     display: flex; */
/*     flex-direction: column; */
/*     gap: 5px; */
/* } */
input[type="number"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}
/* button:hover { */
/*     background-color: #e0e0e0; */
/* } */
/* button:active { */
/*     background-color: #d0d0d0; */
/* } */
label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* #timeSlider { */
/*     width: 100%; */
/*     margin: 10px 0; */
/* } */

.slider-container {
    position: relative;
    width: 100%;
    max-width: 500px; /* 슬라이더 너비 조정 가능 */
    margin: 20px auto;
}

#timeSlider {
    width: 100%;
/*     margin-bottom: 20px; */
}

.tick-marks {
    position: relative;
    height: 20px;
}

.major-ticks, .minor-ticks {
    position: absolute;
    width: 100%;
    height: 10px;
}

.major-ticks::before, .minor-ticks::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
}

.major-ticks span, .minor-ticks span {
    position: absolute;
    background: black;
    transform: translateX(-50%);
}

.major-ticks span {
    height: 10px;
    width: 2px;
    top: 0;
}

.minor-ticks span {
    height: 5px;
    width: 1px;
    top: 0;
    background: gray;
}

.tick-labels {
    position: absolute;
    width: 100%;
    top: 12px;
}

.tick-labels span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 12px;
    color: black;
}

#timeDisplay {
    font-size: 14px;
    color: #333;
    margin-left: 10px;
}