@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* --- 디자인 토큰 (Design Variables) --- */
:root {
    /* Colors - Cleaner & more minimal */
    --color-primary-cyan: #0AFFEF;
    --color-primary-blue: #1D8BDF;
    --color-bg-white: #FFFFFF;
    --color-bg-gray: #FAFAFA;
    /* Very light gray for subtle contrast */
    --color-bg-light: #F4F5F7;

    --color-text-main: #1A1A1A;
    /* Solid Dark */
    --color-text-sub: #666666;
    /* Clean Gray */
    --color-text-light: #999999;
    --color-border: #EAEAEA;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-cyan) 0%, var(--color-primary-blue) 100%);

    /* Typography - Pretendard */
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;

    /* Smooth Shadows for Clean Look */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Layout */
    --container-max-width: 1140px;
    /* Slightly narrower for focused reading */
    --section-padding-y: 160px;
    /* More breathing room */
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
}

/* --- 초기화 및 기본 설정 (Reset & Base) --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-family) !important;
    color: var(--color-text-main);
    background-color: var(--color-bg-white);
    line-height: 1.6;
    letter-spacing: -0.02em !important;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
    /* Korean word breaking */
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 80px;
    width: 100%;
}

@media (max-width: 1400px) {
    .container-wide { padding: 0 50px; }
}

@media (max-width: 1024px) {
    .container-wide { padding: 0 30px; }
}

@media (max-width: 768px) {
    .container-wide { padding: 0 24px; }
}

.section-padding {
    padding: var(--section-padding-y) 0;
}

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

.text-white { color: #ffffff !important; }
.text-light { color: #A0AABF !important; }

/* Business Cheatkeys Grid */
.cheatkey-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
}

/* 쇼핑몰 전용 패키지 그룹 */
#benefits,
.benefits-grid-section {
    background-image: url('Data/Bg/Main_Bg_4.png') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    position: relative;
    overflow: hidden;
}

.cheatkey-group {
    grid-column: span 2;
    position: relative;
    border: 1px dashed rgba(29, 139, 223, 0.4);
    border-radius: 0 !important;
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    background: rgba(29, 139, 223, 0.04);
}

.cheatkey-group-title {
    position: absolute;
    top: -12px;
    left: 24px;
    background: #fafafa;
    color: var(--color-primary-blue);
    padding: 0 10px;
    font-size: 0.85rem;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .cheatkey-grid { grid-template-columns: repeat(2, 1fr); }
    .cheatkey-group { grid-column: span 2; }
}

@media (max-width: 768px) {
    .cheatkey-grid { grid-template-columns: repeat(2, 1fr); }
    .cheatkey-group { grid-column: span 2; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px; }
}

.cheatkey-card {
    background: #fafafa !important; /* 각 혜택 카드 연한 그레이 배경 적용 */
    border: none !important;
    border-radius: 0 !important;
    padding: 32px 24px;
    position: relative;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.cheatkey-card:hover {
    background: #ffffff !important;
    transform: translateY(-6px);
    border-color: #111111 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

.cheatkey-card .icon-box {
    width: 56px;
    height: 56px;
    background: #ffffff !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 1.75rem;
    color: #111111 !important; /* 일반 카드 아이콘 색상: 블랙 */
    transition: all var(--transition-normal);
}

.cheatkey-card.highlight .icon-box {
    color: #1d8bdf !important; /* 강조 카드 아이콘 색상: 블루 */
}

.cheatkey-card.highlight .icon-box i {
    color: #1d8bdf !important;
}

.cheatkey-card:hover .icon-box {
    background: #111111 !important;
    color: #ffffff !important;
}

.cheatkey-card:hover .icon-box i {
    color: #ffffff !important;
}

.cheatkey-card h4 {
    color: #111111 !important;
    font-size: 1.15rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.cheatkey-card p {
    color: #64748b !important;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Free Badge & Number Badge for emphasized items */
.cheatkey-num {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.05em;
}

.cheatkey-card.highlight .cheatkey-num {
    color: #1d8bdf !important;
}

.free-tag {
    position: absolute;
    top: 24px;
    right: 24px;
    background: var(--gradient-primary);
    color: #252525;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 10px rgba(10, 255, 239, 0.3);
}

.cheatkey-card.highlight {
    border: 1px solid rgba(29, 139, 223, 0.4) !important; /* 강조 카드 테두리 유지 */
    background: #fafafa !important;
}

.bg-gray {
    background-color: var(--color-bg-gray);
}

.mt-xl {
    margin-top: 80px;
}

/* --- 공통 컴포넌트 (Typography & Components) --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header {
    margin-bottom: 80px;
}

.section-title {
    font-size: 2.75rem;
    margin-bottom: 16px;
    font-weight: 600;
}

.section-sub {
    font-size: 1.125rem;
    color: var(--color-text-sub);
    font-weight: 400;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 9999px; /* 둥글리기 최대로 변경 */
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    outline: none;
}

.btn-lg {
    padding: 18px 40px;
    font-size: 1.125rem;
}

.btn-primary {
    background-color: var(--color-primary-blue);
    color: var(--color-bg-white);
}

.btn-primary:hover {
    background-color: #1271B5;
    transform: translateY(-2px);
}

.btn-quote-nav {
    padding: 7px 18px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    color: #111111 !important;
    background-color: #f1f3f5 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-quote-nav:hover {
    background-color: #e2e8f0 !important;
    color: #000000 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-2px);
}

.quote-banner-card {
    width: 80%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    background: linear-gradient(135deg, #111111 0%, #1c2e30 100%);
    padding: 80px 40px;
    border-radius: 10px;
}

/* --- 하단 CTA 섹션 (Final CTA) --- */
.final-cta,
.final-brand-section {
    background: url('./DATA/Bg/Main_Bg_3.png') no-repeat center center / cover !important;
    position: relative;
    overflow: hidden;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-elegant-white:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(255, 255, 255, 0.3), 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

.btn-elegant-white:hover i {
    transform: translateX(5px);
}

/* --- 5개 미니멀 세로 직사각형 가로 아코디언 서비스 모듈 (블랙 오버레이 & 호버 선명 이미지 & 하단 배치) --- */
.accordion-services-container {
    display: flex;
    gap: 16px;
    width: 100%;
    min-height: 480px;
    align-items: stretch;
}

.accordion-card {
    flex: 1;
    background-color: #111111;
    border: none !important;
    border-radius: 0 !important;
    padding: 32px 24px 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 모든 텍스트 하단 배치 */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.55s cubic-bezier(0.25, 1, 0.4, 1), box-shadow 0.4s ease;
}

/* 평소 어두운 블랙 가림막 오버레이 */
.acc-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.72);
    z-index: 1;
    transition: background 0.45s ease;
}

/* 마우스 호버 시 가로 확장 및 블랙 가림막이 투명해지며 이미지 선명 노출 */
.accordion-services-container:hover .accordion-card {
    flex: 0.75;
}

.accordion-services-container .accordion-card:hover {
    flex: 2.2 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.accordion-card:hover .acc-overlay {
    background: rgba(0, 0, 0, 0.25) !important;
}

/* 내부 콘텐츠 컨테이너 하단 배치 */
.acc-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
}

.acc-content-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px; /* 타이틀과 요소들 간격 바짝 좁힘 */
    margin-top: auto;
    justify-content: flex-end;
}

/* 맞춤형 풀패키지 민트(#0AFFEF) 강조 스타일 */
.featured-acc-card {
    border-left: 3px solid #0AFFEF !important; /* 민트(#0AFFEF) 강조 테두리 */
}

.featured-acc-card .acc-link {
    color: #0AFFEF !important; /* 민트(#0AFFEF) 포인트 링크 색상 */
}

.featured-acc-card:hover .acc-title {
    color: #0AFFEF !important;
}

/* 타이틀 세미볼드 600 (흰색) */
.acc-title {
    font-size: 1.5rem;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 설명글: 평소 투명 숨김 (마우스 호버 시 서서히 피어남) */
.acc-desc {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.88) !important;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    opacity: 0 !important;
    max-height: 0 !important;
    transform: translateY(8px);
    transition: opacity 0.45s ease 0.08s, transform 0.45s cubic-bezier(0.25, 1, 0.4, 1) 0.08s, max-height 0.45s ease, margin 0.3s ease !important;
    pointer-events: none;
    overflow: hidden;
}

/* 마우스 호버 시 서서히 페이드인 나타남 */
.accordion-card:hover .acc-desc {
    opacity: 1 !important;
    max-height: 80px !important;
    transform: translateY(0) !important;
    margin-top: 4px;
    margin-bottom: 4px;
    pointer-events: auto;
}

/* 밑줄 제거된 서비스 보기 링크 (타이틀과 밀착) */
.acc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: color 0.3s ease, gap 0.3s ease;
    margin-top: 4px; /* 타이틀과 밀착 */
    width: max-content;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.acc-link:hover {
    color: #38bdf8 !important;
    gap: 14px;
}

/* 반응형 태블릿/모바일 */
@media (max-width: 991px) {
    .accordion-services-container {
        flex-direction: column;
        min-height: auto;
    }
    .accordion-services-container:hover .accordion-card,
    .accordion-services-container .accordion-card:hover {
        flex: 1 !important;
    }
}

/* --- PC 상단바 우측 정렬 및 모바일 전용 그룹 PC 숨김 (겹침 현상 완전 해결) --- */
.mobile-expanded-group {
    display: none !important;
}

.nav-right-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* =============================================
   모바일 반응형 (max-width: 768px) 헤더
============================================= */
@media (max-width: 768px) {

    header.navbar,
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1005 !important;
        background: transparent !important;
        border: none !important;
        padding: 16px 0 !important;
        box-sizing: border-box !important;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* 일반 모바일 고정 헤더바 (현재 크기와 여백 그대로 유지) */
    .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        max-width: 1200px !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 16px !important; /* 고정 헤더바 여백 유지 */
        margin: 0 auto !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* 스크롤 후 나타나는 모바일 플로팅 알약 캡슐 바 전용 (간격 극대화) */
    .navbar.scrolled {
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 6px) !important; /* 캡슐 바를 화면 양 끝까지 최대로 확장 */
        max-width: 100% !important;
        padding: 6px 0 !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        border-radius: 9999px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
        height: 58px !important;
        margin: 0 auto !important;
    }

    /* 스크롤 헤더바 전용: 로고와 더보기 버튼 간격 극대화 */
    .navbar.scrolled .nav-container {
        padding: 0 6px !important; /* 내부 패딩 축소로 로고와 더보기 버튼 간격 극대화 */
    }

    .nav-container .logo {
        margin-right: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .nav-container .logo img {
        height: 44px !important; /* 로고 사이즈 약간 더 큼직하게 확대 */
    }

    /* 로고 + 햄버거만 노출 */
    .nav-links:not(.active),
    .nav-right-group {
        display: none !important;
    }

    /* 햄버거 버튼 */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 1.9rem !important; /* 더보기 버튼 크기 약간 더 큼직하게 확대 */
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 4px;
        z-index: 1006 !important;
        transition: color 0.3s ease !important;
    }

    /* 메인홈 스크롤 전: 햄버거 흰색 */
    body.main-home .navbar:not(.scrolled) .mobile-menu-btn {
        color: #ffffff !important;
    }

    /* 서브페이지 또는 스크롤 후: 햄버거 블랙 */
    body:not(.main-home) .mobile-menu-btn,
    .navbar.scrolled .mobile-menu-btn {
        color: #111111 !important;
    }

    /* 드롭다운 메뉴 (열렸을 때) */
    .nav-links.active {
        display: flex !important;
        position: fixed !important;
        top: 72px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 28px) !important;
        max-height: calc(100vh - 90px) !important;
        background: #ffffff !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 20px 30px !important;
        border-radius: 20px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid #edf2f7 !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
    }

    /* 메뉴 항목 */
    .nav-links.active > a,
    .navbar.scrolled .nav-links.active > a {
        display: block !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: #111111 !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid #f0f2f5 !important;
        text-align: center !important;
        width: 100% !important;
        text-decoration: none !important;
    }

    .nav-links.active > a.active {
        color: #1d8bdf !important;
        font-weight: 700 !important;
    }

    /* 하단 버튼 그룹 */
    .nav-links.active .mobile-expanded-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
        margin-top: 10px !important;
        padding-top: 24px !important;
    }

    .nav-links.active .mobile-expanded-btns {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .nav-links.active .mobile-expanded-btns a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 18px !important;
        border-radius: 9999px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        color: #111111 !important;
        text-decoration: none !important;
        border-bottom: none !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
        white-space: nowrap !important;
        transition: all 0.25s ease !important;
    }

    .nav-links.active .mobile-expanded-btns a:hover {
        background: #f7fafc !important;
        border-color: #cbd5e0 !important;
    }

    /* SNS 아이콘 */
    .nav-links.active .mobile-expanded-sns {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        padding-top: 8px !important;
    }

    .nav-links.active .mobile-expanded-sns a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #f7fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #4a5568 !important;
        font-size: 1.25rem !important;
        border-bottom: none !important;
        padding: 0 !important;
    }
}

    /* 상단 메뉴 항목들 (넥시오, 작업물, 자주하는 질문) - 중앙 정렬 */
    .nav-links.active > a {
        display: block !important;
        font-size: 1.15rem !important;
        font-weight: 600 !important;
        color: #111111 !important;
        padding: 18px 0 !important;
        border-bottom: 1px solid #f0f2f5 !important;
        text-align: center !important; /* 텍스트 중앙정렬 */
        width: 100% !important;
        text-decoration: none !important;
    }

    /* 더보기 메뉴 하단 그룹 (빠른견적, 1:1문의하기, SNS 아이콘) */
    .nav-links.active .mobile-expanded-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
        margin-top: 10px !important;
        padding-top: 24px !important;
    }

    /* 빠른견적 / 1:1문의하기: PC버전과 100% 동일 디자인으로 가로 1줄에 2개 나란히 배치 */
    .nav-links.active .mobile-expanded-btns {
        display: flex !important;
        flex-direction: row !important; /* 가로 나란히 배치 */
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .nav-links.active .mobile-expanded-btns a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 18px !important;
        border-radius: 9999px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        color: #111111 !important;
        text-decoration: none !important;
        border-bottom: none !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
        white-space: nowrap !important;
        transition: all 0.25s ease !important;
    }

    .nav-links.active .mobile-expanded-btns a:hover {
        background: #f7fafc !important;
        border-color: #cbd5e0 !important;
    }

    /* SNS 아이콘 나란히 정렬 */
    .nav-links.active .mobile-expanded-sns {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        padding-top: 8px !important;
    }

    .nav-links.active .mobile-expanded-sns a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #f7fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #4a5568 !important;
        font-size: 1.25rem !important;
        border-bottom: none !important;
        padding: 0 !important;
    }
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
}

