/*
 * Front Page Specific Styles (Figma Matched)
 */

/* ==========================================================================
   Section Defaults
   ========================================================================== */
section {
    padding: 120px 0;
    position: relative;
}

.section-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.section-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-gray);
    margin-bottom: 60px;
    line-height: 1.7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    word-break: keep-all;
    overflow-wrap: break-word;
}

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

.badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px; /* 조금 더 키움: 8px 20px -> 10px 24px */
    border-radius: 30px;
    font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif !important;
    font-size: 0.9rem !important; /* 글자 크기 상향: 0.8rem -> 0.9rem */
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin-bottom: 24px;
    letter-spacing: 0.12em !important;
    width: max-content;
}

.badge-cyan-outline {
    background-color: rgba(255, 255, 255, 0.05);
    /* Premium glass vibe */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subdued outline instead of raw cyan */
    color: var(--color-text-white);
    /* High-end white text */
    display: inline-flex;
    /* Required for tag-dot alignment */
    align-items: center;
    gap: 16px;
    /* 닷(Dot) 및 가상 요소 레이아웃 기준점 */
}

/* Phase 194/195/195-2: Neon Pulse Dot (Live Status Indicator) */
.tag-dot {
    position: relative;
    width: 10px;
    height: 10px;
    display: inline-block;
    flex-shrink: 0;
}

/* 고정된 중앙 닷(Solid Core) */
.tag-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-brand-cyan);
    border-radius: 50%;
    z-index: 2;
}

/* 퍼져나가는 레이더 링(Pulse Ring) */
.tag-dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-brand-cyan);
    border-radius: 50%;
    animation: pulse-ring 2s cubic-bezier(0.21, 0.53, 0.56, 1) infinite;
    z-index: 1; /* 부모 뱃지 배경에 묻히지 않도록 z-index 양수 배치 */
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.8);
        opacity: 0;
    }
}

.badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-brand-cyan);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

/* Base Buttons */
.btn {
    display: inline-block;
    padding: 16px 36px;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.btn-rounded {
    border-radius: 40px;
}

.btn-white {
    background-color: var(--color-text-white);
    color: var(--color-bg-navy) !important;
}

.btn-white:hover {
    background-color: #F0F0F0;
    transform: translateY(-2px);
}

.btn-outline-white {
    background-color: transparent;
    color: var(--color-text-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn-outline-subtle {
    background-color: transparent;
    color: var(--color-text-white);
    border: 1px solid var(--color-border-subtle);
    padding: 12px 28px;
    font-size: 0.95rem;
    border-radius: 8px;
}

.btn-outline-subtle:hover {
    border-color: var(--color-text-gray);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Button with Sliding Arrow */
.btn-with-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 유틸리티 폭 100% 버튼 (비밀글 문의 등 긴 영역) */
.btn-full-width {
    width: 100% !important;
}

.btn-with-arrow .arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-with-arrow:hover .arrow {
    transform: translateX(5px);
    /* 위아래 들썩임 대신 우측으로 살짝 밀려들어가는 고급 트랜지션 */
}

/* ==========================================================================
   Hero Section 
   ========================================================================== */
.hero-section {
    height: 100vh;
    min-height: 700px;
    /* 불필요한 빈 공간 방지를 위해 최소 높이를 800px에서 축소 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: var(--header-height);
    padding-bottom: 0;
    /* 공통 section 패딩(120px 0) 중 하단 부분 무효화 */
    background: radial-gradient(circle at center, rgba(0, 163, 255, 0.15) 0%, var(--color-bg-navy) 70%);
}

.hero-background-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle geometric lines background */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100px 100px;
    background-position: center center;
    transform: perspective(1000px) rotateX(60deg) scale(2.5) translateY(-200px);
    z-index: 1;
    pointer-events: none;
    opacity: 0.3;
}

/* --------------------------------------------------------------------------
   HERO SECTION - FINAL OPTION 10: KOREAN ENTERPRISE HIGH-END CONSOLE
-------------------------------------------------------------------------- */

.hero-iot-true {
    position: relative;
    height: 100vh;
    min-height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #02040a;
    /* Fallback Dark */
    font-family: 'Inter', -apple-system, sans-serif;
}

/* 1. Epic AI Masterpiece Background */
.iot-masterpiece-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center bottom -5%;
    z-index: 0;
    opacity: 0.9;
    /* Subtle breathing zoom */
    animation: slow-zoom 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slow-zoom {
    0% {
        transform: scale(1.0);
    }

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

.iot-bg-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(2, 4, 10, 0.2) 0%,
            rgba(2, 4, 10, 0.6) 60%,
            rgba(2, 4, 10, 0.95) 100%);
    z-index: 1;
    pointer-events: none;
}

/* 2. Typography Core */
.hero-content-true {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -120px;
    /* Shifted higher due to the console height */
}

.true-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 8px 20px;
    border-radius: 30px;
    background: rgba(0, 242, 254, 0.05);
    border: 1px solid rgba(0, 242, 254, 0.2);
    margin-bottom: 30px;
    backdrop-filter: blur(8px);
}

.true-status-badge .pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-brand-cyan);
    box-shadow: 0 0 10px var(--color-brand-cyan);
    animation: simple-pulse 2s infinite;
}

@keyframes simple-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 242, 254, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 242, 254, 0);
    }
}

.true-status-badge .status-text {
    font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif !important;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-white);
    letter-spacing: 0.12em;

}

.hero-title-true {
    font-size: 4.5rem;
    /* Adjusted for Korean font density */
    line-height: 1.25;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: -0.03em;
    /* Tighter tracking for Hangul */
    margin: 0;
    word-break: keep-all;
}

