/* ###################################################################### */
/* [SECTION START] 0. 기본 설정 및 변수 (GLOBAL) */
/* ###################################################################### */
:root {
    --primary-black: #000000;
    --secondary-black: #121212;
    --accent-orange: #f57309;
    --text-white: #ffffff;
    --text-gray: #888888;
    --header-height: 80px;
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --vh: 1vh; 
}

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

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
    background-color: var(--primary-black);
    color: var(--text-white);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; transition: color 0.3s; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }





/* ###################################################################### */
/* [NEW FEATURE] PRELOADER (로딩 화면) */
/* ###################################################################### */

/* 1. 전체 화면 덮개 (딥 블랙) */
.preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #000000; 
    z-index: 99999; /* 최상위 레이어 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

/* 2. 사라질 때 (JS가 제어) */
.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 3. 중앙 정렬 컨테이너 */
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 4. 로고 이미지 스타일 */
.loader-logo {
    width: 180px; /* 로고 크기 조절 */
    height: auto;
    margin-bottom: 10px;
    animation: logoPulse 2s infinite ease-in-out;
}

.loader-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* 로고 숨쉬기 애니메이션 */
@keyframes logoPulse {
    0% { opacity: 0.7; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4)); }
    100% { opacity: 0.7; transform: scale(0.98); }
}

/* 5. 로딩 바 트랙 (회색) */
.loader-bar-track {
    width: 200px;
    height: 3px;
    background-color: #222;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}

/* 6. 로딩 바 채움 (오렌지색 무한 이동) */
.loader-bar-fill {
    width: 40%;
    height: 100%;
    background-color: var(--accent-orange);
    position: absolute;
    left: -40%;
    box-shadow: 0 0 10px var(--accent-orange);
    animation: barMove 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes barMove {
    0% { left: -40%; }
    50% { left: 40%; width: 60%; }
    100% { left: 100%; width: 40%; }
}

/* 7. [NEW] 로딩 텍스트 스타일 (추가됨) */
.loader-text {
    margin-top: 15px;            /* 로딩바와 간격 */
    font-family: var(--font-heading); /* 사이트 폰트 사용 */
    font-size: 0.9rem;           /* 적당한 크기 */
    color: #888;                 /* 은은한 회색 */
    letter-spacing: 1px;         /* 자간 */
    text-transform: uppercase;   /* 영문 대문자 처리 */
    text-align: center;
    min-height: 20px;            /* 텍스트가 바뀌어도 레이아웃 안 흔들리게 높이 확보 */
    font-weight: 500;
    animation: textPulse 2s infinite ease-in-out; /* 깜빡임 효과 */
}

/* 텍스트 숨쉬기 애니메이션 */
@keyframes textPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}





/* ###################################################################### */
/* [GLOBAL FIX] 0. 렌더링 및 스크롤 버그 방지 (Sticky 풀림 해결) */
/* ###################################################################### */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }



/* ==================================================================
   [RE-DESIGN FINAL v5] LEGO-BLOCK LAYOUT (Fixed Header + Scroll Fix)
   ================================================================== */

/* 1. 오버레이 */
.popup-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    z-index: 20000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.popup-overlay.active { opacity: 1; visibility: visible; }

/* 2. 팝업 박스 */
.popup-box {
    width: 1000px; height: 600px;
    background-color: #111;
    display: flex;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9);
    border: 1px solid #333;
    transform: translateY(30px);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden;
}
.popup-overlay.active .popup-box { transform: translateY(0); }

/* 3. 좌측 이미지 영역 */
.popup-visual-area {
    flex: 6; position: relative; overflow: hidden;
    background-color: #000; width: 100%; height: 100%;
}
.popup-slider-track {
    display: flex; width: 100%; height: 100%;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.popup-slide {
    flex: 0 0 100%; width: 100%; height: 100%;
    position: relative; overflow: hidden;
}

/* --- [핵심 수정] PC/모바일 이미지 분기 처리 --- */
.popup-slide img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* 꽉 채우기 */
    display: block;
}

/* 기본 상태 (PC): PC 이미지는 보이고, 모바일은 숨김 */
.img-pc { display: block; }
.img-mo { display: none; }

.popup-arrows {
    position: absolute; bottom: 30px; right: 30px;
    display: flex; gap: 10px; z-index: 10;
}
.pop-arrow-btn {
    width: 45px; height: 45px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff; font-size: 1rem;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; transition: 0.3s;
}

/* 4. 우측 콘텐츠 영역 (세로 적층 구조) */
.popup-content-area {
    flex: 4; display: flex; flex-direction: column;
    background-color: #111; border-left: 1px solid #222;
    position: relative; height: 100%;
}

/* 4-1. 고정 헤더 (배지 + 인디케이터) */
.pop-fixed-header {
    flex-shrink: 0;
    padding: 40px 40px 20px 40px;
    display: flex; justify-content: space-between; align-items: center;
    background-color: #111; z-index: 10;
}

.pop-badge {
    display: inline-block; font-size: 0.8rem;
    color: var(--accent-orange); border: 1px solid var(--accent-orange);
    padding: 6px 12px; font-weight: 700; letter-spacing: 1px;
}

.popup-dots {
    display: flex; gap: 8px;
}
.pop-dot {
    width: 8px; height: 8px; background-color: #333;
    border-radius: 0%; cursor: none; transition: 0.3s;
}
.pop-dot.active { background-color: var(--accent-orange); transform: scale(1.2); }

