/* ==========================================================================
   TLB CORE - The LEET BIBLE Design System Core (Refactored)
   ========================================================================== */

/* SUIT 폰트 Import */
@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css');

/* CSS Variables - Design Tokens */
:root {
    /* Typography */
    --lb-font-family: 'SUIT', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Colors - Brand Primary (TLB Purple) */
    --color-primary: #962de3;
    --color-primary-light: #b355ff;
    --color-primary-dark: #7823b5;
    --color-primary-darker: #5f17d1;
    --color-primary-transparent: rgba(150, 45, 227, 0.1);
    --color-primary-hover: rgba(150, 45, 227, 0.9);

    /* Colors - Text */
    --color-text-title: #1f2124;
    --color-text-body: #3a4046;
    --color-text-light: #7b848d;
    --color-text-lighter: #9ca3af;
    --color-text-white: #ffffff;

    /* Colors - Background */
    --color-background: #f8f9fa;
    --color-background-dark: #111111;
    --color-background-card: #ffffff;
    --color-background-hover: #f3f4f6;
    --color-background-gradient-light: #e5e7eb;
    --color-background-gradient-dark: #d1d5db;

    /* Colors - Border */
    --color-border: #e9ecef;
    --color-border-light: #f3f4f6;
    --color-border-dark: #d1d5db;

    /* Colors - Semantic */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Colors - Accent */
    --color-accent: #ff9900;
    --color-accent-light: #ffb84d;
    --color-accent-dark: #e68a00;

    /* Colors - Principle (Blue) */
    --color-principle: #4A86E8;
    --color-principle-light: #6da3f5;
    --color-principle-dark: #3469d4;
    --color-principle-transparent: rgba(74, 134, 232, 0.1);

    /* Colors - Training Camp (Neon Lime & Dark) */
    --tc-lime: #CCFF00;
    --tc-lime-dim: #9dbf00;
    --tc-black: #050505;
    --tc-dark-gray: #121212;
    --tc-gray: #1e1e1e;
    --tc-text-gray: #aaaaaa;
    --tc-white: #ffffff;

    /* Additional TC Variables from lb-training-camp.css for compatibility */
    --tlb-tc-brand-purple-start: #962DE3;
    --tlb-tc-brand-purple-end: #5E33FA;
    --tlb-tc-neon-lime: #C2F707;
    /* Slightly different lime, keeping both for now or merging */

    /* Spacing Scale */
    --spacing-xs: 8px;
    --spacing-sm: 14px;
    --spacing-md: 20px;
    --spacing-lg: 28px;
    --spacing-xl: 40px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;
    --spacing-5xl: 100px;
    --spacing-6xl: 120px;

    /* Legacy Spacing (rem-based) */
    --lb-space-xs: 0.5rem;
    --lb-space-sm: 1rem;
    --lb-space-md: 1.5rem;
    --lb-space-lg: 2rem;
    --lb-space-xl: 3rem;
    --lb-space-2xl: 4rem;

    /* Container Max Width */
    --container-max-width: 100%;
    --content-max-width: 800px;
    --content-narrow-width: 640px;

    /* Section Padding */
    --section-padding-y: 100px;
    --section-padding-y-sm: 80px;
    --section-padding-bottom: 120px;
    --section-padding-x: 40px;
    --section-padding-x-mobile: 16px;

    /* Font Sizes */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 30px;
    --font-size-3xl: 36px;
    --font-size-4xl: 48px;
    --font-size-5xl: 50px;

    /* Section Heading Sizes */
    --section-title-size: 50px;
    --section-title-size-mobile: 32px;

    /* Section Heading System */
    --section-label-size: 14px;
    --section-label-spacing: 12px;
    --section-subtitle-size: 18px;
    --section-subtitle-spacing: 20px;
    --section-title-offset-left: -3px;

    --section-label-size-mobile: 12px;
    --section-label-spacing-mobile: 8px;
    --section-subtitle-size-mobile: 14px;
    --section-subtitle-spacing-mobile: 12px;

    /* Border Radius */
    --lb-radius-sm: 0.25rem;
    --lb-radius-md: 0.5rem;
    --lb-radius-lg: 1rem;
    --lb-radius-full: 9999px;

    /* Shadows */
    --lb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --lb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --lb-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --lb-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

    /* Transitions */
    --lb-transition-fast: 150ms ease-in-out;
    --lb-transition-base: 250ms ease-in-out;
    --lb-transition-slow: 350ms ease-in-out;

    /* Animation */
    --lb-animation-duration: 0.6s;
    --lb-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Variables */
[data-theme="dark"] {
    /* Colors - Text (Dark Mode) */
    --color-text-title: #f9fafb;
    --color-text-body: #e5e7eb;
    --color-text-light: #9ca3af;
    --color-text-lighter: #6b7280;

    /* Colors - Background (Dark Mode) */
    --color-background: #1a1a1a;
    --color-background-dark: #0a0a0a;
    --color-background-card: #2d2d2d;
    --color-background-hover: #333333;
    --color-background-gradient-light: #2a2a2a;
    --color-background-gradient-dark: #1a1a1a;

    /* Colors - Border (Dark Mode) */
    --color-border: #404040;
    --color-border-light: #333333;
    --color-border-dark: #4d4d4d;
}

/* ==========================================================================
   Typography System
   ========================================================================== */

/* Headings */
.lb_h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1rem !important;
}

