/* ===== 사회경영 공통 스타일 ===== */


.mo-br {
    display: none;
}

/* ── 페이지 헤더: common.css 그대로 상속 ── */

/* ── 섹션 레이블 ── */
.soc-section-label {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #7A7A7A;
    line-height: 1.5;
    margin-bottom: 50px;
}







/* ══════════════════════════════════════
   도입 섹션 (sticky scroll animation)
══════════════════════════════════════ */
.soc-intro-outer {
    position: relative;
    background: #fff;
}

.soc-intro-inner {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
}

.soc-intro-text-section {
    padding: 100px 30px 60px;
    text-align: center;
}

.soc-intro-title {
    font-size: clamp(24px, 3.125vw, 60px);
    font-weight: 700;
    line-height: 1.4;
    color: #E9E9E9;
    white-space: nowrap;
    text-align: center;
    margin: 0;
}

/* 안전경영 페이지 — GP node: w=1224, h=84 */
[data-page="social-safety"] .soc-intro-title {
    width: 100%;
    max-width: 1224px;
    height: auto;
}

.soc-intro-title .char {
    transition: color 0.4s ease;
}

.soc-intro-title .char.active {
    color: #363636;
}

.soc-intro-image-section {
    display: flex;
    justify-content: center;
    padding: 0 30px 0;
    width: 100%;
    box-sizing: border-box;
}

.soc-intro-image-wrapper {
    width: 100%;
    max-width: 1860px;
    height: clamp(300px, 28.125vw, 540px);
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.soc-intro-bg-img {
    position: absolute;
    width: 100%;
    height: 261.38%;
    top: -161.32%;
    left: 0;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* 사회공헌 페이지 1920px 크롭: h=1240px, top=-372px (컨테이너 540px 기준) */
[data-page="social-welfare"] .soc-intro-bg-img {
    height: 229.63%;
    top: -68.89%;
}

/* 검수: 품질경영 도입 배경이미지 — 이미지 중앙이 프레임 중앙에 오도록 중앙 크롭 */
[data-page="social-quality"] .soc-intro-bg-img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
}

.soc-intro-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.soc-intro-overlay-text {
    font-size: clamp(16px, 1.5625vw, 30px);
    font-weight: 500; /* 검수 0703: 상단 배경 위 오버레이 텍스트 Medium 일괄적용 */
    color: #fff;
    opacity: 0.9; /* 검수 0720: 히어로 오버레이 문구 투명도 90% 일괄 */
    text-align: center;
    line-height: 1.5;
    word-break: keep-all;
    margin: 0;
}

.soc-intro-overlay-text--mobile {
    display: none;
}

/* ══════════════════════════════════════
   공통 콘텐츠 섹션
══════════════════════════════════════ */
.soc-content-section {
    background: #fff;
    padding: 100px 120px;
    width: 100%;
    box-sizing: border-box;
}

.soc-content-section-gray {
    background: #F1F3F7;
    padding: 100px 120px;
    width: 100%;
    box-sizing: border-box;
}

.soc-section-heading {
    font-size: clamp(30px, 2.61vw, 50px);
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    margin: 0 0 40px;
    word-break: keep-all;
}

.soc-section-heading-center {
    font-size: clamp(30px, 2.61vw, 50px);
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    margin: 0 0 40px;
    text-align: center;
    word-break: keep-all;
}

/* ══════════════════════════════════════
   안전보건 방침
══════════════════════════════════════ */
.soc-policy-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.soc-policy-left {
    flex: 0 1 40.6548%;
    max-width: 683px;
}

.soc-policy-left h2 {
    font-size: clamp(30px, 2.61vw, 50px);
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    margin: 0;
    word-break: keep-all;
    white-space: pre-line;
}

.soc-policy-right {
    flex: 0 1 50%;
    max-width: 840px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.soc-policy-body {
    font-size: clamp(16px, 1.25vw, 24px);
    font-weight: 400;
    color: #4E4E4E;
    line-height: 1.5;
    word-break: keep-all;
    margin: 0;
    max-width: 100%;
}

.soc-policy-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
    max-width: 100%;
}

/* 검수 0713: 대표이사 서명 — 데스크탑 24px/mt20, 태블릿 mt10, 모바일 18px/mt0 */
.soc-policy-ceo {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;   /* 검수 0730: 대표이사 bold (전 구간) */
    font-size: 24px;    /* 검수 0730: PC 24 */
    line-height: 150%;
    color: #4E4E4E;
    margin: 20px 0 0;
}

.soc-policy-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: clamp(16px, 1.15vw, 22px);
    font-weight: 400;
    color: #4E4E4E;
    line-height: 1.6;
}

.soc-policy-list li::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: #7A7A7A;
    margin-top: 0.65em;
}

/* ══════════════════════════════════════
   목표 및 실천방안 (안전경영)
══════════════════════════════════════ */
.soc-goal-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: 100%;
}

.soc-goal-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.soc-goal-item-header {
    width: 100%;
    height: 400px;
    border-radius: clamp(16px, 2vw, 30px);
    overflow: hidden;
    position: relative;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.soc-goal-item-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.soc-goal-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 58%);
}

.soc-goal-item-overlay-dark {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
}

.soc-goal-item-title {
    position: relative;
    font-size: 44px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    margin: 0;
}

.soc-goal-item-actions {
    display: flex;
    gap: 16px;
    height: 200px;
}

