/* ========================================
   Company / 기업 영역 — public company.css
   /company/* (#…Content.page-content) 공통: 소개·연혁·인증·문의 등
   pageRenderer: TITLE · SUBJECT · IMAGE · MEDIA_TEXT(ABOUT·HEADER 등) · DEVELOPER(nav)
   ======================================== */

/* ========================================
   공통 — .page-content (모든 company 페이지)
   ======================================== */
.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);

    /* ── 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: 430px) {
            padding-block: 40px;
            padding-inline: var(--company-narrow-inline-tight);

            [class*='-hero-inner'] {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 18px;
            }

            [class*='-hero-inner'] > div:not(.media-text-body-block) {
                font-weight: 600;
                font-size: 24px;
                line-height: 160%;
                color: #1c1b20;
            }
        }

        [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: 430px) {
                font-weight: 600;
                font-size: 24px;
                line-height: 160%;
                color: #1c1b20;
                margin: 0;
            }

            > 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: 430px) {
                font-size: 12px;
                line-height: 160%;
                font-weight: 500;
                color: #2c4777;
            }

            > 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 */
    section.IMAGE[class*='-image-section'] {
        padding: clamp(40px, 6vw, 64px) var(--company-narrow-inline);
        text-align: center;
        box-sizing: border-box;

        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 12px;
        }
    }

    /* ── 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: 600;
            font-size: clamp(1.125rem, 0.9vw + 0.95rem, 1.5rem);
            line-height: 160%;
            margin: 0 0 0.5rem;

            @media (max-width: 768px) {
                font-size: clamp(0.875rem, 0.5vw + 0.75rem, 1.125rem);
            }

            > 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(1.5rem, 4vw + 0.65rem, 2.25rem);
                word-break: break-all;
            }

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

        .media-text-body-block[data-field-key='summary'],
        .media-text-key-summary {
            width: 100%;
            font-weight: 400;
            font-size: clamp(1rem, 0.35vw + 0.9rem, 1.125rem);
            line-height: 160%;
            letter-spacing: -0.01em;
            word-break: break-all;
            @media (max-width: 768px) {
                font-size: clamp(0.875rem, 0.35vw + 0.78rem, 1rem);
            }

            > 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: 600;
            font-size: clamp(0.875rem, 0.6vw + 0.7rem, 0.9375rem);
            line-height: 1.2;
            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: 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 후 본문이 비치지 않도록 불투명 처리
       - 모바일(≤768) 에서는 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) {
                /* 헤더·푸터와 동일 가로 inset — 스크롤은 이 래퍼 안에서만 */
                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 있으면 51px 링크+밑줄이 컨테이너 밖으로 잘림 */
                padding: 0 16px 0;
                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;

            @media (max-width: 768px) {
                color: #47454f;
                background-color: transparent;
            }
        }

        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;

            @media (max-width: 768px) {
                color: #47454f;
            }

            /* 밑줄 = 링크 패딩 안 텍스트 영역 (left/right = 가로 padding 과 동일) */
            &::after {
                content: '';
                position: absolute;
                left: 24px;
                right: 24px;
                bottom: 0;
                width: auto;
                height: 6px;
                background: #0f64c0;
                border-radius: 10px;

                @media (max-width: 430px) {
                    left: 0px;
                    right: 0px;
                    height: 4px;
                    border-radius: 6px;
                }
            }

            &:hover {
                color: #0f2347;
                background-color: #dcebf9;

                @media (max-width: 768px) {
                    color: #47454f;
                    background-color: transparent;
                }
            }
        }
    }
}

/* ========================================
   기업소개 ABOUT
   ======================================== */