.btn-outline:hover {
    border-color: var(--color-text-main);
    background-color: var(--color-text-main);
    color: var(--color-bg-white);
}

.btn-dark-outline {
    background: transparent;
    border: 1px solid #1a1d24;
    color: #1a1d24;
    transition: all var(--transition-normal);
}

.btn-dark-outline:hover {
    background-color: #1a1d24;
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-kakao {
    background-color: #FEE500;
    color: #1A1A1A;
    width: 100%;
    margin-top: 16px;
    border-radius: 8px;
    font-weight: 600;
}

.btn-kakao:hover {
    background-color: #fbdc00;
}

/* Grids */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

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

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

/* --- 헤더 (Header) --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: all var(--transition-normal);
    padding: 24px 0;
}

.navbar.scrolled {
    padding: 12px 32px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 9999px !important; /* 헤더 둥글리기 최대 */
    max-width: 1200px !important;
    width: calc(100% - 32px) !important;
    margin: 16px auto 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

@media (max-width: 768px) {
    .navbar.scrolled {
        padding: 8px 20px;
        width: calc(100% - 16px);
        margin: 8px auto 0 auto;
    }
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
}

.logo-x {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 1px;
}

.x-line1,
.x-line2 {
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    top: 50%;
    left: 0;
    transform-origin: center;
}

.x-line1 {
    background: var(--color-primary-cyan);
    transform: translateY(-50%) rotate(45deg);
}

.x-line2 {
    background: var(--color-primary-blue);
    transform: translateY(-50%) rotate(-45deg);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 48px;
}

.nav-actions,
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-social-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
}

.nav-social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f3f5;
    border: 1px solid #e2e8f0;
    color: #111111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.navbar.scrolled .nav-social-link {
    background: #f1f3f5;
    border-color: #e2e8f0;
    color: #111111;
}

.nav-social-link:hover {
    background: #e2e8f0 !important;
    color: #000000 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-2px);
}

.nav-social-link.blog-link span {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 0.8em;
    letter-spacing: -0.05em;
}

/* 데스크톱(769px 이상) 환경에서만 3단 중앙 분할 레이아웃 적용 */
@media (min-width: 769px) {
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
    }
    
    .nav-links {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        margin: 0;
    }
    
    .nav-actions,
    .nav-right-group {
        margin-left: auto;
    }
}

/* 서브페이지(main-home이 아닐 때) 스크롤 전 헤더 기본 스타일 */
body:not(.main-home) .navbar:not(.scrolled) {
    background: #ffffff;
    border-bottom: 1px solid #edf2f7;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

body:not(.main-home) .navbar:not(.scrolled) .nav-links a:not(.btn) {
    color: #111111;
}

.nav-links a:not(.btn) {
    font-weight: 500;
    font-size: 0.95rem;
    color: #ffffff;
    position: relative;
    transition: color var(--transition-normal);
}

.navbar.scrolled .nav-links a:not(.btn) {
    color: var(--color-text-main);
}

.nav-links a:not(.btn):hover {
    color: var(--color-primary-blue);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #ffffff;
}

.navbar.scrolled .mobile-menu-btn {
    color: var(--color-text-main);
}

/* --- 히어로 섹션 (Hero) --- */
.hero {
    min-height: 82vh; /* 하단 잉여 흰여백 조율을 위해 높이 축소 */
    display: flex;
    align-items: center;
    padding-top: 80px;
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url('./DATA/Bg/Main_Bg_2.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.hero .hero-title, .hero .hero-title * {
    color: #ffffff !important;
}

/* Sketchy Hand-drawn Circle Highlight */
.sketchy-circle-wrapper {
    position: relative;
    display: inline-block;
}

.sketchy-svg {
    position: absolute;
    top: -45%;
    left: -15%;
    width: 130%;
    height: 190%;
    pointer-events: none;
    z-index: -1;
    overflow: visible;
}

.sketchy-svg path {
    stroke: var(--color-primary-cyan);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
    filter: drop-shadow(0 0 2px rgba(42, 75, 75, 0.3));
}

.fade-up.visible .sketchy-svg path,
.hero-content.revealed .sketchy-svg path {
    stroke-dashoffset: 0;
}

/* Threads Spoiler Text Reveal Animation */
.reveal-char {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(24px) translateZ(0);
    animation: revealTextIn 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    will-change: opacity, filter, transform;
}

@keyframes revealTextIn {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) translateZ(0);
    }
}

