/* =====================================================
   라이트닷 다이어트 - Complete Styles
   Section 1: Pure White Background (The Modern Truth)
   Section 1.5: Product Reveal (Full-Width Image)
   Section 2 Part A: White Background
   Section 2 Part B/C/D: Orange Background
   ===================================================== */

/* =====================================================
   SECTION 1 NEW: The Modern Truth (Minimalist Typography)
   Pure White + Pretendard Font Weight Contrast
   ===================================================== */

.intro-section-new {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    padding: 120px 24px;
    overflow: hidden;
}

.intro-content-new {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

/* Sub Title - Light, Small */
.intro-sub-new {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 32px;
    font-weight: 300;
    color: #666666;
    letter-spacing: 0.02em;
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
}

/* Main Title - Black/Extra Bold, Large */
.intro-title-new {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(32px, 6vw, 56px);
    font-weight: 400;
    line-height: 1.35;
    color: #111111;
    letter-spacing: -0.03em;
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
}

.intro-title-new .title-bold {
    font-weight: 900;
    position: relative;
    display: inline-block;
}

/* Orange Dot Emphasis - 각 글자 위 점 효과 */
.dotted-emphasis {
    -webkit-text-emphasis: filled dot #F37021;
    text-emphasis: filled dot #F37021;
    -webkit-text-emphasis-position: over right;
    text-emphasis-position: over right;
}

/* Description - Regular, Medium Size */
.intro-desc-new {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.9;
    color: #444444;
    max-width: 600px;
    opacity: 0;
    transform: translateY(30px);
}

.intro-desc-new p {
    margin: 0;
}

/* Highlight Box - Bold */
.intro-highlight-new {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    color: #111111;
    padding: 36px 48px;
    background: #FAFAFA;
    border-radius: 16px;
    max-width: 600px;
    opacity: 0;
    transform: translateY(30px);
}

.intro-highlight-new p {
    margin: 0;
}

.intro-highlight-new .underline-emphasis {
    border-bottom: 2px solid #111111;
    padding-bottom: 2px;
    color: #F37021;
}

/* Bottom Message - Medium */
.intro-bottom-new {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #888888;
    letter-spacing: 0.01em;
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
}

/* Scroll Indicator */
.scroll-indicator-new {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 2;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

.scroll-indicator-new span {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #BBBBBB;
}

.scroll-line-new {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, #CCCCCC, transparent);
    position: relative;
    overflow: hidden;
}

.scroll-line-new::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: #111111;
    animation: scrollPulseNew 2s ease-in-out infinite;
}

@keyframes scrollPulseNew {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(50px);
        opacity: 0;
    }
}

/* Fade-in Animation States */
.intro-sub-new.fade-element.visible,
.intro-title-new.fade-element.visible,
.intro-desc-new.fade-element.visible,
.intro-highlight-new.fade-element.visible,
.intro-bottom-new.fade-element.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-indicator-new.fade-element.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.intro-sub-new.fade-element,
.intro-title-new.fade-element,
.intro-desc-new.fade-element,
.intro-highlight-new.fade-element,
.intro-bottom-new.fade-element,
.scroll-indicator-new.fade-element {
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Staggered Animation Delays */
.intro-sub-new.fade-element {
    transition-delay: 0s;
}

.intro-title-new.fade-element {
    transition-delay: 0.15s;
}

.intro-desc-new.fade-element {
    transition-delay: 0.3s;
}

.intro-highlight-new.fade-element {
    transition-delay: 0.45s;
}

.intro-bottom-new.fade-element {
    transition-delay: 0.6s;
}

.scroll-indicator-new.fade-element {
    transition-delay: 0.75s;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .intro-section-new {
        padding: 100px 20px;
    }

    .intro-content-new {
        gap: 36px;
    }

    .intro-sub-new {
        font-size: 18px;
    }

    .intro-title-new {
        font-size: clamp(32px, 10vw, 48px);
    }

    .intro-desc-new {
        font-size: 16px;
        line-height: 1.8;
    }

    .intro-highlight-new {
        font-size: 16px;
        padding: 28px 24px;
    }

    .intro-bottom-new {
        font-size: 14px;
    }

    .scroll-indicator-new {
        bottom: 24px;
    }
}

/* =====================================================
   SECTION 4: Data Proof (Result Board)
   ===================================================== */

.result-section {
    background: #FFFFFF;
    padding: 100px 20px;
}

.result-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Header */
.result-header {
    margin-bottom: 48px;
}

.result-title {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    color: #111111;
    margin: 0 0 12px;
    letter-spacing: -0.03em;
}

.result-period {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #888888;
    margin: 0;
    display: inline-block;
    padding: 6px 16px;
    background: #F5F5F5;
    border-radius: 20px;
}

/* Data Cards */
.result-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.result-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 28px;
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #EEEEEE;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    min-width: 160px;
}

.result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.result-card.main-card {
    background: linear-gradient(135deg, #F37021 0%, #FF8C42 100%);
    border: none;
    padding: 40px 36px;
}

.result-card.main-card .card-icon {
    filter: grayscale(1) brightness(10);
}

.result-card.main-card .data-value {
    color: #FFFFFF;
}

.result-card.main-card .data-label {
    color: rgba(255, 255, 255, 0.9);
}

.result-card.success {
    border-color: #00897B;
    border-width: 2px;
}

.card-icon {
    font-size: 28px;
    margin-bottom: 12px;
}

.card-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.data-value {
    font-family: 'Pretendard', sans-serif;
    font-size: 42px;
    font-weight: 900;
    color: #F37021;
    line-height: 1;
    letter-spacing: -0.02em;
}

.data-value .unit {
    font-size: 24px;
    font-weight: 700;
}

.result-card .data-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
}

.success-badge {
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF;
    background: #00897B;
    padding: 4px 10px;
    border-radius: 12px;
    margin-top: 8px;
}

/* CTA */
.result-cta {
    max-width: 500px;
    margin: 0 auto;
}

.result-cta p {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    margin: 0 0 8px;
    line-height: 1.6;
}

.result-cta strong {
    font-weight: 700;
    color: #F37021;
}

.result-cta .cta-accent {
    font-size: 20px;
    font-weight: 600;
    color: #111111;
    margin: 0;
}

/* Scroll Fade */
.result-header.scroll-fade,
.result-cards.scroll-fade,
.result-cta.scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.result-header.scroll-fade.visible,
.result-cards.scroll-fade.visible,
.result-cta.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .result-section {
        padding: 60px 20px;
    }

    .result-title {
        font-size: 26px;
    }

    .result-cards {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .result-card {
        width: 100%;
        max-width: 280px;
        padding: 24px 20px;
    }

    .result-card.main-card {
        padding: 32px 28px;
    }

    .data-value {
        font-size: 36px;
    }

    .result-cta p {
        font-size: 16px;
    }

    .result-cta .cta-accent {
        font-size: 18px;
    }
}

/* =====================================================
   SECTION 8: Data Proof
   ===================================================== */

.logic-section {
    background: #FFFFFF;
    padding: 120px 20px;
}

.logic-container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* Header - Bridge Text */
.logic-header {
    margin-bottom: 40px;
}

.logic-protocol {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #F37021;
    letter-spacing: 0.1em;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.logic-title {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(28px, 5vw, 40px);
    /* Increased size */
    font-weight: 700;
    /* Bolder */
    color: #111111;
    /* Darker */
    margin: 0 0 16px;
    line-height: 1.4;
    letter-spacing: -0.03em;
}

.logic-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    /* Increased size */
    font-weight: 400;
    color: #666666;
    margin: 0;
    line-height: 1.6;
}

/* Compact Scoreboard */
.logic-scoreboard {
    background: #FAFAFA;
    border-radius: 20px;
    padding: 40px 32px;
    margin-bottom: 40px;
}

.main-stat {
    margin-bottom: 24px;
}

.stat-number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.stat-number .num {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(56px, 12vw, 80px);
    font-weight: 900;
    color: #F37021;
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat-number .percent {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(28px, 6vw, 40px);
    font-weight: 700;
    color: #F37021;
}

.main-stat .stat-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    margin-top: 8px;
    display: block;
}

/* Sub Stats Grid */
.sub-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding-top: 24px;
    border-top: 1px solid #E8E8E8;
}

.sub-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sub-stat .sub-value {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #333333;
}

.sub-stat .sub-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #888888;
}

.sub-stat .sub-tag {
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #FFFFFF;
    background: #F37021;
    padding: 2px 8px;
    border-radius: 10px;
}

.sub-stat .sub-tag.success {
    background: #00897B;
}

.logic-scoreboard .sub-divider {
    width: 1px;
    height: 48px;
    background: #E0E0E0;
}

/* Transition Message */
.logic-transition {
    margin-top: 8px;
}

.logic-transition p {
    font-family: 'Pretendard', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #666666;
    margin: 0;
    line-height: 1.6;
}

/* Scroll Fade */
.logic-header.scroll-fade,
.logic-scoreboard.scroll-fade,
.logic-transition.scroll-fade {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.logic-header.scroll-fade.visible,
.logic-scoreboard.scroll-fade.visible,
.logic-transition.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive - Mobile Compact */
@media (max-width: 768px) {
    .logic-section {
        padding: 48px 20px;
    }

    .logic-title {
        font-size: 20px;
    }

    .logic-scoreboard {
        padding: 32px 20px;
    }

    .stat-number .num {
        font-size: 52px;
    }

    .stat-number .percent {
        font-size: 26px;
    }

    .sub-stats {
        gap: 20px;
    }

    .sub-stat .sub-value {
        font-size: 20px;
    }

    .logic-transition p {
        font-size: 15px;
    }
}

/* =====================================================
   SECTION 1 V2: Modern Truth (Minimalist Typography) - OLD
   ===================================================== */

/* Section 2A - Standalone Switch Section */
.solution-section-a {
    position: relative;
}

.solution-section-a .solution-part-a-new {
    /* Inherits from solution-part-a-new in the main section */
}

/* Tech Section - Subtitle Enhancement */
.tech-subtitle {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--orange, #F37021);
    margin: 16px 0 24px;
    letter-spacing: -0.02em;
}

/* Trust Banner - Pure White Background Override */
.trust-banner {
    background: #FFFFFF !important;
    position: relative;
}

.trust-bg-parallax,
.trust-overlay {
    display: none !important;
}

.trust-content {
    position: relative;
    z-index: 2;
}

.trust-headline,
.trust-desc {
    color: #111111;
}

.trust-badges .badge {
    background: #F5F5F5;
    color: #333333;
}

/* Trust Banner - Mobile Fix */
.trust-banner {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 60px 20px !important;
}

.trust-content .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.patent-float,
.trust-text {
    width: 100%;
    max-width: 600px;
}

.patent-cards-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.patent-card {
    flex: 0 1 auto;
    max-width: 200px;
}

@media (max-width: 768px) {
    .trust-banner {
        padding: 40px 16px !important;
    }

    .trust-content .container {
        gap: 24px;
    }

    .patent-card {
        max-width: 150px;
    }

    .trust-badges {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .trust-badges .badge {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* =====================================================
   SECTION 4.5: Evidence (Editorial Typography)
   ===================================================== */

.evidence-section {
    background: #FFFFFF;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
}

.evidence-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* Typography Area */
.evidence-typography {
    margin-bottom: 40px;
}

.evidence-catch {
    font-family: 'Pretendard', sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: #888888;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.evidence-headline {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
    margin-bottom: 32px;
    letter-spacing: -0.03em;
}

.evidence-point {
    color: #F37021;
    position: relative;
}

.evidence-point::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #F37021;
    border-radius: 2px;
}

.evidence-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #555555;
    line-height: 1.8;
    letter-spacing: -0.01em;
}

.evidence-desc strong {
    color: #111111;
    font-weight: 600;
}

/* Dual Cards */
.evidence-cards {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 48px;
}

.evidence-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 36px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.evidence-card.metabolism {
    border-color: #F37021;
}

.evidence-card.fatburn {
    border-color: #F37021;
}

.evidence-card.appetite {
    border-color: #F37021;
}

.evidence-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(243, 112, 33, 0.15);
}

.evidence-card .card-emoji {
    font-size: 36px;
}

.evidence-card .card-content {
    text-align: left;
}

.evidence-card .card-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 4px;
}