.hero-title-true .title-highlight-true {
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
    background: linear-gradient(135deg, #fff 0%, var(--color-brand-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0;
}

.hero-subtitle-true {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-top: 24px;
    max-width: 700px;
    font-weight: 400;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

/* 3. Glassmorphism IoT Dashboard Console (Reference Match) */
.true-dashboard-console {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1250px;
    z-index: 20;
}

.console-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(8, 12, 20, 0.75);
    /* Darker true glass */
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Softer outer stroke */
    border-radius: 20px;
    /* Slight less rounded */
    padding: 24px 40px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

/* Left: Console Sensors */
.console-sensors {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Ensure left alignment */
    gap: 32px;
    /* Matched spacing from reference */
}

.sensor-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Reference shows left-aligned elements */
    gap: 6px;
}

.sensor-item .s-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.s-data-group {
    display: inline-flex;
    align-items: baseline;
    /* Align values and units perfectly */
}

.sensor-item .s-value {
    font-size: 1.5rem;
    /* Noticeably larger for values */
    font-weight: 700;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0em;
}

.sensor-item .highlight-val {
    color: #00d2ff;
    /* Match the exact reference cyan */
    text-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
}

.sensor-item .white-val {
    color: #ffffff;
}

.sensor-item .s-unit {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 4px;
    /* Tight padding between value and unit */
}

/* Very subtle divider based on reference */
.sensor-divider {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Right: Console Actions */
.console-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.true-btn-ghost {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 24px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.true-btn-ghost:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* 1번 메인 버튼 복원: 기존의 압도적인 블루 네온 글로우 및 그라데이션 원복 */
.true-btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800; /* 그라데이션이 돋보이도록 가장 두껍게 */
    background: rgba(255, 255, 255, 0.03); /* 다크 글래스모피즘 기반 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.true-btn-primary .btn-text {
    /* 일루미네이팅 네온 버튼 위의 텍스트는 퓨어 화이트로 최상 퀄리티 시인성 확보 */
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    position: relative;
    z-index: 2; /* 링 애니메이션 위로 올라오도록 배치 */
}

.btn-grad-3 {
    /* 모바일 배경의 우주/사이버틱한 네이비 컬러감을 폭발시키는 일루미네이팅 딥 시안 그라데이션 */
    background: linear-gradient(135deg, #00C6FF 0%, #0072FF 100%) !important; 
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px rgba(0, 198, 255, 0.45) !important; /* 강렬한 네온 글로우 */
}

/* 마우스 오버(데스크톱) 또는 터치(모바일 액티브) 시 버튼 반응 */
.true-btn-primary:hover,
.true-btn-primary:active {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.2); /* 공통적으로 20% 밝아지며 터치감을 줌 */
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2) !important;
}

/* 지나가는 광선 기믹 */
.true-btn-primary .btn-glow-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit; /* 부모 값(8px) 상속으로 둥근 테두리 유지 */
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.true-btn-primary:hover .btn-glow-ring,
.true-btn-primary:active .btn-glow-ring {
    transform: translateX(100%);
}

/* 서브 버튼 공통 뼈대 구조: 이미지 레퍼런스 기준 완벽한 투명 고스트 세팅 */
.hero-btn-ghost-magenta,
.hero-btn-ghost-cyan {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500 !important; /* 단정한 고스트 버튼 굵기 */
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: -0.01em;
    color: #ffffff !important; /* 공주님 지시: 서브 버튼 글자색상 퓨어 화이트 롤백 */
    overflow: hidden;
}

/* 텍스트 z-index 보장 (구조적 안정성) */
.hero-btn-ghost-magenta .btn-text,
.hero-btn-ghost-cyan .btn-text {
    position: relative;
    z-index: 2;
    color: #ffffff !important; /* 텍스트 순백색 복원 */
    font-weight: 500 !important; /* 굵기 원복 */
}

/* 2번 서브 버튼(솔루션 문의): 화이트 틴트 강도를 높여 어두운 바탕에서도 눈에 띄는 선명한 반투명 글래스 룩 */
.hero-btn-ghost-magenta {
    background: rgba(255, 255, 255, 0.15); /* 빛을 살짝 받은 듯한 밝은 틴트로 시인성 대폭 상향 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.35); /* 테두리를 또렷하게 하여 형태를 확실히 규정 */
}

/* 터치/마우스 호버 시 공통 후광 및 밝기 효과 (이펙트 복사) */
.hero-btn-ghost-magenta:hover,
.hero-btn-ghost-cyan:hover,
.hero-btn-ghost-magenta:active,
.hero-btn-ghost-cyan:active {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.2); /* 공통적으로 20% 밝아지며 터치감을 줌 */
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15); /* 은은한 화이트 톤의 아우라 폭발 */
}

/* 지나가는 광선 기믹 (서브 버튼 내부 글로우 링 애니메이션) */
.hero-btn-ghost-magenta .btn-glow-ring,
.hero-btn-ghost-cyan .btn-glow-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* 서브 버튼은 오리지널 느낌을 살리기 위해 은은한 화이트 빛줄기 적용 */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.hero-btn-ghost-magenta:hover .btn-glow-ring,
.hero-btn-ghost-magenta:active .btn-glow-ring,
.hero-btn-ghost-cyan:hover .btn-glow-ring,
.hero-btn-ghost-cyan:active .btn-glow-ring {
    transform: translateX(100%);
}

/* 3번 서브 버튼(새소식 보기): 2번 버튼보다 살짝 더 투명하지만 확실히 형태를 갖춘 은은한 크리스탈 글래스 */
.hero-btn-ghost-cyan {
    background: rgba(255, 255, 255, 0.08); /* 텍스트 시인성을 위한 베이스 틴트 확보 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* 은은하지만 테두리 인식 가능 수준 */
}

/* [Phase 214] 모바일 기기(터치 환경) Sticky Hover (잔상 간섭) 완벽 차단 로직 */
/* 공주님 피드백 반영: 한 버튼을 눌렀을 때 계속 불이 켜져서 옆 버튼과 간섭되는 현상 방지 */
@media (hover: none) {
    /* 모바일에서는 호버(:hover) 잔상을 완전히 제거하고, 실제 터치(:active) 시에만 반응하도록 락(Lock) */
    .true-btn-primary:hover,
    .hero-btn-ghost-magenta:hover,
    .hero-btn-ghost-cyan:hover {
        transform: translateY(0) scale(1) !important;
        filter: brightness(1) !important;
    }
    
    /* 메인 버튼의 본래 사이버 네온 그림자는 호버 잔상 제거 시에도 유지되도록 복원 */
    .true-btn-primary:hover {
        box-shadow: 0 8px 32px rgba(0, 198, 255, 0.45) !important;
    }
    
    .hero-btn-ghost-magenta:hover,
    .hero-btn-ghost-cyan:hover {
        box-shadow: none !important;
    }

    /* 광선 링(Glow Ring) 호버 잔상 초기화 */
    .true-btn-primary:hover .btn-glow-ring,
    .hero-btn-ghost-magenta:hover .btn-glow-ring,
    .hero-btn-ghost-cyan:hover .btn-glow-ring {
        transform: translateX(-100%) !important;
    }

    /* 터치(:active) 시에만 압도적인 후광과 광선 효과 발동 강제 */
    .true-btn-primary:active,
    .hero-btn-ghost-magenta:active,
    .hero-btn-ghost-cyan:active {
        transform: translateY(-2px) scale(1.02) !important;
        filter: brightness(1.2) !important;
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2) !important;
    }
    
    .true-btn-primary:active .btn-glow-ring,
    .hero-btn-ghost-magenta:active .btn-glow-ring,
    .hero-btn-ghost-cyan:active .btn-glow-ring {
        transform: translateX(100%) !important;
    }
    
    /* 버튼 탭 그레이 박스 방지 */
    .hero-actions-minimal a {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Scroll Target */
.true-scroll-target {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.true-scroll-target:hover {
    opacity: 1;
}

.mouse-icon-true {
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    position: relative;
}

.wheel-true {
    width: 4px;
    height: 6px;
    background: var(--color-brand-cyan);
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scroll-wheel-true 1.5s infinite;
}

@keyframes scroll-wheel-true {
    0% {
        top: 6px;
        opacity: 1;
        height: 6px;
    }

    50% {
        top: 14px;
        opacity: 1;
        height: 10px;
    }

    100% {
        top: 22px;
        opacity: 0;
        height: 6px;
    }
}

/* === Responsive Rules (Option 10 Korean Dashboard) === */
@media (max-width: 1024px) {
    .console-inner {
        flex-direction: column;
        gap: 24px;
        padding: 32px 24px;
    }

    .console-sensors,
    .console-actions {
        width: 100%;
        justify-content: center;
    }

    .hero-title-true {
        font-size: 3.5rem;
    }
}

/* === Responsive Line Breaks === */
.split-mobile { display: none; }
@media (max-width: 768px) {
    .split-pc { display: none; }
    .split-mobile { display: inline; }
}

@media (max-width: 768px) {
    .hero-title-true {
        font-size: 2.8rem;
        word-break: keep-all;
    }

    .hero-subtitle-true {
        font-size: 1rem;
        padding: 0 20px;
        margin-bottom: 36px !important; /* 텍스트와 버튼 사이를 띄워 답답함을 해소 (24px -> 36px 상향) */
    }

    .true-dashboard-console {
        bottom: 20px;
        width: calc(100% - 40px);
    }

    .console-sensors {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
    }

    .sensor-divider {
        width: 100%;
        height: 1px;
    }

    .console-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-actions-minimal {
        gap: 8px !important; /* 버튼 간격을 16px에서 8px로 압축 */
        flex-direction: column !important; /* 모바일에서 3개 버튼 모두 세로로 강제 정렬 */
        width: 100%;
    }

    .true-btn-primary,
    .hero-btn-ghost-magenta,
    .hero-btn-ghost-cyan {
        width: 100%;
        text-align: center;
        padding: 16px 24px !important; /* 모바일 전용 여백 완전 통일 */
        font-size: 1.05rem !important; /* 모바일 가독성 맞춤 사이즈 완전 통일 */
    }

    /* 모바일에서 배경 코어 이미지를 위로 더욱 확 끌어올려 한 화면 구성에 맞춤 */
    .hero-section.hero-iot-true .iot-masterpiece-bg {
        background-size: auto 115% !important; /* 위로 당기기 위한 여유분 생성 (높이 115%) */
        background-position: center bottom !important; /* 하단을 기준으로 이미지를 위로 밀어올림 (코어 위치 대폭 상승) */
    }

    .true-scroll-target {
        display: none;
    }
}


/* SVG Button Base (Global Component) */
.btn-with-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 32px;
    min-width: 280px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

/* 기존 좌측 투명 무게추 기능 제거 (Absolute SVG 방식을 통해 순수 텍스트 정중앙 정렬 달성) */
.btn-with-svg::before {
    display: none;
}

.btn-with-svg span {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 2px;
}

.btn-with-svg svg {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    transition: right 0.3s ease; /* changed from transform for bulletproof layout shift */
}

.btn-with-svg:hover {
    transform: translateY(-2px);
}

.btn-with-svg:hover svg {
    right: 28px;
}

/* 3. Editorial Scroll Line Indicator */
.hero-scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.3);
    gap: 16px;
    transition: color 0.3s ease;
    margin: 40px auto 20px auto;
    /* Changed from absolute positioning to safe flow margin */
}

