/* ================================================================
   [공통 스타일 - index.css]
   ================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary-bg: #0b0b0b;
    --text-main: #fff;
    --text-muted: #d1d5db;
    --accent-sky: #ff2c2c;
}

body {
    background-color: #0b0b0b;
    color: var(--text-main);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
}

#app-container {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    scroll-snap-type: y proximity;
    scroll-behavior: auto;
    position: relative;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

.page-section {
    display: none;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    position: relative;
    animation: fadeInPage 0.5s ease-out;
}
.page-section.active { display: block; }

@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in-up.animate { opacity: 1; transform: translateY(0); }

.animate-delay-1 { transition-delay: 0.15s; }
.animate-delay-2 { transition-delay: 0.3s; }
.animate-delay-3 { transition-delay: 0.45s; }
.animate-delay-4 { transition-delay: 0.6s; }
.animate-delay-5 { transition-delay: 0.75s; }
.animate-delay-6 { transition-delay: 0.9s; }
.animate-delay-7 { transition-delay: 1.05s; }
.animate-delay-8 { transition-delay: 1.2s; }

.snap-section {
    width: 100%;
    min-height: 100vh;
    height: auto;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    display: flex;
    flex-direction: column;
    justify-content: center;
    will-change: transform;
    position: relative;
    padding-top: 90px;
    padding-bottom: 80px;
    overflow: hidden;
}

.content-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 100px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.sub-header { padding-top: 0; padding-bottom: 60px; text-align: center; }
.sub-content { padding-bottom: 150px; }

.bg-aurora-base {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
    width: 80vw; height: 80vh; max-width: 1400px; max-height: 1200px;
    filter: blur(100px); z-index: 0; pointer-events: none; mix-blend-mode: screen;
}
.interactive-bg, .bg-aurora-about, .bg-aurora-business, .bg-aurora-history, .bg-aurora-partnership { display: none; }
.bg-aurora-project { background: transparent; filter: none; animation: none; }

.text-sky { color: #ff2c2c; }
.text-it { color: #4cc9f0; text-shadow: 0 0 15px rgba(76, 201, 240, 0.6); }
.text-vape { color: #b970e8; text-shadow: 0 0 15px rgba(187, 71, 255, 0.6); }
.text-ai { color: #ff007a; }

h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.2; letter-spacing: -1px; margin-bottom: 20px; }
.sub-header h1 { font-size: clamp(48px, 7vw, 72px); margin-bottom: 15px; font-weight: 700; }
.business-title-small { font-size: clamp(36px, 5.5vw, 56px) !important; }
.sub-header p { font-size: 18px; opacity: 0.7; line-height: 1.6; color: var(--text-muted); }
h2 { font-size: clamp(26px, 4vw, 42px); font-weight: 700; margin-bottom: 25px; }
h3 { font-size: clamp(22px, 3vw, 32px); font-weight: 600; margin-bottom: 15px; }
p { font-size: 16px; line-height: 1.6; color: var(--text-muted); }

.btn-group { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 40px; justify-content: center; position: relative; z-index: 10; }
.btn { padding: 16px 48px; font-size: 18px; font-weight: 600; cursor: pointer; border-radius: 40px; transition: 0.3s; text-align: center; }

.btn-primary {
    background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.btn-primary:hover {
    background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.text-outline { color: #fff !important; -webkit-text-stroke: 0 !important; opacity: 1 !important; }
.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); color: #fff; transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.contact-container { max-width: 800px; margin: 0 auto; width: 100%; }
.contact-box { background: rgba(255, 255, 255, 0.03); padding: 40px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
input, select, textarea { width: 100%; padding: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 16px; border-radius: 12px; }

.inquiry-type-box {
    flex: 1; padding: 14px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.18); text-align: center; cursor: pointer;
}
.inquiry-type-box.selected { background: rgba(255, 44, 44, 0.18); border-color: #ff2c2c; color: #ff2c2c; }

/* ================================================================
   [수정] 스크롤 마우스 디자인 강제 고정 및 그림자 보강
   ================================================================ */