.lb_h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.875rem !important;
}

.lb_h3 {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
}

.lb_h4 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
}

.lb_h5 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin-bottom: 0.625rem !important;
}

.lb_h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
}

/* Body Text */
.lb_t,
.lb_p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: currentColor !important;
}

.lb_t_sm {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

.lb_t_lg {
    font-size: 1.125rem !important;
    line-height: 1.75 !important;
}

/* ==========================================================================
   Section Title System
   ========================================================================== */

/* Section Label - 작은 상단 라벨 */
.lb_section_label {
    display: inline-block !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    color: var(--color-primary) !important;
    text-transform: uppercase !important;
    margin-bottom: 0.5rem !important;
}

/* Section Title - 메인 섹션 제목 */
.lb_section_title {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    color: var(--color-text-title) !important;
    margin-bottom: 1rem !important;
}

/* Section Title - Large 버전 */
.lb_section_title_lg {
    font-size: 3rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    color: var(--color-text-title) !important;
    margin-bottom: 1.25rem !important;
}

/* Section Title - Small 버전 */
.lb_section_title_sm {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    color: var(--color-text-title) !important;
    margin-bottom: 0.75rem !important;
}

/* Section Description - 섹션 설명 */
.lb_section_desc {
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: var(--color-text-body) !important;
    margin-bottom: 1.5rem !important;
}

/* Section Group - 레이블 + 타이틀 + 설명 컨테이너 */
.lb_section_group {
    margin-bottom: 2rem !important;
    text-align: left !important;
}

.lb_section_group.center {
    text-align: center !important;
}

.lb_section_group.center .lb_section_label {
    display: block !important;
    text-align: center !important;
}

/* ==========================================================================
   Button System
   ========================================================================== */

/* Base Button */
.lb_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    font-family: 'SUIT', sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

/* Button Sizes */
.lb_btn_sm {
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

.lb_btn_md {
    padding: 12px 24px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.lb_btn_lg {
    padding: 16px 32px !important;
    font-size: 1.125rem !important;
    line-height: 1.6 !important;
    min-width: 200px !important;
}

/* Primary Button */
.lb_btn_primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

.lb_btn_primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
}

.lb_btn_primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
}

/* Secondary Button */
.lb_btn_secondary {
    background: #ffffff !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1) !important;
}

.lb_btn_secondary:hover {
    background: rgba(124, 58, 237, 0.05) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15) !important;
}

.lb_btn_secondary:active {
    transform: translateY(0) !important;
    background: rgba(124, 58, 237, 0.1) !important;
}