.evidence-card .card-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #888888;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Scroll Fade Animation */
.evidence-typography.scroll-fade,
.evidence-cards.scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.evidence-typography.scroll-fade.visible,
.evidence-cards.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .evidence-section {
        padding: 60px 20px;
        min-height: auto;
    }

    .evidence-catch {
        font-size: 19px;
    }

    .evidence-headline {
        font-size: 24px;
    }

    .evidence-desc {
        font-size: 15px;
    }

    .evidence-cards {
        flex-direction: column;
        gap: 16px;
    }

    .evidence-card {
        padding: 20px 24px;
    }

    .evidence-card .card-emoji {
        font-size: 28px;
    }

    .evidence-card .card-title {
        font-size: 16px;
    }
}

/* =====================================================
   PART B2: The Exercise Mode (Q&A Section)
   ===================================================== */

.solution-part-b2 {
    background: #FFFFFF;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 40px;
}

.exercise-mode-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1200px;
    width: 100%;
    align-items: center;
}

/* Left Side: Q&A Storytelling */
.exercise-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Question Style */
.qa-question {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
    background: #F8F8F8;
    border-radius: 16px;
    border-left: 3px solid #CCCCCC;
}

.question-mark {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #888888;
    flex-shrink: 0;
}

.qa-question p {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #888888;
    margin: 0;
    font-style: italic;
    line-height: 1.6;
}

/* Answer Style */
.qa-answer {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.answer-mark {
    font-family: 'Pretendard', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #F37021;
    flex-shrink: 0;
}

.qa-answer h3 {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(24px, 3.5vw, 32px);
    font-weight: 700;
    color: #111111;
    margin: 0;
    line-height: 1.5;
}

.evidence-highlight {
    color: #F37021;
    border-bottom: 3px solid #F37021;
    padding-bottom: 2px;
}

/* Explanation Style */
.qa-explanation {
    padding-left: 48px;
}

.qa-explanation p {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #555555;
    line-height: 1.8;
    margin: 0 0 16px;
}

.qa-explanation strong {
    color: #111111;
    font-weight: 600;
}

.explanation-detail {
    color: #666666;
}

.key-effect {
    font-weight: 700;
    color: #F37021;
}

/* Key Logic Formula */
.key-logic {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #FFF8F5 0%, #FFF0E8 100%);
    border-radius: 12px;
    margin-top: 24px;
}

.logic-item {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    padding: 8px 16px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.logic-equals {
    font-size: 24px;
    font-weight: 300;
    color: #F37021;
}

/* Right Side: Thermal Visual */
.exercise-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.thermal-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.body-silhouette {
    width: 280px;
    height: 400px;
}

.body-outline {
    stroke: #333333;
    stroke-width: 1.5;
    fill: none;
}

/* Heart Pulse Animation */
.heart-pulse {
    animation: heartBeat 1.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes heartBeat {

    0%,
    100% {
        opacity: 0.6;
        r: 25;
    }

    50% {
        opacity: 1;
        r: 30;
    }
}

/* Core Heat Animation */
.core-heat {
    animation: coreGlow 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes coreGlow {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

/* Thermal Label */
.thermal-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #F37021, #FF8C42);
    border-radius: 24px;
}

.label-en {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.label-ko {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

/* Scroll Fade Animation for Exercise Section */
.exercise-text.scroll-fade,
.exercise-visual.scroll-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.exercise-text.scroll-fade.visible,
.exercise-visual.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

.exercise-visual.scroll-fade {
    transition-delay: 0.2s;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .exercise-mode-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .solution-part-b2 {
        padding: 80px 24px;
    }

    .qa-explanation {
        padding-left: 0;
    }

    .key-logic {
        flex-wrap: wrap;
        justify-content: center;
    }

    .body-silhouette {
        width: 200px;
        height: 300px;
    }
}

/* =====================================================
   DUAL EFFECT - Vertical Arrow Structure (New Design)
   ===================================================== */

.dual-arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 40px 0;
}

.arrow-effect {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arrow-effect.upper {
    flex-direction: column;
}

.arrow-effect.lower {
    flex-direction: column;
}

.arrow-line {
    display: flex;
    justify-content: center;
}

.arrow-svg {
    width: 40px;
    height: 80px;
}

.arrow-svg.up {
    transform: rotate(180deg);
}

/* Central Dot */
.central-dot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin: 10px 0;
}

.dot-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(243, 112, 33, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.dot-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.dot-icon {
    font-size: 48px;
}

.dot-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #F37021;
}

/* Effect Cards V2 */
.effect-card-v2 {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 32px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #F37021;
}

.effect-card-v2 .effect-emoji {
    font-size: 32px;
}

.effect-info {
    text-align: left;
}

.effect-card-v2 .effect-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 4px;
}

.effect-card-v2 .effect-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    margin: 0;
}

/* Scroll Fade for Dual Arrows */
.dual-arrows.scroll-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.dual-arrows.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .effect-card-v2 {
        padding: 16px 20px;
    }

    .effect-card-v2 .effect-emoji {
        font-size: 24px;
    }

    .effect-card-v2 .effect-title {
        font-size: 16px;
    }

    .effect-card-v2 .effect-desc {
        font-size: 12px;
    }

    .dot-icon {
        font-size: 36px;
    }
}

.intro-section-v2 {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    padding: 120px 24px;
    overflow: hidden;
}

.intro-content-v2 {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.intro-sub-v2 {
    font-family: 'Pretendard', var(--font-main);
    font-size: 16px;
    font-weight: 300;
    color: #666666;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(30px);
}

.intro-title-v2 {
    font-family: 'Pretendard', var(--font-main);
    font-size: clamp(36px, 7vw, 64px);
    font-weight: 900;
    line-height: 1.3;
    color: #111111;
    letter-spacing: -0.03em;
    opacity: 0;
    transform: translateY(30px);
}

.intro-title-v2 .title-emphasis {
    display: inline;
    position: relative;
}

.intro-title-v2 .title-emphasis::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(243, 112, 33, 0.25);
    z-index: -1;
}

.intro-desc-v2 {
    font-family: 'Pretendard', var(--font-main);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.9;
    color: #444444;
    max-width: 600px;
    opacity: 0;
    transform: translateY(30px);
}

.intro-desc-v2 p {
    margin: 0;
}

.intro-highlight-box {
    font-family: 'Pretendard', var(--font-main);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    color: #111111;
    padding: 32px 40px;
    background: #FAFAFA;
    border-radius: 12px;
    max-width: 600px;
    opacity: 0;
    transform: translateY(30px);
}

.intro-highlight-box p {
    margin: 0;
}

.intro-highlight-box .underline-text {
    border-bottom: 2px solid #111111;
    padding-bottom: 2px;
}

.intro-bottom-v2 {
    font-family: 'Pretendard', var(--font-main);
    font-size: 16px;
    font-weight: 500;
    color: #888888;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(30px);
}

.scroll-indicator-v2 {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 2;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

.scroll-indicator-v2 span {
    font-family: 'Pretendard', var(--font-main);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #BBBBBB;
}

.scroll-line-v2 {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, #CCCCCC, transparent);
    position: relative;
    overflow: hidden;
}

.scroll-line-v2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: #111111;
    animation: scrollPulseV2 2s ease-in-out infinite;
}

@keyframes scrollPulseV2 {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(50px);
        opacity: 0;
    }
}

.scroll-indicator-v2.fade-element.visible {
    transform: translateX(-50%) translateY(0);
}

/* V2 Fade-in visible states */
.intro-sub-v2.fade-element.visible,
.intro-title-v2.fade-element.visible,
.intro-desc-v2.fade-element.visible,
.intro-highlight-box.fade-element.visible,
.intro-bottom-v2.fade-element.visible {
    opacity: 1;
    transform: translateY(0);
}

.intro-sub-v2.fade-element,
.intro-title-v2.fade-element,
.intro-desc-v2.fade-element,
.intro-highlight-box.fade-element,
.intro-bottom-v2.fade-element {
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Mobile Responsive for V2 */
@media (max-width: 768px) {
    .intro-section-v2 {
        padding: 100px 20px;
    }

    .intro-content-v2 {
        gap: 32px;
    }

    .intro-sub-v2 {
        font-size: 14px;
    }

    .intro-desc-v2 {
        font-size: 16px;
        line-height: 1.8;
    }

    .intro-highlight-box {
        font-size: 16px;
        padding: 24px 28px;
    }

    .intro-bottom-v2 {
        font-size: 14px;
    }
}

/* =====================================================
   SECTION 1: Intro (Typography Hero) - LEGACY
   ===================================================== */


.intro-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--orange) 0%, #F37021 100%);
    padding: 150px 24px;
    overflow: hidden;
}

.grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.08;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.intro-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.intro-sub {
    font-family: var(--font-main);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(40px);
}

.intro-title {
    font-family: var(--font-main);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--white);
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(40px);
}

.intro-title .quote-mark {
    font-family: var(--font-main);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
}

.intro-title .title-suffix {
    display: block;
    font-size: 0.65em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
}

.intro-title.scale-emphasis {
    animation: subtleScale 3s ease-out forwards;
}

@keyframes subtleScale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

.intro-desc {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 2;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: -0.01em;
    max-width: 600px;
    opacity: 0;
    transform: translateY(40px);
}

.intro-desc p {
    margin: 0;
}

.desc-divider {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    margin: 32px auto;
}

.text-strike {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.highlight-text {
    font-weight: 700;
    color: var(--white);
    position: relative;
}

.highlight-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--white);
    opacity: 0.8;
}

.intro-bottom {
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(40px);
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 2;
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
}

.scroll-indicator span {
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: var(--white);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(50px);
        opacity: 0;
    }
}

.fade-element {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-element.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-indicator.fade-element.visible {
    transform: translateX(-50%) translateY(0);
}

/* =====================================================
   SECTION 1.5: Product Reveal (Full-Width Image)
   ===================================================== */

.product-reveal {
    position: relative;
    width: 100%;
    height: 56.25vw;
    /* 16:9 비율 */
    min-height: 400px;
    overflow: hidden;
    background-color: #FAFAFA;
}

.product-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.4) 100%);
}

.product-text {
    text-align: center;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}