/* 4-2. 스크롤 가능한 텍스트 영역 */
.pop-scroll-content {
    flex: 1;
    padding: 0 40px 30px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 스크롤바 커스텀 */
.pop-scroll-content::-webkit-scrollbar { width: 4px; }
.pop-scroll-content::-webkit-scrollbar-track { background: #111; }
.pop-scroll-content::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.pop-headline {
    font-family: var(--font-heading); font-size: 2.8rem;
    color: #fff; line-height: 1.1; margin-bottom: 20px;
}
.pop-description {
    font-size: 1rem; color: #999; line-height: 1.6;
    word-break: keep-all; margin-bottom: 20px;
}

/* 4-3. 메인 CTA 버튼 (고정) */
.pop-fixed-cta-wrap {
    padding: 0; flex-shrink: 0; border-top: 1px solid #222;
}
.pop-main-cta-btn {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    width: 100%; padding: 20px 0;
    background-color: var(--accent-orange); color: #fff;
    font-family: var(--font-heading); font-size: 1.1rem; letter-spacing: 1px;
    font-weight: 700; text-transform: uppercase; transition: 0.3s;
}
.pop-main-cta-btn:hover { background-color: #d86200; }

/* 4-4. 하단 유틸리티 버튼 (고정) */
.popup-bottom-bar {
    display: flex; width: 100%; border-top: 1px solid rgba(0,0,0,0.2);
    flex-shrink: 0; background-color: #0e0e0e;
}
.pop-block-btn {
    flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px;
    padding: 18px 0; background: transparent; color: #888;
    cursor: pointer; transition: 0.3s; font-size: 0.9rem; border: none; outline: none;
}
.pop-block-btn:hover { background-color: #222; color: #fff; }
.pop-block-btn.left { border-right: 1px solid #222; }

.pop-block-btn input { display: none; }
.pop-block-btn .icon-box {
    width: 16px; height: 16px; border: 1px solid #555;
    display: flex; justify-content: center; align-items: center;
    font-size: 10px; color: transparent; transition: 0.3s;
}
.pop-block-btn input:checked + .icon-box {
    background: var(--accent-orange); border-color: var(--accent-orange); color: #fff;
}
.pop-block-btn input:checked ~ span { color: #fff; font-weight: 500; }

/* [PC Only] Hover */
@media (hover: hover) and (pointer: fine) {
    .pop-arrow-btn:hover { background-color: var(--accent-orange); border-color: var(--accent-orange); color: #000; }
}

/* ==================================================================
   [RESPONSIVE] MOBILE LAYOUT
   ================================================================== */
@media (max-width: 768px) {
    .popup-box {
        width: 90%; height: 85vh; max-height: 600px;
        flex-direction: column;
    }
    .popup-visual-area { flex: none; width: 100%; height: 180px; }
    
    /* [핵심 수정] 모바일에서는 PC이미지 숨기고 모바일이미지 보이기 */
    .img-pc { display: none !important; }
    .img-mo { display: block !important; }

    .popup-arrows { bottom: 15px; right: 15px; }
    .pop-arrow-btn { width: 35px; height: 35px; font-size: 0.8rem; }

    .popup-content-area {
        flex: 1; border-left: none; border-top: 1px solid #222;
        min-height: 0;
    }

    .pop-fixed-header { padding: 25px 20px 15px 20px; }
    .pop-scroll-content { padding: 0 20px 20px 20px; }
    
    .pop-headline { font-size: 1.8rem; margin-bottom: 10px; }
    .pop-description { font-size: 0.95rem; margin-bottom: 10px; }

    .pop-main-cta-btn { padding: 18px 0; font-size: 1rem; }
    .pop-block-btn { padding: 16px 0; font-size: 0.85rem; background-color: #050505; }
}




/* ###################################################################### */
/* [SECTION START] 3. 히어로 섹션 */
/* ###################################################################### */

.hero-section {
    position: relative; width: 100%;
    height: calc(var(--vh, 1vh) * 300); 
    background-color: #000; z-index: 0;
}

.hero-sticky {
    position: sticky; top: 0; width: 100%;
    /* env 코드로 복구 */
    height: calc(100vh + env(safe-area-inset-bottom)); 
    overflow: hidden; display: flex;
    justify-content: center; align-items: center;
    background-color: #000;
}

.hero-video-wrapper {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}

.hero-video-wrapper iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;
    min-height: 100vh; min-width: 177.77vh;
    transform: translate(-50%, -50%) scale(1.1); /*  */
    pointer-events: none; /* <--- 여기도 추가 */
}

.hero-mask-container {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1; background-color: #000;
    display: flex; justify-content: center; align-items: center;
    pointer-events: none; mix-blend-mode: multiply; 
}

.mask-content {
    width: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    transform: translateZ(0); backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.hero-subtitle {
    color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 4px;
    margin-bottom: 15px;
}

.hero-zoom-text {
    font-family: var(--font-heading); font-size: 13vw;
    font-weight: 900; line-height: 0.9; color: #fff; margin: 0;
    white-space: nowrap; transform-origin: center center;
}

.outline-text { color: #fff; }

.hero-final-content {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0; text-align: center; width: 100%;
    opacity: 0; pointer-events: none;
}

.hero-final-content.active { pointer-events: auto; }

.final-title {
    font-family: var(--font-heading); font-size: 4.5rem; color: #fff;
    line-height: 1; margin-bottom: 20px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.final-desc {
    font-size: 1.2rem; color: #ddd;
    margin-bottom: 40px; line-height: 1.6;
}

.btn-hero {
    display: inline-block; padding: 16px 45px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff; font-family: var(--font-heading);
    font-size: 1.1rem; font-weight: 700; letter-spacing: 1px;
    transition: all 0.3s ease; cursor: pointer;
}

/* [PC Only] 히어로 버튼 호버 */
@media (hover: hover) and (pointer: fine) {
    .btn-hero:hover {
        background-color: var(--accent-orange);
        border-color: var(--accent-orange);
    }
}

.scroll-indicator {
    position: absolute; bottom: 40px; left: 50%;
    transform: translateX(-50%); z-index: 10;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: opacity 0.3s;
}

.scroll-text {
    font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.7); font-weight: 500;
}

.mouse {
    width: 26px; height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px; position: relative;
}

.wheel {
    width: 2px; height: 6px;
    background-color: var(--accent-orange);
    position: absolute; top: 8px; left: 50%;
    transform: translateX(-50%); border-radius: 2px;
    animation: scrollWheel 1.5s infinite;
}

@keyframes scrollWheel {
    0% { opacity: 1; top: 8px; } 100% { opacity: 0; top: 20px; }
}

@media (max-width: 768px) {
    .hero-section { height: calc(var(--vh, 1vh) * 350); }
    .hero-zoom-text { font-size: 18vw; }
    .final-title { font-size: 2.5rem; }
    .btn-hero { padding: 14px 35px; font-size: 1rem; }
}

/* ▼ [추가할 코드] 텍스트 박스 위치 조정 ▼ */
    .mask-content {
        /* 아래쪽에 투명한 여백을 줘서 내용을 위로 밀어올림 */
        padding-bottom: 15vh; 
    }

/* [MOBILE FIX] 스크롤 인디케이터 위치 조정 */
@media (max-width: 768px) {
    .scroll-indicator {
        /* 기존 40px -> 110px로 대폭 올림 (하단 UI 고려) */
        bottom: 120px; 
    }
}

.hero-top-fade {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 30vh; 
    background: linear-gradient(to bottom, #000000 0%, rgba(0,0,0,0) 100%);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    z-index: 5; pointer-events: none;
}

.hero-bottom-fade {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 30vh;
    background: linear-gradient(to bottom, rgba(10,10,10,0) 0%, #0a0a0a 100%);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    z-index: 5; pointer-events: none;
}


/* ###################################################################### */
/* [UI COMPONENT] SEAL BADGE */
/* ###################################################################### */

.seal-wrapper {
    position: relative; width: 100%; height: 0;
    z-index: 20; pointer-events: none;
}

.seal-badge {
    width: 150px; height: 150px;
    position: absolute; left: 50%; top: 0;
    transform: translate(-50%, -50%);
    background-color: #000;
    border-radius: 50%; border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex; justify-content: center; align-items: center;
    will-change: transform;
}

.seal-text-svg {
    width: 100%; height: 100%;
    animation: spinSlow 20s linear infinite;
}

.seal-text-svg text {
    font-family: var(--font-heading); font-size: 18px; font-weight: 700; fill: #fff;
    letter-spacing: 2px; text-transform: uppercase;
}

.seal-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--accent-orange); font-size: 1.8rem;
}

.seal-line-track {
    position: absolute; top: 130px; left: 50%;
    transform: translateX(-50%);
    width: 2px; height: 250px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: -1;
}

.seal-line-fill {
    width: 100%; height: 0%;
    background-color: var(--accent-orange);
    box-shadow: 0 0 10px var(--accent-orange);
    transform-origin: top;
}

@media (max-width: 768px) {
    .seal-badge { width: 100px; height: 100px; }
    .seal-text-svg text { font-size: 20px; } 
    .seal-icon { font-size: 1.2rem; }
    .seal-line-track { top: 100px; height: 150px; }
}


/* ###################################################################### */
/* [SECTION START] 5. ABOUT US 섹션 */
/* ###################################################################### */

.about-section {
    background-color: #0a0a0a; padding: 450px 0 140px 0;
    position: relative;
}

.about-container {
    max-width: 1400px; margin: 0 auto;
    padding: 0 30px;
}

.about-wrapper {
    display: flex; align-items: center;
    justify-content: space-between; gap: 80px;
}

.about-text {
    flex: 1; opacity: 0;
    transform: translateY(30px); transition: all 0.8s ease-out;
}

.section-label {
    display: block; font-size: 13px; font-weight: 700; color: #555;
    letter-spacing: 3px; margin-bottom: 20px;
}

.about-heading {
    font-family: var(--font-heading); font-size: 3.2rem; color: #fff;
    line-height: 1.1; margin-bottom: 30px;
}

.text-orange { color: var(--accent-orange); }

.text-divider {
    width: 40px; height: 3px;
    background-color: var(--accent-orange); margin-bottom: 30px;
}

.about-description {
    font-size: 1.1rem; color: #bbb; 
    line-height: 1.7; margin-bottom: 50px; word-break: keep-all;
}

.about-description strong {
    color: #fff; font-weight: 500; display: block;
    margin-bottom: 15px; font-size: 1.25rem;
}

.about-values {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px; border-top: 1px solid #222; padding-top: 30px;
}

.val-item {
    background-color: transparent; transition: transform 0.3s ease;
}

.val-num {
    display: block; font-family: var(--font-heading);
    font-size: 1.8rem; color: var(--accent-orange);
    margin-bottom: 10px; opacity: 0.8;
}

.val-title {
    font-size: 1.1rem; color: #fff;
    font-weight: 700; margin-bottom: 8px; letter-spacing: 0.5px;
}

.val-desc {
    font-size: 0.9rem; color: #777;
    line-height: 1.4; word-break: keep-all;
}

.about-image {
    flex: 1.1; opacity: 0;
    transform: translateY(30px); transition: all 0.8s ease-out;
    transition-delay: 0.2s;
}

.image-mask {
    width: 100%; height: 600px; background-color: #111;
    overflow: hidden; position: relative;
}

.image-mask img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(80%) brightness(0.8);
    transition: all 0.6s ease; transform: scale(1.0);
}

/* [PC Only] About 섹션 호버 효과 */
@media (hover: hover) and (pointer: fine) {
    .image-mask:hover img {
        filter: grayscale(0%) brightness(1); transform: scale(1.05);
    }
    .val-item:hover { transform: translateY(-5px); }
    .val-item:hover .val-num { opacity: 1; }
    .val-item:hover .val-title { color: var(--accent-orange); transition: color 0.3s; }
}

.animate-on-scroll.is-visible {
    opacity: 1; transform: translateY(0);
}

@media (max-width: 1024px) {
    .about-wrapper { flex-direction: column; align-items: flex-start; gap: 60px; }
    .about-image { width: 100%; order: -1; }
    .image-mask { height: 400px; }
    .about-values { gap: 15px; }
}

@media (max-width: 768px) {
    .about-section { padding: 320px 0 140px 0; }
    .about-container { padding: 0 16px; }
    .about-heading { font-size: 2.5rem; }
    .image-mask { height: 300px; }
    .about-values { grid-template-columns: 1fr; gap: 30px; }
    .val-item { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #222; padding-bottom: 20px; }
    .val-item:last-child { border-bottom: none; padding-bottom: 0; }
    .val-num { margin-bottom: 0; font-size: 2rem; width: 50px; }
}


/* ###################################################################### */
/* [SECTION START] HISTORY SECTION */
/* ###################################################################### */

.history-section {
    height: calc(var(--vh, 1vh) * 250); 
    position: relative; background-color: #0a0a0a;
}

.history-sticky-wrapper {
    position: sticky; top: 0; width: 100%; 
    height: calc(100vh + env(safe-area-inset-bottom));
    overflow: hidden; display: flex;
    flex-direction: column; justify-content: center;
}

.history-container {
    width: 100%; max-width: 1400px;
    margin: 0 auto; padding: 0 30px;
    position: relative;
}

/* [복구됨] 애니메이션 속성 제거 */
.history-header { 
    margin-bottom: 60px;
}

.history-title {
    font-family: var(--font-heading);
    font-size: 3rem; color: #fff; line-height: 1;
}

/* [복구됨] 애니메이션 속성 제거 */
.history-track {
    display: flex; gap: 60px; width: max-content;
    padding-left: max(30px, calc(50vw - 700px + 30px));
    padding-right: 10vw; height: auto; align-items: stretch;
    will-change: transform; margin-bottom: 60px;
}

.history-item {
    flex-shrink: 0; width: 380px; min-height: 360px;
    background-color: #111; border: 1px solid #222; padding: 40px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: all 0.3s ease;
}

.history-item.active {
    background-color: #1a1a1a; border-color: var(--accent-orange);
}

.history-year {
    display: block; font-family: var(--font-heading);
    font-size: 4rem; font-weight: 700; color: #333;
    margin-bottom: 20px; line-height: 1;
}
.history-item.active .history-year { color: var(--accent-orange); }

.history-event {
    font-family: var(--font-heading); font-size: 1.5rem; color: #fff;
    margin-bottom: 15px; line-height: 1.2;
}

.history-desc {
    font-size: 1rem; color: #888;
    line-height: 1.6; word-break: keep-all;
}

.history-progress-bar {
    width: 100%; height: 2px; background-color: #222; position: relative;
}

.history-progress-fill {
    width: 0%; height: 100%;
    background-color: var(--accent-orange);
    position: absolute; top: 0; left: 0;
}

@media (max-width: 1024px) {
    .history-item { width: 320px; min-height: 320px; padding: 30px; }
    .history-year { font-size: 3rem; }
}

@media (max-width: 768px) {
    .history-container { padding: 0 16px; }
    .history-track { padding-left: 16px; gap: 30px; }
    .history-item { width: 280px; min-height: 300px; padding: 25px; }
    .history-title { font-size: 2.5rem; }
}












/* ###################################################################### */
/* [SECTION START] STATISTICS SECTION */
/* ###################################################################### */

.stats-section {
    position: relative; 
    padding: 120px 0; 
    z-index: 10; 
    
    /* 튀어나가는 배경 잘라내기 */
    overflow: hidden;
    
    /* 배경을 투명하게 해서 뒤에 있는 stats-bg가 보이게 함 */
    background-color: transparent; 
}

/* [NEW] JS로 움직일 배경 (PC 기본) */
.stats-bg {
    position: absolute; 
    
    /* 패럴랙스 움직임을 위해 위아래를 길게 잡음 */
    top: -20%; 
    left: 0; 
    width: 100%; 
    height: 105%; 
    
    /* [PC용 이미지 경로] */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url('../stats-section_images/stats-section_background.webp');
    
    background-size: cover; 
    background-position: center; 

    filter: blur(4px);
    
    z-index: -1; /* 내용물 뒤로 */
    will-change: transform; /* 모바일 성능 최적화 */
    pointer-events: none;
}

/* [모바일 전용 설정] 화면 너비 768px 이하일 때 이미지 교체 */
@media (max-width: 768px) {
    .stats-bg {
        /* [모바일용 이미지 경로] 파일명 뒤에 _mo 추가 */
        background-image: 
            linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
            url('../stats-section_images/stats-section_background_mo.webp');
            
        /* 모바일에서는 이미지가 덜 잘리도록 위치 조정 (필요시 center top 등으로 수정) */
        background-position: center center; 
    }
}

/* 기존 가상요소는 확실히 제거 */
.stats-section::before { display: none; }

.stats-container {
    position: relative; z-index: 2;
    max-width: 1400px; margin: 0 auto; padding: 0 30px;
}

.stats-header {
    width: 100%; text-align: center; margin-bottom: 60px;
    opacity: 0; transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.stats-header.is-visible { opacity: 1; transform: translateY(0); }

.stats-header .section-label {
    display: inline-block; font-size: 0.9rem; color: #888;
    letter-spacing: 3px; font-weight: 700; text-transform: uppercase;
}

.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 40px; text-align: center;
}

.stats-item { padding: 20px; }

.stats-number, .stats-suffix {
    display: inline-block; font-family: var(--font-heading);
    font-size: 5rem; font-weight: 700; color: #fff;
    line-height: 1; margin-bottom: 10px;
}

.stats-suffix {
    color: var(--accent-orange); font-size: 3rem;
    vertical-align: top; margin-top: 10px; margin-left: 5px;
}

.stats-label {
    font-family: var(--font-heading); font-size: 1.2rem; color: #aaa;
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px;
}

.stats-line {
    width: 40px; height: 2px;
    background-color: #333; margin: 0 auto 20px auto;
}

.stats-desc {
    font-size: 0.95rem; color: #666;
    line-height: 1.5; word-break: keep-all;
}

@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 60px; }
}

@media (max-width: 600px) {
    .stats-container { padding: 0 16px; }
    .stats-header { margin-bottom: 40px; }
    .stats-grid { grid-template-columns: 1fr; gap: 50px; }
    .stats-number { font-size: 4rem; }
    .stats-suffix { font-size: 2.5rem; }
}














/* ###################################################################### */
/* [NEW SECTION] Scroll Gallery (Bi-directional) */
/* ###################################################################### */

.scroll-gallery-section {
    background-color: #000; padding: 120px 0;
    overflow: hidden; position: relative;
    z-index: 2; border-top: 1px solid #111;
}

.sg-container {
    display: flex; flex-direction: column; gap: 30px;
    width: 100%;
    
    /* [애니메이션 초기 상태] */
    opacity: 0;
    /* 원래 기울기(-2deg)에 + 아래로 50px 내려가 있음 */
    transform: rotate(-2deg) scale(1.05) translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* [애니메이션 활성화 상태] */
/* 중요: 일반 .animate-on-scroll 규칙보다 더 구체적으로 작성하여 기울기 유지 */
.sg-container.is-visible {
    opacity: 1;
    /* 원래 위치로 복귀 (기울기 유지) */
    transform: rotate(-2deg) scale(1.05) translateY(0);
}

.sg-row {
    display: flex; gap: 30px; width: max-content;
    will-change: transform;
}

.sg-row.move-right { transform: translateX(-20%); }

.sg-item {
    width: 400px; height: 260px; flex-shrink: 0;
    border-radius: 4px; overflow: hidden; position: relative;
    filter: grayscale(100%); transition: filter 0.3s ease;
}

.sg-item img { width: 100%; height: 100%; object-fit: cover; }

/* [PC Only] 갤러리 호버 */
@media (hover: hover) and (pointer: fine) {
    .sg-item:hover { filter: grayscale(0%); }
}

@media (max-width: 768px) {
    .scroll-gallery-section { padding: 80px 0; }
    
    .sg-container { 
        gap: 15px; 
        /* 모바일에서는 기울기 제거 및 애니메이션 좌표 수정 */
        transform: rotate(0deg) translateY(30px); 
    }
    
    .sg-container.is-visible {
        transform: rotate(0deg) translateY(0);
    }

    .sg-row { gap: 15px; }
    .sg-item { width: 280px; height: 180px; }
}


/* ###################################################################### */
/* [SECTION] Inverted Section (Safari 렌더링 최적화) */
/* ###################################################################### */

.inverted-section {
    position: relative;
    height: calc(var(--vh, 1vh) * 300); 
    background-color: #000; 
    z-index: 8; 
}

.inverted-sticky {
    position: sticky; top: 0; width: 100%;
    height: calc(100vh + env(safe-area-inset-bottom));
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; background-color: #000; 
    will-change: background-color; 
}

.inverted-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    /* 모바일 사파리 깜빡임 방지용 하드웨어 가속 트리거 */
    transform: translateZ(0); 
}

.inverted-text {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 11vw, 9rem);
    line-height: 0.95;
    font-weight: 700;
    text-align: center;
    
    /* [초기 상태] 투명한 속살 + 흰색 테두리 */
    color: transparent; 
    -webkit-text-stroke: 1px #ffffff; 
    
    opacity: 1;
    transform: scale(1.4);
    
    /* [수정] stroke는 will-change에서 제외 (버그 방지) */
    will-change: color, transform; 
}

.inverted-sub {
    margin-top: 40px;
    font-size: 1.25rem;
    color: #111; 
    font-weight: 500;
    line-height: 1.6;
    opacity: 0; 
    transform: translateY(20px);
    word-break: keep-all;
}

.m-br { display: none; }

@media (max-width: 768px) {
    .inverted-text { font-size: clamp(3rem, 13vw, 5.5rem); }
    .inverted-sub { font-size: 1rem; margin-top: 30px; padding: 0 20px; }
    .m-br { display: block; }
}


/* ###################################################################### */
/* [SECTION] Negative Section */
/* ###################################################################### */

.negative-section {
    position: relative; height: calc(var(--vh, 1vh) * 300); 
    background-color: #fff; z-index: 5;
}

.negative-sticky {
    position: sticky; top: 0; width: 100%; 
    height: calc(100vh + env(safe-area-inset-bottom));
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; overflow: hidden; background-color: #fff;
}

.negative-text {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 11vw, 9rem);
    font-weight: 700; line-height: 0.95; text-align: center;
    color: #fff; mix-blend-mode: difference; 
    position: relative; z-index: 10; will-change: transform;
}

.negative-sub {
    margin-top: 40px; font-size: 1.25rem; font-weight: 500;
    color: #fff; position: relative; z-index: 10;
    opacity: 0; transform: translateY(20px); line-height: 1.6;
    word-break: keep-all;
    
    /* [수정] 텍스트 가운데 정렬 추가 */
    text-align: center; 
}

.negative-curtain {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 0%; background-color: #000;
    z-index: 1; will-change: height;
}

.m-br { display: none; }

@media (max-width: 768px) {
    .inverted-text, .negative-text { font-size: clamp(3rem, 13vw, 5.5rem); }
    .inverted-sub, .negative-sub { font-size: 1rem; margin-top: 30px; padding: 0 20px; }
    .m-br { display: block; }
}


/* ###################################################################### */
/* [SECTION START] SERVICES SECTION */
/* ###################################################################### */

.services-section {
    background-color: #111; padding: 140px 0; position: relative;
}

.services-container {
    max-width: 1400px; margin: 0 auto; padding: 0 30px;
}

.services-header {
    text-align: center; margin-bottom: 60px;
    opacity: 0; transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.services-title {
    font-family: var(--font-heading); font-size: 3rem; color: #fff;
    margin-bottom: 30px; line-height: 1.1;
}

.text-divider.center { margin: 0 auto 30px auto; }

.services-desc {
    font-size: 1.1rem; color: #aaa; line-height: 1.6;
    max-width: 600px; margin: 0 auto;
}

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

.service-card {
    background-color: #161616; padding: 40px;
    border: 1px solid #2a2a2a; position: relative;
    opacity: 0; transform: translateY(30px);
    transition: transform 0.4s ease-out, border-color 0.4s ease, background-color 0.4s ease;
}

.card-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 30px;
}

.card-num {
    font-family: var(--font-heading); font-size: 2.5rem;
    font-weight: 700; color: #333; transition: color 0.4s ease;
}

.card-icon {
    font-size: 2rem; color: #555;
    transition: color 0.4s ease, transform 0.4s ease;
}

.card-title {
    font-family: var(--font-heading); font-size: 1.6rem;
    color: #fff; margin-bottom: 15px;
}

.card-desc {
    font-size: 0.95rem; color: #999;
    line-height: 1.7; margin-bottom: 25px; min-height: 70px;
}

.card-line {
    width: 100%; height: 1px; background-color: #333; margin-bottom: 20px;
    transition: background-color 0.4s ease;
}

.card-tags { display: flex; flex-wrap: wrap; gap: 10px; }

.card-tags li {
    font-size: 0.85rem; color: #666; background-color: #222;
    padding: 5px 10px; border-radius: 4px; transition: all 0.4s ease;
}

/* [PC Only] 서비스 카드 호버 */
@media (hover: hover) and (pointer: fine) {
    .service-card:hover {
        transform: translateY(-10px); border-color: var(--accent-orange);
        background-color: #1a1a1a;
    }
    .service-card:hover .card-num { color: var(--accent-orange); }
    .service-card:hover .card-icon { color: var(--accent-orange); transform: scale(1.1); }
    .service-card:hover .card-line { background-color: var(--accent-orange); }
    .service-card:hover .card-tags li { color: #fff; background-color: rgba(245, 115, 9, 0.2); }
}

@media (max-width: 1024px) {
    .services-grid { grid-template-columns: 1fr; gap: 30px; }
    .services-header { margin-bottom: 40px; }
}

@media (max-width: 768px) {
    .services-container { padding: 0 16px; }
    .services-header { text-align: left; }
    .text-divider.center { margin: 0 0 30px 0; }
    .services-desc { margin: 0; max-width: 100%; }
}

.services-title {
    font-size: 2.5rem;
}


/* ###################################################################### */
/* [RE-DESIGN] PROCESS SECTION */
/* ###################################################################### */

.process-section {
    background-color: #111; padding: 0 0 160px 0;
    position: relative; overflow: hidden;
}

.process-container {
    max-width: 1000px; margin: 0 auto; padding: 0 30px;
}

/* --- 헤더 스타일 --- */
.process-header {
    text-align: center; /* PC 기본: 중앙 정렬 */
    margin-bottom: 80px; padding-top: 80px;
}

.process-title {
    font-family: var(--font-heading); font-size: 3rem; color: #fff;
    line-height: 1.2; margin-bottom: 25px;
}

.process-sub { 
    color: #888; font-size: 1.05rem; line-height: 1.6;
    word-break: keep-all;
}

/* --- 프로세스 단계 스타일 --- */
.process-wrapper { position: relative; padding: 20px 0; }

.process-line-track {
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%); width: 2px; height: 100%;
    background-color: #222; z-index: 1;
}

.process-line-fill {
    width: 100%; height: 0%;
    background-color: var(--accent-orange);
    box-shadow: 0 0 15px var(--accent-orange);
    transition: height 0.1s linear;
}

.process-item {
    position: relative; display: flex;
    justify-content: center; align-items: center;
    margin-bottom: 120px; z-index: 2;
}
.process-item:last-child { margin-bottom: 0; }

.process-marker {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 16px; height: 16px; background-color: #111;
    border: 2px solid #444; border-radius: 50%;
    transition: all 0.4s ease;
}

.process-item.active .process-marker {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    box-shadow: 0 0 20px var(--accent-orange);
    transform: translateX(-50%) scale(1.5);
}

.process-content {
    width: 40%; margin-left: auto; padding-left: 40px;
    opacity: 0.2; transform: translateX(20px);
    transition: all 0.6s ease;
}

.process-item:nth-child(even) .process-content {
    margin-left: 0; margin-right: auto; text-align: right;
    padding-left: 0; padding-right: 40px;
    transform: translateX(-20px);
}

.process-item.active .process-content { opacity: 1; transform: translateX(0); }

.step-num {
    display: block; font-family: var(--font-heading);
    color: var(--accent-orange); font-size: 1.2rem;
    margin-bottom: 10px; font-weight: 700;
}

.step-title {
    font-family: var(--font-heading); font-size: 2rem; color: #fff; margin-bottom: 10px;
}

.step-desc {
    font-size: 1rem; color: #aaa;
    line-height: 1.6; word-break: keep-all;
}

/* --- 반응형 (모바일) --- */
@media (max-width: 768px) {
    .process-container { padding: 0 16px; }
    
    /* 헤더 좌측 정렬 */
    .process-header { 
        text-align: left; 
    }

    .process-title {
    font-size: 2.5rem;
}
    
    /* 구분선 좌측 정렬 강제 */
    .process-header .text-divider.center {
        margin: 0 0 30px 0;
    }

    .process-line-track { left: 20px; transform: none; }
    .process-marker { left: 20px; transform: translateX(-50%); }
    .process-item.active .process-marker { transform: translateX(-50%) scale(1.3); }
    
    .process-content {
        width: 100%; margin-left: 0; padding-left: 60px;
        text-align: left; transform: translateY(20px);
    }
    .process-item:nth-child(even) .process-content {
        margin-right: 0; text-align: left;
        padding-right: 0; padding-left: 60px;
        transform: translateY(20px);
    }
    .process-item.active .process-content { transform: translateY(0); }
    .process-item { margin-bottom: 80px; }
    .step-title { font-size: 1.6rem; }
}


/* ###################################################################### */
/* [SECTION] Parallax Video Window (Glitch & Distortion Edition) */
/* ###################################################################### */

.video-parallax-section {
    position: relative;
    height: calc(var(--vh, 1vh) * 300); /* 스크롤 호흡 길게 */
    background-color: #000;
    z-index: 5;
}

.vp-sticky-container {
    position: sticky; top: 0;
    width: 100%; 
    height: calc(100vh + env(safe-area-inset-bottom));
    overflow: hidden;
    display: flex; justify-content: center; align-items: center;
}

/* 비디오 래퍼: 글리치의 무대가 되는 곳 */
.vp-video-wrapper {
    position: relative;
    width: 100vw; height: 100vh;
    border-radius: 0; /* JS에서 제어하지만 초기값 설정 */
    overflow: hidden;
    will-change: transform, clip-path, filter;
    /* 초기 상태: 작고 흑백에 가까운 상태 */
    transform: scale(0.3);
    filter: grayscale(100%) contrast(1.2); 
    box-shadow: 0 0 0px rgba(245, 115, 9, 0);
}

.vp-iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;
    min-height: 100vh; min-width: 177.77vh;
    transform: translate(-50%, -50%) scale(1.1); /*  */
    z-index: 1;
    pointer-events: none; /* <--- 이 한 줄이 핵심입니다! */
}

/* [Effect 1] 노이즈 텍스처 (지직거리는 느낌) */
.vp-noise {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.15; z-index: 4; pointer-events: none;
    mix-blend-mode: overlay;
}

/* [Effect 2] 스캔라인 (구형 모니터 느낌) */
.vp-scanlines {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
    background-size: 100% 4px;
    z-index: 5; pointer-events: none;
}

/* [Effect 3] RGB Split 오버레이 (빨강/파랑 잔상) */
.vp-glitch-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: transparent;
    z-index: 2; mix-blend-mode: screen;
    opacity: 0; pointer-events: none;
    transform: scale(1.02);
}
.vp-glitch-overlay.red { background-color: rgba(255, 0, 0, 0.5); transform: translateX(-5px); }
.vp-glitch-overlay.blue { background-color: rgba(0, 255, 255, 0.5); transform: translateX(5px); }

/* 텍스트 컨텐츠 */
.vp-content {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; text-align: center;
    mix-blend-mode: difference; /* 비디오 위에서 반전 효과 */
}

.vp-rolling-mask {
    height: clamp(3rem, 11vw, 9rem);
    overflow: hidden;
}

.vp-word, .vp-fixed-sub {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 11vw, 9rem);
    font-weight: 700; line-height: 1; color: #fff;
    white-space: nowrap;
}

/* [Effect 4] 텍스트 글리치 애니메이션 */
.glitch-text {
    position: relative;
}
.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; /* 배경을 비디오가 아닌 검정으로 덮어서 찢어진 느낌 냄 */
}
.glitch-text::before {
    left: 2px; text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch-text::after {
    left: -2px; text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); transform: skew(0.5deg); }
    5% { clip: rect(70px, 9999px, 71px, 0); transform: skew(0.3deg); }
    10% { clip: rect(29px, 9999px, 83px, 0); transform: skew(-0.5deg); }
    15% { clip: rect(15px, 9999px, 91px, 0); transform: skew(0.1deg); }
    20% { clip: rect(5px, 9999px, 19px, 0); transform: skew(-0.8deg); }
    100% { clip: rect(67px, 9999px, 96px, 0); transform: skew(0deg); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 100px, 0); transform: skew(0.5deg); }
    5% { clip: rect(5px, 9999px, 71px, 0); transform: skew(0.3deg); }
    10% { clip: rect(90px, 9999px, 2px, 0); transform: skew(-0.5deg); }
    15% { clip: rect(1px, 9999px, 11px, 0); transform: skew(0.1deg); }
    20% { clip: rect(30px, 9999px, 60px, 0); transform: skew(-0.8deg); }
    100% { clip: rect(9px, 9999px, 46px, 0); transform: skew(0deg); }
}