/* Button Group */
.lb_btn_group {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.lb_t_xl {
    font-size: 1.25rem !important;
    line-height: 1.75 !important;
}

/* Font Weights */
.lb_fw_light {
    font-weight: 300 !important;
}

.lb_fw_normal {
    font-weight: 400 !important;
}

.lb_fw_medium {
    font-weight: 500 !important;
}

.lb_fw_semibold {
    font-weight: 600 !important;
}

.lb_fw_bold {
    font-weight: 700 !important;
}

/* Text Alignment */
.lb_text_left {
    text-align: left !important;
}

.lb_text_center {
    text-align: center !important;
}

.lb_text_right {
    text-align: right !important;
}

/* ==========================================================================
   List System
   ========================================================================== */

/* Unordered Lists */
.lb_ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 1.5rem 0 !important;
}

.lb_ul li {
    position: relative !important;
    padding-left: 1.75rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.75 !important;
}

.lb_ul li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0.5rem !important;
    color: currentColor !important;
    font-weight: 700 !important;
}

/* Ordered Lists */
.lb_ol {
    list-style: none !important;
    counter-reset: lb-counter !important;
    padding-left: 0 !important;
    margin: 1.5rem 0 !important;
}

.lb_ol li {
    position: relative !important;
    padding-left: 2rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.75 !important;
    counter-increment: lb-counter !important;
}

.lb_ol li::before {
    content: counter(lb-counter) "." !important;
    position: absolute !important;
    left: 0 !important;
    font-weight: 600 !important;
    color: currentColor !important;
}

/* Description Lists */
.lb_dl {
    margin: 1.5rem 0 !important;
}

