body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #ececec;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    padding-top: 80px; /* title-bar의 높이만큼 상단 패딩을 추가 */
}

.title-bar {
    width: 100%;
    height: 80px; /* title-bar의 높이 설정 */
    line-height: 80px; /* 텍스트를 수직 중앙에 맞추기 위한 라인 높이 설정 */
    background-color: #2a2a2a;
    color: white;
    text-align: center;
    font-size: 24px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    left: 0;
    right: 0; /* 오른쪽을 0으로 설정하여 가로 전체에 균등하게 분포 */
    z-index: 1000;
}

.title-bar-image-right {
    height: 60px; /* 이미지 높이 조정 */
    width: auto; /* 이미지 너비를 비율에 맞게 자동 조정 */
    margin-right: 10px; /* 텍스트와의 간격 조정 */
    vertical-align: middle; /* 이미지를 수직 중앙에 맞춤 */
}

.title-bar-image-left {
    height: 40px; /* 이미지 높이 조정 */
    width: auto; /* 이미지 너비를 비율에 맞게 자동 조정 */
    margin-left: 10px; /* 텍스트와의 간격 조정 */
    vertical-align: middle; /* 이미지를 수직 중앙에 맞춤 */
}

.button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - 80px); /* title-bar의 높이를 제외한 나머지 높이 */
    gap: 20px;
}

.big-button {
    padding: 20px 80px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: #373e46;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    outline: none;
}

.big-button:hover {
    background-color: #0056b3;
}

.big-button:active {
    background-color: #003885;
}