.product-name {
    font-family: var(--font-main);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--white);
    margin: 0 0 16px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.product-slogan {
    font-family: var(--font-main);
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.05em;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* =====================================================
   SECTION 2: Solution (The Switch)
   ===================================================== */

.solution-section {
    position: relative;
}

.solution-part {
    padding: 100px 0;
}

.scroll-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Part A: White Background */
.solution-part-a {
    background: var(--white);
    padding-top: 80px;
    text-align: center;
}

.solution-part-a .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.hero-dot-wrap {
    display: flex;
    justify-content: center;
}

.hero-dot {
    position: relative;
    width: 80px;
    height: 80px;
}

.dot-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(243, 112, 33, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 2.5s ease-in-out infinite;
}

.dot-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FF8A50 0%, var(--orange) 50%, #F37021 100%);
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(243, 112, 33, 0.4), 0 8px 40px rgba(243, 112, 33, 0.2),
        inset 0 -5px 15px rgba(0, 0, 0, 0.1), inset 0 5px 15px rgba(255, 255, 255, 0.3);
    animation: dotBounce 3s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

@keyframes dotBounce {

    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-8px);
    }
}

.switch-content {
    max-width: 1000px;
    margin: 0 auto;
}

.hook-copy {
    font-family: var(--font-main);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 500;
    line-height: 1.7;
    color: var(--gray-800);
    margin-bottom: 40px;
}

.text-orange-bold {
    color: var(--orange);
    font-weight: 800;
    font-size: 1.1em;
}

.intro-box {
    background: var(--gray-50);
    border-radius: 16px;
    padding: 32px 40px;
    border-left: 4px solid var(--orange);
}

.intro-box p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--gray-700);
    margin: 0 0 16px;
}

.intro-box p:last-child {
    margin-bottom: 0;
}

.brand-name {
    color: var(--orange);
    font-weight: 800;
}

.sub-intro {
    font-size: 0.95rem !important;
    color: var(--gray-600) !important;
}

.sub-intro em {
    font-style: normal;
    color: var(--gray-800);
    font-weight: 600;
}

/* Switch Icon Animation */
.switch-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
    font-size: 2.5rem;
    padding: 24px;
    background: linear-gradient(135deg, rgba(243, 112, 33, 0.05) 0%, rgba(243, 112, 33, 0.1) 100%);
    border-radius: 20px;
    border: 2px solid rgba(243, 112, 33, 0.2);
}

.switch-emoji {
    animation: switchPulse 2s ease-in-out infinite;
}

.switch-emoji.off {
    opacity: 0.3;
    filter: grayscale(100%);
}

.switch-arrow {
    color: var(--orange);
    font-weight: bold;
    animation: arrowBounce 1.5s ease-in-out infinite;
}

.switch-toggle {
    font-size: 3rem;
    animation: toggleGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(243, 112, 33, 0.5));
}

@keyframes switchPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes arrowBounce {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(8px);
    }
}

@keyframes toggleGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(243, 112, 33, 0.5));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(243, 112, 33, 0.8));
        transform: scale(1.15);
    }
}

/* Solution Part A - Pure White Text Layout */
.solution-desc {
    font-family: var(--font-main);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--gray-800);
    margin-bottom: 24px;
}

.solution-sub {
    font-family: var(--font-main);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.9;
    color: var(--gray-600);
    margin-bottom: 24px;
}

.solution-sub em {
    font-style: normal;
    color: var(--gray-800);
    font-weight: 600;
}

.solution-note {
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--gray-400);
    margin-top: 32px;
}

/* Part B: Data Proof */
.solution-part-b {
    background: linear-gradient(180deg, var(--orange) 0%, #F37021 100%);
    text-align: center;
}

.data-header {
    font-family: var(--font-main);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.header-icon {
    font-size: 1.5rem;
}

.text-muted {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto 48px;
}

.data-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 36px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.data-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.25);
}

.data-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
}

.data-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
}

.data-value {
    display: block;
    font-family: var(--font-main);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.data-value.primary {
    color: var(--white);
    font-size: clamp(3rem, 6vw, 4rem);
}

.data-value.success {
    color: #7DFFB3;
}

.data-value .unit {
    font-size: 0.5em;
    font-weight: 600;
}

.data-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 1.5rem;
    opacity: 0.5;
}

.data-badge {
    display: inline-block;
    background: #7DFFB3;
    color: #1a5a1a;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 8px;
}

.data-message {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
}

.highlight-half {
    font-family: var(--font-main);
    font-size: 1.5em;
    font-weight: 800;
    color: var(--white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.text-orange {
    color: var(--white);
    font-weight: 700;
}

/* Part C: Mechanism */
.solution-part-c {
    background: linear-gradient(180deg, #F37021 0%, var(--orange) 100%);
}

.mechanism-qa {
    max-width: 1000px;
    margin: 0 auto 60px;
}

.qa-bubble {
    padding: 24px 32px;
    border-radius: 20px;
    margin-bottom: 20px;
    position: relative;
}

.qa-bubble.question {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    margin-right: 60px;
}

.qa-bubble.answer {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    margin-left: 60px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.bubble-icon {
    position: absolute;
    top: -12px;
    left: 24px;
    font-size: 1.5rem;
}

.qa-bubble p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--white);
    margin: 0;
}

.mechanism-deep {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.deep-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.deep-icon {
    font-size: 1.5rem;
}

.deep-header h4 {
    font-family: var(--font-main);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
}

.deep-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 20px;
}

.deep-content em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.8);
}

.answer-highlight {
    font-size: 1.2rem !important;
    font-weight: 500;
}

.explanation-box {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 28px;
    margin-top: 24px;
}

.explanation-box p {
    margin-bottom: 16px;
}

.explanation-box p:last-child {
    margin-bottom: 0;
}

.highlight-mode {
    background: var(--white);
    color: var(--orange);
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 700;
}

.dual-effect {
    display: inline;
}

.effect-1 {
    color: var(--white);
    font-weight: 700;
}

.effect-2 {
    color: #7DFFB3;
    font-weight: 700;
}

/* Part D: Dual Effect Diagram */
.solution-part-d {
    background: linear-gradient(180deg, var(--orange) 0%, #FF8A50 100%);
    padding-bottom: 120px;
}

.dual-diagram {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto 60px;
    padding: 40px 20px;
}

.diagram-center {
    flex-shrink: 0;
    z-index: 2;
}

.pill-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pill-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite;
}

.pill-icon {
    font-size: 4rem;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    animation: pillFloat 4s ease-in-out infinite;
}

@keyframes pillFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.pill-name {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--orange);
    background: white;
    padding: 6px 16px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.diagram-branch {
    flex: 1;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.diagram-branch.left {
    align-items: flex-end;
    text-align: right;
}

.diagram-branch.right {
    align-items: flex-start;
    text-align: left;
}

.branch-arrow {
    width: 100%;
    height: 60px;
}

.arrow-svg {
    width: 100%;
    height: 100%;
    color: var(--white);
}

.branch-content {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.branch-content.burning {
    border-top: 4px solid var(--white);
}

.branch-content.appetite {
    border-top: 4px solid #7DFFB3;
}

.branch-label {
    position: absolute;
    top: -12px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--orange);
}

.diagram-branch.left .branch-label {
    right: 20px;
}

.diagram-branch.right .branch-label {
    left: 20px;
}

.branch-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.branch-title {
    font-family: var(--font-main);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--white);
}

.branch-content.burning .branch-title {
    color: var(--white);
}

.branch-content.appetite .branch-title {
    color: #7DFFB3;
}

.branch-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.5;
}

.dual-message {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.core-message {
    font-family: var(--font-main);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--white);
    margin: 0 0 24px;
}

.closing-text {
    font-size: 1.1rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.closing-text strong {
    color: var(--white);
}

/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */

@media (max-width: 900px) {
    .dual-diagram {
        flex-direction: column;
        align-items: center;
    }

    .diagram-branch {
        max-width: 100%;
        width: 100%;
    }

    .diagram-branch.left,
    .diagram-branch.right {
        align-items: center;
        text-align: center;
    }

    .diagram-branch.left .branch-label,
    .diagram-branch.right .branch-label {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }

    .branch-arrow {
        display: none;
    }

    .diagram-center {
        order: -1;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .intro-section {
        padding: 120px 20px;
        min-height: 100svh;
    }

    .intro-content {
        gap: 36px;
    }

    .intro-sub {
        font-size: clamp(1.2rem, 3vw, 1.5rem);
    }

    .intro-title {
        font-size: clamp(1.6rem, 6vw, 2.4rem);
    }

    .intro-title .title-suffix {
        font-size: 0.7em;
    }

    .intro-desc {
        font-size: 0.95rem;
        line-height: 1.9;
        padding: 0 10px;
    }

    .intro-desc br {
        display: none;
    }

    .desc-divider {
        margin: 24px auto;
    }

    .intro-bottom {
        font-size: 0.9rem;
        padding: 0 20px;
    }

    .scroll-indicator {
        bottom: 30px;
    }

    .scroll-line {
        height: 40px;
    }

    /* Product Reveal */
    .product-reveal {
        height: 100vh;
        min-height: 100svh;
    }

    .product-text {
        bottom: 60px;
    }

    .product-name {
        font-size: 2.5rem;
    }

    .product-slogan {
        font-size: 1rem;
    }

    /* Solution Section */
    .solution-part {
        padding: 80px 0;
    }

    .data-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .data-card {
        padding: 28px 20px;
    }

    .data-value {
        font-size: 2.5rem;
    }

    .data-value.primary {
        font-size: 3rem;
    }

    .qa-bubble.question,
    .qa-bubble.answer {
        margin-left: 0;
        margin-right: 0;
    }

    .mechanism-deep {
        padding: 28px 20px;
    }

    .intro-box {
        padding: 24px 20px;
    }

    .hook-copy br {
        display: none;
    }

    .explanation-box p br {
        display: none;
    }
}

@media (max-width: 480px) {
    .intro-section {
        padding: 100px 16px;
    }

    .intro-sub {
        font-size: 1.2rem;
    }

    .intro-title {
        font-size: clamp(1.4rem, 7vw, 2rem);
    }

    .intro-desc {
        font-size: 0.9rem;
    }

    .solution-part {
        padding: 60px 0;
    }

    .hero-dot {
        width: 60px;
        height: 60px;
    }

    .dot-core {
        width: 40px;
        height: 40px;
    }

    .dot-glow {
        width: 90px;
        height: 90px;
    }

    .hook-copy {
        font-size: 1.2rem;
    }

    .pill-icon {
        font-size: 3rem;
    }

    .branch-content {
        padding: 20px;
    }

    .closing-text br {
        display: none;
    }
}

/* Part A: Pure White Background */
.solution-part-a {
    background-color: #FFFFFF;
    background-image: none;
}

/* =====================================================
   SECTION 3: Technology (�����)
   ===================================================== */

.tech-section {
    position: relative;
}

/* Part A: Tech Top - 3 Column Grid */
.tech-top {
    background: var(--white);
    padding: 120px 0;
}

.tech-header {
    text-align: center;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-bottom: 80px;
    background: #F37021;
    padding: 100px 40px;
    border-radius: 0;
}

.tech-title {
    font-family: var(--font-main);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 16px;
    line-height: 1.4;
}

.tech-subtitle {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}

.tech-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.tech-card {
    background: var(--gray-50);
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.tech-visual {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

/* Visual 1: Concentration */
.visual-equation {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pouch,
.stick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pouch-icon,
.stick-icon {
    font-size: 3rem;
}

.pouch-label,
.stick-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
}

.arrow {
    font-size: 2rem;
    color: var(--orange);
    font-weight: bold;
}

.equation-result {
    margin-top: 16px;
    font-family: var(--font-main);
    font-size: 2rem;
    font-weight: 800;
    color: var(--orange);
}

/* Visual 2: Layered Circle */
.layered-circle {
    position: relative;
    width: 140px;
    height: 140px;
}

.layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--orange);
    opacity: 0.3;
}

.layer-1 {
    width: 140px;
    height: 140px;
    opacity: 0.15;
}

.layer-2 {
    width: 110px;
    height: 110px;
    opacity: 0.25;
}

.layer-3 {
    width: 80px;
    height: 80px;
    opacity: 0.4;
}

.layer-4 {
    width: 50px;
    height: 50px;
    opacity: 0.6;
}

.core-seed {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: var(--orange);
    color: white;
    font-size: 0.5rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Visual 3: Precision Graph */
.precision-graph {
    position: relative;
    width: 200px;
    height: 80px;
}

.graph-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--orange), var(--orange));
    transform: translateY(-50%);
}

