/* ========================================
   AliveEcho-100 & SafeVoice Alive
   Apple-style Landing Page Styles
   ======================================== */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --dark: #F3F4F6;
    --dark-secondary: #E5E7EB;
    --dark-card: rgba(255, 255, 255, 0.8);
    --primary: #3B82F6;
    --primary-light: #93C5FD;
    --accent-amber: #D97706;
    --accent-red: #DC2626;
    --accent-green: #059669;
    --text-primary: #1E3A5F;
    --text-secondary: #3D5A7F;
    --text-muted: #6B7280;
}

/* ========================================
   Global Styles
   ======================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: var(--dark-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Selection */
::selection {
    background: var(--primary);
    color: white;
}

/* ========================================
   Navigation
   ======================================== */
#navbar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(15, 23, 42, 0.8);
}

#navbar.scrolled {
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

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

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease forwards;
}

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

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

/* Reveal on Scroll */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Hover Lift Effect */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Pulse Animation for badges */
@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ========================================
   Hero Section
   ======================================== */
#hero {
    background: linear-gradient(180deg, var(--dark) 0%, var(--dark-secondary) 100%);
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* ========================================
   FAQ Section
   ======================================== */
.faq-item {
    transition: all 0.3s ease;
}

.faq-item.active {
    border-color: var(--primary);
}

.faq-question {
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: var(--primary);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

/* ========================================
   Form Styles
   ======================================== */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5rem;
    padding-right: 3rem;
}

/* ========================================
   Counter Animation
   ======================================== */
.counter {
    transition: all 0.5s ease;
}

/* ========================================
   Table Styles
   ======================================== */
table {
    border-collapse: collapse;
}

th, td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   Image Filters for Logo Section
   ======================================== */
.filter {
    filter: brightness(0) invert(1);
}

/* ========================================
   Button Styles
   ======================================== */
button, a {
    outline: none;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ========================================
   Loading State
   ======================================== */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Responsive Adjustments
   ======================================== */

/* Mobile */
@media (max-width: 767px) {
    #hero h1 {
        font-size: 2.5rem;
    }
    
    .reveal {
        transform: translateY(20px);
    }
    
    section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    #hero h1 {
        font-size: 4rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    /* Remove fixed background attachment to prevent scroll glitching */
    #hero {
        background-attachment: scroll;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    #navbar,
    .animate-pulse,
    .animate-bounce {
        display: none !important;
    }
    
    section {
        break-inside: avoid;
    }
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   Dark Mode Enhancements
   ======================================== */
.glass {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   Gradient Text
   ======================================== */
.gradient-text {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-light) 50%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   Card Hover Effects
   ======================================== */
.card-glow {
    position: relative;
    overflow: hidden;
}

.card-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(59, 130, 246, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.card-glow:hover::before {
    left: 100%;
}

/* ========================================
   Progress Bar (for form submission)
   ======================================== */
.progress-bar {
    height: 4px;
    background: var(--dark-secondary);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary);
    width: 0;
    transition: width 0.3s ease;
}

/* ========================================
   Tooltip
   ======================================== */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    background: var(--dark);
    color: white;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 8px);
}

/* ========================================
   Section Backgrounds - Prevent Scroll Issues
   ======================================== */
section {
    position: relative;
    z-index: 1;
    background-color: inherit;
}

#problem {
    background-color: var(--dark);
}

#solution,
#features,
#comparison,
#faq {
    background-color: var(--dark-secondary);
}

#products,
#how-it-works,
#clients,
#contact {
    background-color: var(--dark);
}

/* ========================================
   Section Dividers
   ======================================== */
.section-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(59, 130, 246, 0.5) 50%,
        transparent 100%
    );
}

/* ========================================
   Badge Styles
   ======================================== */
.badge-new {
    background: linear-gradient(135deg, var(--accent-amber), #D97706);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-pro {
    background: linear-gradient(135deg, var(--primary), #2563EB);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========================================
   Mobile Menu Animation
   ======================================== */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

#mobile-menu.open {
    max-height: 400px;
}

/* ========================================
   Scroll Progress Indicator
   ======================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--primary);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* ========================================
   Chart.js Mobile Responsive
   ======================================== */
canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* Chart containers - ensure proper sizing */
[class*="h-40"],
[class*="h-48"],
[class*="h-56"],
[class*="h-72"] {
    position: relative;
    width: 100%;
}

/* Mobile chart adjustments */
@media (max-width: 767px) {
    /* Ensure charts don't overflow */
    .bg-dark-card {
        overflow: hidden;
    }
    
    /* Chart container minimum height for mobile */
    canvas {
        min-height: 150px;
    }
    
    /* Statistics cards - stack better on mobile */
    .grid.sm\\:grid-cols-2.lg\\:grid-cols-4 {
        gap: 1rem;
    }
    
    /* Reduce padding on mobile for charts */
    #problem .bg-dark-card {
        padding: 1rem;
    }
    
    /* Chart title smaller on mobile */
    #problem h3 {
        font-size: 1rem;
    }
    
    /* Insight text smaller on mobile */
    #problem .space-y-4 p {
        font-size: 0.875rem;
    }
}