/* 히어로 타이틀 & 설명글 자간 모임 애니메이션 */
.hero-content.revealed .hero-title {
    animation: gatherTitleSpacing 2.0s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.hero-content.revealed .hero-desc {
    animation: gatherDescSpacing 2.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes gatherTitleSpacing {
    from {
        letter-spacing: 0.16em;
    }
    to {
        letter-spacing: -0.03em;
    }
}

@keyframes gatherDescSpacing {
    from {
        letter-spacing: 0.12em;
    }
    to {
        letter-spacing: -0.01em;
    }
}

.hero .hero-desc {
    color: rgba(255, 255, 255, 0.7);
}

.hero .badge {
    color: var(--color-primary-cyan);
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.05rem; /* 사이즈 조금 더 키움 */
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* 헤더 내 버튼 사이즈 축소 및 컬러 미니멀화 */
.nav-actions .btn {
    padding: 8px 18px !important;
    font-size: 0.9rem !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    transition: all var(--transition-fast) !important;
}

.nav-actions .btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

/* 스크롤 시 흰색 헤더 위에서의 가독성을 위해 컬러 반전 처리 */
.navbar.scrolled .nav-actions .btn {
    color: var(--color-text-main) !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

.navbar.scrolled .nav-actions .btn:hover {
    background: rgba(0, 0, 0, 0.12) !important;
}

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

.hero .btn-primary {
    background: var(--color-primary-blue);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(34, 98, 225, 0.4);
}

.hero .btn-primary:hover {
    background: #1271B5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(29, 139, 223, 0.4);
}

.hero .btn-outline {
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.hero .btn-outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

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

.hero-content {
    max-width: 900px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.badge {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary-blue);
    margin-bottom: 24px;
    letter-spacing: 0.05em;
    background: rgba(34, 98, 225, 0.08); /* subtle sophisticated badge */
    padding: 6px 16px;
    border-radius: 20px;
}

.hero-title {
    font-size: 3rem;
    line-height: 1.4;
    margin-bottom: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    word-break: keep-all;
}

.hero-desc {
    font-size: 1.25rem;
    color: var(--color-text-sub);
    margin-bottom: 56px;
    font-weight: 400;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.6;
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.scroll-indicator .mouse {
    width: 22px;
    height: 34px;
    border: 2px solid currentColor;
    border-radius: 12px;
    position: relative;
    opacity: 0.8;
}

.scroll-indicator .mouse::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 6px;
    background: currentColor;
    border-radius: 2px;
    animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
    0% { top: 6px; opacity: 1; }
    100% { top: 16px; opacity: 0; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -10px); }
    60% { transform: translate(-50%, -5px); }
}

/* --- 공감 & 프로세스 (Empathy & Process) --- */
/* --- 공감 & 솔루션 (Empathy & Solution) --- */
.scroll-story-list {
    display: flex;
    flex-direction: column;
    gap: 120px; /* 불필요하게 넓었던 간격 대폭 축소 */
    max-width: 1300px;
    margin: 80px auto 0;
}

.story-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    /* min-height를 강제하지 않고 자연스럽게 감싸도록 변경하여 넓은 여백 제거 */
    padding: 20px 0;
    scroll-snap-align: center;
}

.story-connector {
    display: flex;
    align-items: center;
    width: 6vw; /* 해상도에 맞게 유동적으로 늘어나는 연결선 */
    min-width: 40px;
    max-width: 120px;
    flex-shrink: 0;
    margin: 0 4vw; /* 좌우 여백 */
}

.connector-line {
    flex: 1;
    height: 1px;
    background: var(--color-primary-cyan);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.7s cubic-bezier(0.8, 0, 0.2, 1); /* 스크롤 시 부드럽게 좌에서 우로 뻗어나가는 애니메이션 */
}

/* IntersectionObserver에 의해 visible 클래스가 붙으면 선명하게 선이 그려짐 */
.story-connector.visible .connector-line {
    transform: scaleX(1);
}

.connector-circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary-cyan);
    box-shadow: 0 0 14px var(--color-primary-cyan);
    margin-left: -1px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s; /* 선 애니메이션이 끝날때쯤 톡 튀어나옴 */
}

.story-connector.visible .connector-circle {
    opacity: 1;
    transform: scale(1);
}

.story-left {
    flex: 1;
}

.story-main-title {
    font-size: 1.8rem;
    line-height: 1.6;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 32px;
    word-break: keep-all;
}

.point-color {
    color: var(--color-primary-cyan);
}

.sol-label-dark {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-primary-cyan);
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    word-break: keep-all;
    
    /* 포인트 강조 디자인 (은은한 Cyan 컬러 박스 효과) */
    background: rgba(0, 210, 211, 0.08);
    padding: 16px 24px;
    border-radius: 8px;
    border: 1px solid rgba(0, 210, 211, 0.3);
}

.story-worry {
    padding: 40px;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    max-width: 480px;
}

.client-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08); /* 연한 그레이 음영 추가 */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #ffffff; /* 혹은 브랜드 컬러 var(--color-primary-cyan) 사용 가능 */
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.story-worry p {
    font-size: 1.25rem;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

.story-right {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 40px;
}

.story-desc-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sol-desc {
    font-size: 0.95rem;
    color: #ffffff;
    line-height: 1.7;
    margin: 0;
    word-break: keep-all;
}

@media (max-width: 992px) {
    .story-card {
        flex-direction: column;
        gap: 60px;
        align-items: center; /* keep center for the connector line */
    }
    .story-connector {
        transform: rotate(90deg);
        margin: 0 auto;
    }
    .story-left {
        position: static;
        width: 100%;
    }
    .story-worry {
        max-width: 100%;
    }
    .story-right {
        padding-left: 0;
    }
    .scroll-story-list {
        gap: 100px;
    }
}

@media (max-width: 768px) {
    .story-main-title { font-size: 1.4rem; margin-bottom: 16px; }
    .sol-label-dark { font-size: 0.95rem; padding: 12px 20px; }
    .story-worry p { font-size: 1rem; }
    .scroll-story-list { gap: 80px; }
}

/* --- 포트폴리오 (Portfolio) --- */
.portfolio-filter {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 56px auto;
    background: #F4F5F7;
    padding: 6px;
    border-radius: 100px;
}

/* 세부메뉴 배경 회색 제거 & 각 버튼 컴팩트 축소 */
.portfolio-filter {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.portfolio-filter .filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px !important;
    font-size: 0.86rem !important;
    font-weight: 600;
    color: #334155;
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.portfolio-filter .filter-btn .filter-count {
    font-size: 0.8rem !important;
    font-weight: 500;
    color: #94a3b8;
    margin-left: 1px;
    transition: color 0.25s ease;
}

.portfolio-filter .filter-btn.active {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
}

.portfolio-filter .filter-btn.active .filter-count {
    color: rgba(255, 255, 255, 0.6) !important;
}

.portfolio-filter .filter-btn:hover:not(.active) {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
}

.portfolio-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px 40px;
}

.portfolio-list-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: transparent;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-normal);
}

.portfolio-img {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-sm);
}

.portfolio-info {
    width: 100%;
    position: relative;
}

.placeholder-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.portfolio-list-item:hover .placeholder-img {
    transform: scale(1.05);
    /* zoom effect on image hover */
}

.type-1 {
    background-color: #E6E8ED;
}

.type-2 {
    background-color: #F0F2F5;
}

.type-3 {
    background-color: #EAECEF;
}

.type-4 {
    background-color: #F4F5F7;
}

.portfolio-info h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--color-text-main);
}

.portfolio-info p.short-desc {
    color: var(--color-text-sub);
    font-size: 1.125rem;
    margin-bottom: 24px;
}

.tag {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #333;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

.tag.winner {
    background: var(--color-primary-blue);
    color: #fff;
}

/* Hover Content Animations */
.hover-content {
    margin-top: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
}

.badge-winner {
    display: inline-block;
    padding: 4px 10px;
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(10, 255, 239, 0.2);
}

.portfolio-list-item:hover .hover-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hover-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--color-primary-blue);
    transition: color var(--transition-fast);
}

.hover-btn:hover {
    color: #1271B5;
}

