/* 메뉴 컨테이너: 본문 흐름에 따라 함께 움직임 */
.menu-container {
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    gap: 30px;               /* 버튼 사이 간격 */
    margin: 40px 0;          /* 위아래 본문과의 간격 */
    width: 100%;             /* 전체 너비 차지 */
}

.menu-button, .top-link-button {
    display: inline-block;
    padding: 7px 15px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff !important;
    background-color: #1a2a6c;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    text-transform: uppercase;

    /* 수정된 부분: 변화 효과를 배경색(background-color)에 집중하고 시간을 짧게 조절 */
    /* all 대신 특정 속성을 지정하면 깜빡임이 줄어듭니다. */
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
    
    /* 클릭 시 생기는 파란색 테두리 제거 (깜빡임의 원인 중 하나) */
    outline: none;
}

/* 마우스 오버 시 */
.menu-button:hover, .top-link-button:hover {
    background-color: #E8532B;
    border-color: #E8532B;
    
}

/* 추가: 버튼을 클릭하는 순간이나 클릭 직후의 상태를 정의하여 잔상을 제거 */
.menu-button:active, .top-link-button:active {
    background-color: #d14825; /* 클릭 시 아주 살짝 더 어두운 주홍색 */
    transform: scale(0.98);    /* 클릭 시 살짝 눌리는 느낌 */
}

.menu-button:focus, .top-link-button:focus {
    outline: none; /* 포커스 시 깜빡임 방지 */
}


h1, h2 {
    margin-top: 2px;    /* 위쪽 간격 */
    margin-bottom: 2px; /* 아래쪽 간격 */
    line-height: 1.6;   /* 줄 간격 */
}


p {
    margin-top: 0px;    /* 위쪽 간격 */
    margin-bottom: 0px; /* 아래쪽 간격 */
    line-height: 1.6;   /* 줄 간격 */
}