.graph-dots {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.graph-dots .dot {
    width: 12px;
    height: 12px;
    background: var(--orange);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(243, 112, 33, 0.4);
}

.tech-card-title {
    font-family: var(--font-main);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.tech-card-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.tech-card-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gray-600);
}

.highlight-purity,
.highlight-precision {
    color: var(--orange);
    font-weight: 700;
}

/* Part B: Trust Banner - Seamless White Lab */
.trust-banner {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--white) 0%, #f8fafc 100%);
}

/* 상단 섹션과 seamless 연결을 위한 그라데이션 */
.trust-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(180deg, var(--white) 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.trust-bg-parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.trust-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(248, 250, 252, 0.65) 100%);
}

.trust-content {
    position: relative;
    z-index: 2;
    padding: 100px 0;
}

.trust-content .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

.patent-float {
    flex-shrink: 0;
}

.patent-card {
    position: relative;
    width: 280px;
    height: 360px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-3deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.patent-card:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 25px rgba(0, 0, 0, 0.08);
}

.patent-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--gray-400);
}

.patent-icon {
    font-size: 4rem;
}

.patent-text {
    font-size: 1.2rem;
    font-weight: 600;
}

.patent-seal {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #FFD700 0%, var(--orange) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(243, 112, 33, 0.3);
}

.patent-seal span {
    font-size: 0.65rem;
    font-weight: 800;
    color: white;
    text-align: center;
    line-height: 1.3;
}

.trust-text {
    max-width: 500px;
}

.trust-headline {
    font-family: var(--font-main);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 24px;
    line-height: 1.3;
}

.trust-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 32px;
}

.trust-desc strong {
    color: var(--orange);
}

.trust-badges {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.trust-badges .badge {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333333;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Responsive */
@media (max-width: 900px) {
    .tech-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .trust-content .container {
        flex-direction: column;
        text-align: center;
    }

    .trust-text {
        max-width: 100%;
    }

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

@media (max-width: 768px) {
    .tech-top {
        padding: 80px 0;
    }

    .tech-header {
        margin-bottom: 48px;
    }

    .tech-card {
        padding: 32px 24px;
    }

    .tech-visual {
        height: 140px;
    }

    .trust-banner {
        min-height: auto;
    }

    .trust-content {
        padding: 60px 0;
    }

    .patent-card {
        width: 200px;
        height: 260px;
    }
}

/* Patent Image Style */
.patent-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Concentration Visual - Column Layout */
.tech-visual.concentration {
    flex-direction: column;
    gap: 16px;
}

.visual-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.equation-result {
    margin-top: 0;
}

/* Multiple Patent Cards */
.patent-cards-wrap {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.patent-cards-wrap .patent-card {
    width: 220px;
    height: 280px;
}

.patent-cards-wrap .patent-card:first-child {
    transform: rotate(-5deg);
}

.patent-cards-wrap .patent-card:last-child {
    transform: rotate(3deg);
}

/* Trust Banner Background Image - High-key White Lab */
.trust-bg-parallax {
    background-image: url('../../assets/facility-background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: grayscale(5%) brightness(1.2) contrast(0.9) saturate(0.9);
    opacity: 0.55;
}

/* =====================================================
   SECTION 4: Routine (��ƾ & ���̵�)
   ===================================================== */

.routine-section {
    position: relative;
}

.routine-split {
    display: flex;
    min-height: 100vh;
}

/* Left: Visual */
.routine-visual {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.routine-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.routine-hashtag {
    position: absolute;
    bottom: 40px;
    left: 40px;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
}

/* Right: Content */
.routine-content {
    flex: 1;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
}

.routine-inner {
    max-width: 500px;
}

.routine-header {
    margin-bottom: 48px;
}

.routine-title {
    font-family: var(--font-main);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.4;
    margin-bottom: 20px;
}

.routine-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--gray-600);
}

.routine-desc strong {
    color: var(--orange);
}

/* Timeline */
.routine-timeline {
    margin-bottom: 48px;
}

.timeline-label,
.formula-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.timeline-track {
    position: relative;
    padding-left: 30px;
}

.timeline-line {
    position: absolute;
    left: 10px;
    top: 30px;
    bottom: 30px;
    width: 2px;
    background: linear-gradient(180deg, var(--orange) 0%, rgba(243, 112, 33, 0.3) 100%);
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
    position: relative;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.time-dot {
    font-size: 1.2rem;
    position: relative;
    z-index: 2;
    background: white;
    padding: 4px 0;
}

.time-content {
    flex: 1;
}

.time-label {
    display: inline-block;
    background: var(--orange);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 8px;
}

.time-icon {
    font-size: 1rem;
}

.time-desc {
    margin-top: 8px;
    font-size: 0.95rem;
    color: var(--gray-700);
    line-height: 1.6;
}

/* Success Formula */
.success-formula {
    background: var(--gray-50);
    padding: 32px;
    border-radius: 20px;
}

.formula-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
    font-size: 2.5rem;
}

.formula-item {
    position: relative;
}

.formula-item small {
    position: absolute;
    top: -5px;
    right: -10px;
    font-size: 0.4em;
    color: var(--orange);
    font-weight: 700;
}

.formula-sign {
    font-size: 1.5rem;
    color: var(--gray-400);
    font-weight: 300;
}

.formula-message {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--gray-600);
}

.formula-message strong {
    color: var(--orange);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 900px) {
    .routine-split {
        flex-direction: column;
        min-height: auto;
    }

    .routine-visual {
        height: 50vh;
    }

    .routine-content {
        padding: 60px 24px;
    }

    .routine-inner {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .routine-visual {
        height: 40vh;
    }

    .routine-hashtag {
        bottom: 20px;
        left: 20px;
        font-size: 0.85rem;
    }

    .routine-content {
        padding: 48px 24px;
    }

    .formula-visual {
        font-size: 2rem;
        gap: 12px;
    }
}

/* =====================================================
   SECTION 5: Full Lineup (��ǰ ���ξ�)
   ===================================================== */

.lineup-section {
    background: var(--gray-50);
    padding: 120px 0;
}

.lineup-header {
    text-align: center;
    margin-bottom: 60px;
}

.lineup-title {
    font-family: var(--font-main);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 16px;
}

.lineup-desc {
    font-size: 1.1rem;
    color: var(--gray-600);
}

.lineup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* Card Base */
.lineup-card {
    background: var(--white);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    position: relative;
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lineup-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}

/* Color Bar */
.card-color-bar {
    height: 8px;
    width: 100%;
}

.card-orange .card-color-bar {
    background: #F37021;
}

.card-teal .card-color-bar {
    background: #00897B;
}

.card-indigo .card-color-bar {
    background: #283593;
}

/* Logo Area */
.card-logo-wrap {
    padding: 32px 24px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
}

.card-logo {
    max-width: 150px;
    max-height: 60px;
    object-fit: contain;
}

.card-logo-placeholder {
    width: 120px;
    height: 50px;
    background: var(--gray-100);
    border: 2px dashed var(--gray-300);
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Card Content */
.card-phase {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-500);
    margin-top: 24px;
    margin-bottom: 4px;
}

.card-name {
    text-align: center;
    font-family: var(--font-main);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.card-name-en {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.card-orange .card-name-en {
    color: #F37021;
}

.card-teal .card-name-en {
    color: #00897B;
}

.card-indigo .card-name-en {
    color: #283593;
}

.card-tags {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 24px;
    margin-bottom: 20px;
}

.card-tags .tag {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--gray-100);
    color: var(--gray-600);
}

.card-content {
    padding: 0 24px 24px;
    text-align: center;
}

.card-goal,
.card-price {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 8px;
    line-height: 1.6;
}

.card-goal strong,
.card-price strong {
    color: var(--gray-800);
}

/* Card Action */
.card-action {
    display: block;
    padding: 16px 24px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    border-top: 1px solid var(--gray-100);
}

.card-action.current {
    background: var(--gray-50);
    color: var(--gray-500);
}

.card-action.link {
    color: var(--gray-700);
    text-decoration: none;
    transition: background 0.2s ease;
}

.card-action.link:hover {
    background: var(--gray-50);
}

.card-orange .card-action.current {
    background: rgba(243, 112, 33, 0.1);
    color: #F37021;
}

/* Responsive */
@media (max-width: 900px) {
    .lineup-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .lineup-section {
        padding: 80px 0;
    }

    .lineup-header {
        margin-bottom: 40px;
    }
}

/* =====================================================
   SECTION 5: LITE SHOT Wide Card Addition
   ===================================================== */

/* Category Labels */
.lineup-category-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 20px;
    margin-top: 20px;
}

.lineup-category-label.special {
    margin-top: 48px;
    color: #D81B60;
}

/* Magenta Color Theme */
.card-magenta .card-color-bar {
    background: #D81B60;
}

.card-name-en.magenta {
    color: #D81B60;
}

.card-logo-placeholder.magenta {
    border-color: #D81B60;
    color: #D81B60;
}

.card-tags .tag.magenta {
    background: rgba(216, 27, 96, 0.1);
    color: #D81B60;
}

/* Wide Card Layout */
.lineup-card-wide {
    background: var(--white);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lineup-card-wide:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(216, 27, 96, 0.2);
}

/* Aurora Background Animation */
.card-aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(216, 27, 96, 0.03) 0%,
            rgba(216, 27, 96, 0.08) 25%,
            rgba(156, 39, 176, 0.05) 50%,
            rgba(216, 27, 96, 0.03) 75%,
            rgba(216, 27, 96, 0.08) 100%);
    background-size: 400% 400%;
    animation: auroraShift 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes auroraShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Crosshair Effect */
.card-crosshair {
    position: absolute;
    top: 50%;
    right: 80px;
    transform: translateY(-50%);
    width: 120px;
    height: 120px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.lineup-card-wide:hover .card-crosshair {
    opacity: 1;
}

.crosshair-line {
    position: absolute;
    background: #D81B60;
}

.crosshair-line.horizontal {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.crosshair-line.vertical {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.crosshair-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 2px solid #D81B60;
    border-radius: 50%;
}

.crosshair-text {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: #D81B60;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* Wide Card Inner */
.wide-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    padding: 48px;
    gap: 48px;
    border-top: 6px solid #D81B60;
}

.wide-card-left {
    flex: 0 0 280px;
}

.wide-card-left .card-logo-wrap {
    padding: 0 0 16px;
    justify-content: flex-start;
}

.wide-card-left .card-phase,
.wide-card-left .card-name,
.wide-card-left .card-name-en {
    text-align: left;
}

.wide-card-left .card-tags {
    justify-content: flex-start;
    padding: 0;
}

.wide-card-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-catch {
    font-family: var(--font-main);
    font-size: 1.4rem;
    font-weight: 700;
    color: #D81B60;
    margin-bottom: 12px;
}

.card-desc-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 16px;
}

.wide-card-right .card-price {
    margin-bottom: 20px;
}

.card-action-wide {
    display: inline-block;
    padding: 12px 24px;
    background: #D81B60;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.card-action-wide:hover {
    background: #C2185B;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(216, 27, 96, 0.3);
}

/* Responsive */
@media (max-width: 900px) {
    .wide-card-inner {
        flex-direction: column;
        padding: 32px 24px;
        gap: 24px;
    }

    .wide-card-left {
        flex: none;
        text-align: center;
    }

    .wide-card-left .card-logo-wrap,
    .wide-card-left .card-phase,
    .wide-card-left .card-name,
    .wide-card-left .card-name-en {
        text-align: center;
    }

    .wide-card-left .card-logo-wrap {
        justify-content: center;
    }

    .wide-card-left .card-tags {
        justify-content: center;
    }

    .wide-card-right {
        text-align: center;
    }

    .card-crosshair {
        display: none;
    }
}

/* =====================================================
   SECTION 6: Strategy Roadmap (���� ��)
   ===================================================== */

.roadmap-section {
    background: #FAFAFA;
    padding: 120px 0;
}

.roadmap-header {
    text-align: center;
    margin-bottom: 60px;
}

.roadmap-title {
    font-family: var(--font-main);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 16px;
    line-height: 1.4;
}

.roadmap-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--gray-600);
}

.roadmap-desc strong {
    color: var(--orange);
}

/* Tunnel Graph */
.tunnel-graph {
    position: relative;
    margin-bottom: 40px;
}

.tunnel-svg {
    width: 100%;
    height: auto;
    max-height: 250px;
}

/* Line Draw Animation */
.tunnel-line {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: drawTunnel 2s ease-out forwards;
}

.tunnel-fill {
    opacity: 0;
    animation: fadeInFill 1s ease-out 1s forwards;
}

@keyframes drawTunnel {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInFill {
    to {
        opacity: 1;
    }
}

/* Step Labels */
.tunnel-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 40px;
}

.tunnel-step {
    background: var(--white);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: default;
}

.tunnel-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.tunnel-step.step-1:hover {
    box-shadow: 0 12px 24px rgba(243, 112, 33, 0.2);
}

.tunnel-step.step-2:hover {
    box-shadow: 0 12px 24px rgba(255, 183, 77, 0.2);
}

.tunnel-step.step-3:hover {
    box-shadow: 0 12px 24px rgba(0, 137, 123, 0.2);
}

.step-marker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.step-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.step-dot.orange {
    background: #F37021;
}

.step-dot.yellow {
    background: #FFB74D;
}

.step-dot.teal {
    background: #00897B;
}

.step-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    letter-spacing: 0.1em;
}

.step-title {
    font-family: var(--font-main);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.step-title small {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-500);
}

.step-tag {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.step-1 .step-tag {
    color: #F37021;
}

.step-2 .step-tag {
    color: #F9A825;
}

.step-3 .step-tag {
    color: #00897B;
}

.step-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gray-600);
}