.hover-btn i {
    transition: transform var(--transition-fast);
}

.portfolio-list-item:hover .hover-btn i {
    transform: translateX(4px);
}

/* --- 커스텀 슬라이더 (Custom JS Slider) --- */
.benefits-scroller {
    overflow: hidden;
}

.custom-slider {
    position: relative;
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 0 40px;
}

.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.slider-track-container {
    overflow: hidden;
    width: 100%;
}

.js-slider-track {
    display: flex;
    gap: 16px;
    will-change: transform;
}

.js-slider-track.shifting {
    transition: transform 0.4s ease-out;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    z-index: 10;
    transition: all var(--transition-short);
}

.slider-btn:hover {
    background: var(--color-primary-blue);
    color: var(--color-bg-white);
    border-color: var(--color-primary-blue);
}

.slider-btn.prev {
    left: -20px;
}

.slider-btn.next {
    right: -20px;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    cursor: pointer;
    transition: all 0.3s;
}

.slider-dot.active {
    background: var(--color-primary-blue);
    width: 24px;
    border-radius: 4px;
}

.m-card {
    background: #0D0E12;
    padding: 24px;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid #1A1D24;
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform var(--transition-normal);
}

.m-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    border-color: rgba(0, 210, 211, 0.4);
}

.m-card-badge {
    color: var(--color-primary-cyan);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.m-card h4 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    line-height: 1.4;
    color: #ffffff;
}

.m-card p {
    font-size: 0.95rem;
    color: #8892B0;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .m-card {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .m-card {
        width: 200px;
        padding: 16px;
    }
    .m-card-badge {
        font-size: 0.75rem;
        margin-bottom: 8px;
    }
    .m-card h4 { 
        font-size: 1rem; 
        margin-bottom: 8px;
    }
    .m-card p { 
        font-size: 0.85rem; 
    }
    .benefits-scroller {
        padding: 40px 0 !important;
    }
}

/* Custom Sale Banner */
.sale-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    padding: 24px 32px;
    border-radius: var(--border-radius-md);
    margin-bottom: 64px;
    transition: all var(--transition-normal);
}

.sale-banner:hover {
    border-color: var(--color-primary-blue);
    box-shadow: var(--shadow-sm);
}

.sale-banner-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sale-badge {
    background: var(--color-primary-blue);
    color: var(--color-bg-white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.sale-banner h3 {
    font-size: 1.25rem;
    margin: 0;
    font-weight: 600;
}

/* --- 제공 서비스 (Pricing Services) --- */
.services-grid .service-card {
    padding: 48px 40px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.service-card.popular {
    border: 2px solid var(--color-text-main);
    position: relative;
    transform: scale(1.02);
}

.service-card.popular:hover {
    border-color: var(--color-primary-blue);
}

.popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text-main);
    color: var(--color-bg-white);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.service-card:not(.popular):hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--color-primary-blue);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--color-text-main);
    margin-bottom: 24px;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.service-card>p {
    color: var(--color-text-sub);
    margin-bottom: 32px;
    font-size: 0.95rem;
    min-height: 3rem;
}

.pricing {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.original-price {
    font-size: 1.125rem;
    color: var(--color-text-light);
    text-decoration: line-through;
    margin-bottom: 4px;
    font-weight: 500;
}

.discount-price {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text-main);
}

.discount-price .unit {
    font-size: 1.1rem;
    font-weight: 600;
    margin-left: 4px;
}

.service-list {
    margin-bottom: 40px;
}

.service-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: var(--color-text-main);
    line-height: 1.4;
}

.service-list li i {
    color: var(--color-primary-blue);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.mt-auto {
    margin-top: auto;
}

.btn-full {
    width: 100%;
}

/* --- 콜투액션 (CTA) --- */
.cta-section {
    padding: 160px 0;
    background-color: var(--color-text-main);
    color: var(--color-bg-white);
}

.cta-title {
    font-size: 2.75rem;
    color: var(--color-bg-white);
    margin-bottom: 24px;
}

.cta-section p {
    color: var(--color-text-light);
    font-size: 1.125rem;
}

/* --- 문의하기 (Contact) --- */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
}

.contact-info h2 {
    font-size: 2.5rem;
    margin-bottom: 24px;
}

.contact-info>p {
    color: var(--color-text-sub);
    margin-bottom: 64px;
    font-size: 1.125rem;
}

.contact-info a:hover {
    color: #1271B5 !important;
}

.info-items {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.info-items .item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-items h4 {
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-items p {
    font-size: 1.125rem;
    font-weight: 500;
}

.kakao-cta {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}

.kakao-cta p {
    font-size: 0.95rem;
    color: var(--color-text-sub);
    margin-bottom: 12px;
}

.contact-links-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-link-card {
    background: var(--color-bg-light);
    border-radius: var(--border-radius-md);
    padding: 48px 40px;
    text-align: center;
    border: 1px solid var(--color-border);
    transition: all var(--transition-normal);
}

.contact-link-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.contact-link-card i {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--color-text-main);
}

.kakao-card i {
    color: #3B1E1E;
    /* Kakao icon solid dark brown color matches */
}

.contact-link-card h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}


/* --- 풋터 (Footer) --- */
.footer {
    background: #ffffff;
    position: relative;
    padding: 100px 0 60px 0;
    color: var(--color-text-main);
}

/* 하단바와 위 섹션을 구분하는 연한 가로선 (가로 90%) */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%; /* 가로 90% 중앙정렬 (10% 여백의 절반) */
    width: 90%;
    height: 1px;
    background-color: #edf2f7;
}

.footer-container {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-logo-img {
    height: 56px;
    margin-bottom: 24px;
    margin-left: -8px; /* 커진 이미지 내부 여백(패딩) 보정용 시각적 정렬 */
    filter: brightness(0); /* 화이트 로고를 블랙으로 변환하여 흰색 푸터 대응 */
}

.footer-brand h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.footer-brand p {
    color: var(--color-text-sub);
    font-size: 1rem;
    max-width: 500px;
    word-break: keep-all;
    padding-left: 15px;
}

.footer-social-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.footer-actions {
    display: flex;
    gap: 12px;
}

.footer-action-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 100px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: var(--color-text-main);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition-normal);
}

.footer-action-link:hover {
    background: var(--color-primary-blue);
    color: #ffffff;
    border-color: var(--color-primary-blue);
    transform: translateY(-2px);
}

.footer-social {
    display: flex;
    gap: 16px;
}

.social-icon {
    width: 48px;
    height: 48px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-text-sub);
    transition: all var(--transition-normal);
    border: 1px solid #e2e8f0;
}

.social-icon:hover {
    background: var(--color-primary-blue);
    color: #ffffff;
    transform: translateY(-4px);
    border-color: var(--color-primary-blue);
}

.footer-bottom {
    border-top: 1px solid #edf2f7;
    padding-top: 40px;
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #718096;
}

.footer-links {
    display: flex;
    gap: 32px;
}

.footer-links a {
    color: #718096;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--color-primary-blue);
}

@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        align-items: flex-start; /* 좌측 정렬 */
        text-align: left;        /* 좌측 정렬 */
    }
    
    .footer-social-wrapper {
        align-items: flex-start; /* 좌측 정렬 */
    }

    .footer-bottom .container {
        flex-direction: column;
        align-items: flex-start; /* 좌측 정렬 */
        gap: 16px;
        text-align: left;        /* 좌측 정렬 */
    }
}

/* 플로팅 카카오 버튼 */
.floating-kakao {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 64px;
    height: 64px;
    background-color: #FEE500;
    color: #1A1A1A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: var(--shadow-md);
    z-index: 999;
    transition: transform var(--transition-fast);
}

.floating-kakao:hover {
    transform: scale(1.05);
}

/* --- 모달 (Popup Overlay) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

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

.modal-content {
    background: var(--color-bg-white);
    width: 95%;
    max-width: 1100px;
    max-height: 90vh;
    border-radius: 0 !important;
    overflow-y: auto;
    position: relative;
    transform: translateY(30px);
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-hover);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    float: none !important;
    margin: 0 !important;
    background: #f1f5f9;
    border: none;
    font-size: 1.25rem;
    color: var(--color-text-main);
    cursor: pointer;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-text-main);
    color: white;
}

.modal-img-container {
    width: 100%;
    aspect-ratio: 16/9;
}

.modal-info {
    padding: 64px 48px;
}

.modal-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    gap: 24px;
}

.modal-title-group {
    flex: 1;
}

.modal-title-group h2 {
    font-size: 2.375rem;
    margin-bottom: 0;
}

.modal-title-group .tag {
    margin-bottom: 12px;
}

.modal-desc {
    font-size: 1.125rem;
    color: var(--color-text-sub);
    margin-bottom: 40px;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* 포트폴리오 상세 모달 이미지 사이 텍스트 스타일 */
.portfolio-detail-between-text {
    background-color: #ffffff;
    text-align: center;
    padding: 120px 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.portfolio-detail-between-text .between-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 0;
    margin-bottom: 28px;
    line-height: 1.4;
    letter-spacing: -0.03em;
    word-break: keep-all;
    white-space: pre-line;
}