.scroll-hint-overlay {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 80px !important;
    z-index: 100005 !important;
    pointer-events: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.scroll-hint-overlay.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

@keyframes floating {
    0% { transform: translateY(0); }
    50% { transform: translateY(10px); }
    100% { transform: translateY(0); }
}

.scroll-hint-overlay .mouse-shape {
    width: 26px;
    height: 42px;
    border: 2px solid #ffffff !important;
    border-radius: 13px;
    position: relative;
    box-sizing: border-box;
    animation: floating 2s infinite ease-in-out;
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.9)) !important;
}

.scroll-hint-overlay .mouse-shape::before {
    content: ''; position: absolute; top: 12px; left: 0; width: 100%; height: 2px; background: #ffffff !important;
}

.scroll-hint-overlay .mouse-shape::after {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 12px; background: #ffffff !important;
}

/* Light Mode */
body.light-mode { background-color: #fcfcfc !important; color: #1a1a1a !important; }
body.light-mode #app-container, body.light-mode .page-section, body.light-mode .snap-section { background: #fcfcfc !important; }
body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5,
body.light-mode .hero-content-left h1, body.light-mode .sub-header h1, body.light-mode .text-fill,
body.light-mode .text-highlight, body.light-mode .section-title { color: #0b0b0b !important; text-shadow: none !important; }
body.light-mode .text-outline { -webkit-text-stroke-color: rgba(0, 0, 0, 0.6) !important; color: transparent !important; }
body.light-mode p, body.light-mode span, body.light-mode .hero-content-left p, body.light-mode .sub-header p, body.light-mode .intro-text-area { color: #444 !important; }
body.light-mode .btn-primary { background: rgba(0, 0, 0, 0.06) !important; color: #1a1a1a !important; border-color: rgba(0, 0, 0, 0.2) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
body.light-mode .btn-primary:hover { background: rgba(0, 0, 0, 0.12) !important; border-color: rgba(0, 0, 0, 0.35) !important; }
body.light-mode .btn-outline { border-color: rgba(0, 0, 0, 0.25) !important; color: #1a1a1a !important; background: rgba(0, 0, 0, 0.03) !important; }
body.light-mode .btn-outline:hover { background: rgba(0, 0, 0, 0.08) !important; border-color: rgba(0, 0, 0, 0.4) !important; }
body.light-mode strong { color: #1a1a1a !important; }
body.light-mode ::-webkit-scrollbar-track { background: #e8e8e8 !important; }
body.light-mode ::-webkit-scrollbar-thumb { background: #bbb !important; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: #999 !important; }

body.light-mode .scroll-hint-overlay .mouse-shape { border-color: #ffffff !important; filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.9)) !important; }
body.light-mode .scroll-hint-overlay .mouse-shape::before, body.light-mode .scroll-hint-overlay .mouse-shape::after { background: #ffffff !important; }

/* Responsive */
@media (max-width: 1024px) {
    html, body { overflow-y: auto !important; height: auto !important; }
    #app-container { height: auto !important; overflow-y: visible !important; overflow-x: hidden; }
    .page-section { min-height: auto; }
    .content-wrapper { padding: 0 5%; }
    .snap-section { padding-top: 80px; height: auto; min-height: auto; justify-content: flex-start; padding-bottom: 40px; }
}
@media (max-width: 768px) {
    .sub-header { padding-top: 40px; margin-bottom: 25px; }
    .snap-section { padding-top: 60px; padding-bottom: 30px; }
    .btn-group { flex-direction: column; gap: 12px !important; align-items: center; }
    .btn { width: 100%; max-width: 280px; padding: 14px 30px !important; font-size: 16px !important; }
}
@media (max-width: 480px) {
    .btn { padding: 12px 24px !important; font-size: 14px !important; }
    .sub-header h1 { font-size: 28px !important; }
    .sub-header p { font-size: 14px !important; }
    .snap-section { padding-top: 50px; padding-bottom: 20px; }
}