/* ===== Subtitle (sticky scroll-to-color) ===== */
        .hero-text-outer {
            position: relative;
        }

        .hero-text-inner {
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 10;
        }

        .subtitle-section {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: var(--section-padding-y) 0;
            background: #fff;
        }

        .subtitle-section p {
            width: 100%;
            margin: 0;
            font-size: clamp(32px, 3.125vw, 60px);
            font-weight: 700;
            line-height: 140%;
            color: #E9E9E9;
            text-align: center;
        }

        .subtitle-section p .char {
            transition: color 0.4s ease;
        }

        .subtitle-section p .char.active {
            color: #363636;
        }

        /* 태블릿: 스크롤 인터렉션 텍스트 — 사회경영 히어로와 동일 (24px/700/1.4) */
        @media (min-width: 768px) and (max-width: 1439px) {
            .subtitle-section p { font-size: clamp(24px, 3.125vw, 60px); }
            /* 인트로 간격 — 환경경영 기준 통일 (top 100 / bottom 60) */
            .subtitle-section { padding: 100px 0 60px; }
        }

        /* ===== 연구개발 스토리 ===== */
        .story-section {
            background: #fff;
        }

        .story-section .inner {
            max-width: 1920px;
            margin: 0 auto;
            padding: var(--section-padding-x);
            box-sizing: border-box;
        }

        .section-label {
            font-size: clamp(18px, 1.56vw, 30px);
            font-weight: 700;
            color: #7A7A7A;
            line-height: 140%;
            margin-bottom: clamp(20px, 4.16vw, 80px);
        }

        .story-rows {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(40px, 4.16vw, 80px);
        }

        .story-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            max-width: 1680px;
            gap: clamp(40px, 6.25vw, 120px);
        }

        .story-row.row-text-left {
            justify-content: space-between;
        }

        .story-img {
            flex: 0 0 auto;
            width: clamp(300px, 42.7vw, 820px);
            height: clamp(220px, 31.25vw, 600px);
            min-width: 0;
            border-radius: clamp(16px, 1.56vw, 30px);
            background: #323232;
            position: relative;
            overflow: hidden;
        }

        .story-img::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 1;
        }

        .story-img.lab1::before {
            background: url('../assets/rnd/img_w_tech-planning.png') no-repeat center/cover;
        }

        .story-img.lab2::before {
            background: url('../assets/rnd/img_w_practical-research.png') no-repeat center/cover;
        }

        .story-img.lab3::before {
            background: url('../assets/rnd/img_w_future-innovation.png') no-repeat center/cover;
        }

        .story-ic {
            position: absolute;
            width: clamp(52px, 4.48vw, 86px);
            height: clamp(52px, 4.48vw, 86px);
            left: clamp(20px, 2.08vw, 40px);
            top: clamp(20px, 2.08vw, 40px);
            z-index: 2;
        }

        .story-ic img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .story-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: clamp(20px, 3.125vw, 60px);
            width: clamp(280px, 26vw, 500px);
            height: auto;
            flex: 0 0 auto;
        }

        .story-text.lab3-text {
            height: auto;
        }

        .story-text h2 {
            width: 100%;
            font-size: clamp(24px, 2.6vw, 50px);
            font-weight: 700;
            line-height: 140%;
            color: #000000;
            margin: 0;
        }

        .story-bullets {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            width: 100%;
        }

        .story-bullets li {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 12px;
            min-height: clamp(30px, 2.34vw, 45px);
        }

        .story-bullets li::before {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            background: #7A7A7A;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: clamp(10px, 0.94vw, 18px);
        }

        .story-bullets li span {
            font-size: clamp(16px, 1.25vw, 24px);
            font-weight: 400;
            line-height: 150%;
            color: #4E4E4E;
        }

        /* ===== 연구개발 현장 ===== */
        .scene-section {
            background: #CDEBFB;
            padding: var(--section-padding-y) 0 var(--section-padding-y);
            overflow: hidden;
            width: 100%;
        }

        .scene-section .inner {
            max-width: 1920px;
            margin: 0 auto;
            padding: 0 var(--section-padding-x);
        }

        .scene-gallery-wrap {
            display: flex;
            margin-top: clamp(24px, 2.92vw, 56px);
            width: 100%;
            overflow: hidden;
        }

        .scene-track {
            display: flex;
            align-items: flex-end;
            gap: clamp(16px, 2.08vw, 40px);
            padding-right: clamp(16px, 2.08vw, 40px);
            animation: marquee 30s linear infinite;
            flex-shrink: 0;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0%);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        .scene-img {
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }

        .scene-img.s1 {
            width: clamp(314px, 38.12vw, 732px);
            height: clamp(204px, 24.63vw, 473px);
            border-radius: clamp(16px, 2.6vw, 50px) clamp(16px, 2.6vw, 50px) 0 clamp(16px, 2.6vw, 50px);
            background: url('../assets/rnd/img_rnd-scene-1.png') no-repeat center/cover;
        }

        .scene-img.s2 {
            width: clamp(152px, 18.43vw, 354px);
            height: clamp(167px, 20.26vw, 389px);
            border-radius: 0 clamp(16px, 2.6vw, 50px) clamp(16px, 2.6vw, 50px) clamp(16px, 2.6vw, 50px);
            background: url('../assets/rnd/img_rnd-scene-2.png') no-repeat center/cover;
        }

        .scene-img.s3 {
            width: clamp(380px, 46.09vw, 885px);
            height: clamp(240px, 29.22vw, 561px);
            border-radius: clamp(16px, 2.6vw, 50px) 0 clamp(16px, 2.6vw, 50px) 0;
            background: url('../assets/rnd/img_rnd-scene-3.png') no-repeat center/cover;
        }

        .scene-img.s4 {
            width: clamp(152px, 18.43vw, 354px);
            height: clamp(222px, 26.77vw, 514px);
            border-radius: 0 clamp(16px, 2.6vw, 50px) clamp(16px, 2.6vw, 50px) clamp(16px, 2.6vw, 50px);
            background: url('../assets/rnd/img_rnd-scene-4.png') no-repeat center/cover;
        }

        @media (min-width: 768px) {
            .support-info h3 br {
                display: none;
            }

            .support-info p br.mo-br {
                display: none;
            }
        }

        /* ════════════════════════════════════
           MOBILE — 1023px 이하
           ════════════════════════════════════ */
        @media (max-width: 767px) {

            /* rnd 페이지 body padding-top 제거 (common.css 72px 오버라이드) */
            body[data-page="rnd"] {
                padding-top: 0;
            }





            /* Subtitle */
            .hero-text-outer {
                margin-top: 72px;
            }

            .hero-text-inner {
                top: 0;
            }

            .subtitle-section {
                padding: 40px 16px;
            }

            .subtitle-section p {
                font-size: 24px;
                max-width: 100%;
            }

            /* Story */
            .story-section .inner {
                padding: 40px 16px;
            }

            .section-label {
                font-size: 18px;
                margin-bottom: 20px;
            }

            .story-rows {
                gap: 10px;
            }

            .story-row,
            .story-row.row-text-left {
                flex-direction: column;
                width: 100% !important;
                height: auto;
                gap: 10px;
                align-items: flex-start !important;
            }

            /* 모바일에서 텍스트-왼쪽 행의 순서 반전 (이미지가 먼저 오도록) */
            .story-row.row-text-left {
                flex-direction: column-reverse;
            }

            .story-img {
                width: 100% !important;
                max-width: 100% !important;
                height: 272px;
                border-radius: 16px;
            }

            .story-ic {
                width: 52px;
                height: 52px;
                left: 16px;
                top: 16px;
            }

            .story-text {
                width: 100% !important;
                max-width: 100% !important;
                flex: none;
                height: auto;
                gap: 30px;
                padding: 20px 0;
            }

            .story-text.lab3-text {
                height: auto !important;
                padding-top: 20px;
                padding-bottom: 0;
            }

            .story-text h2 {
                width: 100%;
                font-size: 24px;
            }

            .story-bullets {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
                width: 100%;
            }

            .story-bullets li {
                min-height: auto;
                gap: 8px;
            }

            .story-bullets li::before {
                width: 4px;
                height: 4px;
                margin-top: 8px;
            }

            .story-bullets li span {
                font-size: 16px;
            }

            /* Scene */
            .scene-section {
                padding: 40px 0;
                height: 379px;
                box-sizing: border-box;
            }

            .scene-section .inner {
                padding: 0 16px;
            }

            .scene-gallery-wrap {
                margin-top: 24px;
            }

            .scene-track {
                gap: 8px;
                padding-right: 8px;
            }

            .scene-img.s1 {
                width: 314px;
                height: 204px;
                /* 오른쪽 아래 라운드 0 */
                border-radius: 16px 16px 0 16px;
            }

            .scene-img.s2 {
                width: 152px;
                height: 167px;
                /* 왼쪽 위 라운드 0 */
                border-radius: 0 16px 16px 16px;
            }

            .scene-img.s3 {
                width: 380px;
                height: 240px;
                /* 왼쪽 아래 + 오른쪽 위 라운드 0 */
                border-radius: 16px 0 16px 0;
            }

            .scene-img.s4 {
                width: 152px;
                height: 222px;
                /* 왼쪽 위 라운드 0 */
                border-radius: 0 16px 16px 16px;
            }
        }