.step-desc strong {
    color: var(--gray-800);
}

/* Responsive */
@media (max-width: 900px) {
    .tunnel-steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .roadmap-section {
        padding: 80px 0;
    }
}

/* =====================================================
   SECTION 7: Lite Keep (����Ʈŵ: ������)
   ===================================================== */

.litekeep-section {
    background: #00897B;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Subtle Pattern Background */
.teal-pattern-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    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='%23ffffff' fill-opacity='1'%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");
    pointer-events: none;
}

.litekeep-split {
    display: flex;
    min-height: 100vh;
    align-items: center;
}

/* Left: Content */
.litekeep-content {
    flex: 1;
    padding: 80px 60px;
}

.litekeep-inner {
    max-width: 550px;
    margin-left: auto;
}

.litekeep-sub {
    font-size: 0.95rem;
    font-weight: 600;
    color: #B2DFDB;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.litekeep-title {
    font-family: var(--font-main);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: 20px;
}

.litekeep-name {
    display: block;
}

.litekeep-desc {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
}

.litekeep-desc strong {
    color: #FFFFFF;
}

/* Features */
.litekeep-features {
    margin-bottom: 40px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.feature-icon {
    font-size: 1.5rem;
    color: #B2DFDB;
    flex-shrink: 0;
}

.feature-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.feature-text p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

/* Formula */
.litekeep-formula {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    padding: 28px;
}

.formula-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.flow-item {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.flow-item.orange {
    background: rgba(243, 112, 33, 0.3);
    border: 1px solid #F37021;
}

.flow-item.teal {
    background: rgba(178, 223, 219, 0.3);
    border: 1px solid #B2DFDB;
}

.flow-item.finish {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid #FFFFFF;
}

.flow-arrow {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.5);
}

.formula-msg {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

/* Right: Visual */
.litekeep-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 60px;
}

.product-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(178, 223, 219, 0.4) 0%, rgba(178, 223, 219, 0) 70%);
    border-radius: 50%;
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.shield-ring {
    position: absolute;
    width: 280px;
    height: 320px;
    animation: floatShield 4s ease-in-out infinite;
}