.hero-scroll-indicator:hover {
    color: rgba(255, 255, 255, 0.8);
}

.scroll-text {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    font-weight: 500;
    margin-right: -0.3em;
    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--color-text-white);
    animation: scroll-line-anim 2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes scroll-line-anim {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(200%);
    }
}

/* ==========================================================================
   Core Solutions (Our Domains) 
   ========================================================================== */
.domains-section {
    background-color: var(--color-bg-navy);
    scroll-margin-top: var(--header-height);
    /* 앵커 랜딩 시 고정 헤더(Fixed Header)영역 침범 방어 */
}

/* ==========================================================================
   Domains Intro Fullscreen (User Feedback Request)
   ========================================================================== */
.domains-intro-fullscreen {
    position: relative;
    height: calc(100vh - var(--header-height, 80px));
    /* 데스크톱은 화면 꽉 차게 고정 높이 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0 20px;
    /* 세로 여백 제거, 가로 패딩만 유지 */
    box-sizing: border-box;
}

/* Background tech grid for expert look */
.domains-intro-fullscreen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    pointer-events: none;
}

.visual-glow-sphere {
    position: absolute;
    width: 150vw;
    /* 광원 확장 */
    height: 80vh;
    background: radial-gradient(ellipse at center, rgba(0, 163, 255, 0.08) 0%, transparent 60%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.domains-intro-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.domains-intro-content .section-title {
    margin-bottom: 12px;
}

.domains-intro-content .section-subtitle {
    font-size: 0.95rem;
    max-width: 600px;
    margin-bottom: 0;
}

/* --- Domains Intro Visual (4 Nodes) --- */
.intro-domains-visual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    /* 간격 축소로 꽉 찬 느낌 */
    margin-top: 32px;
    width: 100%;
    max-width: 480px;
    z-index: 10;
}

@media (min-width: 768px) {
    .intro-domains-visual {
        grid-template-columns: repeat(4, 1fr);
        max-width: 800px;
        gap: 24px;
    }
}

.intro-node {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    /* 상단 하이라이트 */
    border-radius: 20px;
    /* 둥근 벤토박스 모양 */
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* 터치 디바이스(모바일)의 강제 호버 고착(Sticky hover) 효과 방어 */
@media (hover: hover) {
    .intro-node:hover {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .node-farm:hover .node-icon {
        border-color: var(--color-farm-icon);
        color: var(--color-farm-icon);
        background: rgba(46, 204, 113, 0.1);
    }

    .node-home:hover .node-icon {
        border-color: var(--color-home-icon);
        color: var(--color-home-icon);
        background: rgba(243, 156, 18, 0.1);
    }

    .node-sensor:hover .node-icon {
        border-color: var(--color-sensor-icon);
        color: var(--color-sensor-icon);
        background: rgba(156, 39, 176, 0.1);
    }

    .node-factory:hover .node-icon {
        border-color: var(--color-brand-blue);
        color: var(--color-brand-blue);
        background: rgba(0, 82, 212, 0.1);
    }
}

/* 기본 상태는 무채색(비활성 상태)으로 통일 - 눌러야만 활성화됨을 암시 */
.intro-node span {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.node-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    /* 기본 비활성화 무채색 */
    transition: all 0.4s ease;
}

/* [NEW: User Feedback] 클릭(터치) 시 강렬한 활성화 딜레이 모션 
   - 개별 솔루션 컬러 매핑으로 고급스러운 파동 구현 */
.intro-node.node-active-click {
    transform: scale(0.95);
    transition: all 0.1s ease-out;
}

.intro-node.node-farm.node-active-click {
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.5);
    border-color: var(--color-farm-icon);
}

.intro-node.node-farm.node-active-click .node-icon {
    background: var(--color-farm-icon);
    color: #fff;
    transform: scale(1.1);
}

.intro-node.node-home.node-active-click {
    box-shadow: 0 0 30px rgba(243, 156, 18, 0.5);
    border-color: var(--color-home-icon);
}

.intro-node.node-home.node-active-click .node-icon {
    background: var(--color-home-icon);
    color: #fff;
    transform: scale(1.1);
}

.intro-node.node-sensor.node-active-click {
    box-shadow: 0 0 30px rgba(156, 39, 176, 0.5);
    border-color: var(--color-sensor-icon);
}

.intro-node.node-sensor.node-active-click .node-icon {
    background: var(--color-sensor-icon);
    color: #fff;
    transform: scale(1.1);
}

.intro-node.node-factory.node-active-click {
    box-shadow: 0 0 30px rgba(0, 82, 212, 0.5);
    border-color: var(--color-brand-blue);
}

.intro-node.node-factory.node-active-click .node-icon {
    background: var(--color-brand-blue);
    color: #fff;
    transform: scale(1.1);
}

.intro-node:active {
    transform: translateY(0);
}

.scroll-down-hint {
    margin-top: 24px;
    /* 아래쪽으로 밀어내는 마진 대폭 축소 (화면 안에 꽉 차도록) */
    color: var(--color-brand-cyan);
    font-size: 1.5rem;
    animation: bounce-arrow 2s infinite;
}

@keyframes bounce-arrow {

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

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

    60% {
        transform: translateY(-5px);
    }
}

.solutions-list {
    display: flex;
    flex-direction: column;
    gap: 120px;
    margin-top: 80px;
}

.solution-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: stretch;
}

.solution-text-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.solution-text-col>.btn {
    margin-top: auto;
    align-self: flex-start;
}


/* .reverse-row is applied in HTML for semantic meaning, 
   but actual visual flipping is handled via flex/grid mapping below or media queries */

.solution-image-col {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4/3;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--color-bg-navy-light);
    z-index: 2;
    /* To sit above the glow */
}