@media (max-width: 768px) {
    .vp-video-wrapper { 
        /* 모바일에서는 기본 스케일을 좀 더 키워서 잘 보이게 */
        transform: scale(0.6); 
    }
}



/* ###################################################################### */
/* [NEW SECTION] Focus Reveal Section (Ghost Effect) */
/* ###################################################################### */

.focus-section {
    position: relative;
    /* 스크롤 호흡을 길게 가져가기 위해 높이 확보 */
    height: calc(var(--vh, 1vh) * 250); 
    background-color: #000;
    z-index: 5;
}

.focus-container {
    position: sticky; top: 0;
    width: 100%; 
    height: calc(100vh + env(safe-area-inset-bottom));
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}

.focus-content {
    text-align: center;
    position: relative; z-index: 2;
}

.focus-title {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 700; line-height: 0.9;
    color: #fff; margin-bottom: 40px;
    
    /* [핵심] Ghost Effect 초기값 설정 */
    /* 아예 안 보이는 게 아니라(0), 희미하게 보임(0.2) */
    filter: blur(15px); 
    opacity: 0.2; 
    transform: scale(1.3);
    
    will-change: filter, opacity, transform;
}

.focus-line { display: block; }
.focus-line.text-orange { color: var(--accent-orange); }

.focus-divider {
    width: 0px; height: 2px;
    background-color: #333;
    margin: 0 auto 40px auto;
}