.portfolio-detail-between-text .between-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: #475569;
    line-height: 1.85;
    max-width: 820px;
    margin: 0 auto;
    letter-spacing: -0.01em;
    word-break: keep-all;
    white-space: pre-wrap;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .portfolio-detail-between-text {
        padding: 80px 24px;
    }
    .portfolio-detail-between-text .between-title {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    .portfolio-detail-between-text .between-desc {
        font-size: 0.95rem;
        line-height: 1.75;
    }
}

/* 인쇄물/상세페이지/로고 서비스 카드 축소 및 여백 조절 */
.service-item[data-category="print-service"],
.service-item[data-category="detail-service"],
.service-item[data-category="logo-service"] {
    padding: 36px 30px;
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
}

/* 로고 리스트 여백 축소 */
.service-item[data-category="logo-service"] .service-list {
    margin-bottom: 24px;
}

.service-item[data-category="logo-service"] .service-list li {
    margin-bottom: 10px;
    font-size: 0.9rem;
}

/* --- 이벤트 모달 (Event Modal) --- */
.event-modal-content {
    max-width: 480px;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-bg-white);
    text-align: center;
}

.event-header-bg {
    background: var(--color-text-main);
    padding: 28px 24px 24px;
    color: var(--color-bg-white);
}

.event-badge {
    display: inline-block;
    background: var(--color-primary-blue);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.event-header-bg h2 {
    color: var(--color-bg-white);
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.event-header-bg p {
    color: var(--color-text-light);
    margin-top: 6px;
    font-size: 0.95rem;
    font-weight: 500;
}

.event-body {
    padding: 24px;
}

/* --- 고민 해결 아코디언 (Solution Accordion) --- */
.sol-accordion-item {
    margin-top: 24px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sol-trigger {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-bottom: 0 !important; /* 아코디언 내부에서는 마진 제거 */
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
}

.sol-trigger:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.sol-trigger i {
    font-size: 1.2rem;
    color: var(--color-primary-cyan);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sol-accordion-item.active .sol-trigger i {
    transform: rotate(180deg);
}

.sol-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, transform 0.4s ease, padding 0.5s ease;
    opacity: 0;
    transform: translateY(-10px);
    padding-top: 0;
    padding-bottom: 0;
    will-change: max-height, opacity, transform, padding;
}

.sol-accordion-item.active .sol-content {
    opacity: 1;
    transform: translateY(0);
    padding-top: 32px; /* 위쪽 여백 추가 */
    padding-bottom: 32px; /* 아래쪽 여백 추가 */
}

.sol-desc {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    padding: 0 20px; /* 트리거와 여백 맞춤 */
}

.sol-desc:last-child {
    margin-bottom: 0;
}

/* --- Additional Options Section --- */
.options-panel {
    display: none;
    max-width: 900px;
    margin: 30px auto 0;
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.options-panel-header {
    text-align: center;
    margin-bottom: 35px;
}

.options-title {
    font-size: 1.4rem;
    margin-bottom: 12px;
    border-bottom: 2px solid #1a1d24;
    padding-bottom: 12px;
    display: inline-block;
    color: #1a1d24;
}

.options-subtitle {
    color: #64748b;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    text-align: left;
}

.option-item {
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.option-label {
    font-weight: 500;
    color: #334155;
    line-height: 1.4;
}

.option-label small {
    font-size: 0.85rem;
    color: #64748b;
    display: block;
    font-weight: 400;
    margin-top: 2px;
}

.option-price {
    color: #1a1d24;
    font-weight: 600;
    white-space: nowrap;
}

/* Option panel responsiveness */
@media (max-width: 768px) {
    .options-panel {
        padding: 24px 20px;
        margin: 20px 10px 0;
    }
    
    .options-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .option-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 16px 0;
    }
    
    .option-price {
        font-size: 1.05rem;
    }

    .options-title {
        font-size: 1.25rem;
    }

    .options-subtitle {
        font-size: 0.95rem;
    }
}

.event-body .highlight {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 16px;
}

.event-body .highlight span {
    color: var(--color-primary-blue);
}

.event-body p {
    font-size: 0.95rem;
    color: var(--color-text-sub);
    margin-bottom: 20px;
    line-height: 1.5;
    word-break: keep-all;
}

.event-prices {
    background: var(--color-bg-light);
    border-radius: var(--border-radius-md);
    padding: 16px;
    margin-bottom: 24px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-border);
}

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

.price-row:first-child {
    padding-top: 0;
}

.price-row .service {
    font-weight: 600;
    color: var(--color-text-main);
    font-size: 1rem;
}

.price-val {
    display: flex;
    align-items: center;
    gap: 12px;
}

.price-val .old-price {
    font-size: 0.95rem;
    color: var(--color-text-light);
    text-decoration: line-through;
}

.price-val i {
    color: var(--color-text-sub);
    font-size: 1rem;
}

.price-val .new-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-primary-blue);
}

.event-btn {
    width: 100%;
}

.event-footer {
    background: var(--color-bg-light);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
}

.today-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--color-text-sub);
    cursor: pointer;
    user-select: none;
}

.today-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-text-main);
    cursor: pointer;
}

.btn-text {
    background: none;
    border: none;
    color: var(--color-text-sub);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.btn-text:hover {
    color: var(--color-text-main);
    text-decoration: underline;
}

#event-modal-close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-bg-white);
}

#event-modal-close:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--color-bg-white);
}

/* --- 작업 프로세스 모달 (Process Modal) --- */
.process-modal-content {
    max-width: 600px;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-bg-white);
}

.process-header {
    background: var(--color-text-main);
    padding: 32px 24px 24px;
    color: var(--color-bg-white);
    text-align: center;
}

.process-header h2 {
    color: var(--color-bg-white);
    margin-bottom: 8px;
    font-size: 1.75rem;
}

.process-header p {
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.process-body {
    padding: 32px 24px;
}

.process-step-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.process-step-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.process-step-item .step-num {
    background: #E8FBF9;
    color: #00D2B4;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
    min-width: 65px;
    text-align: center;
}

.step-content h4 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: var(--color-text-main);
}

.step-content p {
    font-size: 0.95rem;
    color: var(--color-text-sub);
    line-height: 1.5;
}

.step-content .highlight-text {
    font-size: 0.85rem;
    color: var(--color-primary-blue);
    font-weight: 600;
}

.process-notice {
    background: #f8f9fa;
    padding: 16px;
    border-radius: var(--border-radius-md);
    border: 1px dashed var(--color-border);
}

.process-notice p {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    margin-bottom: 8px;
}

.process-notice p:last-child {
    margin-bottom: 0;
}

/* --- 애니메이션 (Animations) --- */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 프로세스 스태킹 카드 겹침 레이아웃 (Stacking Overlapping Cards) */
.process-stacking-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    width: 100%;
    padding-bottom: 60px;
}

.process-stacking-card {
    position: sticky;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 36px 32px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.process-stacking-card .step-num-box {
    font-size: 0.95rem;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: #334155 !important;
}

.process-step-feedback {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 6px 14px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    border-radius: 4px;
    width: max-content;
}

.process-step-feedback i {
    font-size: 1rem;
    color: #1d8bdf;
}

.process-stacking-card h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: #111111;
    margin-bottom: 10px;
    word-break: keep-all;
}

.process-stacking-card p {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

/* 스태킹 카드 2열 수평 레이아웃 (좌측 가로 이미지 슬롯 + 우측 텍스트) */
.process-card-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 36px;
    align-items: center;
}

@media (max-width: 768px) {
    .process-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* 좌측 가로 이미지 전용 슬롯 플레이스홀더 */
.step-img-slot {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: none !important;
    border: none !important; /* 테두리 제거 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.step-img-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 슬롯에 맞게 크롭 채우기 */
    display: block;
    border: none !important; /* 이미지 테두리 완벽 제거 */
}

.img-placeholder-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 500;
}

.img-placeholder-box i {
    font-size: 1.8rem;
    color: #cbd5e1;
}

.step-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- 반응형 (Responsive) --- */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3.2rem;
    }

    .grid-4,
    .cheatkey-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
}

/* --- 모바일 유틸리티 --- */
.mobile-br { display: none; }