/* Ambient Glow behind solutions */
.solution-image-col::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(100px);
    opacity: 0;
    transition: opacity 0.5s ease;
}

#smart-farm .solution-image-col::before {
    background-color: var(--color-farm-icon);
    opacity: 0.15;
}

#smart-home .solution-image-col::before {
    background-color: var(--color-home-icon);
    opacity: 0.15;
}

#smart-sensor .solution-image-col::before {
    background-color: var(--color-sensor-icon);
    opacity: 0.15;
}

#smart-factory .solution-image-col::before {
    background-color: var(--color-factory-icon);
    opacity: 0.15;
}

.solution-row:hover .solution-image-col::before {
    opacity: 0.3;
    /* Brighten on hover */
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.solution-image-col:hover .image-wrapper img {
    transform: scale(1.05);
}

/* Figma Icon Squares */
.domain-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    /* Glassmorphism Refinement */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.icon-green {
    color: var(--color-farm-icon);
}

.icon-yellow {
    color: var(--color-home-icon);
}

.icon-blue {
    color: var(--color-factory-icon);
}

.icon-purple {
    color: var(--color-sensor-icon);
}

.domain-title {
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.04em;
    color: var(--color-text-white);
}

.domain-title-en {
    display: block;
    font-size: 1.0rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 6px;
    margin-bottom: 24px;
}

.domain-desc {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 40px;
    line-height: 1.7;
    font-weight: 300;
    letter-spacing: -0.02em;
}

.domain-features {
    margin-bottom: 40px;
}

.domain-features li {
    font-size: 1.05rem;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    /* 텍스트 최상단(Baseline)에 아이콘 고정 */
    gap: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    font-weight: 400;
}

.check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    /* 강제로 찌그러지지 않도록 방어 */
    margin-top: 3px;
    /* 첫 줄 텍스트와 정확하게 수평 아이레벨 맞춤 */
    border-radius: 50%;
    background-color: transparent;
    font-size: 0.75rem;
    font-weight: bold;
}

/* 테마별 체크 아이콘 색상 동기화 (Green, Yellow, Blue) */
.features-green .check-icon {
    border: 1px solid var(--color-farm-icon);
    color: var(--color-farm-icon);
}

.features-yellow .check-icon {
    border: 1px solid var(--color-home-icon);
    color: var(--color-home-icon);
}

.features-blue .check-icon {
    border: 1px solid var(--color-factory-icon);
    color: var(--color-factory-icon);
}

.features-purple .check-icon {
    border: 1px solid var(--color-sensor-icon);
    color: var(--color-sensor-icon);
}

/* Base button override for domains (Phase 193: Glassmorphism Aura) */
.btn-outline-subtle {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-text-white) !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    font-size: 1.05rem;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
    /* 버튼 자체의 둥근 모서리를 오버레이가 벗어나지 않게 함 */
}

/* Base Hover Glow Effect (All Buttons) */
.btn-outline-subtle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}

.btn-outline-subtle svg {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-outline-subtle:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn-outline-subtle:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* .btn-outline-subtle:hover svg {
    transform: translateX(6px);
} */
/* Domain-Specific Signature Glow Colors */
#smart-farm .btn-outline-subtle:hover {
    border-color: rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.05);
    box-shadow: 0 8px 24px rgba(46, 204, 113, 0.15);
}

#smart-farm .btn-outline-subtle:hover::before {
    background: radial-gradient(circle, rgba(46, 204, 113, 0.2) 0%, transparent 60%);
}

#smart-home .btn-outline-subtle:hover {
    border-color: rgba(243, 156, 18, 0.5);
    background: rgba(243, 156, 18, 0.05);
    box-shadow: 0 8px 24px rgba(243, 156, 18, 0.15);
}

#smart-home .btn-outline-subtle:hover::before {
    background: radial-gradient(circle, rgba(243, 156, 18, 0.2) 0%, transparent 60%);
}

#smart-sensor .btn-outline-subtle:hover {
    border-color: rgba(156, 39, 176, 0.5);
    background: rgba(156, 39, 176, 0.05);
    box-shadow: 0 8px 24px rgba(156, 39, 176, 0.15);
}

#smart-sensor .btn-outline-subtle:hover::before {
    background: radial-gradient(circle, rgba(156, 39, 176, 0.2) 0%, transparent 60%);
}

#smart-factory .btn-outline-subtle:hover {
    border-color: rgba(52, 152, 219, 0.5);
    background: rgba(52, 152, 219, 0.05);
    box-shadow: 0 8px 24px rgba(52, 152, 219, 0.15);
}

#smart-factory .btn-outline-subtle:hover::before {
    background: radial-gradient(circle, rgba(52, 152, 219, 0.2) 0%, transparent 60%);
}

/* ==========================================================================
   About Solluna-IoT Grid 
   ========================================================================== */
.about-solluna-section {
    background-color: var(--color-bg-navy-light);
    border-top: 1px solid var(--color-border-subtle);
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: stretch;
}

.about-text-area {
    display: flex;
    flex-direction: column;
}

.about-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 24px;
    letter-spacing: -0.04em;
    color: var(--color-text-white);
}

.about-desc p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: -0.02em;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px 24px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
    text-align: left;
}

.stat-card:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.04);
}

.stat-icon {
    margin-bottom: 32px;
    display: block;
}

/* 통계 카드 호버 시 아이콘 공통 반응 (위로 미세 부상) */
.stat-card:hover .stat-icon {
    transform: translateY(-4px) scale(1.05);
}


.stat-card h3 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    color: var(--color-text-white);
    display: inline-block;
}

.stat-card h3 span {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 4px;
    font-weight: 400;
}