.focus-sub {
    font-size: 1.25rem; color: #888;
    line-height: 1.6; font-weight: 400;
    opacity: 0; transform: translateY(20px);
}

.focus-sub .text-white { color: #fff; font-weight: 700; }

@media (max-width: 768px) {
    .focus-title { font-size: clamp(3.5rem, 14vw, 6rem); margin-bottom: 30px; }
    .focus-sub { font-size: 1.05rem; padding: 0 20px; word-break: keep-all; }
}







/* ###################################################################### */
/* [RE-DESIGN FINAL] 9. RESULTS 섹션 & MODAL (Slider Version) */
/* ###################################################################### */

.results-section {
    background-color: #080808;
    padding: 160px 0;
    position: relative;
    overflow: hidden;
}

.results-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}

/* --- 헤더 스타일 --- */
.results-header {
    text-align: center;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.results-header.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.results-header .section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.results-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: #fff;
    line-height: 1;
    margin-bottom: 30px;
}

.results-desc {
    font-size: 1.1rem;
    color: #888;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.results-header .text-divider.center {
    margin: 0 auto 30px auto;
}

/* --- 필터 버튼 --- */
.portfolio-filter-wrap {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.pf-filter-btn {
    background: transparent;
    border: 1px solid #333;
    color: #888;
    padding: 12px 28px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0; 
}

.pf-filter-btn.active {
    border-color: var(--accent-orange);
    background-color: var(--accent-orange);
    color: #fff;
}

/* --- 그리드 아이템 --- */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.pf-item {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: #111;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0; 
    border: 1px solid #222;
    transition: border-color 0.3s ease, transform 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.pf-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease;
    filter: brightness(0.9);
}

.pf-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.pf-cat {
    font-size: 0.75rem;
    color: var(--accent-orange);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
    display: inline-block;
}

.pf-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.pf-icon-multi {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background-color: var(--accent-orange);
    padding: 10px 12px;
    font-size: 0.9rem;
    border-radius: 0;
    z-index: 5;
}

/* --- Load More 버튼 --- */
.results-footer { text-align: center; }

.btn-tech-outline {
    display: inline-block;
    padding: 18px 50px;
    background: transparent;
    border: 1px solid #444;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0;
}

/* --- [MODAL STYLE] --- */
.tech-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.tech-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }

