@charset "UTF-8";

/* ----------------------------------------------------
   Mocabulary Custom Styles
   ---------------------------------------------------- */
        
:root {
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --sar: env(safe-area-inset-right);
}

body { 
    /* index.html에서 @import로 불러오므로 font-family만 설정 */
    font-family: 'Manrope', 'Noto Sans KR', sans-serif; 
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    background-color: #f8fafc;
    overscroll-behavior: none; /* 스크롤 바운스 방지 */
}

/* 스크롤바 숨기기 (깔끔한 UI) */
::-webkit-scrollbar { display: none; }

/* Safe Area 대응 패딩 */
.safe-pb { 
    padding-bottom: max(1rem, var(--sab)); 
}
.tile { transform-style: preserve-3d; }

/* ----------------------------------------------------
   Animations
   ---------------------------------------------------- */

.pop { animation: pop 0.1s ease-in-out; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

@keyframes flip-card {
    0% { transform: rotateX(0deg); }
    45% { transform: rotateX(90deg); }
    55% { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}
.flip { animation: flip-card 0.6s ease-in-out forwards; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.shake { animation: shake 0.5s; }

@keyframes levelUp {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.animate-level-up { animation: levelUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* ----------------------------------------------------
   Game Colors
   ---------------------------------------------------- */

.bg-correct { background-color: #6aaa64; border-color: #6aaa64; color: white; }
.bg-present { background-color: #c9b458; border-color: #c9b458; color: white; }
.bg-absent { background-color: #787c7e; border-color: #787c7e; color: white; }
.bg-default { background-color: white; border-color: #d1d5db; color: black; }

/* ----------------------------------------------------
   Keyboard Styles
   ---------------------------------------------------- */
        
.key { 
    transition: transform 0.1s, background-color 0.2s; 
    touch-action: manipulation; 
    /* 터치 반응 속도 최적화 */
    cursor: pointer;
}
.key:active { transform: scale(0.95); }

/* ----------------------------------------------------
   Toast Notification
   ---------------------------------------------------- */
        
#toast {
    visibility: hidden; min-width: 250px; background-color: #1e293b; color: #fff;
    text-align: center; border-radius: 9999px; padding: 12px 24px; position: fixed;
    z-index: 100; left: 50%; top: 10%; transform: translateX(-50%);
    font-size: 14px; font-weight: 600; opacity: 0; transition: opacity 0.3s, top 0.3s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
#toast.show { visibility: visible; opacity: 1; top: 12%; }

/* ----------------------------------------------------
   Loading Spinner
   ---------------------------------------------------- */
        
.loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #015c93;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ----------------------------------------------------
   Brand Colors & Utility
   ---------------------------------------------------- */
        
.text-brand-dark { color: #015c93; }
.text-brand-light { color: #109adc; }

/* 누락된 배경색 클래스 추가 */
.bg-brand-dark { background-color: #015c93; color: white; }
.bg-brand-light { background-color: #0284c7; color: white; } /* 가독성을 위해 조금 더 진한 파란색으로 조정 (#109adc -> #0284c7) */

.slide-in { animation: slideIn 0.3s ease-out forwards; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.slide-out { animation: slideOut 0.3s ease-out forwards; }
@keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* 모바일 폰트 보정 클래스 */
.text-xxs { font-size: 0.65rem; line-height: 1rem; }
.bg-pattern {
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e2e8f0' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 2. 데일리 챌린지 버튼 강조 (그라데이션) */
.btn-daily-gradient {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 2px solid #fed7aa;
}
.btn-daily-gradient:hover {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
}

/* 3. 학년별 버튼 틴트 컬러 */
.btn-tint-emerald { background-color: #ecfdf5; border-color: #a7f3d0; } /* 1학년 */
.btn-tint-blue { background-color: #eff6ff; border-color: #bfdbfe; }    /* 2학년 */
.btn-tint-indigo { background-color: #eef2ff; border-color: #c7d2fe; }  /* 3학년 */

.btn-tint-emerald:hover { background-color: #d1fae5; }
.btn-tint-blue:hover { background-color: #dbeafe; }
.btn-tint-indigo:hover { background-color: #e0e7ff; }

/* 4. 빈 상태(Empty State) 스타일 */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #94a3b8;
    text-align: center;
}
.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}