/* Tablet chart adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    canvas {
        min-height: 180px;
    }
}

/* ========================================
   공통 라이트 테마 오버라이드 (기존 index.html 인라인 스타일 이전)
   ======================================== */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #1E3A5F;
}
input, textarea, select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#navbar { background: linear-gradient(to bottom, rgba(30, 58, 95, 0.98), rgba(30, 58, 95, 0.95)) !important; }
#navbar a, #navbar span, #navbar button { color: #FFFFFF !important; }
#navbar .brightness-0.invert { filter: brightness(0) invert(1) !important; }

#mobile-menu { background: rgba(30, 58, 95, 0.98) !important; }
#mobile-menu a { color: #FFFFFF !important; }

#hero { background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%) !important; }
#hero p, #hero span { color: #1E3A5F !important; }
#hero .text-accent-amber { color: #B45309 !important; }
#hero .text-accent-green { color: #047857 !important; }
#hero .text-gray-300 { color: #334155 !important; }
#hero .text-gray-400 { color: #475569 !important; }
#hero .text-gray-500 { color: #64748B !important; }

.hero-gradient-title {
    background: linear-gradient(135deg, #0F172A 0%, #1E40AF 50%, #3B82F6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

#hero a.bg-primary { background: #2563EB !important; color: #FFFFFF !important; }
#hero a.bg-primary:hover { background: #1D4ED8 !important; }
#hero a.border-gray-600 { background: #1E3A5F !important; border-color: #1E3A5F !important; color: #FFFFFF !important; }
#hero a.border-gray-600:hover { background: #0F172A !important; border-color: #0F172A !important; }

#hero .bg-dark-card { background: rgba(255,255,255,0.8) !important; border-color: #CBD5E1 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; }
#hero .border-gray-700 { border-color: #CBD5E1 !important; }
#hero .bg-accent-amber\/20 { background: #FEF3C7 !important; }

#hero .text-gray-500.animate-bounce { color: #64748B !important; }

.text-white { color: #1E3A5F !important; }
.text-gray-300 { color: #2D4A6F !important; }
.text-gray-400 { color: #4B5563 !important; }
.text-gray-500 { color: #6B7280 !important; }

.bg-dark { background: #F3F4F6 !important; }
.bg-dark-secondary { background: #E5E7EB !important; }
body.bg-dark { background: #F3F4F6 !important; }

section:not(#hero) .text-primary { color: #2563EB !important; }
section:not(#hero) .text-accent-amber { color: #B45309 !important; }
section:not(#hero) .text-accent-green { color: #047857 !important; }
section:not(#hero) .text-accent-red { color: #B91C1C !important; }

.border-gray-800 { border-color: #D1D5DB !important; }
.border-gray-700 { border-color: #D1D5DB !important; }
.bg-dark-card { background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; }
.bg-dark\/50, .bg-dark\/30, .bg-dark\/60 { background: rgba(255, 255, 255, 0.8) !important; }

#problem .bg-dark\/50 { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid #E5E7EB !important; }
#problem .font-mono { font-weight: 600 !important; }
#problem .bg-accent-red\/20 { background: #FEE2E2 !important; color: #991B1B !important; }
#problem .bg-accent-amber\/20 { background: #FEF3C7 !important; color: #92400E !important; }
#problem .bg-gray-700 { background: #E5E7EB !important; color: #374151 !important; }
#problem .text-accent-red.font-mono { color: #DC2626 !important; }
#problem .text-accent-amber.font-mono { color: #D97706 !important; }
#problem .text-gray-400.font-mono { color: #374151 !important; }

#clients .bg-white\/5 { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid #E5E7EB !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; }
#clients .bg-white\/5:hover { background: rgba(255, 255, 255, 1) !important; }
#clients .bg-white\/5 span { color: #1E3A5F !important; }
#clients .bg-white\/5:hover span { color: #2563EB !important; }

#faq h2, #faq h3, #faq p, #faq span, #faq div { color: #111111 !important; }
#faq .text-primary { color: #2563EB !important; }
#faq .text-accent-green { color: #047857 !important; }
#faq .text-accent-amber { color: #B45309 !important; }
#faq .text-gray-400 { color: #374151 !important; }
#faq .bg-dark\/60 { background: rgba(243, 244, 246, 0.9) !important; }

a.bg-primary, button.bg-primary,
a.bg-accent-amber, button.bg-accent-amber,
a.bg-accent-green, button.bg-accent-green,
input[type="submit"], button[type="submit"] {
    color: #FFFFFF !important;
}

footer { background: linear-gradient(to bottom, rgba(30, 58, 95, 0.98), rgba(30, 58, 95, 0.95)) !important; }
footer h3, footer p, footer span, footer a, footer div { color: #FFFFFF !important; }
footer .text-gray-400, footer .text-gray-500, footer .text-gray-600 { color: #CBD5E1 !important; }
footer .border-gray-800 { border-color: rgba(255, 255, 255, 0.2) !important; }
footer .brightness-0.invert { filter: brightness(0) invert(1) !important; }

#contact { background: #E5E7EB !important; }

#problem { background: #F3F4F6 !important; }
#products { background: #F3F4F6 !important; }
#how-it-works { background: #F3F4F6 !important; }
#clients { background: #F3F4F6 !important; }

/* 브레드크럼 영역 배경 (내부페이지 상단) */
.page-breadcrumb { background: #E5E7EB !important; }

/* ========================================
   Image Placeholder (콘텐츠 추후 입력 영역)
   ======================================== */
.image-placeholder {
    position: relative;
    min-height: 220px;
}

.image-placeholder .placeholder-img {
    display: none;
}

.image-placeholder.has-image .placeholder-img {
    display: block;
}

.image-placeholder.has-image .placeholder-content {
    display: none;
}

.image-placeholder .placeholder-content {
    border: 2px dashed #CBD5E1;
    border-radius: inherit;
    width: 100%;
    height: 100%;
}

/* ========================================
   Breadcrumb
   ======================================== */
.breadcrumb a {
    color: #6B7280;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: #2563EB;
}

.breadcrumb .current {
    color: #1E3A5F;
    font-weight: 600;
}

/* ========================================
   자료실 - 준비중 배지 및 비활성 버튼
   ======================================== */
.badge-pending {
    background: #E5E7EB;
    color: #6B7280;
}

.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   사양표 - 입력 예정 텍스트
   ======================================== */
.spec-pending {
    color: #9CA3AF;
    font-style: italic;
}

/* ========================================
   Placeholder 카드 (신제품 준비중)
   ======================================== */
.card-coming-soon {
    border: 2px dashed #CBD5E1 !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

/* ========================================
   기술자료 이미지 - 은은한 그림자 (도면/작동원리 이미지 통일)
   ======================================== */
.tech-image-shadow {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ========================================
   Hero - 리드 문구 및 특징 배지 1.5배 확대
   ※ 아래 3개 클래스는 Hero의 해당 요소에만 적용되는
   전용 스코프 클래스이며, 다른 요소/섹션에는 영향 없음.
   (폰트 종류/굵기/색상/정렬/위치는 기존 값 그대로 유지,
   font-size 및 관련 치수만 정확히 1.5배로 확대)
   ======================================== */

/* ① 메인 설명 문구: text-lg(18px→27px) / md:text-xl(20px→30px), line-height도 동일 비율(1.5배) 유지 */
#hero .hero-lead-text-scaled {
    font-size: 1.6875rem !important; /* 18px * 1.5 */
    line-height: 2.625rem !important; /* 28px * 1.5 */
}
@media (min-width: 768px) {
    #hero .hero-lead-text-scaled {
        font-size: 1.875rem !important; /* 20px * 1.5 */
        line-height: 2.625rem !important; /* 28px * 1.5 */
    }
}

/* ②③ 특징 배지 박스: 가로/세로/내부여백/아이콘/간격/폰트를 모두 1.5배 */
#hero .hero-feature-badge {
    padding-left: 1.5rem !important;   /* px-4(16px) * 1.5 = 24px */
    padding-right: 1.5rem !important;
    padding-top: 0.75rem !important;   /* py-2(8px) * 1.5 = 12px */
    padding-bottom: 0.75rem !important;
    gap: 0.75rem !important;           /* gap-2(8px) * 1.5 = 12px */
}
#hero .hero-feature-badge-icon {
    font-size: 1.5rem !important;      /* 16px * 1.5 = 24px */
}
#hero .hero-feature-badge-text {
    font-size: 1.3125rem !important;   /* text-sm(14px) * 1.5 = 21px */
    line-height: 1.875rem !important;  /* 20px * 1.5 = 30px */
}

/* ========================================
   BEST PRODUCT - 홈 신규 섹션 (Hero ~ Company Intro 사이)
   ※ 이 영역 전용 스코프 클래스 (다른 영역에 영향 없음)
   ======================================== */
.best-product-card {
    background: var(--dark-card);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.best-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.best-product-card .best-product-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    margin-bottom: 1.5rem;
}

.best-product-card .best-product-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 640px) {
    .best-product-card .best-product-img-wrap {
        height: 200px;
    }
}

/* ========================================
   주요 고객사 - 로고 무한 롤링(marquee)
   ※ 홈 "주요 고객사" 영역 전용 스코프 클래스 (다른 영역에 영향 없음)
   ======================================== */
.client-marquee-wrap {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.client-marquee-row {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.client-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 3.5rem;
    animation: client-marquee-scroll 42s linear infinite;
}

.client-marquee-row--slow .client-marquee-track {
    animation-duration: 58s;
}

.client-marquee-row:hover .client-marquee-track {
    animation-play-state: paused;
}

.client-logo-item {
    flex-shrink: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

.client-logo-item img {
    height: 100%;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}

/* ========================================
   Hero 배경 이미지 자동 슬라이드 (신규)
   ※ #hero 영역 전용 스코프 클래스 (다른 영역에 영향 없음)
   기존 #hero 레이아웃/텍스트/버튼 위치는 변경하지 않고,
   배경 그라데이션 레이어 위에 이미지 슬라이드 레이어만 추가.
   ======================================== */
.hero-bg-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-bg-slide.is-active {
    opacity: 1;
}

.hero-bg-slider .hero-bg-slide:nth-child(1) { background-image: url('../images/bg1.jpg'); }
.hero-bg-slider .hero-bg-slide:nth-child(2) { background-image: url('../images/bg2.jpg'); }
.hero-bg-slider .hero-bg-slide:nth-child(3) { background-image: url('../images/bg3.jpg'); }
.hero-bg-slider .hero-bg-slide:nth-child(4) { background-image: url('../images/bg4.jpg'); }
.hero-bg-slider .hero-bg-slide:nth-child(5) { background-image: url('../images/bg5.jpg'); }

/* 텍스트 가독성을 위한 오버레이 (기존 밝은 톤 텍스트 색상과의 대비 확보) */
.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(248, 250, 252, 0.55);
}

/* ========================================
   Hero 콘텐츠 우측 정렬 (신규)
   ※ #hero 영역의 텍스트/버튼 위치만 이동. 태블릿(768px)부터 우측 배치를 적용하고,
   모바일(767px 이하)은 기존 중앙 정렬을 그대로 유지 (반응형 미디어쿼리 내부 한정).
   텍스트 내용/폰트/크기/색상/버튼 디자인/링크는 변경하지 않음.
   ======================================== */
@media (min-width: 768px) {
    #hero .hero-outer {
        width: 100%;
    }

    #hero .hero-content-wrap {
        margin-left: auto;
        margin-right: 6%;
        max-width: 580px;
        text-align: right;
    }

    #hero .hero-content-wrap .hero-inline-row {
        justify-content: flex-end;
    }
}

@media (min-width: 1024px) {
    #hero .hero-content-wrap {
        margin-right: 8%;
        max-width: 560px;
    }
}

/* ========================================
   Hero 특징 배지 2개 가로 배치 (신규)
   ※ 박스 크기(가로/세로/여백/아이콘/폰트/간격/디자인)는 전혀 변경하지 않고,
   배치 방향만 세로→가로로 변경. 두 박스 폭 합(약 750px)이 안전하게 들어가는
   1024px 이상 화면에서만 적용하고, 그 미만(모바일/태블릿)은 기존 줄바꿈
   동작을 그대로 유지하여 화면 밖으로 잘리는 문제를 방지함.
   ======================================== */
@media (min-width: 1024px) {
    #hero .hero-inline-row {
        flex-wrap: nowrap;
    }
    #hero .hero-feature-badge {
        flex-shrink: 0;
    }
}

/* ========================================
   Hero CTA 버튼 좌측 정렬 (신규)
   ※ 버튼 컨테이너(.hero-cta-buttons)는 텍스트 컨테이너(.hero-content-wrap)와
   완전히 분리된 형제 요소로, 독립적인 정렬 기준(flex-start)을 가짐.
   Hero 텍스트(제목/설명/기능 문구)의 우측 정렬(.hero-content-wrap)에는
   영향을 주지 않음. 버튼 자체의 크기/색상/디자인/링크/순서는 변경하지 않음.
   ======================================== */
#hero .hero-cta-buttons {
    justify-content: flex-start;
}

@keyframes client-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 640px) {
    .client-marquee-wrap {
        gap: 1.75rem;
    }
    .client-marquee-track {
        gap: 2rem;
    }
    .client-logo-item {
        height: 40px;
    }
    .client-logo-item img {
        max-width: 110px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-marquee-track {
        animation: none;
    }
}