/* ================================
   성서 히브리어 단어장 - 유틸리티
   Vue, 헬퍼 클래스, 기타 유틸리티
   ================================ */

/* ================================
   1. Vue 관련
   ================================ */

[v-cloak] {
    display: none !important;
}

/* ================================
   2. 유틸리티 클래스
   ================================ */

.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }

.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }

.p-1 { padding: 10px; }
.p-2 { padding: 20px; }
.p-3 { padding: 30px; }

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.gap-1 { gap: 10px; }
.gap-2 { gap: 20px; }
.gap-3 { gap: 30px; }

/* ================================
   3. 반응형 헬퍼
   ================================ */

.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-only {
        display: block;
    }
}

/* ================================
   4. 텍스트 유틸리티
   ================================ */

.text-sm {
    font-size: 0.875rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.font-bold {
    font-weight: 700;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

/* ================================
   5. 컨트롤 래퍼
   ================================ */

.controls-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
}

.lesson-filter,
.search-box {
    width: 100%;
}

.search-box {
    position: relative;
}

.search-box input {
    /* padding styles handled inline or in components.css */
}

.search-icon {
    /* Icon is now on the left in HTML, styled with Tailwind utility classes in HTML */
    /* Removing old absolute positioning if conflicting, but kept utility classes in HTML */
    display: none; /* Hide old icon class if present separately */
}

/* ================================
   6. 네비게이션 컨트롤
   ================================ */

.nav-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.control-group {
    display: flex;
    gap: 8px;
}

/* ================================
   7. 기타
   ================================ */

.list-header {
    text-align: center;
    margin-bottom: 20px;
}

.stats-title {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.grade-list-container {
    width: 100%;
    overflow-x: auto;
}

/* YouTube 링크 버튼 */
.youtube-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 10px;
    color: #ff6b6b;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.youtube-link:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: translateY(-2px);
}