@media (max-width: 768px) {
    .mobile-br { display: block; }
    
    .hero { padding-bottom: 80px; }

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

    .sale-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px;
    }
    
    .sale-banner .btn {
        width: 100%;
    }

    #portfolio .container-wide,
    .portfolio-main-section .container-wide,
    .services-main-section .container-wide,
    .insight-main-section .container-wide,
    .faq-main-section .container-wide {
        padding: 0 40px !important;
    }

    .portfolio-header-flex,
    .service-header-flex,
    .faq-header-flex,
    .insight-header-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        width: 85% !important; /* set to 85% for mobile */
        margin: 0 0 10px 0 !important; /* reduced bottom margin */
    }

    .portfolio-filter {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 6px !important; /* tighter button spacing */
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 24px !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    .portfolio-filter .filter-btn,
    .filter-btn,
    .service-filter-btn {
        flex: none !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 8px 16px !important;
        font-size: 0.86rem !important;
        justify-self: start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .cta-title {
        font-size: 1.55rem;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--color-bg-white);
        flex-direction: column;
        padding: 24px;
        border-bottom: 1px solid var(--color-border);
        gap: 24px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a:not(.btn) {
        color: var(--color-text-main) !important; /* 모바일 드로어 내부 텍스트는 항상 블랙 고정 */
    }

    .nav-links a:not(.btn):hover {
        color: var(--color-primary-blue) !important;
    }

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

    .nav-actions .btn {
        width: 100%;
    }

    .quote-banner-card {
        width: 92%;
        padding: 60px 24px;
    }

    .mobile-menu-btn {
        display: block;
    }

    .mobile-br {
        display: block;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .hero {
        padding-bottom: 80px; /* Prevent scroll indicator overlap */
    }

    .hero-desc {
        font-size: 1.125rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .cheatkey-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* 모바일 치트키 6개 기본 노출 및 10개 더보기 제어 */
    .cheatkey-grid:not(.cheatkey-more-active) > .cheatkey-card:nth-child(n+7),
    .cheatkey-grid:not(.cheatkey-more-active) > .cheatkey-group {
        display: none !important;
    }
    .cheatkey-grid.cheatkey-more-active > .cheatkey-card {
        display: flex !important;
    }
    .cheatkey-grid.cheatkey-more-active > .cheatkey-group {
        display: flex !important;
    }
    #cheatkey-more-container {
        display: block !important;
    }

    .service-card {
        padding: 24px 20px !important;
    }

    .service-card .service-icon {
        margin-bottom: 12px;
        font-size: 2rem;
    }

    .service-card h3 {
        font-size: 1.35rem;
        margin-bottom: 8px;
    }

    .service-card p {
        margin-bottom: 16px !important;
        min-height: auto !important;
        font-size: 0.95rem;
    }

    .pricing {
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
    }

    .original-price {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .discount-price {
        font-size: 1.6rem;
    }

    .portfolio-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .portfolio-list-item {
        gap: 8px;
    }

    .portfolio-info {
        padding: 16px 12px;
    }

    .portfolio-info h3 {
        font-size: 1rem;
        margin-bottom: 8px;
        line-height: 1.3;
    }
    
    .portfolio-info p.short-desc {
        font-size: 0.85rem;
    }
    
    .portfolio-info .tag {
        font-size: 0.75rem;
        padding: 4px 8px;
        margin-bottom: 8px;
    }

    .hover-content {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        margin-top: 12px;
    }

    .hover-btn {
        font-size: 0.85rem;
    }

    .portfolio-list-item:hover p.short-desc {
        display: block;
        /* maintain block on hover for mobile if we want */
    }

    .modal-content {
        width: 95%;
        border-radius: 0 !important;
    }

    .modal-info {
        padding: 24px 18px !important;
    }

    .modal-header-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .modal-title-group h2 {
        font-size: 1.45rem !important;
        word-break: keep-all !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }

    /* 모바일 전용: 포트폴리오 및 프로젝트 모달 팝업의 애매한 줄바꿈 제거 & 자연스러운 흐름 적용 */
    #portfolio-modal .modal-info h2,
    #portfolio-modal .modal-info p,
    #portfolio-modal .modal-info span,
    #portfolio-modal .modal-info strong,
    #portfolio-modal .modal-desc,
    #portfolio-modal #modal-meta-analysis,
    #portfolio-modal #modal-meta-painpoint,
    #portfolio-modal #modal-meta-problem {
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        line-height: 1.8 !important; /* 180% 행간 적용 */
    }

    #portfolio-modal .modal-info br {
        display: none !important; /* 모바일 전용: 강제 <br> 줄바꿈을 지우고 스마트폰 폭에 맞춰 자연스럽게 넘어가도록 함 */
    }
}

.process-container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 80px;
}

.process-left {
    flex: 1;
    position: relative;
}

.sticky-title {
    position: sticky;
    top: 15vh; /* 스크롤 시 좌측에 고정되게 함 */
}

.process-header {
    max-width: 800px;
    margin: 0 auto 80px;
    padding-top: 60px;
}

.process-items-stack {
    flex: 1;
    width: 100%;
    margin: 0;
    padding-bottom: 10vh; /* 30vh에서 축소 */
}

.process-row-item {
    position: sticky;
    margin-bottom: 30vh;
    background: #ffffff;
    border-radius: 3px;
    padding: 0 40px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.04);
}

.process-row-item:last-child {
    margin-bottom: 0;
}

/* 스택 위치 및 레이어 관리 (안내 문구를 스킵하고 step 번호로 직접 매칭하여 겹침 버그 완치) */
.process-row-item[data-step="1"] { top: 12vh; z-index: 10; }
.process-row-item[data-step="2"] { top: 15vh; z-index: 20; }
.process-row-item[data-step="3"] { top: 18vh; z-index: 30; }
.process-row-item[data-step="4"] { top: 21vh; z-index: 40; }
.process-row-item[data-step="5"] { top: 24vh; z-index: 50; }
.process-row-item[data-step="6"] { top: 27vh; z-index: 60; }

.p-row-right {
    flex: none;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.process-step-card {
    background: transparent;
    padding: 40px 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 24px;
    align-items: flex-start;
}

.step-num-box {
    grid-column: 1;
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #E8FBF9;
    color: #00D2B4;
    font-size: 1.05rem;
    font-weight: 600; /* 세미볼드 */
    border-radius: 4px;
    margin-bottom: 0;
    letter-spacing: 0;
    min-width: 90px;
}

.process-step-card h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.35rem;
    font-weight: 600; /* 세미볼드 */
    color: #111111;
    margin-bottom: 0;
    word-break: keep-all;
}

.process-step-card p {
    grid-column: 2;
    grid-row: 2;
    font-size: 1.05rem;
    color: #555555;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
    word-break: keep-all;
    letter-spacing: -0.02em;
}

