.Alarm {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 30px 40px;
    text-align: center;
}


.Alarm1 {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 30px 40px;
    text-align: center;
}

.MainGraphic {
    position: relative; /* 자식 SVG들을 절대 위치로 배치하기 위함 */
    height: 150px;      /* 아이콘들이 들어갈 공간 확보 */
    margin-bottom: 25px;
    display: flex; /* 내부 아이템 정렬 쉽게 */
    justify-content: center;
    align-items: center;
}

/* 모든 SVG 공통 스타일 */
.MainGraphic svg {
    position: absolute; /* 겹치거나 특정 위치에 배치 가능하도록 */
    /* fill: #555; SVG path에 fill이 없으면 여기서 색상 지정 가능 */
}

/* Hummingbird 스타일 및 애니메이션 */
.Hummingbird {
    width: 65px; /* 크기 조절 */
    height: auto;
    top: 10px; /* 위치 조절 */
    left: 35%;
    transform: translateX(-50%);
    animation: hummingbird-float 3s ease-in-out infinite;
    z-index: 2; /* 다른 아이콘보다 위에 보이도록 */
    fill: #4CAF50; /* 벌새 색상 */
}

@keyframes hummingbird-float {
    0%, 100% {
        transform: translateX(-50%) translateY(0px);
    }
    50% {
        transform: translateX(-50%) translateY(-12px); /* 위로 살짝 */
    }
}

/* Cog 스타일 및 애니메이션 */
.Cog {
    width: 90px; /* 크기 조절 */
    height: auto;
    /* top, left는 MainGraphic의 flex 정렬에 의해 중앙에 오도록 설정됨 */
    /* position: absolute; 를 사용하면 아래처럼 명시적 위치 지정 가능 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
    animation: cog-spin 10s linear infinite;
    fill: #607D8B; /* 톱니바퀴 색상 */
}

@keyframes cog-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Spanner 스타일 및 애니메이션 */
.Spanner {
    width: 45px; /* 크기 조절 */
    height: auto;
    top: 70px; /* 위치 조절 */
    left: 65%;
    transform: translateX(-50%) rotate(-15deg); /* 초기 각도 */
    animation: spanner-wiggle 2.5s ease-in-out infinite alternate; /* alternate는 부드러운 왕복 */
    transform-origin: bottom left; /* 회전축 변경 */
    z-index: 1;
    fill: #FF9800; /* 스패너 색상 */
}

@keyframes spanner-wiggle {
    0% {
        transform: translateX(-50%) rotate(-20deg);
    }
    100% {
        transform: translateX(-50%) rotate(10deg);
    }
}

.MainTitle {
    font-size: 1.4em;
    color: #2c3e50;
    margin-bottom: 10px;
}

/* HTML에서 클래스가 "Main Description" 두 개로 되어있으므로 */
.Main.Description {
    font-size: 0.95em;
    color: #7f8c8d;
    line-height: 1.5;
}