/* ================================
   Index Page Styles
   ================================ */

.header {
    text-align: center;
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-xl);
}
.logo h1 { font-size: var(--font-size-2xl); color: var(--primary-color); margin-bottom: var(--spacing-xs); }
.logo .subtitle { font-size: var(--font-size-lg); color: var(--text-secondary); font-weight: 400; }

.welcome-section { text-align: center; margin-bottom: var(--spacing-2xl); }
.welcome-section h2 { margin-bottom: var(--spacing-md); }
.welcome-section .description { color: var(--text-secondary); line-height: 1.8; }

.test-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-2xl); }
.info-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.info-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.info-icon { font-size: 2.5rem; margin-bottom: var(--spacing-md); }
.info-card h3 { font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); }
.info-card p { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-md); }

.user-form-section {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}
.user-form-section h3 { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-color); }
.user-form { display: grid; gap: var(--spacing-lg); }
.form-group { display: flex; flex-direction: column; }

.test-selection {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}
.test-selection h3 { margin-bottom: var(--spacing-sm); }
.selection-note { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--spacing-lg); }
.test-options { display: flex; flex-direction: column; gap: var(--spacing-md); }
.test-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.test-option:hover { background-color: var(--bg-color); }
.test-option input[type="checkbox"] { width: auto; accent-color: var(--primary-color); }
.test-option input[type="checkbox"]:disabled + .checkmark + .option-label { color: var(--text-muted); }
.option-label { font-weight: 500; }

.start-section { text-align: center; padding: var(--spacing-xl) 0; }
.btn-start {
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    font-weight: 600;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}
.btn-start:hover { background-color: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.notice { margin-top: var(--spacing-lg); font-size: var(--font-size-sm); color: var(--text-muted); line-height: 1.8; }

@media (max-width: 768px) {
    .test-info { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .test-info { grid-template-columns: 1fr; }
    .info-card { display: flex; align-items: center; text-align: left; gap: var(--spacing-md); }
    .info-icon { font-size: 2rem; margin-bottom: 0; }
    .info-card h3, .info-card p { margin-bottom: 0; }
    .info-card .badge { margin-left: auto; }
}