.modal-backdrop {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px);
}

.modal-window {
    position: relative; z-index: 2;
    width: 90%; max-width: 1200px; height: 70vh;
    background-color: #111; border: 1px solid #333;
    display: flex; flex-direction: column;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 1);
    transform: scale(0.95);
    border-radius: 0;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.tech-modal.active .modal-window { transform: scale(1); }

.modal-close-btn {
    position: absolute; top: -50px; right: 0;
    color: #fff; font-size: 2rem; background: none; border: none;
    cursor: pointer; transition: color 0.3s;
}

.modal-layout { display: flex; width: 100%; height: 100%; }

.modal-visual {
    flex: 1.5; background-color: #000; position: relative;
    overflow: hidden; border-right: 1px solid #222;
}

.modal-img-wrapper {
    width: 100%; height: 100%;
    position: relative;
    overflow: hidden;
}

.modal-slider-track {
    display: flex; width: 100%; height: 100%;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.modal-slide-item {
    min-width: 100%; width: 100%; height: 100%; flex-shrink: 0;
}

.modal-slide-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.modal-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 60px; height: 60px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff; font-size: 1.2rem; cursor: pointer; z-index: 10;
    display: flex; justify-content: center; align-items: center; 
    transition: background-color 0.3s, border-color 0.3s;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
}
.modal-arrow.prev { left: 0; }
.modal-arrow.next { right: 0; }

