/* Modernized styles.css */

/* 기본 설정 */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #F9F9F9;
    color: #333;
    touch-action: manipulation;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80vw;
    height: 100vh;
}

.category-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    padding: 5px; /* 패딩 조정 */
    box-sizing: border-box;
}

/* 카테고리 박스 */
.category-box {
    flex: 1 1 calc(12% - 10px); /* 크기를 작게 조정 */
    max-width: 40px; /* 최대 크기 제한 */
    aspect-ratio: 1 / 1; /* 정사각형 유지 */
    margin: 5px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #F9F9F9; /* 밝은 배경 */
    color: #333;
    transition: all 0.3s ease;
    border-radius: 8px; /* 둥근 모서리 */
    font-size: calc(0.8vw + 0.8vh); /* 크기 비율에 맞춤 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 약간의 그림자 효과 */
}

/* 마우스 호버 효과 */
.category-box:hover {
    background-color: #4CAF50; /* 녹색 강조 */
    color: #FFF;
    transform: translateY(-3px); /* 약간 위로 이동 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 강조 */
}

/* 선택된 카테고리 */
.selected-category {
    background-color: #4CAF50;
    color: #FFF;
    border: 2px solid #388E3C; /* 더 두드러진 테두리 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 선택된 상태 그림자 */
}

/* 완료된 카테고리(빨간색) */
.category-box.completed-category {
    background-color: #F44336 !important;
    color: #FFF !important;
    border: 2px solid #B71C1C !important;
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

.display {
    border: 1px solid #ddd;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #FFF;
    border-radius: 10px;
}

/* 배경 반짝임 애니메이션 */
@keyframes background-flash {
    0% { background-color: #e9c7e4; }   /* 밝은 노란색 */
    33% { background-color: #f8cdd4; }  /* 밝은 초록색 */
    66% { background-color: #a3defa; }  /* 밝은 파란색 */
    100% { background-color: #e9c7e4; } /* 밝은 노란색으로 돌아오기 */
}

.flash-bg {
    animation: background-flash 2s infinite; /* 반짝임 효과 반복 */
}

.row-number {
    background-color: #333;
    color: #FFF;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
    font-size: calc(3vw + 3vh);
    border-radius: 5px;
}

.a-column {
    position: relative; /* .next-location을 절대 위치로 배치하기 위해 부모 요소를 relative로 설정 */
    color: #333;
    font-size: calc(6vw + 6vh);
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 60px; /* 오른쪽에 여유 공간 추가 */
}


.a-column .next-location {
    position: absolute; /* 부모 요소 기준으로 위치 설정 */
    top: 10%; /* 부모 요소의 세로 중앙에 배치 */
    transform: translateY(-50%); /* 세로 중앙 정렬 보정 */
    right: -20px; /* a-column의 오른쪽 바깥으로 이동 */
    font-size: calc(2vw + 2vh); /* 반응형 텍스트 크기 */
    color: rgb(30, 124, 1); /* 투명도 80% */
    background-color: transparent;
    z-index: 1;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* 반응형 디자인: 작은 화면에서 위치 조정 */
@media (max-width: 600px) {
    .a-column .next-location {
        right: -10px; /* 더 작은 여백으로 이동 */
        font-size: calc(3vw + 3vh); /* 텍스트 크기 증가 */
    }
}

@media (max-width: 400px) {
    .a-column .next-location {
        right: -5px; /* 가장 작은 여백 */
        font-size: calc(4vw + 4vh); /* 텍스트 크기 더 증가 */
    }
}



.side-by-side {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
}

.c-column, .b-column {
    flex: 1;
    font-size: calc(3vw + 3vh);
    display: flex;
    justify-content: center;
    align-items: center;
}

.b-column {
    color: #E53935;
}

.e-d-column {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.e-column, .d-column, .f-column {
    font-size: calc(2vw + 2vh);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
}

.e-column {
    font-weight: bold;
    color: #3f2702;
    background-color: #fde6c8;
    padding: 5px;
    border-radius: 5px;
    font-size: calc(2.5vw + 2.5vh);
}

.ok-button {
    background-color: #FFEB3B;
    color: #333;
    width: 100%;
    margin: 10px 0;
    padding: 10px 0;
    font-size: calc(3vw + 3vh);
    border: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 20px;
}

.ok-button:hover {
    background-color: #FFC107;
    color: #FFF;
}

.ok-button.reviewed {
    background-color: #8BC34A;
    color: #FFF;
}

.nav-button {
    background-color: #333;
    color: #FFF;
    width: 45%;
    margin: 5px;
    padding: 10px 0;
    font-size: calc(2vw + 2vh);
    border: 1px solid #333;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 15px;
}

.nav-button:hover {
    background-color: #2196F3;
}

.nav-button:disabled {
    background-color: #E0E0E0;
    color: #9E9E9E;
    cursor: not-allowed;
}

.navigation, .category-navigation {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.category-navigation {
    margin-top: 5px;
}

.category-navigation .nav-button {
    width: 30%;
    height: 100%;
    margin: 5px;
    padding: 5px;
    font-size: calc(1vw + 1vh);
    border-radius: 4px;
}
/* Clear Data 버튼 */
.clear-data-button {
    font-size: 1.5rem; /* 크기 증가 */
    padding: 15px 25px; /* 버튼 크기 확대 */
    background-color: #FFCDD2; /* 연한 빨간색 배경 */
    color: #B71C1C; /* 진한 빨간색 글씨 */
    border: 2px solid #B71C1C; /* 진한 빨간색 테두리 */
    border-radius: 8px; /* 둥근 모서리 */
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
    text-align: center;
    font-weight: bold;
}

/* Clear Data 버튼 호버 효과 */
.clear-data-button:hover {
    background-color: #FF8A80; /* 호버 시 더 밝은 빨간색 */
    color: #FFFFFF; /* 흰색 글씨 */
    border-color: #FF5252; /* 더 밝은 빨간 테두리 */
    transform: scale(1.05); /* 버튼 약간 확대 */
}