@keyframes floatShield {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.shield-svg {
    width: 100%;
    height: 100%;
}

.litekeep-product-img {
    position: relative;
    z-index: 2;
    max-width: 280px;
    height: auto;
    animation: floatProduct 3s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

@keyframes floatProduct {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .litekeep-split {
        flex-direction: column-reverse;
        min-height: auto;
    }

    .litekeep-content {
        padding: 60px 24px;
    }

    .litekeep-inner {
        max-width: 100%;
        margin: 0;
    }

    .litekeep-visual {
        padding: 60px 24px 40px;
    }

    .product-glow {
        width: 250px;
        height: 250px;
    }

    .shield-ring {
        width: 200px;
        height: 230px;
    }

    .litekeep-product-img {
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .formula-flow {
        flex-direction: column;
        gap: 8px;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }
}

/* =====================================================
   SECTION 7: Lite Keep - Full-Width Split Screen (Override)
   ===================================================== */

.litekeep-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.litekeep-fullwidth {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Left Side: Teal Content */
.litekeep-left {
    flex: 0 0 50%;
    background: #00897B;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
    position: relative;
}

.litekeep-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    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='%23ffffff' fill-opacity='1'%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");
    pointer-events: none;
}

.litekeep-inner {
    max-width: 480px;
    position: relative;
    z-index: 1;
}

/* Right Side: Full-bleed Image */
.litekeep-right {
    flex: 0 0 50%;
    position: relative;
    background-image: url('../../assets/litekeep-hero.webp');
    background-size: cover;
    background-position: center;
}

.litekeep-image-blend {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(90deg, #00897B 0%, rgba(0, 137, 123, 0) 100%);
    pointer-events: none;
}

/* Text Styles */
.litekeep-sub {
    font-size: 0.95rem;
    font-weight: 600;
    color: #B2DFDB;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.litekeep-title {
    font-family: var(--font-main);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: 20px;
}

.litekeep-name {
    display: block;
}

.litekeep-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 36px;
}

.litekeep-desc strong {
    color: #FFFFFF;
}

/* Features */
.litekeep-features {
    margin-bottom: 36px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.feature-icon {
    font-size: 1.3rem;
    color: #B2DFDB;
    flex-shrink: 0;
}

.feature-text h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.feature-text p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

/* Formula */
.litekeep-formula {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    padding: 24px;
}

.formula-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.flow-item {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.flow-item.orange {
    background: rgba(243, 112, 33, 0.3);
    border: 1px solid #F37021;
}

.flow-item.teal {
    background: rgba(178, 223, 219, 0.3);
    border: 1px solid #B2DFDB;
}

.flow-item.finish {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #FFFFFF;
}

.flow-arrow {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.5);
}

.formula-msg {
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 900px) {
    .litekeep-fullwidth {
        flex-direction: column-reverse;
        min-height: auto;
    }

    .litekeep-left {
        flex: none;
        padding: 60px 24px;
    }

    .litekeep-right {
        flex: none;
        height: 50vh;
        min-height: 350px;
    }

    .litekeep-image-blend {
        display: none;
    }

    .litekeep-inner {
        max-width: 100%;
    }
}

/* =====================================================
   SECTION 7: Override - Make visual area full-bleed
   ===================================================== */

.litekeep-section .litekeep-split {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.litekeep-section .litekeep-content {
    flex: 0 0 50%;
    background: #00897B;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
}

.litekeep-section .litekeep-visual {
    flex: 0 0 50%;
    background-image: url('../../assets/litekeep-hero.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 0;
    display: block;
}

.litekeep-section .litekeep-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(90deg, #00897B 0%, rgba(0, 137, 123, 0) 100%);
    z-index: 10;
}

.litekeep-section .product-glow,
.litekeep-section .shield-ring,
.litekeep-section .litekeep-product-img {
    display: none !important;
}

@media (max-width: 900px) {
    .litekeep-section .litekeep-split {
        flex-direction: column-reverse;
        min-height: auto;
    }

    .litekeep-section .litekeep-content {
        flex: none;
        padding: 60px 24px;
    }

    .litekeep-section .litekeep-visual {
        flex: none;
        height: 50vh;
        min-height: 350px;
    }

    .litekeep-section .litekeep-visual::before {
        display: none;
    }
}

/* =====================================================
   SECTION 7: Lite Keep - CLEAN REBUILD
   ===================================================== */

.keep-section {
    width: 100%;
    min-height: 100vh;
}

.keep-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Left: Teal Content (50%) */
.keep-left {
    flex: 0 0 50%;
    background: #00897B;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
    position: relative;
}

.keep-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    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='%23ffffff' fill-opacity='1'%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");
    pointer-events: none;
}

.keep-content {
    max-width: 480px;
    position: relative;
    z-index: 1;
}

.keep-sub {
    font-size: 0.95rem;
    font-weight: 600;
    color: #B2DFDB;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.keep-title {
    font-family: var(--font-main);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: 20px;
}

.keep-name {
    display: block;
}

.keep-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 36px;
}

.keep-desc strong {
    color: #FFFFFF;
}

/* Features */
.keep-features {
    margin-bottom: 36px;
}

.keep-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.keep-icon {
    font-size: 1.3rem;
    color: #B2DFDB;
    flex-shrink: 0;
}

.keep-feature h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.keep-feature p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

/* Formula */
.keep-formula {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    padding: 24px;
}

.keep-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.flow-dot {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.flow-dot.orange {
    background: rgba(243, 112, 33, 0.3);
    border: 1px solid #F37021;
}

.flow-dot.teal {
    background: rgba(178, 223, 219, 0.3);
    border: 1px solid #B2DFDB;
}

.flow-dot.finish {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #FFFFFF;
}

.flow-arr {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.5);
}

.flow-msg {
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* Right: Full-bleed Image (50%) */
.keep-right {
    flex: 0 0 50%;
    background-image: url('../../assets/litekeep-hero.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}

.keep-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, #00897B 0%, rgba(0, 137, 123, 0) 100%);
    pointer-events: none;
}

/* Responsive */
@media (max-width: 900px) {
    .keep-wrapper {
        flex-direction: column-reverse;
        min-height: auto;
    }

    .keep-left {
        flex: none;
        padding: 60px 24px;
    }

    .keep-right {
        flex: none;
        height: 50vh;
        min-height: 350px;
    }

    .keep-right::before {
        display: none;
    }

    .keep-content {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .keep-flow {
        flex-direction: column;
        gap: 8px;
    }

    .flow-arr {
        transform: rotate(90deg);
    }
}

/* =====================================================
   SECTION 8: Lite Night (����Ʈ����: ���� �ν���)
   ===================================================== */

.night-section {
    width: 100%;
    min-height: 100vh;
}

.night-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Left: Full-bleed Image (50%) */
.night-left {
    flex: 0 0 50%;
    background-image: url('../../assets/litenight-hero.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}

.night-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(270deg, #283593 0%, rgba(40, 53, 147, 0) 100%);
    pointer-events: none;
}

/* Right: Indigo Content (50%) */
.night-right {
    flex: 0 0 50%;
    background: #283593;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
    position: relative;
}

.night-content {
    max-width: 480px;
    position: relative;
    z-index: 1;
}

.night-sub {
    font-size: 0.95rem;
    font-weight: 600;
    color: #7C4DFF;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.night-title {
    font-family: var(--font-main);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: 20px;
}

.night-name {
    display: block;
}

.night-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 32px;
}

.night-desc strong {
    color: #7C4DFF;
}

/* Checklist */
.night-checklist {
    margin-bottom: 32px;
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.check-icon {
    width: 24px;
    height: 24px;
    background: #7C4DFF;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

.check-item h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.check-item p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* Night Graph */
.night-graph {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(124, 77, 255, 0.3);
}

.graph-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7C4DFF;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    text-align: center;
}

.graph-visual {
    margin-bottom: 16px;
}

.drop-svg {
    width: 100%;
    height: auto;
}

.neon-line {
    filter: drop-shadow(0 0 6px #7C4DFF);
}

.graph-caption {
    font-size: 0.8rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
    .night-wrapper {
        flex-direction: column;
        min-height: auto;
    }

    .night-left {
        flex: none;
        height: 50vh;
        min-height: 350px;
    }

    .night-left::after {
        display: none;
    }

    .night-right {
        flex: none;
        padding: 60px 24px;
    }

    .night-content {
        max-width: 100%;
    }
}

/* Section 8: Yellow Accent Override */
.night-desc strong {
    color: #FFD54F;
}

/* =====================================================
   SECTION 9: Lite Shot (����Ʈ��: ���� ���� ����)
   ===================================================== */

.shot-section {
    width: 100%;
    min-height: 100vh;
}

.shot-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Left: Magenta Content (50%) */
.shot-left {
    flex: 0 0 50%;
    background: #D81B60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
    position: relative;
    overflow: hidden;
}

/* Syringe Watermark */
.shot-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%) rotate(-30deg);
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='35' y='10' width='30' height='60' rx='4' fill='white'/%3E%3Crect x='40' y='70' width='20' height='25' fill='white'/%3E%3Cpath d='M47 95 L53 95 L50 100 Z' fill='white'/%3E%3Crect x='30' y='5' width='40' height='8' rx='2' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* Grain Texture */
.shot-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.shot-content {
    max-width: 480px;
    position: relative;
    z-index: 1;
}

.shot-sub {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.shot-title {
    font-family: var(--font-main);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.shot-name {
    display: block;
    font-size: 1.1em;
}

.shot-catch {
    font-size: 1.1rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.6;
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.shot-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 28px;
}

/* Hashtags */
.shot-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.shot-tag {
    font-size: 1.1rem;
    font-weight: 800;
    color: #FFFFFF;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Spec */
.shot-spec {
    margin-bottom: 28px;
}

.spec-dosage {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.spec-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    letter-spacing: 0.1em;
}

.spec-value {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.spec-note {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Target Areas */
.shot-areas {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.areas-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.area-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #FFFFFF;
}

.area-icon {
    font-size: 1rem;
}

/* Right: Full-bleed Image (50%) */
.shot-right {
    flex: 0 0 50%;
    background-image: url('../../assets/liteshot-hero2.png');
    background-size: cover;
    background-position: center top;
    position: relative;
}

.shot-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, #D81B60 0%, rgba(216, 27, 96, 0) 100%);
    pointer-events: none;
}

/* Crosshair Overlays */
.shot-crosshair {
    position: absolute;
    width: 60px;
    height: 60px;
    animation: pulse 2s ease-in-out infinite;
}

.shot-crosshair.arm {
    top: 30%;
    left: 25%;
}

.shot-crosshair.belly {
    top: 55%;
    left: 45%;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .shot-wrapper {
        flex-direction: column-reverse;
        min-height: auto;
    }

    .shot-left {
        flex: none;
        padding: 60px 24px;
    }

    .shot-right {
        flex: none;
        height: 50vh;
        min-height: 350px;
    }

    .shot-right::before {
        display: none;
    }

    .shot-content {
        max-width: 100%;
    }

    .areas-grid {
        grid-template-columns: 1fr;
    }

    .shot-watermark {
        width: 300px;
        height: 300px;
    }
}

/* =====================================================
   SECTION 9: Crosshair Position Override (4 targets, 20% smaller)
   ===================================================== */

.shot-crosshair {
    width: 48px;
    height: 48px;
}

.shot-crosshair.chin {
    top: 8%;
    left: 45%;
}

.shot-crosshair.arm {
    top: 28%;
    left: 20%;
}

.shot-crosshair.belly {
    top: 50%;
    left: 42%;
}

.shot-crosshair.thigh {
    top: 75%;
    left: 35%;
}

/* =====================================================
   SECTION 3.5: Flavor (맛과 향) - Juicy Explosion
   ===================================================== */

.flavor-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.flavor-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../assets/flavor-orange-bg.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.flavor-orange-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(255, 183, 77, 0.1) 100%);
    z-index: 2;
}

.flavor-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
    z-index: 3;
}

.flavor-tags {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.flavor-tag {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    color: #FF9800;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 8px 32px rgba(255, 152, 0, 0.2);
    border: 2px solid rgba(255, 152, 0, 0.3);
    animation: floatTag 4s ease-in-out infinite;
}

.flavor-tag.tag-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.flavor-tag.tag-2 {
    top: 30%;
    right: 12%;
    animation-delay: 1.3s;
}

.flavor-tag.tag-3 {
    bottom: 25%;
    left: 15%;
    animation-delay: 2.6s;
}

@keyframes floatTag {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.flavor-content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 80px 24px;
}

.flavor-text {
    max-width: 700px;
    margin: 0 auto;
}

.flavor-sub {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 700;
    color: #FF9800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.flavor-title {
    font-family: var(--font-main);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 32px;
}

.flavor-title .highlight {
    color: #FF9800;
    display: block;
}

.flavor-desc {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #333;
}

@media (max-width: 768px) {
    .flavor-tag {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    .flavor-tag.tag-1 {
        top: 15%;
        left: 5%;
    }

    .flavor-tag.tag-2 {
        top: 18%;
        right: 5%;
    }

    .flavor-tag.tag-3 {
        bottom: 18%;
        left: 5%;
    }

    .flavor-title {
        font-size: 2rem;
    }

    .flavor-bg-image {
        background-attachment: scroll;
        /* 모바일에서는 scroll로 변경 */
    }
}

/* =====================================================
   SECTION 2 NEW: 3D Energy Burst Design
   ===================================================== */

/* Part A: The Switch - 3D Glowing Energy Sphere */
.solution-part-a-new {
    background: #FFFFFF;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px;
    position: relative;
    overflow: hidden;
}

.sphere-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    width: 100%;
}

/* 3D Energy Sphere */
.energy-sphere {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sphere-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(243, 112, 33, 0.4) 0%, rgba(243, 112, 33, 0.1) 40%, transparent 70%);
    border-radius: 50%;
    animation: sphereGlow 3s ease-in-out infinite;
}

.sphere-core {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at 30% 30%, #FFB74D 0%, #F37021 50%, #D84315 100%);
    border-radius: 50%;
    box-shadow:
        0 0 60px rgba(243, 112, 33, 0.6),
        0 0 120px rgba(243, 112, 33, 0.4),
        inset 0 -30px 60px rgba(0, 0, 0, 0.2),
        inset 0 30px 60px rgba(255, 255, 255, 0.3);
    animation: spherePulse 2s ease-in-out infinite;
}

.sphere-ring {
    position: absolute;
    border: 2px solid rgba(243, 112, 33, 0.3);
    border-radius: 50%;
    animation: ringExpand 3s ease-in-out infinite;
}

.sphere-ring.ring-1 {
    width: 240px;
    height: 240px;
    animation-delay: 0s;
}

.sphere-ring.ring-2 {
    width: 280px;
    height: 280px;
    animation-delay: 0.5s;
}

.sphere-ring.ring-3 {
    width: 320px;
    height: 320px;
    animation-delay: 1s;
}

.sphere-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.sphere-particles .particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #F37021;
    border-radius: 50%;
    animation: particleFloat 4s ease-in-out infinite;
}

.sphere-particles .particle:nth-child(1) {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.sphere-particles .particle:nth-child(2) {
    top: 30%;
    right: 15%;
    animation-delay: 0.5s;
}

.sphere-particles .particle:nth-child(3) {
    bottom: 20%;
    left: 10%;
    animation-delay: 1s;
}

.sphere-particles .particle:nth-child(4) {
    bottom: 15%;
    right: 25%;
    animation-delay: 1.5s;
}

.sphere-particles .particle:nth-child(5) {
    top: 50%;
    left: 5%;
    animation-delay: 2s;
}

.sphere-particles .particle:nth-child(6) {
    top: 40%;
    right: 5%;
    animation-delay: 2.5s;
}

@keyframes sphereGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes spherePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes ringExpand {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }
}

@keyframes particleFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-20px) scale(1.3);
        opacity: 1;
    }
}

/* Hero Typography */
.switch-hero-text {
    text-align: center;
    max-width: 800px;
}

.switch-hook {
    font-family: 'Pretendard', var(--font-main);
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 400;
    color: #666666;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}

.switch-main {
    font-family: 'Pretendard', var(--font-main);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.3;
    color: #111111;
    letter-spacing: -0.03em;
}

.switch-main .text-off {
    color: #F37021;
    display: inline-block;
    position: relative;
}

.switch-main .off-label {
    font-size: 0.5em;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 8px;
    background: #F37021;
    color: #FFFFFF;
    padding: 4px 12px;
    border-radius: 20px;
}

/* Part B: Data Proof - Massive Typography */
.solution-part-b-new {
    background: #FFFFFF;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px;
    position: relative;
    overflow: hidden;
}

.data-massive-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    max-width: 1200px;
    width: 100%;
}

.massive-number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-family: 'Pretendard', var(--font-main);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #F37021 0%, #FF8A50 50%, #F37021 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(8px 8px 0 rgba(243, 112, 33, 0.15));
}

.massive-minus {
    font-size: clamp(8rem, 20vw, 16rem);
}

.massive-digit {
    font-size: clamp(12rem, 30vw, 24rem);
}

.massive-percent {
    font-size: clamp(4rem, 10vw, 8rem);
    margin-left: 8px;
}

.massive-label {
    font-family: 'Pretendard', var(--font-main);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 500;
    color: #666666;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.data-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    padding: 40px;
    background: #FAFAFA;
    border-radius: 24px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.stat-icon {
    font-size: 2rem;
}

.stat-value {
    font-family: 'Pretendard', var(--font-main);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #F37021;
}

.stat-item.success .stat-value {
    color: #00897B;
}

.stat-label {
    font-family: 'Pretendard', var(--font-main);
    font-size: 1rem;
    font-weight: 500;
    color: #666666;
}

.stat-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: #FFFFFF;
    background: #00897B;
    padding: 4px 12px;
    border-radius: 20px;
}

.stat-divider {
    width: 1px;
    height: 60px;
    background: #E0E0E0;
}

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

.data-cta p {
    font-family: 'Pretendard', var(--font-main);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 500;
    color: #333333;
    line-height: 1.8;
    margin: 0;
}

.data-cta .half-text {
    font-size: 1.5em;
    font-weight: 900;
    color: #F37021;
}

.data-cta .cta-highlight {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: #F37021;
    margin-top: 16px;
}

/* Part C: Dual Effect - Inverted Orange Background */
.solution-part-c-new {
    background: #F37021;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px;
    position: relative;
    overflow: hidden;
}

.dual-effect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    width: 100%;
}

.effect-core {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: coreGlow 2s ease-in-out infinite;
}

.core-text {
    font-family: 'Pretendard', var(--font-main);
    font-size: 1.2rem;
    font-weight: 800;
    color: #F37021;
    background: #FFFFFF;
    padding: 20px 32px;
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

@keyframes coreGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

.lightning-effects {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 900px;
    gap: 40px;
}

.lightning-branch {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.lightning-branch.left {
    flex-direction: column-reverse;
}

.lightning-svg {
    width: 100%;
    max-width: 200px;
    height: 100px;
}

.lightning-path {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: lightningDraw 2s ease-out forwards infinite;
}

@keyframes lightningDraw {
    0% {
        stroke-dashoffset: 400;
        opacity: 0.3;
    }

    50% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0.3;
    }
}

.effect-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    color: #FFFFFF;
}

.effect-emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 16px;
}

.effect-title {
    font-family: 'Pretendard', var(--font-main);
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 8px;
}

.effect-desc {
    font-family: 'Pretendard', var(--font-main);
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    opacity: 0.9;
}

.dual-message-new {
    text-align: center;
    max-width: 700px;
    color: #FFFFFF;
}

.message-title {
    font-family: 'Pretendard', var(--font-main);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    margin: 0 0 24px;
}

.message-desc {
    font-family: 'Pretendard', var(--font-main);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 400;
    line-height: 1.9;
    margin: 0;
    opacity: 0.95;
}

.message-desc strong {
    font-weight: 700;
}

/* Responsive for 3D Energy Burst */
@media (max-width: 768px) {
    .energy-sphere {
        width: 200px;
        height: 200px;
    }

    .sphere-glow {
        width: 280px;
        height: 280px;
    }

    .sphere-core {
        width: 140px;
        height: 140px;
    }

    .sphere-ring.ring-1 {
        width: 160px;
        height: 160px;
    }

    .sphere-ring.ring-2 {
        width: 190px;
        height: 190px;
    }

    .sphere-ring.ring-3 {
        width: 220px;
        height: 220px;
    }

    .lightning-effects {
        flex-direction: column;
        gap: 32px;
    }

    .lightning-branch.left {
        flex-direction: column;
    }

    .lightning-svg {
        transform: rotate(90deg);
        max-width: 100px;
        height: 60px;
    }

    .stat-divider {
        width: 60px;
        height: 1px;
    }

    .data-stats {
        flex-direction: column;
        gap: 32px;
    }
}

/* =====================================================
   SECTION 5 NEW: Technology (The Art of Engineering)
   Apple/Dyson Style - Clean Lab Mood
   ===================================================== */

.tech-section-new {
    background: #FFFFFF;
}

/* Part 1: Bridge Text */
.tech-bridge {
    padding: 120px 20px 80px;
    text-align: center;
}

.bridge-text {
    max-width: 700px;
    margin: 0 auto;
}

.bridge-intro {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 400;
    color: #888888;
    margin: 0 0 16px;
    line-height: 1.6;
}

.bridge-intro strong {
    color: #555555;
    font-weight: 600;
}

.bridge-question {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 600;
    color: #333333;
    margin: 0;
    line-height: 1.5;
}

.tech-highlight {
    color: #F37021;
    font-weight: 700;
}

/* Part 2: Particle Section */
.tech-particle-section {
    padding: 60px 20px 100px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}

.particle-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Particle Container */
.particle-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.particle-core {
    position: relative;
    width: 200px;
    height: 200px;
}

/* Floating Particles */
.floating-particle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #F37021 0%, #FF8C42 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(243, 112, 33, 0.4);
    animation: floatParticle 4s ease-in-out infinite;
}

.floating-particle.p1 {
    left: 50%;
    top: 10%;
    animation-delay: 0s;
}

.floating-particle.p2 {
    left: 80%;
    top: 25%;
    animation-delay: 0.3s;
}

.floating-particle.p3 {
    left: 90%;
    top: 50%;
    animation-delay: 0.6s;
}

.floating-particle.p4 {
    left: 80%;
    top: 75%;
    animation-delay: 0.9s;
}

.floating-particle.p5 {
    left: 50%;
    top: 90%;
    animation-delay: 1.2s;
}

.floating-particle.p6 {
    left: 20%;
    top: 75%;
    animation-delay: 1.5s;
}

.floating-particle.p7 {
    left: 10%;
    top: 50%;
    animation-delay: 1.8s;
}

.floating-particle.p8 {
    left: 20%;
    top: 25%;
    animation-delay: 2.1s;
}

.floating-particle.p9 {
    left: 40%;
    top: 30%;
    animation-delay: 0.4s;
    width: 8px;
    height: 8px;
}

.floating-particle.p10 {
    left: 60%;
    top: 40%;
    animation-delay: 0.8s;
    width: 8px;
    height: 8px;
}

.floating-particle.p11 {
    left: 35%;
    top: 60%;
    animation-delay: 1.3s;
    width: 8px;
    height: 8px;
}

.floating-particle.p12 {
    left: 65%;
    top: 65%;
    animation-delay: 1.7s;
    width: 8px;
    height: 8px;
}

@keyframes floatParticle {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-15px) scale(1.1);
        opacity: 1;
    }
}