body.company-about .page-content {

    /** PARTNER_LOGOS — 무한 스크롤 마퀴 마크업 */
    .about-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: company-about-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;
            }
        }

        @media (max-width: 768px) {
            box-sizing: border-box;
            width: 100vw;
            max-width: 100%;
            margin-inline-start: calc(50% - 50vw);

            > .about-list-content {
                width: 100%;
                max-width: none;
                padding: 0;
            }

            .partner-logos-marquee {
                overflow: visible;
                -webkit-mask-image: none;
                mask-image: none;
            }

            .partner-logos-viewport {
                overflow: visible;
            }

            .partner-logos-anim {
                display: block;
                width: 100%;
                max-width: 100%;
                animation: none;
            }

            .partner-logos-track[aria-hidden='true'] {
                display: none;
            }

            .partner-logos-track {
                display: block;
                width: 100%;

                .public-list-tree {
                    display: grid;
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                    align-items: center;
                    justify-items: center;
                    gap: clamp(24px, 6vw, 40px) clamp(12px, 3vw, 20px);
                    padding: clamp(32px, 8vw, 48px) var(--company-narrow-inline);
                }
            }

            .public-list-tree{
                gap: 0;
            }

            .public-list-item {
                width: 100%;
            }

            .public-list-item-content {
                width: 100%;
                height: auto;
                min-height: clamp(72px, calc(72px + (100vw - 390px) * 24 / 378), 96px);
                padding: clamp(8px, 2vw, 12px);
            }

            .public-list-item-image {
                width: 100%;
                height: clamp(40px, calc(40px + (100vw - 390px) * 16 / 378), 56px);
            }

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

            .public-list-item-text {
                color: #fff;
            }
        }
    }

    .about-media-text-section.ABOUT {
        box-sizing: border-box;
        width: 100vw;
        max-width: 100%;
        margin-inline-start: calc(50% - 50vw);
        padding: clamp(40px, 7vw, 88px) 0;
        color: #111827;

        @media (max-width: 768px) {
            width: 100%;
            max-width: 100%;
            margin-inline-start: 0;
            padding: 60px 0 clamp(24px, 6vw, 40px);
            overflow-x: clip;
        }

        @media (max-width: 430px) {
            padding-top: 80px;
            padding-bottom: 60px;
        }

        .about-media-text-wrap.media-text-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: clamp(24px, calc(100vw * 138 / var(--layout-ref-width)), 138px);
            box-sizing: border-box;
            width: 100%;
            max-width: min(calc(724px + 138px + 1196px), 100%);
            margin: 0;
            max-height: 720px;
            min-width: 0;
            @media (max-width: 768px) {
                width: 100%;
                max-width: none;
                flex-direction: column;
                align-items: flex-start;
                gap: 40px;
                max-height: none;
            }
        }

        .media-text-media {
            --about-media-pill-r: clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            box-sizing: border-box;
            flex: 0 1 clamp(140px, calc(100vw * 724 / var(--layout-ref-width)), 724px);
            width: clamp(140px, calc(100vw * 724 / var(--layout-ref-width)), 724px);
            max-width: 724px;
            min-width: 0;
            align-self: stretch;
            position: relative;
            display: block;
            overflow: hidden;
            padding: 0;
            background: transparent;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-top-right-radius: var(--about-media-pill-r);
            border-bottom-right-radius: var(--about-media-pill-r);
            min-height: clamp(360px, calc(100vw * 720 / var(--layout-ref-width)), 720px);
            max-height: min(720px, 92vh);

            @media (max-width: 768px) {
                --about-media-pill-r: 40px;
                flex: none;
                flex-grow: 0;
                align-self: flex-start;
                /* 390px: 360×320 · 768px: 최대 +200px (560×520) */
                width: clamp(360px, calc(100vw * 360 / 390), 560px);
                max-width: min(560px, calc(100vw - var(--company-narrow-inline)));
                height: clamp(320px, calc(100vw * 320 / 390), 520px);
                min-height: 0;
                max-height: none;
                aspect-ratio: auto;
                margin-left: 0;
                left: 0;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                border-top-right-radius: var(--about-media-pill-r);
                border-bottom-right-radius: var(--about-media-pill-r);
            }

            &:empty {
                display: none;

                + .media-text-copy {
                    flex: 1 1 100%;
                    max-width: min(1196px, 100%);
                }
            }

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

                @media (max-width: 768px) {
                    object-position: left center;
                }
            }
        }

        .media-text-copy {
            flex: 1 1 0;
            min-width: 0;
            max-width: min(1196px, calc(100vw * 1196 / var(--layout-ref-width)));
            padding-inline-end: var(--company-content-inset);
            font-size: 1rem;
            line-height: 1.65;
            font-weight: 400;
            color: #6b7280;

            @media (max-width: 768px) {
                box-sizing: border-box;
                flex: 1 1 auto;
                width: 100%;
                max-width: 100%;
                height: auto;
                padding-inline: var(--company-narrow-inline);
                overflow-wrap: break-word;
            }
        }

        .media-text-body-block {
            > p { margin: 0; }
            br { display: block; margin-top: 0.35em; }
        }

        /* PC / Display-S — 피그마 48px, line-height 160%, #162D55 */
        .media-text-key-headline,
        .media-text-body-block[data-field-key='headline'] {
            font-size: clamp(26px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            font-weight: 700;
            line-height: 1.6;
            letter-spacing: -0.03em;
            color: #162d55;
            margin: 0 0 clamp(14px, calc(100vw * 24 / var(--layout-ref-width)), 24px);


            @media (max-width: 768px) {
                font-size: clamp(24px, calc(100vw * 24 / 390), 26px);
                font-weight: 600;
                margin-bottom: 40px;
            }
        }

        /* 본문 — 피그마 18px, line-height 160%, #1C1B20 */
        .media-text-key-body,
        .media-text-body-block[data-field-key='body'] {
            font-size: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            font-weight: 400;
            line-height: 1.6;
            letter-spacing: -0.01em;
            color: #1c1b20;
            margin: clamp(36px, calc(100vw * 80 / var(--layout-ref-width)), 80px) 0
                clamp(12px, calc(100vw * 14 / var(--layout-ref-width)), 14px);

            @media (max-width: 768px) {
                margin-top: clamp(20px, 5vw, 32px);
                margin-bottom: clamp(10px, 3vw, 14px);
            }

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

            .media-text-plain-line:last-child {
                font-weight: 600;
            }
        }

        /*
         * 1920px 초과(빔·초대형): 이미지·갭·텍스트를 1920 피그마 비율(724·138·1196)대로 vw 연동.
         * 724px 등 max 캡을 풀어 오른쪽 빈 공간을 줄이고, 텍스트는 flex 로 남은 폭 흡수.
         */
        @media (min-width: 1921px) {
            .about-media-text-wrap.media-text-wrap {
                max-width: 100%;
                max-height: none;
                gap: calc(100vw * 138 / var(--layout-ref-width));
            }

            .media-text-media {
                --about-media-pill-r: calc(100vw * 60 / var(--layout-ref-width));
                flex: 0 0 calc(100vw * 724 / var(--layout-ref-width));
                width: calc(100vw * 724 / var(--layout-ref-width));
                max-width: none;
                min-height: calc(100vw * 720 / var(--layout-ref-width));
                max-height: none;
            }

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

    }

    /**
     * 반도체·정보통신 솔루션 스플릿 미디어텍스트 — ABOUT 과 동일 `.about-media-text-section` + sectionType.
     * 기업소개 페이지(prefix `about`) 한정: class 예 `about-media-text-section SEMICONDUCTOR` · `about-media-text-section ICT`.
     * DOM 순서는 렌더러 기본(media → copy). ICT 는 PC 에서 row-reverse 로 미디어가 우측.
     * 풀너비 섹션 — 좌우 `--company-content-inset` · 래퍼 max-width 없음.
     */
    .about-media-text-section.SEMICONDUCTOR,
    .about-media-text-section.ICT {
        box-sizing: border-box;
        width: 100%;
        color: #1C1B20;
        padding: clamp(48px, 6vw, 88px) 0;

        @media (max-width: 768px) {
          
            padding-block: clamp(48px, 12vw, 64px);
            padding-inline: 0;
            overflow-x: clip;
        }

        .about-media-text-wrap.media-text-wrap,
        [class*='-media-text-wrap'].media-text-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: clamp(40px, 6vw, 112px);
            width: 100%;
            max-width: none;
            max-height: 600px;
            margin: 0;
            box-sizing: border-box;

            @media (max-width: 768px) {
                flex-direction: column;
                align-items: center;
                gap: clamp(24px, 6vw, 32px);
                max-height: none;
                min-width: 0;
            }
        }

        .media-text-media {
            flex: 1 1 50%;
            min-width: 0;
            max-width: none;
            overflow: hidden;
            display: flex;

            @media (max-width: 768px) {
                flex: 0 0 auto;
                position: relative;
                display: block;
                overflow: hidden;
            }

            &:empty {
                display: none;

                + .media-text-copy {
                    flex: 1 1 100%;
                    max-width: min(40rem, 100%);
                }
            }

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

        .media-text-copy {
            flex: 1 1 50%;
            min-width: min(100%, 17.5rem);
            max-width: none;
            font-weight: 400;

            @media (max-width: 768px) {
                flex: 1 1 auto;
                box-sizing: border-box;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                padding-inline: var(--company-narrow-inline);
                text-align: center;
                overflow-wrap: break-word;
                word-break: keep-all;
            }
        }

        /* pageRenderer: copy 에 media-text-body 클래스도 함께 부여 */
        .media-text-copy.media-text-body {
            @media (max-width: 768px) {
                box-sizing: border-box;
                width: 100%;
                padding-inline: var(--company-narrow-inline);
            }
        }

        .media-text-body-block > p {
            margin: 0;
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            font-size: clamp(1.5rem, 1.8vw + 1rem, 40px);
            font-weight: 700;
            line-height: 1.5;
            letter-spacing: -0.03em;
            margin: clamp(1rem, calc(100vw * 32 / var(--layout-ref-width)), 2rem) 0
                clamp(1.25rem, calc(100vw * 64 / var(--layout-ref-width)), 4rem);

            @media (max-width: 768px) {
                font-weight: 600;
                line-height: 160%;
                margin: 0 0 24px;
                text-align: center;
            }

            @media (max-width: 430px) {
                font-size: 18px;
            }

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

        .media-text-body-block[data-field-key='summary'],
        .media-text-body-block[data-field-key='body'],
        .media-text-key-summary,
        .media-text-key-body {
            font-weight: 400;
            font-size: clamp(0.875rem, 0.35vw + 0.8rem, 16px);
            line-height: 1.6;
            letter-spacing: -0.01em;
            margin: 0 0 0.75rem;
            &:last-child {
                margin-bottom: 0;
            }

            @media (max-width: 768px) {
                margin: 0 0 24px;
                text-align: center;
                word-break: break-all;
            }

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

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

        .media-text-action-wrap {
            margin: clamp(1.5rem, calc(100vw * 64 / var(--layout-ref-width)), 4rem) 0 0;
            display: flex;

            @media (max-width: 768px) {
                margin-top: clamp(1rem, 4vw, 1.5rem);
                justify-content: center;
                flex-wrap: wrap;
                width: 100%;
            }
        }

        .media-text-primary-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 0 clamp(22px, 2vw, 36px);
            font-weight: 600;
            font-size: clamp(0.875rem, 0.35vw + 0.8rem, 16px);
            line-height: 1.6;
            color: #ffffff;
            text-decoration: none;
            text-shadow: none;
            border: none;
            border-radius: 30px;
            transition: background 0.18s ease, box-shadow 0.18s ease;

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

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

            &:hover {
                box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
            }
        }

        .media-text-action-arrow {
            flex-shrink: 0;
        }
    }

    .about-media-text-section.SEMICONDUCTOR {
        /*
         * 미디어 컬럼 — 피그마 Frame 65: 948×600, radius 0·400·400·0 (clamp).
         * 이미지는 패딩 없이 카드 모서리(clip)까지 꽉 채움 — :: 오토레이아웃 패딩은 디자인 툴 기준이라 웹에서는 풀블리드 처리.
         */
        .media-text-media {
            --semiconductor-media-pill-r: clamp(48px, calc(100vw * 400 / var(--layout-ref-width)), 400px);
            box-sizing: border-box;
            flex: 1 1 50%;
            align-self: stretch;
            position: relative;
            display: block;
            overflow: hidden;
            max-width: min(948px, 52vw);
            min-height: clamp(360px, calc(100vw * 600 / var(--layout-ref-width)), 600px);
            padding: 0;
            border-radius: 0 var(--semiconductor-media-pill-r) var(--semiconductor-media-pill-r) 0;

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

            @media (max-width: 768px) {
                --semiconductor-media-pill-r: 400px;
                align-self: flex-start;
                width: calc(100% - var(--company-narrow-inline));
                max-width: min(560px, 100%);
                min-height: clamp(240px, calc(100vw * 320 / 390), 320px);
                height: clamp(240px, calc(100vw * 320 / 390), 320px);
                max-height: none;
                margin-left: 0;
                border-radius: 0 var(--semiconductor-media-pill-r) var(--semiconductor-media-pill-r) 0;
            }
        }

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

        .media-text-body-block[data-field-key='summary'],
        .media-text-body-block[data-field-key='body'],
        .media-text-key-summary,
        .media-text-key-body {
            max-width: 560px;

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

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            font-weight: 600;
            font-size: clamp(0.8125rem, 0.3vw + 0.72rem, 1.125rem);
            line-height: 1.6;
            letter-spacing: -0.01em;
            color: #354DAD;
            margin: 0 0 0.65rem;

            @media (max-width: 768px) {
                text-align: center;
                margin: 0 0 24px;
            }
            @media (max-width: 430px) {
                font-weight: 600;
                font-size: 12px;
                line-height: 160%;
            }

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

        .media-text-action-wrap {
            justify-content: flex-start;

            @media (max-width: 768px) {
                justify-content: center;
            }
        }

        .media-text-primary-action {
            background:#354DAD;

            &:hover {
                background: #2568F9;

            }
        }
    }

    .about-media-text-section.ICT {
        .about-media-text-wrap.media-text-wrap,
        [class*='-media-text-wrap'].media-text-wrap {
            flex-direction: row-reverse;

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

        /*
         * 미디어 컬럼 — 피그마 Frame 66: 948×600, radius 400·0·0·400. 그라데이션(::after)+이미지.
         * 패딩 제거 후 이미지를 absolute 로 전 영역 채워 둥근 실루엣까지 동일하게 clip.
         */
        .media-text-media {
            --ict-media-pill-r: clamp(48px, calc(100vw * 400 / var(--layout-ref-width)), 400px);
            box-sizing: border-box;
            flex: 1 1 50%;
            align-self: stretch;
            position: relative;
            isolation: isolate;
            display: block;
            overflow: hidden;
            max-width: min(948px, 52vw);
            min-height: clamp(360px, calc(100vw * 600 / var(--layout-ref-width)), 600px);
            padding: 0;
            background: #1c1b20;
            border-radius: var(--ict-media-pill-r) 0 0 var(--ict-media-pill-r);

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 1;
                pointer-events: none;
                border-radius: inherit;
                background: linear-gradient(90deg, rgba(28, 27, 32, 0.6) 0%, rgba(28, 27, 32, 0) 100%);
            }

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

            @media (max-width: 768px) {
                --ict-media-pill-r: 400px;
                align-self: flex-end;
                width: calc(100% - var(--company-narrow-inline));
                max-width: min(560px, 100%);
                margin-left: auto;
                min-height: clamp(240px, calc(100vw * 320 / 390), 320px);
                height: clamp(240px, calc(100vw * 320 / 390), 320px);
                max-height: none;
                border-radius: var(--ict-media-pill-r) 0 0 var(--ict-media-pill-r);

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

        .media-text-copy {
            text-align: right;

            @media (max-width: 768px) {
                text-align: center;
            }
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            font-weight: 600;
            font-size: clamp(0.8125rem, 0.3vw + 0.72rem, 1.125rem);
            line-height: 1.6;
            letter-spacing: -0.01em;
            color: #1B7076;
            margin: 0 0 0.65rem;

            @media (max-width: 768px) {
                text-align: center;
                margin: 0 0 24px;
            }

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

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

        .media-text-body-block[data-field-key='summary'],
        .media-text-body-block[data-field-key='body'],
        .media-text-key-summary,
        .media-text-key-body {
            padding-inline-start: var(--company-content-inset);

          
            @media (max-width: 768px) {
                padding-inline-start: 0;
            }
        }

        .media-text-action-wrap {
            justify-content: flex-end;

            @media (max-width: 768px) {
                justify-content: center;
            }
        }

        .media-text-primary-action {
            background: #1B7076;

            &:hover {
                background: #00ACAC;
            }
        }
    }

    /* ── PHILOSOPHY (DEVELOPER sectionData.philosophy) — Vision / Mission / Values */
    .about-philosophy-section.PHILOSOPHY {
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        --philosophy-inv-sqrt2: 0.7071067811865476;
        --philosophy-diamond-aabb: 280px;
        --philosophy-feature-aabb: 360px;
        /* 행 간 피그마 음수 간격: 다음 행을 위로 당겨 큰 다이아가 겹치도록 */
        --philosophy-row-overlap: clamp(-90px, calc(-100vw * 90 / var(--layout-ref-width)), -40px);

        background: #f8fafb;

        @media (max-width: 768px) {
            --philosophy-diamond-aabb: clamp(100px, 28vw, 132px);
            --philosophy-feature-aabb: clamp(112px, 32vw, 148px);
            --philosophy-row-overlap: 0;
        }

        .about-philosophy-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            background-color: #e6ebf0;
            background-image:
                linear-gradient(180deg, rgba(239, 242, 246, 0) 67.86%, #f8fafb 100%),
                linear-gradient(180deg, #f8fafb 0%, rgba(239, 242, 246, 0) 100%),
                var(--about-philosophy-bg-image, none);
            background-size: 100% 100%, 100% 100%, cover;
            background-position: center;
            background-repeat: no-repeat;
            pointer-events: none;
        }

        .about-philosophy-inner {
            height: 1000px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
            box-sizing: border-box;
            width: 100%;
            margin: 0 auto;
            /* 상·하 0 / 우·좌 풀화면 300px·350px (--layout-ref-width 비례 후 상한) */
            padding: 0 clamp(1rem, calc(100vw * 300 / var(--layout-ref-width)), 300px) 0
                clamp(1rem, calc(100vw * 350 / var(--layout-ref-width)), 350px);

            @media (max-width: 768px) {
                height: auto;
                min-height: 0;
                padding: clamp(2rem, 8vw, 3rem) var(--company-narrow-inline);
                justify-content: flex-start;
                align-items: stretch;
                padding-bottom: 60px;
            }
        }

        /*
         * 장식 이미지: 피그마 정사각(648)·border-radius 80·rotate(-45°)·bg + #162D55·opacity 0.2
         * 섹션 overflow 로 우측이 잘려 삼각/다이아 조각처럼 보이게 배치 (컨테이너는 about-philosophy-inner 기준).
         */
        .about-philosophy-decor {
            position: absolute;
            z-index: 0;
            pointer-events: none;
            width: min(44vw, 648px);
            max-width: min(100vw, 648px);
            aspect-ratio: 1;
            height: auto;
            right: clamp(-5rem, -8vw, -2rem);
            top: 50%;
            bottom: auto;
            margin: 0;
            overflow: hidden;
            border-radius: clamp(36px, 12.35%, 80px);
            box-shadow: 0 8px 40px rgba(22, 45, 85, 0.12);
            background-color: #162d55;
            opacity: 0.2;
            transform: translate(60%, -50%) rotate(-45deg);
            transform-origin: center center;
        }

        .about-philosophy-decor img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        @media (max-width: 768px) {
            .about-philosophy-decor {
                display: none;
            }
        }

        .about-philosophy-list {
            position: relative;
            z-index: 1;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0;

            @media (max-width: 768px) {
                gap: clamp(40px, 10vw, 56px);
            }
        }

        @media (min-width: 769px) {
            .about-philosophy-list > .about-philosophy-row:not(:first-child) {
                margin-top: var(--philosophy-row-overlap);
            }
        }

        .about-philosophy-row {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            column-gap: clamp(6rem, 4vw, 8rem);
            /* rotate(45deg) 시각 높이 ≈ 변 × √2 — 행 간격을 넉넉히 */
            row-gap: clamp(40px, 6vw, 96px);

            @media (max-width: 768px) {
                display: flex;
                flex-direction: column;
                align-items: center;
                grid-template-columns: none;
                justify-items: center;
                text-align: center;
                row-gap: clamp(12px, 3vw, 16px);
            }
        }

         /* Mission 행: 모바일만 column-gap 유지 — 데스크톱은 gap 음수 불가라 0 + copy 음수 마진으로 당김 */
         .about-philosophy-row--featured {
            column-gap: clamp(1rem, 4vw, 2.25rem);

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

        .about-philosophy-diamond-wrap {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            /* 회전 다이아가 위·아래 행과 겹치지 않도록 시각 여유 */
            padding: clamp(28px, 4vw, 52px) clamp(8px, 1.5vw, 12px);

            @media (max-width: 768px) {
                order: 0;
                padding: 0 0 clamp(4px, 1vw, 8px);
                transform: none;
            }
        }

        /* 다이아 지그재그: 1·3행 → 오른쪽, 2행 → 왼쪽 (피그마) */
        @media (min-width: 769px) {
            .about-philosophy-row:nth-child(odd) .about-philosophy-diamond-wrap {
                transform: translateX(clamp(1rem, 4.5vw, 3.25rem));
            }

            .about-philosophy-row:nth-child(even) .about-philosophy-diamond-wrap {
                transform: translateX(clamp(-3.25rem, -8vw, -1.125rem));
            }

            /* Mission: 넓은 화면에서 왼쪽으로 -108px까지(클램프 하한), 769~1024px는 -80px 이상 밀어 텍스트 겹침 방지 */
            .about-philosophy-row--featured:nth-child(even) .about-philosophy-diamond-wrap {
                transform: translateX(clamp(-108px, -11vw, -80px));
            }

            /* grid column-gap 은 음수가 안 먹음 → gap 0 + 텍스트 열 음수 마진으로 간격 “빼기” */
            .about-philosophy-row--featured {
                column-gap: 0;
            }

            .about-philosophy-row--featured .about-philosophy-copy {
                margin-inline-start: clamp(-2.75rem, -5vw, -1rem);
                position: relative;
                z-index: 2;
            }
        }

        /* 기본 다이아: 배경은 ::before 가 패딩 밖·모서리까지 채움 (본체 padding 은 라벨용) */
        .about-philosophy-diamond {
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: calc(var(--philosophy-diamond-aabb) * var(--philosophy-inv-sqrt2));
            height: calc(var(--philosophy-diamond-aabb) * var(--philosophy-inv-sqrt2));
            max-width: calc(var(--philosophy-diamond-aabb) * var(--philosophy-inv-sqrt2));
            max-height: calc(var(--philosophy-diamond-aabb) * var(--philosophy-inv-sqrt2));
            padding: calc(60px * var(--philosophy-inv-sqrt2)) calc(40px * var(--philosophy-inv-sqrt2));
            transform: rotate(45deg);
            border-radius: calc(45px * var(--philosophy-inv-sqrt2));
            box-shadow: 0 8px 40px rgba(22, 45, 85, 0.12);
            background-color: #0a1e3c;
            background-image: none;

            @media (max-width: 768px) {
                padding: calc(28px * var(--philosophy-inv-sqrt2)) calc(18px * var(--philosophy-inv-sqrt2));
                border-radius: calc(24px * var(--philosophy-inv-sqrt2));
                box-shadow: 0 6px 28px rgba(22, 45, 85, 0.12);
            }
        }

        .about-philosophy-diamond::before {
            content: '';
            position: absolute;
            inset: -25%;
            z-index: 0;
            border-radius: inherit;
            transform: rotate(-45deg);
            transform-origin: center center;
            background-position: center;
            background-size: var(--philosophy-diamond-bg-cover, 118% 118%);
            background-repeat: no-repeat;
        }

        /* items[].bgUrl → --philosophy-diamond-item-bg (about.js) */
        .about-philosophy-diamond--has-bg::before {
            background-color: #0a1e3c;
            background-image: var(--philosophy-diamond-item-bg);
        }

        /* bgUrl 없을 때만 폴백 그라데이션 */
        .about-philosophy-diamond:not(.about-philosophy-diamond--has-bg)::before {
            background-color: #0a1e3c;
            background-image: none;
            background: linear-gradient(145deg, #5ba7f0 0%, #2a7fdb 42%, #0f64c0 100%);
        }

        .about-philosophy-row--featured .about-philosophy-diamond:not(.about-philosophy-diamond--has-bg)::before {
            background: linear-gradient(150deg, #0a1224 0%, #162d55 38%, #1e3a5f 72%, #0f2744 100%);
        }

        .about-philosophy-row--featured .about-philosophy-diamond--has-bg::before {
            background-color: #060e1e;
            background-image: var(--philosophy-diamond-item-bg);
        }

        .about-philosophy-diamond::after {
            content: none;
        }

        /* PC/titleL — 풀화면 30px·700·150% (폰트는 .page-content 상속) */
        .about-philosophy-diamond-label {
            position: relative;
            z-index: 2;
            transform: rotate(-45deg);
            font-weight: 700;
            font-size: clamp(14px, calc(100vw * 30 / var(--layout-ref-width)), 30px);
            line-height: 1.5;
            letter-spacing: normal;
            text-transform: none;
            color: #ffffff;
            text-align: center;
            max-width: 6.5em;
            word-break: break-word;

            @media (max-width: 768px) {
                font-weight: 500;
                font-size: 16px;
                line-height: 120%;
                max-width: 5.5em;
                white-space: nowrap;
            }
        }

        .about-philosophy-row--featured .about-philosophy-diamond {
            width: calc(var(--philosophy-feature-aabb) * var(--philosophy-inv-sqrt2));
            height: calc(var(--philosophy-feature-aabb) * var(--philosophy-inv-sqrt2));
            max-width: calc(var(--philosophy-feature-aabb) * var(--philosophy-inv-sqrt2));
            max-height: calc(var(--philosophy-feature-aabb) * var(--philosophy-inv-sqrt2));
            z-index: 1;
            background-color: #060e1e;
            background-image: none;

            @media (max-width: 768px) {
                z-index: auto;
            }
        }

        /* PC/DisplayS — Mission 큰 다이아 라벨만 풀화면 40px·700·150% */
        .about-philosophy-row--featured .about-philosophy-diamond-label {
            font-size: clamp(16px, calc(100vw * 40 / var(--layout-ref-width)), 40px);

            @media (max-width: 768px) {
                font-weight: 500;
                font-size: 18px;
                line-height: 160%;
                white-space: nowrap;
            }
        }

        .about-philosophy-copy {
            min-width: 0;
            max-width: min(800px, 100%);
            text-align: left;

            @media (max-width: 768px) {
                width: 100%;
                max-width: none;
                text-align: center;
                overflow-wrap: normal;
                padding-inline: 0;
            }
        }

        /* PC/titleL — 본문 인접 제목(h3), 풀화면 40px·700·150% (#0F64C0) */
        .about-philosophy-heading {
            margin: 0 0 clamp(0.65rem, 1.2vw, 1rem);
            font-weight: 700;
            font-size: clamp(22px, calc(100vw * 36 / var(--layout-ref-width)), 36px);
            line-height: 1.5;
            letter-spacing: normal;
            color: #0f64c0;
            white-space: pre-line;

            @media (max-width: 768px) {
                font-weight: 500;
                font-size: 24px;
                line-height: 160%;
                margin-top: 20px;
                margin-bottom: 20px;
            }
        }

        /* Values(마지막 행) 제목만 — 모바일 2줄 줄바꿈 (PC 변경 없음) */
        @media (max-width: 768px) {
            .about-philosophy-list > .about-philosophy-row:last-child .about-philosophy-heading {
                margin-inline: auto;
                max-width: 10em;
                text-align: center;
                word-break: keep-all;
                overflow-wrap: normal;
            }
        }

        /* PC/BoldyL — 풀화면 18px·400·160% (#1C1B20) */
        .about-philosophy-body {
            margin: 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 1.6;
            letter-spacing: normal;
            color: #1c1b20;
            word-break: break-all;

            @media (max-width: 768px) {
                font-size: 12px;
                line-height: 160%;
                overflow-wrap: break-word;
            }
        }
    }

    /* PC 스크롤 reveal — ABOUT · PHILOSOPHY · SEMICONDUCTOR · ICT (about.js) */
    @media (min-width: 769px) {
        .about-media-text-section.ABOUT .media-text-media,
        .about-media-text-section.ABOUT .media-text-copy > *,
        .about-media-text-section.SEMICONDUCTOR .media-text-media,
        .about-media-text-section.SEMICONDUCTOR .media-text-copy > *,
        .about-media-text-section.ICT .media-text-media,
        .about-media-text-section.ICT .media-text-copy > *,
        .about-philosophy-section.PHILOSOPHY .about-philosophy-diamond-wrap,
        .about-philosophy-section.PHILOSOPHY .about-philosophy-heading,
        .about-philosophy-section.PHILOSOPHY .about-philosophy-body {
            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;
        }

        .about-media-text-section.ABOUT.is-about-media-in-view .media-text-media {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--about-reveal-delay, 0ms);
        }

        .about-media-text-section.ABOUT.is-about-text-in-view .media-text-copy > *,
        .about-media-text-section.SEMICONDUCTOR.is-in-view .media-text-media,
        .about-media-text-section.SEMICONDUCTOR.is-in-view .media-text-copy > *,
        .about-media-text-section.ICT.is-in-view .media-text-media,
        .about-media-text-section.ICT.is-in-view .media-text-copy > *,
        .about-philosophy-section.PHILOSOPHY.is-in-view .about-philosophy-diamond-wrap,
        .about-philosophy-section.PHILOSOPHY.is-in-view .about-philosophy-heading,
        .about-philosophy-section.PHILOSOPHY.is-in-view .about-philosophy-body {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--about-reveal-delay, 90ms);
        }
    }

    @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
        .about-media-text-section.ABOUT .media-text-media,
        .about-media-text-section.ABOUT .media-text-copy > *,
        .about-media-text-section.SEMICONDUCTOR .media-text-media,
        .about-media-text-section.SEMICONDUCTOR .media-text-copy > *,
        .about-media-text-section.ICT .media-text-media,
        .about-media-text-section.ICT .media-text-copy > *,
        .about-philosophy-section.PHILOSOPHY .about-philosophy-diamond-wrap,
        .about-philosophy-section.PHILOSOPHY .about-philosophy-heading,
        .about-philosophy-section.PHILOSOPHY .about-philosophy-body {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            will-change: auto;
        }
    }
}

/* ========================================
   연혁 HISTORY
   타임라인 (연도당 사진 1열 + 월|구분선|본문)
   ======================================== */
body.company-history {

    .history-hero.SUBJECT{
        @media (max-width: 768px) {
            margin-top: 60px;
        }
    }
    /* 연혁 본문 가로 풀너비 — 텍스트 시작은 `--company-content-inset`(1320 밴드).
       이미지 열(image-right)은 PC에서 뷰포트 오른쪽에 딱 붙음(우측 패딩 0). */
    .main #companyHistoryContent.page-content {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .history-timeline {
        --history-photo-w: clamp(280px, 40vw, 612px);
        --history-text-photo-gap: clamp(25px, 4vw, 50px);
        width: 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
        background: #fafafa;
        /* top | right | bottom | left */
        padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem) var(--company-content-inset);

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

        @media (max-width: 430px) {
           padding-top: 0;
        }

       
    }

    .history-timeline-inner {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .history-timeline-year {
        width: 100%;

        .timeline-text-list {
            flex: 1 1 auto;
            min-width: 0;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .timeline-image-list {
            flex: 0 0 var(--history-photo-w);
            display: flex;
            flex-direction: column;
            align-self: stretch;
            min-height: 0;
            list-style: none;
            margin: 0;
            padding: 0;

            @media (min-width: 769px) {
                height: 100%;
            }

            @media (max-width: 768px) {
                position: static;
                width: 100%;
                flex: 0 0 auto;
                max-width: 100%;
                align-self: stretch;
            }
        }

        &.history-timeline-year--no-photo {
            .timeline-image-list { display: none; }
            .timeline-text-list {
                flex: 1 1 100%;
                max-width: 100%;
                padding-left: 0;
                padding-right: 0;
            }
        }

        @media (min-width: 769px) {
            &.history-timeline-year--image-right:not(.history-timeline-year--no-photo) {
                .timeline-text-list {
                    width: 100%;
                    box-sizing: border-box;
                    padding-left: 0;
                    padding-right: calc(var(--history-photo-w) + var(--history-text-photo-gap));
                }
                .timeline-image-list {
                    position: absolute;
                    top: 0; right: 0; bottom: 29px;
                    width: var(--history-photo-w);
                    flex: none;
                    align-self: auto;
                }
            }

            &.history-timeline-year--image-left:not(.history-timeline-year--no-photo) {
                .timeline-text-list {
                    width: 100%;
                    box-sizing: border-box;
                    padding-right: 0;
                    padding-left: calc(var(--history-photo-w) + var(--history-text-photo-gap));
                }
                .timeline-image-list {
                    position: absolute;
                    top: 0; left: 0; bottom: 0;
                    width: var(--history-photo-w);
                    flex: none;
                    align-self: auto;
                }
            }
        }

        @media (max-width: 768px) {
            .timeline-image-list {
                display: none;
            }

            &.history-timeline-year--image-right .timeline-text-list,
            &.history-timeline-year--image-left .timeline-text-list {
                padding-left: clamp(0.875rem, 3.75vw, 5rem);
                padding-right: clamp(0.875rem, 3.75vw, 5rem);
            }

            &.history-timeline-year--image-left .timeline-image-list {
                order: -1;
            }
        }
    }

    .history-timeline-row {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        min-height: 0;
        box-sizing: border-box;

        @media (max-width: 768px) {
            flex-direction: column;
            align-items: stretch;
            gap: 1.25rem;
        }
    }

    .history-timeline-photo {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin: 0;
        padding: 0;

        @media (min-width: 769px) {
            flex: 1 1 100%;
            height: 100%;
            min-height: 100%;
        }

        @media (max-width: 768px) {
            min-height: 200px;
        }
    }

    .history-timeline-photo-inner {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        background: #e8ecf1;
        display: flex;
        align-items: stretch;
        justify-content: stretch;

        @media (min-width: 769px) {
            flex: 1 1 100%;
            height: 100%;
            min-height: 100%;
        }

        img {
            display: block;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: none;
            object-fit: fill;
            object-position: center;

            @media (max-width: 768px) {
                height: auto;
                max-height: 100%;
                object-fit: cover;
            }
        }
    }

    /* image-right: 뷰포트 우측에 붙는 바깥쪽은 직각, 텍스트 쪽만 라운드 */
    .history-timeline-year--image-right .history-timeline-photo-inner {
       /*  
        border-radius: 10px 0 0 10px;
        @media (max-width: 768px) {
            border-radius: 10px;
        } */
    }

    .history-timeline-year--image-left .history-timeline-photo-inner {
        /* 
        border-radius: 10px;
        @media (max-width: 768px) {
            border-radius: 10px;
        } */
    }

    /* 연도 텍스트 블록 — 좌측 패딩 없음(1320 밴드 시작선과 연도 숫자 정렬 일치) */
    .timeline-text-list > li.public-list-group.history-timeline-year-block {
        padding: 20px 20px 49px 0;
        box-sizing: border-box;
    }

    /* 연도 숫자(연도 블록 헤더) — 큰 타이틀 */
    .history-timeline-year-block {
        > .public-list-group-header {
            font-weight: 700;
            font-size: clamp(1.75rem, 2.5vw + 1.25rem, 48px);
            line-height: 150%;
            color: #18317c;
            letter-spacing: -0.03em;
            margin: 0 0 1.25rem;

            @media (max-width: 430px) {
                font-weight: 600;
                font-size: clamp(32px, calc(32px + (100vw - 390px) * 2 / 110), 34px);
                line-height: 140%;
            }
        }

        > .public-list-group-items {
            display: flex;
            flex-direction: column;
            gap: clamp(1rem, 2vw, 1.5rem);
            padding: 0;
            /* 월 라벨 열 고정 — 영문 월명(September 등) 길이와 무관하게 세로선 정렬 */
            --history-month-col: clamp(80px, calc(100vw * 180 / var(--layout-ref-width)), 180px);

            @media (max-width: 768px) {
                padding-left: 0;
                --history-month-col: clamp(72px, 22vw, 100px);
            }
        }
    }

    /* 월 행: 월 라벨 + 세로선 + 본문 — grid + baseline 으로 첫 줄 베이스라인 정렬 */
    .history-timeline-month {
        display: grid;
        grid-template-columns: var(--history-month-col, 150px) minmax(0, 1fr);
        column-gap: 28px;
        align-items: baseline;
        margin: 0;
        padding: 0;

        > .public-list-group-header {
            justify-self: end;
            width: 100%;
            min-width: 0;
            margin: 0;
            padding: 0;
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 40 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #1c1b20;
            text-align: right;
            white-space: nowrap;
        }

        > .public-list-group-items {
            min-width: 0;
            margin: 0;
            padding: 0 0 0 2.125rem;
            border-left: 1px solid #d1d5db;

            @media (max-width: 768px) {
                padding-left: 1rem;
                border-left: 1px solid #74757E;
            }
        }
    }

    .history-timeline-text-item {
        margin: 0 0 0.5rem;
        @media (max-width: 430px) {
            margin: 0 0 16px;
        }
        &:last-child { margin-bottom: 0; }

        .public-list-item-content { display: block; }

        .public-list-item-text {
            /* 피그마 대안: font-size 38px */
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            color: #1c1b20;
            margin: 0;

            p {
                margin: 0 0 0.35em;
                &:last-child { margin-bottom: 0; }
            }
        }

        /* TEXT label 이 색이면(parseHistoryTextColorLabel) — 600 + 동일 상한 16px clamp */
        .public-list-item-text.history-timeline-item-text--accent {
            font-weight: 600;
            font-size: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 16px);
            line-height: 160%;
        }
    }

    /* PC 연도 블록 스크롤 reveal (history.js IntersectionObserver) */
    @media (min-width: 769px) {
        .history-timeline-year {
            --history-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
            --history-reveal-duration: 0.85s;

            .history-timeline-year-block > .public-list-group-header,
            .history-timeline-month,
            .history-timeline-year-block > .public-list-group-items > .history-timeline-text-item,
            .history-timeline-photo {
                opacity: 0;
                transform: translateY(28px);
                transition:
                    opacity var(--history-reveal-duration) var(--history-reveal-ease),
                    transform var(--history-reveal-duration) var(--history-reveal-ease);
                will-change: opacity, transform;
            }

            &.is-in-view {
                .history-timeline-year-block > .public-list-group-header,
                .history-timeline-month,
                .history-timeline-year-block > .public-list-group-items > .history-timeline-text-item,
                .history-timeline-photo {
                    opacity: 1;
                    transform: translateY(0);
                    transition-delay: var(--history-reveal-delay, 90ms);
                }
            }
        }
    }

    @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
        .history-timeline-year .history-timeline-year-block > .public-list-group-header,
        .history-timeline-year .history-timeline-month,
        .history-timeline-year .history-timeline-year-block > .public-list-group-items > .history-timeline-text-item,
        .history-timeline-year .history-timeline-photo {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            will-change: auto;
        }
    }
}

/* ========================================
   인증서 CERTIFICATES
   LIST 필터·검색·그리드·페이징 (SUBJECT 히어로는 상단 .page-content 공통)
   ======================================== */
body.company-certificates .page-content {

    /** 불규칙한 타이틀*/
    section.certificates-hero[class*='-hero'] [class*='-hero-inner'] > div {
        color: #162D55;
    }

    /* ── DEVELOPER · stats (4열 통계 바) — Figma 1920×236, padding 40 440 80 */
    .certificates-stats-section {
        display: flex;
        flex-direction: row;
        align-items: center;
        align-self: stretch;
        flex: none;
        width: 100vw;
        max-width: 100vw;
        min-height: clamp(160px, calc(100vw * 236 / var(--layout-ref-width)), 236px);
        margin-inline-start: calc(50% - 50vw);
        box-sizing: border-box;
        padding-block: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px)
            clamp(40px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
        padding-inline: clamp(var(--company-inline-gutter), calc(100vw * 440 / var(--layout-ref-width)), 440px);
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
            linear-gradient(360deg, rgba(15, 100, 192, 0.14) 0%, rgba(255, 255, 255, 0.14) 60%);

        .certificates-stats-inner {
            flex: 1 1 auto;
            align-self: stretch;
            width: 100%;
            min-width: 0;
            margin: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .certificates-stats-grid {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0;
            align-items: center;
        }

        .certificates-stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, 1.2vw, 16px);
            text-align: center;
            padding: clamp(12px, 2vw, 20px) clamp(8px, 1.5vw, 16px);
            border-right: 1px solid rgba(22, 45, 85, 0.14);

            &:last-child {
                border-right: none;
            }
        }

        /* 라벨 — M/Button 18px / 600 / #0F64C0 */
        .certificates-stat-label {
            margin: 0;
            font-weight: 600;
            font-size: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #0f64c0;
            letter-spacing: -0.02em;
            word-break: keep-all;
        }

        /* 숫자 — PC/DisplayS 48px / 700 / #162D55 */
        .certificates-stat-value {
            margin: 0;
            display: flex;
            align-items: baseline;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.2em;
            font-variant-numeric: tabular-nums;
        }

        .certificates-stat-num {
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            color: #162d55;
            letter-spacing: -0.03em;
            margin-right: 10px;

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

        /* 단위 — PC/titleM 32px / 600 / #2C4777 */
        .certificates-stat-suffix {
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #2c4777;
            letter-spacing: -0.02em;

            @media (max-width: 430px) {
                font-weight: 600;
                font-size: 18px;
            }
        }

        @media (max-width: 768px) {
            min-height: auto;
            padding-block: clamp(28px, 5vw, 40px) clamp(36px, 6vw, 56px);
            padding-inline: var(--company-narrow-inline);
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(360deg, rgba(15, 100, 192, 0.14) 0%, rgba(255, 255, 255, 0.14) 60%);
            .certificates-stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: clamp(20px, 4vw, 32px);
            }

            .certificates-stat-item {
                border-right: none;
                padding-bottom: clamp(16px, 3vw, 24px);

                &:nth-child(odd) {
                    border-right: 1px solid #FFFFFF;
                }

                &:nth-last-child(-n + 2) {
                    border-bottom: none;
                    padding-bottom: clamp(12px, 2vw, 20px);
                }
            }
        }

    }

    /* ── LIST */
    .certificates-list-section.LIST {
        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;
        box-sizing: border-box;

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

    /* 필터 바 */
    .cert-filter-bar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: clamp(20px, 3vw, 36px);

        @media (min-width: 769px) {
            scroll-margin-top: calc(var(--public-header-height) + 60px);
        }

        /* 탭 + 검색이 겹치기 시작하는 ~900px 이하에서 세로 스택 전환 */
        @media (max-width: 900px) {
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        @media (max-width: 768px) {
            align-items: stretch;
            width: 100%;
            gap: 0;
        }
    }

    .cert-filter-tabs {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        background: #fff;
        border: 1px solid #d8dce1;
        border-radius: 30px;
        flex-wrap: nowrap;

        @media (max-width: 768px) {
            width: 100%;
            box-sizing: border-box;
            padding: 5px 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

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

    .cert-filter-btn {
        box-sizing: border-box;
        cursor: pointer;
        border: none;
        background: transparent;
        color: #2c4777;
        font-family: inherit;
        font-weight: 600;
        font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
        line-height: 1.6;
        padding: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 16px);
        border-radius: 30px;
        transition: color 0.15s ease, background 0.15s ease;
        white-space: nowrap;
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4px;
        min-height: clamp(36px, calc(100vw * 44 / var(--layout-ref-width)), 44px);

        @media (max-width: 768px) {
            flex: 1 1 0;
            min-width: 0;
            min-height: 40px;
            padding: 8px 12px;
            justify-content: center;
        }

        &:hover:not(.cert-filter-btn--active) {
            color: #2c4777;
            background: rgba(220, 235, 249, 0.45);
        }

        &.cert-filter-btn--active {
            background: #162d55;
            color: #fff;
            font-weight: 600;
            border-radius: 30px;
            padding: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px)
                clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px)
                clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px)
                clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            min-height: clamp(36px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
            min-width: clamp(96px, calc(100vw * 124 / var(--layout-ref-width)), 124px);

            @media (max-width: 768px) {
                padding: 10px 10px 10px 18px;
                min-width: 0;
            }

            &:hover {
                background: #0f2347;
                color: #fff;
            }
        }
    }

    .cert-filter-btn__label {
        flex: 0 1 auto;
        font: inherit;
        letter-spacing: inherit;
        color: inherit;
    }

    .cert-filter-btn--active .cert-filter-btn__label {
        font-weight: 600;
        font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
        line-height: 1.6;
        color: #fff;
    }

    .cert-filter-btn__count {
        flex: 0 0 auto;
        box-sizing: border-box;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: clamp(28px, calc(100vw * 36 / var(--layout-ref-width)), 36px);
        min-height: clamp(17px, calc(100vw * 19 / var(--layout-ref-width)), 19px);
        padding: 0 clamp(6px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
        border-radius: 20px;
        font-family: inherit;
        font-weight: 600;
        font-size: clamp(13px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
        background: #dcebf9;
        color: #2c4777;
    }

    .cert-filter-btn--active .cert-filter-btn__count {
        background: #2c4777;
        color: #fff;
    }

    /* 검색 */
    .cert-search-wrap {
        display: none;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
       /*  display: flex; */
        flex-direction: row;
        align-items: center;
        gap: clamp(12px, 2vw, 24px);
        padding: clamp(8px, 1.2vw, 12px) clamp(12px, 1.5vw, 16px);
        width: clamp(200px, 22vw, 312px);
        height: clamp(42px, 5.5vw, 48px);
        background: #fff;
        border: 1px solid #c4c7d0;
        border-radius: 30px;

        /* 900px 이하: 스택 전환되므로 position 해제 */
        @media (max-width: 900px) {
            position: static;
            transform: none;
            width: clamp(240px, 60vw, 312px);
            height: 44px;
            padding: 10px 14px;
            gap: 14px;
        }

        @media (max-width: 768px) {
            width: 100%;
            max-width: 312px;
            height: 42px;
            padding: 8px 14px;
        }
    }

    .cert-search-icon {
        display: flex;
        flex-shrink: 0;
        color: #9ca3af;
    }

    .cert-search-input {
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.875rem;
        color: #111827;
        width: 100%;
        min-width: 0;

        &::placeholder { color: #9ca3af; }
    }

    /* 그리드 — 풀화면(1920) 기준 row 48px · column 24px */
    .cert-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        row-gap: clamp(24px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
        column-gap: clamp(12px, calc(100vw * 24 / var(--layout-ref-width)), 24px);

        @media (max-width: 1200px) {
            grid-template-columns: repeat(4, 1fr);
        }

        @media (max-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
            row-gap: clamp(16px, 4vw, 24px);
            column-gap: 10px;
        }
    }

    /* 카드 */
    .cert-card {
        background: transparent;
        border-radius: 12px;
        transition: transform 0.2s ease;
        display: flex;
        flex-direction: column;
        gap: 28px;
        cursor: pointer;

        &:hover {
            transform: translateY(-2px);

            @media (max-width: 768px) {
                transform: none;
            }

            .cert-card-thumb {
                &::before, &::after { opacity: 1; }
                &::after { transform: translate(-50%, -50%) scale(1); }
            }
        }

        /* 썸네일 */
        .cert-card-thumb {
            position: relative;
            width: 100%;
            padding-bottom: 133.33%; /* 3:4 portrait */
            overflow: hidden;
            flex-shrink: 0;
            box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
            border-radius: 8px;
            &.cert-card-thumb--empty { background: #e5e7eb; }

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

            /* 호버 — 반투명 오버레이 */
            &::before {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 2;
                background: rgba(0, 0, 0, 0.18);
                opacity: 0;
                transition: opacity 0.2s ease;
                pointer-events: none;
            }

            /* 호버 — 돋보기 버튼 (피그마 Frame 234: 52×52, border-radius 10, #EFF2F6) */
            &::after {
                content: '';
                position: absolute;
                width: 52px;
                height: 52px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.82);
                z-index: 3;
                background-color: #eff2f6;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23162D55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: center;
                background-size: 22px 22px;
                border-radius: 10px;
                box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
                opacity: 0;
                transition: opacity 0.2s ease, transform 0.2s ease;
                pointer-events: none;
            }
        }

        /* 뱃지 */
        .cert-card-badge {
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 5;
            font-weight: 400;
            font-size: clamp(12px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
            line-height: 160%;
            padding: 4px clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            border-radius: 20px;
            letter-spacing: 0.02em;
            pointer-events: none;

            &.cert-card-badge--patent { background: #18317C; color: #fff; }
            &.cert-card-badge--cert   { background: #0f64c0; color: #fff; }
        }

        /* 바디 */
        .cert-card-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
            background: transparent;

            .cert-card-date {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
                line-height: 160%;
                color: #47454F;
            }

            .cert-card-title {
                font-size: clamp(12px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
                font-weight: 600;
                color: #1c1b20;
                line-height: 160%;
                margin: 0;
                word-break: break-all;
                transition: color 0.2s ease;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }

        &:hover .cert-card-body .cert-card-title,
        &:focus-within .cert-card-body .cert-card-title {
            color: #0f64c0;
        }
    }

    /* 빈 결과 */
    .cert-grid-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: clamp(40px, 6vw, 72px) 0;
        font-size: 0.9375rem;
        color: #9ca3af;
    }

    /* 페이징 — PC: 번호 / 모바일: 더 보기 (배경 없음 · board-pagination 동일) */
    .cert-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(4px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
        margin-top: clamp(32px, 5vw, 56px);
        flex-wrap: wrap;
        background: transparent;

        &.cert-pagination--load-more {
            width: 100%;
        }

        .cert-load-more-btn {
            display: none;
            box-sizing: border-box;
            width: 100%;
            min-height: 48px;
            padding: 12px 24px;
            border: none;
            border-radius: 999px;
            background: #e8eef5;
            color: #2c4777;
            font-family: inherit;
            font-weight: 600;
            font-size: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            text-align: center;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;

            &:hover {
                background: #dcebf9;
                color: #2c4777;
            }

            &:focus-visible {
                outline: 2px solid #2563eb;
                outline-offset: 2px;
            }
        }

        &.cert-pagination--load-more .cert-load-more-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .cert-page-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            min-width: 36px;
            height: 36px;
            padding: 0 8px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: #47454f;
            font-family: inherit;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;

            &:hover:not(:disabled):not(.cert-page-btn--active) {
                background: #dcebf9;
                color: #2c4777;
            }

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

            &.cert-page-btn--nav {
                min-width: 28px;
                padding: 0 6px;
                color: #74757e;

                .cert-page-btn__chevron {
                    display: block;
                    width: 8px;
                    height: 14px;
                    flex-shrink: 0;
                }

                .cert-page-btn__chevron--next {
                    transform: scaleX(-1);
                }

                &:hover:not(:disabled) {
                    background: transparent;
                    color: #162d55;
                }
            }

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

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

/* ── 인증서 라이트박스  */
body.company-certificates {
    .cert-lightbox {
        position: fixed;
        inset: 0;
        z-index: 9000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(16px, 4vw, 40px);
        box-sizing: border-box;
        opacity: 0;
        transition: opacity 0.22s ease;
        pointer-events: none;

        &.cert-lightbox--open {
            opacity: 1;
            pointer-events: auto;
        }

        .cert-lightbox-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(10, 14, 26, 0.78);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            cursor: zoom-out;
        }

        .cert-lightbox-inner {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            max-width: min(680px, 100%);
            max-height: 90dvh;
            transform: scale(0.94);
            transition: transform 0.22s ease;
            z-index: 1;
        }

        &.cert-lightbox--open .cert-lightbox-inner {
            transform: scale(1);
        }

        .cert-lightbox-img {
            display: block;
            max-width: 100%;
            max-height: calc(90dvh - 96px);
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
            user-select: none;
        }

        .cert-lightbox-caption {
            font-size: 0.875rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.82);
            text-align: center;
            margin: 0;
            max-width: 100%;
            word-break: keep-all;
            line-height: 1.5;
        }

        .cert-lightbox-counter {
            font-size: 0.75rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.6);
            letter-spacing: 0.04em;
            font-variant-numeric: tabular-nums;
        }

        /* ── 닫기 버튼: 화면 우상단 고정 */
        .cert-lightbox-close {
            position: fixed;
            top: clamp(16px, 2.5vw, 28px);
            right: clamp(16px, 2.5vw, 28px);
            z-index: 3;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 999px;
            background: transparent;
            color: #fff;
            cursor: pointer;
            transition: background 0.15s ease, transform 0.15s ease;
            flex-shrink: 0;
            opacity: 0.85;

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

        /* ── 좌/우 네비게이션: SVG 화살표만 (원형 배경 없음) */
        .cert-lightbox-nav {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            border: none;
            border-radius: 0;
            background: transparent;
            color: #fff;
            cursor: pointer;
            transition: opacity 0.15s ease, transform 0.15s ease;
            opacity: 0.85;

            &:hover {
                opacity: 1;
            }

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

            &:active {
                transform: translateY(-50%) scale(0.94);
            }
        }

        .cert-lightbox-prev {
            left: clamp(16px, 13.542vw, 260px);
        }
        .cert-lightbox-next {
            right: clamp(16px, 13.542vw, 260px);
        }

        @media (max-width: 600px) {
            .cert-lightbox-nav {
                width: 40px;
                height: 40px;
            }
            .cert-lightbox-nav svg {
                width: 22px;
                height: 22px;
            }
            .cert-lightbox-close {
                width: 40px;
                height: 40px;
            }
        }
    }
}

/* ========================================
   Contact — 연락처 본문 (이미지 레이아웃)
   - .contact-info-section : 메인(지도+정보) + 지사 카드 grid
   ======================================== */
body.company-contact .page-content {

    section.contact-info-section {
        /* 가로 패딩은 section 이 아니라 .contact-info-content 안쪽에 — 헤더/푸터와 동일 구조 */
        padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 8vw, 96px);
        box-sizing: border-box;
        @media (max-width: 768px) {
            padding: 0;
        }
        /* header.css / footer.css 의 .header-container / .site-footer__inner 와 동일 규칙 */
        .contact-info-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;
            display: flex;
            flex-direction: column;
            gap: clamp(42px, 6vw, 52px);
        }

        /* ── 메인: 지도 + 회사 정보 ────────── */
        .contact-main {
            display: grid;
            /* 자식 (map / detail) 각자 배경을 갖고 있어서 컨테이너 배경 없음 — gap 도 0 으로 두고 map · detail 이 붙어 한 장의 카드처럼 보이게 */
            /* minmax(0, ...) 로 트랙 강제 → 콘텐츠가 트랙 밖으로 못 넘어감 */
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
            /* 데스크탑: 시각적 간격은 .contact-main__detail 의 padding-inline-start 가 대체 */
            gap: 0;
            /* 데스크탑 고정 높이 712px — map / detail 모두 grid stretch 로 동일 높이로 맞춰짐 */
            height: 712px;
            /* stretch: 지도와 detail 칼럼이 같은 높이를 갖도록 */
            align-items: stretch;

            @media (max-width: 900px) {
                grid-template-columns: minmax(0, 1fr);
                /* 단일 컬럼 세로 간격 (모바일은 detail padding-inline-start 가 무의미하므로 gap 으로 처리) */
                gap: clamp(24px, 5vw, 48px);
                /* 모바일: 단일 컬럼이라 map · detail 각자 높이로 자유 → 컨테이너는 auto */
                height: auto;
            }
        }

        .contact-main__map {
            box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
            margin: 0;
            width: 100%;
            min-width: 0;
            /* 높이는 grid stretch 로 detail 칼럼에 맞춤 (옆 칼럼과 동일 높이) */
            min-height: 320px;
            overflow: hidden;
            background: #eef2f7;
            border: 1px solid #e2e8f0;
            border-radius: 24px 0px 0px 24px;
            /* 모바일: 1단 → stretch 대상이 없으니 명시 높이 */
            @media (max-width: 900px) {
                height: clamp(220px, 56vw, 320px);
                border-radius: 20px;
                min-height: 0;
            }
        }
        .contact-main__map-canvas {
            width: 100%;
            height: 100%;
        }
        .contact-main__map-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            font-size: 0.875rem;
            color: #94a3b8;
        }

        .contact-main__detail {
            box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
            background-color: #FFFFFF;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* 1920 기준 상하 64 / 좌 112 (map 과의 시각적 여백을 gap 대신 패딩으로 흡수) / 우 36 — calc 비율식 + clamp 로 작은 화면에서 축소 */
            padding-block: clamp(16px, calc(100vw * 64 / var(--layout-ref-width)), 64px);
            padding-inline-start: clamp(40px, calc(100vw * 112 / var(--layout-ref-width)), 112px);
            padding-inline-end: clamp(12px, calc(100vw * 36 / var(--layout-ref-width)), 36px);
            /* map 의 왼쪽 둥근 모서리(`24px 0 0 24px`) 와 대칭 — 우측 두 모서리만 둥글게 */
            border-radius: 0 24px 24px 0;
            cursor: pointer;
            transition: background-color 0.2s ease;

            @media (max-width: 768px) {
                cursor: default;


                &:focus-visible {
                    outline: none;
                }
            }

            /* 모바일: 1단 전환 → map 과 떨어진 별도 카드라 좌측 큰 패딩 불필요 → 좌우 균형 있게 */
            @media (max-width: 900px) {
                border-radius: 20px;
                padding-inline-start: clamp(16px, 4vw, 32px);
                padding-inline-end: clamp(16px, 4vw, 32px);
            }

            @media (max-width: 768px) {
                padding: 28px;
            }
        }

        /* 영문 긴 주소가 grid track 을 강제로 늘리지 않도록 줄바꿈 허용 */
        .contact-row__line,
        .contact-branch__row-value {
            overflow-wrap: anywhere;
        }

        .contact-main__eyebrow {
            margin: 0 0 clamp(4px, 0.5vw + 0.15rem, 8px);
            font-weight: 600;
            font-size: clamp(14px, 0.8125rem + 0.55vw, 18px);
            line-height: 140%;
            color: #0F64C0;

            @media (max-width: 768px) {
                font-size: clamp(12px, 0.8125rem + 0.55vw, 14px);
                line-height: 160%;
            }
        }

        .contact-main__title {
            margin: 0 0 clamp(20px, 2.4vw, 32px);
            font-weight: 600;
            font-size: clamp(18px, calc(18px + (100vw - 390px) * 18 / 1530), 36px);
            line-height: 160%;
            color: #1C1B20;
            letter-spacing: -0.01em;
            padding-bottom: clamp(16px, 1.5vw, 24px);
            border-bottom: 1px solid #C4C7D0;
        }

        .contact-main__rows {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(16px, calc(16px + (100vw - 390px) * 8 / 1530), 24px);
            padding-top: clamp(12px, 1.2vw + 0.35rem, 20px);
        }

        /* row 구조: [icon] [label] [lines] — 3-컬럼 그리드. 각 컬럼은 align-items: start 로 첫 줄 베이스라인 정렬 */
        .contact-row {
            display: grid;
            grid-template-columns: clamp(26px, 4.5vw, 32px) clamp(96px, 12vw, 140px) minmax(0, 1fr);
            column-gap: clamp(12px, 1.2vw, 20px);
            align-items: start;

            /* 모바일: icon | (label · lines 같은 컬럼에 자연 흐름) — 좁은 화면에서 label 컬럼이 너무 좁아지면 lines 가 꺾이므로 라벨을 lines 위에 쌓는 2-컬럼 */
            @media (max-width: 600px) {
                grid-template-columns: clamp(26px, 4.5vw, 32px) minmax(0, 1fr);
                row-gap: 4px;

                .contact-row__lines {
                    grid-column: 2;
                }
            }
        }
        .contact-row__icon {
            width: clamp(24px, 4.5vw, 32px);
            height: clamp(24px, 4.5vw, 32px);
            border-radius: 20%;
            background: #DCEBF9;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #18317C;
            svg {
                width: clamp(14px, 0.9rem + 0.55vw, 18px);
                height: clamp(14px, 0.9rem + 0.55vw, 18px);
            }
        }
        /* label 전용 박스 — icon (32px) 과 시각적으로 같은 줄에 맞도록 min-height + 가운데 정렬 */
        .contact-row__body {
            display: flex;
            align-items: center;
            min-height: clamp(26px, 4.5vw, 32px);
            min-width: 0;
        }
        .contact-row__label {
            font-weight: 600;
            font-size: clamp(14px, 0.8125rem + 0.55vw, 18px);
            line-height: 140%;
            color: #162D55;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(12px, 0.8125rem + 0.55vw, 14px);
                line-height: 160%;
            }
        }
        .contact-row__lines {
            display: flex;
            flex-direction: column;
            gap: 4px;
            /* 단일 라인일 때 icon · label 과 수직 가운데로 맞추기 위해 min-height 매칭 + center */
            min-height: clamp(26px, 4.5vw, 32px);
            justify-content: center;
        }
        .contact-row__line {
            font-size: clamp(14px, 0.8125rem + 0.55vw, 18px);
            color: #47454F;
            font-weight: 400;
            line-height: 160%;
            word-break: keep-all;

            @media (max-width: 768px) {
                font-size: clamp(12px, 0.8125rem + 0.55vw, 14px);
                line-height: 160%;
            }
        }

        .contact-main__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            margin-top: clamp(24px, 3vw, 36px);

            @media (max-width: 768px) {
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: stretch;
                gap: 12px;
            }
        }
        .contact-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: clamp(14px, 1rem + 1vw, 24px);
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            font-size: clamp(12px, 0.8125rem + 0.45vw, 16px);
            line-height: 120%;
            white-space: nowrap;
        }

        /* primary/ghost 공통 형태 — 다국어 텍스트 길이에 맞춰 폭 가변 */
        .contact-action--primary,
        .contact-action--ghost {
            width: auto;
            max-width: 100%;
            min-height: clamp(42px, 6vw + 1.5rem, 48px);
            height: auto;
            padding-inline: clamp(20px, 2vw, 32px);
            padding-block: 12px;

            @media (max-width: 768px) {
                width: 100%;
            }
        }
        .contact-action--primary {
            background: #0F64C0;
            color: #ffffff;
            border: 1px solid #0F64C0;
            transition: background 0.18s ease;

            &:hover {
                background: #162D55;
            }
        }
        .contact-action--ghost {
            background: #ffffff;
            color: #0F64C0;
            border: 1px solid #0F64C0;
            transition: background 0.18s ease, color 0.18s ease;

            &:hover {
                background: #DCEBF9;
                color: #0F64C0;
            }
        }

        /* ── 지사 카드 grid ────────────────── */
        .contact-branches {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: clamp(14px, 2vw, 20px);
        }
        .contact-branch {
            background: #ffffff;
            display: flex;
            flex-direction: column;
            padding: clamp(28px, 4vw + 1rem, 48px) clamp(22px, 3vw + 1rem, 40px);
            gap: clamp(16px, 1.5vw + 0.75rem, 24px);
            box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
            border-radius: 24px;
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }
        .contact-branch.contact-branch--map-jump {
            cursor: pointer;
        }
        .contact-branch.contact-branch--map-jump:hover,
        .contact-branch.contact-branch--active {
            border: 1px solid #0F64C0;
            @media (max-width: 768px) {
                border: none;
            }
        }
        .contact-branch.contact-branch--map-jump:focus-visible {
            outline: 2px solid #2563eb;
            outline-offset: 3px;
        }
        .contact-branch__title {
            margin: 0;
            display: flex;
            align-items: center;
            gap: clamp(14px, 1.5vw + 0.5rem, 24px);
            font-weight: 600;
            font-size: clamp(18px, 0.95rem + 1.2vw, 24px);
            line-height: 160%;
            color: #1C1B20;
            letter-spacing: -0.005em;
        }
        .contact-branch__title-icon {
            color: #0F64C0;
            display: inline-flex;
            align-items: center;
            width: clamp(32px, 4.5vw, 40px);
            height: clamp(32px, 4.5vw, 40px);
        }
        .contact-branch__row {
            display: flex;
            align-items: flex-start;
            gap: clamp(20px, 3vw + 0.5rem, 36px);
        }
        .contact-branch__row-icon {
            flex: none;
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #18317C;
        }
        .contact-branch__row-body {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .contact-branch__row-label {
            font-weight: 600;
            font-size: clamp(13px, 0.8125rem + 0.45vw, 16px);
            line-height: 120%;
            color: #162D55;
            margin-bottom: clamp(4px, 0.5vw + 0.15rem, 8px);
        }
        .contact-branch__row-value {
            font-weight: 400;
            font-size: clamp(14px, 0.8125rem + 0.55vw, 18px);
            line-height: 160%;
            color: #47454F;
            word-break: keep-all;
        }
    }
}

/* ── 네이버 지도 InfoWindow 내부의 말풍선 ─────────────
   InfoWindow 컨텐츠는 지도 캔버스 위에 portal 되므로
   .page-content 바깥(루트)에 정의해야 적용됨 */
.contact-map-balloon {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #162d55;
    line-height: 1.4;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(15, 35, 71, 0.12);
    pointer-events: auto;
    box-sizing: border-box;
    display: inline-block;
    width: max-content;
    max-width: clamp(160px, 32vw, 260px);
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;

    @media (max-width: 768px) {
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 10px;
        line-height: 1.35;
        box-shadow: 0 2px 8px rgba(15, 35, 71, 0.1);
        max-width: min(220px, 72vw);
    }
}

/* ════════════════════════════════════════════════════════════
   글로벌 오피스 월드맵 (worldMap binder)
   - 좌: SVG 월드맵 + 핀 오버레이
   - 우: 스크롤 가능 오피스 카드 리스트
   - 핀 / 카드 양방향 셀렉트 + 호버 컬러 변환
   - flat selector (CSS Nesting 의존 X — 호환성 최우선)
   - SVG 출처: github.com/flekschas/simple-world-map (CC BY-SA 3.0)
   ════════════════════════════════════════════════════════════ */
body.company-contact .contact-world-section {
    box-sizing: border-box;
}
/* 헤더/푸터와 다르게 월드맵은 풀폭 (max 1920px) */
body.company-contact .contact-world-content {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body.company-contact .contact-world__layout {
    display: grid;
    /* 1920px 풀폭 기준 — 지도 1420px / 리스트 500px
       좁아질 땐 비율 유지 (1420:500 ≈ 2.84:1) */
    grid-template-columns: minmax(0, 2.84fr) minmax(0, 1fr);
    /* 한 행이 intrinsic 최소 높이로 치솟는 것 방지(리스트·SVG) */
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    /* 2열 구간: 높이 상한 1000px 고정. height:auto 는 리스트 전체 높이만큼 늘어나는 원인이 됨 */
    height: 1000px;
    max-height: 1000px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
}
/* 1500px 이하: 2열이 비좁아 지도·리스트가 깨지기 쉬움 → 지도 상단 + 리스트 하단 1열 */
@media (max-width: 1500px) {
    body.company-contact .contact-world__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        height: auto;
        max-height: none;
        min-height: 0;
        align-items: stretch;
        background: transparent;
        border-top: none;
        border-bottom: none;
        /* 세로로 늘어나는 콘텐츠(지도 전체)가 잘리지 않도록 */
        overflow: visible;
    }
}

/* ── 좌측: 지도 ──────────────────────── */
body.company-contact .contact-world__map {
    position: relative;
    background: #F0F4F8;
    height: 100%;
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    /* SVG 가 100% 폭일 때 컨테이너 안쪽에서 가운데 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1500px) {
    /* 고정 높이·max-height 조합이 가로 100% SVG 를 세로로 잘라냄 → 자연 비율로 전체 표시 */
    body.company-contact .contact-world__map {
        height: auto;
        min-height: 0;
        overflow: visible;
        display: block;
        background: transparent;
    }
}
body.company-contact .contact-world__map-svg {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    position: relative;
    /* SVG 가 가로 100% 일 때 자연스레 비율 유지 → 부모(map column) 안에서 가운데 정렬 */
    line-height: 0;
    flex: 0 1 auto;
}
@media (max-width: 1500px) {
    body.company-contact .contact-world__map-svg {
        max-height: none;
        flex: none;
    }
}
body.company-contact .contact-world__map-svg svg {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    fill: #3F4A6B;
}
@media (max-width: 1500px) {
    body.company-contact .contact-world__map-svg svg {
        max-height: none;
    }
}
body.company-contact .contact-world__map-svg svg .contact-world__country {
    fill: #2F3958;
    transition: fill 0.18s ease;
    cursor: pointer;
}
body.company-contact .contact-world__map-svg svg .contact-world__country:hover,
body.company-contact .contact-world__map-svg svg .contact-world__country.is-active {
    fill: #1F4A8E;
}
body.company-contact .contact-world__map-fallback {
    padding: 24px;
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
}

/* ── 핀 오버레이 (svg-host 안쪽 — SVG 박스와 1:1 매칭) ── */
body.company-contact .contact-world__pins {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}
body.company-contact .contact-world__pin {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.company-contact .contact-world__pin-btn {
    position: relative;
    display: inline-flex;
    /* 라벨은 absolute 로 띄워 layout 에서 빼고, 도형만 flow 에 둠.
       이렇게 해야 .contact-world__pin 의 translate(-50%,-100%) 기준으로
       마커 도형의 아래 끝(뾰족한 부분)이 정확히 (x, y) 좌표 위에 놓임. */
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    line-height: 1;
}
body.company-contact .contact-world__pin-btn:focus-visible {
    outline: 2px solid #1F4A8E;
    outline-offset: 4px;
    border-radius: 6px;
}
body.company-contact .contact-world__pin-shape {
    display: inline-flex;
    color: #4A86D6;
    filter: drop-shadow(0 2px 3px rgba(15, 35, 71, 0.25));
    transform-origin: 50% 100%;
    transition: color 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}
@media (max-width: 768px) {
    body.company-contact .contact-world__pin-shape svg {
        width: 11px;
        height: 14px;
    }
}
body.company-contact .contact-world__pin-shape svg path {
    fill: currentColor;
}
body.company-contact .contact-world__pin-btn:hover .contact-world__pin-shape,
body.company-contact .contact-world__pin.is-active .contact-world__pin-shape {
    color: #1F4A8E;
    transform: scale(1.15);
    filter: drop-shadow(0 4px 6px rgba(31, 74, 142, 0.4));
}
body.company-contact .contact-world__pin-label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translate(-50%, 2px);
    padding: 4px 10px;
    background: #1F4A8E;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
body.company-contact .contact-world__pin-btn:hover .contact-world__pin-label,
body.company-contact .contact-world__pin.is-active .contact-world__pin-label {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* showLabelOnActiveOnly 모드: 활성 핀에만 라벨 상시 노출, 그 외엔 hover 시만 */
body.company-contact .contact-world__layout.is-label-active-only .contact-world__pin:not(.is-active):not(:hover) .contact-world__pin-label {
    opacity: 0;
}

/* ── 우측: 스크롤 리스트 — 카드 스택 (레이아웃 높이 1000px 을 그대로 받음) ── */
body.company-contact .contact-world__list {
    list-style: none;
    margin: 0;
    box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
    isolation: isolate;
    padding: 20px 32px;
    background: #EFF2F6;
    border-left: 1px solid #e2e8f0;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}
@media (max-width: 1500px) {
    body.company-contact .contact-world__list {
        max-width: none;
        width: 100%;
        border-left: 0;
        box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
        height: auto;
        max-height: none;
        overflow-y: visible;
        scrollbar-gutter: auto;
        padding: clamp(16px, 3vw, 24px) clamp(18px, 4vw, 32px);
    }
}
@media (max-width: 900px) {
    body.company-contact .contact-world__list {
        gap: 16px;
        padding: clamp(14px, 4vw, 20px);
    }
}
body.company-contact .contact-world__list::-webkit-scrollbar {
    width: 8px;
}
body.company-contact .contact-world__list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
body.company-contact .contact-world__list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
body.company-contact .contact-office {
    list-style: none;
    flex: 0 0 auto;
    min-width: 0;
    padding: 48px 40px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0px 8px 40px rgba(22, 45, 85, 0.12);
    border-radius: 24px;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}
body.company-contact .contact-office:hover {
    box-shadow: 0 6px 28px rgba(22, 45, 85, 0.1);
}
body.company-contact .contact-office.is-active {
    border-color: #1f4a8e;
    box-shadow: 0 6px 28px rgba(31, 74, 142, 0.14);
}
body.company-contact .contact-office__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0 0 14px;
    margin: 0 0 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid #C4C7D0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    transition: color 0.18s ease;

    @media (max-width: 768px) {
        position: relative;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 44px 20px 0;
        margin: 0 0 20px;
        gap: 4px;
    }
}
@media (max-width: 768px) {
    body.company-contact .contact-office__head::after {
        content: '';
        position: absolute;
        right: 14px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 3px solid #74757e;
        border-bottom: 3px solid #74757e;
        border-radius: 1px;
        transform: translateY(-56%) rotate(-135deg);
        transition: transform 0.18s ease;
        pointer-events: none;
    }
    body.company-contact .contact-office.is-collapsed .contact-office__head::after {
        transform: translateY(-50%) rotate(45deg);
    }
}

body.company-contact .contact-office__head:focus-visible {
    outline: 2px solid #1F4A8E;
    outline-offset: 2px;
    border-radius: 4px;
}
body.company-contact .contact-office__country {
    font-weight: 600;
    font-size: clamp(18px, calc(18px + (100vw - 390px) * 6 / 1530), 24px);
    line-height: 160%;
    color: #1C1B20;
    transition: color 0.18s ease;
}
body.company-contact .contact-office__tag {
    font-weight: 600;
    font-size: clamp(12px, calc(12px + (100vw - 390px) * 4 / 1530), 16px);
    line-height: 120%;
    color: #0F64C0;
}
body.company-contact .contact-office__body {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1rem + 1.2vw, 24px);
    padding-top: clamp(4px, 0.35rem + 0.5vw, 8px);
}
@media (max-width: 768px) {
    body.company-contact .contact-office.is-collapsed .contact-office__body {
        display: none;
    }
    body.company-contact .contact-office.is-collapsed .contact-office__head {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}
body.company-contact .contact-office__row {
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 0.75rem + 0.9vw, 16px);
}
body.company-contact .contact-office__row-icon {
    flex: none;
    display: inline-flex;
    background: #DCEBF9;
    border-radius: 6px;
    padding: clamp(6px, 0.45rem + 0.45vw, 8px);
}
body.company-contact .contact-office__row-icon svg {
    width: clamp(18px, 1rem + 1.1vw, 24px);
    height: clamp(18px, 1rem + 1.1vw, 24px);
}
body.company-contact .contact-office__row--address .contact-office__row-text {
    font-weight: 400;
    font-size: clamp(12px, calc(12px + (100vw - 390px) * 4 / 1530), 16px);
    line-height: 160%;
    word-break: keep-all;
}
body.company-contact .contact-office__row-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px clamp(8px, 0.6rem + 0.6vw, 12px);
    min-width: 0;
    flex: 1;
}
body.company-contact .contact-office__row-label {
    font-weight: 600;
    font-size: clamp(12px, calc(12px + (100vw - 390px) * 4 / 1530), 16px);
    line-height: 120%;
    color: #47454F;
    flex: none;
    width: clamp(72px, 125px, 130px);

    @media (max-width: 430px) {
        color: #162D55;
    }
}
body.company-contact .contact-office__row-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.company-contact .contact-office__row-line {
    font-weight: 400;
    font-size: clamp(12px, calc(12px + (100vw - 390px) * 4 / 1530), 16px);
    line-height: 160%;
    color: #47454F;
    word-break: keep-all;
}

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

    to {
        transform: translateX(0);
    }
}

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

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

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