@media (max-width: 992px) {
    .process-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .process-left {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .sticky-title {
        position: relative;
        top: 0;
    }

    .process-row-item {
        position: static !important;
        margin-bottom: 60px !important;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
        width: 100%;
    }
    
    .p-row-right {
        width: 100%;
    }
    
    .process-step-card {
        padding: 24px 0;
        width: 100%;
        min-height: auto;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: none;
        grid-template-columns: auto 1fr;
        gap: 8px 16px;
        align-items: flex-start;
        text-align: left;
    }

    .process-step-card h3 {
        font-size: 1.25rem;
        margin-bottom: 0;
    }

    .process-step-card p {
        font-size: 0.95rem;
    }

    .step-num-box {
        font-size: 0.95rem;
        padding: 6px 12px;
        min-width: 80px;
    }
}

/* 실시간 견적 계산기 스타일 */
.quote-radio-card.active {
    border-color: var(--color-primary-blue) !important;
    background-color: rgba(29, 139, 223, 0.05) !important;
}

.quote-check-card.active {
    border-color: var(--color-primary-blue) !important;
    background-color: rgba(29, 139, 223, 0.05) !important;
}

/* --- New Clean Worry Section --- */
.worry-clean-section {
    background-color: transparent; /* sticky-bg에 배경을 이관하여 투명 처리 */
    color: #1a1a1a;
    padding-top: 10px !important; /* 히어로 섹션과의 사이 여백 극대화하여 축소 */
    padding-bottom: 0px !important; /* 하단 배너 섹션과의 사이 여백 극도로 축소 */
    transition: color 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 고급 고정 배경막 레이어 (오로라 글로우 & 파티클) */
.worry-sticky-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: #ffffff;
    transition: background 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 769px) {
    .worry-sticky-bg {
        position: sticky !important;
        top: 0;
        height: 100vh !important;
        width: 100%;
        margin-bottom: -100vh; /* 스티키 오버레이 레이어 겹침 기법 */
    }
}

.worry-sticky-bg.dark-active {
    background: radial-gradient(circle at 80% 20%, rgba(34, 98, 225, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(0, 177, 179, 0.12) 0%, transparent 50%),
                #0b0f17 !important;
}
.worry-clean-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 60px;
}
.worry-clean-item {
    display: flex;
    align-items: center;
    gap: 60px;
}
.worry-clean-left {
    flex: 1;
}
.worry-clean-left .sub-worry {
    font-size: 1rem;
    color: #888888 !important;
    margin-bottom: 12px;
    font-weight: 600;
}
.worry-clean-left .main-worry {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.4;
    word-break: keep-all;
    color: #1a1a1a !important;
}
.worry-strike {
    position: relative;
    display: inline-block;
    color: #aaaaaa;
}
.worry-strike::after {
    content: '';
    position: absolute;
    left: -5%;
    top: 50%;
    width: 0%; /* 기본 상태: 0% */
    height: 3px;
    background-color: #ff4d4f;
    transform: rotate(-3deg);
    border-radius: 2px;
    opacity: 0.9;
    transition: width 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.35s; /* 좌에서 우로 그어지는 트랜지션 */
}

/* 스크롤 시 화면에 노출되면 좌->우로 틀렸다는 듯 빨간 취소선이 삭 그어짐 */
.worry-clean-item.visible .worry-strike::after,
.worry-clean-left.visible .worry-strike::after,
.fade-up.visible .worry-strike::after {
    width: 110%;
}

.worry-clean-right {
    flex: 1.4; /* 가로 박스 비율을 1.2 -> 1.4로 더 넉넉하게 확장 */
    background-color: #f8f9fa;
    border-radius: 3px;
    padding: 40px 48px; /* 내부 가로 패딩도 확장 */
    position: relative;
    overflow: hidden;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.worry-clean-right h3 {
    font-size: 1.8rem;
    font-weight: 600; /* 세미볼드 적용 */
    line-height: 1.4;
    margin-bottom: 16px;
    word-break: keep-all;
    color: #1a1a1a;
}
.worry-clean-right p {
    font-size: 1.1rem;
    color: #555555;
    line-height: 1.6;
    word-break: keep-all;
}

.worry-header-right,
.benefits-header-right,
.faq-header-right,
.insight-header-right {
    text-align: right;
}

@media (max-width: 768px) {
    .worry-header-right,
    .benefits-header-right,
    .benefits-header-right p,
    .faq-header-right,
    .insight-header-right {
        text-align: left !important;
    }
    /* 모바일 환경에서도 PC와 동일한 스티키 카드 스크롤 전환 애니메이션 적용 */
    .worry-sticky-bg {
        position: sticky !important;
        top: 0;
        height: 100vh !important;
        width: 100%;
        margin-bottom: -100vh;
    }
    .worry-clean-section {
        padding-top: 40px !important;
    }
    .worry-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        padding-bottom: 16px !important;
        width: 100% !important;
    }
    .worry-section-header > div {
        width: 100% !important;
        min-width: 100% !important;
    }
    .worry-title {
        font-size: 1.45rem !important;
        line-height: 1.35 !important;
    }
    .worry-header-right {
        width: 100% !important;
        margin-top: 4px !important;
        text-align: left !important;
    }
    .worry-desc {
        font-size: 0.925rem !important;
        line-height: 1.5 !important;
    }
    .worry-clean-item {
        display: flex !important;
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    .worry-clean-left .sub-worry {
        font-size: 0.95rem;
        line-height: 1.4;
        word-break: keep-all;
    }
    .worry-clean-left .main-worry {
        font-size: 1.4rem;
        line-height: 1.35;
        word-break: keep-all;
        margin-top: 8px;
    }
    .worry-clean-right {
        padding: 24px 20px;
        min-height: auto;
        border-radius: 16px; /* 메인 테마 둥글리기 조화 */
    }
    .worry-clean-right h3 {
        font-size: 1.15rem;
        line-height: 1.4;
        word-break: keep-all;
    }
    .worry-clean-right p {
        font-size: 0.95rem;
        line-height: 1.6;
        word-break: keep-all;
    }
}

/* 4번째 최종 아이템 전용 스타일 */
.worry-clean-final {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 250px;
}
.worry-final-content {
    max-width: 900px;
    margin: -28px auto 0 auto;
    padding: 0 20px;
}
.final-worry-title {
    font-size: 2.75rem; /* 기존 2.5rem(40px) -> 2.75rem(44px) 4px 확대 */
    font-weight: 600; /* 볼드체 세미볼드 */
    color: #ffffff;
    line-height: 1.45;
    word-break: keep-all;
    
    /* 애니메이션 초기 상태 */
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.96) translateY(30px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 1s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.final-worry-desc {
    font-size: 1.35rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.85;
    word-break: keep-all;
    
    /* 애니메이션 초기 상태 */
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.96) translateY(30px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 1s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.final-scroll-indicator {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    
    /* 애니메이션 초기 상태 */
    opacity: 0;
    filter: blur(6px);
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
                filter 1s cubic-bezier(0.25, 1, 0.5, 1),
                transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.final-scroll-indicator span {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.05em;
}
.scroll-arrow-down {
    font-size: 1.25rem;
    color: var(--color-primary-cyan);
    animation: bounceIndicator 2s infinite;
}

@keyframes bounceIndicator {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

/* step-4a: 타이틀만 중앙 노출 */
.worry-clean-final.step-4a .final-worry-title {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1) translateY(0);
}
.worry-clean-final.step-4a .final-worry-desc,
.worry-clean-final.step-4a .final-scroll-indicator {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.96) translateY(30px);
    pointer-events: none;
}

/* step-4b: 타이틀 상승 + 설명 노출 + 스크롤 유도 */
.worry-clean-final.step-4b .final-worry-title {
    opacity: 1;
    filter: blur(0px);
    transform: scale(0.94) translateY(-50px);
    transition-duration: 0.8s;
}
.worry-clean-final.step-4b .final-worry-desc {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1) translateY(-25px);
    transition-duration: 0.8s;
    transition-delay: 0.15s;
}
.worry-clean-final.step-4b .final-scroll-indicator {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(-25px);
    transition-duration: 0.8s;
    transition-delay: 0.3s;
}

@media (max-width: 768px) {
    .worry-clean-final {
        min-height: auto !important;
        padding: 20px 0 !important;
    }
    .worry-final-content {
        padding: 0 16px !important;
        margin-top: -24px !important;
    }
    .final-worry-title {
        font-size: 1.6rem !important; /* 기존 1.35rem -> 1.6rem (4px 확대) */
        line-height: 1.45 !important;
        margin-bottom: 14px !important;
    }
    .final-worry-desc {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
    }
    .final-scroll-indicator {
        margin-top: 20px !important;
    }
}

/* --- 피드백/수정 구간 배지 및 탑바텀 스크롤 버튼 --- */
.process-feedback-section {
    display: flex;
    justify-content: flex-end;
    margin: -16px 0 16px 0;
    position: relative;
    z-index: 2;
}
.feedback-badge {
    background: #00B1B3;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 177, 179, 0.2);
}
.process-modal-feedback {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0;
    padding-left: 60px;
}
.modal-feedback-badge {
    background: #00B1B3;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 4px;
}
.floating-scroll-box {
    position: fixed;
    bottom: 120px;
    right: 44px;
    width: 56px;
    height: 104px;
    background-color: #000000;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 998;
    overflow: hidden;
}
.scroll-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.scroll-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.scroll-divider {
    width: 32px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
}

/* --- 3D Center Carousel Portfolio Style --- */
#portfolio {
    background-color: #ffffff; /* 배경 화이트 복원 */
    color: #1a1a1a !important; /* 자식 텍스트 검정 상속 보장 */
    position: relative;
}

.portfolio-carousel-wrapper {
    position: relative;
    width: 100%;
    margin: 40px auto 0;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0 60px; /* 타이틀 공간을 위한 하단 여백 추가 */
}

.portfolio-track {
    display: flex;
    gap: -50px; /* 작품들을 겹쳐 보이도록 음수 마진 적용 */
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    justify-content: flex-start;
    align-items: flex-start;
}

/* 3D 슬라이드 아이템 (가로형 가로 520px, 세로 340px) */
.portfolio-slide {
    flex-shrink: 0;
    width: 520px;
    height: 340px;
    border-radius: 0px; /* 둥글리기 제거 */
    overflow: visible; /* 타이틀을 아래로 내리기 위해 */
    position: relative;
    background-color: transparent;
    cursor: pointer;
    z-index: 1; /* 주변 슬라이드 아래 배치 */
    
    /* 3D 캐러셀 기본 상태 */
    transform: scale(0.85);
    opacity: 0.4;
    filter: blur(2px);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
}

/* 3D 캐러셀 활성 상태 */
.portfolio-slide.active {
    transform: scale(1.02); /* 부담스럽지 않게 미세 줌 */
    opacity: 1;
    filter: blur(0);
    z-index: 10; /* 활성화된 중앙 슬라이드를 위로 정렬 */
}

/* 이미지 영역 둥글리기 없음 */
.slide-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #111827;
}

/* 슬라이드 배경 이미지 */
.portfolio-slide .slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-slide.active:hover .slide-bg {
    transform: scale(1.04);
}

/* 어두운 그라데이션 오버레이 */
.portfolio-slide .slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 7, 12, 0.15); /* 은은하고 맑은 이미지 룩을 위해 최소화 */
    z-index: 2;
    transition: background 0.3s ease;
}

.portfolio-slide.active:hover .slide-overlay {
    background: rgba(5, 7, 12, 0.4); /* 호버 시 버튼 노출을 위해 어둡게 전환 */
}

/* 정보 컨텐츠 오버레이 (이미지 바깥 아래로 정렬) */
.slide-info-outer {
    margin-top: 16px;
    text-align: left;
    transition: opacity 0.45s ease;
    opacity: 0.4;
}

.portfolio-slide.active .slide-info-outer {
    opacity: 1;
}