/* Orbit Rings */
.orbit-ring {
    position: absolute;
    border: 1px solid rgba(243, 112, 33, 0.15);
    border-radius: 50%;
    animation: pulseRing 3s ease-in-out infinite;
}

.orbit-ring.ring-1 {
    width: 160px;
    height: 160px;
    animation-delay: 0s;
}

.orbit-ring.ring-2 {
    width: 220px;
    height: 220px;
    animation-delay: 0.5s;
}

.orbit-ring.ring-3 {
    width: 280px;
    height: 280px;
    animation-delay: 1s;
}

@keyframes pulseRing {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.6;
    }
}

/* Tech Label */
.tech-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 32px;
    background: #F37021;
    border-radius: 30px;
}

.label-en {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.label-ko {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

/* Patent Emblem */
.patent-emblem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 60px;
}

.emblem-badge {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, #E8E8E8 0%, #FFFFFF 50%, #D4D4D4 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.emblem-inner {
    width: 64px;
    height: 64px;
    background: linear-gradient(145deg, #FFFFFF 0%, #F0F0F0 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

.emblem-icon {
    font-size: 18px;
    color: #F37021;
}

.emblem-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: #666666;
    letter-spacing: 0.05em;
}

.emblem-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #888888;
    margin: 0;
}

/* Part 3: Tech Features Grid */
.tech-features {
    padding: 80px 20px 120px;
    background: #FFFFFF;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.feature-icon {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFAFA;
    border-radius: 24px;
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
    background: #FFF5F0;
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(243, 112, 33, 0.1);
}

/* Feature 1: Compression Visual */
.compress-visual {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drop-large {
    font-size: 32px;
    opacity: 0.6;
}

.compress-arrow {
    font-size: 20px;
    color: #F37021;
    font-weight: bold;
}

.dot-small {
    font-size: 16px;
    color: #F37021;
}

/* Feature 2: Coating Visual */
.coating-visual {
    position: relative;
    width: 60px;
    height: 60px;
}

.coat-layer {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(243, 112, 33, 0.2);
}

.coat-layer.layer-outer {
    width: 60px;
    height: 60px;
    top: 0;
    left: 0;
}

.coat-layer.layer-mid {
    width: 44px;
    height: 44px;
    top: 8px;
    left: 8px;
    border-color: rgba(243, 112, 33, 0.4);
}

.coat-layer.layer-inner {
    width: 28px;
    height: 28px;
    top: 16px;
    left: 16px;
    border-color: rgba(243, 112, 33, 0.6);
}

.coat-core {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 22px;
    left: 22px;
    background: #F37021;
    border-radius: 50%;
}

/* Feature 3: Precision Visual */
.precision-visual {
    position: relative;
    width: 60px;
    height: 60px;
}

.target-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(243, 112, 33, 0.3);
    border-radius: 50%;
}

.target-crosshair-h,
.target-crosshair-v {
    position: absolute;
    background: rgba(243, 112, 33, 0.3);
}

.target-crosshair-h {
    width: 60px;
    height: 1px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.target-crosshair-v {
    width: 1px;
    height: 60px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.target-center {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #F37021;
    border-radius: 50%;
}

/* Feature Titles */
.feature-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #F37021;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.feature-copy {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #555555;
    margin: 0;
}

/* Scroll Fade for New Tech Section */
.tech-section-new .scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.tech-section-new .scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .tech-bridge {
        padding: 80px 20px 60px;
    }

    .bridge-intro {
        font-size: 16px;
    }

    .bridge-question {
        font-size: 22px;
    }

    .particle-container {
        width: 250px;
        height: 250px;
    }

    .particle-core {
        width: 160px;
        height: 160px;
    }

    .orbit-ring.ring-1 {
        width: 130px;
        height: 130px;
    }

    .orbit-ring.ring-2 {
        width: 180px;
        height: 180px;
    }

    .orbit-ring.ring-3 {
        width: 230px;
        height: 230px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .feature-icon {
        width: 100px;
        height: 100px;
    }

    .tech-features {
        padding: 60px 20px 80px;
    }
}

/* =====================================================
   SECTION 10: Real Review (The Fit Gallery)
   ===================================================== */

.review-section {
    background: #F9F9F9;
    padding: 100px 20px;
    overflow: hidden;
}

.review-header {
    text-align: center;
    margin-bottom: 60px;
}

.review-sub {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #F37021;
    letter-spacing: 0.1em;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.review-title {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(32px, 6vw, 48px);
    font-weight: 700;
    color: #111111;
    line-height: 1.3;
    margin: 0 0 16px;
    letter-spacing: -0.03em;
}

.review-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #666666;
    margin: 0;
}

/* Gallery Slider */
.review-gallery-wrap {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 40px;
    /* Space for scrollbar or shadow */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.review-gallery-wrap::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.review-gallery {
    display: flex;
    gap: 24px;
    padding: 0 20px;
    /* Side padding for mobile scroll */
    width: max-content;
    margin: 0 auto;
}

/* Review Card */
.review-card {
    position: relative;
    width: 320px;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    scroll-snap-align: center;
}

.review-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.card-image {
    width: 100%;
    height: 100%;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.review-card:hover .card-image img {
    transform: scale(1.05);
}

/* Card Overlay */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card-copy {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.5;
    margin: 0 0 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-data {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.review-card:hover .card-data {
    color: #F37021;
    /* Orange accent on hover */
}

.review-card:hover .data-divider {
    color: rgba(255, 255, 255, 0.4);
}

.data-label {
    font-weight: 700;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .review-gallery-wrap {
        scroll-snap-type: x mandatory;
        padding-left: 0;
        padding-right: 0;
    }

    .review-gallery {
        padding: 0 24px;
        /* 좌우 여백 줄임 */
        gap: 16px;
        /* 카드 간격 줄임 */
    }

    .review-card {
        width: 260px;
        /* 카드 너비 줄여서 옆 카드 노출 */
        height: 360px;
        flex-shrink: 0;
    }
}


/* =====================================================
   SECTION 9: Roadmap Header Updates
   ===================================================== */
.roadmap-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.roadmap-protocol {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #F37021;
    letter-spacing: 0.1em;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.roadmap-title {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
    margin: 0 0 24px;
}

.roadmap-title .highlight {
    color: #F37021;
}

.roadmap-desc-box {
    margin-top: 24px;
    padding: 24px;
    background: #FAFAFA;
    border-radius: 16px;
    display: inline-block;
}

.roadmap-key-concept {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 12px;
}

.roadmap-desc-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

.roadmap-visual {
    margin-top: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.roadmap-graph-img {
    max-width: 50%;
    height: auto;
    display: block;
    margin-bottom: 40px;
}

.roadmap-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1000px;
    text-align: left;
}

.roadmap-step-item {
    background: #FAFAFA;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #EEEEEE;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roadmap-step-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.step-header {
    margin-bottom: 16px;
    border-bottom: 1px solid #EEEEEE;
    padding-bottom: 12px;
}

.step-num {
    display: block;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

.step-1-color {
    color: #F37021;
}

.step-2-color {
    color: #FFB74D;
}

.step-3-color {
    color: #00897B;
}

.step-name {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.step-period {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    margin-left: 4px;
}

.step-badge {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.step-description {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin: 0;
    word-break: keep-all;
}

.step-description strong {
    color: #111;
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .roadmap-steps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .roadmap-graph-img {
        max-width: 80%;
        margin-bottom: 30px;
    }

    .roadmap-step-item {
        padding: 20px;
    }
}


/* =====================================================
   SECTION 15: Doctor's Message
   ===================================================== */
.doctor-message-section {
    background-color: #FFFFFF;
    padding: 180px 0;
    /* Generous vertical padding */
    text-align: center;
}

.message-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.message-dot {
    width: 6px;
    height: 6px;
    background-color: #F37021;
    border-radius: 50%;
    margin-bottom: 40px;
}

.message-sub {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #AAAAAA;
    /* Light gray */
    letter-spacing: 0.15em;
    margin: 0 0 24px;
    text-transform: uppercase;
}

.message-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 60px;
    line-height: 1.4;
}

.message-body {
    margin-bottom: 80px;
}

.message-body p {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 400;
    /* Light/Regular */
    color: #444444;
    /* Dark gray */
    line-height: 2.0;
    /* Generous line height */
    margin: 0;
}

.message-doctor-profile {
    margin-bottom: 24px;
}

.doctor-profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 3px solid #F37021;
    box-shadow: 0 8px 24px rgba(243, 112, 33, 0.15);
}

.message-signature {
    margin-top: 20px;
}

.signature-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.signature-name {
    font-family: 'Nanum Pen Script', cursive;
    font-size: 36px;
    /* Larger for signature effect */
    color: #111111;
    transform: rotate(-2deg);
    /* Slight tilt for handwriting feel */
    display: inline-block;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .doctor-message-section {
        padding: 120px 20px;
    }

    .message-title {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .message-body p {
        font-size: 16px;
        line-height: 1.8;
    }

    .signature-name {
        font-size: 30px;
    }
}


/* =====================================================
   SECTION 16: FAQ
   ===================================================== */
.faq-section {
    background-color: #FFFFFF;
    padding: 120px 0;
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
}

.faq-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #111;
    line-height: 1.3;
}

.faq-subtitle {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #666;
    margin-top: 12px;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
    border-top: 2px solid #111;
}

.faq-item {
    border-bottom: 1px solid #EEE;
}

.faq-question {
    padding: 24px 0;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: #F37021;
}

.q-mark {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #F37021;
    /* Orange */
    margin-right: 12px;
    flex-shrink: 0;
    line-height: 1.4;
}

.q-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    flex-grow: 1;
    line-height: 1.4;
}

.q-icon {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
    margin-left: 16px;
}

.q-icon::before,
.q-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #222;
    transition: transform 0.3s ease;
}

.q-icon::before {
    width: 14px;
    height: 2px;
    margin-left: -7px;
    margin-top: -1px;
}

.q-icon::after {
    width: 2px;
    height: 14px;
    margin-left: -1px;
    margin-top: -7px;
}

/* Active State for Question */
.faq-item.active .q-text {
    color: #F37021;
}

.faq-item.active .q-icon::after {
    transform: rotate(90deg);
    /* Turns + into - */
}

.faq-item.active .q-icon::before {
    background-color: #F37021;
}

.faq-item.active .q-icon::after {
    background-color: #F37021;
}


/* Answer Area */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-answer-content {
    background-color: #F9F9F9;
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.faq-answer-content p {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444;
    line-height: 1.6;
    margin: 0 0 12px;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .faq-section {
        padding: 80px 20px;
    }

    .faq-title {
        font-size: 28px;
    }

    .faq-subtitle {
        font-size: 16px;
    }

    .q-text {
        font-size: 16px;
    }
}


/* =====================================================
   SECTION 17: Final CTA (The Last Dot)
   ===================================================== */
.final-cta-section {
    background-color: #FFFFFF;
    padding: 180px 0;
    /* Generous vertical padding (150px+) */
    text-align: center;
}

.final-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.final-headline {
    font-family: 'Pretendard', sans-serif;
    font-size: 54px;
    /* Very large */
    font-weight: 800;
    /* Black/Bold */
    color: #111;
    line-height: 1.1;
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
}

.last-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #FF6B00;
    /* Vivid Orange */
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: baseline;
    position: relative;
    bottom: 4px;
    /* Adjust alignment */
}

.final-sub {
    font-family: 'Pretendard', sans-serif;
    font-size: 24px;
    font-weight: 300;
    /* Thin/Light */
    color: #333;
    margin-bottom: 40px;
    letter-spacing: -0.02em;
}

.final-body {
    margin-bottom: 80px;
}

.final-body p {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #555;
    line-height: 1.6;
    margin: 0 0 8px;
}

.final-bottom-msg {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #888;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .final-cta-section {
        padding: 120px 0;
    }

    .final-headline {
        font-size: 30px;
    }

    .last-dot {
        width: 12px;
        height: 12px;
        bottom: 2px;
    }

    .final-sub {
        font-size: 18px;
        margin-bottom: 30px;
    }
}

/* ===== Final CTA Logo ===== */
.final-logo {
    display: inline-block;
    height: 48px;
    /* 텍스트 크기에 맞게 조절 */
    width: auto;
    vertical-align: middle;
    margin-right: 8px;
}

@media (max-width: 768px) {
    .final-logo {
        height: 32px;
    }
}

/* ===== Card Logo Style ===== */
.card-logo {
    display: block;
    max-width: 150px;
    max-height: none;
    /* 높이 제한 해제 */
    height: auto !important;
    margin: 30px auto 30px;
    object-fit: unset;
    /* object-fit 해제 */
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .card-logo {
        max-width: 120px;
    }
}

/* ===== Section 3: Product Reveal Logo ===== */
.product-logo {
    display: block;
    max-width: 200px;
    /* 이 값으로 크기 조절 */
    height: auto;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .product-logo {
        max-width: 160px;
        /* 모바일 크기 */
    }
}

/* 비대면 신청 버튼 (주황색) */
.cta-remote {
    background-color: #F37021 !important;
    color: #FFFFFF !important;
    border: none !important;
}

.cta-remote:hover {
    background-color: #E05A10 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(243, 112, 33, 0.3);
}

/* =====================================================
   SECTION: Precision Dosing (6단계 농도 시스템)
   ===================================================== */

.dosing-section {
    background-color: #FAFAFA;
    padding: 100px 20px;
}

.dosing-section .container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.dosing-header {
    text-align: center;
    margin-bottom: 60px;
}

.dosing-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #F37021;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.dosing-title {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
}

.dosing-title span {
    color: #F37021;
}

/* 6 Cards Grid */
.dosing-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

.dosing-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 28px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.dosing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Dot Icons */
.dosing-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 8px;
}

.dot-1 {
    background-color: #FDEBD0;
    border: 2px solid #FAD7A0;
}

.dot-2 {
    background-color: #FAD7A0;
}

.dot-3 {
    background-color: #F8C471;
}

.dot-4 {
    background-color: #F5A623;
}

.dot-5 {
    background-color: #F37021;
}

.dot-6 {
    background-color: #D35400;
}

/* Card Text */
.dosing-num {
    font-family: 'Pretendard', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #111111;
}

.dosing-name {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dosing-percent {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #AAAAAA;
}

/* Phase Indicator */
.dosing-phases {
    margin-bottom: 40px;
}

.phase-line {
    height: 2px;
    background: linear-gradient(to right, #FDEBD0 0%, #F8C471 33%, #F37021 66%, #D35400 100%);
    border-radius: 2px;
    margin-bottom: 16px;
}

.phase-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.phase-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
}

/* Notice Box */
.dosing-notice {
    background: #FFFFFF;
    border-left: 4px solid #F37021;
    padding: 24px 28px;
    border-radius: 0 12px 12px 0;
}

.dosing-notice p {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    color: #555555;
    line-height: 1.7;
    margin: 0;
}

.dosing-notice p:first-child {
    margin-bottom: 8px;
}

.dosing-notice strong {
    color: #333333;
}

/* ===== Product Mockup Section (Full Background) ===== */
.mockup-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* 뷰포트 전체 높이 */
    overflow: hidden;
}

.mockup-bg-image {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    object-fit: cover;
    /* 이미지 비율 유지하며 꽉 채움 */
    object-position: center;
    /* 이미지 중앙 정렬 */
    display: block;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .dosing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .dosing-section {
        padding: 70px 20px;
    }

    .dosing-header {
        margin-bottom: 40px;
    }

    .dosing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .dosing-card {
        padding: 20px 12px;
        gap: 8px;
    }

    .dosing-dot {
        width: 36px;
        height: 36px;
    }

    .dosing-num {
        font-size: 24px;
    }

    .dosing-name {
        font-size: 12px;
    }

    .dosing-percent {
        font-size: 11px;
    }

    .phase-labels {
        padding: 0;
        font-size: 12px;
    }

    .phase-label {
        font-size: 12px;
    }

    .dosing-notice {
        padding: 20px;
    }

    .dosing-notice p {
        font-size: 14px;
    }
}