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

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;   /* 페이지 시스템이 자체 스크롤을 제어하므로 body 스크롤 차단 */
        height: 100%;
    }

    /* ═══════════════════════════════════════════════════════════
       📄 가상 페이지 시스템 (4-page slide navigation)
       ───────────────────────────────────────────────────────────
       전체 화면을 덮는 4개의 page 가 transform 으로 슬라이드 전환된다.
       - .page.is-active     : 현재 화면 (translateY 0)
       - .page.is-above      : 화면 위로 사라짐 (translateY -100%)
       - 그 외 (default)     : 화면 아래에 대기 (translateY 100%)
       - 페이지 내부 콘텐츠가 100dvh 보다 길면 page 자체에서 overflow-y 스크롤.
       ═══════════════════════════════════════════════════════════ */
    #page-stage {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        z-index: 1;
    }
    .page {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;   /* 내부 스크롤이 body 로 새지 않게 */
        transform: translateY(100%);
        transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
        will-change: transform;
        background: #ffffff;
    }
    .page.is-active {
        transform: translateY(0);
        z-index: 2;
    }
    .page.is-above {
        transform: translateY(-100%);
        z-index: 1;
    }
    /* 전환 중에는 transition 시간을 보장. JS 가 외부에서 끄지 않는 한 유지 */
    .page.is-transitioning { pointer-events: none; }

    /* hero(영상) 페이지는 자체 영상이 화면을 채우므로 내부 스크롤 불필요 */
    #home.page { overflow: hidden; }

    /* 스크롤바 숨김 (각 페이지 내부 스크롤. 디자인 우선) */
    .page::-webkit-scrollbar { width: 0; height: 0; }
    .page { scrollbar-width: none; }
    .inner { max-width: 1440px; margin: 0 auto; width: 100%; }

    /* 접근성/SEO: 시각적으로 숨기되 스크린리더와 검색 봇은 읽을 수 있게.
       페이지의 핵심 H1 같이 시각 디자인엔 안 맞지만 SEO 에 필요한 텍스트를 둘 때 사용. */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .hd-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px;
    }
    .hd-logo img {
        height: clamp(40px, 2.292vw, 44px);
    width: auto;
    display: block;
    object-fit: contain;
    object-position: left center;
    }
    .hd-menu { display: flex; gap: clamp(20px, 2.604vw, 50px); list-style: none; }
    .hd-menu li a {
        text-decoration: none;
        font-size: clamp(11px, 0.833vw, 16px);
        font-weight: 500; letter-spacing: 0.5px;
        transition: color 0.3s; cursor: pointer;
    }

    /* ── 햄버거 버튼 (모바일 전용) ── */
    .hd-hamburger {
        display: none;
        width: 28px;
        height: 24px;
        background: transparent;
        border: 0;
        cursor: pointer;
        position: relative;
        padding: 0;
        z-index: 1001;
    }
    .hd-hamburger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform .3s, top .3s, opacity .3s;
    }
    .hd-hamburger span:nth-child(1) { top: 4px; }
    .hd-hamburger span:nth-child(2) { top: 11px; }
    .hd-hamburger span:nth-child(3) { top: 18px; }
    .hd-hamburger.is-open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
    .hd-hamburger.is-open span:nth-child(2) { opacity: 0; }
    .hd-hamburger.is-open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }
    #main-nav .hd-hamburger { color: #fff; }
    #content-nav .hd-hamburger { color: #111; }

    /* main-nav 비활성화: hero 위 투명 헤더는 더 이상 사용하지 않고
       content-nav(흰 배경)를 항상 표시하는 글로벌 헤더로 사용한다. */
    #main-nav {
        display: none !important;
    }

    /* content-nav: 항상 화면 최상단에 표시되는 글로벌 헤더 */
    #content-nav {
        position: fixed; top: 0; left: 0;
        width: 100%; z-index: 1000;
        padding: clamp(10px, 0.833vw, 16px) 0;
        background: #ffffff;
        transform: translateY(0);
        pointer-events: auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    /* is-visible 클래스 토글은 무관하게 항상 보이도록 */
    #content-nav,
    #content-nav.is-visible {
        transform: translateY(0);
        pointer-events: auto;
    }
    #content-nav .hd-menu li a { color: #111; }
    #content-nav .hd-menu li a:hover { text-shadow: 0.5px 0 0 currentColor; color: #1f7bbf; }

    #main-nav .inner,
    #content-nav .inner{
        max-width: 100%;
        padding: 0 6.25vw;
    }

    /* ── SOLUTIONS 드롭다운 (PC 전용 — 모바일은 mobile-menu-panel 이 처리) ── */
    .hd-menu li.has-dropdown { position: relative; }
    .hd-menu li.has-dropdown > a { display: inline-block; }
    /* 호버 영역 확장 — 메뉴와 드롭다운 사이 갭 때문에 닫히지 않도록 li 아래 패딩으로 채움 */
    .hd-menu li.has-dropdown::after {
        content: '';
        position: absolute;
        top: 100%; left: 0; right: 0;
        height: 12px;
    }
    .hd-menu .dropdown {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%) translateY(-8px);
        list-style: none;
        margin: 0;
        padding: 8px 0;
        min-width: 200px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.22s ease, visibility 0.22s, transform 0.22s ease;
        z-index: 1100;  /* main-nav z:2, content-nav z:500 보다 위 */
    }
    .hd-menu li.has-dropdown:hover > .dropdown,
    .hd-menu li.has-dropdown:focus-within > .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    .hd-menu .dropdown li {
        list-style: none;
        margin: 0;
    }
    .hd-menu .dropdown li a {
        display: block;
        padding: 10px 20px;
        color: #111 !important;          /* main-nav 흰 글자 override */
        text-shadow: none !important;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.01em;
        white-space: nowrap;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }
    .hd-menu .dropdown li a:hover {
        background: #f4f4f4;
        color: #1f7bbf !important;
    }

    /* ── 모바일 드롭다운 메뉴 패널 (기본: 비활성 - @media (max-width: 1024px)에서 DI 스타일로 활성화) ── */
    .mobile-menu-panel {
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        z-index: 999;
        display: none;
    }

    /* content-nav 듀얼 로고: PC에서는 logo-light만 노출 (원본 단일 로고와 동일 외관) */
    #content-nav .hd-logo .logo-light { display: block; }
    #content-nav .hd-logo .logo-dark  { display: none; }

    /* ═══════════════════════════════════════════════════════════
       🏠 HOME & 공통
       ═══════════════════════════════════════════════════════════ */

    /* #home 은 .page 클래스를 통해 absolute + 100dvh 처리됨.
       자체 속성은 영상/오버레이 배치를 위한 최소한만 유지. */
    #home {
        background: #000;
    }
    #home video {
        width: 100%; height: 100%;
        object-fit: cover;
        transform-origin: center center;
        will-change: transform, opacity;
    }
    .hero-overlay {
        position: absolute; top: 0; left: 0;
        width: 100%; height: 100%; object-fit: cover;
        opacity: 0.1; z-index: 5; pointer-events: none;
    }

    /* .content-sections 는 가상 페이지 시스템 도입으로 더 이상 사용되지 않음
       (원페이지 → 4페이지로 분리). 호환을 위해 자리만 보존. */
    .content-sections { display: contents; }

    .animate {
        opacity: 0;
        transform: translateY(clamp(50px, 4vw, 80px));
        transition: opacity 0.3s ease, transform 0.1s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .animate.is_show {
        opacity: 1;
        transform: translateY(0);
    }

    /* ── SOLUTIONS ── */
    #solutions {
        background: #ffffff;
        padding: 7.5vw 0 4.688vw;
        /* 페이지 분리 후 sections 간 margin 불필요. 헤더 클리어용 padding-top 만 유지 */
    }
    .solutions-wrap {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    padding: 0 15vw;
    gap: 4.69vw;
    box-sizing: border-box;
    }
    .solutions-left {
        flex: 0 0 16.41vw;
        /* sticky 제거: 좌측 텍스트가 우측 이미지(sol-col-right 의 IT Total Care
           Service) 와 항상 같은 y 에서 시작하도록 함. 페이지 내부 스크롤 시에도
           두 요소가 동일한 자연 위치(solutions-wrap 상단)에서 함께 움직임. */
        align-self: flex-start;
    }
    .solutions-eyebrow {
        font-family: 'Pretendard', sans-serif;
        font-size: 12px; font-weight: 700;
        color: #238cff; letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 24px;
        display: block;
    }
    .solutions-main-title {
        font-family: 'Pretendard', sans-serif;
        font-size: 70px;
        font-weight: 800; color: #111;
        line-height: 1.1; letter-spacing: -0.03em;
        margin-bottom: 48px;
        white-space: nowrap;
    }
    .solutions-sub {
        font-family: 'Pretendard', sans-serif;
        font-size: 28px;
        font-weight: 600; color: #333;
        line-height: 1.55; margin-bottom: 24px;
        white-space: nowrap;
    }
    .solutions-desc-text {
        font-family: 'Pretendard', sans-serif;
        font-size: 18px; font-weight: 400;
        color: #555b66; line-height: 1.8;
    }
    .solutions-right {
        flex: 1;
        display: flex;
        gap: 2.34vw;
        align-items: flex-start;
        min-width: 0;
    }
    .sol-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8.98vw;
        min-width: 0;
    }
    .sol-img-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 23 / 24.8;
        height: auto;
        border-radius: 16px;
        overflow: hidden;
        background: #e8e8e8;
        cursor: pointer;
        flex-shrink: 0;
    }
    .sol-col-left { 
        margin-top: 10.94vw; 
        align-items: flex-end;
    }
    .sol-col-right {
        align-items: flex-start;
    }

    .sol-item {
        opacity: 0;
        transform: translateY(60px);
        transition: opacity 0.8s ease-in-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        width: 85%;
    }
    .sol-item.is-show {
        opacity: 1;
        transform: translateY(0);
    }

    .sol-col-right .sol-item:nth-child(1) { transition-delay: 0s; }
    .sol-col-right .sol-item:nth-child(2) { transition-delay: 0.15s; }
    .sol-col-right .sol-item:nth-child(3) { transition-delay: 0.30s; }
    .sol-col-left  .sol-item:nth-child(1) { transition-delay: 0.08s; }
    .sol-col-left  .sol-item:nth-child(2) { transition-delay: 0.23s; }

    .sol-img-wrap img {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
        display: block;
    }
    .sol-hover-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding : 0 0 36px 36px;
        transition: background 0.35s ease;
        gap: 16px;
    }
    .sol-hover-title {
        font-family: 'Pretendard', sans-serif;
        font-size: clamp(16px, 2.5vw, 36px);
        font-weight: 800;
        color: transparent;
        line-height: 1.2;
        letter-spacing: -0.02em;
        transform: translateY(6px);
        transition: color 0.35s ease, transform 0.35s ease;
    }
    .sol-hover-desc {
        font-family: 'Pretendard', sans-serif;
        font-size: 20px;
        font-weight: 200;
        color: transparent;
        line-height: 1.65;
        transform: translateY(6px);
        transition: color 0.35s ease, transform 0.35s ease;
    }
    .sol-item:hover .sol-hover-overlay { background: rgba(0,0,0,0.65); }
    .sol-item:hover .sol-hover-title   { color: #fff; transform: translateY(0); }
    .sol-item:hover .sol-hover-desc    { color: #fff; transform: translateY(0); }
    .sol-item:hover img                { transform: scale(1.05); }

    .sol-item { cursor: pointer; }

    .sol-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 20px;
        padding: 16px 2px 0;
    }
    .sol-title {
        font-family: 'Pretendard', sans-serif;
        font-size: clamp(12px, 1.27vw, 38px);
        font-weight: 800; color: #111;
        letter-spacing: -0.02em;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sol-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.313vw;
        width: 115px;
        height: 42px;
        border: 1.5px solid #ddd;
        border-radius: 21px;
        font-family: 'Pretendard', sans-serif;
        font-size: 14px; font-weight: 500;
        color: #acacac; text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        transition: border-color 0.2s, color 0.2s;
        padding: 0 0.6vw 0 0.8vw;
    }
    .sol-btn .sol-arrow {
        position: static;
        display: block;
        flex-shrink: 0;
        width: 0.365vw;
        height: 0.365vw;
        object-fit: contain;
        pointer-events: none;
    }
    .sol-btn:hover { border-color: #111; color: #111; }

    /* solution 1920 브레이크 */
    @media (max-width: 1920px) {
        .solutions-wrap {
            padding: 0 6.25vw;
            gap: 11.56vw;
        }
        .solutions-left {
            flex: 0 0 auto;
            top: 10.42vw;
            padding-bottom: 20.83vw;
        }
        .solutions-main-title { font-size: 3.54vw; }
        .solutions-sub        { font-size: 1.25vw; }
        .solutions-desc-text  { font-size: 0.83vw; }
        .solutions-right { gap: 3.65vw; }
        .sol-col {
            flex: 0 0 25vw;
            width: 25vw;
            gap: 0;
        }
        .sol-col .sol-item + .sol-item { margin-top: 12.5vw; }
        .sol-col-left {
            margin-top: 16.67vw;
            align-items: unset;
        }
        .sol-col-right { align-items: unset; }
        .sol-item { width: 25vw; }
        .sol-img-wrap {
            width: 25vw;
            height: 29.17vw;
            aspect-ratio: unset;
        }
        .sol-title    { font-size: 1.46vw; }
        .sol-btn {
            width: 5.73vw;
            height: 2.08vw;
            border-radius: 1.04vw;
            font-size: 0.625vw;
            gap: 0.325vw;
            padding: 0 0.5vw 0 0.7vw;
        }
        .sol-btn .sol-arrow { width: 0.729vw; height: 0.729vw; }
        .sol-hover-title { font-size: 1.56vw; }
        .sol-hover-desc  { font-size: 0.78vw; }
        .partners-header h2,
        .contact-header h2   { font-size: 3.54vw; }
        .partners-header .sub1,
        .contact-header .sub1 { font-size: 1.25vw; }
        .partners-header .sub2,
        .contact-header .sub2 { font-size: 0.83vw; }
        .sol-hover-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding : 0 0 1.9vw 1.9vw;
            transition: background 0.35s ease;
            gap: 16px;
        }
    }

    /* solution 2560 브레이크 */
    @media (min-width: 1921px) and (max-width: 2560px) {
        .solutions-wrap {
            padding: 0 10.16vw;
            gap: 10.94vw;
        }
        .solutions-left {
            flex: 0 0 auto;
            top: 9.38vw;
            padding-bottom: 19.53vw;
        }
        .solutions-main-title { font-size: 3.05vw; }
        .solutions-sub        { font-size: 1.17vw; }
        .solutions-desc-text  { font-size: 0.82vw; }
        .solutions-right {
            gap: 3.91vw;
            justify-content: flex-end;
        }
        .sol-col {
            flex: 0 0 19.53vw;
            width: 19.53vw;
            gap: 0;
        }
        .sol-col .sol-item + .sol-item { margin-top: 11.52vw; }
        .sol-col-left {
            margin-top: 14.84vw;
            align-items: unset;
        }
        .sol-col-right { align-items: unset; }
        .sol-item { width: 19.53vw; }
        .sol-img-wrap {
            width: 19.53vw;
            height: 23.05vw;
            aspect-ratio: unset;
        }
        .sol-title    { font-size: 1.25vw; }
        .sol-btn {
            width: 4.69vw;
            height: 1.64vw;
            border-radius: 0.82vw;
            font-size: 0.508vw;
            gap: 0.269vw;
            padding: 0 0.4vw 0 0.6vw;
        }
        .sol-btn .sol-arrow { width: 0.547vw; height: 0.547vw; }
        .sol-hover-title { font-size: 1.25vw; }
        .sol-hover-desc  { font-size: 0.70vw; }
        .partners-header h2,
        .contact-header h2   { font-size: 3.05vw; }
        .partners-header .sub1,
        .contact-header .sub1 { font-size: 1.17vw; }
        .partners-header .sub2,
        .contact-header .sub2 { font-size: 0.82vw; }
        .sol-hover-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding : 0 0 1.56vw 1.56vw;
            transition: background 0.35s ease;
            gap: 16px;
        }
    }

    /* solution 3840 브레이크 */
    @media (min-width: 2561px) {
        .solutions-wrap {
            padding: 0 10.42vw;
            gap: 10.94vw;
        }
        .solutions-left {
            flex: 0 0 auto;
            top: 9.38vw;
            padding-bottom: 20.83vw;
        }
        .solutions-main-title { font-size: 3.13vw; }
        .solutions-sub        { font-size: 1.20vw; }
        .solutions-desc-text  { font-size: 0.83vw; }
        .solutions-right {
            gap: 3.91vw;
            justify-content: flex-end;
        }
        .sol-col {
            flex: 0 0 18.75vw;
            width: 18.75vw;
            gap: 0;
        }
        .sol-col .sol-item + .sol-item { margin-top: 11.20vw; }
        .sol-col-left {
            margin-top: 14.58vw;
            align-items: unset;
        }
        .sol-col-right { align-items: unset; }
        .sol-item { width: 18.75vw; }
        .sol-img-wrap {
            width: 18.75vw;
            height: 22.40vw;
            aspect-ratio: unset;
        }
        .sol-title    { font-size: 1.20vw; }
        .sol-btn {
            width: 4.43vw;
            height: 1.46vw;
            border-radius: 0.73vw;
            font-size: 0.495vw;
            gap: 0.163vw;
            padding: 0 0.35vw 0 0.5vw;
        }
        .sol-btn .sol-arrow { width: 0.365vw; height: 0.365vw; }
        .sol-hover-title { font-size: 1.30vw; }
        .sol-hover-desc  { font-size: 0.83vw; }
        .partners-header h2,
        .contact-header h2   { font-size: 3.13vw; }
        .partners-header .sub1,
        .contact-header .sub1 { font-size: 1.20vw; }
        .partners-header .sub2,
        .contact-header .sub2 { font-size: 0.83vw; }
        .sol-hover-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding : 0 0 1.56vw 1.56vw;
            transition: background 0.35s ease;
            gap: 16px;
        }
    }

    /* ── PARTNERS ──
       16:9 데스크톱(FHD/QHD/UHD) 에서 항상 동일 비율 유지 목표.
       모든 사이즈를 순수 vh/vw 로 정의(clamp max 제거) — 해상도가 바뀌어도
       viewport 비율이 같으면 화면상 비율이 그대로 유지됨.
       ※ 모바일/태블릿(≤1024px) 은 별도 미디어 쿼리에서 px 기반으로 재정의. */
    .partners {
        background: #fff;
        padding: 15vh 0 5vh;
        box-sizing: border-box;
        overflow: hidden;
    }
    .partners-header { text-align: center; margin-bottom: 22vh; }
    .partners-header h2 {
        font-family: 'Pretendard', sans-serif;
        font-size: 3.13vw;
        font-weight: 800; color: #111; letter-spacing: .05em;
        margin-bottom: 3vh;
    }
    .partners-header .sub1 {
        font-family: 'Pretendard', sans-serif;
        font-size: 1.20vw;
        font-weight: 600; color: #222;
        margin-bottom: 1.8vh;
    }
    .partners-header .sub2 {
        font-family: 'Pretendard', sans-serif;
        font-size: 0.83vw;
        font-weight: 400; color: #888;
    }
    /* sub2 텍스트를 두 segment 로 나눠 inline-block 으로 처리.
       한 줄에 들어가면 그대로 한 줄, 좁아져 두 줄이 되면 정확히 두 segment 사이에서
       줄바꿈됨 ('참여사들이' / '우리의' 경계). */
    .partners-header .sub2 > span {
        display: inline-block;
    }
    .partners-tabs { display: flex; justify-content: center; gap: 20px; margin-bottom: 140px; }
    .partners-tab {
        width: 180px; height: 65px;  border-radius: 33px;
        border: solid 1px #d7d7d7; background: #fff;
        box-shadow: 0 4px 8px 0 rgba(72,72,72,.16);
        font-family: 'Pretendard', sans-serif; font-size: 14px; font-weight: 500;
        color: #555; cursor: pointer; transition: all .25s; white-space: nowrap;
    }
    .partners-tab:hover { border-color: #111; color: #111; }
    .partners-tab.active { background: #111; border-color: #111; color: #fff; font-weight: 700; }

    .partner-cell img { width: 100%; height: 100%; object-fit: contain; }

    .marquee-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        /* 행 간격 — vh 비례로 화면 크기에 맞춰 늘어남.
           cell height(7.5vh) 의 약 40% 로 시각적 여백 확보. */
        gap: 3vh;
        overflow: hidden;
    }
    .marquee-row {
        display: flex;
        overflow: hidden;
        width: 100%;
    }
    .marquee-track {
        display: flex;
        flex-shrink: 0;
        will-change: transform;
    }
    .marquee-track.to-right {
        animation: marquee-right 80s linear infinite;
    }
    .marquee-track.to-left {
        animation: marquee-left 80s linear infinite;
    }
    @keyframes marquee-right {
        from { transform: translateX(-50%); }
        to   { transform: translateX(0%); }
    }
    @keyframes marquee-left {
        from { transform: translateX(0%); }
        to   { transform: translateX(-50%); }
    }
    .marquee-logo-cell {
    /* 16:9 PC 화면에서 비율 일관성 — 순수 vh/vw 사용(clamp max 제거).
       3 마키 행이 약 22vh 차지 (한 행당 ~7.5vh).
       모바일은 별도 미디어 쿼리에서 px 로 재정의. */
    width: 12vw;
    height: 7.5vh;
    border: none;
    padding: 0 0.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.marquee-logo-cell img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

    /* ── CONTACT ── */
    .contact {
        background: #fff;
        padding: 0;
        /* overflow 는 .page 의 overflow-y:auto / overflow-x:hidden 을 그대로 따른다.
           이전에는 'overflow: visible' 로 덮여 페이지 내부 스크롤이 막혔음. */
    }
    .contact-header {
        text-align: center;
        padding-top: 5.990vw;
        margin-bottom: 0;
    }
    .contact-header h2 {
        font-family: 'Pretendard', sans-serif;
        font-size: 3.13vw;
        font-weight: 800;
        color: #111;
        letter-spacing: .04em;
        line-height: 1;
        margin-bottom: 48px;
    }
    .contact-header .sub1 {
        font-family: 'Pretendard', sans-serif;
        font-size: 1.20vw;
        font-weight: 600;
        color: #222;
        margin-bottom: 24px;
    }
    .contact-header .sub2 {
        font-family: 'Pretendard', sans-serif;
        font-size: 0.83vw;
        font-weight: 400;
        color: #888;
        line-height: 1.6;
    }
    .contact-body {
        display: flex;
        align-items: flex-start;
        padding-left: 10.417vw;
        margin-top: 4.688vw;
        padding-bottom: 7.813vw;
    }
    .contact-map-wrap {
        flex-shrink: 0;
        width: 36.458vw;
        height: 25.521vw;
        margin: 0;
        padding: 0;
    }
    .contact-map {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 1px solid #e8e8e8;
        position: relative;
    }
    .contact-map iframe {
        width: 100%; height: 100%; border: 0; display: block;
    }
    .map-overlay {
        position: absolute;
        inset: 0;
        z-index: 10;
        cursor: pointer;
        background: transparent;
    }
    .map-overlay.hidden { display: none; }
    .contact-form-wrap {
        flex-shrink: 0;
        width: 38.594vw;
        height: 25.521vw;
        margin-left: 3.333vw;
    }
    .contact-form {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .form-field-label {
        font-family: 'Pretendard', sans-serif;
        font-size: 0.729vw;
        font-weight: 600;
        color: #111;
        display: block;
        margin-bottom: 0.781vw;
    }
    .form-field-label .required { color: #e53935; margin-left: 2px; }
    .contact-interest-section .form-field-label {
        margin-bottom: 0.781vw;
    }
    .interest-buttons {
        display: grid;
        grid-template-columns: repeat(3, 11.979vw);
        column-gap: 1.042vw;
        row-gap:    0.469vw;
    }
    .interest-btn {
        height: 2.083vw;
        border: 1.5px solid #ddd;
        border-radius: 0.260vw;
        background: #fff;
        font-family: 'Pretendard', sans-serif;
        font-size: 0.677vw;
        font-weight: 600;
        color: #555;
        cursor: pointer;
        transition: all .2s;
        white-space: nowrap;
    }
    .interest-btn:hover  { border-color: #111; color: #111; }
    .interest-btn.active { background: #111; border-color: #111; color: #fff; font-weight: 700; }
    .contact-info-section {
        margin-top: 1.563vw;
    }
    .form-row-3 {
        display: flex;
        align-items: flex-start;
    }
    .form-row-3 > div { flex: 0 0 11.979vw; }
    .form-row-3 > div:nth-child(1) { margin-right: 1.042vw; }
    .form-row-3 > div:nth-child(2) { margin-right: 1.302vw; }
    .form-input {
        width: 100%;
        height: 2.083vw;
        padding: 0 0.417vw;
        border: 0px solid #e0e0e0;
        font-family: 'Pretendard', sans-serif;
        font-size: 0.729vw;
        color: #111;
        background: #f8f8f8;
        outline: none;
        transition: border-color .2s;
        border-bottom: 3px solid #ebebeb;
        box-sizing: border-box;
    }
    .form-input::placeholder { color: #bbb; font-size: 0.469vw; font-weight: 500; }
    .form-input:focus { border-color: #238cff; }
    .contact-email-section {
        margin-top: 0.781vw;
    }
    .email-row {
        display: flex;
        align-items: center;
        gap: 0;
        height: 2.083vw;
    }
    .email-local {
        flex: 0 0 14.714vw;
        height: 100%;
        border: 0px solid #e0e0e0;
        padding: 0 0.417vw;
        font-family: 'Pretendard', sans-serif;
        font-size: 0.729vw;
        color: #111;
        outline: none;
        background: #f8f8f8;
        transition: border-color .2s;
        border-bottom: 3px solid #ebebeb;
        box-sizing: border-box;
    }
    .email-local::placeholder { color: #bbb; font-size: 0.469vw; font-weight: 500; }
    .email-local:focus { border-color: #238cff; }
    .email-at {
        flex: 0 0 1.953vw;
        text-align: center;
        font-size: 0.729vw;
        color: #888;
        font-family: 'Pretendard', sans-serif;
    }
    .email-domain {
        flex: 0 0 10.417vw;
        height: 100%;
        border: 0px solid #e0e0e0;
        padding: 0 0.417vw;
        font-family: 'Pretendard', sans-serif;
        font-size: 0.729vw;
        color: #111;
        outline: none;
        background: #f8f8f8;
        transition: border-color .2s;
        border-bottom: 3px solid #ebebeb;
        box-sizing: border-box;
    }
    .email-domain::placeholder { color: #bbb; font-size: 0.469vw; font-weight: 500; }
    .email-domain:focus { border-color: #238cff; }
    .email-domain-select {
        flex: 0 0 10.417vw;
        margin-left: 0.781vw;
        height: 100%;
        border: 0px solid #e0e0e0;
        padding: 0 1.3vw 0 0.417vw;
        font-family: 'Pretendard', sans-serif;
        font-size: 0.469vw;
        font-weight: 500;
        color: #888;
        background: #f8f8f8 url("../image/droparrow.png") no-repeat right 0.417vw center;
        background-size: auto 0.469vw;
        appearance: none;
        cursor: pointer;
        outline: none;
        transition: border-color .2s;
        border-bottom: 3px solid #ebebeb;
        box-sizing: border-box;
    }
    .email-domain-select:focus { border-color: #238cff; }
    .contact-subject-section,
    .contact-inquiry-section {
        margin-top: 0.781vw;
    }
    .form-textarea {
        width: 100%;
        height: 4.167vw;
        padding: 0.417vw;
        border: 0px solid #e0e0e0;
        font-family: 'Pretendard', sans-serif;
        font-size: 0.729vw;
        color: #111;
        background: #f8f8f8;
        outline: none;
        resize: none;
        transition: border-color .2s;
        border-bottom: 3px solid #ebebeb;
        box-sizing: border-box;
        line-height: 1.6;
    }
    .form-textarea::placeholder { color: #bbb; font-size: 0.469vw; font-weight: 500; }
    .form-textarea:focus { border-color: #238cff; }
    .privacy-row {
        display: flex;
        align-items: center;
        gap: 0.26vw;
        margin-top: 0.781vw;
    }
    .privacy-label {
        font-family: 'Pretendard', sans-serif;
        font-size: 0.521vw;
        font-weight: 500;
        color: #555;
        cursor: pointer;
    }
    .contact-submit-wrap {
        display: flex;
        justify-content: center;
        margin-top: 0.911vw;
    }
    .contact-submit {
        width: 8.854vw;
        height: 1.979vw;
        background: #111;
        border: none;
        border-radius: clamp(4px, 0.156vw, 6px);
        font-family: 'Pretendard', sans-serif;
        font-size: 0.625vw;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        transition: background .2s, transform .15s;
        letter-spacing: .02em;
    }
    .contact-submit:hover  { background: #333; }

    /* ── FOOTER ── */
    .footer { background: #212121; padding: clamp(24px, 2.604vw, 50px) 0 clamp(20px, 1.875vw, 36px); }
    .footer .inner {
        max-width: 100%;
        padding: 0 clamp(20px, 6.25vw, 120px) 0 clamp(20px, 11vw, 700px);
        display: flex; flex-direction: column;
    }
    .footer-top {
        display: flex; justify-content: space-between; align-items: center;
        flex-wrap: wrap; gap: clamp(12px, 1.25vw, 24px);
        padding-bottom: clamp(20px, 2.083vw, 40px);
        margin-bottom: clamp(6px, 0.521vw, 10px);
    }
    .footer-logo { display: flex; align-items: center; gap: clamp(6px, 0.625vw, 12px); margin-left: -1.563vw; }
    .footer-logo img { height: clamp(30px, 2.917vw, 56px) !important; }
    .footer-logo-text .main { font-family: 'Pretendard', sans-serif; font-size: clamp(10px, 0.833vw, 16px); font-weight: 400; color: #fff; letter-spacing: -.3px; }
    .footer-logo-text .sub  { font-family: 'Pretendard', sans-serif; font-size: clamp(8px,  0.521vw, 10px); font-weight: 400; color: #aaa; letter-spacing: .5px; }
    .footer-nav {
        display: flex; flex-wrap: wrap;
        gap: clamp(12px, 3.125vw, 60px);
        list-style: none; padding: 0; margin: 0;
        margin-right: 7vw;
    }
    .footer-nav li a { font-family: 'Pretendard', sans-serif; font-size: clamp(10px, 0.677vw, 13px); font-weight: 400; color: #888; text-decoration: none; transition: color .2s; }
    .footer-nav li a:hover { color: #fff; }
    .footer-info { margin-bottom: clamp(12px, 1.25vw, 24px); }
    .footer-info p { font-family: 'Pretendard', sans-serif; font-size: clamp(9px, 0.625vw, 12px); font-weight: 400; color: #888; line-height: 1.8; }
    .footer-info .divider { margin: 0 clamp(4px, 0.417vw, 8px); color: #555; }
    .footer-copy { font-family: 'Pretendard', sans-serif; font-size: clamp(8px, 0.573vw, 11px); font-weight: 400; color: #555; }

    /* ── SCROLL INDICATOR ── */
    .scroll-indicator {
        position: absolute;
        bottom: 0.52vw;
        left: 50%;
        transform: translateX(-50%);
        width: 3.646vw;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        opacity: 1;
        transition: opacity 0.5s ease;
        pointer-events: none;
        flex-direction: column;
        gap: 0.468vw;
    }
    .scroll-text {
        color: #fff;
        font-family: 'Pretendard', sans-serif;
        font-size: 0.677vw;
        font-weight: 400;
    }
    .scroll-indicator.hidden { opacity: 0; }
    .scroll-indicator-line {
        width: 1.35vw;
        height: 2.135vw;
        position: relative;
        display: block;
        border: 2px solid #fff;
        border-radius: 1.06vw;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 0, 0, 0.15);
    }
    .scroll-indicator-line > img:first-child { display: none; }
    .scroll-indicator-point {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 0.365vw;
        height: 0.365vw;
        background-color: #fff;
        border-radius: 50%;
        top: 10%;
        animation: scroll-point-move 1.8s ease-in-out infinite;
    }
    @keyframes scroll-point-move {
        0%   { top: 10%; opacity: 1; }
        70%  { top: 65%; opacity: 1; }
        85%  { top: 72%; opacity: 0; }
        100% { top: 10%; opacity: 0; }
    }

    .reveal-item {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.1s ease, transform 0.1s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal-item.is-show {
        opacity: 1;
        transform: translateY(0);
    }

    #partners-grid {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    /* ═══════════════════════════════════════════════════════════
       📱 RESPONSIVE: TABLET ( ~1024px )
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 1024px) {
        /* ═══════════════════════════════════════════════════════════
           🍔 DI 스타일 헤더/햄버거/모바일 메뉴 (태블릿+모바일 공통)
           ═══════════════════════════════════════════════════════════ */

        /* nav z-index 상향 (모바일 메뉴 위로) */
        #main-nav    { z-index: 1060; }
        #content-nav { z-index: 1055; }

        .hd-logo { margin-left: -24px; }
.hd-logo img {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: left center;
}

        /* 햄버거: 44×44 DI 스타일 (블록 스팬 + translateY rotate X) */
        .hd-hamburger {
            display: block;
            width: 44px; height: 44px;
            background: transparent; border: none; cursor: pointer;
            position: relative;
            padding: 10px;
            z-index: 1100;
            -webkit-tap-highlight-color: transparent;
        }
        .hd-hamburger span {
            position: static;
            display: block;
            width: 24px; height: 2px;
            background: currentColor;
            margin: 5px auto;
            border-radius: 2px;
            top: auto; left: auto;
            transition: transform 0.35s ease, opacity 0.25s ease, background 0.3s ease;
        }
        .hd-hamburger.is-open span:nth-child(1) { top: auto; transform: translateY(7px) rotate(45deg); }
        .hd-hamburger.is-open span:nth-child(2) { opacity: 0; }
        .hd-hamburger.is-open span:nth-child(3) { top: auto; transform: translateY(-7px) rotate(-45deg); }

        /* 메뉴가 열렸을 때: nav 배경 투명화 + 양쪽 햄버거 숨김 */
        body.menu-open #main-nav,
        body.menu-open #content-nav {
            background: transparent !important;
            pointer-events: none !important;  /* 헤더 영역이 X 버튼 클릭을 가로채지 않도록 통과 */
        }
        /* 메뉴 열리면 양쪽 nav 햄버거 모두 숨김 — 메뉴 내부 전용 X 버튼만 보이게 */
        body.menu-open .hd-hamburger { display: none !important; }

        /* 모바일 메뉴 오버레이 (어두운 반투명 + blur, 중앙정렬, 스태거 진입) */
        .mobile-menu-panel {
            position: fixed; inset: 0; z-index: 1050;
            background: rgba(10,10,11,0.97);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: opacity 0.35s ease, visibility 0.35s ease;
            padding: 0;
            transform: none;
            height: 100vh; height: 100dvh;
        }
        .mobile-menu-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
        .mobile-menu-panel ul {
            list-style: none; padding: 0; margin: 0;
            display: flex; flex-direction: column;
            text-align: center;
            gap: 0;
        }
        .mobile-menu-panel li {
            margin: 20px 0;
            opacity: 0; transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        .mobile-menu-panel.is-open li { opacity: 1; transform: translateY(0); }
        .mobile-menu-panel.is-open li:nth-child(1) { transition-delay: 0.10s; }
        .mobile-menu-panel.is-open li:nth-child(2) { transition-delay: 0.16s; }
        .mobile-menu-panel.is-open li:nth-child(3) { transition-delay: 0.22s; }
        .mobile-menu-panel.is-open li:nth-child(4) { transition-delay: 0.28s; }
        .mobile-menu-panel.is-open li:nth-child(5) { transition-delay: 0.34s; }
        .mobile-menu-panel a {
            display: inline-block;
            color: #fff;
            font-family: 'Pretendard', sans-serif;
            font-size: clamp(20px, 6vw, 28px);
            font-weight: 600;
            letter-spacing: -0.02em;
            text-decoration: none;
            padding: 10px 20px;
            border: none;
            transition: color 0.25s;
        }
        .mobile-menu-panel a:hover { color: #4d9fff; }

        /* 모바일 메뉴 전용 닫기(X) 버튼 */
        .mobile-menu-close {
            position: absolute;
            top: max(14px, env(safe-area-inset-top, 14px));
            right: 20px;
            width: 44px; height: 44px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 2;
            -webkit-tap-highlight-color: transparent;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: rotate(-90deg);
        }
        .mobile-menu-panel.is-open .mobile-menu-close {
            opacity: 1;
            transform: rotate(0);
            transition-delay: 0.15s;
        }
        .mobile-menu-close::before,
        .mobile-menu-close::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 2px;
            background: #fff;
            border-radius: 2px;
            margin-top: -1px;
            margin-left: -12px;
        }
        .mobile-menu-close::before { transform: rotate(45deg); }
        .mobile-menu-close::after  { transform: rotate(-45deg); }
        .mobile-menu-close:hover::before,
        .mobile-menu-close:hover::after { background: #4d9fff; }

        /* 콘텐츠 nav 로고: 메뉴 열렸을 때 어두운 배경 대응으로 밝은 로고 전환 */
        #content-nav .hd-logo .logo-light { display: block; }
        #content-nav .hd-logo .logo-dark  { display: none; }
        body.menu-open #content-nav .hd-logo .logo-light { display: none; }
        body.menu-open #content-nav .hd-logo .logo-dark  { display: block; }

        /* 네비 */
        #main-nav .inner,
        #content-nav .inner {
            padding: 0 40px;
        }

        /* 모바일/태블릿: 히어로 지나면 main-nav 숨김 */
        #main-nav.is-hidden {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
        .hd-menu { display: none; }

        /* SOLUTIONS - 좌/우 스택 */
        #solutions { padding: 120px 0 40px; }
        .solutions-wrap {
            padding: 0 40px;
            gap: 48px;
            flex-direction: column;
        }
        .solutions-left {
            position: static;
            padding-bottom: 0;
            top: auto;
            width: 100%;
        }
        .solutions-main-title {
            font-size: 54px;
            white-space: normal;
            margin-bottom: 24px;
        }
        .solutions-sub {
            font-size: 20px;
            white-space: normal;
            margin-bottom: 16px;
        }
        .solutions-desc-text { font-size: 15px; line-height: 1.7; }

        .solutions-right {
            gap: 24px;
            width: 100%;
        }
        .sol-col {
            flex: 1 1 0;
            width: auto;
            gap: 0;
        }
        .sol-col .sol-item + .sol-item { margin-top: 80px; }
        .sol-col-left  { margin-top: 80px; align-items: unset; }
        .sol-col-right { margin-top: 0;    align-items: unset; }
        .sol-item { width: 100%; }
        .sol-img-wrap {
            width: 100%;
            height: auto;
            aspect-ratio: 23 / 24.8;
        }
        .sol-title { font-size: 18px; }
        .sol-btn {
            width: 90px;
            height: 32px;
            border-radius: 16px;
            font-size: 11px;
            gap: 6px;
            padding: 0 10px;
        }
        .sol-btn .sol-arrow { width: 9px; height: 9px; }
        /* 태블릿: 호버 텍스트 상시 노출 (터치 환경 대응) */
        .sol-hover-overlay {
            background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0) 100%);
            padding: 0 0 24px 24px;
            gap: 10px;
        }
        .sol-hover-title {
            font-size: 22px;
            color: #fff;
            transform: translateY(0);
        }
        .sol-hover-desc {
            font-size: 13px;
            color: #fff;
            transform: translateY(0);
        }
        .sol-item:hover .sol-hover-overlay {
            background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0) 100%);
        }
        .sol-item:hover img { transform: none; }

        /* PARTNERS — 태블릿/스퀘어 (769~1024px)
           PC(16:9, vh 15/22) ↔ 모바일(9:16, vh 25/6) 사이의 보간 값.
           가로폭이 클수록 PC 에 가깝게, 좁을수록 모바일에 가깝게 자연 변환. */
        .partners { padding: 20vh 0 5vh; }
        .partners-header { margin-bottom: 14vh; }
        .partners-header h2   { font-size: 42px; margin-bottom: 2.7vh; }
        .partners-header .sub1 { font-size: 18px; margin-bottom: 1.6vh; }
        .partners-header .sub2 { font-size: 13px; }
        .marquee-logo-cell {
            width: 20vw;
            height: 7.5vh;
            padding: 0 1vw;
        }
        .marquee-wrapper { gap: 3vh; }

        /* CONTACT - 좌/우 스택 */
        .contact-header { padding-top: 100px; }
        .contact-header h2   { font-size: 42px; margin-bottom: 24px; }
        .contact-header .sub1 { font-size: 18px; margin-bottom: 12px; }
        .contact-header .sub2 { font-size: 13px; }
        .contact-body {
            flex-direction: column;
            align-items: center;
            padding: 0 40px 80px;
            margin-top: 48px;
            gap: 40px;
        }
        .contact-map-wrap {
            width: 100%;
            max-width: 680px;
            height: 380px;
        }
        .contact-form-wrap {
            width: 100%;
            max-width: 680px;
            height: auto;
            margin-left: 0;
        }

        .form-field-label { font-size: 13px; margin-bottom: 8px; }
        .interest-buttons {
            grid-template-columns: repeat(3, 1fr);
            column-gap: 10px;
            row-gap: 8px;
        }
        .interest-btn {
            height: 40px;
            border-radius: 6px;
            font-size: 12px;
        }
        .contact-info-section { margin-top: 24px; }
        .form-row-3 { gap: 12px; }
        .form-row-3 > div,
        .form-row-3 > div:nth-child(1),
        .form-row-3 > div:nth-child(2) {
            flex: 1 1 0;
            margin-right: 0;
        }
        .form-input { height: 40px; font-size: 14px; padding: 0 10px; }
        .form-input::placeholder { font-size: 13px; }
        .contact-email-section { margin-top: 14px; }
        .email-row { height: 40px; gap: 6px; flex-wrap: wrap; }
        .email-local,
        .email-domain {
            flex: 1 1 120px;
            font-size: 14px;
            padding: 0 10px;
        }
        .email-local::placeholder,
        .email-domain::placeholder { font-size: 13px; }
        .email-at { flex: 0 0 20px; font-size: 14px; }
        .email-domain-select {
            flex: 1 1 120px;
            margin-left: 0;
            font-size: 13px;
            padding: 0 24px 0 10px;
            background-size: auto 8px;
            background-position: right 8px center;
        }
        .contact-subject-section,
        .contact-inquiry-section { margin-top: 14px; }
        .form-textarea { height: 90px; font-size: 14px; padding: 10px; }
        .form-textarea::placeholder { font-size: 13px; }
        .privacy-row { gap: 8px; margin-top: 14px; }
        .privacy-label { font-size: 13px; }
        .contact-submit-wrap { margin-top: 24px; }
        .contact-submit {
            width: 180px;
            height: 48px;
            border-radius: 8px;
            font-size: 14px;
        }

        /* FOOTER */
        .footer .inner {
            padding: 0 40px;
        }
        .footer-logo { margin-left: 0; }
        .footer-nav { margin-right: 0; gap: 24px; }
        .footer-nav li a { font-size: 12px; }
        .footer-info p { font-size: 12px; }
        .footer-copy { font-size: 11px; }

        /* SCROLL INDICATOR */
        .scroll-indicator {
            width: 48px;
            bottom: 24px;
            gap: 8px;
        }
        .scroll-indicator-line {
            width: 22px;
            height: 34px;
            border-radius: 17px;
        }
        .scroll-indicator-point {
            width: 5px;
            height: 5px;
        }
        .scroll-text { font-size: 11px; }
    }

    /* ═══════════════════════════════════════════════════════════
       📱 RESPONSIVE: MOBILE ( ~768px )
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
        /* 네비 - 햄버거로 전환 */
        #main-nav,
        #content-nav {
            padding: 14px 0;
        }
        #main-nav .inner,
        #content-nav .inner {
            padding: 0 20px;
        }

        /* HOME */
        #home { height: 100vh; height: 100dvh; }

        /* SOLUTIONS - 1컬럼 */
        #solutions { padding: 100px 0 40px; }
        .solutions-wrap {
            padding: 0 20px;
            gap: 40px;
        }
        .solutions-main-title {
            font-size: 38px;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
        }
        .solutions-sub {
            font-size: 16px;
            margin-bottom: 14px;
            line-height: 1.5;
        }
        .solutions-desc-text { font-size: 14px; line-height: 1.7; }

        .solutions-right {
            flex-direction: column;
            gap: 48px;
            width: 100%;
        }
        .sol-col {
            flex: 1 1 auto;
            width: 100%;
            gap: 0;
        }
        .sol-col .sol-item + .sol-item { margin-top: 48px; }
        .sol-col-left  { margin-top: 0; }
        .sol-col-right { margin-top: 0; }
        .sol-item { width: 100%; }
        .sol-img-wrap {
            width: 100%;
            aspect-ratio: 4 / 3;
            height: auto;
            border-radius: 12px;
        }
        .sol-info { padding: 12px 2px 0; gap: 12px; }
        .sol-title { font-size: 17px; }
        .sol-btn {
            width: 100px;
            height: 34px;
            border-radius: 17px;
            font-size: 12px;
            padding: 0 12px;
            gap: 6px;
        }
        .sol-btn .sol-arrow { width: 10px; height: 10px; }

        /* 모바일 hover 효과: 터치에서는 기본적으로 노출 */
        .sol-hover-overlay {
            background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
            padding: 0 0 18px 18px;
            gap: 6px;
        }
        .sol-hover-title {
            font-size: 18px;
            color: #fff;
            transform: translateY(0);
        }
        .sol-hover-desc {
            display: block;
            font-size: 12px;
            line-height: 1.5;
            color: #fff;
            transform: translateY(0);
        }
        .sol-item:hover .sol-hover-overlay {
            background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
        }
        .sol-item:hover img { transform: none; }

        /* PARTNERS — 9:16 세로 모바일 기준
           ─────────────────────────────────────────
           목표 레이아웃 (예: 412×914 viewport):
            • PARTNERS 타이틀: viewport 상단 1/3 지점 (~25vh)
            • 마키: 한 줄에 약 3 로고 표시 × 3 행
            • 하단 빈 공간 자연스럽게 유지

           순수 vh/vw 사용으로 가로/세로 비율 변화에 따라 콘텐츠가 비례 조정됨.
           cell width 30vw → 100vw 안에 약 3개 로고 표시. */
        .partners { padding: 25vh 0 5vh; }
        .partners-header { margin-bottom: 6vh; }
        .partners-header h2   { font-size: 32px; margin-bottom: 2.5vh; }
        .partners-header .sub1 { font-size: 15px; margin-bottom: 1.5vh; }
        .partners-header .sub2 {
            font-size: 12px;
            padding: 0 20px;
            line-height: 1.6;
        }
        /* 셀 크기 1.2배 (사용자 요청) — width 30→36vw, height 7→8.4vh.
           한 줄에 약 2.5~3 로고 표시. */
        .marquee-logo-cell {
            width: 36vw;
            height: 8.4vh;
            padding: 0 1.5vw;
        }
        .marquee-wrapper { gap: 3.5vh; }

        /* CONTACT */
        .contact-header { padding-top: 90px; }
        .contact-header h2   { font-size: 32px; margin-bottom: 18px; }
        .contact-header .sub1 { font-size: 15px; margin-bottom: 10px; }
        .contact-header .sub2 {
            font-size: 12px;
            padding: 0 20px;
            line-height: 1.6;
        }
        .contact-body {
            padding: 0 20px 60px;
            margin-top: 36px;
            gap: 28px;
        }
        .contact-map-wrap { height: 280px; }
        .map-overlay { display: none !important; }

        .form-field-label { font-size: 13px; margin-bottom: 8px; }
        .interest-buttons {
            grid-template-columns: repeat(2, 1fr);
            column-gap: 8px;
            row-gap: 8px;
        }
        .interest-btn {
            height: 40px;
            font-size: 12px;
            border-radius: 6px;
        }
        .contact-info-section { margin-top: 20px; }
        .form-row-3 {
            flex-direction: column;
            gap: 14px;
            align-items: stretch;
        }
        .form-input { height: 42px; font-size: 14px; }
        .contact-email-section { margin-top: 14px; }
.email-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 10px;
    align-items: end;
    height: auto;
    gap: unset;
    flex-wrap: unset;
}
.email-local {
    grid-column: 1; grid-row: 1;
    flex: none;
    width: auto;
    margin: 0;
    height: 42px;
    font-size: 14px;
}
.email-at {
    grid-column: 2; grid-row: 1;
    flex: none;
    width: auto;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    font-size: 16px;
}
.email-domain {
    grid-column: 3; grid-row: 1;
    flex: none;
    width: auto;
    margin: 0;
    height: 42px;
    font-size: 14px;
}
.email-domain-select {
    grid-column: 1 / -1; grid-row: 2;
    flex: none;
    width: 100%;
    margin: 0;
    margin-top: 0;
    height: 42px;
}
        .contact-subject-section,
        .contact-inquiry-section { margin-top: 14px; }
        .form-textarea { height: 100px; font-size: 14px; }
        .privacy-row {
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 14px;
        }
        .privacy-label { font-size: 12px; }
        .privacy-row img#privacy-img {
            width: 14px !important;
            height: 14px !important;
        }
        .privacy-row span[onclick] {
            font-size: 12px !important;
        }
        .contact-submit-wrap { margin-top: 20px; }
        .contact-submit {
            width: 100%;
            max-width: 320px;
            height: 50px;
            font-size: 14px;
            border-radius: 8px;
        }

        /* FOOTER */
        .footer { padding: 32px 0 24px; }
        .footer .inner { padding: 0 20px; }
        .footer-top {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            padding-bottom: 20px;
        }
        .footer-logo img { height: 40px !important; }
        .footer-nav {
            gap: 12px 20px;
            margin-right: 0;
        }
        .footer-nav li a { font-size: 12px; }
        .footer-info p { font-size: 11px; line-height: 1.7; }
        .footer-info .divider { margin: 0 6px; }
        .footer-copy { font-size: 10px; }
        .footer-logo { margin-left: -20px; }

        /* SCROLL INDICATOR */
        .scroll-indicator {
            width: 44px;
            bottom: 32px;
            gap: 6px;
        }
        .scroll-indicator-line {
            width: 20px;
            height: 30px;
            border-radius: 15px;
        }
        .scroll-indicator-point {
            width: 4px;
            height: 4px;
        }
        .scroll-text { font-size: 10px; }
    }

    /* ═══════════════════════════════════════════════════════════
       📱 RESPONSIVE: SMALL MOBILE ( ~480px )
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
        .solutions-main-title { font-size: 32px; }
        .solutions-sub { font-size: 15px; }
        .partners-header h2,
        .contact-header h2 { font-size: 28px; }
        .partners-header .sub1,
        .contact-header .sub1 { font-size: 14px; }

        .marquee-logo-cell {
            width: 120px;
            height: 64px;
            padding: 0 10px;
        }

        .interest-buttons {
            grid-template-columns: 1fr 1fr;
        }

            #main-nav .inner,
    #content-nav .inner {
        padding: 0 16px;
    }

        .email-row { column-gap: 4px; row-gap: 8px; }
.email-at  { font-size: 14px; height: 44px; padding: 0; }
.email-local,
.email-domain,
.email-domain-select { height: 44px; font-size: 13.5px; }
    }

.hero-text-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}
.hero-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    max-width: 1400px;
    padding: 0 24px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.15s ease, visibility 1.15s ease;
}
.hero-text.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 퇴장 중: 컨테이너만 1.15초 페이드아웃 */
.hero-text.is-fading-out {
    opacity: 0;
    visibility: visible;
    transition: opacity 1.15s ease;
}
.hero-text.is-fading-out .char,
.hero-text.is-fading-out .anim-sub {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
}
.hero-text.is-fading-out .anim-text[data-anim="slide-from-right"] {
    transform: none !important;
    transition: none !important;
}
.hero-text-main {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(32px, 4.5vw, 86px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(12px, 1.25vw, 24px) 0;
    word-break: keep-all;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    min-height: 1.15em;
}
.hero-text-main.hero-text-main-big {
    font-size: clamp(22px, 3.5vw, 68px);
    margin: 0;
}
.hero-text-sub {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(14px, 1.5vw, 28px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    margin: 0;
    word-break: keep-all;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    min-height: 1.5em;
}
.hero-text-sub.hero-text-sub-top {
    margin: 0 0 clamp(10px, 1vw, 20px) 0;
}

/* ── 공통: 글자 단위 span ── */
.anim-text {
    display: inline-block;
    white-space: normal;
}
.anim-text .char {
    display: inline-block;
    opacity: 0;
    will-change: transform, opacity;
}
/* 공백 보존 */
.anim-text .char.is-space {
    width: 0.25em;
}

/* ── 서브텍스트 기본 페이드인 (1번/2번 서브용) ── */
.anim-sub {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.7s ease 0.15s;
}
.hero-text.is-visible .anim-sub {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   1번: fade-in-chars — 한 글자씩 페이드인
   ══════════════════════════════════════════════════════════════ */
.anim-text[data-anim="fade-in-chars"] .char {
    transition: opacity 0.45s ease;
}
.hero-text.is-visible .anim-text[data-anim="fade-in-chars"] .char {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   2번: slide-from-right — 우→좌 슬라이드 + 페이드인 (블록 단위)
   ══════════════════════════════════════════════════════════════ */
.anim-text[data-anim="slide-from-right"] .char {
    transform: translateX(200px);
    opacity: 0;
    transition: opacity 0.7s ease,
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-text.is-visible .anim-text[data-anim="slide-from-right"] .char {
    opacity: 1;
    transform: translateX(0);
}
/* 2번은 char를 쓰지 않으므로 블록 전체가 보이도록 */
.anim-text[data-anim="slide-from-right"] .char {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   3번 서브: fly-alternate — 위/아래 번갈아 날아오기 + scale
   ══════════════════════════════════════════════════════════════ */
.anim-text[data-anim="fly-alternate"] .char {
    transform: translateY(-40px) scale(0.3);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-text[data-anim="fly-alternate"] .char.from-below {
    transform: translateY(40px) scale(0.3);
}
.hero-text.is-visible .anim-text[data-anim="fly-alternate"] .char {
    opacity: 1;

    transform: translateY(0) scale(1);
}

/* ══════════════════════════════════════════════════════════════
   3번 메인: spin-chars — 각 글자 팽이 회전
   ══════════════════════════════════════════════════════════════ */
.anim-text[data-anim="spin-chars"] {
    perspective: 800px;
}
.anim-text[data-anim="spin-chars"] .char {
    transform: rotateY(-180deg);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
}
.hero-text.is-visible .anim-text[data-anim="spin-chars"] .char.is-animated {
    opacity: 1;
    transform: rotateY(0deg);
}

/* 모바일: 소형 화면에서 폰트 추가 축소 */
@media (max-width: 480px) {
    .hero-text-main { font-size: clamp(26px, 8vw, 38px); }
    .hero-text-main.hero-text-main-big { font-size: clamp(18px, 5.5vw, 30px); }
    .hero-text-sub { font-size: clamp(12px, 3.5vw, 16px); }
}

/* ═══════════════════════════════════════════════════════════
   📱 모바일 페이지 시스템 보정
   - PC와 동일한 슬라이드 전환 적용 (요구사항)
   - 모바일에서는 transition 시간을 약간 짧게 (0.7s) — 터치 반응성 우선
   - 모바일 전용으로 .partners 의 marquee 가 100dvh 에 맞아야 하므로
     header 마진 조정.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page {
        transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    }
}

/* iOS Safari: address bar 가 표시/숨김에 따라 100vh 가 출렁이는 문제.
   100dvh 가 더 안정적이지만 구형 iOS 는 미지원 → fallback 으로 100vh 유지. */
@supports (height: 100dvh) {
    #page-stage, .page { height: 100dvh; }
}