.slide-info-outer .tag {
    display: inline-block;
    color: var(--color-primary-blue, #1d8bdf);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.slide-info-outer h3 {
    font-size: 1.25rem;
    font-weight: 600; /* 세미볼드 */
    color: #1a1a1a; /* 블랙 */
    margin: 0;
    line-height: 1.35;
    word-break: keep-all;
}

/* 팝업 모달 트리거 버튼 (Active 상태 호버 시 이미지 중앙 노출) */
.portfolio-slide .view-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 5;
    background-color: #ffffff;
    color: #05070c;
    padding: 12px 24px;
    border-radius: 9999px; /* 둥글리기 최대로 올림 */
    font-weight: 600;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.portfolio-slide.active:hover .view-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.portfolio-slide.active .view-btn:hover {
    background-color: var(--color-primary-blue, #1d8bdf);
    color: #ffffff;
}

/* 슬라이드 좌우 컨트롤 화살표 버튼 */
.carousel-control-btn {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.carousel-control-btn:hover {
    background-color: var(--color-primary-blue, #1d8bdf);
    border-color: var(--color-primary-blue, #1d8bdf);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(29, 139, 223, 0.3);
}

.carousel-control-btn.prev {
    left: 40px;
}

.carousel-control-btn.next {
    right: 40px;
}

/* 슬라이드 점(Dots) 인디케이터 */
.portfolio-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.portfolio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.portfolio-dot.active {
    background-color: var(--color-primary-blue, #1d8bdf);
    width: 20px;
    border-radius: 4px;
}

/* 반응형 스타일 */
@media (max-width: 1200px) {
    .carousel-control-btn.prev { left: 20px; }
    .carousel-control-btn.next { right: 20px; }
}

@media (max-width: 768px) {
    .portfolio-slide {
        width: 320px;
        height: 210px;
    }
    .slide-info-outer {
        margin-top: 12px;
    }
    .slide-info-outer h3 {
        font-size: 1.1rem;
    }
    .carousel-control-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}

/* --- 파트너 리뷰 (Partner Reviews) - 슬라이더(캐러셀) 스타일 --- */
.partner-reviews {
    background: #ffffff;
    padding: 100px 0 60px 0;
    position: relative;
}

.review-slider-outer {
    position: relative;
    max-width: 100%; /* 화면 꽉 채우기 */
    margin: 40px auto 0 auto;
    padding: 0;
}

.review-slider-container {
    overflow: hidden;
    width: 100%;
    display: flex;
    position: relative;
}

/* 무한 가로 롤링 애니메이션 트랙 */
.review-slider-track {
    display: flex;
    width: max-content; /* 복제본 결합 시 크기 자동 대응 */
    animation: continuousReviewRoll 30s linear infinite; /* 30초 동안 선형 무한 루프 */
}

/* 마우스 오버 시 부드럽게 일시정지 (Pause on Hover) */
.review-slider-container:hover .review-slider-track {
    animation-play-state: paused;
}

.review-sec-title {
    font-size: 2rem !important; /* 폰트 사이즈 2rem 조정 적용 */
    font-weight: 600 !important;
}

.review-slide-item {
    flex: 0 0 392px;
    width: 392px;
    box-sizing: border-box;
    padding: 0 16px; /* 카드간 여백 간격을 4px 좁힘 */
}

.review-card-compact {
    background: #ffffff !important; /* 순백색 화이트 배경 */
    border: none !important; /* 테두리 제거 */
    border-radius: 0 !important; /* 라운드 제거 */
    padding: 28px;
    box-shadow: none !important; /* 그림자 완벽 제거 */
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 160px;
    height: 100%;
}

.review-bubble-text {
    font-size: 0.98rem;
    color: var(--color-text-main);
    line-height: 1.65;
    font-weight: 500;
    word-break: keep-all;
}

.review-meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #edf2f7;
    padding-top: 12px;
    margin-top: auto;
}

.review-meta-icon {
    color: #3182ce;
    font-size: 1.05rem;
}

.review-meta-text {
    font-size: 0.82rem;
    color: var(--color-text-sub);
    font-weight: 600;
}

/* 무한 롤링 키프레임 (50% 시점에 정확히 원본 한 세트가 지나가므로 순간 리셋) */
@keyframes continuousReviewRoll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .review-sec-title {
        font-size: 1.8rem !important; /* 모바일 타이틀 대응 축소 */
    }
    .review-slide-item {
        flex: 0 0 310px; /* 모바일에서는 가로 폭을 살짝 줄여서 호환 */
        width: 310px;
        padding: 0 10px; /* 모바일 가로 간격 여유롭게 조정 */
    }
    .review-card-compact {
        padding: 20px;
    }
    .review-bubble-text {
        font-size: 0.92rem;
        line-height: 1.6;
    }
}

/* 모달 팝업 내 웹사이트 방문하기 버튼 전용 컴팩트 테두리 아웃라인 스타일 */
.btn-modal-visit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--color-primary-blue, #1d8bdf) !important;
    background: transparent !important;
    border: 1px solid var(--color-primary-blue, #1d8bdf) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none !important;
}

.btn-modal-visit:hover {
    background: rgba(29, 139, 223, 0.05) !important;
    color: var(--color-primary-blue-dark, #1670b4) !important;
    border-color: var(--color-primary-blue-dark, #1670b4) !important;
}

/* 작업 프로세스 섹션 모달 팝업 버튼 스타일 (더 연한 테두리 + 블랙 폰트) */
.btn-scope-modal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111111 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.btn-scope-modal:hover {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.btn-scope-modal i {
    font-size: 1.1rem;
}

/* --- 빠른견적 커스텀 모달 스타일링 --- */
.quote-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 14, 18, 0.5) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.quote-modal-content {
    background: #ffffff !important;
    border-radius: 0 !important; /* 모달 라운드 제거 */
    padding: 48px 40px !important;
    width: 90%;
    max-width: 500px;
    position: relative;
    text-align: center;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid #f1f5f9 !important;
    box-sizing: border-box;
}

.quote-modal-overlay.active .quote-modal-content {
    transform: translateY(0) scale(1);
}

.quote-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none !important;
    border: none !important;
    font-size: 1.5rem;
    color: #94a3b8 !important;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.quote-modal-close:hover {
    color: #111111 !important;
}

.quote-modal-icon {
    width: 64px;
    height: 64px;
    background: rgba(29, 139, 223, 0.08) !important;
    color: #1d8bdf !important;
    font-size: 2.2rem;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
}

.quote-modal-title {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.02em !important;
    text-shadow: none !important;
}

.quote-modal-desc {
    font-size: 0.98rem !important;
    color: #64748b !important;
    line-height: 1.65 !important;
    margin-bottom: 32px !important;
    word-break: keep-all !important;
    text-shadow: none !important;
}

.quote-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.btn-quote-cancel {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: none !important;
    padding: 14px 28px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-quote-cancel:hover {
    background: #e2e8f0 !important;
    color: #111111 !important;
}

.btn-quote-confirm {
    background: #111111 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 32px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    display: inline-block;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.15) !important;
    box-sizing: border-box;
}

.btn-quote-confirm:hover {
    background: #1d8bdf !important;
    box-shadow: 0 6px 20px rgba(29, 139, 223, 0.25) !important;
    transform: translateY(-2px);
}

/* 작업물 2열 그리드 모바일 반응형 & 호버 효과 */
.project-grid-card {
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-img-wrapper {
    border-radius: 0 !important; /* 썸네일 라운드 제거 */
}

.project-grid-card:hover .project-img-wrapper img {
    transform: scale(1.04) !important;
}

/* 프로젝트 카드 호버 시 View Project 영문 텍스트 슬라이드-업 등장 효과 */
.project-hover-link {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #1d8bdf !important;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    visibility: hidden;
}

.project-grid-card:hover .project-hover-link {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.project-grid-card:hover .project-hover-link i {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .projects-grid-container {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }
}

@media (max-width: 768px) {
  #services-grid-container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* --- 하단 브랜드 파이널 섹션 (Final Brand Section) 폰트 & 안쪽 여백 축소 --- */
.final-brand-section {
    padding: 50px 36px !important; /* 안쪽 여백 더 대폭 축소 */
    min-height: 320px !important;
}

.final-brand-section h2 {
    font-size: 26px !important; /* 타이틀 사이즈 26px로 더 축소 */
}

.btn-elegant-white {
    white-space: nowrap !important; /* PC 화면에서 가로 한 줄 고정 */
}

.btn-br {
    display: none !important; /* PC 화면에서는 줄바꿈 안 함 */
}

@media (max-width: 768px) {
    .final-brand-section {
        width: 96% !important;
        max-width: 96% !important;
        padding: 24px 16px !important; /* 모바일 안쪽 여백 축소 */
        min-height: auto !important;
        margin: 30px auto 40px !important;
    }
    .final-brand-section h2 {
        font-size: 18px !important; /* 모바일 타이틀 폰트 18px */
        line-height: 1.4 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        text-align: left !important;
    }
    .final-brand-section p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        text-align: left !important;
    }
    .final-brand-section .btn-elegant-white {
        padding: 11px 18px !important;
        font-size: 13.5px !important;
        text-align: left !important;
        justify-content: flex-start !important;
        width: auto !important; /* 좌측 정렬 및 버튼 너비 자율 조정 */
        display: inline-flex !important;
        white-space: nowrap !important; /* 모바일에서도 가로 한 줄 고정 */
        box-sizing: border-box !important;
        margin-top: 8px !important;
    }
    .final-brand-section .btn-br {
        display: none !important; /* 모바일에서도 줄바꿈 안 함 (한 줄 배치) */
    }
}