        /* --- [1] 기본 초기화 --- */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Pretendard', sans-serif; background: #f0f2f5; display: flex; justify-content: center; align-items: center;  min-height: 100vh; padding: 20px;}
        .container { width: 100%; max-width: 1000px; }
        /* --- [2] 로그인 화면 --- */
        #login-page { display: flex; flex-direction: column; align-items: center; width: 100%; }
        .auth-card { background: white; padding: 35px 35px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: auto; min-width: 380px;}        
        /* 로고 그룹 스타일 수정 */
        .logo-group { display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
        .logo {width: 160px;background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #eee;}
        .logo img {width: 100%; height: 100%; object-fit: contain;}
        /* 아이디 비번 한 줄 배치 */
        .login-inline-bar { display: flex; align-items: center; justify-content: center; gap: 12px; }
        .login-inline-bar input { padding: 10px; border: 1px solid #ddd; border-radius: 6px; width: 75px; outline: none; }        
        .btn { padding: 10px 18px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.2s; }
        .btn-blue { background: #3498db; color: white; }
        .btn-gray { background: #95a5a6; color: white; }
        /* 회원가입 펼치기 */
        #signup-section { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.5s ease; border-top: 1px dashed #eee; margin-top: 0; }
        #signup-section.open { max-height: 450px; opacity: 1; margin-top: 20px; padding-top: 20px; }
		.input-item { width: 50%; padding: 8px 0; border: none; border-bottom: 1px solid #ccc; outline: none; transition: 0.3s; font-size: 0.9rem;}
		.input-item:focus { border-bottom: 2px solid #000; }
		.options {display: block;margin: 10px 0px 15px 0px;font-weight: 400;color: #777;font-size: 0.9rem; }
		.btn-check {white-space: nowrap;background: #6c5ce7;color: white;border: none;padding: 10px 15px;border-radius: 10px;cursor: pointer;transition: 0.3s;}
		.btn-check:hover { background: #a29bfe; }
		.btn-signup {width: 100%;padding: 15px;background: linear-gradient(135deg, #6c5ce7, #a29bfe);color: white;border: none;border-radius: 12px;font-size: 1.1rem;font-weight: bold;cursor: pointer;margin-top: 10px;box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);}
		.btn-signup:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4); }

        /* --- [3] 메인 화면 및 문제 풀이 스타일 (기존 동일) --- */
        #main-page { display: none; background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
        .top-nav { display: flex; justify-content: center; gap: 20px; background: #2c3e50; padding: 12px; }
        .nav-item { color: #bdc3c7; cursor: pointer; font-size: 0.85rem; font-weight: bold; padding: 6px 15px; border-radius: 20px; }
        .nav-item.active { color: white; background: rgba(255,255,255,0.2); }
        .content-body { padding: 30px; min-height: 550px; }
        .step-section { display: none; }
        .step-section.active { display: block; animation: fadeIn 0.4s ease; }
        .grid-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 15px; }
        .card-btn { padding: 15px; border: 1px solid #eee; border-radius: 10px; text-align: center; cursor: pointer; background: white; transition: 0.2s; }
        .card-btn:hover { border-color: #3498db; background: #f0f7ff; }
        .quiz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px; }
        .quiz-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 15px; display: flex; flex-direction: column; gap: 10px; }
        .quiz-img { width: 100%; height: 90px; background: #f9f9f9; border-radius: 8px; display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc; }
        .shape { width: 40px; height: 40px; background: #3498db; opacity: 0.6; }
        .circle { border-radius: 50%; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }