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

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

/* 모든 스크롤바 숨김 */
*, *::before, *::after { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }

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

html {
    overflow-x: hidden !important;
}

body {
    background-color: #0b0b0b;
    color: var(--text-main);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    overflow-x: hidden !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: hidden !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); }



.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; }

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



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; }
.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); }

::selection {
    background: #ffffff;
    color: #0b0b0b;
}

::-moz-selection {
    background: #ffffff;
    color: #0b0b0b;
}

.btn { padding: 16px 48px; font-size: 18px; font-weight: 600; cursor: pointer; border-radius: 40px; transition: 0.3s; text-align: center; }

.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; }

/* ================================================================
    [수정] 스크롤 힌트 이미지 (하단 중앙 플로팅)
   ================================================================ */
.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 scrollHintFloat {
    0% { transform: translateY(-6px); }
    50% { transform: translateY(6px); }
    100% { transform: translateY(-6px); }
}

.scroll-hint-overlay .scroll-hint-image {
    width: clamp(24px, 2.2vw, 34px);
    height: auto;
    display: block;
    will-change: transform;
    animation: scrollHintFloat 1.8s infinite ease-in-out;
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.85)) drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.65));
}

/* Responsive */
@media (max-width: 1024px) {
    html, body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; }
    #app-container { height: auto !important; overflow-y: visible !important; overflow-x: hidden !important; }
    .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 { 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; }
}

/* ================================================================
   [페이지별 오버라이드]
   ================================================================ */

#page-business-partnership .snap-section,
#page-project-web .snap-section,
#page-business-main .snap-section {
    height: auto;
    min-height: 100vh;
    justify-content: flex-start;
    padding-top: 140px;
    padding-bottom: 100px;
}

#page-business-partnership .sub-header,
#page-project-web .sub-header,
#page-business-main .sub-header {
    margin-top: 40px;
}

#page-about-history .snap-section {
    height: auto;
    min-height: 100vh;
    justify-content: flex-start;
    padding-top: 180px;
    padding-bottom: 100px;
}

/* ================================================================
   [커스텀 커서]
   ================================================================ */
.custom-cursor {
    position: fixed;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483647 !important;
    transition: transform 0.1s ease-out, opacity 0.3s ease, border-color 0.2s ease;
    transform: translate(-50%, -50%);
    opacity: 0;
    box-sizing: border-box;
    mix-blend-mode: normal;
    isolation: isolate;
}

.custom-cursor.active {
    opacity: 1;
}

.custom-cursor.clicking {
    transform: translate(-50%, -50%) scale(0.8);
}

html, body, body * {
    cursor: none !important;
}

/* ================================================================
   [배경 효과 비활성화]
   ================================================================ */
.bg-aurora-about, .bg-aurora-business, .bg-aurora-history, .bg-aurora-partnership {
    display: none;
}

.bg-aurora-project {
    background: transparent;
    filter: none;
}

/* ================================================================
   [비디오 섹션 특수 레이아웃]
   ================================================================ */
#video-sec-intro {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
    min-height: 100vh;
    padding-top: 90px !important;
}

/* ================================================================
   [Works 페이지 카드 블러 효과]
   ================================================================ */
.works-card {
    transition: filter 0.6s ease, opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.works-card.blur-out {
    filter: blur(6px) !important;
    opacity: 0.3 !important;
    transform: scale(0.96) !important;
}