.soc-goal-action-card {
    flex: 1;
    background: #fff;
    border-radius: clamp(16px, 2vw, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.soc-goal-action-card p {
    font-size: 30px;
    font-weight: 700;
    color: #363636;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

/* ══════════════════════════════════════
   안전 조직도
══════════════════════════════════════ */
.soc-org-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}

/* ── 안전 조직도 (Figma GP node 110:679 — 피그마 좌표 기반 절대 배치) ── */
.soc-org-chart {
    position: relative;
    width: 100%;
    max-width: 1680px;
    aspect-ratio: 1680 / 833;
    container-type: inline-size;
}

/* SVG 점선 연결선 레이어 */
.soc-org-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* 노드 공통 */
.soc-org-n {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 9999px;
    font-weight: 700;
    box-sizing: border-box;
}

/* 대표이사 — w=300, h=120, stroke=rgb(205,235,251) sw=16 */
.soc-org-n-ceo {
    border: clamp(4px, 0.952cqw, 16px) solid rgb(205, 235, 251);
    background: #fff;
    font-size: clamp(14px, 1.548cqw, 26px);
    color: rgb(54, 54, 54);
}

/* 안전보건 총괄팀 — w=340, h=100, fill=rgb(242,113,0) */
.soc-org-n-hq {
    background: rgb(242, 113, 0);
    color: #fff;
    font-size: clamp(12px, 1.548cqw, 26px);
}

/* 본사/포항/시흥 — w=300, h=100, fill+stroke=rgb(205,235,251) */
.soc-org-n-branch {
    background: rgb(205, 235, 251);
    border: clamp(4px, 0.952cqw, 16px) solid rgb(205, 235, 251);
    font-size: clamp(14px, 1.548cqw, 26px);
    color: rgb(54, 54, 54);
}

/* 관리본부장/안전보건총괄책임자 — w=300, h=100, stroke=rgb(241,243,247) */
.soc-org-n-mid {
    border: clamp(4px, 0.952cqw, 16px) solid rgb(241, 243, 247);
    background: #fff;
    font-size: clamp(14px, 1.548cqw, 26px);
    color: rgb(54, 54, 54);
}

/* 환경안전팀/안전담당자 — w=300, h=100, stroke=rgb(241,243,247) */
.soc-org-n-dept {
    border: clamp(4px, 0.952cqw, 16px) solid rgb(241, 243, 247);
    background: #fff;
    font-size: clamp(14px, 1.548cqw, 26px);
    color: rgb(54, 54, 54);
}

/* 안전/보건/환경/소방위험물 (leaf) — w=200, h=80, fill=rgb(241,237,234) */
.soc-org-n-leaf {
    background: rgb(241, 237, 234);
    font-size: clamp(10px, 1.19cqw, 20px);
    color: rgb(54, 54, 54);
    font-weight: 700;
}

/* Org video box — Figma node 1215:16277 */
/* 컨테이너: w=1114px, h=626.068px, rounded-[30px] (relative positioning) */
.soc-org-video-box {
    position: relative;
    width: 100%;
    max-width: 1114px;
    aspect-ratio: 1114 / 626.068;
    border-radius: 30px;
    overflow: hidden;
    margin: 0 auto;
}

/* 배경 이미지 레이어 — 전체 커버 */
.soc-vb-bg {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    overflow: hidden;
    /* 내부(썸네일 img / 그라데이션 / iframe) 스택만 격리.
       z-index를 주면 뒤의 텍스트 그룹을 덮어버리므로 isolation 사용 */
    isolation: isolate;
}

.soc-vb-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
    z-index: 1;
}

/* 그라디언트 오버레이 — from rgba(136,71,14,0) at 18.824% → #88470e */
.soc-vb-gradient {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: linear-gradient(to bottom, rgba(136, 71, 14, 0) 18.824%, #88470e 100%);
    z-index: 2;
    /* 썸네일 img(z-index 1) 위에 오버레이 (iframe z-index 0은 그 아래) */
}

/* 텍스트 그룹 — left:30/1114=2.693%, top:390.07/626.068=62.304%, w:449/1114=40.305% */
.soc-vb-text-group {
    position: absolute;
    left: 2.693%;
    top: 62.304%;
    width: 40.305%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 인용 블록 — flex-col */
.soc-vb-quote-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* 첫째 줄 — flex, gap:8px */
.soc-vb-line1 {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* 둘째 줄 — flex, gap:8px, pl:48px */
.soc-vb-line2 {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding-left: 48px;
}

/* 따옴표 아이콘 — size:40px */
.soc-vb-quote-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: block;
}

/* 닫는 따옴표 — rotate 180 */
.soc-vb-quote-close {
    transform: rotate(180deg);
}

/* 타이틀 텍스트 — text:44px, bold, leading:1.5, white */
.soc-vb-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0;
    word-break: break-word;
}

/* 이름 영역 — pl:50px, w:full */
.soc-vb-credit {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding-left: 50px;
    width: 100%;
}

/* 이름 텍스트 — text:20px, bold, white, leading:1.5 */
.soc-vb-credit-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0;
}

/* 팀명 — Regular weight, leading:1.6 */
.soc-vb-credit-team {
    font-weight: 400;
    line-height: 1.6;
}

/* 재생 버튼 — left:510/1114=45.782%, top:266.04/626.068=42.494%, size:94px */
.soc-vb-play-btn {
    position: absolute;
    left: 45.782%;
    top: 42.494%;
    width: 94px;
    height: 94px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 2;
}

.soc-vb-play-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* YouTube iframe 상태 */
.soc-org-video-box.is-playing {
    aspect-ratio: 16 / 9;
}

.soc-org-video-box.is-playing .soc-vb-text-group,
.soc-org-video-box.is-playing .soc-vb-play-btn {
    display: none;
}

/* 썸네일 이미지는 iframe 영상이 뜰 때까지 유지 → 빈 박스 깜빡임 방지
   (iframe은 .soc-vb-bg 안에 있으므로 썸네일 img만 숨김) */
.soc-org-video-box.is-video-ready .soc-vb-bg-img,
.soc-org-video-box.is-video-ready .soc-vb-gradient {
    display: none;
}

.soc-vb-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 30px;
    z-index: 0;
}

