/* 게이지 컨테이너 */
.status-gauge {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 0 auto;
    overflow: visible; /* 바늘이 컨테이너를 벗어날 수 있도록 */
}

/* 게이지 배경 이미지 */
.gauge-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../images/gauge-bg.png') no-repeat bottom center;
    background-size: contain;
    overflow:hidden;
}

/* 게이지 바늘 */
.gauge-needle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 16px;  /* 이미지 실제 너비 */
    height: 85px; /* 이미지 실제 높이 */
    background: url('../images/gauge-needle.png') no-repeat center;
    background-size: contain;
    transform-origin: center bottom;
    transform: translateX(-50%) rotate(0deg);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

/* 바늘 중심점 */
.gauge-needle::after {
    content: '';
    position: absolute;
    bottom: -4px;  /* 중심점 이미지 높이의 절반만큼 조정 */
    left: 50%;
    width: 16px;   /* 중심점 이미지 실제 크기 */
    height: 16px;  /* 중심점 이미지 실제 크기 */
    background: url('../images/gauge-needle-center.png') no-repeat center;
    background-size: contain;
    transform: translateX(-50%);
    z-index: 3;
}

/* 상태별 바늘 색상 */
.gauge-needle[data-level="안전"] {
    border-bottom-color: #4db959;
}

.gauge-needle[data-level="관심"] {
    border-bottom-color: #2196f3;
}

.gauge-needle[data-level="주의"] {
    border-bottom-color: #ffa000;
}

.gauge-needle[data-level="경계"] {
    border-bottom-color: #ff7f00;
}

.gauge-needle[data-level="위험"] {
    border-bottom-color: #ff3b3b;
}

/* 게이지 바늘 각도 */
.gauge-needle[data-level="안전"] {
    transform: translateX(-50%) rotate(-70deg);
}

.gauge-needle[data-level="관심"] {
    transform: translateX(-50%) rotate(-35deg);
}

.gauge-needle[data-level="주의"] {
    transform: translateX(-50%) rotate(0deg);
}

.gauge-needle[data-level="경계"] {
    transform: translateX(-50%) rotate(35deg);
}

.gauge-needle[data-level="위험"] {
    transform: translateX(-50%) rotate(70deg);
}

/* 상태 표시 박스 */
.status-step {
    width: 60px;
    height: 60px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.3s;
}

/* 상태별 색상 */
.status-step:has(+ .status-gauge .gauge-needle[data-level="안전"]) {
    background-color: #4db959;
}

.status-step:has(+ .status-gauge .gauge-needle[data-level="관심"]) {
    background-color: #2196f3;
}

.status-step:has(+ .status-gauge .gauge-needle[data-level="주의"]) {
    background-color: #ffa000;
}

.status-step:has(+ .status-gauge .gauge-needle[data-level="경계"]) {
    background-color: #ff7f00;
}

.status-step:has(+ .status-gauge .gauge-needle[data-level="위험"]) {
    background-color: #ff3b3b;
}

/* 초기 흔들림 애니메이션 */
@keyframes needleShake {
    0% { transform: rotate(-65deg); }
    25% { transform: rotate(-55deg); }
    50% { transform: rotate(-62deg); }
    75% { transform: rotate(-58deg); }
    100% { transform: rotate(-60deg); }
}

.gauge-needle.init-shake {
    animation: needleShake 0.5s ease-in-out;
}

/* 반응형 */
@media (max-width: 768px) {
    .status-gauge {
        width: 150px;
        height: 75px;
    }
    
    .gauge-needle {
        height: 65px;
    }
    
    .status-step {
        width: 50px;
        height: 50px;
        font-size: 14px;
    }
}