.lb_dl dt {
    font-weight: 600 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.lb_dl dd {
    margin-left: 0 !important;
    margin-bottom: 1rem !important;
    padding-left: 1.5rem !important;
    border-left: 2px solid rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   Color Utilities
   ========================================================================== */

/* Text Colors */
.lbc_black {
    color: #000000 !important;
}

.lbc_white {
    color: #ffffff !important;
}

.lbc_gray_50 {
    color: #f9fafb !important;
}

.lbc_gray_100 {
    color: #f3f4f6 !important;
}

.lbc_gray_200 {
    color: #e5e7eb !important;
}

.lbc_gray_300 {
    color: #d1d5db !important;
}

.lbc_gray_400 {
    color: #9ca3af !important;
}

.lbc_gray_500 {
    color: #6b7280 !important;
}

.lbc_gray_600 {
    color: #4b5563 !important;
}

.lbc_gray_700 {
    color: #374151 !important;
}

.lbc_gray_800 {
    color: #1f2937 !important;
}

.lbc_gray_900 {
    color: #111827 !important;
}

/* Background Colors */
.lbg_black {
    background-color: #000000 !important;
}

.lbg_white {
    background-color: #ffffff !important;
}

.lbg_gray_50 {
    background-color: #f9fafb !important;
}

.lbg_gray_100 {
    background-color: #f3f4f6 !important;
}

.lbg_gray_200 {
    background-color: #e5e7eb !important;
}

.lbg_gray_300 {
    background-color: #d1d5db !important;
}

.lbg_gray_400 {
    background-color: #9ca3af !important;
}

.lbg_gray_500 {
    background-color: #6b7280 !important;
}

.lbg_gray_600 {
    background-color: #4b5563 !important;
}

.lbg_gray_700 {
    background-color: #374151 !important;
}

.lbg_gray_800 {
    background-color: #1f2937 !important;
}

.lbg_gray_900 {
    background-color: #111827 !important;
}

/* ==========================================================================
   Card Component
   ========================================================================== */

.lb_card {
    background-color: #ffffff !important;
    border-radius: var(--lb-radius-lg) !important;
    padding: 1.5rem !important;
    box-shadow: var(--lb-shadow-sm) !important;
    transition: all var(--lb-transition-base) !important;
}

.lb_card:hover {
    box-shadow: var(--lb-shadow-md) !important;
}

.lb_card_header {
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.lb_card_title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.lb_card_body {
    margin-bottom: 1rem !important;
}

.lb_card_footer {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #e5e7eb !important;
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

/* Margin */
.lb_m_0 {
    margin: 0 !important;
}

.lb_m_xs {
    margin: var(--lb-space-xs) !important;
}

.lb_m_sm {
    margin: var(--lb-space-sm) !important;
}

.lb_m_md {
    margin: var(--lb-space-md) !important;
}

.lb_m_lg {
    margin: var(--lb-space-lg) !important;
}

.lb_m_xl {
    margin: var(--lb-space-xl) !important;
}

.lb_mt_0 {
    margin-top: 0 !important;
}

.lb_mt_xs {
    margin-top: var(--lb-space-xs) !important;
}

.lb_mt_sm {
    margin-top: var(--lb-space-sm) !important;
}

.lb_mt_md {
    margin-top: var(--lb-space-md) !important;
}

.lb_mt_lg {
    margin-top: var(--lb-space-lg) !important;
}

.lb_mt_xl {
    margin-top: var(--lb-space-xl) !important;
}

.lb_mb_0 {
    margin-bottom: 0 !important;
}

.lb_mb_xs {
    margin-bottom: var(--lb-space-xs) !important;
}

.lb_mb_sm {
    margin-bottom: var(--lb-space-sm) !important;
}

.lb_mb_md {
    margin-bottom: var(--lb-space-md) !important;
}

.lb_mb_lg {
    margin-bottom: var(--lb-space-lg) !important;
}

.lb_mb_xl {
    margin-bottom: var(--lb-space-xl) !important;
}

/* Padding */
.lb_p_0 {
    padding: 0 !important;
}

.lb_p_xs {
    padding: var(--lb-space-xs) !important;
}

.lb_p_sm {
    padding: var(--lb-space-sm) !important;
}

.lb_p_md {
    padding: var(--lb-space-md) !important;
}

.lb_p_lg {
    padding: var(--lb-space-lg) !important;
}

.lb_p_xl {
    padding: var(--lb-space-xl) !important;
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

/* Display */
.lb_block {
    display: block !important;
}

.lb_inline_block {
    display: inline-block !important;
}

.lb_inline {
    display: inline !important;
}

.lb_flex {
    display: flex !important;
}

.lb_inline_flex {
    display: inline-flex !important;
}

.lb_grid {
    display: grid !important;
}

.lb_hidden {
    display: none !important;
}

/* Flexbox */
.lb_flex_row {
    flex-direction: row !important;
}

.lb_flex_col {
    flex-direction: column !important;
}

.lb_flex_wrap {
    flex-wrap: wrap !important;
}

.lb_flex_nowrap {
    flex-wrap: nowrap !important;
}

.lb_justify_start {
    justify-content: flex-start !important;
}

.lb_justify_center {
    justify-content: center !important;
}

.lb_justify_end {
    justify-content: flex-end !important;
}

.lb_justify_between {
    justify-content: space-between !important;
}

.lb_justify_around {
    justify-content: space-around !important;
}

.lb_items_start {
    align-items: flex-start !important;
}

.lb_items_center {
    align-items: center !important;
}

.lb_items_end {
    align-items: flex-end !important;
}

.lb_items_stretch {
    align-items: stretch !important;
}

/* Gap */
.lb_gap_xs {
    gap: var(--lb-space-xs) !important;
}

.lb_gap_sm {
    gap: var(--lb-space-sm) !important;
}

.lb_gap_md {
    gap: var(--lb-space-md) !important;
}

.lb_gap_lg {
    gap: var(--lb-space-lg) !important;
}

.lb_gap_xl {
    gap: var(--lb-space-xl) !important;
}

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */

@media (max-width: 768px) {
    .lb_h1 {
        font-size: 2rem !important;
    }

    .lb_h2 {
        font-size: 1.75rem !important;
    }

    .lb_h3 {
        font-size: 1.5rem !important;
    }

    .lb_h4 {
        font-size: 1.25rem !important;
    }

    .lb_hidden_mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .lb_hidden_desktop {
        display: none !important;
    }
}

/* ==========================================================================
   Scroll Animations
   ========================================================================== */

/* Fade In Up Animation */
@keyframes lb_fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lb_animate_fadeInUp {
    opacity: 0;
    animation-fill-mode: both;
    animation-duration: var(--lb-animation-duration);
    animation-timing-function: var(--lb-animation-easing);
}

.lb_animate_fadeInUp.lb_animate_visible {
    animation-name: lb_fadeInUp;
}