:root {
    --main-green: #1DDB16; /* CSS 변수 정의 */
    --main-orange: #FFBB00; /* CSS 변수 정의 */
    --main-blue: #006fe0; /* CSS 변수 정의 */
    --main-gray: #D5D5D5; /* CSS 변수 정의 */
}

.state-box {
    display: flex;
    padding: 8px 14px;
    flex-direction: column;
    justify-content: center;
    text-wrap: nowrap;
    align-items: center;
    border-radius: 4px;
    color: var(--coolgray-cg-00);
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 138.462% */
    text-transform: capitalize;
}

.state-green {
background-color: var(--main-green);
}

.state-orange {
background-color: var(--main-orange);
}

.state-blue {
background-color: var(--main-blue);
}

.state-gray {
background-color: var(--main-gray);
}


.content {
    padding: 20px;
}

.fixed-button {
    position: fixed;
    bottom: 0;  /* 화면의 가장 아래에 위치 */
    right: 0;   /* 화면의 가장 오른쪽에 위치 */
    background-color: transparent; /* 배경색을 투명하게 설정 */
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s;
}

.fixed-button:hover {
    transform: scale(1.1); /* 호버 시 버튼 크기 확대 */
}

.button-image {
    width: 70px; /* 이미지 크기 조정 */
    height: 70px; /* 이미지 크기 조정 */
}

.responsive-image {
    width: 100%;
    max-width: 522px;
}

@media (max-width: 768px) {
    .responsive-image {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .responsive-image {
        width: 100%;
        height: auto;
    }
}