/* ══════════════════════════════════════
   안전 캠페인
══════════════════════════════════════ */
.soc-campaign-section {
    background: #fff;
    padding: 100px 120px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.soc-campaign-header {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.soc-campaign-heading {
    font-size: clamp(30px, 2.61vw, 50px);
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    margin: 0;
}

.soc-campaign-desc {
    font-size: 22px;
    font-weight: 400;
    color: #4E4E4E;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

.soc-campaign-visual {
    position: relative;
    width: 100%;
    max-width: 1133px;
    aspect-ratio: 1133 / 611;
    margin: 0 auto;
    display: block;
    overflow: visible;
}

.soc-campaign-ellipse-outer {
    position: absolute;
    left: 0;
    top: 2.455%;
    width: 100%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
}

.soc-campaign-ellipse-inner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 32.2422%;
    width: 67.8729%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
}

/* Center item */
.soc-campaign-center {
    position: absolute;
    left: 50%;
    top: 54.8282%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 20.6531%;
    max-width: 234px;
    z-index: 2;
}

.soc-campaign-center-img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

.soc-campaign-center-label {
    font-size: 24px;
    font-weight: 700;
    color: #363636;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

/* Left item: SOP */
.soc-campaign-left {
    position: absolute;
    left: 1.1%;
    top: 61.4%;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    z-index: 2;
}

.soc-campaign-right {
    position: absolute;
    right: 1.1%;
    top: 61.4%;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    z-index: 2;
}

.soc-campaign-left .soc-campaign-dot,
.soc-campaign-right .soc-campaign-dot {
    margin-top: 18px;
}

.soc-campaign-top {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 2;
}

.soc-campaign-keyword {
    font-size: 44px;
    font-weight: 700;
    color: #F27100;
    line-height: 1.5;
    margin: 0;
}

.soc-campaign-keyword-desc {
    font-size: 22px;
    font-weight: 400;
    color: #363636;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

.soc-campaign-dot {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   안전 갤러리
══════════════════════════════════════ */
.soc-gallery-section {
    background: #fff;
    padding: 100px 0;
    overflow: hidden;
}

.soc-gallery-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 80px;
    padding: 0 120px;
}

.soc-gallery-heading {
    font-size: 44px;   /* 검수 0720: 데스크탑 44 */
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    margin: 0;
    word-break: keep-all;
}

/* 검수 0720: 안전경영 인증 헤딩만 데스크탑 44 (품질경영은 유지) */
[data-page="social-safety"] .soc-section-heading-center {
    font-size: 44px;
}

/* 검수 0720: 태블릿은 clamp(26~44), 모바일은 26 — 미디어쿼리로 명시 */
@media (min-width: 768px) and (max-width: 1439px) {
    .soc-gallery-heading,
    [data-page="social-safety"] .soc-section-heading-center {
        font-size: clamp(26px, 2.29vw, 44px);
    }
}

@media (max-width: 767px) {
    .soc-gallery-heading,
    [data-page="social-safety"] .soc-section-heading-center {
        font-size: 26px;
    }
}

/* gallery wrap — overflow hidden container */
.soc-gallery-wrap {
    display: flex;
    width: 100%;
    overflow: hidden;
}

/* gallery track — infinite marquee */
.soc-gallery-track {
    display: flex;
    gap: 40px;
    align-items: flex-end;
    padding-right: 40px;
    animation: soc-gallery-marquee 40s linear infinite;
    flex-shrink: 0;
}

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

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

/* each image container: clips content, specific rounded corners */
.soc-gallery-item {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.soc-gallery-item .soc-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 갤러리 이미지 내부 레이어 구조 (피그마 수치) ── */
.soc-gi-inner {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* item1: inner 874×482, offset left:-71px top:-9px */
.soc-gi-inner-1 {
    width: 874px;
    height: 482px;
    left: -71px;
    top: -9px;
    inset: unset;
    position: absolute;
}

.soc-gi-inner-1 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

/* item2: inner 458×400, offset left:-104px top:-11px */
.soc-gi-inner-2 {
    width: 458px;
    height: 400px;
    left: -104px;
    top: -11px;
    inset: unset;
    position: absolute;
}

.soc-gi-inner-2-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.soc-gi-img-2 {
    position: absolute;
    height: 100%;
    left: -79.34%;
    width: 179.27%;
    max-width: none;
    top: 0;
}

/* item3: inner 896×594, offset left:-11px top:-16px */
.soc-gi-inner-3 {
    width: 896px;
    height: 594px;
    left: -11px;
    top: -16px;
    inset: unset;
    position: absolute;
}

.soc-gi-inner-3 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

.soc-gi-gradient-3 {
    position: absolute;
    inset: 0;
    background: linear-gradient(239.85deg, rgba(96, 112, 160, 0.2) 1.12%, rgba(188, 188, 188, 0.2) 83.64%);
}

/* item4: inner 640.611×711.59px, right:-48.38px top:-144.38px */
.soc-gi-inner-4 {
    width: 640.611px;
    height: 711.59px;
    right: -48.38px;
    top: -144.38px;
    left: unset;
    inset: unset;
    position: absolute;
}

.soc-gi-inner-4>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

.soc-gi-inner-4b {
    position: absolute;
    inset: 0;
}

.soc-gi-inner-4b-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.soc-gi-img-4b1 {
    position: absolute;
    height: 100%;
    left: -30.85%;
    width: 161.7%;
    max-width: none;
    top: 0;
}

.soc-gi-img-4b2 {
    position: absolute;
    height: 100%;
    left: -38.55%;
    width: 162.12%;
    max-width: none;
    top: 0;
}

/* img1: 732×473, rounded all corners except bottom-right */
.soc-gallery-item-1 {
    width: 732px;
    height: 473px;
    border-radius: 50px 50px 0 50px;
}

/* img2: 354×389, rounded all except top-left */
.soc-gallery-item-2 {
    width: 354px;
    height: 389px;
    border-radius: 0 50px 50px 50px;
}

/* img3: 885×561, rounded top-left + bottom-right only */
.soc-gallery-item-3 {
    width: 885px;
    height: 560px;
    border-radius: 50px 0 50px 0;
}

/* img4: 354×514, rounded all except top-left */
.soc-gallery-item-4 {
    width: 354px;
    height: 514px;
    border-radius: 0 50px 50px 50px;
}

/* ══════════════════════════════════════
   인증현황 (안전경영 / 품질경영 공용)
══════════════════════════════════════ */
.soc-cert-section {
    background: #fff;
    padding: 100px 120px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    align-items: center;
}

.soc-cert-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.soc-cert-factory-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    width: 100%;
}

.soc-cert-factory-label {
    display: flex;
    gap: 8px;
    align-items: center;
}

.soc-cert-factory-dot {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

.soc-cert-factory-name {
    font-size: 30px;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
    margin: 0;
}

.soc-cert-cards {
    display: flex;
    gap: 8px;
    align-items: center;
}

.soc-cert-card-wrap {
    position: relative;
    width: 552px;
    height: 650px;
    overflow: hidden;
}

.soc-cert-card-back {
    position: absolute;
    top: 0;
    left: 30px;
    width: 522px;
    height: 651px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.soc-cert-card-back-inner {
    transform: rotate(11.38deg);
    background: #F1F3F7;
    width: 416px;
    height: 580px;
    border-radius: 16px;
}

.soc-cert-card-front {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% - 3.5px), calc(-50% + 9.9px));
    width: 413px;
    border: 1px solid #D3D3D3;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.soc-cert-card-front img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.soc-cert-caption {
    font-size: 20px;
    font-weight: 500;
    color: #A7A7A7;
    text-align: center;
    margin-top: 8px;
    line-height: 1.6;
}

/* ══════════════════════════════════════
   핵심가치 (사회공헌)
══════════════════════════════════════ */
.soc-value-section {
    background: #fff;
    padding: 100px 120px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.soc-value-content {
    background: #F8F9FB;
    border-radius: 30px;
    padding: clamp(30px, 5.21vw, 100px) clamp(20px, 4.17vw, 80px);
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.57vw, 30px);
}

.soc-value-ellipse-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.soc-value-oval {
    background: #F1F3F7;
    border-radius: 9999px;
    width: 100%;
    padding: clamp(15px, 2.09vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0;
}


.soc-value-circle {
    width: clamp(120px, 15.625vw, 300px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin-left: clamp(-30px, -1.5625vw, -15px);
    overflow: hidden;
}

/* 첫 번째 원은 겹침 없음 */
.soc-value-circle-wrap:first-child .soc-value-circle {
    margin-left: 0;
}

/* 겹치는 교집합: 이전 원 모양을 배경색으로 clip */
.soc-value-circle-wrap:not(:first-child) .soc-value-circle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #F1F3F7;
    left: calc(-100% + clamp(15px, 1.5625vw, 30px));
    top: 0;
    z-index: 0;
}

/* desktop last circle uses inline style margin-right:0 via .soc-value-circle-wrap--last */
.soc-value-oval-clip {
    display: contents;
}

.soc-value-oval-rotate {
    display: contents;
}

.soc-value-circle-wrap {
    display: contents;
}

.soc-value-circle-wrap--last {
    display: contents;
}

.soc-value-vesica {
    display: none;
}

.soc-value-circle-title {
    font-size: clamp(18px, 1.875vw, 36px);
    font-weight: 700;
    color: #000;
    line-height: 1.5;
    margin: 0;
}

.soc-value-circle-desc {
    font-size: clamp(12px, 1.15vw, 22px);
    font-weight: 400;
    color: #363636;
    line-height: 1.6;
    margin: 0;
}

.soc-value-intersect {
    display: none;
}

.soc-value-intersect-1 {
    left: 308.5px;
    top: 50%;
    transform: translateY(-50%);
}

.soc-value-intersect-2 {
    left: 578.5px;
    top: 50%;
    transform: translateY(-50%);
}

.soc-value-arrow-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 5.53vw, 106px);
    height: 10px;
    flex-shrink: 0;
}

.soc-value-arrow-wrap img {
    transform: rotate(-90deg);
    width: 10px;
    height: clamp(40px, 5.53vw, 106px);
}

.soc-value-result {
    width: clamp(230px, 22vw, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #F27100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.soc-value-result p {
    font-size: clamp(18px, 1.875vw, 36px);
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

/* ══════════════════════════════════════
   모금/봉사 활동 (사회공헌)
══════════════════════════════════════ */
/* ── 모금활동 / 봉사활동 ── */
.soc-activity-section {
    background: #fff;
    padding: 100px 120px;
    position: relative;
}

.soc-activity-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.soc-activity-heading {
    font-size: 50px;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
    margin: 0;
}

.soc-activity-contents {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.soc-activity-img-wrap {
    width: clamp(280px, 50vw, 960px);
    height: 540px;
    border-radius: 30px;
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
}

.soc-activity-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.soc-activity-text {
    display: flex;
    flex-direction: column;
    gap: 60px;
    flex: 1;
    padding-top: clamp(10px, 2.09vw, 40px);
}

.soc-activity-icon {
    width: 106px;
    height: 106px;
    overflow: visible;
    position: relative;
    flex-shrink: 0;
}

.soc-activity-icon-img {
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 82px;
}

/* 봉사활동 아이콘: 두 파트 */
.soc-activity-icon-volunteer {
    width: 106px;
    height: 106px;
    position: relative;
    flex-shrink: 0;
}

/* Figma 구조 그대로: wrapper div + 음수 inset으로 overflow */
/* bottom heart: wrapper 36×30, 중심 y=70px (calc(50%+17px)) */
.soc-volunteer-heart-wrapper {
    position: absolute;
    top: calc(50% + 17px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 30px;
}

.soc-volunteer-heart-inner {
    position: absolute;
    top: -53.46%;
    right: -44.44%;
    bottom: -53.33%;
    left: -44.44%;
}

/* top arc: wrapper 76×18, top=13px */
.soc-volunteer-arc-wrapper {
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 18px;
}

.soc-volunteer-arc-inner {
    position: absolute;
    top: -49.18%;
    right: -10.53%;
    bottom: -44.45%;
    left: -10.53%;
}

.soc-activity-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.soc-activity-title {
    font-size: 44px;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
    margin: 0;
    white-space: nowrap;
}

.soc-activity-desc {
    font-size: 22px;
    font-weight: 400;
    color: #363636;
    line-height: 1.6;
    margin: 0;
    width: 532px;
}

/* 페이지 버튼 */
.soc-activity-btns {
    position: absolute;
    right: 120px;
    bottom: 100px;
    display: flex;
    gap: 14px;
    align-items: center;
}

.soc-page-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid #D3D3D3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    padding: 8px;
    overflow: hidden;
    transition: background-color 0.2s;
}

.soc-page-btn:hover,
.soc-page-btn:active {
    background-color: rgba(0, 0, 0, 0.05);
}

.soc-page-btn img {
    width: 23px;
    height: 18.5px;
    display: block;
}

.soc-page-btn:disabled,
.soc-page-btn[disabled] {
    border-color: #D3D3D3; /* 검수 0630: disabled 원 라인 컬러 D3D3D3 */
    cursor: not-allowed;
    pointer-events: none;
}

.soc-page-btn:disabled img,
.soc-page-btn[disabled] img {
    filter: invert(69%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(75%) contrast(90%);
}

.soc-page-btn-arrow-left {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg);
}

/* ── 슬라이더 ── */
.soc-activity-slide {
    display: none;
}

.soc-activity-slide--active {
    display: block;
}

/* ── 이미지 레이어 (크롭/오버레이) ── */
/* img-wrap에 position:relative 추가 */
.soc-activity-img-wrap {
    position: relative;
}

/* 크롭 컨테이너: absolute inset, overflow:hidden, 피그마 left:-12.55% / w:125.1% */
.soc-ai-crop-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.soc-ai-crop-img {
    /* 검수 0630: 이미지 늘어남 수정 — 비율 무시(width125%/height100%) 대신 object-fit cover 중앙 크롭 */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-width: none;
    display: block;
}

/* 레이어드 이미지 컨테이너 (aria-hidden, 크롭 + 커버 레이어) */
.soc-ai-layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.soc-ai-layers .soc-activity-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* 봉사활동 아이콘 이미지 채움 */
.soc-volunteer-heart-inner img,
.soc-volunteer-arc-inner img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* ══════════════════════════════════════
   나눔처 (사회공헌)
══════════════════════════════════════ */
/* ── 나눔처 ── */
.soc-partners-section {
    background: #F8F9FB;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    gap: 50px;
    overflow: hidden;
}

.soc-partners-heading {
    font-size: 50px;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    margin: 0;
    text-align: center;
    padding: 0 120px;
}

.soc-partners-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Marquee track wrapper — clips overflow */
.soc-partners-track-wrap {
    overflow: hidden;
    width: 100%;
}

/* Scrolling track — contains 2× card set side by side */
.soc-partners-track {
    display: flex;
    gap: 24px;
    width: max-content;
    flex-shrink: 0;
}

/* Row 1: scroll left */
.soc-partners-track-left {
    animation: soc-scroll-left 35s linear infinite;
}

/* Row 2: scroll right (starts at -50% so it begins mid-way, moving toward 0) */
.soc-partners-track-right {
    animation: soc-scroll-right 40s linear infinite;
}

@keyframes soc-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes soc-scroll-right {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}


.soc-partner-card {
    width: 402px;
    height: 170px;
    border-radius: 30px;
    background: #fff;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* 검수: 로고를 카드에 개별 배치(Figma 402×170 기준 %). object-fit:contain으로 비율 왜곡 방지.
   %라 태블릿/모바일 카드 크기에서도 자동 비례 */
.soc-partner-card img {
    position: absolute;
    object-fit: contain;
}

.soc-pl-1 img  { top: 30.47%; left: 32.69%; width: 34.71%; height: 39.65%; }
.soc-pl-2 img  { top: 32.56%; left: 29.43%; width: 41.26%; height: 34.71%; }
.soc-pl-3 img  { top: 44.71%; left: 21.45%; width: 57.01%; height: 14.9%;  }
.soc-pl-4 img  { top: 42.8%;  left: 18.61%; width: 62.96%; height: 14.41%; }
.soc-pl-5 img  { top: 38.1%;  left: 20.4%;  width: 59.2%;  height: 23.69%; }
.soc-pl-6 img  { top: 31.37%; left: 42.41%; width: 15.28%; height: 32.9%;  }
.soc-pl-7 img  { top: 38.82%; left: 23.46%; width: 53.27%; height: 22.63%; }
.soc-pl-8 img  { top: 33.37%; left: 28.79%; width: 42.29%; height: 33.49%; }
.soc-pl-9 img  { top: 38.74%; left: 26.3%;  width: 47.43%; height: 22.43%; }
.soc-pl-10 img { top: 40.25%; left: 24.79%; width: 50.42%; height: 19.87%; }
.soc-pl-11 img { top: 41.19%; left: 31.85%; width: 36.08%; height: 17.2%;  }
.soc-pl-12 img { top: 39.1%;  left: 30.9%;  width: 38.2%;  height: 21.48%; }

.soc-partner-card-text {
    width: 402px;
    height: 170px;
    border-radius: 30px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Row 3: mobile only */
.soc-partners-row3-mobile {
    display: none;
}

.soc-partner-card-text span {
    font-size: 24px;
    font-weight: 700;
    color: #363636;
    text-align: center;
    line-height: 1.5;
}

/* ══════════════════════════════════════
   고객지원 (Support) 오버라이드
══════════════════════════════════════ */
.soc-support-section {
    background: #fff;
    padding: 80px 120px;
    display: flex;
    align-items: center;
    position: relative;
}

/* ── 모바일 전용 조직도 (기본 숨김) ── */
.soc-org-chart-mobile {
    display: none;
}

/* ══════════════════════════════════════
   반응형 - 태블릿 (768~1439px)
══════════════════════════════════════ */
@media (max-width: 1439px) {

    .mo-br {
        display: none;
    }




    .soc-intro-overlay-text {
        font-size: 20px;
    }

    .soc-intro-title {
        white-space: normal;
        text-align: center;
    }

    .soc-intro-image-wrapper {
        width: 100%;
        height: 400px;
    }

    .soc-intro-outer {}

    .soc-content-section,
    .soc-content-section-gray,
    .soc-cert-section,
    .soc-campaign-section,
    .soc-gallery-section,
    .soc-value-section,
    .soc-activity-section {
        padding: 80px 60px;
    }

    .soc-gallery-section {
        padding: 80px 0;
    }

    .soc-gallery-header {
        padding: 0 60px;
    }

    .soc-partners-section {
        padding: 80px 0;
    }

    .soc-section-heading,
    .soc-section-heading-center {}

    .soc-policy-row {
        flex-direction: column;
        gap: 30px;
    }

    .soc-policy-left h2 {}

    .soc-policy-right {
        flex: none;
        width: 100%;
        max-width: none;
    }

    .soc-goal-item-header {
        height: 300px;
    }

    .soc-goal-item-title {
        font-size: 28px; /* 검수 0712: 태블릿 28px (데스크탑 44 유지, 모바일 24는 ≤767에서 별도) */
    }



    .soc-goal-action-card p {
        font-size: 20px; /* 검수 0712: 태블릿 20px (데스크탑 30 유지, 모바일 18은 ≤767에서 별도) */
    }

    .soc-goal-item-actions {
        height: 160px;
    }

    .soc-campaign-visual {
        overflow: visible;
    }

    .soc-gallery-track {
        gap: 20px;
        padding-right: 20px;
    }

    /* 검수 0630: 태블릿 r값도 고정이 아닌 clamp (비대칭 코너 0px 유지) */
    .soc-gallery-item-1,
    .soc-gallery-item-2,
    .soc-gallery-item-3 {
        --gr: clamp(20px, 3.5vw, 50px);
    }

    .soc-gallery-item-1 {
        width: 420px;
        height: 280px;
        border-radius: var(--gr) var(--gr) 0 var(--gr);
    }

    .soc-gallery-item-2 {
        width: 200px;
        height: 230px;
        border-radius: 0 var(--gr) var(--gr) var(--gr);
    }

    .soc-gallery-item-3 {
        width: 460px;
        height: 330px;
        border-radius: var(--gr) 0 var(--gr) 0;
    }

    .soc-gallery-item-4 {
        display: none;
    }

    .soc-cert-card-wrap {
        width: 360px;
        height: 440px;
    }

    .soc-cert-card-back {
        width: 100%;
        height: 100%;
        left: 0;
    }

    .soc-cert-card-front {
        width: 280px;
    }

    .soc-cert-card-back-inner {
        width: 280px;
        height: 390px;
    }

    .soc-value-intersect {
        display: none;
    }

    .soc-value-content {
        flex-direction: column;
        align-items: center;
    }

    .soc-value-ellipse-wrap {
        flex-direction: column;
        align-items: center;
    }

    .soc-value-oval {
        width: fit-content;
    }

    .soc-value-arrow-wrap {
        height: clamp(40px, 7.5vw, 106px);
        width: auto;
    }

    .soc-value-arrow-wrap img {
        transform: none;
        width: auto;
        height: 100%;
    }

    .soc-activity-contents {
        flex-direction: column;
        gap: 40px;
    }

    .soc-activity-img-wrap {
        width: 100%;
    }

    .soc-activity-text {
        width: 100%;
        padding-top: 0;
    }

    .soc-activity-title {
        font-size: 30px; /* 검수 0713: 태블릿 30px */
        white-space: normal;
    }

    .soc-activity-desc {
        width: 100%;
        font-size: 18px;
    }

    .soc-activity-heading {
        font-size: clamp(30px, 2.6vw, 50px); /* 검수 0713: 웹 50px 기준 태블릿 clamp */
    }

    .soc-activity-btns {
        position: static;
        margin-top: 20px;
        justify-content: flex-end;
    }

    .soc-partners-heading {
        font-size: clamp(30px, 2.6vw, 50px); /* 검수 0713: 웹 50px 기준 태블릿 clamp */
        padding: 0 60px;
    }

    .soc-partner-card,
    .soc-partner-card-text {
        width: 260px;
        height: 120px;
        border-radius: 20px;
    }

    .soc-org-chart {
        max-width: 1050px;
    }

    .soc-org-video-box {
        border-radius: 20px;
    }

    .soc-vb-bg,
    .soc-vb-gradient {
        border-radius: 20px;
    }

    .soc-vb-title {
        font-size: 32px;
    }

    .soc-vb-quote-icon {
        width: 30px;
        height: 30px;
    }

    .soc-vb-credit-text {
        font-size: 16px;
    }

    .soc-vb-play-btn {
        width: 70px;
        height: 70px;
    }

    .soc-vb-iframe {
        border-radius: 20px;
    }
}

@media (max-width: 767px) {
    /* ── 페이지 헤더: common.css 모바일 상속 ── */

    /* 안전경영 intro title 데스크탑 고정 width/height 리셋 */
    [data-page="social-safety"] .soc-intro-title {
        width: auto;
        height: auto;
    }


    /* ── 도입(인트로) 섹션 ── */
    .soc-intro-outer {}

    .soc-intro-inner {
        padding-bottom: 0;
        flex-direction: column;
        gap: 0;
    }

    .soc-intro-text-section {
        padding: 40px 16px 24px;
        text-align: center;
    }

    .soc-intro-title {
        font-size: 24px;
        white-space: normal;
        color: #E9E9E9;
        text-align: center;
        line-height: 1.5;
    }

    .soc-intro-title .char {
        color: inherit;
        transition: color 0.4s ease;
    }

    .soc-intro-title .char.active {
        color: #363636;
    }

    .soc-intro-title-main {
        color: #363636;
    }

    .soc-intro-title-sub {
        color: #e9e9e9;
    }

    .soc-intro-image-section {
        padding: 0 16px 40px;
    }

    .soc-intro-image-wrapper {
        width: 100%;
        height: 448px;
        border-radius: 16px;
    }

    .soc-intro-bg-img {
        width: 179.99%;
        height: 100%;
        top: 0;
        left: -23.47%;
    }

    .soc-intro-overlay-text {
        font-size: 18px;   /* 검수 0720: 모바일 18px */
        width: 268px;
        padding: 0;
        line-height: 1.5;
    }

    [data-page="social-welfare"] .soc-intro-overlay-text {
        height: 150px;
    }

    /* 사회공헌 360px: 피그마 GM_ object-cover 풀사이즈 */
    [data-page="social-welfare"] .soc-intro-bg-img {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
    }

    .soc-intro-overlay-text--desktop {
        display: none;
    }

    .soc-intro-overlay-text--mobile {
        display: block;
    }

    /* ── welfare 도입 (2-column → single column) ── */
    .soc-intro-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .soc-intro-text-section,
    .soc-intro-image-section {
        width: 100%;
    }

    /* ── 공통 섹션 패딩 ── */
    .soc-content-section,
    .soc-content-section-gray,
    .soc-cert-section,
    .soc-campaign-section,
    .soc-gallery-section,
    .soc-value-section,
    .soc-activity-section {
        padding: 40px 16px;
    }

    .soc-value-section {
        gap: 20px !important;
    }

    .soc-partners-section {
        padding: 40px 16px;
    }

    /* ── 섹션 레이블 & 헤딩 ── */
    .soc-section-label {
        font-size: 18px;
        margin-bottom: 8px;
        height: 29px;
        text-align: left;
    }

    .soc-section-heading,
    .soc-section-heading-center {
        margin-bottom: 24px;
    }

    .soc-cert-header .soc-section-heading-center {
        margin-bottom: 60px;
    }

    /* ── 안전보건 방침 ── */
    .soc-policy-section {
        gap: 8px !important;
    }

    .soc-policy-row {
        flex-direction: column;
        gap: 20px;
    }

    .soc-policy-left h2 {}

    .soc-policy-right {
        flex: none;
        width: 100%;
        max-width: none;
        gap: 20px;
    }

    .soc-policy-body {
        font-size: 16px;
        line-height: 1.6;
        height: auto;
    }

    .soc-policy-list {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* 검수 0722: 대표이사 서명 모바일 14px / margin-top 0 */
    .soc-policy-ceo {
        font-size: 16px; /* 검수 0730: 모바일 14→16 (bold는 base 상속) */
        margin-top: 0;
    }

    .soc-policy-list li {
        font-size: 16px;
        height: auto;
        gap: 4px;
    }

    .soc-policy-list li::before {
        width: 4px;
        height: 4px;
        min-width: 4px;
        margin: 0;
        margin-top: 0.65em;
    }

    /* ── 목표 및 실천방안 ── */
    [data-page="social-safety"] .soc-content-section-gray {
        gap: 30px !important;
    }

    .soc-goal-list {
        gap: 30px;
    }

    .soc-goal-item {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .soc-goal-item-header {
        width: 100%;
        height: 240px;
        padding: 16px 40px 40px 16px;
    }

    /* 360px 이미지 크롭 포지셔닝 (피그마 GM_ 수치) */
    .soc-goal-item-bg {
        object-fit: unset;
        width: unset;
        height: unset;
    }

    .soc-goal-item:nth-child(1) .soc-goal-item-bg {
        width: 183.59%;
        height: 167.27%;
        left: -0.04%;
        top: -23.89%;
    }

    .soc-goal-item:nth-child(2) .soc-goal-item-bg {
        width: 230.42%;
        height: 209.94%;
        left: -27.4%;
        top: -54.86%;
    }

    .soc-goal-item:nth-child(3) .soc-goal-item-bg {
        width: 196.87%;
        height: 151.39%;
        left: -11.38%;
        top: -24.23%;
    }

    .soc-goal-item-title {
        font-size: 24px;
    }

    .soc-goal-item-actions {
        flex-direction: column;
        height: auto;
        gap: 12px;
        width: 100%;
    }

    .soc-goal-action-card {
        width: 100%;
        height: 100px;
        flex: none;
        padding: 16px;
    }

    .soc-goal-action-card p {
        font-size: 18px;
        width: 100%;
    }

    /* ── 안전 갤러리 (수평 스크롤) ── */
    .soc-gallery-section {
        padding: 40px 0;
        overflow: hidden;
    }

    .soc-gallery-header {
        padding: 0 16px;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    .soc-gallery-header .soc-section-label {
        text-align: center;
    }

    .soc-gallery-track {
        flex-direction: row;
        align-items: flex-end;
        margin-top: 30px;
        gap: 10px;
        padding-right: 10px;
        animation-duration: 20s;
    }

    .soc-gallery-item-1 {
        width: 314px;
        height: 204px;
        flex-shrink: 0;
        display: block;
        border-radius: 20px 20px 0 20px; /* 검수 0630: 비대칭 코너(0px) 유지 */
    }

    /* 360px item1 inner: 비율 유지 (874/732 × 314 ≈ 375px, 482/473 × 204 ≈ 208px) */
    .soc-gallery-item-1 .soc-gi-inner-1 {
        width: 375px;
        height: 208px;
        left: -30px;
        top: -4px;
    }

    .soc-gallery-item-2 {
        width: 152px;
        height: 167px;
        flex-shrink: 0;
        display: block;
        border-radius: 0 20px 20px 20px; /* 검수 0630: 비대칭 코너(0px) 유지 */
    }

    /* 360px item2 inner: 비율 유지 (458/354 × 152 ≈ 197px, 400/389 × 167 ≈ 172px) */
    .soc-gallery-item-2 .soc-gi-inner-2 {
        width: 197px;
        height: 172px;
        left: -45px;
        top: -5px;
    }

    .soc-gallery-item-3 {
        width: 380px;
        height: 240px;
        flex-shrink: 0;
        display: block;
        border-radius: 20px 0 20px 0; /* 검수 0630: 비대칭 코너(0px) 유지 */
    }

    /* 360px item3 inner: 비율 유지 (896/885 × 380 ≈ 385px, 594/561 × 240 ≈ 254px) */
    .soc-gallery-item-3 .soc-gi-inner-3 {
        width: 385px;
        height: 254px;
        left: -5px;
        top: -7px;
    }

    .soc-gallery-item-4 {
        width: 152px;
        height: 222px;
        flex-shrink: 0;
        display: block;
        border-radius: 0 20px 20px 20px; /* 검수 0630: 비대칭 코너(0px) 유지 */
    }

    /* 360px item4 inner: 비율 유지 (640.6/354 × 152 ≈ 275px, 711.6/514 × 222 ≈ 307px) */
    .soc-gallery-item-4 .soc-gi-inner-4 {
        width: 275px;
        height: 307px;
        right: -21px;
        top: -62px;
    }

    /* ── 인증현황 ── */
    .soc-cert-section {
        gap: 60px;
    }

    .soc-cert-header {
        gap: 8px !important;
    }

    .soc-cert-factory-label {
        gap: 4px;
    }

    .soc-cert-factory-name {
        width: 83px;
        height: 36px;
        font-size: 24px;
    }

    .soc-cert-factory-group {
        gap: 16px;
    }

    .soc-cert-caption {
        font-size: 16px;
        margin-top: 4px;
    }

    .soc-cert-cards {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .soc-cert-card-wrap {
        width: 248px;
        height: 307px;
    }

    .soc-cert-card-front {
        width: 195.23px;
        height: 276.16px;
        border-radius: 8px;
    }

    .soc-cert-card-back {
        left: 0;
        width: 248px;
        height: 307px;
    }

    .soc-cert-card-back-inner {
        width: 196.29px;
        height: 274.09px;
    }

    /* ── 핵심가치 (welfare) ── */
    .soc-value-circle {
        width: 160px;
        height: 160px;
    }

    .soc-value-circle-title {
        font-size: 22px;
    }

    .soc-value-circle-desc {
        font-size: 14px;
    }

    /* ── 모금·봉사 활동 ── */
    /* ── 모금·봉사 활동 ── */
    .soc-activity-inner {
        gap: 24px;
    }

    .soc-activity-img-wrap {
        height: 185px;
        border-radius: 16px;
    }

    .soc-activity-contents {
        gap: 30px;
        flex-direction: column;
    }

    .soc-activity-heading {
        font-size: 30px;
    }

    .soc-activity-title {
        font-size: 26px;
        white-space: normal;
    }

    .soc-activity-desc {
        font-size: 16px;
        width: 100%;
        line-height: 1.6;
        height: auto; /* 검수 0703: 텍스트 높이에 맞춰 Hug(내용맞춤) */
    }

    .soc-activity-text {
        gap: 20px;
        padding: 0 12px;
    }

    .soc-activity-info {
        gap: 16px;
    }

    /* 아이콘 컨테이너: Figma size-[62px] (volunteer도 동일 사이즈 강제) */
    .soc-activity-icon,
    .soc-activity-icon-volunteer {
        width: 62px;
        height: 62px;
    }

    /* 모금활동 아이콘 이미지: Figma h-[47.965px] w-[44.453px] top-[7.61px] */
    .soc-activity-icon-img {
        width: 44px;
        height: 48px;
        top: 8px;
    }

    /* 봉사활동 아이콘 내부 래퍼: 데스크탑 106px → 모바일 62px (×0.585) */
    .soc-volunteer-arc-wrapper {
        top: 8px;
        width: 44px;
        height: 11px;
    }

    .soc-volunteer-heart-wrapper {
        top: calc(50% + 10px);
        width: 21px;
        height: 18px;
    }

    /* 버튼 영역: Figma contents gap-[24px] = inner gap 20px + margin 4px */
    .soc-activity-btns {
        position: static;
        margin-top: 4px;
        justify-content: center;
        gap: 8px;
    }

    /* 페이지 버튼: Figma size-[52px] */
    .soc-page-btn {
        width: 52px;
        height: 52px;
    }

    /* 화살표 아이콘: Figma ic_Arrow Union w-[14.208px] h-[10.588px], 감싼 컨테이너 20×20px */
    .soc-page-btn img,
    .soc-page-btn-arrow img {
        width: 14px;
        height: 11px;
    }

    /* ── 나눔처 ── */
    .soc-partners-heading {
        font-size: 30px;
        padding: 0;
        text-align: center;
        height: 45px;
    }

    .soc-partners-section {
        gap: 20px;
    }

    .soc-partners-grid {
        gap: 10px;
    }

    /* 마퀴(흘러가는 로고)는 섹션 좌우패딩(16) 무시하고 풀블리드 — 헤딩 여백은 유지 */
    .soc-partners-track-wrap {
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
    }

    .soc-partner-card,
    .soc-partner-card-text {
        width: 240px;
        height: 102px;
        border-radius: 16px;
    }

    .soc-partners-track-row2 {
        height: 102px;
    }

    .soc-partners-row3-mobile {
        display: block;
    }

    /* ── 안전 갤러리 헤딩 ── */
    .soc-gallery-heading {
        text-align: center;
    }

    /* ── 안전 캠페인 ── */
    .soc-campaign-section {
        gap: 30px;
    }

    .soc-campaign-header {
        gap: 20px;
    }

    .soc-campaign-heading {}

    .soc-campaign-desc {
        font-size: 16px;
        height: 130px;
    }

    .soc-campaign-visual {
        position: relative;
        width: 100%;
        max-width: 328px;
        aspect-ratio: 328 / 260;
        margin: 0 auto;
        display: block;
        overflow: visible;
    }

    .soc-campaign-ellipse-outer {
        position: absolute;
        left: 0;
        top: 3.8462%;
        width: 100%;
        aspect-ratio: 1 / 1;
        pointer-events: none;
    }

    .soc-campaign-ellipse-inner {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 34.2308%;
        width: 51.8293%;
        aspect-ratio: 1 / 1;
        pointer-events: none;
    }

    .soc-campaign-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 45.7692%;
        width: 27.1341%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        z-index: 2;
    }

    .soc-campaign-center-img {
        width: 100%;
        height: auto;
        border-radius: 50%;
        object-fit: cover;
    }

    .soc-campaign-center-label {
        font-size: 16px;
        font-weight: 700;
        color: #363636;
        white-space: nowrap;
    }

    .soc-campaign-left {
        position: absolute;
        left: 1.5%;
        top: 41%;
        width: auto;
        height: auto;
        display: flex;
        align-items: flex-start;
        gap: 4px;
        z-index: 2;
    }

    .soc-campaign-right {
        position: absolute;
        right: 1.5%;
        top: 41%;
        width: auto;
        height: auto;
        display: flex;
        align-items: flex-start;
        gap: 4px;
        z-index: 2;
    }

    .soc-campaign-top {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 2%;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        z-index: 2;
    }

    .soc-campaign-left .soc-campaign-dot,
    .soc-campaign-right .soc-campaign-dot {
        margin-top: 10px;
    }

    .soc-campaign-dot {
        width: 10px;
        height: 10px;
        object-fit: contain;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .soc-campaign-keyword {
        font-size: 24px;
        line-height: 1;
    }

    .soc-campaign-keyword-desc {
        font-size: 14px;
        margin-top: 4px;
    }

    /* ── 안전 조직도 & 영상 ── */
    /* 모바일 비디오 박스 — Figma 1500:19330 (카드형: 이미지+재생 위 / 텍스트 아래) */
    .soc-org-video-box {
        display: flex;
        flex-direction: column;
        gap: 20px;
        background: #F8F9FB;
        border-radius: 16px;
        padding: 10px 10px 20px;
        aspect-ratio: auto;
        max-width: none;
        height: auto;
        box-sizing: border-box;
    }

    /* 이미지 박스: h-172.78, rounded-12, 흐름 상단 */
    .soc-vb-bg {
        position: relative;
        inset: auto;
        width: 100%;
        height: 172.78px;
        border-radius: 12px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .soc-vb-gradient {
        display: none;
    }

    /* 재생 버튼: 이미지 중앙 (top = pt-10 + 이미지높이/2 = 96.39px) */
    .soc-vb-play-btn {
        top: 96.39px;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 52px;
        height: 52px;
    }

    /* 텍스트 그룹: 이미지 아래 흐름 배치, gap-12 */
    .soc-vb-text-group {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        gap: 12px;
    }

    /* 타이틀: 20px Bold, 검정 */
    .soc-vb-title {
        font-size: 20px;
        color: #000000;
    }

    /* 따옴표: size-[24px], 밝은 카드 배경이라 흰색 SVG → 검정으로 (Figma: black) */
    .soc-vb-quote-icon {
        width: 24px;
        height: 24px;
        filter: brightness(0);
    }

    .soc-vb-line1 {
        gap: 4px;
    }

    .soc-vb-line2 {
        padding-left: 28px;
        gap: 4px;
    }

    /* 이름: pl-[28px], w-[182px], 14px #4E4E4E (안전보건총괄팀=Regular, 박종결 팀장=Bold) */
    .soc-vb-credit {
        padding-left: 28px;
        width: 182px;
    }

    .soc-vb-credit-text {
        font-size: 14px;
        line-height: 1.5;
        color: #4E4E4E;
        font-weight: 700;
    }

    .soc-vb-credit-team {
        font-weight: 400;
    }

    .soc-vb-iframe {
        border-radius: 12px;
    }

    /* 재생 중에도 카드/텍스트 프레임 유지 — 영상은 이미지 박스(.soc-vb-bg) 안에서만 재생 */
    .soc-org-video-box.is-playing {
        aspect-ratio: auto;
    }

    .soc-org-video-box.is-playing .soc-vb-text-group {
        display: flex;
    }

    /* 데스크탑 조직도 숨김, 모바일 조직도 표시 */
    .soc-org-chart {
        display: none;
    }

    .soc-org-section {
        gap: 30px !important;
    }

    .soc-org-wrapper {
        gap: 30px;
    }

    .soc-org-chart-mobile {
        display: flex;
        justify-content: center;
    }

    .soc-org-m-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 240px;
        position: relative;
    }

    /* 대표이사 ~ branches 시작까지 좌측 수직 라인 */
    .soc-org-m-col::before {
        content: '';
        position: absolute;
        left: -14px;
        top: 30px;
        /* 대표이사 나머지(31) + vline(40) + 총괄팀(61) + vline-lg(40) + 본사 중앙(30) = 202 */
        height: 202px;
        width: 0;
        border-left: 1px dashed #A7A7A7;
    }

    /* 대표이사 중앙에서 좌측으로 나가는 가로 연결선 */
    .soc-org-m-col::after {
        content: '';
        position: absolute;
        left: -14px;
        top: 30px;
        width: 14px;
        height: 0;
        border-top: 1px dashed #A7A7A7;
    }

    .soc-org-m-node {
        width: 240px;
        height: 61px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 9999px;
        font-size: 16px;
        font-weight: 700;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .soc-org-m-ceo {
        border: 8px solid rgb(205, 235, 251);
        background: #fff;
        color: rgb(54, 54, 54);
    }

    .soc-org-m-hq {
        background: rgb(242, 113, 0);
        color: #fff;
    }

    .soc-org-m-branch {
        background: rgb(205, 235, 251);
        color: rgb(54, 54, 54);
    }

    .soc-org-m-mid {
        border: 8px solid rgb(241, 243, 247);
        background: #fff;
        color: rgb(54, 54, 54);
    }

    .soc-org-m-dept {
        border: 8px solid rgb(241, 243, 247);
        background: #fff;
        color: rgb(54, 54, 54);
    }

    .soc-org-m-vline {
        width: 0;
        height: 40px;
        border-left: 1px dashed #A7A7A7;
        flex-shrink: 0;
    }

    .soc-org-m-vline--lg {
        height: 40px;
    }

    .soc-org-m-branches {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 240px;
    }

    .soc-org-m-branches::before {
        content: '';
        position: absolute;
        left: -14px;
        top: 30px;
        bottom: 169px;
        width: 0;
        border-left: 1px dashed #A7A7A7;
    }

    .soc-org-m-group {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 240px;
    }

    .soc-org-m-branches .soc-org-m-group::before {
        content: '';
        position: absolute;
        left: -14px;
        top: 30px;
        width: 14px;
        height: 0;
        border-top: 1px dashed #A7A7A7;
    }

    .soc-org-m-leaves {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 240px;
        margin-top: 22px;
        position: relative;
    }

    .soc-org-m-leaves::before {
        content: '';
        position: absolute;
        left: 58px;
        right: 58px;
        top: -15px;
        height: 0;
        border-top: 1px dashed #A7A7A7;
    }

    .soc-org-m-leaves::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -30px;
        width: 0;
        height: 15px;
        border-left: 1px dashed #A7A7A7;
    }

    .soc-org-m-leaf {
        background: rgb(241, 237, 234);
        border-radius: 9999px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 400;
        color: rgb(54, 54, 54);
        text-align: center;
        line-height: 1.3;
        white-space: nowrap;
        position: relative;
    }

    .soc-org-m-leaf:nth-child(-n+2)::before {
        content: '';
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 15px;
        border-left: 1px dashed #A7A7A7;
        pointer-events: none;
    }

    /* ── 핵심가치 (welfare) - 피그마 rotate-90 구조 ── */
    .soc-value-content {
        padding: 30px;
        border-radius: 16px;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .soc-value-ellipse-wrap {
        flex-direction: column;
        align-items: center;
        width: auto;
        gap: 20px;
    }

    /* 268×702 클리핑 컨테이너 */
    .soc-value-oval-clip {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 268px;
        height: 720px;
        overflow: visible;
        position: relative;
        flex-shrink: 0;
    }

    /* 수평 oval 전체를 90도 회전 */
    .soc-value-oval-rotate {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        transform: rotate(90deg);
    }

    /* oval: 수평 레이아웃 (회전 전 가로 배열) */
    .soc-value-oval {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #F1F3F7;
        border: none;
        outline: none;
        border-radius: 9999px;
        padding: 30px;
        width: auto;
        height: auto;
        gap: 0;
        position: relative;
        flex-wrap: nowrap;
    }

    /* 원형 슬롯: 208×208, -23px 겹침 */
    .soc-value-circle-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 208px;
        height: 208px;
        flex-shrink: 0;
        margin-right: -23px;
    }

    .soc-value-circle-wrap--last {
        margin-right: 0;
    }

    /* 원형: -90도 역회전으로 텍스트 정립 */
    .soc-value-circle {
        width: 208px;
        height: 208px;
        transform: rotate(-90deg);
        flex-shrink: 0;
        margin-right: 0;
        margin-left: 0;
        gap: 4px;
        overflow: visible;
    }

    /* PC용 vesica ::before 제거 */
    .soc-value-circle-wrap:not(:first-child) .soc-value-circle::before {
        display: none;
    }

    .soc-value-circle-title {
        font-size: 28px;
    }

    .soc-value-circle-desc {
        font-size: 17px;
    }

    /* 데스크탑 SVG intersect 숨김 */
    .soc-value-intersect {
        display: none;
    }

    /* 화살표 슬롯: 수평 64px×8px → 회전 후 8px×64px */
    .soc-value-arrow-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 8px;
        flex-shrink: 0;
        transform: none;
    }

    .soc-value-arrow-wrap img {
        transform: rotate(-90deg);
        width: 8px;
        height: 100px;
        object-fit: unset;
    }

    /* vesica intersect: CSS overflow clip 기법 */
    .soc-value-vesica {
        display: block;
        position: absolute;
        width: 208px;
        height: 208px;
        border-radius: 50%;
        overflow: hidden;
        left: 30px;
        z-index: 2;
        pointer-events: none;
    }

    .soc-value-vesica::after {
        content: '';
        position: absolute;
        width: 208px;
        height: 208px;
        background: #F1F3F7;
        border-radius: 50%;
        top: -185px;
        /* 이전 원의 중심이 위쪽 185px = 208-23 */
        left: 0;
    }

    /* circle2 시작점 */
    .soc-value-vesica-1 {
        top: 224px;
    }

    /* circle3 시작점 */
    .soc-value-vesica-2 {
        top: 409px;
    }

    .soc-value-result {
        width: 230px;
        height: 230px;
    }

    .soc-value-result p {
        font-size: 26px;
    }

    /* ── br 태그 제어 ── */

    .mo-br {
        display: inline;
    }
}

/* ── 태블릿: border-radius 30px → 20px ── */
@media (min-width: 768px) and (max-width: 1439px) {
    /* 도입 — 검수 0703: 태블릿 도입부 통일 (타이틀 최소 30px, 좌우 여백 20px) */
    .soc-intro-title { font-size: clamp(30px, 3.125vw, 60px); }
    .soc-intro-text-section { padding-left: 20px; padding-right: 20px; }
    .soc-intro-image-section { padding-left: 20px; padding-right: 20px; }
    /* 히어로 이미지 오버레이 안쪽 여백 20 (텍스트가 가장자리에 안 붙게) */
    .soc-intro-overlay { padding: 20px; box-sizing: border-box; }
    /* 도입 이미지 높이 — 환경경영 기준으로 통일 */
    .soc-intro-image-wrapper { height: clamp(300px, 35vw, 500px); }

    /* 안전 캠페인 — 검수 0702: 태블릿 텍스트 반응형 (모바일 min ~ 데스크탑 max) */
    .soc-campaign-keyword { font-size: clamp(24px, 3vw, 44px); }
    .soc-campaign-keyword-desc { font-size: clamp(14px, 1.6vw, 22px); }
    .soc-campaign-center-label { font-size: clamp(16px, 1.7vw, 24px); }
    /* 검수 0712: 안전 캠페인 설명 문단 태블릿 16px */
    .soc-campaign-desc { font-size: 16px; }
    /* 검수 0713/0722: 대표이사 서명 태블릿 margin-top 10px, 크기 14↔16 clamp */
    .soc-policy-ceo { margin-top: 10px; font-size: 16px; /* 검수 0730: 태블릿 16 고정 (bold는 base 상속) */ }

    /* 인증현황 시흥/포항공장 — 검수 0630: 태블릿 제목·아이콘 반응형 */
    .soc-cert-factory-name { font-size: clamp(24px, 2.1vw, 30px); }
    .soc-cert-factory-dot {
        width: clamp(20px, 1.7vw, 24px);
        height: clamp(20px, 1.7vw, 24px);
    }

    /* 서브 타이틀(회색 24px) — 검수 0712: 태블릿 18~20px 통일 (환경경영과 동일) */
    .soc-section-label {
        font-size: clamp(18px, 1.6vw, 20px);
    }

    .soc-intro-image-wrapper,
    .soc-org-video-box,
    .soc-value-content,
    .soc-activity-img-wrap,
    .soc-partner-card,
    .soc-partner-card-text {
        border-radius: 20px;
    }

    /* 검수 0630: 핵심가치 회색 박스 border-radius 반응형 clamp */
    .soc-value-content {
        border-radius: clamp(16px, 2vw, 30px);
    }

    /* 검수 0630: 오벌 그래픽 자체를 max 920으로 캡 + 컨테이너화.
       내부 원/텍스트는 뷰포트(vw)가 아니라 '오벌 기준(cqw)'으로 스케일 →
       회색 박스는 풀너비, 그림(오벌)만 920에서 캡되고 남는 공간은 좌우 여백 */
    /* 오벌이 폭 기준(부모 너비)을 갖도록 — 없으면 container-type로 인해 collapse되어 원이 쭈그러듦 */
    .soc-value-ellipse-wrap {
        width: 100%;
    }
    .soc-value-oval {
        width: 100%;
        max-width: 920px;
        container-type: inline-size;
    }
    .soc-value-circle {
        width: clamp(120px, 34cqw, 300px);
        margin-left: clamp(-30px, -3.5cqw, -15px);
    }
    .soc-value-circle-wrap:not(:first-child) .soc-value-circle::before {
        left: calc(-100% + clamp(15px, 3.5cqw, 30px));
    }
    .soc-value-circle-title {
        font-size: clamp(18px, 4.2cqw, 36px);
    }
    .soc-value-circle-desc {
        font-size: clamp(12px, 2.6cqw, 22px);
    }
}