/* ========================================
   Solutions — public solutions.css
   /solutions/* (ICT · 반도체 등) pageRenderer 공통
   TITLE · SUBJECT · IMAGE · MEDIA_TEXT(HEADER) · DEVELOPER(nav) · FOOTER
   ======================================== */
/* ========================================
   공통 — .page-content (ICT · 반도체 등)
   ======================================== */
   .page-content {
    margin: 0 auto;
    background: #f8fafb;
    font-family: 'Pretendard';
    font-style: normal;
    --company-content-max: 1320px;
    --layout-ref-width: 1920;
    --company-inline-gutter: clamp(20px, 4vw, 40px);
    --company-content-inset: max(var(--company-inline-gutter), calc((100vw - var(--company-content-max)) / 2));
    --company-narrow-inline: clamp(20px, 4vw, 24px);
    --company-narrow-inline-tight: clamp(16px, 4vw, 24px);
    --company-padding-block: 40px;

    @media (max-width: 768px) {
        .media-text-body-block[data-field-key='bullets'],
        .media-text-key-bullets {
            word-break: break-all;
        }
    }

    /* ── SECTION_TITLE — 섹션 블록 제목 (eyebrow + body · 좌측 · 본문 앞 구역 헤더) */
    section.SECTION_TITLE[class*='-hero'] {
        box-sizing: border-box;
        background: transparent;
        margin: 0;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter)
            clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
        text-align: left;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-hero-inner'] {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
            text-align: left;
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #2568F9;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-body-block[data-field-key='headline'],
        .media-text-key-body,
        .media-text-key-headline {
            margin: 0;
            font-weight: 600;
            font-size: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 160%;
            letter-spacing: -0.02em;
            color: #1c1b20;
            word-break: keep-all;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                letter-spacing: inherit;
                color: inherit;
            }
        }
    }

    /* ── TITLE */
    section.TITLE[class*='-hero'] {
        text-align: center;
        padding: clamp(48px, 4vw, 100px) var(--company-narrow-inline);
        box-sizing: border-box;
        margin: 10px 0;

        @media (max-width: 768px) {
            padding-block: 0;
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-hero-inner'] {
            max-width: min(1000px, 100%);
            margin-left: auto;
            margin-right: auto;

            > div {
                font-weight: 700;
                font-size: clamp(28px, 1.25rem + 2vw, 40px);
                line-height: 160%;
                text-align: center;
                color: #000000;
                letter-spacing: -0.02em;
                margin: 0;
            }
        }
    }

    /* ── SUBJECT 히어로 (연혁·인증·문의 등 공통) — 1920 기준 padding-top 140px · bottom 60px */
    section.SUBJECT[class*='-hero'] {
        text-align: center;
        padding-top: clamp(40px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
        padding-bottom: clamp(24px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
        padding-inline: var(--company-narrow-inline);
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            padding-block: 40px;
            [class*='-hero-inner'] {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 18px;
            }
        }

        [class*='-hero-inner'] {
            max-width: min(1320px, 100%);
            margin-left: auto;
            margin-right: auto;

            > div:not(.media-text-body-block) {
                font-weight: 700;
                font-size: clamp(28px, 1.25rem + 2vw, 40px);
                line-height: 160%;
                text-align: center;
                color: #000000;
                letter-spacing: -0.02em;
                margin: 0;
            }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            width: 100%;
            font-weight: 700;
            font-size: clamp(28px, 1.25rem + 2vw, 40px);
            line-height: 160%;
            text-align: center;
            color: #000000;
            letter-spacing: -0.02em;
            margin: 0 0 0.75rem;

            @media (max-width: 768px) {
                margin: 0;
            }

            @media (max-width: 430px) {
                font-weight: 600;
                font-size: 24px;
                line-height: 160%;
            }

            > p { margin: 0; font: inherit; letter-spacing: inherit; }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            width: 100%;
            font-weight: 600;
            font-size: clamp(11px, 1.85vw + 0.55rem, 24px);
            line-height: 160%;
            text-align: center;
            color: #2C4777;
            margin: 0;

            @media (max-width: 768px) {
                font-size: clamp(11px, 0.75vw + 0.6rem, 13px);
                word-break: break-all;
            }

            @media (max-width: 430px) {
                font-weight: 600;
                font-size: 12px;
                line-height: 160%;
            }

            > p { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
            &:last-child { margin-bottom: 0; }
        }
    }

    /**
     * FOOTER 
     */
     section.FOOTER {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: #f8fafc;

        [class*='-media-text-wrap'].media-text-wrap {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            min-height: clamp(220px, 28vh, 380px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 48px);
        }

        .media-text-media {
            position: absolute;
            inset: 0;
            z-index: 0;
            background-color: #071525;
            background-image:
                radial-gradient(ellipse 90% 65% at 15% 20%, rgba(59, 130, 246, 0.22) 0%, transparent 55%),
                radial-gradient(ellipse 70% 50% at 85% 75%, rgba(37, 99, 235, 0.18) 0%, transparent 50%),
                linear-gradient(165deg, #050d18 0%, #0c1c33 42%, #071220 100%);

            &::before {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 0;
                pointer-events: none;
                opacity: 0.55;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%233b82f6' stroke-opacity='0.22' stroke-width='1.2' d='M0 220 Q200 180 400 210 T800 200 T1200 230'/%3E%3Cpath fill='none' stroke='%2360a5fa' stroke-opacity='0.18' stroke-width='0.9' d='M0 260 Q250 300 500 250 T1000 270 T1200 240'/%3E%3Cpath fill='none' stroke='%233b82f6' stroke-opacity='0.14' stroke-width='0.8' d='M0 140 Q300 100 600 150 T1200 120'/%3E%3Cpath fill='none' stroke='%2393c5fd' stroke-opacity='0.12' stroke-width='0.7' d='M0 320 Q400 360 800 300 T1200 340'/%3E%3C/svg%3E");
                background-size: cover;
                background-position: center;
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 1;
                pointer-events: none;
                background: linear-gradient(
                    180deg,
                    rgba(5, 13, 24, 0.25) 0%,
                    transparent 35%,
                    transparent 65%,
                    rgba(5, 13, 24, 0.35) 100%
                );
            }

            img,
            .media-text-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
                z-index: 0;
            }

            &:has(img)::before,
            &:has(.media-text-video)::before {
                opacity: 0.35;
            }

            &:has(img)::after,
            &:has(.media-text-video)::after {
                background: linear-gradient(
                    105deg,
                    rgba(7, 18, 35, 0.82) 0%,
                    rgba(7, 18, 35, 0.45) 50%,
                    rgba(7, 18, 35, 0.55) 100%
                );
            }
        }

        .media-text-copy {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: min(1320px, 100%);
            margin: 0 auto;
            text-align: center;
            text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
        }

        .media-text-body-block {
            /* PC/BoldyL — 18px, line-height 160%, weight 400 (.FOOTER 에서 Pretendard 상속) */
            font-size: clamp(15px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            font-weight: 400;
            line-height: 1.6;
            letter-spacing: normal;
            text-align: center;
            color: #fff;
            word-break: keep-all;

            br {
                display: block;
                margin-top: 0.65em;
            }
        }

        .media-text-key-headline,
        .media-text-body-block[data-field-key='headline'] {
            margin: 0 auto;
            max-width: 100%;
            word-break: normal;
            overflow-wrap: break-word;
            font-weight: 700;
            font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 1.6;
            letter-spacing: normal;
            text-align: center;
            color: #fff;
            margin-bottom: 12px;
        }

        .media-text-key-body,
        .media-text-body-block[data-field-key='body'] {
            margin: 0;
        }

        .media-text-key-body + .media-text-key-body,
        .media-text-body-block[data-field-key='body'] + .media-text-body-block[data-field-key='body'] {
            margin-top: 0.65em;
        }

        .media-text-action-wrap {
            margin: clamp(1.5rem, 3.2vw, 2.25rem) 0 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        .media-text-primary-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: clamp(6px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
            min-width: clamp(112px, calc(100vw * 128 / var(--layout-ref-width)), 128px);
            width: fit-content;
            height: clamp(40px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
            padding: 0 clamp(20px, calc(100vw * 36 / var(--layout-ref-width)), 36px);
            white-space: nowrap;
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 1.2;
            color: #1c1b20;
            text-decoration: none;
            background: #ffffff;
            border: none;
            border-radius: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            box-shadow: 0 clamp(3px, calc(100vw * 4 / var(--layout-ref-width)), 4px)
                clamp(14px, calc(100vw * 20 / var(--layout-ref-width)), 20px) rgba(0, 0, 0, 0.18);
            text-shadow: none;
            transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease,
                box-shadow 0.18s ease;

            &:hover {
                background: #0f64c0;
                color: #ffffff;
                transform: translateY(-1px);
                box-shadow: 0 clamp(6px, calc(100vw * 8 / var(--layout-ref-width)), 8px)
                    clamp(22px, calc(100vw * 28 / var(--layout-ref-width)), 28px) rgba(15, 100, 192, 0.35);
            }
        }

        .media-text-action-arrow {
            display: none;
        }

        @media (max-width: 768px) {
            text-align: center;
            color: #ffffff;

            [class*='-media-text-wrap'].media-text-wrap {
                min-height: min(52vh, 184px);
                padding: clamp(40px, 10vw, 56px) clamp(20px, 5vw, 24px);
            }

            .media-text-key-headline,
            .media-text-body-block[data-field-key='headline'] {
                font-size: clamp(18px, calc(100vw * 40 / var(--layout-ref-width)), 32px);
                font-weight: 600;
                line-height: 140%;
            }

            .media-text-body-block:not([data-field-key='headline']) {
                font-size: clamp(12px, 3.35vw, 18px);
                line-height: 160%;
                font-weight: 400;
            }
        }
    }


    /* ── IMAGE — 공통 패딩 · 최대 1320 · 이미지 100% */
    section.IMAGE[class*='-image-section'] {
        box-sizing: border-box;
        padding:
            clamp(40px, calc(100vw * 48 / var(--layout-ref-width)), 48px)
            var(--company-inline-gutter);
        text-align: center;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        img {
            width: 100%;
            max-width: var(--company-content-max);
            height: auto;
            display: block;
            margin-inline: auto;
        }
    }

    /* ── HEADER 히어로 (MEDIA_TEXT + .HEADER, about·history 공통) */
    section.HEADER[class*='-media-text-section'] {
        --about-hero-h: min(600px, 100dvh, 100vh);
        position: relative;
        overflow: hidden;
        width: 100%;
        min-height: var(--about-hero-h);
        height: var(--about-hero-h);
        color: #ffffff;
        box-sizing: border-box;

        @media (max-width: 768px) {
            --about-hero-h: min(560px, 100dvh, 100vh);
            max-height: none;
        }

        [class*='-media-text-wrap'].media-text-wrap {
            position: relative;
            z-index: 1;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            min-height: var(--about-hero-h);
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            padding: clamp(80px, 14vh, 120px) var(--company-content-inset) clamp(48px, 8vh, 80px)
                var(--company-content-inset);

            @media (max-width: 768px) {
                align-items: flex-start;
                justify-content: center;
                padding: clamp(88px, 22vw, 140px) var(--company-content-inset) clamp(40px, 8vw, 56px);
                min-height: var(--about-hero-h);
            }
        }

        .media-text-media {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            min-height: 100%;
            z-index: 0;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

            img,
            .media-text-video {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 1;
                background: linear-gradient(
                    100deg,
                    rgba(15, 23, 42, 0.9) 0%,
                    rgba(15, 23, 42, 0.55) 48%,
                    rgba(15, 23, 42, 0.25) 100%
                );
            }
        }

        .media-text-copy {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: min(75rem, 100%);
            min-width: 0;
            flex: 0 1 auto;
            align-self: flex-start;
            text-align: left;
            font-weight: 400;
            word-break: keep-all;
            text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);

            @media (max-width: 768px) {
                max-width: 100%;
                text-align: left;
            }
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            width: 100%;
            font-weight: 500;
            font-size: clamp(1.125rem, 0.9vw + 0.95rem, 1.5rem);
            line-height: 160%;
            margin: 0 0 0.5rem;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }

            > p { margin: 0; font: inherit; }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            width: 100%;
            font-weight: 500;
            font-size: clamp(1.75rem, 2.46vw + 1.05rem, 4rem);
            line-height: 150%;
            margin: 0 0 1.25rem;
            letter-spacing: -0.03em;

            @media (max-width: 768px) {
                font-size: clamp(32px, calc(100vw * 32 / 390), 36px);
                line-height: 140%;
            }

            > p { margin: 0; font: inherit; letter-spacing: inherit; }
        }

        .media-text-body-block[data-field-key='summary'],
        .media-text-key-summary {
            width: 100%;
            font-weight: 500;
            font-size: clamp(16px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            letter-spacing: -0.01em;

            @media (max-width: 768px) {
                font-weight: 500;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
                word-break: break-all;
            }

            > p { margin: 0; font: inherit; letter-spacing: inherit; }
        }

        /* 피그마 arrow-button: 192×48 · 1px solid #74757E · radius 30 — 다크 HEADER 히어로용 변형.
           - `.media-text-copy` 가 `text-align: left` 이므로 action-wrap 도 좌측 정렬
           - 다크 배경 + 흰 텍스트 컨텍스트 → 그레이 outline + 흰 텍스트, hover 시 흰 fill + 네이비 텍스트
           - 부모의 `text-shadow` 상속 끄기(`text-shadow: none`) — 버튼 텍스트는 또렷하게
           - 사이즈 clamp 로 모바일 축소(192→160, 48→44, padding 36→20)
           - 화살표는 main.css 와 동일한 mask SVG 기법(currentColor 추종) */
        .media-text-action-wrap {
            margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
            padding: 0;
            display: flex;
            justify-content: flex-start;
        }

        .media-text-primary-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            min-width: clamp(160px, 14vw, 192px);
            height: clamp(44px, 4vw, 48px);
            padding: 0 clamp(20px, 2vw, 36px);
            font-weight: 500;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #ffffff;
            text-decoration: none;
            text-shadow: none;
            background: transparent;
            border: 1px solid #74757E;
            border-radius: 30px;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;

            &:hover {
                background: #ffffff;
                color: #162d55;
                border-color: #ffffff;
            }
        }

        .media-text-action-arrow {
            display: none;
          /*   display: inline-block;
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            background-color: currentColor;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.83333%2011L11%206L6.83333%201M11%206H1%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.83333%2011L11%206L6.83333%201M11%206H1%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center; */
        }
    }

    /* ── NAV 탭 (DEVELOPER sectionData.nav)
       PC 한정으로 sticky 적용 — hero 통과 후 헤더 바로 아래에 붙어 고정.
       - top: --public-header-height (header.css :root 에서 정의) → 헤더 하단에 정확히 정렬
       - z-index 997: 헤더(1000) 아래 + PC 메가메뉴(.gnb-dropdown, 998) 아래로 두어
         메가메뉴 열렸을 때 nav 가 메가메뉴를 가리지 않도록 한다
       - background: #fff → sticky 후 본문이 비치지 않도록 불투명 처리
       - 모바일(≤430) 에서는 sticky 해제 → 원래 자연 흐름 위치 유지 */
    section[class*='-list-section'].NAV {
        @media (min-width: 769px) {
            position: sticky;
            top: var(--public-header-height);
            z-index: 997;
            background: #F8FAFB;
        }

        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;

        > [class*='-list-content'] {
            max-width: calc(var(--company-content-max) + (var(--company-inline-gutter) * 2));
            margin: 0 auto;
            padding: 0 var(--company-inline-gutter);
            box-sizing: border-box;

            @media (max-width: 430px) {
                padding-inline: var(--company-inline-gutter);
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                scroll-padding-inline: var(--company-inline-gutter);
                scrollbar-width: none;

                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }

        .public-list-tree {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            list-style: none;
            margin: 0;
            padding: 0;
            box-sizing: border-box;

            @media (max-width: 430px) {
                justify-content: flex-start;
                gap: 0;
                width: max-content;
                min-width: 100%;
                padding: 0;
                margin: 0;
            }
        }

        li.public-list-item {
            flex: 0 0 auto;
            min-width: 0;
            margin: 0 !important;
            margin-left: 0 !important;
            margin-bottom: 0 !important;
            list-style: none;

            @media (max-width: 430px) {
                min-width: max-content;
            }
        }

        .public-list-item-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: stretch;

            @media (max-width: 430px) {
                width: max-content;
                padding: 0px 18px 0px;
                height: 51px;
            }
        }

        .public-list-item-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-height: 76px;

            @media (max-width: 430px) {
                flex: 0 0 auto;
                align-items: center;
                width: max-content;
                height: 51px;
                min-height: 51px;
                max-height: 51px;
            }

            a {
                position: relative;
                flex: 0 0 auto;
                align-self: flex-start;
                min-width: 152px;
                height: 76px;
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 0 24px;
                font-size: clamp(0.875rem, 0.35vw + 0.8rem, 0.9375rem);
                font-weight: 500;
                color: #6b7280;
                text-decoration: none;
                transition: color 0.15s ease, background-color 0.15s ease;
                box-sizing: border-box;

                @media (max-width: 430px) {
                    align-self: center;
                    flex-shrink: 0;
                    flex-direction: row;
                    width: max-content;
                    min-width: max-content;
                    height: 51px;
                    min-height: 51px;
                    max-height: 51px;
                    padding: 0 12px;
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 160%;
                    color: #47454f;
                    white-space: nowrap;
                    word-break: keep-all;
                }
            }
        }

        li.public-list-item:not(.public-list-item--active) .public-list-item-text a:hover {
            color: #162d55;
            background-color: #DCEBF9;
        }

        li.public-list-item--active .public-list-item-text a,
        .public-list-item-text a[aria-current='page'] {
            color: #162d55;
            font-weight: 600;
            background-color: transparent;

            /* 밑줄 = 링크(패딩 포함) 가로 전체 — width 고정 시 긴 라벨에서 짧아 보임 */
            &::after {
                content: '';
                position: absolute;
                left: 24px;
                right: 24px;
                bottom: 0;
                width: auto;
                height: 6px;
                background: #0F64C0;
                border-radius: 10px;

                @media (max-width: 430px) {
                    /* 링크 패딩(12px) 포함 — 탭 전체보다 살짝 짧게 */
                    left: 0;
                    right: 0;
                    height: 4px;
                    border-radius: 10px;

                }
            }

            &:hover {
                color: #0f2347;
                background-color: #DCEBF9;
            }
        }
    }
}

/* ========================================
   솔루션 허브 — /solutions/hub 
   ======================================== */
body.solutions-hub .page-content {
    section.HUB_HEADER {
        --hub-hero-h: min(900px, 100dvh, 100vh);
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        min-height: var(--hub-hero-h);
        height: var(--hub-hero-h);
        color: #ffffff;
        background:
            radial-gradient(ellipse 80% 60% at 16% 12%, rgba(99, 102, 241, 0.3) 0%, transparent 55%),
            radial-gradient(ellipse 75% 65% at 88% 84%, rgba(37, 99, 235, 0.28) 0%, transparent 55%),
            linear-gradient(150deg, #0a1024 0%, #141a35 46%, #1b2552 100%);

        @media (max-width: 768px) {
            /* 히어로 1스크린 — 카피 상단 · 카드 하단 (wrap flex + cards margin-top:auto) */
            height: auto;
            min-height: 100dvh;
            min-height: 100svh;
        }

        /* 선택 배경 미디어 — 없으면 위 그라데이션만 노출 */
        .hub-hero-media {
            position: absolute;
            inset: 0;
            z-index: 0;

            img,
            video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 1;
                pointer-events: none;
                background: linear-gradient(
                    150deg,
                    rgba(10, 16, 36, 0.92) 0%,
                    rgba(20, 26, 53, 0.72) 46%,
                    rgba(27, 37, 82, 0.55) 100%
                );
            }
        }

        /* 헤더(.header-container)와 동일한 가로 정렬:
           max-width 1320 + gutter*2 · margin auto · padding-inline = --company-inline-gutter.
           (content-inset 와 같이 쓰면 인셋이 이중 적용돼 콘텐츠가 헤더 로고보다 안쪽으로 밀림) */
        .hub-hero-wrap {
            position: relative;
            z-index: 1;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            min-height: var(--hub-hero-h);
            max-width: calc(var(--company-content-max) + (var(--company-inline-gutter) * 2));
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: clamp(40px, 6vh, 80px);
            padding: 140px var(--company-inline-gutter) 60px;

            @media (max-width: 768px) {
                min-height: 100dvh;
                min-height: 100svh;
                justify-content: flex-start;
                gap: 0;
            }
        }

        /* ── 상단 카피 (eyebrow · headline · summary · description) */
        .hub-hero-copy {
            max-width: min(60rem, 100%);
            word-break: keep-all;
            text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
            flex-shrink: 0;
        }

        .hub-hero-eyebrow {
            margin: 0 0 clamp(12px, 1.6vh, 20px);
            font-weight: 500;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }
        }

        .hub-hero-headline {
            margin: 0 0 clamp(14px, 2vh, 24px);
            font-weight: 400;
            font-size: clamp(32px, calc(100vw * 64 / var(--layout-ref-width)), 64px);
            line-height: 150%;
            letter-spacing: -0.03em;

            @media (max-width: 768px) {
                font-weight: 500;
                font-size: clamp(32px, calc(100vw * 32 / 390), 36px);
                line-height: 140%;
            }
        }

        .hub-hero-summary {
            margin: 0 0 clamp(12px, 1.6vh, 18px);
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .hub-hero-desc {
            margin: 0;
            font-weight: 300;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }
        }

        /* ── 하단 2카드 (반도체 / 정보통신)
           카피는 1320 컨텐츠 폭이지만 카드 영역만 "거의 풀화면"으로 확장.
           - .hub-hero-wrap 이 뷰포트 중앙 정렬이므로 full-bleed 트릭(width:100vw + margin-inline calc) 사용
           - 양옆은 뷰포트 기준 32px 만 띄움 → layout-ref 에서 1856px 폭
           - layout-ref 초과(빔·초대형): 카드 영역만 max layout-ref · 뷰포트 가운데 정렬 유지
           - 모바일(≤768)은 풀블리드 해제하고 카피와 동일 정렬 */
        .hub-hero-cards {
            box-sizing: border-box;
            width: min(100vw, calc(var(--layout-ref-width) * 1px));
            margin-inline: calc(50% - min(50vw, calc(var(--layout-ref-width) * 0.5px)));
            padding-inline: 32px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, 1.5vw, 24px);

            @media (max-width: 768px) {
                width: auto;
                margin-inline: 0;
                margin-top: auto;
                padding-inline: 0;
                padding-top: clamp(40px, 12vh, 120px);
                grid-template-columns: 1fr;
                gap: clamp(12px, 3vw, 16px);
                flex-shrink: 0;
            }
        }

        /* 풀화면(1920) 기준 고정값: 916×300 · padding 60/100 · gap 20 · radius 24.
           폭(916)은 full-bleed(1856) 2열 그리드 + gap 24 로 자동 산출되므로 따로 지정 안 함.
           높이·패딩·gap 은 clamp 로 축소, border/그림자/배경은 카드별로 다름. */
        .hub-hero-card {
            position: relative;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            height: clamp(260px, calc(260px + (100vw - 769px) * 40 / 1151), 300px);
            padding: clamp(28px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
                clamp(24px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
            border: 2px solid transparent;
            border-radius: 24px;
            color: #ffffff;
            text-decoration: none;
            overflow: hidden;
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;


            @media (max-width: 768px) {
                height: auto;
                gap: 8px;
                padding: 24px;
                border-radius: 12px;
            }
        }

        .hub-hero-card--semi {
            background: linear-gradient(90deg, rgba(24, 49, 124, 0.8) 0%, rgba(53, 77, 173, 0.8) 100%);

            @media (max-width: 768px) {
                border: 2px solid #2568f9;
                box-shadow: 0px 0px 40px rgba(37, 104, 249, 0.6);
            }
        }

        /* 호버 시 컬러 보더 + 글로우 (base 의 2px transparent 보더 위에 색만 입혀 size 변화 최소화) */
        .hub-hero-card--semi:hover {
            border-color: #2568f9;
            box-shadow: 0px 0px 40px rgba(37, 104, 249, 0.6);
        }

        .hub-hero-card--ict {
            background: linear-gradient(90deg, rgba(27, 112, 118, 0.8) 0%, rgba(22, 45, 85, 0.8) 100%);

            @media (max-width: 768px) {
                border: 1px solid #00acac;
                box-shadow: 0px 0px 40px rgba(0, 172, 172, 0.32);
            }
        }

        .hub-hero-card--ict:hover {
            border: 1px solid #00acac;
            box-shadow: 0px 0px 40px rgba(0, 172, 172, 0.32);
        }

        .hub-hero-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .hub-hero-card-title {
            margin: 0;
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
        }

        .hub-hero-card-arrow {
            flex-shrink: 0;
            width: clamp(24px, 1.6vw, 24px);
            height: clamp(24px, 1.6vw, 24px);
            background-color: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M9%205l7%207-7%207'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E")
                center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M9%205l7%207-7%207'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E")
                center / contain no-repeat;
            transition: transform 0.25s ease;
        }


        .hub-hero-card-desc {
            margin: 0;
            font-weight: 500;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #ffffff;
            @media (max-width: 768px) {
              margin-bottom: 20px;
            }
        }

        .hub-hero-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: auto;

            @media (max-width: 768px) {
                gap: 7px;
            }
        }

        .hub-hero-card-tag {
            display: inline-flex;
            align-items: center;
            padding: clamp(5px, 0.5vw, 7px) clamp(10px, 1vw, 14px);
            font-weight: 500;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 120%;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.14);
            color: #ffffff;
            white-space: nowrap;

            @media (max-width: 768px) {
                padding: 4px 12px;
                font-weight: 400;
                font-size: 12px;
                line-height: 160%;
            }
        }

        .hub-hero-card--semi .hub-hero-card-tag {
            background: #2568F9;
        }

        .hub-hero-card--ict .hub-hero-card-tag {
            background: #00ACAC;
        }
    }

    /** SUBJECT */
    section.SUBJECT[class*='-hero'] {
        padding-top: 0;
    }

    /* ── PARTNER_LOGOS — main 과 동일한 무한 스크롤 마퀴 (모바일에서도 동일하게 마퀴 유지). */
    .solutions-list-section.PARTNER_LOGOS {
        width: 100%;
        margin-bottom: clamp(48px, calc(100vw * 140 / var(--layout-ref-width)), 140px);

        .partner-logos-marquee {
            width: 100%;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(
                90deg,
                transparent,
                #000 12px,
                #000 calc(100% - 12px),
                transparent
            );
            mask-image: linear-gradient(
                90deg,
                transparent,
                #000 12px,
                #000 calc(100% - 12px),
                transparent
            );
        }

        .partner-logos-viewport {
            width: 100%;
            overflow: hidden;
        }

        .partner-logos-anim {
            display: flex;
            width: max-content;
            animation: solutions-hub-partner-logos-marquee 50s linear infinite;
        }

        .partner-logos-track {
            display: flex;
            flex-shrink: 0;
            align-items: center;

            .public-list-tree {
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                list-style: none;
                margin: 0;
                padding: 0 clamp(6px, 1.5vw, 12px);
            }
        }

        .public-list-item {
            flex: 0 0 auto;
            margin: 0;
            list-style: none;
        }

        .public-list-item-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: clamp(130px, calc(100vw * 200 / var(--layout-ref-width)), 200px);
            height: clamp(100px, calc(100vw * 120 / var(--layout-ref-width)), 120px);
            padding: 0 clamp(12px, calc(100vw * 50 / var(--layout-ref-width)), 50px);
            border-radius: 8px;
        }

        .public-list-item-label {
            display: none;
        }

        .public-list-item-image {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: clamp(80px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
            height: clamp(40px, calc(100vw * 50 / var(--layout-ref-width)), 50px);
        }

        .public-list-item-image img {
            display: block;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            transition: filter 0.22s ease;
        }

        @media (hover: hover) {
            .public-list-item-image img {
                filter: grayscale(1);
            }

            .public-list-item:hover .public-list-item-image img {
                filter: none;
            }
        }

        .public-list-item-text {
            font-size: clamp(13px, 2.8vw, 15px);
            font-weight: 600;
            color: #18181b;
            text-align: center;
            line-height: 1.3;
            word-break: keep-all;

            &:empty {
                display: none;
            }
        }

    }

    /* ── SEMICONDUCTOR — uiKind=LIST. 피처 카드(이미지 위 텍스트) + 2열 미니 카드 그리드.
       배경은 투명(페이지 배경 그대로), 카드만 각자 배경. solutions-hub.js 가 .semi-* 마크업 렌더. */
    .solutions-list-section.SEMICONDUCTOR {
        width: 100%;
        margin-bottom: clamp(48px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
        margin-top: 20px;
        .semi-products {
            box-sizing: border-box;
            max-width: calc(var(--company-content-max) + (var(--company-inline-gutter) * 2));
            margin: 0 auto;
            padding-inline: var(--company-inline-gutter);
            display: flex;
            flex-direction: column;
            gap: clamp(20px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
        }

        .semi-product-card {
            position: relative;
            box-sizing: border-box;
            border-radius: 24px;
            overflow: hidden;
            text-decoration: none;
            transition: transform 0.25s ease, box-shadow 0.25s ease;

            &:hover {
                box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
            }
        }

        /* 피처(큰) 카드 — 배경 이미지 + 우측 그라데이션 + 우측 정렬 텍스트 */
        .semi-product-card--featured {
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            min-height: clamp(360px, calc(100vw * 600 / var(--layout-ref-width)), 600px);
            padding: clamp(32px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
                clamp(28px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            color: #ffffff;

            .semi-product-media {
                position: absolute;
                inset: 0;
                z-index: 0;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    display: block;
                    transition: transform 0.45s ease;
                }

                &::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(
                        90deg,
                        rgba(28, 27, 32, 0) 0%,
                        rgba(28, 27, 32, 0.4) 100%
                    );
                }
            }

            .semi-product-body {
                position: relative;
                z-index: 1;
                max-width: min(680px, 100%);
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                text-align: right;
                gap: clamp(8px, 1vw, 16px);
                text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
            }

            &:hover .semi-product-media img {
                transform: scale(1.06);
            }
        }

        /* 미니(작은) 카드 — 좌 텍스트 · 우측 배경 이미지 (모바일은 @768 에서만 덮음) */
        .semi-products-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, 1.5vw, 24px);
            align-items: stretch;
        }

        .semi-product-card--mini {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 12px;
            min-height: clamp(150px, calc(100vw * 200 / var(--layout-ref-width)), 200px);
            padding-top: 40px;
            padding-bottom: 40px;
            padding-left: clamp(24px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            padding-right: 0;
            border: 1px solid #c4c7d0;
            border-radius: 24px;
            background-color: #eff2f6;
            background-image: var(--semi-mini-bg-image, none);
            background-repeat: no-repeat;
            background-position: right center;
            background-size: auto 100%;
            color: #1c1b20;

            .semi-product-body {
                position: relative;
                z-index: 1;
                flex: 0 1 auto;
                min-width: 0;
                max-width: min(80%, 100%);
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                text-align: left;
                gap: 12px;
                padding-bottom: 20px;
            }
        }

        /* Hybrid — 우측 +20px · 상하 살짝 크롭 */
        .semi-product-card--mini.semi-product-card--hybrid,
        .semi-products-grid > .semi-product-card--mini:nth-child(1) {
            background-position: calc(100% + 40px) center;
            background-size: auto 120%;
        }

        /* SoW — 우측 하단 딱 붙임 · 이미지 위 여백(카드 높이 비율) */
        .semi-product-card--mini.semi-product-card--sow,
        .semi-products-grid > .semi-product-card--mini:nth-child(2) {
            background-position: right calc(100% + 20px);
            background-size: auto calc(100%);
        }

        .semi-product-card--mini.semi-product-card--hybrid,
        .semi-product-card--mini.semi-product-card--sow,
        .semi-products-grid > .semi-product-card--mini:nth-child(1),
        .semi-products-grid > .semi-product-card--mini:nth-child(2) {
            background-color: #eff2f6;
            border-color: #c4c7d0;
            color: #1c1b20;

            .semi-product-desc {
                color: #5b5961;
            }

            .semi-product-action {
                color: #2568f9;
            }
        }

        .semi-product-card--mini.semi-product-card--hybrid:hover,
        .semi-product-card--mini.semi-product-card--sow:hover,
        .semi-products-grid > .semi-product-card--mini:nth-child(1):hover,
        .semi-products-grid > .semi-product-card--mini:nth-child(2):hover {
            background-color: #354dad;
            color: #ffffff;

            .semi-product-desc {
                color: rgba(255, 255, 255, 0.82);
            }

            .semi-product-action {
                color: #ffffff;
            }
        }

        /* ── 카드 내부 타이포 */
        .semi-product-eyebrow {
            margin: 0;
            font-weight: 500;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: rgba(255, 255, 255, 0.85);
        }

        .semi-product-title {
            margin: 0;
            font-weight: 600;
            line-height: 160%;
            letter-spacing: -0.02em;
        }

        .semi-product-card--featured .semi-product-title {
            font-size: clamp(30px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
        }

        .semi-product-card--mini .semi-product-title {
            font-weight: 600;
            font-size: clamp(22px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
        }

        .semi-product-desc {
            margin: 0;
            font-weight: 300;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
        }

        .semi-product-card--featured .semi-product-desc {
            color: rgba(255, 255, 255, 0.82);
        }

        .semi-product-card--mini .semi-product-desc {
            color: rgba(255, 255, 255, 0.82);
        }

        /* ── "자세히 보기" 액션 */
        .semi-product-action {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 120%;
            color: #ffffff;
            white-space: nowrap;
        }

        .semi-product-action-arrow {
            display: inline-block;
            width: 10px;
            height: 10px;
            flex-shrink: 0;
            vertical-align: middle;
            background-color: currentColor;
            -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.83333%2011L11%206L6.83333%201M11%206H1%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
            mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.83333%2011L11%206L6.83333%201M11%206H1%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            transition: transform 0.25s ease;
        }

        /* 미니 카드 액션은 셰브론(>) 6×12 */
        .semi-product-card--mini .semi-product-action-arrow {
            width: 6px;
            height: 12px;
            -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1%201L5%206L1%2011%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
            mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1%201L5%206L1%2011%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
        }

        .semi-product-card:hover .semi-product-action-arrow {
            transform: translateX(4px);
        }

        /* 피처 카드 액션은 파란 pill 버튼 */
        .semi-product-card--featured .semi-product-action {
            margin-top: clamp(10px, 1.5vw, 20px);
            padding: clamp(10px, 1vw, 14px) clamp(20px, 2vw, 32px);
            background: #2568f9;
            border-radius: 30px;
            color: #ffffff;
            font-weight: 500;
            font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
        }

        @media (max-width: 768px) {
            margin-top: 0;
            margin-bottom: clamp(40px, calc(100vw * 80 / 390), 80px);

            .semi-products {
                padding-inline: var(--company-narrow-inline);
                gap: clamp(16px, calc(100vw * 20 / 390), 24px);
            }

            .semi-product-card--mini,
            .semi-products-grid .semi-product-card {
                border-radius: 12px;
            }

            /* 피처 카드 — 풀폭(패딩 없음) · 390→236px · 좌측 정렬 카피 + 하단 CTA */
            .semi-product-card--featured {
                width: calc(100% + (2 * var(--company-narrow-inline)));
                max-width: none;
                margin-inline: calc(-1 * var(--company-narrow-inline));
                border-radius: 0;
                flex-direction: column;
                align-items: stretch;
                box-sizing: border-box;
                min-height: clamp(236px, calc(100vw * 236 / 390), 600px);
                height: auto;
                /* 390→40px · 768→~79px */
                padding: clamp(40px, calc(100vw * 40 / 390), calc(768px * 40 / 390));

                .semi-product-media::after {
                    background: linear-gradient(
                        180deg,
                        rgba(28, 27, 32, 0.15) 0%,
                        rgba(28, 27, 32, 0.45) 100%
                    );
                }

                .semi-product-body {
                    flex: 1 1 auto;
                    width: 100%;
                    max-width: 100%;
                    min-height: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    text-align: right;
                    gap: 8px;
                    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
                }

                .semi-product-eyebrow,
                .semi-product-title {
                    width: 100%;
                    text-align: right;
                }

                .semi-product-eyebrow {
                    font-weight: 600;
                    /* 390→12px · 768→~24px */
                    font-size: clamp(12px, calc(100vw * 12 / 390), calc(768px * 12 / 390));
                    line-height: 160%;
                }

                .semi-product-title {
                    font-weight: 600;
                    /* 390→18px · 768→~36px */
                    font-size: clamp(18px, calc(100vw * 18 / 390), calc(768px * 18 / 390));
                    line-height: 160%;
                }

                .semi-product-desc {
                    display: inline;
                    text-align: right;
                    font-weight: 400;
                    /* 390→12px · 768→~24px */
                    font-size: clamp(12px, calc(100vw * 12 / 390), calc(768px * 12 / 390));
                    line-height: 160%;

                    .media-text-plain-line {
                        display: inline;
                    }
                }

                .semi-product-body > div:last-child {
                    width: 100%;
                    margin-top: auto;
                    padding-top: 8px;
                    box-sizing: border-box;
                }

                .semi-product-action {
                    box-sizing: border-box;
                    width: 100%;
                    height: clamp(44px, calc(100vw * 44 / 390), 60px);
                    justify-content: center;
                    gap: 12px;
                    margin-top: 0;
                    padding: 0 20px;
                    background: #354dad;
                    border-radius: 30px;
                    color: #ffffff;
                    font-weight: 600;
                    font-size: clamp(12px, calc(100vw * 12 / 390), calc(768px * 12 / 390));
                    line-height: 160%;
                }

                &:hover .semi-product-media img {
                    transform: none;
                }
            }

            .semi-products-grid {
                grid-template-columns: 1fr;
                gap: clamp(12px, calc(100vw * 16 / 390), 16px);
            }

            /* 미니 카드 — 모바일 (@390 → 높이 100px) */
            .semi-product-card--mini {
                justify-content: center;
                gap: clamp(8px, calc(100vw * 12 / 390), 12px);
                height: clamp(100px, calc(100vw * 100 / 390), 140px);
                min-height: clamp(100px, calc(100vw * 100 / 390), 140px);
                padding: clamp(16px, calc(100vw * 24 / 390), 24px);
                padding-right: 0;
                border-radius: 12px;
                background-color: #eff2f6;
                background-position: right center;
                background-size: auto 100%;
                color: #1c1b20;
                overflow: hidden;

                .semi-product-body {
                    max-width: min(72%, 100%);
                    gap: clamp(4px, calc(100vw * 8 / 390), 8px);
                    padding-bottom: 0;
                }

                .semi-product-title {
                    font-weight: 600;
                    font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                    line-height: 160%;
                    color: #1c1b20;
                }

                .semi-product-desc {
                    font-weight: 400;
                    font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                    line-height: 160%;
                    color: #47454f;
                }

                .semi-product-action {
                    display: none;
                }
            }

            .semi-product-card--mini.semi-product-card--hybrid,
            .semi-products-grid > .semi-product-card--mini:nth-child(1) {
                background-color: #eff2f6;
                background-position: calc(100% + 25px) center;
                background-size: auto 125%;
                color: #1c1b20;

            }

            .semi-product-card--mini.semi-product-card--sow,
            .semi-products-grid > .semi-product-card--mini:nth-child(2) {
                background-color: #eff2f6;
                background-position: right calc(100% + 10px);
                background-size: auto 100%;
                color: #1c1b20;

            }

            .semi-products-grid > .semi-product-card--mini:nth-child(1):hover,
            .semi-products-grid > .semi-product-card--mini:nth-child(2):hover {
                background-color: #eff2f6;
                color: #1c1b20;

                .semi-product-desc {
                    color: #5b5961;
                }
            }
        }
    }

    /* ── ICT — uiKind=LIST(maxDepth 2). 왼쪽 큰 카드(detail) + 오른쪽 탭 리스트(tab).
       배경 투명, .ict-hub 만 둥근 모서리로 좌/우를 한 박스처럼 묶음. solutions-hub.js 렌더. */
    .solutions-list-section.ICT {
        box-sizing: border-box;
        width: 100%;
        max-width: calc(var(--layout-ref-width) * 1px);
        margin-inline: auto;
        padding-inline: var(--company-inline-gutter);
        @media (min-width: 1500px) {
            padding-inline: clamp(40px, calc(40px + (100vw - 1500px) * 60 / (var(--layout-ref-width) - 1500)), 100px);
        }
        margin-bottom: clamp(48px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
        .ict-hub {
            box-sizing: border-box;
            width: 100%;
            margin: 0;
            display: grid;
            /* 남는 영역을 detail 1208 : tab 512 비율로 사용 */
            grid-template-columns: minmax(0, 1208fr) minmax(0, 512fr);
            border-radius: 24px;
            overflow: hidden;
            /* 높이는 오른쪽 탭 리스트(탭 개수 × 탭 높이)가 결정, detail 은 stretch 로 맞춤 */
            align-items: stretch;
        }

        /* 왼쪽 큰 카드 — 본문은 absolute 라 높이에 기여하지 않음(높이는 탭 리스트가 결정) */
        .ict-feature {
            position: relative;
            min-height: 0;
            color: #ffffff;
            text-decoration: none;
            overflow: hidden;
        }

        .ict-feature-media {
            position: absolute;
            inset: 0;
            z-index: 0;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
                transition: transform 0.45s ease;
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(90deg, rgba(28, 27, 32, 0.8) 0%, rgba(28, 27, 32, 0) 81.63%);
            }
        }


        /* 짝수 탭(2번째·4번째…) — 피처드 본문 오른쪽 정렬 */
        .ict-feature--text-right .ict-feature-media::after {
            background: linear-gradient(
                90deg,
                rgba(28, 27, 32, 0) 0%,
                rgba(28, 27, 32, 0.454331) 46.36%,
                rgba(28, 27, 32, 0.8) 81.63%
            );
        }

        .ict-feature--text-right .ict-feature-body {
            left: auto;
            align-items: flex-end;
            text-align: right;
        }


        .ict-feature-body {
            position: absolute;
            z-index: 1;
            left: clamp(28px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            right: clamp(28px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: clamp(8px, 1vw, 16px);
            max-width: min(860px, 100%);
            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
        }

        .ict-feature-eyebrow {
            font-weight: 600;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #00ACAC;
        }

        .ict-feature-title {
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            letter-spacing: -0.02em;
        }

        .ict-feature-desc {
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: rgba(255, 255, 255, 0.82);
        }

        .ict-feature-action {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: clamp(10px, 1.5vw, 20px);
            padding: clamp(10px, 1vw, 14px) clamp(20px, 2vw, 28px);
            background: #1B7076;
            border-radius: 30px;
            font-weight: 500;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 120%;
            color: #ffffff;
            text-decoration: none;
            white-space: nowrap;
        }

        /* 오른쪽 탭 리스트 — 높이는 탭 합계로 고정(행 높이에 늘어나지 않게 start 정렬) */
        .ict-tabs {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-self: start;
        }

        .ict-tab-item {
            display: flex;
            flex: 0 0 auto;
            /* 1920 기준 탭 1개 높이 246px — 3탭 × 246 ≈ 기존 4탭 × 185 */
            height: clamp(186px, calc(100vw * 246 / var(--layout-ref-width)), 246px);
        }

        .ict-tab {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex: 1;
            width: 100%;
            padding: clamp(18px, calc(100vw * 28 / var(--layout-ref-width)), 28px)
                clamp(22px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            background: #E8ECF2;
            color: #1c1b20;
            text-decoration: none;
            border-bottom: 1px solid #C4C7D0;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .ict-tab-item:last-child .ict-tab {
            border-bottom: 0;
        }


        .ict-tab.is-active {
            background: #1B7076;
            color: #ffffff;
        }

        .ict-tab-title {
            font-weight: 600;
            font-size: clamp(22px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
        }

        .ict-tab-summary {
            margin-top: 6px;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #5b5961;
        }

        .ict-tab.is-active .ict-tab-summary {
            color: rgba(255, 255, 255, 0.82);
        }

        /* 화살표 공통 레이아웃 (모양은 각자 mask-image 로 지정) */
        .ict-feature-arrow,
        .ict-tab-arrow {
            display: inline-block;
            flex-shrink: 0;
            background-color: currentColor;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
        }

        /* "자세히 보기" — → 모양(10×10) */
        .ict-feature-arrow {
            width: 10px;
            height: 10px;
            -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.83333%2011L11%206L6.83333%201M11%206H1%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
            mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.83333%2011L11%206L6.83333%201M11%206H1%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
        }

        /* 탭 화살표  >  세로 중앙 */
        .ict-tab-arrow {
            width: 14px;
            height: 24px;
            align-self: center;
            opacity: 0;
            transition: opacity 0.2s ease;
            -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2%202L12%2012L2%2022%22%20stroke%3D%22black%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
            mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2%202L12%2012L2%2022%22%20stroke%3D%22black%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
        }

        .ict-tab.is-active .ict-tab-arrow {
            opacity: 1;
        }

        @media (max-width: 768px) {
            padding-inline: 0;
            margin-bottom: clamp(120px, calc(100vw * 120 / 390), 140px);

            .ict-hub {
                display: flex;
                flex-direction: column;
                grid-template-columns: unset;
                border-radius: 0;
                overflow: hidden;
            }

            /* 상단 가로 탭 네비 */
            .ict-tabs {
                flex-direction: row;
                align-self: stretch;
                order: -1;
                width: 100%;
            }

            .ict-tab-item {
                flex: 1 1 0;
                min-width: 0;
                height: clamp(51px, calc(100vw * 51 / 390), 60px);
            }

            .ict-tab {
                box-sizing: border-box;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 4px;
                height: 100%;
                min-height: clamp(51px, calc(100vw * 51 / 390), 60px);
                padding: clamp(12px, calc(100vw * 16 / 390), 16px)
                    clamp(8px, calc(100vw * 12 / 390), 12px);
                border-bottom: none;
                border-right: 1px solid #c4c7d0;
                text-align: center;
            }

            .ict-tab-item:last-child .ict-tab {
                border-right: 0;
            }

            .ict-tab-summary,
            .ict-tab-arrow {
                display: none;
            }

            .ict-tab-title {
                font-weight: 600;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }

            /* 하단 히어로 — 배경 이미지 + 좌측 텍스트 */
            .ict-feature {
                order: 0;
                min-height: clamp(320px, calc(100vw * 320 / 390), 450px);
                padding: 0;
            }

            .ict-feature-media::after {
                background: linear-gradient(
                    90deg,
                    rgba(28, 27, 32, 0.78) 0%,
                    rgba(28, 27, 32, 0.4) 52%,
                    rgba(28, 27, 32, 0.12) 100%
                );
            }

            .ict-feature--text-right .ict-feature-media::after {
                background: linear-gradient(
                    90deg,
                    rgba(28, 27, 32, 0) 0%,
                    rgba(28, 27, 32, 0.454331) 46.36%,
                    rgba(28, 27, 32, 0.8) 81.63%
                );
            }

            .ict-feature-body {
                left: clamp(40px, calc(100vw * 40 / 390), 48px);
                right: clamp(40px, calc(100vw * 40 / 390), 48px);
                top: 50%;
                transform: translateY(-50%);
                gap: clamp(24px, calc(100vw * 24 / 390), 26px);
                max-width: 100%;
            }

            .ict-feature--text-right .ict-feature-body {
                left: clamp(40px, calc(100vw * 40 / 390), 48px);
                right: clamp(40px, calc(100vw * 40 / 390), 48px);
                align-items: flex-end;
                text-align: right;
            }

            .ict-feature-eyebrow {
                font-weight: 600;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }

            .ict-feature-title {
                font-weight: 500;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }

            .ict-feature-desc {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }

            .ict-feature-action {
                display: none;
            }
        }
    }
}

@keyframes solutions-hub-partner-logos-marquee {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.solutions-hub .page-content .solutions-list-section.PARTNER_LOGOS .partner-logos-anim {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }

    body.solutions-hub .page-content .solutions-list-section.PARTNER_LOGOS .partner-logos-track[aria-hidden='true'] {
        display: none;
    }

    body.solutions-hub .page-content .solutions-list-section.PARTNER_LOGOS .partner-logos-track .public-list-tree {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ========================================
   Handheld Terminal — /solutions/ict-handheld
   HANDHELD_PRODUCTS (uiKind: LIST)
   ======================================== */
body.ict-handheld .page-content {

    .ict-handheld-list-section.HANDHELD_PRODUCTS {
        padding: clamp(24px, 3vw, 40px) var(--company-inline-gutter) clamp(56px, 7vw, 96px);
        max-width: calc(var(--company-content-max) + (var(--company-inline-gutter) * 2));
        margin: 0 auto;
        margin-top: 100px;
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        /* ── 필터 바: pill 형태 — 탭이 항상 너비 균등 분할 (PC·모바일 동일).
           좁아질수록 패딩·폰트·높이가 clamp 로 자동 축소 */
        .handheld-filter-bar {
            display: flex;
            justify-content: center;
            margin-bottom: clamp(30px, 4vw, 60px);
        }

        .handheld-filter-tabs {
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
            gap: clamp(4px, 0.6vw, 12px);
            padding: clamp(6px, 0.8vw, 12px);
            background: #EFF2F6;
            border-radius: 999px;
        }

        .handheld-filter-btn {
            flex: 1 1 0;
            min-width: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: clamp(32px, 4vw, 44px);
            padding: 0 clamp(4px, 1.2vw, 22px);
            border: none;
            border-radius: 999px;
            background: transparent;
            color: #2c4777;
            font-family: inherit;
            font-weight: 600;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            letter-spacing: -0.01em;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s ease, color 0.15s ease;

            &:hover {
                background: #DCEBF9;
            }

            &.handheld-filter-btn--active {
                background: #162D55;
                color: #fff;

                &:hover {
                    background: #0F2347;
                }
            }

            /* 라벨이 컬럼보다 길면 ellipsis */
            .handheld-filter-btn__label {
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
                white-space: nowrap;
            }
        }

        /* ── 그리드: 4열 (1920 기준 카드 너비 ≈ 220) */
        .handheld-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 1024px) {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            @media (max-width: 720px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            @media (max-width: 420px) {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        .handheld-grid-empty {
            grid-column: 1 / -1;
            padding: clamp(40px, 6vw, 72px) 0;
            text-align: center;
            color: #6b7280;
            font-size: 14px;
        }

        /* ── 카드 — 피그마 shadow-ict: drop-shadow(0 0 40px rgba(0,172,172,0.32))
           rounded corner / 투명 영역 자연스럽게 따라가도록 filter 사용 */
        .handheld-card {
            position: relative;
            display: flex;
            flex-direction: column;
            border-radius: 16px;
            background: #F1F5F9;
            overflow: hidden;
            transition: background 0.18s ease, filter 0.2s ease, transform 0.18s ease;
            filter: drop-shadow(0px 8px 40px rgba(22, 45, 85, 0.12));
            color: inherit;
            text-decoration: none;
            &:hover {
                background: #DCEBF9;
                border: 1px solid #00ACAC;
                filter: drop-shadow(0px 8px 40px rgba(22, 45, 85, 0.12));
                transform: translateY(-2px);
                text-decoration: none;
            }
            &:focus-visible {
                outline: 2px solid #1B7076;
                outline-offset: 2px;
            }
        }
        a.handheld-card,
        a.handheld-card:hover,
        a.handheld-card:visited {
            color: inherit;
            text-decoration: none;
        }

        .handheld-card-thumb {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            max-height: 218px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: #F8FAFB;

            &.handheld-card-thumb--empty {
                background: #F8FAFB;
            }

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                display: block;
            }
        }
       
        .handheld-card-body {
            padding: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px)
                clamp(14px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: #FFFFFF;
        }

        /* PC/ButtonS — 16px / 600 / 120% / #1B7076 */
        .handheld-card-category {
            margin: 0;
            font-weight: 600;
            font-size: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 120%;
            color: #1B7076;
            letter-spacing: -0.01em;
        }

        /* PC/titleS — 24px / 600 / 160% / #1C1B20 */
        .handheld-card-title {
            margin: 0;
            font-weight: 600;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #1C1B20;
            transition: color 0.18s ease;
        }

        .handheld-card:hover .handheld-card-title,
        .handheld-card:focus-visible .handheld-card-title {
            color: #00ACAC;
        }

        .handheld-card--badged .handheld-card-title {
            color: #00ACAC;
        }

        /* ── 페이징 (certificates .cert-pagination 동일) */
        .handheld-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-top: clamp(32px, 5vw, 56px);
            flex-wrap: wrap;

            .handheld-page-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 36px;
                height: 36px;
                padding: 0 8px;
                border: 1.5px solid #e5e7eb;
                border-radius: 8px;
                background: #fff;
                color: #374151;
                font-family: inherit;
                font-size: 0.875rem;
                font-weight: 500;
                cursor: pointer;
                transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
                line-height: 1;

                &:hover:not(:disabled) {
                    border-color: #162d55;
                    color: #162d55;
                }

                &.handheld-page-btn--active {
                    border-color: #162d55;
                    background: #162d55;
                    color: #fff;
                    cursor: default;
                    pointer-events: none;
                }

                &.handheld-page-btn--disabled,
                &:disabled {
                    opacity: 0.35;
                    cursor: not-allowed;
                    pointer-events: none;
                }
            }

            .handheld-page-dots {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 28px;
                height: 36px;
                font-size: 0.875rem;
                color: #9ca3af;
            }
        }
    }

    /* PARTNER_LOGOS — 3열 × N행 정적 그리드 (마퀴 아님) */
    .ict-handheld-partner-logos.PARTNER_LOGOS {
        background: #F8FAFB;
        padding:
            0
            clamp(16px, calc(100vw * 500 / var(--layout-ref-width)), 500px);
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }
    }

    .handheld-partner-logos-inner {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .handheld-partner-logos-grid {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        justify-items: center;

        @media (max-width: 720px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .handheld-partner-logos-item {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .handheld-partner-logos-cell {
        width: min(100%, 260px);
        min-height: clamp(72px, calc(100vw * 120 / var(--layout-ref-width)), 120px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
        box-sizing: border-box;
    }

    .handheld-partner-logos-cell img {
        display: block;
        width: clamp(96px, calc(100vw * 160 / var(--layout-ref-width)), 160px);
        height: clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
        object-fit: contain;
    }
}

/* ──────────────────────────────────────────────────────────────
   RTU — OVERVIEW (MEDIA_TEXT + 다필드: eyebrow · headline · summary · description · highlights)
   pageRenderer: `ict-rtu-media-text-section OVERVIEW`
   ────────────────────────────────────────────────────────────── */
body.ict-rtu .page-content {
    background: #F8FAFB;

    section.OVERVIEW[class*='-media-text-section'] {
        background: #EFF2F6;
        box-sizing: border-box;
        padding:
            clamp(60px, calc(100vw * 100 / var(--layout-ref-width)), 100px)
            0;
        overflow: hidden;
        color: #1c1b20;

        /* 피그마 오토레이아웃: row · center · gap 112(1920 max) · 이미지 840×800 · radius 0 400 400 0 */
        [class*='-media-text-wrap'].media-text-wrap {
            position: relative;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            gap: clamp(24px, calc(100vw * 112 / var(--layout-ref-width)), 112px);
            width: 100%;
            max-width: none;
            margin: 0;
            padding: 0;
            min-height: 0;

            @media (max-width: 900px) {
                flex-direction: column;
                align-items: stretch;
                gap: 0;
            }
        }

        .media-text-media {
            position: relative;
            flex: 0 0 auto;
            z-index: 0;
            /* 우측 반원 — radius = 높이(800)의 50% = 400 @1920 */
            --rtu-overview-pill-r: clamp(120px, calc(100vw * 400 / var(--layout-ref-width)), 400px);
            width: clamp(280px, calc(100vw * 840 / var(--layout-ref-width)), 840px);
            height: clamp(266px, calc(100vw * 800 / var(--layout-ref-width)), 800px);
            margin: 0;
            overflow: hidden;
            border-radius: 0 var(--rtu-overview-pill-r) var(--rtu-overview-pill-r) 0;
            background: #eff2f6;

            @media (max-width: 900px) {
                flex: 0 0 auto;
                align-self: flex-start;
                margin-right: var(--company-narrow-inline);
                width: clamp(370px, calc(100vw * 370 / 430), 100%);
                min-width: 370px;
                height: clamp(320px, calc(100vw * 320 / 430), 800px);
                min-height: 320px;
                aspect-ratio: auto;
                /* 높이(320)의 50% = 160 @430 — PC와 동일하게 우측만 반원 유지 */
                --rtu-overview-pill-r: clamp(160px, calc(100vw * 160 / 430), 400px);
                border-radius: 0 var(--rtu-overview-pill-r) var(--rtu-overview-pill-r) 0;
            }

            &::before,
            &::after {
                display: none;
            }

            img,
            .media-text-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
            }
        }

        .media-text-copy {
            position: relative;
            z-index: 1;
            flex: 1 1 auto;
            min-width: 0;
            width: auto;
            max-width: none;
            margin: 0;
            text-align: left;
            text-shadow: none;
            color: #1c1b20;
            word-break: keep-all;
            box-sizing: border-box;

            @media (min-width: 901px) {
                padding-right: clamp(24px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            }

            @media (max-width: 900px) {
                padding: 48px var(--company-narrow-inline);
                word-break: normal;
                overflow-wrap: break-word;
            }

            @media (max-width: 430px) {
                container-type: normal;
            }
        }

        .media-text-body-block {
            text-align: left;
            color: inherit;

            @media (max-width: 768px) {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                box-sizing: border-box;
            }
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #1b7076;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                letter-spacing: inherit;
                color: inherit;
            }

            @media (max-width: 430px) {
                font-weight: 500;
                font-size: 16px;
                line-height: 140%;
            }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(32px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 130%;
            letter-spacing: -0.03em;
            color: #1c1b20;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                letter-spacing: inherit;
                color: inherit;
            }

            @media (max-width: 430px) {
                line-height: 140%;
            }
        }

        .media-text-body-block[data-field-key='summary'],
        .media-text-key-summary {
            margin: 0 0 clamp(24px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
            font-weight: 500;
            font-size: clamp(18px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #47454F;

            @media (max-width: 768px) {
                width: 100%;
                min-width: 0;
                font-size: clamp(16px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
                overflow-wrap: break-word;
                word-break: normal;

                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 영역 안에서 자연 줄바꿈 */
                > p,
                .media-text-plain-line {
                    display: inline;
                    white-space: normal;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

        }

        .media-text-body-block[data-field-key='description'],
        .media-text-key-description {
            margin: 0 0 clamp(24px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
            font-weight: 300;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #1c1b20;

            @media (max-width: 430px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
                line-height: 160%;
                
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='highlights'],
        .media-text-key-highlights {
            margin: 0;
            font-weight: 300;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #1c1b20;

            @media (max-width: 430px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
                line-height: 160%;
            }

            .media-text-plain-line {
                position: relative;
                margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
                padding-left: 1em;

                &:last-child {
                    margin-bottom: 0;
                }

                &::before {
                    content: '';
                    position: absolute;
                    left: 0.15em;
                    top: 0.62em;
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background: currentColor;
                    opacity: 0.85;
                }
            }
        }

        .media-text-action-wrap {
            margin-top: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            justify-content: flex-start;
        }

        /*
         * layout-ref-width 초과(빔·초대형): 레이아웃만 vw 연동 — 이미지·갭·copy 폭.
         * eyebrow·headline·highlights 등 텍스트 크기는 기존 clamp(max) 유지.
         * (@media min-width 는 CSS 변수 미지원 → 1921px = layout-ref + 1)
         */
        @media (min-width: 1921px) {
            [class*='-media-text-wrap'].media-text-wrap {
                gap: calc(100vw * 112 / var(--layout-ref-width));
            }

            .media-text-media {
                flex: 0 0 calc(100vw * 840 / var(--layout-ref-width));
                width: calc(100vw * 840 / var(--layout-ref-width));
                height: calc(100vw * 800 / var(--layout-ref-width));
                /* 높이 50% = 우측 반원 — 이미지 박스에 맞춤 */
                --rtu-overview-pill-r: calc(100vw * 400 / var(--layout-ref-width));
            }

            .media-text-copy {
                flex: 1 1 0;
                min-width: 0;
            }
        }
    }
  

    /* PC 스크롤 reveal — OVERVIEW (ict-rtu.js) */
    @media (min-width: 769px) {
        section.OVERVIEW[class*='-media-text-section'] .media-text-media,
        section.OVERVIEW[class*='-media-text-section'] .media-text-copy > * {
            opacity: 0;
            transform: translateY(28px);
            transition:
                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }

        section.OVERVIEW[class*='-media-text-section'].is-ict-rtu-overview-media-in-view .media-text-media {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-rtu-overview-reveal-delay, 0ms);
        }

        section.OVERVIEW[class*='-media-text-section'].is-ict-rtu-overview-text-in-view .media-text-copy > * {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-rtu-overview-reveal-delay, 90ms);
        }
    }

    @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
        section.OVERVIEW[class*='-media-text-section'] .media-text-media,
        section.OVERVIEW[class*='-media-text-section'] .media-text-copy > * {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            will-change: auto;
        }
    }

    /* ── RTU WEB · APP (MEDIA_TEXT zigzag — 배경 없음, 벡터 이미지) ── */
    section.WEB[class*='-media-text-section'],
    section.APP[class*='-media-text-section'] {
        background: transparent;
        color: #1c1b20;
        box-sizing: border-box;
        overflow: visible;

        [class*='-media-text-wrap'].media-text-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;

            @media (max-width: 900px) {
                flex-direction: column;
                justify-content: center;
                gap: clamp(28px, 6vw, 40px);
                padding-inline: var(--company-narrow-inline);
            }
        }

        .media-text-media {
            position: relative;
            flex: 0 1 clamp(320px, calc(100vw * 648 / var(--layout-ref-width)), 648px);
            min-width: 0;
            min-width: min(48vw, 648px);
            margin: 0;
            aspect-ratio: 16 / 10;
            min-height: clamp(200px, 32vw, 400px);
            overflow: visible;
            background: transparent;

            &::before,
            &::after {
                display: none;
            }

            img,
            .media-text-video {
                position: relative;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
                display: block;
            }
        }

        .media-text-copy {
            flex: 1 1 auto;
            min-width: 0;
            max-width: min(100%, clamp(480px, calc(100vw * 820 / var(--layout-ref-width)), 820px));
            margin: 0;
            padding: 0;
            text-shadow: none;
            color: #1c1b20;
            word-break: keep-all;
            box-sizing: border-box;

            @media (max-width: 900px) {
                max-width: 100%;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: break-all;
                overflow-wrap: break-word;
            }
        }

        .media-text-body-block {
            color: inherit;
        }
    }

    /* WEB — 텍스트 ← · 이미지 → (DOM: media·copy → row-reverse) */
    section.WEB[class*='-media-text-section'] {
        [class*='-media-text-wrap'].media-text-wrap {
            flex-direction: row-reverse;

            @media (max-width: 900px) {
                flex-direction: column;
                padding-inline: var(--company-narrow-inline);
            }
        }

        .media-text-media {
            align-self: center;

            img,
            .media-text-video {
                object-position: right center;
            }

            @media (max-width: 900px) {
                flex: 1 1 auto;
                max-width: 100%;

                img,
                .media-text-video {
                    object-position: center;
                }
            }
        }

        .media-text-copy {
            text-align: right;
            padding-inline-end: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 900px) {
                text-align: left;
                padding-inline-end: 0;
            }
        }

        .media-text-body-block,
        .media-text-key-title,
        .media-text-key-body {
            text-align: right;

            @media (max-width: 900px) {
                text-align: left;
            }
        }

        .media-text-body-block[data-field-key='title'],
        .media-text-key-title {
            margin: 0 0 clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            font-weight: 600;
            font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 150%;
            color: #1b7076;


            @media (max-width: 430px) {
                font-weight: 600;
                font-size: 24px;
                line-height: 160%;
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 500;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #47454f;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
            @media (max-width: 430px) {
                font-weight: 500;
                font-size: 16px;
                line-height: 140%;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: break-all;
                overflow-wrap: break-word;
            }

            .media-text-plain-line + .media-text-plain-line {
                margin-top: 0.65em;
            }
        }
    }

    /* APP — 이미지 ← · 텍스트 →  */
    section.APP[class*='-media-text-section'] {
        [class*='-media-text-wrap'].media-text-wrap {
            flex-direction: row;

            @media (max-width: 900px) {
                flex-direction: column;
                margin-top: 40px;
            }
        }

        .media-text-media {
            align-self: center;

            img,
            .media-text-video {
                object-position: left center;
            }

            @media (max-width: 900px) {
                flex: 1 1 auto;
                max-width: 100%;

                img,
                .media-text-video {
                    object-position: center;
                }
            }
        }

        .media-text-copy {
            text-align: left;
            width: 100%;
            padding-inline-start: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            padding-inline-end: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            /* @media (max-width: 900px) {
                padding-inline-start: 0;
            } */
        }

        /* 1행: 직관적인 현장 운영 환경 — PC/titleL (700 → weight 600) */
        .media-text-body-block[data-field-key='pretitle'],
        .media-text-key-pretitle {
            margin: 0 0 clamp(4px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 150%;
            color: #1c1b20;

            @media (max-width: 430px) {
                font-weight: 600;
                font-size: 24px;
                line-height: 160%;
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: clamp(12px, calc(100vw * 40 / var(--layout-ref-width)), 40px) 0 0;
            font-weight: 500;
            font-size: clamp(14px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #47454F;

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: break-all;
                overflow-wrap: break-word;
            }

            @media (max-width: 430px) {
                font-weight: 500;
                font-size: 16px;
                line-height: 140%;

                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 여유 폭이면 2줄로 자연 줄바꿈 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='caption'],
        .media-text-key-caption {
            margin: clamp(12px, calc(100vw * 40 / var(--layout-ref-width)), 40px) 0 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #64748b;


            @media (max-width: 430px) {
                font-weight: 400;
                font-size: 12px;
                line-height: 160%;

                > p,
                .media-text-plain-line {
                    display: inline;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }
    }

    /* PC 스크롤 reveal — WEB · APP (ict-rtu.js) */
    @media (min-width: 769px) {
        section.WEB[class*='-media-text-section'] .media-text-media,
        section.WEB[class*='-media-text-section'] .media-text-copy > *,
        section.APP[class*='-media-text-section'] .media-text-media,
        section.APP[class*='-media-text-section'] .media-text-copy > * {
            opacity: 0;
            transform: translateY(28px);
            transition:
                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }

        section.WEB[class*='-media-text-section'].is-ict-rtu-webapp-media-in-view .media-text-media,
        section.APP[class*='-media-text-section'].is-ict-rtu-webapp-media-in-view .media-text-media {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-rtu-webapp-reveal-delay, 0ms);
        }

        section.WEB[class*='-media-text-section'].is-ict-rtu-webapp-text-in-view .media-text-copy > *,
        section.APP[class*='-media-text-section'].is-ict-rtu-webapp-text-in-view .media-text-copy > * {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-rtu-webapp-reveal-delay, 90ms);
        }
    }

    @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
        section.WEB[class*='-media-text-section'] .media-text-media,
        section.WEB[class*='-media-text-section'] .media-text-copy > *,
        section.APP[class*='-media-text-section'] .media-text-media,
        section.APP[class*='-media-text-section'] .media-text-copy > * {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            will-change: auto;
        }
    }

    /* RELATED_SOLUTIONS — 다른 ICT 제품 카드 (배경 없음, nav path 매칭) */
    .ict-rtu-related-solutions.RELATED_SOLUTIONS {
        background: transparent;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter)
            clamp(100px, calc(100vw * 140 / var(--layout-ref-width)), 140px)
            ;
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            padding-block: 100px;
        }
    }

    .ict-rtu-related-inner {
        max-width: var(--company-content-max);
        margin: 0 auto;
    }

    .ict-rtu-related-title {
        margin: 0 0 clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
        font-weight: 500;
        font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
        line-height: 140%;
        color: #47454f;

        @media (max-width: 768px) {
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
            line-height: 160%;
        }
    }

    .ict-rtu-related-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

        @media (max-width: 900px) {
            grid-template-columns: 1fr;
        }
    }

    .ict-rtu-related-card {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        align-self: stretch;
        flex: 1 1 auto;
        gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
        min-height: clamp(160px, calc(100vw * 220 / var(--layout-ref-width)), 220px);
        padding:
            clamp(32px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
            clamp(24px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
        border: 1px solid #E6EBF0;
        border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
        background: #ffffff;
        color: inherit;
        text-decoration: none;
        transition: border-color 0.18s ease;

        &:hover {
            border-color: #00acac;
            text-decoration: none;
        }

        &:focus-visible {
            outline: 2px solid #1b7076;
            outline-offset: 2px;
        }
    }

    .ict-rtu-related-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .ict-rtu-related-card-title {
        margin: 0;
        font-weight: 700;
        font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
        line-height: 140%;
        color: #162d55;
        transition: color 0.18s ease;
    }

    .ict-rtu-related-card:hover .ict-rtu-related-card-title {
        color: #1b7076;
    }

    .ict-rtu-related-card-arrow {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        background-color: currentColor;
        color: #cbd5e1;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }

    .ict-rtu-related-card:hover .ict-rtu-related-card-arrow {
        color: #1b7076;
    }

    .ict-rtu-related-card-desc {
        margin: 0;
        font-weight: 400;
        font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
        line-height: 160%;
        color: #64748b;
    }
}

/* ──────────────────────────────────────────────────────────────
   SI & SM — OVERVIEW (LIST: 배경 + 히어로 + Solution Scope)
   ────────────────────────────────────────────────────────────── */
body.ict-si-sm .page-content {
    background: #F8FAFB;

    section.ict-si-sm-hero.SOLUTION_TITLE[class*='-hero'] {
        text-align: center;
        padding: clamp(60px, 4vw, 100px) 0  var(--company-narrow-inline);
        box-sizing: border-box;
        background: #eff2f6;
        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-hero-inner'] {
            max-width: min(1000px, 100%);
            margin-left: auto;
            margin-right: auto;

            > div {
                font-weight: 600;
                font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
                line-height: 140%;
                text-align: center;
                color: #1b7076;
                letter-spacing: -0.02em;
                margin: 0;
            }

            @media (max-width: 768px) {
                > div {
                    font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                    line-height: 140%;
                }
            }
        }
    }

    section.ict-si-sm-hero.TITLE[class*='-hero'] {
        text-align: center;
        padding: clamp(48px, 4vw, 100px) 0  var(--company-narrow-inline);
        box-sizing: border-box;
        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }
        [class*='-hero-inner'] {
            max-width: min(1000px, 100%);
            margin-left: auto;
            margin-right: auto;
            > div {
                font-weight: 600;
                font-size: clamp(32px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
                line-height: 150%;
                text-align: center;
                color: #47454F;
                letter-spacing: -0.02em;
                margin: 0;
            }

            @media (max-width: 768px) {
                > div {
                    font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                    line-height: 140%;
                }
            }
        }
    }

    section.ict-si-sm-hero.SMALL_TITLE[class*='-hero'] {
        text-align: center;
        padding: clamp(48px, 4vw, 100px) 0  var(--company-narrow-inline);
        padding-bottom: 24px;
        box-sizing: border-box;
        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }
        [class*='-hero-inner'] {
            max-width: min(1000px, 100%);
            margin-left: auto;
            margin-right: auto;
            > div {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                line-height: 160%;
                text-align: center;
                color: #47454f;
                margin: 0;
            }
        }
    }


    .ict-si-sm-overview.OVERVIEW {
        --ict-si-sm-overview-bg: none;
        box-sizing: border-box;
        position: relative;
        overflow: visible;
        background-color: #eff2f6;
        background-image:
            linear-gradient(180deg, rgba(239, 242, 246, 0) 0%, #f8fafb 100%),
            var(--ict-si-sm-overview-bg);
        background-size: cover, cover;
        background-position: center top, center top;
        background-repeat: no-repeat, no-repeat;
        padding:
            clamp(48px, calc(100vw * 100 / var(--layout-ref-width)), 100px)
            var(--company-inline-gutter)
            clamp(64px, calc(100vw * 120 / var(--layout-ref-width)), 120px);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .ict-si-sm-overview-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
            overflow: visible;
        }

        .ict-si-sm-overview-hero {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            width: 100%;
            gap: clamp(24px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            min-height: clamp(384px, calc(100vw * 690 / var(--layout-ref-width)), 690px);
            overflow: visible;

            @media (max-width: 900px) {
                flex-direction: column;
                align-items: stretch;
                min-height: 0;
                gap: 0;
            }
        }

        .ict-si-sm-overview-copy {
            padding-top: clamp(60px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
            position: relative;
            z-index: 2;
            flex: 1 1 auto;
            min-width: 0;
            max-width: min(
                720px,
                calc(100% - clamp(200px, calc(100vw * 520 / var(--layout-ref-width)), 560px))
            );
            padding-right: clamp(16px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            color: #1c1b20;
            word-break: keep-all;

            @media (max-width: 900px) {
                order: 2;
                max-width: none;
                padding-right: 0;
                padding-top: clamp(24px, 4vw, 32px);
                padding-bottom: 200px;
            }
     
        }

        .ict-si-sm-overview-eyebrow {
            margin: 0 0 clamp(12px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 500;
            font-size: clamp(14px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #1b7076;

            @media (max-width: 768px) {
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
                font-weight: 600;
            }
        }

        .ict-si-sm-overview-headline {
            margin: 0 0 clamp(12px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(24px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            color: #1C1B20;

            @media (max-width: 768px) {
                font-size: clamp(32px, calc(100vw * 32 / 390), 36px);
                line-height: 140%;
                font-weight: 500;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: break-all;
                overflow-wrap: break-word;
            }
        }

        .ict-si-sm-overview-summary {
            margin: 0 0 clamp(36px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
            font-weight: 600;
            font-size: clamp(24px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #47454f;

            @media (max-width: 768px) {
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
                font-weight: 500;
            }
        }

        .ict-si-sm-overview-desc {
            margin: 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #1C1B20;

            @media (max-width: 768px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: break-all;
                overflow-wrap: break-word;
            }
        }

        .ict-si-sm-overview-media {
            /* Figma Frame 843: 1132×690, top -61, 오른쪽 정렬 (1920 기준 clamp) */
            position: absolute;
            right: 0;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            flex: none;
            width: clamp(320px, calc(100vw * 1132 / var(--layout-ref-width)), 1132px);
            height: clamp(280px, calc(100vw * 690 / var(--layout-ref-width)), 690px);
            padding: 0;
            margin: 0;

            @media (max-width: 1600px) {
                /* 화면이 줄어들면 이미지를 우측으로 더 밀어 텍스트 영역 확보 */
                right: clamp(-72px, calc((1600px - 100vw) * -0.18), -8px);
                width: clamp(320px, calc(100vw * 1030 / var(--layout-ref-width)), 1030px);
                height: clamp(250px, calc(100vw * 630 / var(--layout-ref-width)), 630px);
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: right center;
            }

            @media (max-width: 900px) {
                order: 1;
                position: relative;
                right: auto;
                top: auto;
                width: calc(100% + (2 * var(--company-inline-gutter)));
                max-width: none;
                height: auto;
                min-height: 384px;
                margin: 0 calc(-1 * var(--company-inline-gutter)) clamp(24px, 4vw, 40px);
                align-items: stretch;
                overflow: hidden;
                pointer-events: auto;

                img {
                    width: 100%;
                    height: 100%;
                    min-height: 384px;
                    object-fit: cover;
                    object-position: center;
                }
            }

            @media (max-width: 768px) {
                width: calc(100% + (2 * var(--company-narrow-inline)));
                margin-inline: calc(-1 * var(--company-narrow-inline));
            }
        }

        .ict-si-sm-scope-heading {
            text-align: center;
            margin-bottom: clamp(64px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
        }

        .ict-si-sm-scope-title {
            margin: 0 0 clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            font-weight: 600;
            font-size: clamp(32px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 160%;
            color: #1C1B20;

            @media (max-width: 768px) {
                font-size: clamp(24px, calc(100vw * 24 / 390), 28px);
            }
        }

        .ict-si-sm-scope-subtitle {
            margin: 0;
            font-weight: 500;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #47454F;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                color: #2C4777;
            }
        }

        .ict-si-sm-scope-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(20px, calc(100vw * 40 / var(--layout-ref-width)), 40px);

            @media (max-width: 768px) {
                grid-template-columns: 1fr;
            }
        }

        .ict-si-sm-scope-col-head {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            max-height: clamp(100px, calc(100vw * 134 / var(--layout-ref-width)), 134px);
            padding:
                clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px)
                clamp(42px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
            border-radius: 12px;
            color: #ffffff;
            margin-bottom: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
        }

        .ict-si-sm-scope-col--si .ict-si-sm-scope-col-head {
            background: #0F64C0;
        }

        .ict-si-sm-scope-col--sm .ict-si-sm-scope-col-head {
            background: #1B7076;
        }

        .ict-si-sm-scope-col-code {
            font-weight: 500;
            font-size: clamp(28px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .ict-si-sm-scope-col-sub {
            font-weight: 500;
            font-size: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            letter-spacing: 0.04em;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
            }
        }

        .ict-si-sm-scope-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
        }

        .ict-si-sm-scope-item {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: clamp(64px, calc(100vw * 77 / var(--layout-ref-width)), 77px);
            padding: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px) , 0;
            background: #F8FAFB;
            border-left: clamp(8px, calc(100vw * 8 / 390), 16px) solid;
            box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
            border-radius: 8px;
            text-align: center;

            span {
                font-weight: 500;
                font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
                line-height: 160%;
                word-break: keep-all;
            }
        }

        .ict-si-sm-scope-col--si .ict-si-sm-scope-item {
            border-left-color:#0F64C0;
            span{
                color: #2C4777;
            }
        }

        .ict-si-sm-scope-col--sm .ict-si-sm-scope-item {
            border-left-color: #1b7076;

            span {
                color: #1b7076;
            }
        }
    }

    /* Overview zone — wrapper 1장 배경 (OVERVIEW LIST 배경 URL · scroll) */
    .ict-si-sm-overview-zone[style*='--ict-si-sm-overview-bg: url'] {
        position: relative;
        background-color: #eff2f6;
        background-image:
            linear-gradient(180deg, rgba(239, 242, 246, 0) 0%, #f8fafb 100%),
            var(--ict-si-sm-overview-bg);
        background-size: cover, cover;
        background-position: center top, center top;
        background-repeat: no-repeat, no-repeat;
        background-attachment: scroll, scroll;

        section.ict-si-sm-hero.SOLUTION_TITLE[class*='-hero'],
        section.ict-si-sm-overview.OVERVIEW,
        section.ict-si-sm-process.SOLUTION_PROCESS {
            background: transparent;
        }
    }

    /* SOLUTION_PROCESS — 01~05 (LIST) */
    .ict-si-sm-process.SOLUTION_PROCESS {
        background-color: #eff2f6;
        box-sizing: border-box;
        padding:
            0
            clamp(40px, calc(100vw * 64 / var(--layout-ref-width)), 64px)
            var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            padding-bottom: 60px;
        }

        .ict-si-sm-process-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding:
                clamp(32px, calc(100vw * 48 / var(--layout-ref-width)), 48px)
                clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
          
            @media (max-width: 768px) {
                padding: 0;
                padding-top: 40px;

            }
        }

        .ict-si-sm-process-steps {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 1100px) {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            @media (max-width: 768px) {
                grid-template-columns: repeat(6, minmax(0, 1fr));

                .ict-si-sm-process-step:nth-child(-n + 3) {
                    grid-column: span 2;
                }

                .ict-si-sm-process-step:nth-child(4) {
                    grid-column: 2 / span 2;
                }

                .ict-si-sm-process-step:nth-child(5) {
                    grid-column: 4 / span 2;
                }
            }
        }

        .ict-si-sm-process-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: clamp(2px, calc(100vw * 4 / var(--layout-ref-width)), 4px);
        }

        .ict-si-sm-process-num {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: clamp(56px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            height: clamp(56px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            border-radius: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            background: #1b7076;
            color: #ffffff;
            font-weight: 500;
            font-size: clamp(18px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            margin-bottom: clamp(20px, calc(100vw * 36 / var(--layout-ref-width)), 36px);

            @media (max-width: 768px) {
                font-weight: 600;
            }
        }

        .ict-si-sm-process-step-title {
            font-weight: 500;
            font-size: clamp(18px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #1b7076;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
            }
        }

        .ict-si-sm-process-step-desc {
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454f;
            word-break: keep-all;

            @media (max-width: 768px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
            }
        }
    }

    /* INDUSTRY — 적용 산업 구성 (LIST: 카드 3열) */
    .ict-si-sm-industry.INDUSTRY {
        box-sizing: border-box;
        padding-top: 20px;
        padding-inline: var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .ict-si-sm-industry-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
        }

        .ict-si-sm-industry-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 900px) {
                grid-template-columns: 1fr;
            }
        }

        .ict-si-sm-industry-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            min-height: clamp(200px, calc(100vw * 294 / var(--layout-ref-width)), 294px);
            padding: clamp(32px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            background: #FFFFFF;
            border: 1px solid #E6EBF0;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            word-break: keep-all;
            box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
        }

        .ict-si-sm-industry-card-head {
            display: flex;
            align-items: flex-start;
            gap: clamp(14px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            padding-bottom: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            border-bottom: 1px solid #C4C7D0;
        }

        .ict-si-sm-industry-card-icon {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: clamp(64px, calc(100vw * 92 / var(--layout-ref-width)), 92px);
            height: clamp(64px, calc(100vw * 92 / var(--layout-ref-width)), 92px);
            border-radius: clamp(10px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            background: #eff2f6;
            overflow: hidden;

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .ict-si-sm-industry-card-titles {
            display: flex;
            flex-direction: column;
            gap: clamp(4px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
            min-width: 0;
        }

        .ict-si-sm-industry-card-title {
            font-weight: 600;
            font-size: clamp(22px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #1c1b20;

            @media (max-width: 768px) {
                font-size: clamp(24px, calc(100vw * 24 / 390), 28px);
                line-height: 160%;
            }
        }

        .ict-si-sm-industry-card-sub {
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #0f64c0;

            @media (max-width: 768px) {
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }
        }

        .ict-si-sm-industry-card-desc {
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            color: #47454f;
            word-break: break-all;
            @media (max-width: 768px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
            }
        }
    }

    /* PARTNER_LOGOS — 1320 · 그리드 좌우 140 · 열 gap 4 · 카드 260×120 · 이미지 160×80 */
    .ict-si-sm-partner-logos.PARTNER_LOGOS {
        background: transparent;
        box-sizing: border-box;
        padding-block: clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
        padding-inline: 0;
        padding-top: 0;
        .ict-si-sm-partner-logos-inner {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }

        .ict-si-sm-partner-logos-grid {
            list-style: none;
            margin: 0;
            box-sizing: border-box;
            width: 100%;
            padding-inline: clamp(16px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 4px;
            align-items: center;
            justify-items: center;

            @media (max-width: 900px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                padding-inline: 80px;
                gap: 12px;
            }

            @media (max-width: 768px) {
                gap: 40px;
            }
        }

        .ict-si-sm-partner-logos-item {
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
            min-width: 0;

            @media (max-width: 900px) {
                display: flex;
                justify-content: center;
            }
        }

        .ict-si-sm-partner-logos-cell {
            width: 100%;
            max-width: clamp(200px, calc(100vw * 260 / var(--layout-ref-width)), 260px);
            height: clamp(88px, calc(100vw * 120 / var(--layout-ref-width)), 120px);
            max-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(8px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            box-sizing: border-box;
            border-right: 1px solid #c4c7d0;

            @media (max-width: 900px) {
                width: auto;
                max-width: 100%;
                margin-inline: auto;
            }
        }

        .ict-si-sm-partner-logos-item:nth-child(4n) .ict-si-sm-partner-logos-cell {
            border-right: none;
        }

        @media (max-width: 900px) {
            .ict-si-sm-partner-logos-cell {
                border-right: none;
            }
        }

        .ict-si-sm-partner-logos-cell img {
            display: block;
            width: clamp(120px, calc(100vw * 160 / var(--layout-ref-width)), 160px);
            max-width: 160px;
            height: clamp(60px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            max-height: 80px;
            object-fit: contain;
        }
    }

    /* RELATED_SOLUTIONS — 다른 ICT 제품 카드 (RTU 와 동일, nav path 매칭) */
    .ict-si-sm-related-solutions.RELATED_SOLUTIONS {
        background: transparent;
        padding:
            clamp(60px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
            var(--company-inline-gutter)
            clamp(100px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .ict-si-sm-related-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
        }

        .ict-si-sm-related-title {
            margin: 0 0 clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #47454f;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .ict-si-sm-related-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 900px) {
                grid-template-columns: 1fr;
            }
        }

        .ict-si-sm-related-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            align-self: stretch;
            flex: 1 1 auto;
            gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            min-height: clamp(160px, calc(100vw * 220 / var(--layout-ref-width)), 220px);
            padding:
                clamp(32px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
                clamp(24px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
            border: 1px solid #e6ebf0;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            background: #ffffff;
            color: inherit;
            text-decoration: none;
            transition: border-color 0.18s ease;

            &:hover {
                border-color: #00acac;
                text-decoration: none;

                .ict-si-sm-related-card-title {
                    color: #1b7076;
                }

                .ict-si-sm-related-card-arrow {
                    color: #1b7076;
                }
            }

            &:focus-visible {
                outline: 2px solid #1b7076;
                outline-offset: 2px;
            }
        }

        .ict-si-sm-related-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
        }

        .ict-si-sm-related-card-title {
            margin: 0;
            font-weight: 700;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 140%;
            color: #162d55;
            transition: color 0.18s ease;
        }

        .ict-si-sm-related-card-arrow {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            background-color: currentColor;
            color: #cbd5e1;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            transition: color 0.18s ease;
        }

        .ict-si-sm-related-card-desc {
            margin: 0;
            font-weight: 400;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            color: #64748b;
        }
    }

    /* MYHANIS · WMS (MEDIA_TEXT — RTU WEB/APP 동일, 배경 없음) */
    section.MYHANIS[class*='-media-text-section'],
    section.WMS[class*='-media-text-section'] {
        background: transparent;
        color: #1c1b20;
        box-sizing: border-box;
        overflow: visible;
        padding:
            clamp(40px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-media-text-wrap'].media-text-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;

            @media (max-width: 900px) {
                flex-direction: column;
                gap: clamp(28px, 6vw, 40px);
            }
        }

        .media-text-media {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1 1 50%;
            min-width: 0;
            max-width: min(100%, 648px);
            margin: 0;
            aspect-ratio: auto;
            min-height: 0;
            overflow: visible;
            background: transparent;

            &::before,
            &::after {
                display: none;
            }

            img,
            .media-text-video {
                position: relative;
                flex-shrink: 0;
                width: 100%;
                aspect-ratio: 16 / 10;
                min-height: clamp(200px, 32vw, 400px);
                height: auto;
                object-fit: contain;
                object-position: center;
                display: block;
            }

            .media-text-body-block[data-field-key='image-caption'],
            .media-text-key-image-caption {
                flex-shrink: 0;
                width: 100%;
                font-weight: 500;
                font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                line-height: 160%;
                color: #74757E;
                text-align: center;

                > p,
                .media-text-plain-line {
                    margin: 0;
                    font: inherit;
                    color: inherit;
                }

                @media (max-width: 900px) {
                    font-weight: 600;
                    font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                    line-height: 140%;
                }
            }
        }

        .media-text-copy {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            padding: 0;
            text-shadow: none;
            color: #1c1b20;
            word-break: keep-all;
            box-sizing: border-box;
        }

        .media-text-body-block {
            color: inherit;
        }
    }

    /* MYHANIS — 텍스트 ← · 이미지 → (copy 넓게 · 이미지 우측 밀착) */
    section.MYHANIS[class*='-media-text-section'] {
        [class*='-media-text-wrap'].media-text-wrap {
            flex-direction: row-reverse;
            justify-content: space-between;
            align-items: center;
            gap: clamp(80px, calc(100vw * 112 / var(--layout-ref-width)), 112px);

            @media (max-width: 900px) {
                flex-direction: column;
                justify-content: center;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
        }

        .media-text-copy {
            flex: 1 1 auto;
            min-width: 0;
            text-align: left;
            word-break: normal;

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                word-break: break-all;
                overflow-wrap: break-word;
            }
        }

        .media-text-media {
            flex: 0 0 clamp(400px, calc(100vw * 532 / var(--layout-ref-width)), 532px);
            width: clamp(400px, calc(100vw * 532 / var(--layout-ref-width)), 532px);
            max-width: min(100%, 532px);
            margin-left: auto;
            align-self: center;
            align-items: center;

            img,
            .media-text-video {
                display: block;
                width: 100%;
                height: auto;
                min-height: clamp(200px, calc(100vw * 408 / var(--layout-ref-width)), 408px);
                max-height: none;
                aspect-ratio: auto;
                object-fit: contain;
                object-position: center;
            }

            @media (max-width: 900px) {
                flex: 0 1 auto;
                width: 100%;
                max-width: 100%;
                margin-left: 0;
            }

            .media-text-body-block[data-field-key='image-caption'],
            .media-text-key-image-caption {
                @media (max-width: 768px) {
                    width: 100%;
                    max-width: 100%;
                    min-width: 0;
                    word-break: break-all;
                    overflow-wrap: break-word;
                }
            }
        }

        .media-text-body-block,
        .media-text-key-title,
        .media-text-key-body,
        .media-text-key-caption {
            text-align: left;
        }

        .media-text-body-block[data-field-key='title'],
        .media-text-key-title {
            margin: 0 0 clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 150%;
            color: #1c1b20;
            word-break: normal;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 900px) {
                font-size: clamp(24px, calc(100vw * 24 / 390), 26px);
                line-height: 160%;

                .media-text-plain-line:first-child {
                    white-space: normal;

                    .ict-si-sm-headline-accent {
                        display: block;
                    }
                }
            }

            /* CMS 1행: 「자체 플랫폼 MyHANIS APP」— 영역 좁아도 1행 유지 */
            .media-text-plain-line:first-child {
                white-space: nowrap;

                @media (max-width: 1200px) {
                    white-space: normal;
                }
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: normal;
                overflow-wrap: break-word;

                .media-text-plain-line:first-child {
                    white-space: normal;

                    .ict-si-sm-headline-accent {
                        display: inline;
                    }
                }

                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                .media-text-plain-line + .media-text-plain-line {
                    margin-top: 0;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 500;
            font-size: clamp(14px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #47454f;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            .media-text-plain-line + .media-text-plain-line {
                margin-top: 0.65em;
            }

            @media (max-width: 900px) {
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: break-all;
                overflow-wrap: break-word;
            }
        }

        /* copy 영역 하단 캡션 (MYHANIS 전용) */
        .media-text-body-block[data-field-key='caption'],
        .media-text-key-caption {
            margin: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px) 0 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454F;
            text-align: left;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 900px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: break-all;
                overflow-wrap: break-word;
            }
        }
    }

    /* WMS — 이미지 ← · 텍스트 → (RTU APP) */
    section.WMS[class*='-media-text-section'] {
        [class*='-media-text-wrap'].media-text-wrap {
            flex-direction: row;
            justify-content: space-between;
            gap: clamp(60px, calc(100vw * 112 / var(--layout-ref-width)), 112px);

            @media (max-width: 900px) {
                flex-direction: column;
                justify-content: center;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
        }

        .media-text-media {
            flex: 0 0 clamp(320px, calc(100vw * 760 / var(--layout-ref-width)), 760px);
            width: clamp(320px, calc(100vw * 760 / var(--layout-ref-width)), 760px);
            max-width: min(100%, 760px);
            align-items: center;

            img,
            .media-text-video {
                display: block;
                width: 100%;
                height: auto;
                min-height: 0;
                max-height: none;
                aspect-ratio: auto;
                object-fit: contain;
                object-position: left center;
            }

            @media (max-width: 900px) {
                flex: 0 1 auto;
                width: 100%;
                max-width: 100%;

                img,
                .media-text-video {
                    object-position: center;
                }
            }

            .media-text-body-block[data-field-key='image-caption'],
            .media-text-key-image-caption {
                margin-top: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 20px);

                @media (max-width: 768px) {
                    width: 100%;
                    max-width: 100%;
                    min-width: 0;
                    word-break: break-all;
                    overflow-wrap: break-word;
                }
            }
        }

        .media-text-copy {
            flex: 1 1 auto;
            min-width: 0;
            text-align: left;
            padding-inline-start: 0;

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                word-break: break-all;
                overflow-wrap: break-word;
            }
        }

        .media-text-body-block,
        .media-text-key-title,
        .media-text-key-body {
            text-align: left;
        }

        .media-text-body-block[data-field-key='title'],
        .media-text-key-title {
            margin: 0 0 clamp(4px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 150%;
            color: #1c1b20;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 900px) {
                font-size: clamp(24px, calc(100vw * 24 / 390), 26px);
                line-height: 160%;
                display: flex;
                flex-wrap: nowrap;
                white-space: nowrap;

                .media-text-plain-line {
                    flex: 0 0 auto;
                }

                .media-text-plain-line + .media-text-plain-line::before {
                    content: ' ';
                }
            }

            @media (max-width: 768px) {
                display: block;
                white-space: normal;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: break-all;
                overflow-wrap: break-word;

                .media-text-plain-line {
                    flex: none;
                }
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px) 0 0;
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454f;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 900px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: break-all;
                overflow-wrap: break-word;
            }
        }
    }

    /* MES sections (from body.ict-mes — SI&SM 겹치는 섹션코드만 MES_ 접두사) */

    section.MES_OVERVIEW[class*='-media-text-section'] {
        background: transparent;
        color: #1c1b20;
        box-sizing: border-box;
        overflow: visible;
        padding-block: clamp(100px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
        padding-inline: var(--company-inline-gutter);

        @media (max-width: 900px) {
            padding-block: clamp(10px, calc(100vw * 20 / 390), 40px);
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-media-text-wrap'].media-text-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
            gap: clamp(28px, calc(100vw * 91 / var(--layout-ref-width)), 91px);

            @media (max-width: 900px) {
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 12px;
            }
        }

        .media-text-media {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 0 1 clamp(350px, calc(100vw * 783 / var(--layout-ref-width)), 783px);
            width: clamp(350px, calc(100vw * 783 / var(--layout-ref-width)), 783px);
            min-width: 0;
            max-width: min(100%, 783px);
            margin: 0;
            aspect-ratio: auto;
            min-height: 0;
            overflow: visible;
            background: transparent;
            align-self: center;

            &::before,
            &::after {
                display: none;
            }

            img,
            .media-text-video {
                position: relative;
                width: 100%;
                aspect-ratio: 783 / 393;
                min-height: clamp(180px, calc(100vw * 393 / var(--layout-ref-width)), 393px);
                height: auto;
                object-fit: contain;
                object-position: left center;
                display: block;
            }

            @media (max-width: 900px) {
                order: 10;
                flex: 1 1 auto;
                width: 100%;
                max-width: 100%;

                img,
                .media-text-video {
                    object-position: center;
                    border-radius: clamp(12px, calc(100vw * 16 / 390), 16px);
                    aspect-ratio: 783 / 393;
                    min-height: clamp(207px, calc(100vw * 207 / 390), 244px);
                }
            }

            .media-text-body-block[data-field-key='image-caption'],
            .media-text-key-image-caption {
                flex-shrink: 0;
                width: 100%;
                margin: 0;
                font-weight: 400;
                font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
                line-height: 160%;
                color: #64748b;
                text-align: center;

                > p,
                .media-text-plain-line {
                    margin: 0;
                    font: inherit;
                    color: inherit;
                }

                @media (max-width: 768px) {
                    font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                    line-height: 160%;
                }
            }
        }

        .media-text-copy {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            padding: 0;
            text-align: left;
            text-shadow: none;
            color: #1c1b20;
            word-break: keep-all;
            box-sizing: border-box;

            @media (max-width: 900px) {
                display: contents;
                width: 100%;
            }
        }

        .media-text-body-block {
            text-align: left;
            color: inherit;
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #1b7076;
            letter-spacing: 0.04em;
            text-transform: uppercase;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 900px) {
                order: 1;
                margin-bottom: clamp(8px, calc(100vw * 8 / 390), 12px);
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }
        }

        .media-text-body-block[data-field-key='title'],
        .media-text-key-title {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(32px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 140%;
            color: #1c1b20;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 900px) {
                order: 2;
                margin-bottom: clamp(12px, calc(100vw * 12 / 390), 16px);
                font-size: clamp(32px, calc(100vw * 32 / 390), 36px);
                line-height: 140%;
            }
        }

        .media-text-body-block[data-field-key='pretitle'],
        .media-text-key-pretitle {
            margin: 0 0 clamp(4px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 160%;
            color: #47454F;

            @media (max-width: 900px) {
                order: 3;
                margin-bottom: clamp(8px, calc(100vw * 8 / 390), 12px);
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px) 0 0;
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454f;

            @media (max-width: 900px) {
                order: 4;
                margin: 0 0 clamp(20px, calc(100vw * 24 / 390), 28px);
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
                word-break: normal;
                overflow-wrap: break-word;
                text-wrap: pretty;

                > p,
                .media-text-plain-line {
                    display: block;
                }
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-action-wrap {
            margin-top: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            padding: 0;
            display: flex;
            justify-content: flex-start;

            @media (max-width: 900px) {
                order: 11;
                width: 100%;
                margin-top: clamp(20px, calc(100vw * 24 / 390), 28px);
            }
        }

        .media-text-primary-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            min-width: 0;
            width: fit-content;
            height: clamp(44px, calc(100vw * 52 / var(--layout-ref-width)), 52px);
            padding: 0 36px;
            font-weight: 600;
            font-size: 16px;
            line-height: 120%;
            color: #ffffff;
            text-decoration: none;
            background: #1b7076;
            border: none;
            border-radius: 10px;
            box-shadow: none;
            transition: none;

            @media (max-width: 900px) {
                width: 100%;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }
        }

        .media-text-action-arrow {
            display: none;
        }
    }

    /* KEY_FEATURES — 2×2 · 아이콘(배경 포함 컷) 92×92 ← · 텍스트 → · 카드 흰색 */
    .ict-mes-key-features.KEY_FEATURES {
        box-sizing: border-box;
        background: transparent;
        padding: 20px var(--company-inline-gutter) clamp(80px, calc(100vw * 120 / var(--layout-ref-width)), 120px);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .ict-mes-key-features-inner {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }

        .ict-mes-key-features-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 768px) {
                grid-template-columns: 1fr;
                gap: 12px;
            }
        }

        .ict-mes-key-feature-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            padding: clamp(20px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
            background: #ffffff;
            border-radius: clamp(16px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            box-shadow: 0 4px 24px rgba(28, 27, 32, 0.08);
            word-break: keep-all;

            @media (max-width: 768px) {
                gap: clamp(12px, calc(100vw * 16 / 390), 16px);
                padding: clamp(16px, calc(100vw * 20 / 390), 24px);
                border-radius: 16px;
            }
        }

        .ict-mes-key-feature-card-icon {
            flex-shrink: 0;
            line-height: 0;

            img {
                display: block;
                width: clamp(60px, calc(100vw * 92 / var(--layout-ref-width)), 92px);
                height: clamp(60px, calc(100vw * 92 / var(--layout-ref-width)), 92px);
                object-fit: contain;
            }
        }

        .ict-mes-key-feature-card-body {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(4px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
        }

        .ict-mes-key-feature-card-title {
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 160%;
            color: #1c1b20;

            @media (max-width: 768px) {
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .ict-mes-key-feature-card-desc {
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            color: #47454f;

            @media (max-width: 768px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }
        }
    }

    .ict-mes-ai-assistant.AI_ASSISTANT {
        box-sizing: border-box;
        background: #15283f;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            padding-bottom: 100px;
        }

        .ict-mes-ai-assistant-inner {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }

        .ict-mes-ai-assistant-layout {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            justify-content: flex-start;
            width: 100%;
            gap: clamp(24px, calc(100vw * 48 / var(--layout-ref-width)), 48px);

            @media (max-width: 768px) {
                flex-direction: column;
                align-items: stretch;
                gap: clamp(28px, 6vw, 40px);
            }
        }

        .ict-mes-ai-assistant-cards {
            flex: 0 0 clamp(280px, calc(100vw * 646 / var(--layout-ref-width)), 646px);
            width: clamp(280px, calc(100vw * 646 / var(--layout-ref-width)), 646px);
            min-width: 0;
            max-width: min(100%, 646px);
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);

            @media (max-width: 768px) {
                order: 2;
                flex: 1 1 auto;
                width: 100%;
                max-width: 100%;
            }
        }

        .ict-mes-ai-assistant-card {
            box-sizing: border-box;
            flex: 1 1 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            padding:
                clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px)
                clamp(20px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            background: #2c4777;
            border-radius: 12px;
            word-break: keep-all;

            @media (max-width: 768px) {
                flex: 0 0 auto;
                gap: 10px;
                padding: 32px;
            }
        }

        .ict-mes-ai-assistant-card-title {
            margin: 0;
            font-weight: 500;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #ffffff;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .ict-mes-ai-assistant-card-desc {
            margin: 0;
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #a7c6ff;

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
                color: #a7c6ff;
            }
        }

        .ict-mes-ai-assistant-media {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            align-items: flex-start;
            align-self: stretch;

            @media (max-width: 768px) {
                order: 1;
                flex: 0 0 auto;
                width: 100%;
                min-height: clamp(403px, calc(100vw * 403 / 390), 480px);
                align-self: auto;
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: top center;

                @media (max-width: 768px) {
                    height: auto;
                    min-height: clamp(403px, calc(100vw * 403 / 390), 480px);
                    object-position: center;
                }
            }
        }
    }

    section.ict-si-sm-hero.MES_SOLUTION_TITLE[class*='-hero'] {
        text-align: left;
        box-sizing: border-box;
        margin: 0;
        padding:
            clamp(64px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
            var(--company-inline-gutter)
            clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
        background: #15283f;
        padding-bottom: 40px;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            padding-bottom: 10px;
        }

        [class*='-hero-inner'] {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
            text-align: left;

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
            }
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            font-weight: 700;
            font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 160%;
            color: #ffffff;
            word-break: keep-all;
            text-align: left;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
                text-align: left;
            }

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(24px, calc(100vw * 24 / 390), 28px);
                line-height: 160%;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #c4c7d0;
            word-break: keep-all;
            text-align: left;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
                text-align: left;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
                color: #c4c7d0;
                word-break: break-all;
                overflow-wrap: break-word;
                text-wrap: pretty;

                > p,
                .media-text-plain-line {
                    display: inline;
                }
            }
        }
    }

    section.ict-si-sm-hero.MES_SOLUTION_TITLE[class*='-hero'] + .ict-mes-ai-assistant.AI_ASSISTANT {
        padding-top: 0;
    }

    section.ict-si-sm-hero.PLATFORM_TITLE[class*='-hero'] {
        text-align: right;
        box-sizing: border-box;
        margin: 0;
        padding:
            clamp(64px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
            var(--company-inline-gutter)
            0;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            text-align: left;
        }

        [class*='-hero-inner'] {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
            text-align: right;

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                text-align: left;
            }
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            font-weight: 700;
            font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 160%;
            color: #1b7076;
            word-break: keep-all;
            text-align: right;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
                text-align: right;
            }

            @media (max-width: 768px) {
                font-size: clamp(24px, calc(100vw * 24 / 390), 28px);
                line-height: 160%;
                text-align: left;

                > p,
                .media-text-plain-line {
                    text-align: left;
                }
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #47454F;
            word-break: keep-all;
            text-align: right;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
                text-align: right;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                font-size: clamp(20px, calc(100vw * 20 / 390), 24px);
                line-height: 140%;
                word-break: break-all;
                overflow-wrap: break-word;
                text-wrap: pretty;
                text-align: left;

                > p,
                .media-text-plain-line {
                    display: block;
                    text-align: left;
                }
            }
        }
    }

    section.ict-si-sm-hero.MES_TITLE[class*='-hero'] {
        text-align: center;
        padding: clamp(48px, 4vw, 100px) 0 var(--company-narrow-inline);
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-hero-inner'] {
            max-width: min(1000px, 100%);
            margin-left: auto;
            margin-right: auto;

            > div {
                font-weight: 600;
                font-size: clamp(32px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
                line-height: 150%;
                text-align: center;
                color: #47454f;
                letter-spacing: -0.02em;
                margin: 0;
            }

            @media (max-width: 768px) {
                > div {
                    font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                    line-height: 140%;
                }
            }
        }
    }

    /* PC 스크롤 reveal — OVERVIEW (ict-si-sm.js) */
    @media (min-width: 769px) {
        section.ict-si-sm-overview.OVERVIEW .ict-si-sm-overview-media,
        section.ict-si-sm-overview.OVERVIEW .ict-si-sm-overview-copy > *,
        section.ict-si-sm-overview.OVERVIEW .ict-si-sm-scope-heading > *,
        section.ict-si-sm-overview.OVERVIEW .ict-si-sm-scope-col {
            opacity: 0;
            transform: translateY(28px);
            transition:
                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }

        section.ict-si-sm-overview.OVERVIEW.is-ict-si-sm-overview-media-in-view .ict-si-sm-overview-media {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-si-sm-overview-reveal-delay, 0ms);
        }

        section.ict-si-sm-overview.OVERVIEW.is-ict-si-sm-overview-text-in-view .ict-si-sm-overview-copy > * {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-si-sm-overview-reveal-delay, 90ms);
        }

        section.ict-si-sm-overview.OVERVIEW.is-ict-si-sm-overview-scope-in-view .ict-si-sm-scope-heading > *,
        section.ict-si-sm-overview.OVERVIEW.is-ict-si-sm-overview-scope-in-view .ict-si-sm-scope-col {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-si-sm-overview-reveal-delay, 0ms);
        }
    }

    @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
        section.ict-si-sm-overview.OVERVIEW .ict-si-sm-overview-media,
        section.ict-si-sm-overview.OVERVIEW .ict-si-sm-overview-copy > *,
        section.ict-si-sm-overview.OVERVIEW .ict-si-sm-scope-heading > *,
        section.ict-si-sm-overview.OVERVIEW .ict-si-sm-scope-col {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            will-change: auto;
        }
    }

    /* PC 스크롤 reveal — MES_OVERVIEW · WMS · MYHANIS (ict-si-sm.js) */
    @media (min-width: 769px) {
        section.MES_OVERVIEW[class*='-media-text-section'] .media-text-media,
        section.MES_OVERVIEW[class*='-media-text-section'] .media-text-copy > *,
        section.WMS[class*='-media-text-section'] .media-text-media,
        section.WMS[class*='-media-text-section'] .media-text-copy > *,
        section.MYHANIS[class*='-media-text-section'] .media-text-media,
        section.MYHANIS[class*='-media-text-section'] .media-text-copy > * {
            opacity: 0;
            transform: translateY(28px);
            transition:
                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }

        section.MES_OVERVIEW[class*='-media-text-section'].is-ict-si-sm-media-in-view .media-text-media,
        section.WMS[class*='-media-text-section'].is-ict-si-sm-media-in-view .media-text-media,
        section.MYHANIS[class*='-media-text-section'].is-ict-si-sm-media-in-view .media-text-media {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-si-sm-media-reveal-delay, 0ms);
        }

        section.MES_OVERVIEW[class*='-media-text-section'].is-ict-si-sm-text-in-view .media-text-copy > *,
        section.WMS[class*='-media-text-section'].is-ict-si-sm-text-in-view .media-text-copy > *,
        section.MYHANIS[class*='-media-text-section'].is-ict-si-sm-text-in-view .media-text-copy > * {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-si-sm-media-reveal-delay, 90ms);
        }
    }

    @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
        section.MES_OVERVIEW[class*='-media-text-section'] .media-text-media,
        section.MES_OVERVIEW[class*='-media-text-section'] .media-text-copy > *,
        section.WMS[class*='-media-text-section'] .media-text-media,
        section.WMS[class*='-media-text-section'] .media-text-copy > *,
        section.MYHANIS[class*='-media-text-section'] .media-text-media,
        section.MYHANIS[class*='-media-text-section'] .media-text-copy > * {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            will-change: auto;
        }
    }
}

/* ──────────────────────────────────────────────────────────────
   Sensor on Wafer — OVERVIEW (MEDIA_TEXT: eyebrow · headline · summary · description)
   pageRenderer: `semi-sensor-on-wafer-media-text-section OVERVIEW`
   ────────────────────────────────────────────────────────────── */


body.semi-sensor-on-wafer .page-content {
    background: #f8fafb;

    /* OVERVIEW */ 
    section.OVERVIEW[class*='-media-text-section'] {
        background: transparent;
        box-sizing: border-box;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter);
        overflow: visible;
        color: #1c1b20;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-media-text-wrap'].media-text-wrap {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: clamp(32px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;

            @media (min-width: 769px) and (max-width: 900px) {
                align-items: stretch;
            }

            @media (max-width: 768px) {
                flex-direction: column;
                align-items: stretch;
                gap: clamp(28px, 6vw, 40px);
            }
        }

        .media-text-media {
            position: relative;
            flex: 0 0 auto;
            width: clamp(350px, calc(100vw * 647 / var(--layout-ref-width)), 647px);
            aspect-ratio: 647 / 550;
            height: auto;
            min-width: 0;
            margin: 0;
            overflow: hidden;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            background: #eff2f6;

            @media (min-width: 769px) and (max-width: 900px) {
                aspect-ratio: unset;
                align-self: stretch;
            }

            @media (max-width: 768px) {
                flex: 0 1 auto;
                width: 100%;
                max-width: 100%;
                aspect-ratio: 647 / 400;
                height: clamp(244px, calc(100vw * 244 / 390), 400px);
            }

            &::before,
            &::after {
                display: none;
            }

            img,
            .media-text-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
            }
        }

        .media-text-copy {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            text-align: left;
            text-shadow: none;
            color: #1c1b20;
            word-break: keep-all;
            box-sizing: border-box;
            align-self: center;

            @media (min-width: 769px) and (max-width: 900px) {
                align-self: stretch;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            @media (max-width: 768px) {
                align-self: auto;
                display: block;
            }
        }

        .media-text-body-block {
            text-align: left;
            color: inherit;
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #354dad;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
                word-break: break-all;
            }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 140%;
            letter-spacing: -0.02em;
            color: #1c1b20;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                letter-spacing: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(32px, calc(100vw * 32 / 390), 36px);
                line-height: 140%;
                word-break: break-all;
            }
        }

        .media-text-body-block[data-field-key='summary'],
        .media-text-key-summary {
            margin: 0 0 clamp(40px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #47454f;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
                word-break: break-all;
            }
        }

        .media-text-body-block[data-field-key='description'],
        .media-text-key-description {
            margin: 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454f;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
                margin-bottom: 40px;
                word-break: break-all;
            }
        }

        .media-text-action-wrap {
            margin-top: clamp(24px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
            padding: 0;
            display: flex;
            justify-content: flex-start;

            @media (max-width: 768px) {
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                width: 100%;
            }
        }

        .media-text-primary-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            min-width: 0;
            width: fit-content;
            height: clamp(44px, calc(100vw * 52 / var(--layout-ref-width)), 52px);
            padding: 0 clamp(20px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
            font-weight: 600;
            font-size: 16px;
            line-height: 120%;
            color: #ffffff;
            text-decoration: none;
            background: #354dad;
            border: none;
            border-radius: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            box-shadow: none;
            transition: background 0.18s ease;

            &:hover {
                background: #2568F9;
            }

            @media (max-width: 768px) {
                box-sizing: border-box;
                width: 100%;
                gap: 8px;
                padding: 0 clamp(20px, calc(100vw * 20 / 390), 36px);
                background: #354dad;
                border-radius: 10px;
            }
        }

        .media-text-action-arrow {
            display: inline-block;
            flex-shrink: 0;
            width: 18px;
            height: 16px;
            background-color: currentColor;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.3 14.2222L2.7 14.2222C2.20294 14.2222 1.8 13.8243 1.8 13.3333L1.8 11.5556C1.8 11.0646 1.39706 10.6667 0.9 10.6667C0.402944 10.6667 0 11.0646 0 11.5556L0 13.3333C0 14.8061 1.20883 16 2.7 16H15.3C16.7912 16 18 14.8061 18 13.3333V11.5556C18 11.0646 17.5971 10.6667 17.1 10.6667C16.6029 10.6667 16.2 11.0646 16.2 11.5556V13.3333C16.2 13.8243 15.7971 14.2222 15.3 14.2222ZM4.76367 7.37153C4.4122 7.71866 4.4122 8.28134 4.76367 8.62847L8.36367 12.184C8.71514 12.5312 9.28486 12.5312 9.63633 12.184L13.2363 8.62847C13.5878 8.28134 13.5878 7.71866 13.2363 7.37153C12.8849 7.02439 12.3151 7.02439 11.9637 7.37153L9.9 9.40972V0.888889C9.9 0.397969 9.49706 0 9 0C8.50294 0 8.1 0.397969 8.1 0.888889V9.40972L6.03633 7.37153C5.68486 7.02439 5.11514 7.02439 4.76367 7.37153Z' fill='black'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.3 14.2222L2.7 14.2222C2.20294 14.2222 1.8 13.8243 1.8 13.3333L1.8 11.5556C1.8 11.0646 1.39706 10.6667 0.9 10.6667C0.402944 10.6667 0 11.0646 0 11.5556L0 13.3333C0 14.8061 1.20883 16 2.7 16H15.3C16.7912 16 18 14.8061 18 13.3333V11.5556C18 11.0646 17.5971 10.6667 17.1 10.6667C16.6029 10.6667 16.2 11.0646 16.2 11.5556V13.3333C16.2 13.8243 15.7971 14.2222 15.3 14.2222ZM4.76367 7.37153C4.4122 7.71866 4.4122 8.28134 4.76367 8.62847L8.36367 12.184C8.71514 12.5312 9.28486 12.5312 9.63633 12.184L13.2363 8.62847C13.5878 8.28134 13.5878 7.71866 13.2363 7.37153C12.8849 7.02439 12.3151 7.02439 11.9637 7.37153L9.9 9.40972V0.888889C9.9 0.397969 9.49706 0 9 0C8.50294 0 8.1 0.397969 8.1 0.888889V9.40972L6.03633 7.37153C5.68486 7.02439 5.11514 7.02439 4.76367 7.37153Z' fill='black'/%3E%3C/svg%3E");
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
        }
    }

    /* PC 스크롤 reveal — OVERVIEW (semi-sensor-on-wafer.js) */
    @media (min-width: 769px) {
        section.OVERVIEW[class*='-media-text-section'] .media-text-media,
        section.OVERVIEW[class*='-media-text-section'] .media-text-copy > * {
            opacity: 0;
            transform: translateY(28px);
            transition:
                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }

        section.OVERVIEW[class*='-media-text-section'].is-sow-overview-media-in-view .media-text-media {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--sow-overview-reveal-delay, 0ms);
        }

        section.OVERVIEW[class*='-media-text-section'].is-sow-overview-text-in-view .media-text-copy > * {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--sow-overview-reveal-delay, 90ms);
        }
    }

    @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
        section.OVERVIEW[class*='-media-text-section'] .media-text-media,
        section.OVERVIEW[class*='-media-text-section'] .media-text-copy > * {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            will-change: auto;
        }
    }

    /* Product zone — wrapper 1장 배경 (PRODUCT_TITLE 미디어 URL · scroll) */
    .semi-sow-product-zone[style*='--semi-sow-product-bg: url'] {
        position: relative;
        background-color: #eff2f6;
        background-image:
            linear-gradient(180deg, rgba(239, 242, 246, 0) 0%, #f8fafb 100%),
            var(--semi-sow-product-bg);
        background-size: cover, cover;
        background-position: center top, center top;
        background-repeat: no-repeat, no-repeat;
        background-attachment: scroll, scroll;

        section.PRODUCT_TITLE[class*='-media-text-section'],
        section.PRODUCT_DETAIL[class*='-media-text-section'] {
            background-color: transparent;
            background-image: none;
        }
    }

    /* PRODUCT_TITLE — 인트로 (MEDIA_TEXT · 미디어 URL은 배경만 · 카피만 표시) */
    section.PRODUCT_TITLE[class*='-media-text-section'] {
        position: relative;
        z-index: 0;
        background-color: transparent;
        box-sizing: border-box;
        padding-top: clamp(100px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
        padding-bottom: clamp(80px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
        padding-inline: var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-media-text-wrap'].media-text-wrap {
            display: block;
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
        }

        .media-text-media {
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .media-text-copy {
            display: flex;
            flex-direction: column;
            gap: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: left;
            text-shadow: none;
            color: #1c1b20;
            word-break: keep-all;
            box-sizing: border-box;
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0;
            font-weight: 700;
            font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 150%;
            color: #162d55;

            > p,
            .media-text-plain-line {
                margin: 0;
                font-weight: 700;
                font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
                line-height: 150%;
                color: #162d55;
            }

            @media (max-width: 768px) {
                font-size: clamp(20px, calc(100vw * 24 / 390), 24px);
                word-break: break-all;
                > p,
                .media-text-plain-line {
                    font-size: clamp(20px, calc(100vw * 24 / 390), 24px);
                }
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            color: #1c1b20;
            word-break: keep-all;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            .media-text-plain-line + .media-text-plain-line {
                margin-top: 0.12em;
            }

            .semi-product-detail-headline-accent {
                color: #354dad;
                font-weight: 700;
            }

            @media (max-width: 768px) {
                font-size: clamp(22px, calc(100vw * 28 / 390), 28px);
                line-height: 160%;
                word-break: break-all;
                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                .media-text-plain-line + .media-text-plain-line {
                    margin-top: 0;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }
    }

    section.PRODUCT_TITLE[class*='-media-text-section'] + section.PRODUCT_DETAIL[class*='-media-text-section'] {
        padding-top: 0;
    }

    /* PRODUCT_DETAIL — MEDIA_TEXT ×2 (1: 이미지 좌 · 2: 이미지 우 · SI-SM WMS/MYHANIS 패턴) */
    section.PRODUCT_DETAIL[class*='-media-text-section'] {
        background-color: transparent;
        color: #1c1b20;
        box-sizing: border-box;
        overflow: visible;
        padding:
            clamp(40px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding:
                clamp(32px, calc(100vw * 48 / var(--layout-ref-width)), 48px)
                var(--company-narrow-inline);
        }

        & + section.PRODUCT_DETAIL[class*='-media-text-section'] {
            padding-top: 0;
        }

        [class*='-media-text-wrap'].media-text-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: clamp(60px, calc(100vw * 112 / var(--layout-ref-width)), 112px);
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;

            @media (max-width: 900px) {
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: clamp(28px, 6vw, 40px);
            }
        }

        .media-text-media {
            position: relative;
            flex: 0 0 clamp(320px, calc(100vw * 532 / var(--layout-ref-width)), 532px);
            width: clamp(320px, calc(100vw * 532 / var(--layout-ref-width)), 532px);
            max-width: min(100%, 532px);
            min-width: 0;
            margin: 0;
            overflow: visible;
            background: transparent;

            &::before,
            &::after {
                display: none;
            }

            img,
            .media-text-video {
                display: block;
                width: 100%;
                height: auto;
                min-height: clamp(200px, calc(100vw * 408 / var(--layout-ref-width)), 408px);
                aspect-ratio: auto;
                object-fit: contain;
                object-position: left center;
                border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            }

            @media (max-width: 900px) {
                flex: 0 1 auto;
                width: 100%;
                max-width: 100%;

                img,
                .media-text-video {
                    min-height: clamp(200px, calc(100vw * 244 / 390), 320px);
                    object-position: center;
                }
            }
        }

        .media-text-copy {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            padding: 0;
            text-align: left;
            text-shadow: none;
            color: #1c1b20;
            word-break: keep-all;
            box-sizing: border-box;
        }

        .media-text-body-block {
            text-align: left;
            color: inherit;
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #47454f;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-size: clamp(16px, calc(100vw * 20 / 390), 20px);
                word-break: break-all;
                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }

        .media-text-body-block[data-field-key='title'],
        .media-text-key-title {
            margin: 0 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            color: #162d55;
            word-break: normal;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            .semi-product-detail-headline-accent {
                color: #354dad;
                font-weight: 700;
            }

            @media (max-width: 900px) {
                font-size: clamp(24px, calc(100vw * 28 / 390), 28px);
                line-height: 160%;
            }

            @media (max-width: 768px) {
                word-break: break-all;
                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                .media-text-plain-line + .media-text-plain-line {
                    margin-top: 0;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 400;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #000000;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            .media-text-plain-line + .media-text-plain-line {
                margin-top: 0.65em;
            }

            @media (max-width: 768px) {
                font-size: clamp(14px, calc(100vw * 16 / 390), 16px);
                word-break: break-all;
                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                .media-text-plain-line + .media-text-plain-line {
                    margin-top: 0;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }
    }

    /* PRODUCT_DETAIL 2번째 — 이미지 우 (MYHANIS row-reverse) */
    section.PRODUCT_DETAIL.semi-product-detail--image-right[class*='-media-text-section'] {
        [class*='-media-text-wrap'].media-text-wrap {
            flex-direction: row-reverse;

            @media (max-width: 900px) {
                flex-direction: column;
            }
        }

        .media-text-media {
            margin-left: auto;

            img,
            .media-text-video {
                object-position: right center;
            }

            @media (max-width: 900px) {
                margin-left: 0;

                img,
                .media-text-video {
                    object-position: center;
                }
            }
        }
    }

    /* PC 스크롤 reveal — PRODUCT_DETAIL (semi-sensor-on-wafer.js) */
    @media (min-width: 769px) {
        section.PRODUCT_DETAIL[class*='-media-text-section'] .media-text-media,
        section.PRODUCT_DETAIL[class*='-media-text-section'] .media-text-copy > * {
            opacity: 0;
            transform: translateY(28px);
            transition:
                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }

        section.PRODUCT_DETAIL[class*='-media-text-section'].is-sow-product-detail-media-in-view .media-text-media {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--sow-product-detail-reveal-delay, 0ms);
        }

        section.PRODUCT_DETAIL[class*='-media-text-section'].is-sow-product-detail-text-in-view .media-text-copy > * {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--sow-product-detail-reveal-delay, 90ms);
        }
    }

    @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
        section.PRODUCT_DETAIL[class*='-media-text-section'] .media-text-media,
        section.PRODUCT_DETAIL[class*='-media-text-section'] .media-text-copy > * {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            will-change: auto;
        }
    }

    /* KEY_FEATURES — 4열 특징 카드 (1920: gap 36, 카드 높이 262) */
    .semi-key-features.KEY_FEATURES {
        box-sizing: border-box;
        background: transparent;
        padding-top: 0;
        padding-bottom: clamp(60px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
        padding-inline: var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .semi-key-features-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
        }

        .semi-key-features-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 36 / var(--layout-ref-width)), 36px);

            @media (max-width: 1100px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            @media (max-width: 768px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }
        }

        .semi-key-feature-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: clamp(14px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            min-height: clamp(200px, calc(100vw * 262 / var(--layout-ref-width)), 262px);
            padding: clamp(24px, calc(100vw * 36 / var(--layout-ref-width)), 36px)
                clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 18px);
            background: #eff2f6;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            text-align: center;
            word-break: keep-all;

            @media (max-width: 768px) {
                min-height: auto;
                gap: clamp(8px, calc(100vw * 8 / 390), 12px);
                padding:
                    clamp(16px, calc(100vw * 16 / 390), 24px)
                    clamp(10px, calc(100vw * 10 / 390), 14px);
                border-radius: 20px;
            }
        }

        .semi-key-feature-card-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: clamp(48px, calc(100vw * 64 / var(--layout-ref-width)), 64px);
            height: clamp(48px, calc(100vw * 64 / var(--layout-ref-width)), 64px);
            flex-shrink: 0;

            @media (max-width: 768px) {
                width: clamp(40px, calc(100vw * 40 / 390), 48px);
                height: clamp(40px, calc(100vw * 40 / 390), 48px);
            }

            img {
                display: block;
                width: clamp(40px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
                height: clamp(35px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
                object-fit: contain;

                @media (max-width: 768px) {
                    width: clamp(40px, calc(100vw * 40 / 390), 48px);
                    height: clamp(40px, calc(100vw * 40 / 390), 48px);
                }
            }
        }

        .semi-key-feature-card-title {
            font-weight: 500;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #2c4777;
            word-break: break-all; 
            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }
        }

        .semi-key-feature-card-desc {
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
            line-height: 160%;
            color: #47454f;
            word-break: break-all; 
            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }
        }
    }

    /* 섹션 NAV — 서브 nav pin 시 sticky 해제 (hd-product-subnav 와 동일) */
    @media (min-width: 769px) {
        section.semi-sensor-on-wafer-list-section.NAV.semi-section-nav--released {
            position: relative;
            top: auto;
            z-index: auto;
        }
    }

    /* 제품 서브 nav — hd-product-subnav 와 동일 구조(형제 선택자, bar--pinned 분리) */
    .semi-product-subnav-section {
        width: 100%;
        box-sizing: border-box;

        .semi-product-subnav-placeholder {
            display: none;
            width: 100%;
        }

        &.is-pinned .semi-product-subnav-placeholder {
            display: block;
        }

        .semi-product-subnav-bar {
            width: 100%;
            max-height: 74px;
            background: #eff2f6;
            box-sizing: border-box;
        }

        .semi-product-subnav-bar--pinned {
            position: fixed;
            top: var(--public-header-height);
            left: 0;
            right: 0;
            z-index: 998;
        }

        .semi-product-subnav-content {
            width: 100%;
            max-width: calc(var(--company-content-max) + (var(--company-inline-gutter) * 2));
            margin-left: auto;
            margin-right: auto;
            padding: 12px var(--company-inline-gutter);
            box-sizing: border-box;

            @media (max-width: 768px) {
                padding: 8px 0;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                scroll-padding-inline: var(--company-narrow-inline);
                scrollbar-width: none;

                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }

        .semi-product-subnav-list {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: clamp(16px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            box-sizing: border-box;
            min-height: 0;

            @media (max-width: 768px) {
                justify-content: flex-start;
                gap: 10px;
                width: max-content;
                min-width: 100%;
                padding: 0 var(--company-narrow-inline);
            }
        }

        .semi-product-subnav-item {
            flex: 0 0 auto;
            min-width: 0;
            margin: 0;
            padding: 0;
            list-style: none;

            @media (max-width: 768px) {
                flex: 0 0 auto;
            }
        }

        .semi-product-subnav-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 152px;
            height: clamp(40px, calc(100vw * 50 / var(--layout-ref-width)), 50px);
            max-height: 50px;
            padding: 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            border-radius: 999px;
            box-sizing: border-box;
            font-weight: 500;
            font-size: clamp(0.875rem, 0.35vw + 0.8rem, 0.9375rem);
            line-height: 1.3;
            color: #2c4777;
            text-decoration: none;
            transition: background 0.18s ease, color 0.18s ease;

            @media (max-width: 768px) {
                flex-shrink: 0;
                width: max-content;
                min-width: clamp(128px, calc(100vw * 128 / 390), 152px);
                height: clamp(43px, calc(100vw * 43 / 390), 50px);
                padding: clamp(12px, calc(100vw * 12 / 390), 20px) clamp(24px, calc(100vw * 24 / 390), 26px);
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                white-space: nowrap;
            }

            &:hover {
                background: #dcebf9;
                color: #354dad;
            }

            &.semi-product-subnav-link--active,
            &[aria-current='true'] {
                font-weight: 600;
                background: #354dad;
                color: #ffffff;

                &:hover {
                    background: #354dad;
                    color: #ffffff;
                }
            }
        }
    }

    /* PARTNER_LOGOS — 5열 · 1320 · 로고박스 260×120 · 이미지 160×80 · 배경 없음 */
    .semi-partner-logos.PARTNER_LOGOS {
        background: transparent;
        box-sizing: border-box;
        padding-top: 0;
        padding-bottom: clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
        padding-inline: var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-block:  clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            padding-inline: var(--company-narrow-inline);
        }

        .semi-partner-logos-inner {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }

        .semi-partner-logos-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .semi-partner-logos-item {
            flex: 0 0 20%;
            width: 20%;
            max-width: 20%;
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;

            @media (max-width: 1100px) {
                flex: 0 0 33.333%;
                width: 33.333%;
                max-width: 33.333%;
            }
        }

        .semi-partner-logos-cell {
            width: min(100%, clamp(200px, calc(100vw * 260 / var(--layout-ref-width)), 260px));
            max-width: 260px;
            height: clamp(88px, calc(100vw * 120 / var(--layout-ref-width)), 120px);
            max-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(8px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            box-sizing: border-box;
        }

        .semi-partner-logos-cell img {
            display: block;
            width: clamp(80px, calc(100vw * 160 / var(--layout-ref-width)), 160px);
            max-width: 160px;
            height: clamp(40px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            max-height: 80px;
            object-fit: contain;
        }
    }

    /* RELATED_SOLUTIONS — 반도체 다른 제품 카드 (1320 · gap 24 · 배경 없음) */
    .semi-related-solutions.RELATED_SOLUTIONS {
        background: transparent;
        box-sizing: border-box;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter)
            clamp(80px, calc(100vw * 140 / var(--layout-ref-width)), 140px);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .semi-related-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;

            .semi-related-title {
                margin: 0 0 clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
                font-weight: 500;
                font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
                line-height: 140%;
                color: #47454f;

                @media (max-width: 768px) {
                    font-weight: 600;
                    font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                    line-height: 160%;
                }
            }

            .semi-related-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

                @media (max-width: 900px) {
                    grid-template-columns: 1fr;
                }

                .semi-related-card {
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
                    min-height: clamp(160px, calc(100vw * 220 / var(--layout-ref-width)), 220px);
                    padding:
                        clamp(32px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
                        clamp(24px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
                    border: 1px solid #e6ebf0;
                    border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                    background: #ffffff;
                    color: inherit;
                    text-decoration: none;
                    transition: border-color 0.18s ease;

                    &:hover {
                        border-color: #354dad;
                        text-decoration: none;

                        .semi-related-card-title {
                            color: #354dad;
                        }

                        .semi-related-card-arrow {
                            color: #354dad;
                        }
                    }

                    &:focus-visible {
                        outline: 2px solid #354dad;
                        outline-offset: 2px;
                    }

                    .semi-related-card-head {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 12px;
                        width: 100%;
                    }

                    .semi-related-card-title {
                        margin: 0;
                        font-weight: 700;
                        font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                        line-height: 140%;
                        color: #162d55;
                        transition: color 0.18s ease;
                    }

                    .semi-related-card-arrow {
                        flex-shrink: 0;
                        width: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                        height: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                        background-color: currentColor;
                        color: #cbd5e1;
                        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 5l8 7-8 7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 5l8 7-8 7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                        -webkit-mask-size: contain;
                        mask-size: contain;
                        -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                        -webkit-mask-position: center;
                        mask-position: center;
                        transition: color 0.18s ease;
                    }

                    .semi-related-card-desc {
                        margin: 0;
                        font-weight: 400;
                        font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
                        line-height: 160%;
                        color: #64748b;
                    }
                }
            }
        }
    }

    /* SMALL_TITLE · SPEC_CONTENT_SMALL_TITLE — 중간 소제목 (가운데 · 32px) */
    section.semi-sensor-on-wafer-hero.SMALL_TITLE[class*='-hero'],
    section.semi-sensor-on-wafer-hero.SPEC_CONTENT_SMALL_TITLE[class*='-hero'] {
        text-align: center;
        padding: 60px var(--company-narrow-inline);
        box-sizing: border-box;
        background: transparent;

        [class*='-hero-inner'] {
            max-width: min(1000px, 100%);
            margin-left: auto;
            margin-right: auto;

            > div:not(.media-text-body-block),
            .media-text-body-block,
            .media-text-plain-line {
                font-weight: 600;
                font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
                line-height: 140%;
                text-align: center;
                color: #1c1b20;
                margin: 0;
            }

            @media (max-width: 768px) {
                > div:not(.media-text-body-block),
                .media-text-body-block,
                .media-text-plain-line {
                    font-size: clamp(18px, calc(100vw * 20 / 390), 20px);
                    line-height: 140%;
                }
            }
        }
    }

    /* IMAGE — SMALL_TITLE 바로 다음 (2번째 · 최대 1078×478) */
    section.semi-sensor-on-wafer-hero.SMALL_TITLE[class*='-hero'] + section.IMAGE[class*='-image-section'] {
        box-sizing: border-box;
        padding:
            0
            var(--company-inline-gutter)
            clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            padding-bottom: clamp(32px, calc(100vw * 40 / 390), 40px);
        }

        img {
            display: block;
            width: 100%;
            max-width: min(1078px, 100%);
            max-height: clamp(200px, calc(100vw * 478 / var(--layout-ref-width)), 478px);
            height: auto;
            object-fit: contain;
            object-position: center;
            margin-inline: auto;
        }
    }

    /* APPLICATION_TITLE — SUBJECT 공통 타이포 (제품 활용 프로세스 영역 제목) */
    section.APPLICATION_TITLE[class*='-hero'] {
        text-align: center;
        padding-top: clamp(40px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
        padding-bottom: clamp(24px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
        padding-inline: var(--company-narrow-inline);
        box-sizing: border-box;
        background: transparent;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            padding-block: 40px;

            [class*='-hero-inner'] {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 18px;
            }
        }

        [class*='-hero-inner'] {
            max-width: min(1000px, 100%);
            margin-left: auto;
            margin-right: auto;

            > div:not(.media-text-body-block) {
                font-weight: 700;
                font-size: clamp(28px, 1.25rem + 2vw, 40px);
                line-height: 160%;
                text-align: center;
                color: #000000;
                letter-spacing: -0.02em;
                margin: 0;
            }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            width: 100%;
            font-weight: 700;
            font-size: clamp(28px, 1.25rem + 2vw, 40px);
            line-height: 160%;
            text-align: center;
            color: #000000;
            letter-spacing: -0.02em;
            margin: 0 0 0.75rem;

            @media (max-width: 768px) {
                margin: 0;
            }

            @media (max-width: 430px) {
                font-weight: 600;
                font-size: 24px;
                line-height: 160%;
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                letter-spacing: inherit;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            width: 100%;
            font-weight: 600;
            font-size: clamp(11px, 1.85vw + 0.55rem, 24px);
            line-height: 160%;
            text-align: center;
            color: #2c4777;
            margin: 0;

            @media (max-width: 768px) {
                font-size: clamp(11px, 0.75vw + 0.6rem, 13px);
                word-break: break-all;
            }

            @media (max-width: 430px) {
                font-weight: 600;
                font-size: 12px;
                line-height: 160%;
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                letter-spacing: inherit;
                color: inherit;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    /* UI Software zone — wrapper 배경 (UI_SOFTWARE_TITLE 미디어 URL · scroll) */
    .semi-sow-ui-software-zone[style*='--semi-sow-ui-software-bg: url'] {
        position: relative;
        background-color: #15283f;
        background-image:
            linear-gradient(180deg, rgba(21, 40, 63, 0.55) 0%, rgba(21, 40, 63, 0.92) 100%),
            var(--semi-sow-ui-software-bg);
        background-size: cover, cover;
        background-position: center top, center top;
        background-repeat: no-repeat, no-repeat;
        background-attachment: scroll, scroll;

        section.UI_SOFTWARE_TITLE[class*='-media-text-section'],
        section.UI_IMAGE[class*='-image-section'],
        section.semi-ui-software-features.UI_SOFTWARE_FEATURES {
            background-color: transparent;
            background-image: none;
        }
    }

    .semi-sow-ui-software-zone:not([style*='--semi-sow-ui-software-bg: url']) {
        background-color: #15283f;
    }

    /* UI_SOFTWARE_TITLE — 다크 zone 타이틀 (MEDIA_TEXT · 미디어 URL은 배경만) */
    section.UI_SOFTWARE_TITLE[class*='-media-text-section'] {
        position: relative;
        z-index: 0;
        box-sizing: border-box;
        text-align: center;
        padding-top: clamp(60px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
        padding-bottom: clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
        padding-inline: var(--company-inline-gutter);
        background: transparent;

        [class*='-media-text-wrap'].media-text-wrap {
            display: block;
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
        }

        .media-text-media {
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .media-text-copy {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            word-break: keep-all;
            box-sizing: border-box;
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            margin: 0;
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 160%;
            color: #ffffff;
            letter-spacing: -0.02em;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 400;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #A7C6FF;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }
    }

    /* UI_IMAGE — 공통 IMAGE 패턴 · 최대 1088×549 · shadow-semi */
    section.UI_IMAGE[class*='-image-section'] {
        box-sizing: border-box;
        padding-inline: var(--company-narrow-inline);
        text-align: center;
        background: transparent;

        img {
            width: 100%;
            max-width: min(1088px, 100%);
            max-height: 549px;
            height: auto;
            display: block;
            margin-inline: auto;
            object-fit: contain;
            object-position: center;
            border-radius: 8px;
            filter: drop-shadow(0 0 40px rgba(37, 104, 249, 0.6));
        }
    }

    /* UI_SOFTWARE_FEATURES — 4열 특징 (다크 배경) */
    .semi-ui-software-features.UI_SOFTWARE_FEATURES {
        box-sizing: border-box;
        background: transparent;
        padding:
            clamp(60px, calc(100vw * 100 / var(--layout-ref-width)), 100px)
            var(--company-inline-gutter)
            clamp(100px, calc(100vw * 120 / var(--layout-ref-width)), 120px);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            padding-bottom: clamp(48px, calc(100vw * 60 / 390), 60px);
        }

        .semi-ui-software-features-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
        }

        .semi-ui-software-features-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;

            @media (max-width: 1100px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

        }

        .semi-ui-software-feature-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            word-break: keep-all;
        }

        /* 아이콘 — 피그마 graph-up · 100×100 · padding 20 · SVG 60×60 */
        .semi-ui-software-feature-card-icon {
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: clamp(56px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
            height: clamp(56px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
            padding: clamp(11px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            background: #ffffff;
            border-radius: clamp(14px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            box-shadow: 0 0 40px rgba(37, 104, 249, 0.6);
            margin-bottom: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            svg {
                display: block;
                width: clamp(33px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
                height: clamp(33px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
                flex-shrink: 0;
            }
        }

        .semi-ui-software-feature-card-title {
            font-weight: 600;
            font-size: clamp(22px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #ffffff;
            margin-bottom: clamp(10px, calc(100vw * 12 / var(--layout-ref-width)), 12px);

            @media (max-width: 768px) {
                word-break: break-all; 
            }
        }

        .semi-ui-software-feature-card-desc {
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 170%;
            color: #94a3b8;
            word-break: break-all; 

        }
    }

    /* Spec zone — SPEC_TITLE 미디어 URL · padding 120 · gap 24 · 그라데이션 54.32% */
    .semi-sow-spec-zone {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: clamp(60px, calc(100vw * 120 / var(--layout-ref-width)), 120px) 0;
        gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
        background-color: #f8fafb;
        background-image: linear-gradient(180deg, rgba(239, 242, 246, 0) 0%, #f8fafb 54.32%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-attachment: scroll;
    }

    .semi-sow-spec-zone[style*='--semi-sow-spec-bg: url'] {
        background-color: #eff2f6;
        background-image:
            linear-gradient(180deg, rgba(239, 242, 246, 0) 0%, #f8fafb 54.32%),
            var(--semi-sow-spec-bg);
        background-size: cover, cover;
        background-position: center top, center top;
        background-repeat: no-repeat, no-repeat;
        background-attachment: scroll, scroll;
    }

    .semi-sow-spec-zone {
        section.SPEC_TITLE[class*='-media-text-section'],
        section.SPEC_INTRO[class*='-hero'],
        section.SPEC_CONTENT_SMALL_TITLE[class*='-hero'],
        section.semi-spec-content.SPEC_CONTENT {
            width: 100%;
            background-color: transparent;
            background-image: none;
        }
    }

    /* SPEC_TITLE — 가운데 · 미디어 URL은 zone 배경만 */
    .semi-sow-spec-zone section.SPEC_TITLE[class*='-media-text-section'] {
        position: relative;
        z-index: 0;
        box-sizing: border-box;
        padding-block: var(--company-padding-block);
        padding-inline: var(--company-inline-gutter);
        text-align: center;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-media-text-wrap'].media-text-wrap {
            display: block;
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
        }

        .media-text-media {
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .media-text-copy {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            word-break: keep-all;
            box-sizing: border-box;
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            margin: 0;
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 160%;
            color: #000000;
            letter-spacing: -0.02em;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 600;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #2c4777;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }
    }

    /* SPEC_INTRO — 2단 (좌: title + summary · 우: body) */
    .semi-sow-spec-zone section.SPEC_INTRO[class*='-hero'] {
        box-sizing: border-box;
        padding-block: var(--company-padding-block);
        padding-inline: var(--company-inline-gutter);
        text-align: left;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-hero-inner'] {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: clamp(32px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            align-items: start;
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;

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

        .semi-spec-intro-left {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: clamp(22px, calc(100vw * 30 / var(--layout-ref-width)), 30px);
            grid-column: 1;
            grid-row: 1;
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }

        .media-text-body-block[data-field-key='title'],
        .media-text-key-title,
        .media-text-body-block[data-field-key='summary'],
        .media-text-key-summary,
        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
            overflow-wrap: break-word;
        }

        .media-text-body-block[data-field-key='title'],
        .media-text-key-title {
            margin: 0;
            font-weight: 700;
            font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 150%;
            color: #354dad;
            word-break: keep-all;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                word-break: break-all;
            }
        }

        .media-text-body-block[data-field-key='summary'],
        .media-text-key-summary {
            margin: 0;
            font-weight: 400;
            font-size: clamp(18px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            line-height: 160%;
            color: #162D55;
            word-break: keep-all;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                word-break: break-all;

                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            grid-column: 2;
            grid-row: 1;
            margin: 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454f;
            word-break: keep-all;

            @media (max-width: 768px) {
                grid-column: 1;
                grid-row: auto;
                word-break: break-all;
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            .media-text-plain-line + .media-text-plain-line {
                margin-top: 0.75em;
            }
        }
    }

    /* SPEC_CONTENT — 기본 제품 구성 · 4열 카드 */
    .semi-sow-spec-zone section.semi-spec-content.SPEC_CONTENT {
        box-sizing: border-box;
        padding: 0 var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .semi-spec-content-inner {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }

        .semi-spec-content-heading {
            margin: 0 0 clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            font-weight: 700;
            font-size: clamp(24px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 160%;
            text-align: center;
            color: #000000;
            letter-spacing: -0.02em;
        }

        .semi-spec-content-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 1100px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            @media (max-width: 768px) {
                grid-template-columns: 1fr;
                gap: 16px;
            }
        }

        .semi-spec-content-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            min-height: 100%;
            padding: 0;
            overflow: hidden;
            background: #ffffff;
            border-radius: clamp(10px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            box-shadow: 0 8px 40px rgba(22, 45, 85, 0.12);
            text-align: left;
            word-break: keep-all;
        }

        .semi-spec-content-card-image {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-height: clamp(120px, calc(100vw * 188 / var(--layout-ref-width)), 188px);
            margin: 0;
            padding: 0;
            background: #f8fafb;
            border-radius: clamp(10px, calc(100vw * 12 / var(--layout-ref-width)), 12px)
                clamp(10px, calc(100vw * 12 / var(--layout-ref-width)), 12px) 0 0;
            overflow: hidden;

            img {
                display: block;
                width: 100%;
                height: auto;
                max-width: none;
                max-height: clamp(120px, calc(100vw * 188 / var(--layout-ref-width)), 188px);
                object-fit: contain;
                object-position: center;
            }
        }

        .semi-spec-content-card-body {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
            gap: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            flex: 1 1 auto;
            padding:
                clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px)
                clamp(24px, calc(100vw * 36 / var(--layout-ref-width)), 36px)
                clamp(28px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
        }

        .semi-spec-content-card-title {
            width: 100%;
            text-align: left;
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #162d55;
        }

        .semi-spec-content-card-subtitle {
            width: 100%;
            text-align: left;
            font-weight: 600;
            font-size: clamp(15px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #354dad;
        }

        .semi-spec-content-card-desc {
            width: 100%;
            text-align: left;
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
            line-height: 160%;
            color: #47454f;
            word-break: break-all;
        }
    }

    /* PRODUCT_LINEUP — 5의 배수면 5열, 그 외 4열 · 클릭 시 팝업 */
    section.semi-product-lineup.PRODUCT_LINEUP {
        box-sizing: border-box;
        width: 100%;
        padding: clamp(60px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
            var(--company-inline-gutter);
        background-color: #060f24;
        background-image: radial-gradient(120% 90% at 50% 0%, #14254d 0%, #060f24 60%);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .semi-product-lineup-inner {
            width: 100%;
            max-width: var(--company-content-max); /* 4열(8개 등): 1320 */
            margin: 0 auto;
            box-sizing: border-box;
        }

        /* 5열(10·15개 등): 1920 - 132*2 = 1656 */
        &:has(.semi-product-lineup-grid[style*="--lineup-cols:5"]) .semi-product-lineup-inner {
            max-width: 1656px;
        }

        .semi-product-lineup-head {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            margin-bottom: clamp(32px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
            text-align: center;
        }

        .semi-product-lineup-eyebrow {
            font-weight: 600;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #a7c6ff;
        }

        .semi-product-lineup-heading {
            margin: 0;
            font-weight: 700;
            font-size: clamp(30px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            color: #ffffff;
        }

        .semi-product-lineup-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(var(--lineup-cols, 4), minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 1100px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            @media (max-width: 560px) {
                grid-template-columns: 1fr;
            }
        }

        .semi-product-lineup-card {
            display: flex;
            position: relative;
            /* 배지가 카드 상단 밖으로 절반 걸치도록 */
            padding-top: clamp(11px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
        }

        .semi-product-lineup-card-btn {
            position: relative;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            cursor: pointer;
            background: #ffffff;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            box-shadow: 0 10px 34px rgba(4, 12, 36, 0.38);
            overflow: visible;
            text-align: left;
            word-break: keep-all;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            font: inherit;
        }

        .semi-product-lineup-card-btn--nopopup {
            cursor: default;
        }

        .semi-product-lineup-card-btn:hover {
            transform: translateY(-4px);
            filter: drop-shadow(0px 0px 40px rgba(37, 104, 249, 0.6));
        }

        .semi-product-lineup-card-btn:hover .semi-product-lineup-card-media {
            background: #2568f9;
        }

        /* 배지 — 카드 상단 경계에 절반씩 걸침 */
        .semi-product-lineup-card-badge {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            box-sizing: border-box;
            padding: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px)
                clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            background: #354dad;
            border-radius: 38px;
            font-weight: 500;
            font-size: clamp(11px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            line-height: 130%;
            white-space: nowrap;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(4, 12, 36, 0.3);
        }

        /* 이미지 영역 — 남색 배경 · 상단 라운드 · 바디와 분리 (높이 ~200) */
        .semi-product-lineup-card-media {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
            padding: 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            height: clamp(150px, calc(100vw * 200 / var(--layout-ref-width)), 200px);
            background: #18317c;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px)
                clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px) 0 0;
            overflow: hidden;
        }

        .semi-product-lineup-card-media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 바디 — 흰색 · 하단 라운드 */
        .semi-product-lineup-card-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(4px, calc(100vw * 6 / var(--layout-ref-width)), 6px);
            width: 100%;
            box-sizing: border-box;
            padding: clamp(16px, calc(100vw * 20 / var(--layout-ref-width)), 20px)
                clamp(16px, calc(100vw * 20 / var(--layout-ref-width)), 20px)
                clamp(20px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
            background: #ffffff;
            border-radius: 0 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px)
                clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            text-align: center;
        }

        .semi-product-lineup-card-series {
            font-weight: 600;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 140%;
            color: #0f64c0;
        }

        .semi-product-lineup-card-title {
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #2c4777;
        }

        .semi-product-lineup-card-desc {
            font-weight: 400;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 170%;
            color: #2c4777;
        }

        /* 활성(현재 제품) 카드 — 이미지 영역을 밝은 파랑으로 강조 */
        .semi-product-lineup-card-btn--active .semi-product-lineup-card-media {
            background: radial-gradient(130% 130% at 50% 12%, #4d8af0 0%, #1f5bc4 72%);
        }

        .semi-product-lineup-card-btn--active .semi-product-lineup-card-badge {
            background: #18317c;
        }

        .semi-product-lineup-card-btn--active {
            box-shadow: 0 14px 44px rgba(31, 91, 196, 0.45);
        }
    }
}

/* ──────────────────────────────────────────────────────────────
   PRODUCT_LINEUP 팝업 — 하단 패널 · 변형(variant) 스펙 비교
   ────────────────────────────────────────────────────────────── */
body.semi-lineup-modal-open {
    overflow: hidden;
}

.semi-lineup-modal {
    /* body 직속이라 .page-content 변수 상속 안 됨 → 직접 선언 */
    --layout-ref-width: 1920;
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(4, 12, 30, 0.72);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.semi-lineup-modal.is-open {
    opacity: 1;
}

.semi-lineup-modal__dialog {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    padding: 36px 20px 60px;
    background: linear-gradient(90deg, #18317c 0%, #354dad 100%);
    border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px)
        clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px) 0 0;
    transform: translateY(40px);
    transition: transform 0.3s ease;
    color: #ffffff;
}

.semi-lineup-modal.is-open .semi-lineup-modal__dialog {
    transform: translateY(0);
}

.semi-lineup-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.semi-lineup-modal__title {
    display: inline-flex;
    margin-left: 32px;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    gap: 10px;
    padding: 4px clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
    background: #354dad;
    border-radius: 60px;
    font-weight: 600;
    font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
    line-height: 160%;
    color: #ffffff;
}

.semi-lineup-modal__actions {
    display: flex;
    align-items: center;
    flex: none;
    flex-wrap: nowrap;
    gap: 24px;
    padding: 0px 32px;
}

.semi-lineup-modal__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    flex: none;
    height: 48px;
    padding: 0 clamp(20px, calc(100vw * 36 / var(--layout-ref-width)), 36px);
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
    line-height: 120%;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.semi-lineup-modal__action--download {
    background: #ffffff;
    color: #354dad;
    padding: 0px 36px;

}

.semi-lineup-modal__action--download:not([href]),
.semi-lineup-modal__action--download[href=""],
.semi-lineup-modal__action--download:has(.semi-lineup-modal__action-label:empty) {
    display: none;
}

.semi-lineup-modal__action--download:hover {
    background: #e8eefb;
}

.semi-lineup-modal__action--inquiry {
    padding: 0px 36px;

    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.semi-lineup-modal__action--inquiry:hover {
    background: rgba(255, 255, 255, 0.16);
}

.semi-lineup-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
    height: clamp(40px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
    flex: 0 0 auto;
    margin-left: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.semi-lineup-modal__close svg {
    width: 24px;
    height: 24px;
}

.semi-lineup-modal__grid {
    display: grid;
    grid-template-columns: repeat(var(--lineup-variant-cols, 4), minmax(0, 1fr));
    gap: 0;
}

.semi-lineup-modal__variant {
    box-sizing: border-box;
    padding: 0 clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.semi-lineup-modal__variant:first-child {
    border-left: 0;
}

.semi-lineup-modal__variant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.semi-lineup-modal__variant-name {
    font-weight: 600;
    font-size: clamp(24px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
    line-height: 140%;
    color: #f8fafb;
}

.semi-lineup-modal__variant-badge {
    gap: 10px;
    padding: 7px 12px;
    background: #2568f9;
    border-radius: 38px;
    font-weight: 600;
    font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
    line-height: 140%;
    white-space: nowrap;
    color: #edf5fb;
}

.semi-lineup-modal__variant-sub {
    margin-bottom: clamp(20px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
    font-weight: 600;
    font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
    line-height: 140%;
    color: #ffffff;
}

.semi-lineup-modal__spec-list {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
    row-gap: clamp(16px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
}

.semi-lineup-modal__spec {
    margin: 0;
    min-width: 0;
}

.semi-lineup-modal__spec-label {
    margin: 0 0 4px;
    font-weight: 400;
    font-size: clamp(11px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
    line-height: 200%;
    color: #a7c6ff;
}

.semi-lineup-modal__spec-value {
    margin: 0;
    font-weight: 600;
    font-size: clamp(15px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
    line-height: 160%;
    color: #ffffff;
}

@media (max-width: 768px) {
    .semi-lineup-modal {
        align-items: stretch;
        justify-content: stretch;
    }

    .semi-lineup-modal__dialog {
        width: 100%;
        max-height: none;
        height: 100dvh;
        height: 100vh;
        border-radius: 0;
        padding:
            max(24px, env(safe-area-inset-top, 0px))
            20px
            max(40px, env(safe-area-inset-bottom, 0px));
    }

    .semi-lineup-modal.is-open .semi-lineup-modal__dialog {
        transform: translateY(0);
    }

    .semi-lineup-modal__head {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding-right: 44px;
    }

    .semi-lineup-modal__title {
        margin-left: 0;
        max-width: 100%;
        font-size: clamp(14px, calc(100vw * 16 / 390), 16px);
        line-height: 140%;
        padding: 4px 16px;
    }

    .semi-lineup-modal__actions {
        display: flex;
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        padding: 0;
    }

    .semi-lineup-modal__action {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        height: 36px;
        padding: 0 10px;
        font-size: clamp(11px, calc(100vw * 12 / 390), 13px);
        white-space: nowrap;
    }

    .semi-lineup-modal__action--download,
    .semi-lineup-modal__action--inquiry {
        padding: 0 10px;
    }

    .semi-lineup-modal__action--download svg {
        flex-shrink: 0;
        width: 14px;
        height: auto;
    }

    .semi-lineup-modal__action-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .semi-lineup-modal__close {
        position: absolute;
        top: 0;
        right: 0;
        margin-left: 0;
        width: 40px;
        height: 40px;
    }

    .semi-lineup-modal__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .semi-lineup-modal__variant {
        padding: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        padding-top: 24px;
    }

    .semi-lineup-modal__variant:first-child {
        border-top: 0;
        padding-top: 0;
    }
}

/* ──────────────────────────────────────────────────────────────
   SOW Automation System — OVERVIEW (MEDIA_TEXT: eyebrow · headline · summary · description)
   pageRenderer: `semi-sow-automation-system-media-text-section OVERVIEW`
   ────────────────────────────────────────────────────────────── */
body.semi-sow-automation-system .page-content {
    background: #f8fafb;

    section.SECTION_TITLE.semi-sow-section-title--white {
        background: #ffffff;
    }

    section.OVERVIEW[class*='-media-text-section'] {
        background: transparent;
        box-sizing: border-box;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter);
        overflow: visible;
        color: #1c1b20;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-media-text-wrap'].media-text-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: clamp(32px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;

            @media (max-width: 768px) {
                flex-direction: column;
                align-items: stretch;
                gap: 40px;
            }
        }

        .media-text-media {
            position: relative;
            flex: 0 0 auto;
            width: clamp(300px, calc(100vw * 454 / var(--layout-ref-width)), 454px);
            height: clamp(260px, calc(100vw * 466 / var(--layout-ref-width)), 466px);
            min-width: 0;
            margin: 0;
            overflow: hidden;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 768px) {
                flex: none;
                width: 100%;
                height: clamp(306px, calc(100vw * 306 / 390), 420px);
            }

            &::before,
            &::after {
                display: none;
            }

            img,
            .media-text-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
                display: block;

            }
        }

        .media-text-copy {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            text-align: left;
            text-shadow: none;
            color: #1c1b20;
            word-break: keep-all;
            box-sizing: border-box;
        }

        .media-text-body-block {
            text-align: left;
            color: inherit;
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #0F64C0; 

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 140%;
            letter-spacing: -0.02em;
            color: #1c1b20;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                letter-spacing: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(32px, calc(100vw * 32 / 390), 36px);
                line-height: 140%;
            }
        }

        .media-text-body-block[data-field-key='summary'],
        .media-text-key-summary {
            margin: 0 0 clamp(20px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #47454f;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
                word-break: break-all;
            }
        }

        .media-text-body-block[data-field-key='description'],
        .media-text-key-description {
            margin: 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454f;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
                word-break: break-all;
            }
        }

        .media-text-action-wrap {
            margin-top: 56px;
            padding: 0;
            display: flex;
            justify-content: flex-start;

            @media (max-width: 768px) {
                width: 100%;
                justify-content: center;
            }
        }

        .media-text-primary-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            min-width: 0;
            width: fit-content;
            height: clamp(44px, calc(100vw * 52 / var(--layout-ref-width)), 52px);
            padding: 0 clamp(20px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
            font-weight: 600;
            font-size: 16px;
            line-height: 120%;
            color: #ffffff;
            text-decoration: none;
            background: #354dad;
            border: none;
            border-radius: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            box-shadow: none;
            transition: none;

            &:hover {
                background: #2568F9;
            }

            @media (max-width: 768px) {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: clamp(48px, calc(100vw * 48 / 390), 52px);
                padding: 0 clamp(20px, calc(100vw * 36 / 390), 36px);
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 16px);
                line-height: 120%;
                background: #354dad;
                border-radius: 10px;
            }
        }

        .media-text-action-arrow {
            display: none;
            flex-shrink: 0;
            width: 18px;
            height: 16px;
            background-color: currentColor;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.3 14.2222L2.7 14.2222C2.20294 14.2222 1.8 13.8243 1.8 13.3333L1.8 11.5556C1.8 11.0646 1.39706 10.6667 0.9 10.6667C0.402944 10.6667 0 11.0646 0 11.5556L0 13.3333C0 14.8061 1.20883 16 2.7 16H15.3C16.7912 16 18 14.8061 18 13.3333V11.5556C18 11.0646 17.5971 10.6667 17.1 10.6667C16.6029 10.6667 16.2 11.0646 16.2 11.5556V13.3333C16.2 13.8243 15.7971 14.2222 15.3 14.2222ZM4.76367 7.37153C4.4122 7.71866 4.4122 8.28134 4.76367 8.62847L8.36367 12.184C8.71514 12.5312 9.28486 12.5312 9.63633 12.184L13.2363 8.62847C13.5878 8.28134 13.5878 7.71866 13.2363 7.37153C12.8849 7.02439 12.3151 7.02439 11.9637 7.37153L9.9 9.40972V0.888889C9.9 0.397969 9.49706 0 9 0C8.50294 0 8.1 0.397969 8.1 0.888889V9.40972L6.03633 7.37153C5.68486 7.02439 5.11514 7.02439 4.76367 7.37153Z' fill='black'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.3 14.2222L2.7 14.2222C2.20294 14.2222 1.8 13.8243 1.8 13.3333L1.8 11.5556C1.8 11.0646 1.39706 10.6667 0.9 10.6667C0.402944 10.6667 0 11.0646 0 11.5556L0 13.3333C0 14.8061 1.20883 16 2.7 16H15.3C16.7912 16 18 14.8061 18 13.3333V11.5556C18 11.0646 17.5971 10.6667 17.1 10.6667C16.6029 10.6667 16.2 11.0646 16.2 11.5556V13.3333C16.2 13.8243 15.7971 14.2222 15.3 14.2222ZM4.76367 7.37153C4.4122 7.71866 4.4122 8.28134 4.76367 8.62847L8.36367 12.184C8.71514 12.5312 9.28486 12.5312 9.63633 12.184L13.2363 8.62847C13.5878 8.28134 13.5878 7.71866 13.2363 7.37153C12.8849 7.02439 12.3151 7.02439 11.9637 7.37153L9.9 9.40972V0.888889C9.9 0.397969 9.49706 0 9 0C8.50294 0 8.1 0.397969 8.1 0.888889V9.40972L6.03633 7.37153C5.68486 7.02439 5.11514 7.02439 4.76367 7.37153Z' fill='black'/%3E%3C/svg%3E");
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
        }
    }

    /* KEY_HIGHLIGHTS — 배경 없음 · 좌 이미지(뷰포트 좌측 밀착) · 우 01~03 리스트 */
    .semi-sow-key-highlights.KEY_HIGHLIGHTS {
        box-sizing: border-box;
        background: transparent;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter)
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            0;

        .semi-sow-key-highlights-inner {
            width: 100%;
            max-width: none;
            margin: 0;
            box-sizing: border-box;
        }

        .semi-sow-key-highlights-layout {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            gap: clamp(32px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
            width: 100%;
            /* 이미지 636 + 갭 56 + 리스트(다이아 wrap 260 + 갭 40 + 카피 680) = 1672 @1920 */
            max-width: calc(
                clamp(280px, calc(100vw * 636 / var(--layout-ref-width)), 636px) +
                    clamp(32px, calc(100vw * 56 / var(--layout-ref-width)), 56px) +
                    clamp(280px, calc(100vw * 980 / var(--layout-ref-width)), 980px)
            );
            margin-left: 0;
            margin-right: auto;
            box-sizing: border-box;
        }

        /* PC — 우측 모서리만 둥글게(래퍼 overflow 로 img 클립). 모바일은 하단 @900 블록 */
        .semi-sow-key-highlights-media {
            position: relative;
            flex: 0 0 clamp(280px, calc(100vw * 636 / var(--layout-ref-width)), 636px);
            width: clamp(280px, calc(100vw * 636 / var(--layout-ref-width)), 636px);
            min-width: 0;
            align-self: stretch;
            overflow: hidden;
            border-radius: 0 clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px)
                clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px) 0;

            &::after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 35%;
                height: 100%;
                background: linear-gradient(90deg, rgba(239, 242, 246, 0) 0%, #f8fafb 100%);
                pointer-events: none;
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
                min-height: 0;
                object-fit: cover;
                object-position: center;
                border-radius: 0;
            }
        }

        .semi-sow-key-highlights-list {
            list-style: none;
            margin: 0;
            padding: clamp(8px, calc(100vw * 16 / var(--layout-ref-width)), 16px) 0;
            flex: 0 1 clamp(280px, calc(100vw * 980 / var(--layout-ref-width)), 980px);
            width: clamp(280px, calc(100vw * 980 / var(--layout-ref-width)), 980px);
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
        }

        .semi-sow-key-highlights-item {
            display: grid;
            grid-template-columns:
                clamp(130px, calc(100vw * 260 / var(--layout-ref-width)), 260px)
                minmax(0, clamp(200px, calc(100vw * 680 / var(--layout-ref-width)), 680px));
            column-gap: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            align-items: center;
            word-break: keep-all;
        }

        /* rotate 다이아몬드 — wrap 260px(회전 대각) · num 184px 정사각형 */
        .semi-sow-key-highlights-num-wrap {
            grid-column: 1;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(5px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            width: clamp(130px, calc(100vw * 260 / var(--layout-ref-width)), 260px);
            height: clamp(130px, calc(100vw * 260 / var(--layout-ref-width)), 260px);
            padding: clamp(30px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
                clamp(20px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            flex-shrink: 0;
        }

        .semi-sow-key-highlights-num {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            gap: clamp(5px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            width: clamp(96px, calc(100vw * 184 / var(--layout-ref-width)), 184px);
            height: clamp(96px, calc(100vw * 184 / var(--layout-ref-width)), 184px);
            background: #354dad;
            border-radius: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            box-shadow: 0 8px 40px rgba(22, 45, 85, 0.12);
            transform: rotate(-45deg);

            > span {
                display: block;
                font-weight: 500;
                font-size: clamp(28px, calc(100vw * 64 / var(--layout-ref-width)), 64px);
                line-height: 150%;
                color: #ffffff;
                transform: rotate(45deg);
            }
        }

        .semi-sow-key-highlights-item:nth-child(1) .semi-sow-key-highlights-num {
            background: #354dad;
        }

        .semi-sow-key-highlights-item:nth-child(2) .semi-sow-key-highlights-num {
            background: #18317c;
        }

        .semi-sow-key-highlights-item:nth-child(3) .semi-sow-key-highlights-num {
            background: #162d55;
        }

        .semi-sow-key-highlights-copy {
            grid-column: 2;
            min-width: 0;
            max-width: clamp(200px, calc(100vw * 680 / var(--layout-ref-width)), 680px);
        }

        .semi-sow-key-highlights-title {
            margin: 0 0 clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 150%;
            color: #18317c;
        }

        .semi-sow-key-highlights-desc {
            margin: 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #1c1b20;
        }

        /*
         * layout-ref-width 초과(빔·초대형): 레이아웃만 vw 연동 — 이미지·갭·리스트 폭.
         * num·타이틀·본문 등 내부 크기는 기존 clamp(max) 유지.
         * (@media min-width 는 CSS 변수 미지원 → 1921px = layout-ref + 1)
         */
        @media (min-width: 1921px) {
            .semi-sow-key-highlights-layout {
                max-width: 100%;
                gap: calc(100vw * 56 / var(--layout-ref-width));
            }

            .semi-sow-key-highlights-media {
                flex: 0 0 calc(100vw * 636 / var(--layout-ref-width));
                width: calc(100vw * 636 / var(--layout-ref-width));
            }

            .semi-sow-key-highlights-list {
                flex: 1 1 0;
                width: auto;
                max-width: none;
            }
        }

        @media (max-width: 900px) {
            background: transparent;
            padding: clamp(40px, calc(100vw * 40 / 390), 48px) 0 0;

            .semi-sow-key-highlights-layout {
                flex-direction: column;
                align-items: stretch;
                gap: clamp(32px, calc(100vw * 40 / 390), 48px);
                max-width: none;
                padding: 0;
            }

            .semi-sow-key-highlights-media {
                flex: none;
                width: 100%;
                max-height: none;
                border-radius: 0;
                overflow: hidden;

                &::after {
                    display: none;
                }

                img {
                    width: 100%;
                    height: auto;
                    min-height: 0;
                    border-radius: 0;
                    object-fit: cover;
                }
            }

            .semi-sow-key-highlights-list {
                flex: none;
                width: 100%;
                padding: clamp(30px, calc(100vw * 30 / 390), 40px) 0
                    clamp(80px, calc(100vw * 80 / 390), 100px);
                gap: clamp(40px, calc(100vw * 48 / 390), 56px);
            }

            .semi-sow-key-highlights-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                grid-template-columns: none;
                column-gap: 0;
                text-align: center;
                gap: clamp(24px, calc(100vw * 24 / 390), 32px);
            }

            .semi-sow-key-highlights-num-wrap {
                grid-column: auto;
                width: auto;
                height: auto;
                padding: 0;
            }

            .semi-sow-key-highlights-num {
                width: clamp(80px, calc(100vw * 80 / 390), 170px);
                height: clamp(80px, calc(100vw * 80 / 390), 170px);

                > span {
                    font-size: clamp(24px, calc(100vw * 28 / 390), 40px);
                }
            }

            .semi-sow-key-highlights-copy {
                grid-column: auto;
                width: 100%;
                max-width: 100%;
                padding-inline: var(--company-narrow-inline);
                box-sizing: border-box;
                text-align: center;
            }

            .semi-sow-key-highlights-title {
                font-weight: 600;
                font-size: clamp(24px, calc(100vw * 24 / 390), 28px);
                line-height: 160%;
                color: #18317c;
            }

            .semi-sow-key-highlights-desc {
                font-weight: 400;
                font-size: clamp(14px, calc(100vw * 14 / 390), 16px);
                line-height: 160%;
                color: #1c1b20;

                br {
                    display: none;
                }
            }
        }
    }

    /* PC 스크롤 reveal — KEY_HIGHLIGHTS (semi-sow-automation-system.js) */
    @media (min-width: 769px) {
        .semi-sow-key-highlights.KEY_HIGHLIGHTS .semi-sow-key-highlights-media,
        .semi-sow-key-highlights.KEY_HIGHLIGHTS .semi-sow-key-highlights-item {
            opacity: 0;
            transform: translateY(28px);
            transition:
                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }

        .semi-sow-key-highlights.KEY_HIGHLIGHTS.is-sow-key-highlights-media-in-view .semi-sow-key-highlights-media {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0ms;
        }

        .semi-sow-key-highlights.KEY_HIGHLIGHTS.is-sow-key-highlights-list-in-view .semi-sow-key-highlights-item {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--sow-key-highlights-reveal-delay, 90ms);
        }
    }

    @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
        .semi-sow-key-highlights.KEY_HIGHLIGHTS .semi-sow-key-highlights-media,
        .semi-sow-key-highlights.KEY_HIGHLIGHTS .semi-sow-key-highlights-item {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            will-change: auto;
        }
    }

    /* ── Content blocks (IMAGE / TITLE · 단일 이미지) ── */

    /* ARCHITECTURE_IMAGE — 1308×406 */
    section.ARCHITECTURE_IMAGE[class*='-image-section'] {
        box-sizing: border-box;
        background: #ffffff;
        padding:
            0
            var(--company-narrow-inline)
            clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
        text-align: center;

        img {
            display: block;
            width: 100%;
            max-width: min(1308px, 100%);
            max-height: 406px;
            height: auto;
            margin-inline: auto;
            object-fit: contain;
            object-position: center;
        }
    }

    /* APPLICATION_TITLE — 가운데 · eyebrow + headline */
    section.APPLICATION_TITLE[class*='-hero'] {
        box-sizing: border-box;
        background: #ffffff;
        text-align: center;
        padding: 40px var(--company-narrow-inline) clamp(60px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
        [class*='-hero-inner'] {
            max-width: var(--company-content-max);
            margin-inline: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0;
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #2568f9;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            margin: 0;
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 160%;
            color: #1c1b20;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }
    }

    /* APPLICATION_IMAGE — 928×525 */
    section.APPLICATION_IMAGE[class*='-image-section'] {
        box-sizing: border-box;
        background: #ffffff;
        padding-inline: var(--company-narrow-inline);
        text-align: center;
        img {
            display: block;
            width: 100%;
            max-width: min(928px, 100%);
            max-height: 525px;
            height: auto;
            margin-inline: auto;
            object-fit: contain;
            object-position: center;
        }
    }

    /* APPLICATION_CAPTION — 가운데 한 줄 */
    section.APPLICATION_CAPTION[class*='-hero'] {
        box-sizing: border-box;
        background: #ffffff;
        text-align: center;
        padding:
            24px
            var(--company-narrow-inline)
            clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
      

        [class*='-hero-inner'] {
            max-width: var(--company-content-max);
            margin-inline: auto;
            text-align: center;
        }

        [class*='-hero-inner'] > div:not(.media-text-body-block),
        .media-text-body-block,
        .media-text-plain-line {
            margin: 0;
            font-weight: 400;
            font-size: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            text-align: center;
            color: #1C1B20;
        }
    }

    /* COMPARISON_TITLE */
    section.COMPARISON_TITLE[class*='-hero'] {
        box-sizing: border-box;
        background: #ffffff;
        text-align: center;
        padding:
            0
            var(--company-narrow-inline)
            clamp(18px, calc(100vw * 20 / var(--layout-ref-width)), 20px);


        [class*='-hero-inner'] {
            max-width: var(--company-content-max);
            margin-inline: auto;
            text-align: center;
        }

        [class*='-hero-inner'] > div:not(.media-text-body-block),
        .media-text-body-block,
        .media-text-plain-line {
            margin: 0;
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #74757E;
            text-align: center;
        }
    }

    /* COMPARISON_IMAGE — 944×481 */
    section.COMPARISON_IMAGE[class*='-image-section'] {
        box-sizing: border-box;
        background: #ffffff;
        padding:
            0
            var(--company-narrow-inline)
            clamp(60px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
        text-align: center;

        img {
            display: block;
            width: 100%;
            max-width: min(944px, 100%);
            max-height: 481px;
            height: auto;
            margin-inline: auto;
            object-fit: contain;
            object-position: center;
        }
    }

    /* ── UI Software zone (sensor-on-wafer 동일 · UI_BODY 추가) ── */

    .semi-sow-ui-software-zone[style*='--semi-sow-ui-software-bg: url'] {
        position: relative;
        background-color: #15283f;
        background-image:
            linear-gradient(180deg, rgba(21, 40, 63, 0.55) 0%, rgba(21, 40, 63, 0.92) 100%),
            var(--semi-sow-ui-software-bg);
        background-size: cover, cover;
        background-position: center top, center top;
        background-repeat: no-repeat, no-repeat;
        background-attachment: scroll, scroll;

        section.UI_SOFTWARE_TITLE[class*='-media-text-section'],
        section.UI_IMAGE[class*='-image-section'],
        section.UI_BODY[class*='-hero'] {
            background-color: transparent;
            background-image: none;
        }
    }

    .semi-sow-ui-software-zone:not([style*='--semi-sow-ui-software-bg: url']) {
        background-color: #15283f;
    }

    section.UI_SOFTWARE_TITLE[class*='-media-text-section'] {
        position: relative;
        z-index: 0;
        box-sizing: border-box;
        text-align: center;
        padding-top: clamp(60px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
        padding-bottom: clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
        padding-inline: var(--company-inline-gutter);
        background: transparent;

        [class*='-media-text-wrap'].media-text-wrap {
            display: block;
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
        }

        .media-text-media {
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .media-text-copy {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            word-break: keep-all;
            box-sizing: border-box;
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            margin: 0;
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 160%;
            color: #ffffff;
            letter-spacing: -0.02em;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 400;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #a7c6ff;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }
    }

    section.UI_IMAGE[class*='-image-section'] {
        box-sizing: border-box;
        padding-inline: var(--company-narrow-inline);
        text-align: center;
        background: transparent;

        img {
            width: 100%;
            max-width: min(1088px, 100%);
            max-height: 549px;
            height: auto;
            display: block;
            margin-inline: auto;
            object-fit: contain;
            object-position: center;
            border-radius: 8px;
            filter: drop-shadow(0 0 40px rgba(37, 104, 249, 0.6));
        }
    }

    section.UI_BODY[class*='-hero'] {
        box-sizing: border-box;
        background: transparent;
        text-align: center;
        padding:
            clamp(80px, calc(100vw * 100 / var(--layout-ref-width)), 100px)
            var(--company-narrow-inline);


        [class*='-hero-inner'] {
            max-width: var(--company-content-max);
            margin-inline: auto;
            text-align: center;
        }

        [class*='-hero-inner'] > div:not(.media-text-body-block),
        .media-text-body-block,
        .media-text-plain-line {
            margin: 0;
            font-weight: 400;
            font-size: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            text-align: center;
            color: #ffffff;
        }
    }

    /* RELATED_SOLUTIONS — 반도체 다른 제품 카드 (1320 · gap 24 · 배경 없음) */
    .semi-related-solutions.RELATED_SOLUTIONS {
        background: transparent;
        box-sizing: border-box;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter)
            clamp(80px, calc(100vw * 140 / var(--layout-ref-width)), 140px);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .semi-related-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;

            .semi-related-title {
                margin: 0 0 clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
                font-weight: 500;
                font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
                line-height: 140%;
                color: #47454f;

                @media (max-width: 768px) {
                    font-weight: 600;
                    font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                    line-height: 160%;
                }
            }

            .semi-related-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

                @media (max-width: 900px) {
                    grid-template-columns: 1fr;
                }

                .semi-related-card {
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
                    min-height: clamp(160px, calc(100vw * 220 / var(--layout-ref-width)), 220px);
                    padding:
                        clamp(32px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
                        clamp(24px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
                    border: 1px solid #e6ebf0;
                    border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                    background: #ffffff;
                    color: inherit;
                    text-decoration: none;
                    transition: border-color 0.18s ease;

                    &:hover {
                        border-color: #354dad;
                        text-decoration: none;

                        .semi-related-card-title {
                            color: #354dad;
                        }

                        .semi-related-card-arrow {
                            color: #354dad;
                        }
                    }

                    &:focus-visible {
                        outline: 2px solid #354dad;
                        outline-offset: 2px;
                    }

                    .semi-related-card-head {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 12px;
                        width: 100%;
                    }

                    .semi-related-card-title {
                        margin: 0;
                        font-weight: 700;
                        font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                        line-height: 140%;
                        color: #162d55;
                        transition: color 0.18s ease;
                    }

                    .semi-related-card-arrow {
                        flex-shrink: 0;
                        width: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                        height: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                        background-color: currentColor;
                        color: #cbd5e1;
                        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 5l8 7-8 7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 5l8 7-8 7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                        -webkit-mask-size: contain;
                        mask-size: contain;
                        -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                        -webkit-mask-position: center;
                        mask-position: center;
                        transition: color 0.18s ease;
                    }

                    .semi-related-card-desc {
                        margin: 0;
                        font-weight: 400;
                        font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
                        line-height: 160%;
                        color: #64748b;
                    }
                }
            }
        }
    }
}

/* ──────────────────────────────────────────────────────────────
   Hybrid Sensor Wafer — OVERVIEW (MEDIA_TEXT: pageRenderer + 다크 테마)
   semi-hybrid-sensor-wafer.js
   ────────────────────────────────────────────────────────────── */
body.semi-hybrid-sensor-wafer .page-content {
    background: #f8fafb;
    overflow-x: clip;
    max-width: 100%;

    section.OVERVIEW[class*='-media-text-section'] {
        box-sizing: border-box;
        background: #121e2f;
        color: #ffffff;
        padding:
            100px
            var(--company-inline-gutter);
        overflow: visible;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-media-text-wrap'].media-text-wrap {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            gap: clamp(32px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;

            @media (max-width: 1024px) {
                flex-direction: column;
                align-items: stretch;
                gap: clamp(28px, 6vw, 40px);
            }
        }

        .media-text-media {
            position: relative;
            flex: 0 0 auto;
            width: clamp(350px, calc(100vw * 647 / var(--layout-ref-width)), 647px);
            max-width: 100%;
            aspect-ratio: 647 / 574;
            height: auto;
            min-width: 0;
            min-height: 0;
            margin: 0;
            overflow: hidden;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            background: #e9ecf3;

            @media (max-width: 1024px) {
                width: 100%;
                max-width: 100%;
                aspect-ratio: 647 / 420;
            }

            @media (max-width: 768px) {
                aspect-ratio: 647 / 400;
                height: clamp(350px, calc(100vw * 244 / 390), 400px);
            }

            &::before,
            &::after {
                display: none;
            }

            img,
            .media-text-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
            }
        }

        .media-text-copy {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            padding-top: clamp(50px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
            text-align: left;
            text-shadow: none;
            color: #ffffff;
            word-break: keep-all;
            overflow-wrap: break-word;
            box-sizing: border-box;
            align-self: stretch;

            @media (max-width: 1024px) {
                padding-top: 0;
            }
        }

        .media-text-body-block {
            text-align: left;
            color: inherit;
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 500;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #8fa8d8;

            @media (max-width: 768px) {
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
                word-break: break-all;
            }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            letter-spacing: -0.02em;
            color: #ffffff;

            @media (max-width: 768px) {
                font-size: clamp(28px, calc(100vw * 32 / 390), 36px);
                line-height: 140%;
                word-break: break-all;
            }
        }

        .media-text-body-block[data-field-key='summary'],
        .media-text-key-summary {
            margin: 0 0 clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #e8ecf2;

            @media (max-width: 768px) {
                margin-bottom: clamp(28px, calc(100vw * 32 / 390), 32px);
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                word-break: break-all;
            }
        }

        .media-text-action-wrap {
            margin-top: clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
            padding: 0;
            display: flex;
            justify-content: flex-start;

            @media (max-width: 768px) {
                box-sizing: border-box;
                width: 100%;
            }
        }

        .media-text-primary-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            min-width: 0;
            width: fit-content;
            height: clamp(44px, calc(100vw * 52 / var(--layout-ref-width)), 52px);
            padding: 0 clamp(20px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
            font-weight: 600;
            font-size: 16px;
            line-height: 120%;
            color: #ffffff;
            text-decoration: none;
            background: #354dad;
            border: none;
            border-radius: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            box-shadow: none;

            &:hover {
                background: #2568F9;
            }

            @media (max-width: 768px) {
                width: 100%;
            }
        }

        .media-text-action-arrow {
            display: none;
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            background-color: currentColor;
            -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.83333%2011L11%206L6.83333%201M11%206H1%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
            mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.83333%2011L11%206L6.83333%201M11%206H1%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
        }
    }

    /* SPEC_CONTENT — 2×2 스펙 카드 (배경 없음 · 흰 카드) */
    section.semi-hybrid-spec-content.SPEC_CONTENT {
        box-sizing: border-box;
        background: transparent;
        padding:
            0
            var(--company-inline-gutter)
            clamp(60px, calc(100vw * 80 / var(--layout-ref-width)), 80px);

        @media (max-width: 768px) {
            padding:
                clamp(48px, calc(100vw * 60 / 390), 60px)
                var(--company-narrow-inline);
        }

        .semi-hybrid-spec-content-inner {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }

        .semi-hybrid-spec-content-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);

        }

        .semi-hybrid-spec-content-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 20 / 390), 24px);
            padding: 24px 0;
            background: #ffffff;
            border: 1px solid #c4c7d0;
            border-radius: 16px;
            text-align: center;
            word-break: keep-all;
            overflow-wrap: break-word;

            @media (max-width: 768px) {
                gap: clamp(8px, calc(100vw * 20 / 390), 24px);
                padding: clamp(16px, calc(100vw * 20 / 390), 24px) 0;
            }
        }

        .semi-hybrid-spec-content-value {
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            text-align: center;
            color: #0f64c0;

            @media (max-width: 768px) {
                font-size: 16px;
                line-height: 140%;
            }
        }

        .semi-hybrid-spec-content-label {
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            text-align: center;
            color: #74757e;

            @media (max-width: 768px) {
                font-size: 12px;
            }
        }
    }

    /* APP_TITLE — APPLICATION 인트로 (배경 없음 · 좌측 · 4단 타이포) */
    section.APP_TITLE[class*='-hero'] {
        box-sizing: border-box;
        background: transparent;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter)
            clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
        text-align: left;

        @media (max-width: 768px) {
            padding:
                clamp(40px, calc(100vw * 48 / 390), 48px)
                var(--company-narrow-inline)
                clamp(60px, calc(100vw * 60 / 390), 68px);
        }

        [class*='-hero-inner'] {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0;
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #2568f9;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            margin: 0;
            font-weight: 600;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            letter-spacing: -0.02em;
            color: #1c1b20;
            word-break: keep-all;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                letter-spacing: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-size: clamp(24px, calc(100vw * 28 / 390), 32px);
                line-height: 140%;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 400;
            font-size: clamp(16px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            line-height: 160%;
            color: #47454f;
            word-break: keep-all;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-size: clamp(14px, calc(100vw * 14 / 390), 16px);
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: normal;
                overflow-wrap: break-word;

                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }

        .media-text-body-block[data-field-key='description'],
        .media-text-key-description {
            margin: 0;
            font-weight: 400;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            color: #74757e;
            word-break: keep-all;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: normal;
                overflow-wrap: break-word;

                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }
    }

    /* APPLICATION — 배경 없음 · 2열 카드 (제목은 APP_TITLE) */
    .semi-hybrid-sensor-wafer-application.APPLICATION {
        box-sizing: border-box;
        background: transparent;
        padding:
        clamp(48px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
            var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding:
            clamp(40px, calc(100vw * 48 / 390), 48px)
            var(--company-narrow-inline);
        }

        .semi-hybrid-sensor-wafer-application-inner {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }

        .semi-hybrid-sensor-wafer-application-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 900px) {
                grid-template-columns: 1fr;
            }
        }

        .semi-hybrid-sensor-wafer-application-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            height: clamp(360px, calc(100vw * 582 / var(--layout-ref-width)), 582px);
            padding-top: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            padding-bottom: clamp(32px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            padding-inline: clamp(24px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
            background: #ffffff;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            box-shadow: 0 8px 40px rgba(22, 45, 85, 0.12);
            word-break: keep-all;
            overflow-wrap: break-word;

            @media (max-width: 768px) {
                height: auto;
                min-height: 0;
                padding:
                    clamp(20px, calc(100vw * 24 / 390), 24px)
                    clamp(16px, calc(100vw * 20 / 390), 20px)
                    clamp(24px, calc(100vw * 28 / 390), 28px);
                gap: clamp(12px, calc(100vw * 16 / 390), 16px);
            }
        }

        .semi-hybrid-sensor-wafer-application-card-head {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: clamp(14px, calc(100vw * 20 / var(--layout-ref-width)), 20px);

            @media (max-width: 768px) {
                align-items: flex-start;
            }
        }

        .semi-hybrid-sensor-wafer-application-card-num {
            box-sizing: border-box;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: clamp(40px, calc(100vw * 68 / var(--layout-ref-width)), 68px);
            max-width: 68px;
            height: clamp(40px, calc(100vw * 68 / var(--layout-ref-width)), 68px);
            padding:
                clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px)
                clamp(10px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            border-radius: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            background: #dcebf9;
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #18317c;
        }

        .semi-hybrid-sensor-wafer-application-card-title {
            margin: 0;
            font-weight: 600;
            font-size: clamp(24px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #1c1b20;
            min-width: 0;
            flex: 1 1 auto;

            @media (max-width: 768px) {
                white-space: normal;
                font-size: clamp(18px, calc(100vw * 20 / 390), 22px);
                line-height: 150%;
            }
        }

        .semi-hybrid-sensor-wafer-application-card-desc {
            margin: 0;
            font-weight: 400;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            color: #47454f;

            @media (max-width: 768px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                word-break: break-all;
            }
        }

        .semi-hybrid-sensor-wafer-application-card-diagram {
            margin-top: auto;
            border-radius: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            background: #eff2f6;
            overflow: hidden;

            @media (max-width: 768px) {
                margin-top: clamp(8px, calc(100vw * 12 / 390), 12px);
            }

            img {
                display: block;
                width: 100%;
                height: auto;
                vertical-align: top;

                @media (max-width: 768px) {
                    height: 281px;
                }
            }
        }
    }

    /* RELATED_SOLUTIONS — 반도체 다른 제품 카드 (sensor-on-wafer 와 동일) */
    .semi-related-solutions.RELATED_SOLUTIONS {
        background: transparent;
        box-sizing: border-box;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter)
            clamp(80px, calc(100vw * 140 / var(--layout-ref-width)), 140px);

        @media (max-width: 768px) {
            padding:
                clamp(40px, calc(100vw * 48 / 390), 48px)
                var(--company-narrow-inline)
                clamp(48px, calc(100vw * 64 / 390), 64px);
        }

        .semi-related-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;

            .semi-related-title {
                margin: 0 0 clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
                font-weight: 500;
                font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
                line-height: 140%;
                color: #47454f;

                @media (max-width: 768px) {
                    font-weight: 600;
                    font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                    line-height: 160%;
                }
            }

            .semi-related-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

                @media (max-width: 900px) {
                    grid-template-columns: 1fr;
                }

                .semi-related-card {
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
                    min-height: clamp(160px, calc(100vw * 220 / var(--layout-ref-width)), 220px);
                    padding:
                        clamp(32px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
                        clamp(24px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
                    border: 1px solid #e6ebf0;
                    border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                    background: #ffffff;
                    color: inherit;
                    text-decoration: none;
                    transition: border-color 0.18s ease;

                    &:hover {
                        border-color: #354dad;
                        text-decoration: none;

                        .semi-related-card-title {
                            color: #354dad;
                        }

                        .semi-related-card-arrow {
                            color: #354dad;
                        }
                    }

                    &:focus-visible {
                        outline: 2px solid #354dad;
                        outline-offset: 2px;
                    }

                    .semi-related-card-head {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 12px;
                        width: 100%;
                    }

                    .semi-related-card-title {
                        margin: 0;
                        font-weight: 700;
                        font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                        line-height: 140%;
                        color: #162d55;
                        transition: color 0.18s ease;
                    }

                    .semi-related-card-arrow {
                        flex-shrink: 0;
                        width: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                        height: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                        background-color: currentColor;
                        color: #cbd5e1;
                        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 5l8 7-8 7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 5l8 7-8 7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                        -webkit-mask-size: contain;
                        mask-size: contain;
                        -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                        -webkit-mask-position: center;
                        mask-position: center;
                        transition: color 0.18s ease;
                    }

                    .semi-related-card-desc {
                        margin: 0;
                        font-weight: 400;
                        font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
                        line-height: 160%;
                        color: #64748b;
                    }
                }
            }
        }
    }

    /* 공통 섹션 타이틀 · NAV — hybrid 페이지 모바일 */
    section.SECTION_TITLE.semi-hybrid-sensor-wafer-hero {
        @media (max-width: 768px) {
            padding:
                clamp(40px, calc(100vw * 48 / 390), 48px)
                var(--company-narrow-inline)
                clamp(20px, calc(100vw * 24 / 390), 24px);

            .media-text-body-block[data-field-key='body'],
            .media-text-body-block[data-field-key='headline'],
            .media-text-key-body,
            .media-text-key-headline {
                font-size: clamp(24px, calc(100vw * 28 / 390), 32px);
                line-height: 140%;
            }
        }
    }

    section.semi-hybrid-sensor-wafer-list-section.NAV {
        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }
    }

    /* EDITOR — Quill 본문 · 1320 · 구성도 이미지 나란히 */
    section.semi-hybrid-sensor-wafer-editor-section,
    section[class*='-editor-section'] {
        box-sizing: border-box;
        background: transparent;
        padding-inline: var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .semi-hybrid-sensor-wafer-editor-content.ql-editor,
        [class*='-editor-content'].ql-editor {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }
    }
}

/* ──────────────────────────────────────────────────────────────
   제품 상세 — 좌측 갤러리 + 우측 정보 패널
   ────────────────────────────────────────────────────────────── */
body.ict-handheld-detail {
    section[class*='-list-section'].NAV {
        background: #FFFFFF !important;
    }
    .ict-handheld-detail-product.PRODUCT_DETAIL {
        margin: 0 auto;
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .hd-product-inner {
            display: grid;
            grid-template-columns: minmax(0, 1060fr) minmax(0, 860fr);
         /*    gap: clamp(24px, calc(100vw * 64 / var(--layout-ref-width)), 64px); */
            align-items: flex-start;

            @media (max-width: 900px) {
                grid-template-columns: 1fr;
            }
        }

        /* ── 좌측 갤러리 ─────────────────────────────────────────  */
        .hd-product-gallery {
            background: #FFFFFF !important;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: clamp(24px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            padding:
                clamp(48px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
                clamp(28px, calc(100vw * 89 / var(--layout-ref-width)), 89px)
                clamp(48px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
                clamp(32px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
            box-sizing: border-box;
        }

        /* 메인 이미지 박스  */
        .hd-product-main {
            position: relative;
            width: 100%;
            aspect-ratio: 871 / 660;
            background: #EFF2F6;
            border-radius: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hd-product-main-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .hd-product-thumbs {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
        }

        /* 1920 기준 5칸 그리드에서 각 썸네일 155 x 115 (aspect 155/115) */
        .hd-product-thumb {
            all: unset;
            box-sizing: border-box;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 155 / 115;
            background: #F8FAFB;
            border: 1px solid transparent;
            border-radius: 12px;
            overflow: hidden;
            transition: border-color 0.18s ease;

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

            &:hover {
                border-color: #CBD5E1;
            }

            &.hd-product-thumb--active {
                border-color: #1B7076;
            }
        }

        /* ── 우측 정보 ─────────────────────────────────────────
           피그마 1920 기준: padding 120 0 (좌우 0). 자식 간격은 각자 margin 으로 처리. */
        .hd-product-info {
            background: #F8FAFB;  
            display: flex;
            flex-direction: column;
            align-self: stretch;
            padding:
                clamp(48px, calc(100vw * 120 / var(--layout-ref-width)), 120px) 0
                clamp(48px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
                clamp(32px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
            box-sizing: border-box;
        }

        .hd-product-category {
            margin: 0 0 clamp(8px, calc(100vw * 4 / var(--layout-ref-width)), 4px);
            font-weight: 600;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 1.6;
            color: #1B7076;
        }

        .hd-product-title {
            margin: 0 0 clamp(12px, calc(100vw * 4 / var(--layout-ref-width)), 4px);
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 1.6;
            color: #1C1B20;
        }

        .hd-product-desc {
            margin: 0 0 clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 1.6;
            color: #47454F;
        }

        /* ── spec — detail 그룹의 TEXT 아이템들 (라벨/값) ─────────── */
        .hd-product-spec {
            display: grid;
            grid-template-columns: max-content 1fr;
            column-gap: clamp(20px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            row-gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            margin: 0 0 clamp(50px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
            border-radius: 12px;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 1.6;

            dt {
                text-align: right;
                margin: 0;
                font-weight: 600;
                color: #1C1B20;
                white-space: nowrap;
            }

            dd {
                text-align: left;
                margin: 0;
                font-weight: 400;
                color: #1C1B20;
                word-break: keep-all;
            }
        }

        .hd-product-options {
            display: flex;
            flex-direction: column;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            margin-bottom: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            padding: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px) 0;
            border-bottom: 1px solid #E5E7EB;
        }

        .hd-product-options-label {
            margin: 0;
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 1.6;
            color: #47454F;
        }

        .hd-product-color-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
        }

        .hd-color-swatch {
            all: unset;
            box-sizing: border-box;
            cursor: pointer;
            display: inline-block;
            width: clamp(24px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            height: clamp(24px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            border-radius: 8px;
            background: var(--c, #cbd5e1);
            border: 1px solid rgba(0, 0, 0, 0.08);
            transition: transform 0.15s ease, box-shadow 0.15s ease;

            &:hover {
                transform: scale(1.08);
            }

            &:focus-visible {
                outline: none;
                box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1B7076;
            }
        }

        /* 1920 기준: 1열 제품소개서 243px / 2열 MY HANIS 152px, gap 12px */
        .hd-product-actions {
            display: grid;
            grid-template-columns: minmax(0, 243fr) minmax(0, 152fr);
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            width: 100%;
            max-width: clamp(280px, calc(100vw * 407 / var(--layout-ref-width)), 407px);

            @media (max-width: 900px) {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                max-width: 100%;
            }

            @media (max-width: 768px) {
                grid-template-columns: 1fr;
                gap: 10px;
            }
        }

        .hd-product-action {
            box-sizing: border-box;
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            width: 100%;
            min-width: 0;
            height: clamp(40px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            padding: 0 clamp(12px, calc(100vw * 36 / var(--layout-ref-width)), 36px);
            border-radius: 30px;
            font-weight: 600;
            font-size: clamp(13px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 1.2;
            white-space: nowrap;
            text-decoration: none;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;

            span {
                white-space: nowrap;
            }

            @media (max-width: 900px) {
                padding: 0 clamp(10px, 2.5vw, 20px);
                font-size: clamp(12px, 2.8vw, 16px);
            }

            @media (max-width: 768px) {
                width: 100%;
                padding: 0 20px;
                font-size: clamp(13px, 3.6vw, 16px);
            }

            /* 1번 — 제품소개서 다운로드 (243 x 48, filled) */
            &.hd-product-action--secondary {
                background: #0F64C0;
                color: #fff;
                border: 1px solid #0F64C0;

                &:hover {
                    background: #0d56a8;
                    border-color: #0d56a8;
                }
            }

            /* 2번 — MY HANIS (152 x 48, outline) */
            &.hd-product-action--primary {
                background: #fff;
                color: #0F64C0;
                border: 1px solid #0F64C0;

                &:hover {
                    background: rgba(15, 100, 192, 0.06);
                }
            }
        }
    }

    /* 섹션 NAV — 서브 nav 가 헤더에 붙을 때 sticky 해제 */
    @media (min-width: 769px) {
        section.ict-handheld-detail-list-section.NAV.hd-section-nav--released {
            position: relative;
            top: auto;
            z-index: auto;
        }
    }

    /* detail.image — 서브 nav + 롱 패널 (제품 상세 전용) */
    .hd-product-detail-extra {
        width: 100%;
        box-sizing: border-box;

        .hd-product-subnav-section {
            width: 100%;
            box-sizing: border-box;
        }

        .hd-product-subnav-placeholder {
            display: none;
            width: 100%;
        }

        .hd-product-subnav-section.is-pinned .hd-product-subnav-placeholder {
            display: block;
        }

        .hd-product-subnav-bar {
            width: 100%;
            max-height: 74px;
            background: #F8FAFB;
            box-sizing: border-box;
        }

        .hd-product-subnav-bar--pinned {
            position: fixed;
            top: var(--public-header-height);
            left: 0;
            right: 0;
            z-index: 998;
        }

        /* 섹션 NAV(*-list-content) 와 동일 — 컨테이너만 가운데, 탭은 flex-start */
        .hd-product-subnav-content {
            width: 100%;
            max-width: calc(var(--company-content-max) + (var(--company-inline-gutter) * 2));
            margin-left: auto;
            margin-right: auto;
            padding: 12px var(--company-inline-gutter);
            box-sizing: border-box;

            @media (max-width: 768px) {
                padding: 8px 0;
            }
        }

        .hd-product-subnav-list {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: clamp(16px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            box-sizing: border-box;
            min-height: 0;

            @media (max-width: 768px) {
                justify-content: space-between;
                gap: 10px;
                padding: 0 8px;
            }
        }

        .hd-product-subnav-item {
            flex: 0 0 auto;
            min-width: 0;
            margin: 0;
            padding: 0;
            list-style: none;

            @media (max-width: 768px) {
                flex: 1 1 0;
            }
        }

        .hd-product-subnav-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 152px;
            height: clamp(40px, calc(100vw * 50 / var(--layout-ref-width)), 50px);
            max-height: 50px;
            padding: 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            border-radius: 999px;
            box-sizing: border-box;
            font-weight: 500;
            font-size: clamp(0.875rem, 0.35vw + 0.8rem, 0.9375rem);
            line-height: 1.3;
            color: #1B7076;
            text-decoration: none;
            transition: background 0.18s ease, color 0.18s ease;

            @media (max-width: 768px) {
                align-self: stretch;
                width: 100%;
                min-width: 0;
                height: 56px;
                padding: 0 4px;
                font-size: 0.75rem;
                white-space: nowrap;
            }

            &:hover {
                color: #1D6D73;
            }

            &.hd-product-subnav-link--active,
            &[aria-current='true'] {
                font-weight: 600;
                background: #1D6D73;
                color: #FFFFFF;

                &:hover {
                    background: #1D6D73;
                    color: #FFFFFF;
                }
            }
        }

        .hd-product-panels-section {
            width: 100%;
            box-sizing: border-box;
            background: #FFFFFF;
        }

        /* 롱 이미지 — 섹션 NAV / 서브 nav 와 동일한 1320 컨텐츠 라인 (풀 1920 확대 방지) */
        .hd-product-panels {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: calc(var(--company-content-max) + (var(--company-inline-gutter) * 2));
            margin-left: auto;
            margin-right: auto;
            padding:
                clamp(48px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
                var(--company-inline-gutter);
            box-sizing: border-box;

            @media (max-width: 768px) {
                padding-left: 0;
                padding-right: 0;
            }
        }

        .hd-product-panel {
            width: 100%;
            max-width: var(--company-content-max);
            margin-left: auto;
            margin-right: auto;
            scroll-margin-top: calc(var(--public-header-height) + 74px);
        }

        .hd-product-panel-img {
            display: block;
            width: 100%;
            max-width: 100%;
            height: auto;
            vertical-align: top;
        }
    }

    /* ── Related Products (페이지 맨 하단) ───────────────────── */
    .hd-related-products {
        background: #F8FAFB;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter)
            clamp(56px, calc(100vw * 96 / var(--layout-ref-width)), 96px)
            ;
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }
    }

    .hd-related-inner {
        max-width: var(--company-content-max);
        margin: 0 auto;
        box-sizing: border-box;
    }

    .hd-related-title {
        margin: 0 0 clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
        font-weight: 600;
        font-size: clamp(22px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
        line-height: 140%;
        letter-spacing: -0.02em;
        color: #47454F;

        @media (max-width: 768px) {
            font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
            line-height: 160%;
        }
    }

    .hd-related-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

        @media (max-width: 1024px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        @media (max-width: 720px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        @media (max-width: 420px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .hd-related-card {
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        background: #F1F5F9;
        overflow: hidden;
        color: inherit;
        text-decoration: none;
        filter: drop-shadow(0px 8px 40px rgba(22, 45, 85, 0.12));
        transition: background 0.18s ease, filter 0.2s ease, transform 0.18s ease;

        &:hover {
            background: #DCEBF9;
            border: 1px solid #00ACAC;
            filter: drop-shadow(0px 8px 40px rgba(22, 45, 85, 0.12));
            transform: translateY(-2px);
            text-decoration: none;
        }

        &:focus-visible {
            outline: 2px solid #1B7076;
            outline-offset: 2px;
        }
    }

    .hd-related-card-thumb {
        width: 100%;
        aspect-ratio: 1 / 1;
        max-height: 218px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #EFF2F6;

        &.hd-related-card-thumb--empty {
            background: #EFF2F6;
        }

        img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }
    }

    .hd-related-card-body {
        padding: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px)
            clamp(14px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: #FFFFFF;
    }

    .hd-related-card-category {
        margin: 0;
        font-weight: 400;
        font-size: clamp(12px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
        line-height: 160%;
        color: #1B7076;
        letter-spacing: -0.01em;
    }

    .hd-related-card-title {
        margin: 0;
        font-weight: 600;
        font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
        line-height: 160%;
        color: #1C1B20;
    }
}

/* ──────────────────────────────────────────────────────────────
   Digital Twin — OVERVIEW (MEDIA_TEXT · imageUrl = 섹션 배경 · 텍스트 좌)
   ict-digital-twin.js 커스텀 렌더 (.ict-digital-twin-overview)
   ────────────────────────────────────────────────────────────── */
body.ict-digital-twin .page-content {
    background: #f8fafb;

    /* SOLUTION_TITLE — 상단 대제목 (eyebrow + body · 좌측 · 그라데이션) */
    section.ict-digital-twin-hero.SOLUTION_TITLE[class*='-hero'] {
        text-align: left;
        box-sizing: border-box;
        margin: 0;
        padding:
            clamp(64px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
            var(--company-inline-gutter)
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
        background:
            linear-gradient(180deg, #e8ecf2 0%, rgba(255, 255, 255, 0) 100%),
            #ffffff;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            text-align: center;
        }

        [class*='-hero-inner'] {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
            text-align: left;

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                text-align: center;
            }
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #1b7076;
            text-align: left;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
                text-align: left;
            }

            @media (max-width: 768px) {
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
                text-align: center;

                > p,
                .media-text-plain-line {
                    text-align: center;
                }
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 700;
            font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 150%;
            color: #1c1b20;
            word-break: keep-all;
            text-align: left;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
                text-align: left;
            }

            .ict-digital-twin-title-accent {
                color: #1b7076;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                font-weight: 600;
                font-size: clamp(24px, calc(100vw * 24 / 390), 28px);
                line-height: 160%;
                text-align: center;
                word-break: break-all;
                overflow-wrap: break-word;
                text-wrap: pretty;

                > p,
                .media-text-plain-line {
                    display: inline;
                    text-align: center;
                }

                br {
                    display: none;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }
    }

    /* SMALL_TITLE — 중간 소제목 (가운데 · 24px · si-sm 과 동일, SOLUTION_TITLE 과 별도) */
    section.ict-digital-twin-hero.SMALL_TITLE[class*='-hero'] {
        text-align: center;
        padding: clamp(48px, 4vw, 100px) 0 var(--company-narrow-inline);
        box-sizing: border-box;
        background: #FFFFFF;

        @media (max-width: 768px) {
            padding-inline: max(97px, calc(100vw * 97 / 390));
        }

        [class*='-hero-inner'] {
            max-width: min(1000px, 100%);
            margin-left: auto;
            margin-right: auto;

            > div,
            .media-text-body-block,
            .media-text-plain-line {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                line-height: 160%;
                text-align: center;
                color: #47454f;
                margin: 0;
            }

            @media (max-width: 768px) {
                > div,
                .media-text-body-block,
                .media-text-plain-line {
                    font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                    line-height: 140%;
                }
            }
        }
    }

    /* IMAGE — 히어로/소제목 아래 단일 이미지 섹션 */
    section.IMAGE.ict-digital-twin-image-section,
    section.IMAGE[class*='ict-digital-twin-image-section'] {
        background: #ffffff;
    }

    section.ict-digital-twin-overview.OVERVIEW {
        --ict-digital-twin-overview-bg: none;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        min-height: clamp(480px, calc(100vw * 720 / var(--layout-ref-width)), 720px);
        background-color: #0a0f12;
        background-image: var(--ict-digital-twin-overview-bg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: #ffffff;
        padding:
            clamp(64px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
            var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            min-height: clamp(420px, 85vh, 640px);
        }

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                90deg,
                rgba(10, 15, 18, 0.88) 0%,
                rgba(10, 15, 18, 0.55) 42%,
                rgba(10, 15, 18, 0.12) 68%,
                transparent 100%
            );
            pointer-events: none;
        }

        .ict-digital-twin-media-text-wrap.media-text-wrap {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            width: 100%;
            max-width: var(--company-content-max);
            min-height: clamp(560px, calc(100vw * 800 / var(--layout-ref-width)), 800px);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
        }

        .ict-digital-twin-media-text-copy.media-text-copy {
            flex: 0 1 auto;
            width: 100%;
            max-width: min(100%, 800px);
            margin: 0;
            text-align: left;
            text-shadow: none;
            color: #ffffff;
            word-break: keep-all;
            box-sizing: border-box;
        }

        .media-text-body-block {
            text-align: left;
            color: inherit;
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #00acac;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            margin: 0 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            font-weight: 600;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            color: #ffffff;
            text-shadow: 0 0 40px rgba(0, 172, 172, 0.32);

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-size: clamp(32px, calc(100vw * 32 / 390), 36px);
                line-height: 140%;
                text-shadow: 0 0 40px rgba(0, 172, 172, 0.32);
            }
        }

        .media-text-body-block[data-field-key='summary'],
        .media-text-key-summary {
            margin: 0 0 clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            font-weight: 500;
            font-size: clamp(18px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #e8ecf2;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
                color: #e8ecf2;
                margin-bottom: 56px;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                word-break: normal;
                overflow-wrap: break-word;

                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }

        .media-text-body-block[data-field-key='description'],
        .media-text-key-description {
            margin: 0 0 clamp(20px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
            font-weight: 300;
            font-size: clamp(16px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                margin-bottom: 56px;
                word-break: break-all;

                /* CMS 줄(div) 구조 유지 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }

        .media-text-body-block[data-field-key='bullets'],
        .media-text-key-bullets {
            margin: 0;
            font-weight: 300;
            font-size: clamp(16px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
            }

            .media-text-plain-line {
                position: relative;
                margin: 0 0 clamp(6px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
                padding-left: 14px;
                font: inherit;
                color: inherit;

                &:last-child {
                    margin-bottom: 0;
                }

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0.65em;
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background: currentColor;
                    transform: translateY(-50%);
                }
            }
        }
    }

    /* APPLICATION — left/right · 배경 IMAGE · 스텝 01~04 · 하단 바 */
    .ict-digital-twin-application.APPLICATION {
        --ict-digital-twin-application-bg: none;
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        min-height: clamp(560px, calc(100vw * 948 / var(--layout-ref-width)), 948px);
        overflow: hidden;
        background-color: #d8dce1;
        background-image:
            linear-gradient(90deg, #f8fafb 0%, rgba(255, 255, 255, 0) 100%),
            var(--ict-digital-twin-application-bg);
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
        padding:
            clamp(80px, calc(100vw * 160 / var(--layout-ref-width)), 160px)
            var(--company-inline-gutter)
            clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        @media (max-width: 1200px) {
            min-height: auto;
        }

        .ict-digital-twin-application-inner {
            position: relative;
            z-index: 1;
            flex: 1 1 auto;
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
            padding-bottom: clamp(40px, calc(100vw * 64 / var(--layout-ref-width)), 64px);

            @media (max-width: 1200px) {
                padding-bottom: clamp(48px, 6vw, 72px);
            }
        }

        .ict-digital-twin-application-layout {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            gap: clamp(24px, calc(100vw * 48 / var(--layout-ref-width)), 48px);

            @media (max-width: 1200px) {
                flex-direction: column;
                align-items: stretch;
                gap: clamp(32px, 4vw, 48px);
            }
        }

        .ict-digital-twin-application-left {
            flex: 0 1 clamp(280px, calc(100vw * 654 / var(--layout-ref-width)), 654px);
            min-width: 0;
            max-width: min(100%, clamp(280px, calc(100vw * 654 / var(--layout-ref-width)), 654px));
            word-break: keep-all;

            @media (max-width: 1200px) {
                flex: 1 1 auto;
                max-width: 100%;
            }
        }

        .ict-digital-twin-application-eyebrow {
            margin: 0 0 clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #1b7076;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }
        }

        .ict-digital-twin-application-headline {
            margin: 0 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            font-weight: 600;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            color: #1c1b20;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(24px, calc(100vw * 24 / 390), 28px);
                line-height: 160%;
            }
        }

        .ict-digital-twin-application-summary {
            margin: 0 0 clamp(20px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
            font-weight: 500;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #47454F;

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
                word-break: normal;
                overflow-wrap: break-word;
                text-wrap: pretty;

                /* br 구조 · inline으로 이어 써서 강제 줄바꿈 방지 */
                > p,
                .media-text-plain-line {
                    display: inline;
                }

                br {
                    display: none;
                }

                &::after {
                    content: '';
                    display: block;
                }
            }
        }

        .ict-digital-twin-application-bullets {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                position: relative;
                margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
                padding-left: 14px;
                font-weight: 300;
                font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
                line-height: 160%;
                color: #1c1b20;

                @media (max-width: 768px) {
                    font-weight: 400;
                    font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                    line-height: 160%;
                }

                &:last-child {
                    margin-bottom: 0;
                }

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0.65em;
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    transform: translateY(-50%);
                }
            }
        }

        .ict-digital-twin-application-steps {
            flex: 1 1 44%;
            min-width: 0;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(20px, calc(100vw * 60 / var(--layout-ref-width)), 60px);

            @media (max-width: 1200px) {
                flex: 1 1 auto;
            }
        }

        .ict-digital-twin-application-step {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);

            @media (max-width: 768px) {
                gap: 12px;
            }
        }

        .ict-digital-twin-application-step-num {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: clamp(48px, calc(100vw * 64 / var(--layout-ref-width)), 64px);
            height: clamp(48px, calc(100vw * 64 / var(--layout-ref-width)), 64px);
            border-radius: 40px;
            background: #1b7076;
            color: #ffffff;
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;

            @media (max-width: 768px) {
                width: 40px;
                height: 40px;
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }
        }

        .ict-digital-twin-application-step-body {
            flex: 1 1 auto;
            min-width: 0;
            padding-top: clamp(4px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
        }

        .ict-digital-twin-application-step-title {
            margin: 0 0 clamp(4px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #1b7076;
            word-break: keep-all;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .ict-digital-twin-application-step-desc {
            margin: 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454f;
            word-break: keep-all;

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }
        }

        .ict-digital-twin-application-bar {
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            margin-top: auto;
            box-sizing: border-box;

            @media (max-width: 1200px) {
                margin-top: 0;
            }
            display: flex;
            align-items: center;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            width: 100vw;
            margin-inline: calc(50% - 50vw);
            height: clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);

            @media (max-width: 768px) {
                height: clamp(20px, calc(100vw * 20 / 390), 24px);
            }
            padding:
                clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px)
                clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            background: #1b7076;
        }
    }

    /* PC 스크롤 reveal — APPLICATION (ict-digital-twin.js) */
    @media (min-width: 769px) {
        .ict-digital-twin-application.APPLICATION .ict-digital-twin-application-left > *,
        .ict-digital-twin-application.APPLICATION .ict-digital-twin-application-step {
            opacity: 0;
            transform: translateY(28px);
            transition:
                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }

        .ict-digital-twin-application.APPLICATION.is-ict-dt-application-left-in-view
            .ict-digital-twin-application-left
            > * {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-dt-application-reveal-delay, 70ms);
        }

        .ict-digital-twin-application.APPLICATION.is-ict-dt-application-steps-in-view
            .ict-digital-twin-application-step {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--ict-dt-application-reveal-delay, 90ms);
        }
    }

    @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
        .ict-digital-twin-application.APPLICATION .ict-digital-twin-application-left > *,
        .ict-digital-twin-application.APPLICATION .ict-digital-twin-application-step {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            will-change: auto;
        }
    }

    /* KEY_FEATURES — 2×2 · 1320 · 카드 #F8FAFB + border */
    .ict-digital-twin-key-features.KEY_FEATURES {
        box-sizing: border-box;
        background: #ffffff;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .ict-digital-twin-key-features-inner {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }

        .ict-digital-twin-key-features-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(14px, calc(100vw * 20 / var(--layout-ref-width)), 20px);

            @media (max-width: 768px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }
        }

        .ict-digital-twin-key-feature-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: clamp(8px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            max-height: clamp(140px, calc(100vw * 163 / var(--layout-ref-width)), 163px);
            padding:
                clamp(20px, calc(100vw * 28 / var(--layout-ref-width)), 28px)
                clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            background: #f8fafb;
            border: 1px solid #c4c7d0;
            border-radius: 20px;
            text-align: center;
            word-break: keep-all;

            @media (max-width: 768px) {
                max-height: none;
                gap: clamp(12px, calc(100vw * 12 / 390), 14px);
                padding:
                    clamp(24px, calc(100vw * 24 / 390), 28px)
                    clamp(12px, calc(100vw * 12 / 390), 14px);
            }
        }

        .ict-digital-twin-key-feature-card-title {
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #1b7076;

            @media (max-width: 768px) {
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .ict-digital-twin-key-feature-card-desc {
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            color: #47454f;

            @media (max-width: 768px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }
        }
    }

    /* RELATED_SOLUTIONS — 다른 ICT 제품 카드 (RTU/SI&SM 과 동일, nav path 매칭) */
    .ict-digital-twin-related-solutions.RELATED_SOLUTIONS {
        background: transparent;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter)
            clamp(100px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .ict-digital-twin-related-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
        }

        .ict-digital-twin-related-title {
            margin: 0 0 clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #47454f;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .ict-digital-twin-related-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 900px) {
                grid-template-columns: 1fr;
            }
        }

        .ict-digital-twin-related-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            align-self: stretch;
            flex: 1 1 auto;
            gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            min-height: clamp(160px, calc(100vw * 220 / var(--layout-ref-width)), 220px);
            padding:
                clamp(32px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
                clamp(24px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
            border: 1px solid #e6ebf0;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            background: #ffffff;
            color: inherit;
            text-decoration: none;
            transition: border-color 0.18s ease;

            &:hover {
                border-color: #00acac;
                text-decoration: none;

                .ict-digital-twin-related-card-title {
                    color: #1b7076;
                }

                .ict-digital-twin-related-card-arrow {
                    color: #1b7076;
                }
            }

            &:focus-visible {
                outline: 2px solid #1b7076;
                outline-offset: 2px;
            }
        }

        .ict-digital-twin-related-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
        }

        .ict-digital-twin-related-card-title {
            margin: 0;
            font-weight: 700;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 140%;
            color: #162d55;
            transition: color 0.18s ease;
        }

        .ict-digital-twin-related-card-arrow {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            background-color: currentColor;
            color: #cbd5e1;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            transition: color 0.18s ease;
        }

        .ict-digital-twin-related-card-desc {
            margin: 0;
            font-weight: 400;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            color: #64748b;
        }
    }

    /* EDITOR — Quill 본문 · 구성도 이미지 */
    section.ict-digital-twin-editor-section.EDITOR {
        box-sizing: border-box;
        background: #fff;
        .ict-digital-twin-editor-content.ql-editor {
            img {
                display: block;
                width: auto;
                max-width: 100%;
                height: auto !important;
                min-height: 167px;
                object-fit: contain;
                object-position: center;
            }
        }
    }
}

/* ──────────────────────────────────────────────────────────────
   MES — /solutions/ict-mes
   OVERVIEW (MEDIA_TEXT) — RTU APP 과 동일 · 이미지 ← · 텍스트 →
   ────────────────────────────────────────────────────────────── */
body.ict-mes .page-content {
    background: #f8fafb;

    section.OVERVIEW[class*='-media-text-section'] {
        background: #EFF2F6;
        color: #1c1b20;
        box-sizing: border-box;
        overflow: visible;
        padding-block: clamp(100px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
        padding-inline: var(--company-inline-gutter);

        @media (max-width: 900px) {
            padding-block: clamp(48px, calc(100vw * 80 / 390), 80px);
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-media-text-wrap'].media-text-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
            gap: clamp(28px, calc(100vw * 91 / var(--layout-ref-width)), 91px);

            /* 모바일 — 텍스트 → 이미지+캡션 → 버튼 (세로 · 왼쪽 정렬) */
            @media (max-width: 900px) {
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 12px;
            }
        }

        .media-text-media {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 0 1 clamp(350px, calc(100vw * 783 / var(--layout-ref-width)), 783px);
            width: clamp(350px, calc(100vw * 783 / var(--layout-ref-width)), 783px);
            min-width: 0;
            max-width: min(100%, 783px);
            margin: 0;
            aspect-ratio: auto;
            min-height: 0;
            overflow: visible;
            background: transparent;
            align-self: center;

            &::before,
            &::after {
                display: none;
            }

            img,
            .media-text-video {
                position: relative;
                width: 100%;
                aspect-ratio: 783 / 393;
                min-height: clamp(180px, calc(100vw * 393 / var(--layout-ref-width)), 393px);
                height: auto;
                object-fit: contain;
                object-position: left center;
                display: block;
            }

            @media (max-width: 900px) {
                order: 10;
                flex: 1 1 auto;
                width: 100%;
                max-width: 100%;

                img,
                .media-text-video {
                    object-position: center;
                    border-radius: clamp(12px, calc(100vw * 16 / 390), 16px);
                    aspect-ratio: 783 / 393;
                    min-height: clamp(207px, calc(100vw * 207 / 390), 244px);
                }
            }

            .media-text-body-block[data-field-key='image-caption'],
            .media-text-key-image-caption {
                flex-shrink: 0;
                width: 100%;
                margin: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px) 0 0;
                font-weight: 400;
                font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
                line-height: 160%;
                color: #64748b;
                text-align: center;

                > p,
                .media-text-plain-line {
                    margin: 0;
                    font: inherit;
                    color: inherit;
                }

                @media (max-width: 768px) {
                    font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                    line-height: 160%;
                }
            }
        }

        .media-text-copy {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            padding: 0;
            text-align: left;
            text-shadow: none;
            color: #1c1b20;
            word-break: keep-all;
            box-sizing: border-box;

            @media (max-width: 900px) {
                display: contents;
                width: 100%;
            }
        }

        .media-text-body-block {
            text-align: left;
            color: inherit;
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #1b7076;
            letter-spacing: 0.04em;
            text-transform: uppercase;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 900px) {
                order: 1;
                margin-bottom: clamp(8px, calc(100vw * 8 / 390), 12px);
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }
        }

        .media-text-body-block[data-field-key='title'],
        .media-text-key-title {
            margin: 0 0 clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            font-weight: 600;
            font-size: clamp(32px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 140%;
            color: #1c1b20;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }

            @media (max-width: 900px) {
                order: 2;
                margin-bottom: clamp(12px, calc(100vw * 12 / 390), 16px);
                font-size: clamp(32px, calc(100vw * 32 / 390), 36px);
                line-height: 140%;
            }
        }

        .media-text-body-block[data-field-key='pretitle'],
        .media-text-key-pretitle {
            margin: 0 0 clamp(4px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 160%;
            color: #47454F;

            @media (max-width: 900px) {
                order: 3;
                margin-bottom: clamp(8px, calc(100vw * 8 / 390), 12px);
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px) 0 0;
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454f;

            @media (max-width: 900px) {
                order: 4;
                margin: 0 0 clamp(20px, calc(100vw * 24 / 390), 28px);
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
                word-break: normal;
                overflow-wrap: break-word;
                text-wrap: pretty;

                > p,
                .media-text-plain-line {
                    display: block;
                }
            }

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
            }
        }

        .media-text-action-wrap {
            margin-top: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            padding: 0;
            display: flex;
            justify-content: flex-start;

            @media (max-width: 900px) {
                order: 11;
                width: 100%;
                margin-top: clamp(20px, calc(100vw * 24 / 390), 28px);
            }
        }

        .media-text-primary-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            min-width: 0;
            width: fit-content;
            height: clamp(44px, calc(100vw * 52 / var(--layout-ref-width)), 52px);
            padding: 0 36px;
            font-weight: 600;
            font-size: 16px;
            line-height: 120%;
            color: #ffffff;
            text-decoration: none;
            background: #1b7076;
            border: none;
            border-radius: 10px;
            box-shadow: none;
            transition: none;

            @media (max-width: 900px) {
                width: 100%;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }
        }

        .media-text-action-arrow {
            display: none;
        }
    }

    /* KEY_FEATURES — 2×2 · 아이콘(배경 포함 컷) 92×92 ← · 텍스트 → · 카드 흰색 */
    .ict-mes-key-features.KEY_FEATURES {
        box-sizing: border-box;
        background: transparent;
        padding: 20px var(--company-inline-gutter) clamp(80px, calc(100vw * 120 / var(--layout-ref-width)), 120px);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .ict-mes-key-features-inner {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }

        .ict-mes-key-features-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 768px) {
                grid-template-columns: 1fr;
                gap: 12px;
            }
        }

        .ict-mes-key-feature-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            padding: clamp(20px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
            background: #ffffff;
            border-radius: clamp(16px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            box-shadow: 0 4px 24px rgba(28, 27, 32, 0.08);
            word-break: keep-all;

            @media (max-width: 768px) {
                gap: clamp(12px, calc(100vw * 16 / 390), 16px);
                padding: clamp(16px, calc(100vw * 20 / 390), 24px);
                border-radius: 16px;
            }
        }

        /* 아이콘 = 배경 포함 디자인 컷 그대로 노출 */
        .ict-mes-key-feature-card-icon {
            flex-shrink: 0;
            line-height: 0;

            img {
                display: block;
                width: clamp(60px, calc(100vw * 92 / var(--layout-ref-width)), 92px);
                height: clamp(60px, calc(100vw * 92 / var(--layout-ref-width)), 92px);
                object-fit: contain;
            }
        }

        .ict-mes-key-feature-card-body {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(4px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
        }

        .ict-mes-key-feature-card-title {
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 160%;
            color: #1c1b20;

            @media (max-width: 768px) {
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .ict-mes-key-feature-card-desc {
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            color: #47454f;

            @media (max-width: 768px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
            }
        }
    }

    /* AI_ASSISTANT — #15283F · 좌 카드 4 · 우 목업 IMAGE (헤더는 별도 TITLE) */
    .ict-mes-ai-assistant.AI_ASSISTANT {
        box-sizing: border-box;
        background: #15283f;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter);

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .ict-mes-ai-assistant-inner {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
        }

        .ict-mes-ai-assistant-layout {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            justify-content: flex-start;
            width: 100%;
            gap: clamp(24px, calc(100vw * 48 / var(--layout-ref-width)), 48px);

            @media (max-width: 768px) {
                flex-direction: column;
                align-items: stretch;
                gap: clamp(28px, 6vw, 40px);
            }
        }

        /* 1920 기준 카드 열 646px · gap 48 · 미디어 = 나머지 (~626 @1320) */
        .ict-mes-ai-assistant-cards {
            flex: 0 0 clamp(280px, calc(100vw * 646 / var(--layout-ref-width)), 646px);
            width: clamp(280px, calc(100vw * 646 / var(--layout-ref-width)), 646px);
            min-width: 0;
            max-width: min(100%, 646px);
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);

            @media (max-width: 768px) {
                order: 2;
                flex: 1 1 auto;
                width: 100%;
                max-width: 100%;
            }
        }

        .ict-mes-ai-assistant-card {
            box-sizing: border-box;
            flex: 1 1 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            padding:
                clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px)
                clamp(20px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            background: #2c4777;
            border-radius: 12px;
            word-break: keep-all;

            @media (max-width: 768px) {
                flex: 0 0 auto;
                gap: 10px;
                padding: 32px;
            }
        }

        .ict-mes-ai-assistant-card-title {
            margin: 0;
            font-weight: 500;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #ffffff;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .ict-mes-ai-assistant-card-desc {
            margin: 0;
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #a7c6ff;

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                line-height: 160%;
                color: #a7c6ff;
            }
        }

        .ict-mes-ai-assistant-media {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            align-items: flex-start;
            align-self: stretch;

            @media (max-width: 768px) {
                order: 1;
                flex: 0 0 auto;
                width: 100%;
                min-height: clamp(403px, calc(100vw * 403 / 390), 480px);
                align-self: auto;
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: top center;

                @media (max-width: 768px) {
                    height: auto;
                    min-height: clamp(403px, calc(100vw * 403 / 390), 480px);
                    object-position: center;
                }
            }
        }
    }

    /* SOLUTION_TITLE — digital-twin 동일 레이아웃 · #15283F · AI Assistant 헤더 */
    section.ict-mes-hero.SOLUTION_TITLE[class*='-hero'] {
        text-align: left;
        box-sizing: border-box;
        margin: 0;
        padding:
            clamp(64px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
            var(--company-inline-gutter)
            clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
        background: #15283f;
        padding-bottom: 40px;
        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
            padding-bottom: 10px;
        }

        [class*='-hero-inner'] {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
            text-align: left;
            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
            }
        }

        /* eyebrow — 제목 (AI Assistant) */
        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            font-weight: 700;
            font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 160%;
            color: #ffffff;
            word-break: keep-all;
            text-align: left;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
                text-align: left;
            }

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(24px, calc(100vw * 24 / 390), 28px);
                line-height: 160%;
            }
        }

        /* body — 설명 (줄마다 동일 스타일) */
        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #c4c7d0;
            word-break: keep-all;
            text-align: left;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
                text-align: left;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
                color: #c4c7d0;
                word-break: break-all;
                overflow-wrap: break-word;
                text-wrap: pretty;

                > p,
                .media-text-plain-line {
                    display: inline;
                }
            }
        }
    }

    /* SOLUTION_TITLE 바로 아래 AI_ASSISTANT — 상단 패딩 축소 (동일 배경 이어짐) */
    section.ict-mes-hero.SOLUTION_TITLE[class*='-hero'] + .ict-mes-ai-assistant.AI_ASSISTANT {
        padding-top: 0;
    }

    /* PLATFORM_TITLE — 통합 제조 플랫폼 구축 헤더 (SOLUTION_TITLE 동일 구조 · 색만 분리) */
    section.ict-mes-hero.PLATFORM_TITLE[class*='-hero'] {
        text-align: left;
        box-sizing: border-box;
        margin: 0;
        padding:
            clamp(64px, calc(100vw * 120 / var(--layout-ref-width)), 120px)
            var(--company-inline-gutter)
            0;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-hero-inner'] {
            width: 100%;
            max-width: var(--company-content-max);
            margin: 0 auto;
            box-sizing: border-box;
            text-align: left;

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
            }
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            margin: 0 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            font-weight: 700;
            font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 160%;
            color: #1b7076;
            word-break: keep-all;
            text-align: left;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
                text-align: left;
            }

            @media (max-width: 768px) {
                font-size: clamp(24px, calc(100vw * 24 / 390), 28px);
                line-height: 160%;
            }
        }

        .media-text-body-block[data-field-key='body'],
        .media-text-key-body {
            margin: 0;
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #47454F;
            word-break: keep-all;
            text-align: left;

            > p,
            .media-text-plain-line {
                margin: 0;
                font: inherit;
                color: inherit;
                text-align: left;
            }

            @media (max-width: 768px) {
                width: 100%;
                max-width: 100%;
                font-size: clamp(20px, calc(100vw * 20 / 390), 24px);
                line-height: 140%;
                word-break: break-all;
                overflow-wrap: break-word;
                text-wrap: pretty;

                > p,
                .media-text-plain-line {
                    display: block;
                }
            }
        }
    }

    /* RELATED_SOLUTIONS — 다른 ICT 제품 카드 (RTU/SI&SM 과 동일, nav path 매칭) */
    .ict-mes-related-solutions.RELATED_SOLUTIONS {
        background: transparent;
        padding:
            clamp(48px, calc(100vw * 80 / var(--layout-ref-width)), 80px)
            var(--company-inline-gutter)
            clamp(100px, calc(100vw * 140 / var(--layout-ref-width)), 140px);
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        .ict-mes-related-inner {
            max-width: var(--company-content-max);
            margin: 0 auto;
        }

        .ict-mes-related-title {
            margin: 0 0 clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            font-weight: 500;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #47454f;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 20px);
                line-height: 160%;
            }
        }

        .ict-mes-related-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

            @media (max-width: 900px) {
                grid-template-columns: 1fr;
            }
        }

        .ict-mes-related-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            align-self: stretch;
            flex: 1 1 auto;
            gap: clamp(12px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
            min-height: clamp(160px, calc(100vw * 220 / var(--layout-ref-width)), 220px);
            padding:
                clamp(32px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
                clamp(24px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
            border: 1px solid #e6ebf0;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            background: #ffffff;
            color: inherit;
            text-decoration: none;
            transition: border-color 0.18s ease;

            &:hover {
                border-color: #00acac;
                text-decoration: none;

                .ict-mes-related-card-title {
                    color: #1b7076;
                }

                .ict-mes-related-card-arrow {
                    color: #1b7076;
                }
            }

            &:focus-visible {
                outline: 2px solid #1b7076;
                outline-offset: 2px;
            }
        }

        .ict-mes-related-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
        }

        .ict-mes-related-card-title {
            margin: 0;
            font-weight: 700;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 140%;
            color: #162d55;
            transition: color 0.18s ease;
        }

        .ict-mes-related-card-arrow {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            background-color: currentColor;
            color: #cbd5e1;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            transition: color 0.18s ease;
        }

        .ict-mes-related-card-desc {
            margin: 0;
            font-weight: 400;
            font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            color: #64748b;
        }
    }

    /* TITLE — si-sm TITLE 과 동일 (솔루션 핵심 기능 등 섹션 제목) */
    section.ict-mes-hero.TITLE[class*='-hero'] {
        text-align: center;
        padding: clamp(48px, 4vw, 100px) 0 var(--company-narrow-inline);
        box-sizing: border-box;

        @media (max-width: 768px) {
            padding-inline: var(--company-narrow-inline);
        }

        [class*='-hero-inner'] {
            max-width: min(1000px, 100%);
            margin-left: auto;
            margin-right: auto;

            > div {
                font-weight: 600;
                font-size: clamp(32px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
                line-height: 150%;
                text-align: center;
                color: #47454f;
                letter-spacing: -0.02em;
                margin: 0;
            }

            @media (max-width: 768px) {
                > div {
                    font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                    line-height: 140%;
                }
            }
        }
    }
}