.stat-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.0rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Brand Sub Cards (Sol & Luna) */
.brand-sub-cards {
    display: flex;
    gap: 24px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-sub-card {
    flex: 1;
    background: transparent;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding: 8px 0 8px 24px;
    transition: border-color 0.3s ease;
}

.brand-sub-card:hover {
    border-color: rgba(0, 163, 255, 0.5);
    /* Brand Cyan hint on hover */
}

.brand-sub-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.brand-icon-sun {
    color: var(--color-brand-yellow);
    display: flex;
}

.brand-icon-moon {
    color: var(--color-brand-cyan);
    display: flex;
}

.brand-sub-header h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-white);
    letter-spacing: -0.01em;
}

.brand-sub-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    font-weight: 300;
}

/* ==========================================================================
   [Phase 190] Global Trend: Dark Bento Glassmorphism Intro
   ========================================================================== */
.solluna-bento-intro {
    padding: 120px 0 100px;
    background-color: transparent;
    /* body background navy를 그대로 투과 */
    position: relative;
    overflow: hidden;
}

.bento-intro-container {
    position: relative;
    z-index: 2;
}

/* --- [텍스트 볼륨업] 일반 데스크톱 (1024px ~ 1439px) --- */
.solluna-bento-intro .clean-section-title {
    font-size: 3.5rem;
    letter-spacing: -0.04em;
    line-height: 1.25;
}

.solluna-bento-intro .clean-section-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 800px !important;
    /* 인라인 스타일 680px 강제 오버라이드 확장 */
}

/* --- [텍스트 웅장화] 울트라와이드 모니터 (1440px 이상) --- */
@media (min-width: 1440px) {
    .solluna-bento-intro .clean-section-title {
        font-size: 4.2rem;
        letter-spacing: -0.05em;
    }

    .solluna-bento-intro .clean-section-subtitle {
        font-size: 1.45rem;
        max-width: 900px !important;
        margin-bottom: 64px !important;
        /* 카드와의 간격 추가 확보 */
    }
}

.bento-grid-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.bento-glass-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    /* 애플 스타일의 부드럽고 둥근 곡률 */
    padding: 40px 32px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* 벤토 박스 특유의 텍스트 하단 배치 */
    align-items: flex-start;
    min-height: 220px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Hover effect strictly limited to desktop viewports (min-width: 1025px) to absolutely prevent sticky hover bugs on touch devices that misreport (hover: hover) */
@media (min-width: 1025px) {
    .bento-glass-card:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    }
}

/* Glass Aura Glow Effect */
.glass-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at right top, rgba(0, 240, 255, 0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 2;
    /* 이미지(1) 위에서 블렌딩 효과로 틴팅(Tinting)을 선사 */
}

/* 도메인별 시그니처 형광 아우라 */
.card-farm .glass-glow {
    background: radial-gradient(circle at right top, rgba(46, 204, 113, 0.15) 0%, transparent 60%);
}

.card-home .glass-glow {
    background: radial-gradient(circle at right top, rgba(243, 156, 18, 0.15) 0%, transparent 60%);
}

.card-sensor .glass-glow {
    background: radial-gradient(circle at right top, rgba(156, 39, 176, 0.15) 0%, transparent 60%);
}

.card-factory .glass-glow {
    background: radial-gradient(circle at right top, rgba(52, 152, 219, 0.15) 0%, transparent 60%);
}

@media (min-width: 1025px) {
    .bento-glass-card:hover .glass-glow {
        opacity: 1;
    }
}

.bento-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    z-index: 3;
    /* 가장 상위 배치 */
}