.modal-dots {
    position: absolute; bottom: 20px; left: 50%;
    transform: translateX(-50%); display: flex; gap: 8px; z-index: 10;
}
.m-dot {
    width: 6px; height: 6px; background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0; cursor: pointer; transition: all 0.3s;
}
.m-dot.active { background-color: var(--accent-orange); transform: scale(1.4); }

.modal-info {
    flex: 1; padding: 50px; display: flex; flex-direction: column;
    background-color: #111;
}

.modal-header { margin-bottom: 40px; }
.modal-cat {
    font-size: 0.9rem; color: var(--accent-orange); font-weight: 700;
    display: block; margin-bottom: 10px; letter-spacing: 2px;
}
.modal-title {
    font-family: var(--font-heading); font-size: 1.5rem;
    color: #fff; line-height: 1.1;
}

/* [수정] 2개만 나오도록 그리드 최적화 */
.modal-specs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    padding: 20px 0; border-top: 1px solid #222; border-bottom: 1px solid #222;
    margin-bottom: 30px;
}
.spec-row { display: flex; flex-direction: column; }
.spec-label { font-size: 0.8rem; color: #555; margin-bottom: 5px; font-weight: 700; }
.spec-value { font-size: 1rem; color: #ccc; font-weight: 500;}

.modal-desc {
    color: #888; font-size: 0.95rem; line-height: 1.7; flex-grow: 1;
}

.modal-cta-btn {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px; background-color: #1a1a1a; color: #fff;
    font-weight: 700; font-size: 1rem; border: 1px solid #333; transition: 0.3s;
    border-radius: 0; 
}


/* [Hover Effects] */
@media (hover: hover) and (pointer: fine) {
    .pf-filter-btn:hover {
        border-color: var(--accent-orange);
        background-color: var(--accent-orange);
        color: #fff;
    }
    .pf-item:hover {
        border-color: #444;
        transform: translateY(-5px);
    }
    .pf-item:hover .pf-thumb {
        transform: scale(1.1);
        filter: brightness(1.1);
    }
    .pf-item:hover .pf-info-overlay {
        opacity: 1;
        transform: translateY(0);
    }
    .btn-tech-outline:hover {
        border-color: var(--accent-orange);
        background-color: var(--accent-orange);
        color: #fff;
    }
    .modal-close-btn:hover { color: var(--accent-orange); }
    .modal-arrow:hover { 
        background-color: var(--accent-orange); 
        border-color: var(--accent-orange); 
    }
    .modal-cta-btn:hover { 
        background-color: var(--accent-orange); 
        border-color: var(--accent-orange); 
    }
}

/* [Mobile Layout] */
@media (max-width: 1024px) {
    .pf-grid { grid-template-columns: repeat(2, 1fr); }
    .modal-layout { flex-direction: column; overflow-y: auto; }
    .modal-visual { height: 300px; flex: none; border-right: none; border-bottom: 1px solid #222; }
    .modal-window { height: 80vh; max-height: 80vh; }
    .modal-info { display: block; height: auto; padding: 16px; }
    .modal-desc { flex-grow: 0; margin-bottom: 40px; }
    .modal-cta-btn { margin-top: auto; }
}

@media (max-width: 768px) {
    .results-container { padding: 0 16px; }
    .results-header { text-align: left; }
    .results-header .text-divider.center { margin: 0 0 30px 0; }
    .results-title { font-size: 2.5rem; }
    .results-desc { margin: 0; max-width: 100%; }

    .portfolio-filter-wrap {
        justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
        margin-left: -16px; margin-right: -16px; padding: 0 16px; gap: 10px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .portfolio-filter-wrap::-webkit-scrollbar { display: none; }
    .pf-filter-btn { flex: 0 0 auto; font-size: 0.85rem; padding: 10px 20px; }

    .pf-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px; }
    
    .pf-info-overlay {
        opacity: 1; transform: translateY(0);
        padding: 30px 20px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
    }
    .pf-thumb { filter: brightness(1); }

    .modal-close-btn { 
        top: 10px; right: 10px; z-index: 20; 
        background: rgba(0,0,0,0.6); width: 40px; height: 40px; 
        border-radius: 0; 
        font-size: 1.5rem; display: flex; justify-content: center; align-items: center; 
    }
}







/* ###################################################################### */
/* [SECTION] BLOG SECTION (Tech-Log Style) */
/* ###################################################################### */

.blog-section {
    background-color: #050505;
    padding: 140px 0;
    position: relative;
    border-top: 1px solid #1a1a1a;
    z-index: 5;
}

.blog-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

/* --- 헤더 스타일 (PC: 중앙 정렬) --- */
.blog-header {
    text-align: center; /* PC 기본: 중앙 정렬 */
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    border-bottom: 1px solid #222;
    padding-bottom: 20px;
}
.blog-header.is-visible { opacity: 1; transform: translateY(0); }

.blog-heading {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 30px; /* PC: 적당한 간격 */
    margin-top: 15px;
}

.blog-desc {
    font-size: 1.05rem; 
    color: #888;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto; /* PC: 설명글 중앙 정렬 */
    word-break: keep-all;
}

/* 구분선 공통 스타일 (PC: 중앙) */
.blog-header .text-divider.center {
    margin: 0 auto 30px auto; 
}

/* --- 테크 로그 리스트 스타일 --- */
.blog-list-wrapper {
    width: 100%;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    transition-delay: 0.2s;
}
.blog-list-wrapper.is-visible { opacity: 1; transform: translateY(0); }

.blog-item {
    display: block;
    padding: 25px 0;
    border-bottom: 1px solid #1a1a1a;
    transition: background-color 0.3s ease, padding-left 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.blog-item-inner {
    display: grid;
    /* [레이아웃] 인덱스(날짜) | 제목(내용) | 배지+화살표 */
    grid-template-columns: 120px 1fr 100px;
    align-items: center;
    gap: 30px;
}

/* 1. 날짜/인덱스 영역 */
.blog-date-box {
    display: flex;
    flex-direction: column;
}
.blog-index {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #333;
    transition: color 0.3s;
}
.blog-date-text {
    font-size: 0.8rem;
    color: #555;
    margin-top: 5px;
}

/* 2. 콘텐츠 영역 (제목+요약) */
.blog-content {
    overflow: hidden; /* 넘치는 텍스트 숨김 필수 */
}

.blog-post-title {
    font-family: var(--font-body);
    font-size: 1.25rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 6px;
    transition: color 0.3s;

    /* [핵심] 긴 제목 한 줄로 자르기 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.blog-post-snippet {
    font-size: 0.9rem;
    color: #777;
    /* [핵심] 요약글 한 줄로 자르기 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
}

/* 3. 메타 영역 (배지 + 화살표) */
.blog-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.blog-tag {
    font-size: 0.7rem;
    color: #000;
    background-color: var(--accent-orange);
    padding: 3px 6px;
    font-weight: 700;
    border-radius: 2px;
}

.blog-arrow {
    font-size: 1rem;
    color: #444;
    transition: transform 0.3s, color 0.3s;
}

/* --- Hover Effects (PC Only) --- */
@media (hover: hover) and (pointer: fine) {
    .blog-item:hover {
        background-color: #0e0e0e;
        padding-left: 20px;
    }
    .blog-item:hover .blog-index { color: var(--accent-orange); }
    .blog-item:hover .blog-post-title { color: var(--accent-orange); }
    .blog-item:hover .blog-arrow {
        color: #fff;
        transform: translateX(5px);
    }
}

/* --- Loading & Error --- */
.blog-loading {
    padding: 60px 0;
    text-align: center;
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font-family: var(--font-heading);
    letter-spacing: 2px;
}
.loading-spinner {
    width: 30px; height: 30px;
    border: 2px solid #333;
    border-top-color: var(--accent-orange);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.blog-error {
    color: #888;
    text-align: center;
    padding: 40px;
}


/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
    .blog-section {
        padding: 80px 0;
    }
    .blog-container {
        padding: 0 16px;
    }

    /* [중요] 헤더 좌측 정렬 */
    .blog-header {
        text-align: left;
        margin-bottom: 40px;
    }
    
    .blog-heading { 
        font-size: 2.5rem; 
        /* [수정] 기존 10px -> 30px로 변경하여 줄과 간격 확보 */
        margin-bottom: 30px; 
    }
    
    .blog-desc { 
        margin: 0; /* 중앙 정렬 해제 */
        max-width: 100%; 
    }

    /* [중요] 구분선 좌측 정렬 강제 */
    .blog-header .text-divider.center {
        margin: 0 0 30px 0; 
    }

    /* 리스트 아이템 세로 배치 */
    .blog-item {
        padding: 20px 0;
    }
    
    .blog-item-inner {
        grid-template-columns: 1fr auto; /* 제목영역 | 화살표 */
        gap: 10px;
    }

    /* 날짜 박스 */
    .blog-date-box {
        grid-column: 1 / -1; /* 전체 너비 사용 */
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
    }
    .blog-index {
        font-size: 0.9rem;
        color: var(--accent-orange);
        font-family: var(--font-body);
        font-weight: 700;
    }
    .blog-date-text {
        margin-top: 0;
        font-size: 0.8rem;
    }

    /* 콘텐츠 영역 */
    .blog-content {
        grid-column: 1 / 2; /* 첫번째 컬럼 */
    }

    .blog-post-title {
        font-size: 1.1rem;
        /* 모바일에서는 2줄까지 허용 후 말줄임 (표준 속성 추가) */
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2; /* 표준 속성 추가 (경고 제거용) */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
    }

    .blog-post-snippet {
        display: none; /* 모바일에서 내용 숨김 */
    }

    /* 메타 영역 */
    .blog-meta {
        grid-column: 2 / 3; /* 두번째 컬럼 (오른쪽) */
        flex-direction: column;
        gap: 5px;
    }
    .blog-tag {
        font-size: 0.65rem;
        padding: 2px 4px;
    }
    .blog-arrow {
        font-size: 0.9rem;
    }
}


/* ###################################################################### */
/* [NEW SECTION] Infinite Marquee */
/* ###################################################################### */

.marquee-section {
    background-color: #000; padding: 60px 0; overflow: hidden;
    border-top: 1px solid #222; border-bottom: 1px solid #222;
    position: relative; z-index: 2;
}

.marquee-track {
    display: flex; width: fit-content; gap: 0;
    will-change: transform; 
}

.marquee-group {
    flex-shrink: 0; display: flex; align-items: center;
    gap: 4vw; padding-right: 4vw; white-space: nowrap;
}

.mq-text {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 7vw, 6rem); font-weight: 700;
    color: #222; line-height: 1; transition: color 0.3s ease;
    -webkit-text-stroke: 1px #444; 
}

.mq-text.text-orange { color: var(--accent-orange); -webkit-text-stroke: 0; }

.mq-icon {
    font-size: 2rem; color: var(--accent-orange);
    display: flex; align-items: center;
}

/* [PC Only] 마퀴 호버 */
@media (hover: hover) and (pointer: fine) {
    .marquee-section:hover .mq-text {
        color: #fff; -webkit-text-stroke: 0;
        text-shadow: 0 0 20px rgba(255,255,255,0.3);
    }
}

@media (max-width: 768px) {
    .marquee-section { padding: 40px 0; }
    .mq-icon { font-size: 1.5rem; }
}


/* ###################################################################### */
/* [RE-DESIGN] FAQ 섹션 */
/* ###################################################################### */

.faq-section {
    background-color: #111; padding: 140px 0; position: relative;
}

.faq-container {
    max-width: 1400px; margin: 0 auto; padding: 0 30px;
}

/* --- 헤더 스타일 --- */
.faq-header {
    text-align: center; /* PC 기본: 중앙 정렬 */
    margin-bottom: 60px;
    opacity: 0; transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.faq-title {
    font-family: var(--font-heading); font-size: 3rem; color: #fff;
    line-height: 1.2; margin-top: 10px; margin-bottom: 30px;
}

/* 구분선 공통 클래스 사용 (.text-divider) */

/* --- 아코디언 스타일 --- */
.faq-wrapper { display: flex; flex-direction: column; gap: 20px; }

.faq-item {
    background-color: #111; border: 1px solid #222; border-radius: 0; 
    opacity: 0; transform: translateY(30px);
    transition: border-color 0.3s ease, opacity 0.6s ease-out, transform 0.6s ease-out;
}

.faq-header.is-visible, .faq-item.is-visible { opacity: 1; transform: translateY(0); }

.faq-question {
    width: 100%; display: flex; justify-content: space-between;
    align-items: center; padding: 30px;
    background: none; border: none; cursor: pointer;
    text-align: left; transition: background-color 0.3s ease;
}

.faq-item.active .faq-question { background-color: #161616; }

.q-text {
    font-size: 1.2rem; font-weight: 700; color: #fff;
    font-family: var(--font-body); transition: color 0.3s ease;
}

.q-icon {
    color: var(--accent-orange); font-size: 1rem;
    transition: transform 0.3s ease;
}

.faq-item.active .q-icon { transform: rotate(45deg); }

.faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #222;
}

.a-content {
    padding: 40px 30px 40px 30px;
    color: #aaa; font-size: 1.05rem;
    line-height: 1.8; border-top: 1px solid transparent;
}

/* [PC Only] FAQ 호버 */
@media (hover: hover) and (pointer: fine) {
    .faq-item:hover { border-color: #333; }
    .faq-question:hover .q-text { color: var(--accent-orange); }
}

/* --- 반응형 (모바일) --- */
@media (max-width: 768px) {
    .faq-section { padding: 80px 0; }
    .faq-container { padding: 0 16px; }
    
    /* 헤더 좌측 정렬 */
    .faq-header { 
        text-align: left; 
    }

    /* 구분선 좌측 정렬 강제 */
    .faq-header .text-divider.center {
        margin: 0 0 30px 0;
    }

    .faq-title { font-size: 2.2rem; }
    
    .faq-question { padding: 20px; }
    .q-text { font-size: 1rem; padding-right: 15px; }
    .a-content { padding: 30px 20px 30px 20px; font-size: 0.95rem; }
}


/* ###################################################################### */
/* [SECTION START] 10. CONTACT US 섹션 (PC/Mobile ALL Left Align) */
/* ###################################################################### */

.contact-section {
    background-color: #050505;
    padding: 120px 0;
    position: relative;
    z-index: 0;
}

.contact-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

/* [중요] 헤더 무조건 왼쪽 정렬 */
.contact-header {
    text-align: left; 
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.contact-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 30px;
}

/* [중요] 구분선 왼쪽 정렬 (기본 클래스 사용) */
.contact-header .text-divider {
    margin: 0 0 30px 0; /* 왼쪽 마진 0 */
}

.contact-sub-desc {
    font-size: 1.1rem;
    color: #888;
    margin: 0; /* 중앙 정렬 방지 */
    max-width: 100%;
}

.contact-wrapper {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.contact-info {
    flex: 0 0 400px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.info-card-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    background-color: #111;
    padding: 30px;
    border-left: 3px solid var(--accent-orange);
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.3s ease;
}

.card-icon {
    font-size: 1.2rem;
    color: var(--accent-orange);
    margin-top: 2px;
}

.card-content {
    flex: 1;
    text-align: left; /* 내용 왼쪽 정렬 */
}

.card-label {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: #666;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.card-value {
    font-size: 1.05rem;
    color: #fff;
    line-height: 1.5;
}

.card-value-link {
    font-size: 1.05rem;
    color: #fff;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.card-value-link:hover { color: var(--accent-orange); }
.link-icon-sm { font-size: 0.8rem; opacity: 0.7; }

.phone-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    padding-bottom: 8px;
    border-bottom: 1px solid #222;
    white-space: nowrap; 
}

.pl-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pl-tag { font-size: 0.8rem; color: #888; font-weight: 500; }

.pl-row a { color: #ccc; transition: color 0.3s; }
.pl-row.main a { color: #fff; font-weight: 700; font-size: 1.1rem; }

.email-link-contact {
    color: #ccc;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.3s;
}
.email-link-contact:hover { color: var(--accent-orange); }

/* 폼 스타일 */
.contact-form-box {
    flex: 1;
    background-color: #111;
    padding: 50px;
    border: 1px solid #222;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    text-align: left; /* 폼 내부 왼쪽 정렬 */
}

.form-header {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 30px;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
    display: inline-block;
}

.form-row { display: flex; gap: 20px; }
.form-group { margin-bottom: 25px; width: 100%; }
.form-group.half { width: 50%; }

.form-group label {
    display: block; 
    font-size: 0.85rem; 
    color: #888; 
    margin-bottom: 8px; 
}

.contact-form input, .contact-form textarea {
    width: 100%;
    background-color: #1a1a1a;
    border: 1px solid #333;
    padding: 14px;
    color: #fff;
    font-size: 1rem;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.3s;
    border-radius: 0;
}

.contact-form input:focus, .contact-form textarea:focus {
    border-color: var(--accent-orange);
}

.contact-form textarea { resize: vertical; min-height: 120px; }

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 10px;
    row-gap: 5px;
    width: 100%;
}

.cat-btn input { display: none; }
.cat-btn span {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    padding: 14px 5px;
    background-color: #1a1a1a;
    border: 1px solid #333;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.cat-btn input:checked + span {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
    font-weight: 700;
}

.cat-btn.full-width { grid-column: 1 / -1; }

.btn-submit {
    width: 100%;
    padding: 16px;
    background-color: #fff;
    color: #000;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    margin-top: 10px;
}

/* 호버 효과 */
@media (hover: hover) and (pointer: fine) {
    .info-card:hover { transform: translateX(10px); background-color: #161616; }
    .pl-row a:hover { color: var(--accent-orange); }
    .btn-submit:hover { background-color: var(--accent-orange); color: #fff; }
}

.contact-header.is-visible, .contact-info.is-visible, .contact-form-box.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 반응형 */
@media (max-width: 1024px) {
    .contact-wrapper { flex-direction: column; }
    .contact-info { flex: none; width: 100%; }
    .contact-form-box { width: 100%; padding: 16px; }
}

@media (max-width: 768px) {
    .contact-section { padding: 80px 0; }
    .contact-container { padding: 0 16px; }
    
    /* 모바일에서도 왼쪽 정렬 강제 */
    .contact-header { text-align: left; }
    .contact-title { font-size: 2.2rem; }
    .contact-header .text-divider { margin: 0 0 30px 0; }

    .form-row { flex-direction: column; gap: 0; }
    .form-group.half { width: 100%; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .info-card { padding: 20px; }
    .pl-row { font-size: 0.95rem; }
    .btn-submit { margin-bottom: 20px; }
}

/* ==================================================================
   [NEW] FILE UPLOAD STYLE (Cloud Design + External List)
   ================================================================== */

.file-upload-container {
    width: 100%;
    position: relative;
}

/* --- 1. 드롭존 (구름 박스) --- */
.file-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 200px; /* 높이 넉넉하게 */
    background-color: #121212;
    border: 2px dashed #444;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 30px 20px;
    text-align: center;
    position: relative; /* 카운터 배치를 위해 relative */
    margin-bottom: 15px; /* 리스트와 간격 */
}

/* 호버 효과 (PC만) */
@media (hover: hover) and (pointer: fine) {
    .file-drop-zone:hover {
        border-color: var(--accent-orange);
        background-color: #1a1a1a;
    }
}

/* 10장 꽉 찼을 때 (박스만 비활성화) */
.file-drop-zone.full {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #333;
    pointer-events: none; /* 박스 클릭 방지 */
}

/* 카운터 (박스 내부 우측 상단) */
.inner-counter {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 0.9rem;
    color: var(--accent-orange);
    font-weight: 700;
}

/* 내부 텍스트 디자인 (구름 아이콘 복구) */
.upload-msg-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-icon {
    font-size: 3rem;
    color: #555;
    margin-bottom: 10px;
}

.upload-title {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 700;
    font-family: var(--font-heading);
    margin-bottom: 5px;
}

.upload-desc {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.6;
}

/* --- 2. 파일 리스트 (박스 하단 외부) --- */
.file-list-ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 개별 파일 카드 (어두운 박스 스타일) */
.file-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1a1a1a; /* 배경색 살짝 밝게 */
    border: 1px solid #333;
    padding: 15px 20px;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #ddd;
    animation: fadeIn 0.3s ease;
}

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

.file-info-wrap {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

.file-icon-sm {
    margin-right: 15px;
    color: var(--accent-orange); /* 아이콘 색상 복구 */
    font-size: 1.2rem;
    flex-shrink: 0;
}

.fname-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    font-weight: 500;
}

.fext-text { 
    white-space: nowrap; 
    flex-shrink: 0; 
    color: #888; 
    margin-left: 2px;
}

/* 삭제(X) 버튼 스타일 */
.file-remove-btn {
    background: #333;
    border: none;
    color: #aaa;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.file-remove-btn:hover {
    background-color: #444;
    color: #fff;
}



/* ==================================================================
   [NEW] SUBMISSION OVERLAY (With Animation)
   ================================================================== */
.submission-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    backdrop-filter: blur(5px);
}

.submission-overlay.active { opacity: 1; visibility: visible; }

.sub-content {
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    width: 100%; max-width: 500px; padding: 0 20px;
}

/* 로딩 스피너 */
.sub-spinner {
    width: 60px; height: 60px;
    border: 5px solid #222;
    border-top-color: var(--accent-orange);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 메인 타이틀 (SENDING...) */
.sub-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #fff;
    letter-spacing: 2px;
}

/* [핵심] SENDING 뒤에 점 3개 움직이는 애니메이션 */
.loading-dots::after {
    content: '.';
    animation: dots 1.5s steps(4, end) infinite;
    display: inline-block;
    width: 0; /* 공간 확보 방지 */
    text-align: left;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60% { content: '...'; }
    80%, 100% { content: ''; }
}

/* 설명 문구 (페이드 효과용 transition 추가) */
.sub-desc {
    font-size: 1.1rem;
    color: #888;
    font-weight: 500;
    min-height: 28px; /* 글자가 바뀌어도 높이 유지 */
    transition: opacity 0.5s ease-in-out; /* 부드러운 전환 핵심 */
    opacity: 1;
}

/* 페이드 아웃 상태 클래스 */
.sub-desc.fade-out { opacity: 0; }

/* 성공 아이콘 */
.sub-icon-success {
    font-size: 4rem; color: var(--accent-orange);
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}