body {
    font-family: 'Gowun Dodum', sans-serif;
    background-color: #fefce8; 
    touch-action: manipulation;
    overscroll-behavior: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 1.05rem; 
    max-width: 100vw; 
    overflow-x: hidden;
}

.font-jua { font-family: 'Gowun Dodum', sans-serif !important; }

/* --- [색상 규칙] --- */
/* 1. 정확히 일치: 초록색 */
.bg-correct { background-color: #4ade80 !important; border-color: #22c55e !important; color: white !important; }

/* 2. 절반만 일치 (이중자음 중 하나): 절반 초록/회색 대각선 */
.bg-half-correct { 
    background: linear-gradient(135deg, #4ade80 50%, #e5e7eb 50%) !important; 
    border-color: #22c55e !important; 
    color: #14532d !important; 
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

/* 3. 같은 글자 내 위치 다름: 밝은 노란색 */
.bg-present { background-color: #fde047 !important; border-color: #eab308 !important; color: #854d0e !important; }

/* 4. 다른 글자에 존재: 어두운 주황색 */
.bg-elsewhere { background-color: #f97316 !important; border-color: #c2410c !important; color: white !important; }

/* 5. 아예 없음: 회색 */
.bg-absent { background-color: #9ca3af !important; border-color: #6b7280 !important; color: white !important; }

/* 입력창 깜빡임 효과 */
@keyframes blink { 50% { border-color: #f59e0b; box-shadow: 0 0 0 4px #fde68a; } }
.active-input { animation: blink 1.2s infinite; border-color: #f59e0b !important; z-index: 10; }

/* 버튼 클릭 효과 */
.btn-press:active { transform: scale(0.96); transition: transform 0.1s; }
.hidden-screen { display: none !important; }
.flex-screen { display: flex !important; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* 결제 방법 탭 스타일 */
.payment-method-tab {
    transition: all 0.2s;
}
.payment-method-tab.active {
    background-color: white;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.payment-method-tab:not(.active) {
    background-color: #e5e7eb;
    color: #6b7280;
}

/* 허브 충전 모달 모바일 최적화 */
#modal-hub-charge {
    -webkit-overflow-scrolling: touch;
}

#modal-hub-charge > div {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 토스트 알림 스타일 */
.toast {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 90vw;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    animation: toastSlideIn 0.3s ease-out, toastFadeOut 0.3s ease-in 2.7s forwards;
    border-left: 4px solid;
}

.toast-success {
    border-left-color: #10b981;
}

.toast-error {
    border-left-color: #ef4444;
}

.toast-info {
    border-left-color: #3b82f6;
}

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 4px;
    color: #111827;
}

.toast-message {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) translateX(-50%);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
}

@keyframes toastFadeOut {
    to {
        opacity: 0;
        transform: translateY(-20px) translateX(-50%);
    }
}

@media (max-height: 600px) {
    #modal-hub-charge > div {
        max-height: 95vh;
    }
}

/* 팝업 애니메이션 */
.animate-pop { animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes pop-in { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }

/* 상단 상태 표시줄 (보석, 레벨) */
.stat-pill { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    background-color: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(4px); 
    padding: 0.35rem 0.75rem; 
    border-radius: 9999px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
    border: 1px solid #ffedd5; 
}

/* [전광판 컨테이너 스타일] */
.ticker-bubble { 
    background-color: #fff; 
    border: 2px solid #fbbf24; 
    color: #4b5563; 
    padding: 0.25rem 0.5rem; 
    border-radius: 1rem; 
    font-size: 0.95rem; 
    font-weight: bold; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    
    /* 너비 고정으로 레이아웃 흔들림 방지 */
    width: 180px; 
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    
    cursor: pointer; 
    transition: transform 0.2s; 
}
.ticker-bubble:active { transform: scale(0.95); }

/* [전광판 텍스트 마스킹 영역] */
.ticker-mask {
    flex: 1; 
    overflow: hidden; 
    position: relative;
    height: 1.5rem; 
    display: flex;
    align-items: center;
    
    /* 왼쪽 페이드 아웃 효과 */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15px);
    mask-image: linear-gradient(to right, transparent 0%, black 15px);
}

/* [전광판 텍스트 애니메이션] */
#ticker-text {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%; 
    /* animation은 script.js에서 제어합니다 */
}

@keyframes scroll-left {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); } 
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out forwards;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 파일 업로드 드래그 앤 드롭 영역 */
.drop-zone { border: 2px dashed #cbd5e1; transition: all 0.2s; }
.drop-zone.dragover { border-color: #f97316; background-color: #fff7ed; }
.text-adjust { position: relative; top: 1px; }

/* 게임 보드 셀 스타일 */
.cell-content { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 100%; height: 100%; }
.cell-part { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; border: 0.5px solid #fed7aa; color: #9a3412; }
.cell-full { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; color: #431407; background-color: #fff7ed; }