.bento-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.bento-card-desc {
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* 벤토 썸네일 전면 배경 (마스크 페이드 아웃) */
.bento-image-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50%);
    mask-image: linear-gradient(to right, transparent 0%, black 50%);
    opacity: 0.45;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.bento-image-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 1025px) {
    .bento-glass-card:hover .bento-image-bg {
        opacity: 0.85;
    }

    .bento-glass-card:hover .bento-image-bg img {
        transform: scale(1.05);
    }
}

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3.0rem;
    }

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

    .solution-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .reverse-row .solution-image-col {
        grid-row: 1;
        /* Force image to top on mobile for all rows */
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

@media (max-width: 768px) {
    section {
        padding: 60px 0;
        /* Huge PC 120px padding reduced for mobile */
    }

    .domains-section {
        padding-top: 40px;
        /* Tighter layout after hero */
    }

    .hero-section {
        align-items: flex-start;
        /* Defeat PC 'center' alignment that was pulling short content down */
        padding: 70px 0 30px;
        /* 버튼과 텍스트가 모두 쏟아져 들어오도록 70px로 상단 여백 추가 단축, 하단 30px로 단축 */
        /* Pulled up drastically to remove the flexbox bottom-heavy feeling */
        height: auto;
        /* Override PC 100vh to remove huge empty gap */
        min-height: auto;
        /* Override PC 700px min-height */
        margin-bottom: 0 !important;
    }

    /* 다음 도메인 섹션과 뚝 끊기는 현상을 방지하고 부드럽게 이어지도록 하단 블렌딩 처리 */
    .hero-section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120px;
        background: linear-gradient(to top, #020814 0%, transparent 100%);
        z-index: 1;
        pointer-events: none;
    }

    .hero-inner {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        /* 데스크톱의 margin: 0 auto(중앙정렬) 족쇄를 끊어내어 좌측 화면 끝에 완벽히 밀착시킴 */
        text-align: left;
        /* Reverted to left alignment for better mobile readability */
        padding: 0 20px;
    }

    /* ==========================================================================
       [Phase 190] Mobile Bento Intro 
       ========================================================================== */
    .solluna-bento-intro {
        padding: 20px 0 10px; /* 40px에서 20px로 마지막 한계 압축 (화면 낭비 제거) */
    }

    .clean-section-title {
        font-size: 2.1rem !important; /* 다시 폰트 사이즈 확대 (유저 요청) */
        line-height: 1.25 !important;
        letter-spacing: -0.05em !important;
        margin-bottom: 12px !important; /* 간격도 살짝 여유를 줌 */
        margin-top: 0 !important;
        word-break: keep-all;
        text-align: center !important; /* 모두 중앙 정렬로 변경 */
    }

    .clean-section-subtitle {
        font-size: 0.95rem !important; /* 서브타이틀 사이즈 재상향 */
        font-weight: 300 !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.65) !important;
        margin-bottom: 24px !important; /* 카드와의 간격 확장 */
        text-align: center !important; /* 서브타이틀 중앙 정렬 */
    }

    /* [공주님 피드백] 모바일 뱃지 사이즈 미세 확대 */
    .badge {
        padding: 8px 18px !important; /* 상하좌우 약간 확대 */
        font-size: 0.85rem !important; /* 글자 크기 약간 확대 */
        letter-spacing: 0.1em !important; /* 자간도 약간 여유있게 */
        line-height: 1.2 !important;
    }
    
    .badge-cyan-outline {
        gap: 10px; /* 도트와 글씨 사이 간격 16px -> 10px */
    }

    .tag-dot {
        width: 8px; /* 10px -> 8px */
        height: 8px; /* 10px -> 8px */
    }

    .bento-intro-container {
        text-align: center !important; /* 컨테이너 중앙 정렬 */
        align-items: center !important; /* flex align-items 중앙 정렬 변경 */
    }

    .bento-grid-list {
        grid-template-columns: 1fr;
        gap: 8px; /* 카드간 자간을 다시 8px로 압축결속 */
    }

    .bento-glass-card {
        min-height: 72px; /* 원프레임 노출을 위해 카드 높이 축소 (72px) */
        padding: 10px 16px; /* 패딩 최소화 */
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border-radius: 12px; /* 모서리 부드럽게 복원 */
        -webkit-tap-highlight-color: transparent; /* 터치 잔상(하이라이트 박스) 제거 */
        outline: none;
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease; /* 터치 반응 속도를 극한으로 쾌적하게 셋팅 */
    }

    /* 공주님 추천 픽 업그레이드: 하드코어 네온 플래시(Neon Flash) 액션 */
    /* 버튼을 누른 순간 단순 광택이 아닌, 테마별 형광 네온빛이 터져 나오며 확실한 인지 피드백 제공 */
    .bento-glass-card:active {
        transform: scale(0.96); /* 기존 0.97보다 텐션감을 살짝 더 올려서 타격감 극대화 */
        background-color: rgba(255, 255, 255, 0.08); 
    }

    /* 도메인 개별 "순간 발광(Neon Glow)" 맵핑: 가시성 극한 강화 (True Neon) */
    .card-farm:active {
        border-color: #00ff66 !important; /* 스마트팜: 형광 네온 그린 */
        box-shadow: 0 0 30px rgba(0, 255, 102, 0.8), inset 0 0 20px rgba(0, 255, 102, 0.5) !important;
    }
    .card-home:active {
        border-color: #ffcc00 !important; /* 스마트홈: 쨍한 골드/옐로우 네온 */
        box-shadow: 0 0 30px rgba(255, 204, 0, 0.8), inset 0 0 20px rgba(255, 204, 0, 0.5) !important;
    }
    .card-sensor:active {
        border-color: #f50057 !important; /* 센서: 강렬한 마젠타/핑크 네온 */
        box-shadow: 0 0 30px rgba(245, 0, 87, 0.8), inset 0 0 20px rgba(245, 0, 87, 0.5) !important;
    }
    .card-factory:active {
        border-color: #00e5ff !important; /* 팩토리: 형광 사이언(Cyan) 네온 */
        box-shadow: 0 0 30px rgba(0, 229, 255, 0.8), inset 0 0 20px rgba(0, 229, 255, 0.5) !important;
    }
    
    /* 누르는 순간 텍스트(타이틀) 또한 순간적으로 순백색으로 강하게 하이라이팅됨 */
    .bento-glass-card:active .bento-card-title {
        color: #ffffff !important;
        text-shadow: 0 0 10px rgba(255,255,255,0.8);
    }

    .bento-card-content {
        gap: 4px;
        flex: 1;
        /* 텍스트 공간 확보 */
    }

    .bento-card-title {
        font-size: 1.05rem; /* 글자 크기 축소 */
    }

    .bento-card-desc {
        font-size: 0.8rem; /* 설명 폰트 축소 */
    }

    .bento-card-icon {
        position: static;
        margin-left: 12px;
        opacity: 0.8;
        transform: scale(0.75); /* 아이콘 최소화 */
    }

    .hero-text-desktop {
        display: none;
    }

    .hero-text-mobile {
        display: block;
    }

    .hero-tag {
        margin-bottom: 16px;
        font-size: 0.7rem;
        padding: 4px 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        width: max-content;
        align-self: flex-start;
    }

    .hero-title {
        font-size: 2.75rem;
        /* 기존 2.35rem에서 웅장하게 확대 */
        line-height: 1.25;
        /* 줄간격 타이트하게 */
        letter-spacing: -0.05em;
        /* 자간을 아주 강하게 조여 텍스트 덩어리감(Mass) 부여 */
        margin-bottom: 12px;
        /* 서브타이틀과의 거리를 16px에서 12px로 좁혀 하나의 그룹으로 결속 */
        word-break: keep-all;
        /* 단어 끊김 방지 이식 */
    }

    .hero-title .title-bold {
        font-weight: 800;
        /* 핵심 타이틀을 Extra Bold로 밀어붙임 */
    }

    .hero-subtitle {
        font-size: 0.95rem;
        /* 1rem에서 슬림하게 깎아냄 */
        font-weight: 300;
        /* Light를 적용하여 두꺼운 타이틀과 완벽 대비 */
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.65);
        /* 투명도를 0.65 극적 동기화 */
        letter-spacing: -0.01em;
        margin-bottom: 48px;
        /* 버튼 그룹과의 거리를 40px에서 48px로 시원하게 이격시켜 호흡 공간 확보 */
        word-break: keep-all;
        /* 단어 끊김 방지 이식 */
    }

    .section-padding {
        padding: 40px 0;
        /* 기존 60px에서 40px로 축소하여 모바일 화면에서 섹션이 더 위로 끌어올려지도록 함 */
    }

    .hero-actions {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        /* Snugger buttons for a cohesive group */
        margin-top: 0;
        justify-content: center;
        width: 100%;
        margin-bottom: 0px;
        /* Proper footer grounding, reduced from 40px to 0 for better flow into domains */
    }

    .hero-actions .btn {
        width: 100%;
        /* 모바일에서 버튼이 작아보이지 않도록 컨테이너 크기만큼 풀사이즈로 꽉 채움 (max-width 제한 해제) */
        margin: 0 auto;
        /* 버튼 뭉치 덩어리 자체를 가운데 정렬 */
        text-align: center;
        padding: 20px 24px;
        /* [User Feedback] 자세히 보기 버튼처럼 장엄한 사이즈로 키우기 위해 상하 볼륨을 20px로 빵빵하게 통일 */
        font-size: 1.05rem;
        border-radius: 50px;
        min-width: 0;
        /* 모바일에서는 부모 넓이에 맞춰 유동폭 보장 */
    }

    /* 모바일 버튼 화살표 테마 색상 동기화 (섹션 아이콘 색상 반영) */
    #smart-farm .btn-with-svg svg {
        stroke: var(--color-farm-icon);
    }

    #smart-home .btn-with-svg svg {
        stroke: var(--color-home-icon);
    }

    #smart-sensor .btn-with-svg svg {
        stroke: var(--color-sensor-icon);
    }

    #smart-factory .btn-with-svg svg {
        stroke: var(--color-factory-icon);
    }

    .hero-scroll-indicator {
        display: none;
        /* Hide scroll indicator on mobile to reduce clutter and focus on 3 buttons */
    }

    /* 모바일 버튼 전역 럭셔리 패딩 체제 적용 */
    .btn-with-svg {
        padding: 20px 24px !important;
        /* 모든 SVG 버튼 모바일 좌우 안전 여백 및 빵빵한 상하 볼륨 통일 */
    }

    /* 모바일에서 inline-block 강제 속성에 의해 SVG 플렉스 중앙 정렬이 파괴되는 현상 원천 방어 */
    .btn-with-svg {
        display: inline-flex !important;
    }

    /* Core Solutions (Our Domains) Mobile Optimization */
    .domains-section {
        padding-top: 0;
        /* Pull the section up a bit (기존 40px 여백이 인트로 100vh 핏을 윗공간에서 눌러 아래를 자르는 원흉이었으므로 0으로 압살) */
        margin-top: -12px;
        /* 추가 피드백: 전체 페이지를 조금 끌어올려서 윗 빈공간 추가 제거 */
    }

    .domains-section .section-header {
        text-align: left !important;
        /* Force override generic .text-center */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* Anchor badge to the left */
        width: 100%;
    }

    /* 1. 배지와 제목 사이 간격 압축 */
    .domains-section .section-header .badge {
        margin-bottom: 8px;
    }

    .domains-section .section-header .section-title {
        font-size: 2.0rem;
        /* Slightly smaller for natural line wrap */
        line-height: 1.35;
        letter-spacing: -0.03em;
        word-break: keep-all;
        /* Prevent awkward Korean word breaking */
        margin-top: 0;
    }

    .domains-section .section-header .section-title br {
        display: block;
        /* Restore intentional semantic line break! */
    }

    /* 2. 문단 가독성 및 정렬 최적화 */
    .domains-section .section-header .section-subtitle {
        font-size: 1.05rem;
        line-height: 1.5;
        margin-top: 12px;
        margin-left: 0;
        margin-right: 0;
        padding-right: 0;
        /* Removed unnecessary right padding to fill width elegantly */
        text-align: left;
        word-break: keep-all;
    }

    /* 3. 사진과 글씨의 단절감 해소 (간격 다이어트 & 모바일 핏 밀착) */
    .solutions-list {
        margin-top: 16px;
        /* 서브타이틀과의 거리를 24px에서 16px로 줄여 위로 더 끌어올림 */
        gap: 32px;
        /* 무려 64px이던 간격을 40px -> 32px로 카드를 더 바짝 조임 */
    }

    /* --- App-native Card Layout (Grid) --- */
    .solution-text-col {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        /* [High-Density] 아이콘과 글자 묶음 사이의 거리 압축 (16px -> 14px) */
        align-items: center;
    }

    .domain-icon {
        grid-column: 1;
        width: 48px;
        /* 커졌던 아이콘을 하단 벤토박스 규격과 시각적 조화를 이루도록 축소 (60px -> 48px) */
        height: 48px;
        margin-bottom: 0;
        border-radius: 12px;
        /* 하단 벤토박스 라운드값과 완벽히 일치하는 곡률(12px) 메타포 공유 */
    }

    .domain-icon svg {
        width: 24px;
        /* 내부 SVG 아이콘 스케일 다이어트 (28px -> 24px) */
        height: 24px;
    }

    .domain-title {
        grid-column: 2;
        font-size: 1.3rem;
        /* 텍스트 매스(Mass)를 살짝 깎아 아이콘과의 균형 확보 (1.35 -> 1.3) */
        /* Sleeker title for inline fit */
        font-weight: 700;
        margin-bottom: 0;
        word-break: keep-all;
        letter-spacing: -0.02em;
        /* 한국어 타이틀 자간 밀착 */
        line-height: 1.3;
        /* 위아래 영문 부제목과의 수직 밀착 */
    }

    .domain-title br {
        display: none;
    }

    .domain-title-en {
        font-size: 0.8rem;
        /* 다시 프리미엄 폰트 크기로 복구 */
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.65);
        display: block;
        margin-top: 4px;
        /* 숨통 복구: 2px -> 4px */
        margin-bottom: 0;
    }

    .domain-desc {
        grid-column: 1 / -1;
        font-size: 0.95rem;
        /* 프리미엄 폰트 크기 복구 */
        margin-top: 12px;
        /* 숨통 트이기: 6px -> 12px */
        margin-bottom: 16px;
        /* 숨통 트이기: 10px -> 16px */
        line-height: 1.55;
        /* 편안한 가독성 확보 */
        word-break: keep-all;
    }

    .domain-features {
        grid-column: 1 / -1;
    }

    .domain-features li {
        position: relative;
        font-size: 0.85rem;
        /* 폰트 복구 */
        margin-bottom: 8px;
        /* 모듈간 여백 복구: 4px -> 8px */
        align-items: center;

        /* 프리미엄 벤토 카드 레이아웃 */
        color: rgba(255, 255, 255, 0.95);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 10px 14px 10px 14px;
        /* 상하좌우 패딩 복구하여 답답함 해소 */
        border-radius: 12px;
        overflow: hidden;
    }

    /* 좌측 엣지 라인을 통뼈 테두리가 아닌 부드러운 필(Pill)Accent Bar로 재설계 */
    .domain-features li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 4px 0 0 4px;
        /* 기본 투명, 테마별 지정 */
        background-color: transparent;
    }

    /* 텍스트 대신 좌측 엣지 바에 각 섹션 고유 테마 컬러 매핑 (Neon Accent) */
    .features-green li::before {
        background-color: var(--color-farm-icon);
    }

    .features-yellow li::before {
        background-color: var(--color-home-icon);
    }

    .features-purple li::before {
        background-color: var(--color-sensor-icon);
    }

    .features-blue li::before {
        background-color: var(--color-factory-icon);
    }

    .check-icon {
        width: 18px;
        height: 18px;
        margin-top: 0;
        /* 데스크톱의 flex-start용 여백(3px)을 제거하여 어긋남 해결 */
        font-size: 0.7rem;
    }

    .solution-image-col {
        aspect-ratio: 3 / 2;
        /* 사진 인화 황금비율 유지 */
        max-height: 25svh;
        /* [CRITICAL FIX] 작은 모바일 화면에서 이미지가 무한정 길어져 버튼을 화면 밑으로 밀어내는 현상 방어. 화면 세로 길이의 25%까지만 허용합니다. */
        min-height: auto;
        order: -1;
        /* 스마트팩토리 등 데스크톱에서 텍스트가 먼저 나오는 영역이 모바일 수직 배열 시 텍스트가 상단으로 오버레이 되는 현상 방지 (무조건 이미지가 위로 가도록 강제) */

        /* 원페이지 핏 최적화 */
        width: 88vw;
        /* 가로폭 소폭 확장하여 웅장함 유지 (84vw -> 88vw) */
        margin: 0 auto 0px auto;
        /* 텍스트 덩어리와의 여유 공간 제거 (하단 마진 0) */
        border-radius: 20px;
        /* 하단 벤토박스와 비율을 맞춰 24px -> 20px로 라운딩 미세 축소 */
        overflow: hidden;
        /* 라운드 밖으로 튀어나가는 이미지 절삭 */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        /* 공중에 띄우는 글래스모피즘 보폭 확보 */
    }

    .solution-image-col .image-wrapper {
        width: 100%;
        height: 100%;
    }

    .solution-image-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* 높이가 최대치(max-height)에 도달해 비율이 깨지더라도 이미지가 납작해지지 않고 예쁘게 크롭되도록(잘리도록) 방어 */
    }

    .solution-text-col>.btn {
        grid-column: 1 / -1;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 20px;
        /* 버튼 상하 패딩 살려서 클릭 영역 및 프리미엄 비례 회복 */
        margin-top: 0;
        background: rgba(255, 255, 255, 0.02);
        /* Subtle corporate fill */
        border: 1px solid rgba(255, 255, 255, 0.25);
        /* Crisp high-contrast border */
        color: #FFFFFF;
        /* Strictly white text for maximum readability */
        font-weight: 600;
        border-radius: 12px;
    }

    .solution-text-col>.btn svg {
        color: var(--color-brand-cyan);
        /* Cyan arrow pointer for focal CTA */
    }

    .domain-content {
        padding: 30px;
    }

    /* --- [NEW] 앱 네이티브 자석 스크롤링 (Scroll Snap) ---
       스마트폰에서만 작동하며, 위/아래 거꾸로 튕겨도 화면 단위로 찰칵 걸리게 고정함 */
    html {
        scroll-snap-type: y proximity;
        scroll-padding-top: 80px;
        /* [CRITICAL FIX] mandatory(강제) 시스템 때문에 짧은 푸터가 위로 튕기던(바운스 백) 고질병을 완치하기 위해, 부드러운 proximity(근접) 모드로 대전환! */
    }

    .hero-section {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        /* 스크롤이 턱턱 걸리는 현상(과속방지턱)을 없애기 위해 always를 normal로 해제하여 부드러운 스냅 유도 */
    }

    .site-footer {
        scroll-snap-align: end;
        scroll-snap-stop: normal;
        /* [CRITICAL FIX] 푸터를 끊어버리는 스크롤 잠금(Scroll Lock) 방지! 브라우저에게 "여기가 진짜 마지막 스크롤 바닥(종착역)이야!" 라고 선언 */
    }

    .about-solluna-section {
        scroll-snap-align: none;
        /* [CRITICAL FIX] 100vh가 넘는 거대 묶음 전체에 스냅이 걸리면 하단 통계카드를 스킵해버리는 블랙홀 현상 제거 */
        scroll-snap-stop: normal;
        padding-top: 0 !important;
        /* [사용자 피드백] 쓸데없이 넓은 구역 해소를 위해 부모 섹션의 상단 기본 패딩(60px) 강제 삭제 */
    }

    /* 거대 블록 대신, 그 안의 알맹이들에 스냅 정차역(역마다 찰칵)을 세밀하게 분할 배치 */
    .about-text-area {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        padding-top: 80px;
        /* [사용자 피드백 다이어트] 100px -> 80px로 수정. 스마트팩토리 하단과 About 사이의 텅 빈 공간(노란색 표시 영역)을 극단적으로 축소 */
    }

    .about-stats-grid {
        scroll-snap-align: center;
        /* 통계 카드 4개 묶음이 화면 중앙에 찰칵 오도록 단독 정차역 신설 */
        scroll-snap-stop: normal;
        padding-bottom: 80px;
        /* [CRITICAL FIX] 푸터가 오버플로우로 박히지 않고 시원하게 솟아오를 수 있도록 하단 스크롤 여유 공간(버퍼) 80px 대폭 확보 */
    }

    .solluna-clean-intro {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        /* [CRITICAL FIX] 화면(100vh)보다 긴 콘텐츠가 억지로 화면 중앙을 맞추려다 상단 타이틀이 헤더 밑으로 파고들어 잘리던 치명적 버그 수정 (무조건 윗선부터 맞추도록 start로 원상복구) */
    }

    /* --- [CRITICAL FIX] 솔루션 1화면 1섹션 단독 안착 핏(Single-Shot Fit) --- */
    .solution-row {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* 공주님 피드백 반영: 큰 3:2 이미지 때문에 하단 섹션이 잘릴 위험을 방지하기 위해, 수직 중앙 정렬(center)을 폐기하고 무조건 헤더 바로 아래 상단(flex-start)부터 내용이 꽉 차게 끌어올립니다. */
        min-height: 100svh;
        /* 모바일 최신 규격(100svh). 화면보다 요소가 작아서 다음/이전 섹션이 한 화면에 "같이 겹쳐보이는" 최악의 스크롤 간섭 현상을 원천 방어! */
        padding-top: 44px;
        /* [User Feedback] 텍스트 겹침 없이 이미지 포함 덩어리 전체를 위로 들어올리기 위해 상단 60px에서 44px로 쾌속 시프트 */
        padding-bottom: 32px;
        /* 하단 공백 32px로 늘려 숨통 트이기 */

        gap: 16px;
        /* 컴포넌트 간의 간격을 너무 멀지 않게 황금 비율 밀착: 20px -> 16px */
        scroll-snap-align: start;
        /* start 지점에 헤더 바로 아래부터 딱딱 걸리도록 하여 가장 완벽한 1단독샷 달성 */
        scroll-snap-stop: always;
        /* 한 번 스크롤 시 화면이 미끄러지며 2~3장을 광스킵하는 멀미 유발 관성 스크롤링 철저 방어 */

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* --- App-native Card Layout (Grid) --- */
    .solution-text-col {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        align-items: center;
        /* [CRITICAL FIX] 음수 마진(-24px) 제거하여 이미지 밑으로 아이콘과 텍스트가 먹히고 빨려 들어가는 치명적 오버랩 버그를 완벽히 해소 */
    }

    .about-title {
        font-size: 1.8rem;
        margin-bottom: 12px;
        /* [High-Density] 대제목 아래 휑한 24px 여백을 12px로 반토막 압축 */
    }

    /* --- [High-Density] About 섹션 모바일 초밀착 압축 (텍스트 & 서브 카드) --- */
    .about-desc {
        margin-bottom: 12px;
        /* 본문과 서브카드 묶음 사이의 거리 1차 압축 (24px -> 12px) */
    }

    .about-desc p {
        font-size: 1.05rem;
        line-height: 1.6;
        margin-bottom: 12px;
        /* 문단 간 여백 압축 */
    }

    .about-stats-grid {
        grid-template-columns: 1fr 1fr;
        /* 모바일에서도 2열 유지하여 세로 스크롤 방어 */
        gap: 12px;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-card h3 {
        font-size: 2.0rem;
    }

    .stat-card h3 span {
        font-size: 1.1rem;
    }

    .brand-sub-cards {
        flex-direction: column;
        gap: 8px;
        /* [High-Density] 낮치/밤의 카드 두 개 사이를 더 촘촘하게 (12px -> 8px) */

        margin-top: 16px;
        padding-top: 16px;
        /* [High-Density] 데스크톱용 광활한 마진(48px)/패딩(32px)을 모바일에서 대폭 삭감하여, 상단 설명글과 찰떡같이 밀착되도록 강제 압축 */
    }

    .brand-sub-card {
        padding: 12px 16px;
        /* [High-Density] 카드 내부 상하 패딩 압축 */
    }

    .brand-sub-header h4 {
        margin: 0;
        /* 브라우저 기본 h4 위아래 태그 여백 차단 */
    }

    .brand-sub-header {
        margin-bottom: 4px;
        /* [High-Density] 아이콘+제목과 아래 설명글 사이 간격 바짝 좁히기 (6px -> 4px) */
    }

    .brand-sub-card p {
        font-size: 0.95rem;
        line-height: 1.4;
        margin: 0;
        /* 브라우저 기본 p 태그의 상하 1em 폭주 여백 완벽 차단 */
    }
}