/* 사이트 기본 스타일 */

/* ============================================================
   회사소개 > CERTIFICATIONS (인증현황) 보정
   - 상단 'CREDENTIALS' 라벨 숨김
   - 하단 발급정보(dl) / '크게 보기' 버튼 숨김
   - 남은 공간만큼 인증서 이미지 확대
   - 배경에 육각형 데코 오브제 추가
   공통 custom.css 및 페이지 내 <style> 보다 우선하도록
   #companyFullpage 를 붙여 선택자 우선순위를 높였다.
   ============================================================ */
#companyFullpage .company_cert .company_cert_eyebrow,
#companyFullpage .company_cert .company_cert_meta,
#companyFullpage .company_cert .company_cert_zoom {
    display: none !important;
}

#companyFullpage .company_cert .company_cert_inner {
    gap: 40px;
}

/* 카드 폭을 화면 높이에도 연동 → 낮은 해상도에서 이미지 좌우 여백 최소화 */
#companyFullpage .company_cert .company_cert_list {
    max-width: min(1320px, 128vh);
}

#companyFullpage .company_cert .company_cert_item {
    gap: 14px;
}

#companyFullpage .company_cert .company_cert_name {
    font-size: var(--text-22);
}

/* A4 비율(1:1.414)에 맞춘 이미지 박스 – 한 화면(100vh)을 넘지 않게 max-height 로 제한 */
#companyFullpage .company_cert .company_cert_thumb {
    height: auto;
    aspect-ratio: 1 / 1.414;
    max-height: 62vh;
    padding: 8px;
    background: var(--point-white);
}

#companyFullpage .company_cert .company_cert_thumb img {
    width: auto !important;
    max-width: 100%;
    height: 100% !important;
    object-fit: contain !important;
}

/* ------------------------------------------------------------
   배경 육각형 데코
   · 섹션 배경 : 소형 육각형 3개(멀티 background-image, SVG data-uri)
   · ::before  : 큰 외곽선 육각형 (우측, 옐로우 #FFAC00, 일부 잘림)
   · ::after   : 그린 그라데이션 육각형 (좌측 하단)
   ------------------------------------------------------------ */
#companyFullpage section.company_cert {
    position: relative;
    overflow: hidden;
    background-color: var(--point-white);
    background-repeat: no-repeat;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M32 2 2 52l30 50h56l30-50L88 2z' fill='none' stroke='%23D6DBE1' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M32 2 2 52l30 50h56l30-50L88 2z' fill='none' stroke='%23D6DBE1' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M32 2 2 52l30 50h56l30-50L88 2z' fill='%2325EB10' fill-opacity='0.18'/%3E%3C/svg%3E");
    background-position:
        right 6vw top 11%,
        left 9vw bottom 12%,
        right 13vw bottom 16%;
    background-size:
        clamp(30px, 2.6vw, 44px) auto,
        clamp(24px, 2vw, 34px) auto,
        clamp(38px, 3.4vw, 58px) auto;
}

/* 큰 외곽선 육각형 – 우측 (옐로우) */
#companyFullpage .company_cert::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    right: clamp(-150px, -7vw, -40px);
    top: 50%;
    width: clamp(240px, 26vw, 440px);
    aspect-ratio: 120 / 104;
    translate: 0 -50%;
    rotate: 12deg;
    opacity: 0.85;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M32 2 2 52l30 50h56l30-50L88 2z' fill='none' stroke='%23FFAC00' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    animation: certHexFloatY 11s ease-in-out infinite;
}

/* 그린 그라데이션 육각형 – 좌측 하단 */
#companyFullpage .company_cert::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: clamp(-180px, -9vw, -60px);
    bottom: clamp(-150px, -7vw, -50px);
    width: clamp(260px, 28vw, 460px);
    aspect-ratio: 120 / 104;
    rotate: -8deg;
    background: linear-gradient(135deg, rgba(37, 235, 16, 0.22), rgba(37, 235, 16, 0.02) 70%);
    clip-path: polygon(26.7% 0%, 0% 50%, 26.7% 100%, 73.3% 100%, 100% 50%, 73.3% 0%);
    animation: certHexFloat 14s ease-in-out infinite reverse;
}

/* 콘텐츠는 데코 위로 */
#companyFullpage .company_cert .company_cert_inner {
    position: relative;
    z-index: 1;
}

@keyframes certHexFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -22px;
    }
}

@keyframes certHexFloatY {
    0%,
    100% {
        translate: 0 -50%;
    }

    50% {
        translate: 0 calc(-50% - 22px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #companyFullpage .company_cert::before,
    #companyFullpage .company_cert::after {
        animation: none;
    }
}

/* 화면 높이가 낮은 노트북 */
@media (min-width: 1024px) and (max-height: 900px) {
    #companyFullpage .company_cert .company_cert_inner {
        gap: 26px;
    }

    #companyFullpage .company_cert .company_cert_thumb {
        max-height: 56vh;
    }
}

/* 태블릿 이하 – fullpage 해제 구간이라 높이 제한 불필요 */
@media (max-width: 1023px) {
    #companyFullpage .company_cert .company_cert_list {
        max-width: 1200px;
    }

    #companyFullpage .company_cert .company_cert_thumb {
        max-height: none;
    }

    #companyFullpage section.company_cert {
        background-position:
            right 4vw top 4%,
            left 6vw bottom 6%,
            right -10px bottom 9%;
    }
}

@media (max-width: 860px) {
    #companyFullpage .company_cert .company_cert_list {
        max-width: 420px;
    }

    #companyFullpage .company_cert::before {
        width: 220px;
        right: -90px;
        opacity: 0.7;
    }

    #companyFullpage .company_cert::after {
        width: 240px;
        left: -110px;
        bottom: -80px;
    }
}