/* =========================================
   1. 전체 공통 스타일 (Global)
   ========================================= */
body { 
    font-family: 'Apple SD Gothic Neo', sans-serif; 
    background-color: #f4f4f9; 
    color: #333; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
}

header { 
    background-color: #333; 
    color: white; 
    padding: 15px; 
    margin-bottom: 30px; 
}

header a { 
    color: white; 
    text-decoration: none; 
    font-weight: bold; 
    margin: 0 10px; 
}

h1 { margin: 0; font-size: 24px; }

.container { 
    max-width: 800px; 
    margin: 0 auto; 
    padding: 20px; 
}

.back-link { 
    display: inline-block; 
    margin-top: 30px; 
    color: #666; 
    text-decoration: none; 
}

/* =========================================
   2. 메인 메뉴 카드 스타일 (Main Menu)
   ========================================= */
.menu-grid { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    flex-wrap: wrap; 
}

.card { 
    background: white; 
    width: 220px; 
    padding: 30px; 
    border-radius: 15px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    text-decoration: none; 
    color: #333; 
    transition: 0.3s; 
}

.card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px rgba(0,0,0,0.2); 
}

.icon { 
    font-size: 50px; 
    display: block; 
    margin-bottom: 10px; 
}

/* =========================================
   3. 버튼 공통 스타일 (Buttons)
   ========================================= */
.btn { 
    padding: 10px 20px; 
    background-color: #007bff; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 16px; 
}

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

.reset-btn { 
    background-color: #aaa; 
    font-size: 12px; 
    padding: 5px 10px; 
    margin-top: 10px; 
}

/* =========================================
   4. 도구 페이지 전용 스타일 (Tools Page)
   ========================================= */
.tool-box { 
    border: 2px dashed #ccc; 
    padding: 20px; 
    margin: 20px 0; 
    border-radius: 10px; 
    background: white; 
}

.big-number { 
    font-size: 40px; 
    font-weight: bold; 
    color: #ff5722; 
    margin: 10px 0; 
}

/* 반응속도 테스트 화면 */
#reaction-screen {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    user-select: none; /* 드래그 방지 */
    transition: background-color 0.1s;
}

/* 반응속도 상태별 색상 */
.waiting { background-color: #4facfe; } /* 대기 (파랑) */
.ready { background-color: #ff6b6b; }   /* 준비 (빨강) */
.now { background-color: #51cf66; }     /* 클릭 (초록) */