/* ================= Reset & Base ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
    list-style: none;
    text-decoration: none;
}

/* 이 페이지 섹션 세로 간격: 계단식(100/80/40) → clamp 연속 스케일 */
:root {
    --section-padding-y: clamp(40px, 5.2083vw, 100px);
}

body {
    background-color: #FFFFFF;
    color: #000;
    overflow-x: hidden;
    padding-top: 0;
    /* 히어로가 GNB 뒤로 풀스크린 */
}

.container {
    width: 100%;
    position: relative;
}

/* ================= Header & Hero ================= */
.hero-section {
    position: relative;
    width: 100%;
    height: 33.0208vw;
    /* 634px / 1920px (검수 0709) */
    background: url('../assets/product-center/Page Header.png') no-repeat center top / cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.hero-title-group {
    position: absolute;
    top: 10.4166vw;
    /* 200px / 1920px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.0416vw;
    /* 20px / 1920px */
    width: 100%;
    text-align: center;
}

.hero-subtitle {
    font-size: 1.3541vw;
    /* 26px / 1920px */
    font-weight: 400;
    line-height: 150%;
    color: #FFFFFF;
    margin: 0;
}

.hero-maintitle {
    font-size: 4.1666vw;
    /* 80px / 1920px */
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0%;
    color: #FFFFFF;
    margin: 0;
}

.hero-mobile-br {
    display: none;
}

.hero-desktop-br {
    display: inline;
}



/* ================= 동국산업의 기준 (Standards Section) ================= */
.standards-section {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    background: #FFFFFF;
    overflow: hidden;
}

/* ===== 핵심사업: 상단 라인 그래픽 ===== */
/* 절대배치 앵커 (고정높이 clip 없이 섹션 overflow가 링 정리) */
.std-line-graphic {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

/* 기존 궤도 링(주황 그라데이션) 그대로 사용 */
.std-line-orbit {
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    width: clamp(999px, 167vw, 3206px);
    height: clamp(999px, 167vw, 3206px);
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
}

.std-line-orbit::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    padding: 3px;
    background: repeating-conic-gradient(from -35deg at 50% 50%,
            rgba(242, 113, 0, 0) 0deg, #F27100 35deg, rgba(242, 113, 0, 0) 70deg,
            transparent 70deg, transparent 72deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.std-line-dot {
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translate(-50%, -50%);
    width: 1.7187vw;
    max-width: 33px;
    min-width: 22px;
    height: 1.7187vw;
    max-height: 33px;
    min-height: 22px;
    background: #F27100;
    border-radius: 50%;
    z-index: 1;
}

/* ===== 핵심사업: 타이틀 ===== */
.std-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* 검수 0730: 타이틀↔서브 간격 12 (Figma 2271:20196 gap-12) */
    text-align: center;
    margin-top: clamp(60px, 6.25vw, 120px);
}

.std-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 2.604vw, 50px); /* 검수 0730: 데스크탑 60→50 (Figma heading/Medium) */
    line-height: 1.4;
    color: #000;
    margin: 0;
}

.std-subtitle {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 1.5;
    color: #4E4E4E;
    margin: 0;
}

/* 검수 0730: 서브 문구 데스크탑 한 줄 (Figma whitespace-nowrap) */
@media (min-width: 1440px) {
    .std-subtitle { white-space: nowrap; }
}

/* ===== 핵심사업: 3 카드 ===== */
.std-cards {
    display: flex;
    gap: clamp(12px, 1.25vw, 24px);
    width: 100%;
    max-width: 1920px;
    margin: clamp(40px, 4.1667vw, 80px) auto 0;
    padding: 0 var(--section-padding-x);
    box-sizing: border-box;
}

.std-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: clamp(16px, 1.5625vw, 30px);
    overflow: hidden;
    padding: clamp(20px, 2.0833vw, 40px) clamp(20px, 2.0833vw, 40px) clamp(24px, 2.3958vw, 46px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: background-image 0.4s ease;
}

/* 기본: 이미지 배경 (어두운 오버레이) */
.std-card-1 { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../assets/product-center/std-card1-b.png'); }
.std-card-3 { background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../assets/product-center/std-card3.png'); }

/* 가운데 카드: 기본 활성(주황) */
.std-card-2 { background-image: linear-gradient(rgba(242,113,0,1), rgba(242,113,0,1)), url('../assets/product-center/std-card2.png'); }
/* 검수 0724: 가운데 카드 이미지 더 줌인(cover→세로 140%, 참고 2번 사진). 값 키우면 더 줌인.
   포커스를 아래로 내림(center→center 72%). % 키우면 더 아래 */
.std-card-2 { background-size: auto 160%; background-position: center 100%; }

/* hover한 카드: 활성(주황) */
.std-card-1:hover { background-image: linear-gradient(rgba(242,113,0,1), rgba(242,113,0,1)), url('../assets/product-center/std-card1-b.png'); }
.std-card-3:hover { background-image: linear-gradient(rgba(242,113,0,1), rgba(242,113,0,1)), url('../assets/product-center/std-card3.png'); }

/* 다른 카드에 hover 중이면 가운데 카드는 이미지로 복귀 */
.std-cards:hover .std-card-2:not(:hover) { background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../assets/product-center/std-card2.png'); }

.std-card-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 1.875vw, 36px); /* 검수 0730: 데스크탑 44→36 (Figma label/36) */
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0;
    position: relative;
    z-index: 1;
}

.std-card-icon {
    position: absolute;
    bottom: clamp(24px, 2.3958vw, 46px); /* 검수 0730: 상단→하단 우측 (Figma: 아이콘이 카드 하단행 justify-end) */
    right: clamp(20px, 2.0833vw, 40px);
    width: clamp(50px, 4.5833vw, 88px);
    height: clamp(50px, 4.5833vw, 88px);
    overflow: hidden;
    z-index: 2;
    opacity: 0.8; /* 검수 0730: 아이콘 opacity 80 (Figma) */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 검수 0730: 선택(오렌지 배경) 전환 시엔 아이콘을 '즉시' 숨김 — 주황 배경 위에서 페이드아웃되어 보이던 현상 제거.
   (base transition은 비활성으로 돌아올 때 페이드인용) */
.std-card-2 .std-card-icon,
.std-card:hover .std-card-icon {
    opacity: 0;
    visibility: hidden;
    transition: none;
}

/* 다른 카드 hover 중이면 가운데 카드는 이미지로 복귀 → 아이콘 다시 표시(페이드인) */
.std-cards:hover .std-card-2:not(:hover) .std-card-icon {
    opacity: 0.8;
    visibility: visible;
}

.std-ic-parts img {
    position: absolute;
    display: block;
    max-width: none;
}

.std-card-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.833vw, 16px); /* 검수 0730: 불릿 간격 데스크탑 10→16 (Figma group gap-16) */
    /* 항상 자리 차지 → 움직이지 않고 그 자리에서 opacity로만 나타남 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 1;
}

/* 활성 시 불릿 표시: 가운데 카드 기본 + hover한 카드 (제자리 페이드인) */
.std-card-2 .std-card-bullets,
.std-card:hover .std-card-bullets {
    opacity: 0.8; /* 검수 0730: 불릿 opacity 80 (Figma) */
    visibility: visible;
}

/* 다른 카드 hover 중이면 가운데 카드 불릿 숨김 */
.std-cards:hover .std-card-2:not(:hover) .std-card-bullets {
    opacity: 0;
    visibility: hidden;
}

.std-card-bullets li {
    display: flex;
    gap: clamp(4px, 0.3125vw, 6px);
    align-items: flex-start;
}

.std-dot {
    width: clamp(4px, 0.3125vw, 6px);
    height: clamp(4px, 0.3125vw, 6px);
    border-radius: 50%;
    background: #FFFFFF;
    flex-shrink: 0;
    margin-top: clamp(8px, 0.6771vw, 13px);
}

.std-card-bullets li > span:last-child {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400; /* 검수(0723): 카드 본문(불릿 설명) Regular */
    font-size: clamp(16px, 1.1458vw, 22px); /* 검수 0730: 데스크탑 24→22 (Figma paragraph/XL) */
    line-height: 1.6; /* 검수 0730: 1.5→1.6 (Figma) */
    color: #FFFFFF;
}

/* 모바일 전용 요소 — 데스크탑에서는 숨김 */
.std-mob-br { display: none; }
.std-dots { display: none; }

/* ================= 글로벌 비즈니스 ================= */
.global-sticky-wrap {
    height: 200vh;
    position: relative;
}

.global-section {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 1920px;
    height: 100vh;
    margin: 0 auto;
    overflow: hidden;
}

.global-label {
    position: absolute;
    top: 100px; /* 검수 0730: Figma 그룹 top-100 */
    left: var(--section-padding-x);
    font-size: clamp(18px, 1.0417vw, 20px); /* 검수 0730: 데스크탑 24→20 (Figma label/20_Bold) */
    font-weight: 700; /* 검수 0730: 500→700 (Bold) */
    line-height: 1.5;
    color: #7A7A7A;
    z-index: 5;
}

.global-title {
    position: absolute;
    top: 146px; /* 검수 0730: 라벨(100)+행높이+gap16 (Figma) */
    left: var(--section-padding-x);
    font-size: clamp(40px, 2.604vw, 50px); /* 검수 0730: 데스크탑 60→50 (Figma heading/Medium) */
    font-weight: 700;
    line-height: 1.4;
    color: #000;
    z-index: 5;
    margin: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.global-title .mob-br {
    display: none;
}

.global-title-2 {
    opacity: 0;
    transform: translateY(30px);
}

.global-title-1.fade-out {
    opacity: 0;
    transform: translateY(-30px);
}

.global-title-2.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.global-video-frame {
    position: absolute;
    top: 320px;
    left: var(--section-padding-x);
    right: var(--section-padding-x);
    bottom: 60px;
    border-radius: clamp(16px, 1.5625vw, 30px);
    overflow: hidden;
    z-index: 1;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.global-video-frame.expanded {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
}

.global-video-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* ===== 지도 위 오브젝트 (Figma 1500:11713 중 핀·DK만) =====
   배경 지도/궤도선은 영상이 담당. 이 컨테이너는 핀·DK 좌표계(지도 이미지 영역)만 정의.
   폭은 섹션(=영상 컨테이너) 기준 % → max-width 1920 캡·태블릿 축소에도 영상과 함께 스케일.
   글로브 중심(=DK 뱃지, 지도 47.66%/37.98%)을 영상 중앙(50%,50%)에 정렬 */
.global-map {
    /* 영상의 object-fit:cover 렌더 박스를 그대로 복제 → 화면 비율이 바뀌어도 핀이 영상과 함께 이동.
       영상 16:9(1920×1080). 세로(height 100%) 기준 + 중앙정렬(영상도 center crop)이라,
       폭이 줄어(세로 지배적) 영상이 안 줄어드는 구간에서도 맵이 동일하게 안 틀어짐. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
    aspect-ratio: 16 / 9;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* 화면이 16:9보다 넓을 때(짧고 넓은 화면)는 영상이 가로 기준 cover → 맵도 가로(width 100%) 기준 */
@media (min-width: 768px) and (min-aspect-ratio: 16 / 9) {
    .global-map {
        width: 100%;
        height: auto;
    }
}

.global-map.show {
    opacity: 1;
}

/* 궤도선: 모바일 전용 (데스크탑은 영상이 담당) */
.gmap-orbit-m {
    display: none;
}

/* 핀: 고정 크기(영상 cover는 폭 줄어도 안 줄어드므로 핀도 고정 px).
   위치는 지도 컨테이너 기준 % (top-left 앵커). aspect-ratio로 세로 폴백 방지 */
.gmap-pin {
    position: absolute;
    width: 22px;
    aspect-ratio: 21.359 / 28.218;
    height: auto;
    z-index: 3;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.gmap-pin.show {
    opacity: 1;
    transform: translateY(0);
}

.gmap-pin-1 { left: 57%; top: 75%; }
.gmap-pin-2 { left: 50%; top: 61%; }
.gmap-pin-3 { left: 26%; top: 52%; }
.gmap-pin-4 { left: 40%; top: 90%; }
.gmap-pin-5 { left: 24%; top: 82%; }

/* DK 뱃지: 흰색 pill 83.271×48.744 @ (654.11, 293.29) rel. map */
.gmap-dk {
    position: absolute;
    left: 48%;
    top: 74%;
    background: #FFFFFF;
    border-radius: 10000px;
    padding: 12px 16px;   /* 고정 (핀과 동일하게 안 줄어듦) */
    display: flex;
    z-index: 3;
}

.gmap-dk-logo {
    display: block;
    position: relative;
    width: 50px;
    height: 24px;
    overflow: hidden;
}

.gmap-dk-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2.15%;
    width: 230.12%;
    height: 100%;
    background: url('../assets/product-center/global-dk.png') no-repeat;
    background-size: 100% 100%;
}

/* ===== 우하단 글래스 정보 카드 (Figma 1500:11740) ===== */
.global-card {
    position: absolute;
    right: var(--section-padding-x);
    bottom: clamp(40px, 9.26vh, 100px);   /* py-100 @830 */
    width: clamp(400px, 28.8vw, 553px);
    box-sizing: border-box;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #FFFFFF;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    z-index: 6;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.global-card.show {
    opacity: 1;
    transform: translateY(0);
}

.gcard-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.gcard-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 2px solid #FCE3CC;
    border-radius: 130px;
    background: #FFFFFF;
    color: #F27100;
    font-size: clamp(18px, 1.25vw, 24px);
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
}

.gcard-value {
    padding: 0 10px;
    color: #363636;
    font-size: clamp(22px, 1.5625vw, 30px);
    font-weight: 700;
    line-height: 1.5;
}

.gcard-divider {
    width: 100%;
    height: 1px;
    background: #E9E9E9;
}

/* ================= 🌟 제품 (Products Section) 🌟 ================= */
.products-section {
    padding: clamp(48px, 6.25vw, 120px) var(--section-padding-x);
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.products-container {
    position: relative;
    display: flex;
    gap: 0;
    width: 100%;
    max-width: 1680px;
    /* 이미지 비율(1680:808)로 고정 → background cover가 크롭 없이 전체를 그대로 표시(피그마와 동일) */
    aspect-ratio: 1680 / 808;
    border-radius: clamp(16px, 1.5625vw, 30px);
    overflow: hidden;
    background: #111;
}

/* 겹쳐진 3개 강판 이미지 레이어 — 컨테이너에 고정, clip-path 밴드만 노출(커튼) */
.pc-layer {
    position: absolute;
    inset: 0;
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3개 동일 구도 이미지 — 완전히 같은 위치/크기로 겹쳐두고 각 밴드만 clip → 라인 연속 */
.pc-layer-1 { background-image: url('../assets/product-center/pc-nickel-v2.png'); }
.pc-layer-2 { background-image: url('../assets/product-center/pc-cold-v2.png'); }
.pc-layer-3 { background-image: url('../assets/product-center/pc-heat-v2.png'); }

/* 검수 0724: 겹쳐 쌓기 방식. 열처리(layer-3)를 clip 없이 '전체 덮개'로 항상 맨 뒤에 두고,
   니켈(layer-1)·냉연(layer-2)은 '오른쪽 경계'만 clip. z순서 니켈>냉연>열처리(HTML DOM 역순).
   → 전환 중 어떤 틈이 생겨도 뒤 레이어(인접 올바른 재질/열처리)가 항상 덮어 검정(#111)이 절대 안 보임.
   정상 상태 밴드(니켈0-59.6/냉연59.6-79.8/열처리79.8-100)는 기존과 동일하게 보임. */
.pc-layer-3 { clip-path: none; }               /* 열처리: 전체 덮개(항상 뒤) */
.pc-layer-1 { clip-path: inset(0 40.4% 0 0); }  /* 니켈: 0~59.6% */
.pc-layer-2 { clip-path: inset(0 20.2% 0 0); }  /* 냉연: 0~79.8% (니켈이 위에서 0~59.6 덮음) */

/* 냉연 활성: 니켈 0-20.2% / 냉연 20.2-79.8% / 열처리 79.8-100% */
.products-container:has(.product-card[data-i="2"].expanded) .pc-layer-1 { clip-path: inset(0 79.8% 0 0); }
.products-container:has(.product-card[data-i="2"].expanded) .pc-layer-2 { clip-path: inset(0 20.2% 0 0); }

/* 열처리 활성: 니켈 0-20.2% / 냉연 20.2-40.4% / 열처리 40.4-100% */
.products-container:has(.product-card[data-i="3"].expanded) .pc-layer-1 { clip-path: inset(0 79.8% 0 0); }
.products-container:has(.product-card[data-i="3"].expanded) .pc-layer-2 { clip-path: inset(0 59.6% 0 0); }

.product-card {
    position: relative;
    flex: 339;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
    transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 텍스트 가독성 그라데이션 */
.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 0;
}

.product-card.expanded {
    flex: 1002;
}

/* 전체 콘텐츠 래퍼 */
.pc-content {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* 타이틀+설명 텍스트 박스 — 항상 좌상단 고정 (Figma: card p-40 + inner p-10 = 50px) */
.pc-text-block {
    position: absolute;
    top: clamp(24px, 2.604vw, 50px);
    left: clamp(24px, 2.604vw, 50px);
    display: flex;
    flex-direction: column;
    z-index: 10;
}

/* 확장 상태에서도 위치는 동일한 좌상단 */
.product-card.expanded .pc-text-block {
    top: clamp(24px, 2.604vw, 50px);
    left: clamp(24px, 2.604vw, 50px);
}

/* 축소 상태 타이틀 (Figma label/36) */
.pc-title-small {
    /* 검수 0724: 사파리 font-size 트랜지션 리플로우/점프 방지 → 항상 확장(큰) 크기로 렌더하고 transform scale로 축소.
       transform은 GPU 합성이라 사파리에서도 매끄럽고 텍스트 위치가 안 튐. */
    font-size: clamp(30px, 2.604vw, 50px); /* 검수 0730: 확장 60→50 (Figma heading/Medium) */
    font-weight: 700;
    line-height: 1.4;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
    transform-origin: left top;
    transform: scale(0.72); /* 검수 0730: 축소 = 36/50 비율 (축소 타이틀 36px 보장) */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 확장 상태 타이틀 (Figma heading/L 60) */
.product-card.expanded .pc-title-small {
    transform: scale(1);
}

/* 설명글 (Figma label/26, opacity 0.8) — 제목 아래, 확장 시에만 노출 */
.pc-desc {
    font-size: clamp(16px, 1.25vw, 24px); /* 검수 0730: 26→24 (Figma paragraph/XXL) */
    font-weight: 500; /* 검수 0730: 24pt/medium (redline) */
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0;

    /* 축소 상태: 숨김 (레이아웃 밀림 없이) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease 0.15s, visibility 0s linear 0.5s;
}

/* 버튼 그룹: 우측 하단 */
.pc-btn-group {
    position: absolute;
    bottom: clamp(16px, 2.0833vw, 40px);
    right: clamp(16px, 2.0833vw, 40px);
    display: flex;
    gap: clamp(4px, 0.2083vw, 4px);
}

.pc-btn-text {
    width: clamp(100px, 7.2916vw, 140px);
    height: clamp(44px, 3.3333vw, 64px);
    background: #FFFFFF;
    border-radius: clamp(8px, 0.7291vw, 14px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(14px, 1.0416vw, 20px);
    font-weight: 500;
    color: #000000;
    border: none;
    cursor: pointer;
}

.pc-btn-icon {
    width: clamp(44px, 3.3333vw, 64px);
    height: clamp(44px, 3.3333vw, 64px);
    background: transparent;
    border-radius: clamp(8px, 0.7291vw, 14px);
    border: 2px solid #FFFFFF;
    display: flex;
    justify-content: center;
    color: #ffffff;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
    .pc-btn-group:hover .pc-btn-icon {
        background-color: #F27100;
        border-color: #F27100;
    }
}

/* 카드가 확장되면 -> 설명글 노출 (제목 아래 gap 20px) */
.product-card.expanded .pc-desc {
    max-height: 100px;
    margin-top: 4px; /* 검수 0730: 제목↔서브 간격 20→4 (Figma Info gap-4) */
    opacity: 0.8;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease 0.2s, visibility 0s;
}

/* 버튼: 기본 숨김 및 클릭 방지 */
.pc-btn-group {
    opacity: 0;
    pointer-events: none;
    /* 💡 평소에는 클릭을 아예 무시합니다 */
    transition: opacity 0.05s ease;
    /* 닫힐 때: 즉시 사라짐 */
}

/* 카드가 확장되면 -> 버튼 활성화 */
.product-card.expanded .pc-btn-group {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease 0.2s;
}

/* =================================================================
   Desktop Hover Accordion (JS .expanded class driven)
   ================================================================= */
@media (min-width: 768px) and (hover: hover) {

    /* 확장되지 않은 카드: 축소 상태 (제목은 좌상단 유지, 크기만 36px) */
    .product-card:not(.expanded) {
        flex: 329;
    }

    /* 검수 0730: font-size 오버라이드 제거 — base 50px × scale(0.72) = 36px가 축소 크기.
       기존 오버라이드(36px)가 base scale(0.6)과 곱해져 21.6px로 이중 축소되던 버그 수정. */

    .product-card:not(.expanded) .pc-desc {
        max-height: 0;
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .product-card:not(.expanded) .pc-btn-group {
        opacity: 0;
        pointer-events: none;
    }
}





/* 반응형 줄바꿈 */
.mob-br {
    display: none;
}




@media (max-width: 767px) {


    .mob-br {
        display: inline;
    }
}

/* ===== TOP 버튼 ===== */
.btn-top {
    position: fixed;
    right: 80px;
    bottom: 16px;
    /* 기본적으로 화면 아래에서 80px 띄움 */
    width: 60px;
    /* 💡 피그마 스펙에 맞춰 버튼 크기 조절 필요 */
    height: 60px;
    z-index: 999;
    /* 다른 요소들보다 항상 위에 오도록 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    /* 처음에 숨겨두었다가 스크롤하면 나타나게 하기 위한 설정 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    /* 🚨 주의: bottom에는 transition을 주지 마세요! (스크롤 시 덜덜거림 방지) */
}

/* 스크롤 시 버튼이 나타나게 하는 클래스 */
.btn-top.show {
    opacity: 1;
    visibility: visible;
}

.btn-top img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ════════════════════════════════════
   1920px 초과 — 카드 크기 고정
   (vw 기반 카드가 무한히 커지는 것 방지)
   ════════════════════════════════════ */
/* TABLET (768px ~ 1439px) */
@media (min-width: 768px) and (max-width: 1439px) {
    .global-title {
        font-size: clamp(36px, 3.125vw, 60px);
    }

    .card-title {
        font-size: 18px;
        top: 162px;
        left: 16px;
    }

    .card-desc {
        font-size: 16px;
    }

    .stat-box {
        width: 15vw;
        height: 15vw;
    }

    .stat-box p {
        font-size: 16px;
    }

    .stat-box strong {
        font-size: 44px;
    }

    .slider-wrapper {
        height: 360px;
    }

    .standard-card {
        width: 300px;
        height: 240px;
        border-radius: 16px;
    }

    .card-icon {
        top: 16px;
        left: 16px;
        width: 50px;
        height: 50px;
    }

    .standard-card.active {
        width: 400px;
        height: 320px;
        border-radius: 16px;
    }

    .standard-card.active .card-icon {
        top: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
    }

    .standard-card.active .card-title {
        top: 86px;
        left: 20px;
        width: auto;
        height: auto;
        font-size: 24px;
    }

    .standard-card.active .card-desc {
        position: absolute;
        bottom: 24px;
        left: 20px;
        right: 20px;
        width: auto;
        height: auto;
        font-size: 18px;
        opacity: 1;
    }

    .marker-china {
        bottom: 30%;
    }

    .marker-japan {
        bottom: 30%;
    }

    .pc-btn-icon {
        border-width: 1px;
    }
}

@media (min-width: 1440px) {

    /* 섹션 높이 고정: 1333px (= 69.427vw × 1920px) */
    .standards-section {}

    .section-title {
        font-size: 60px;
        margin-bottom: 240px;
    }

    /* 슬라이더 높이 고정 */
    .slider-wrapper {
        height: 560px;
        max-height: 560px;
    }

    .slider-track {
        gap: 30px;
    }

    /* 비활성 카드 고정 */
    .standard-card {
        width: 498px;
        /* 25.9375vw × 1920 */
        height: 402px;
        /* 20.9375vw × 1920 */
        border-radius: 30px;
    }

    /* 활성 카드 고정 */
    .standard-card.active {
        width: 716px;
        /* 37.2916vw × 1920 */
        height: 560px;
        /* 29.1666vw × 1920 */
        border-radius: 30px;
    }

    /* 카드 아이콘 고정 */
    .card-icon {
        top: 30px;
        left: 30px;
        width: 50px;
        height: 50px;
    }

    .card-text-area {
        position: absolute;
        inset: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    .card-title {
        position: absolute;
        top: 282px;
        bottom: auto;
        left: 30px;
        font-size: 30px;
    }

    .standard-card.active .card-icon {
        top: 40px;
        left: 40px;
        width: 88px;
        height: 88px;
    }

    .standard-card.active .card-title {
        position: absolute;
        top: 158px;
        bottom: auto;
        left: 40px;
        width: 636px;
        height: 132px;
        font-size: 44px;
    }

    /* 카드 설명 고정 */
    .standard-card.active .card-desc {
        position: absolute;
        bottom: 46px;
        left: 40px;
        width: 636px;
        height: auto;
        font-size: 24px;
        opacity: 1;
    }

    .card-desc {
        font-size: 24px;
    }

    /* 궤도 고정 */
    .orb-wrapper {
        top: 386px;
        width: 3206px;
        height: 3206px;
    }

    .orb-main-dot {
        top: -16.5px;
        width: 33px;
        height: 33px;
    }

    /* 히어로 고정 */
    .hero-section {
        height: 590px; /* 검수 0724: 노트북 등에서 너무 커 634→590 축소 */
    }

    .hero-title-group {
        top: 200px;
        gap: 20px;
    }

    .hero-subtitle {
        font-size: 26px;
    }

    .hero-maintitle {
        font-size: 64px; /* 검수 0724: 슬로건 80→64 축소 */
    }
}

/* ════════════════════════════════════
           MOBILE — 1023px 이하
           Figma: MOB_제품정보 센터_KOR (38:3589)
           ════════════════════════════════════ */
@media (max-width: 767px) {
    body {
        padding-top: 0;
        min-width: 0;
        width: 100%;
        overflow-x: hidden;
    }

    .container {
        max-width: 100%;
    }

    /* ── Hero: 반응형 중앙 배치 ── */
    .hero-section {
        height: 330px; /* 검수(0709 재확인): 모바일 히어로 높이 330px */
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
    }

    .hero-title-group {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-top: 0;
        padding: 0 16px;
        gap: 12px;
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .hero-subtitle {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.6;
    }

    .hero-maintitle {
        font-size: 26px;
        font-weight: 700;
        line-height: 1.5;
    }

    .hero-mobile-br {
        display: inline;
    }

    .hero-desktop-br {
        display: none;
    }
}

/* ≤1024: 핵심사업 카드는 모바일 슬라이더로 전환 (작은 태블릿에서 3열이 잘림) */
@media (max-width: 1024px) {

    /* ── Standards (핵심사업) 슬라이더 (Figma 1500:11221) ── */
    .standards-section {
        height: auto;
        padding: 40px 0;
        overflow: hidden;
    }

    /* 궤도 링: 상단 중앙 아치, 도트 16px */
    .std-line-orbit {
        top: 40px;
    }

    .std-line-dot {
        top: 40px;
        width: 16px;
        min-width: 16px;
        max-width: 16px;
        height: 16px;
        min-height: 16px;
        max-height: 16px;
    }

    .std-line-orbit::before {
        padding: 1px;
    }

    /* heading: 제목 26px 2줄, 설명 16px. margin-top은 궤도(167vw)가 커질수록
       아치도 깊어지므로 뷰포트 비례로 함께 키워 겹침 방지 */
    .std-heading {
        margin-top: clamp(58px, 6.6vw, 170px);
        gap: 10px;
        padding: 0 16px;
    }

    .std-title {
        font-size: 26px; /* 태블릿(≤1024) 유지 */
        line-height: 1.5;
    }

    .std-mob-br {
        display: inline;
    }

    .std-subtitle {
        font-size: 16px;
        line-height: 1.6;
    }

    /* 카드: 가로 스크롤 스냅 캐러셀 (328×328, gap 6) */
    .std-cards {
        margin: 30px 0 0;
        padding: 0 16px;
        gap: 6px;
        max-width: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .std-cards::-webkit-scrollbar {
        display: none;
    }

    .std-card {
        flex: 0 0 328px;
        width: 328px;
        height: 328px;
        aspect-ratio: auto;
        border-radius: 16px;
        padding: 16px 16px 20px;
        scroll-snap-align: center;
    }

    /* 배경 고정 (hover 변경 무효화) — card1/3 이미지+dim */
    .std-card-1,
    .std-card-1:hover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../assets/product-center/std-card1-b.png');
    }

    .std-card-3,
    .std-card-3:hover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../assets/product-center/std-card3.png');
    }

    /* card2(가운데): 주황 대신 다크 그라데이션 + 불릿 (featured) */
    .std-card-2,
    .std-cards:hover .std-card-2:not(:hover) {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.6)), url('../assets/product-center/std-card2.png');
        /* 검수(0723): 모바일 배경 중앙하단 포커스로 확대(그라디언트는 cover 유지, 이미지만 확대)
           미세조정: 아래 background-position 두 번째 값 '50% 100%'에서 X% Y% 숫자만 조절
           (X: 좌0~우100 / Y: 위0~아래100), 확대율은 'auto 160%'의 160% 조절 */
        background-size: cover, auto 160%;
        background-position: center, 50% 100%;
    }

    /* 아이콘: 50px, 우상단 (파트가 %라 박스 크기만 지정하면 됨) */
    .std-card-icon {
        top: 16px;
        right: 16px;
        width: 50px;
        height: 50px;
    }

    /* 제목: card1/3 20px, card2 22px */
    .std-card-title {
        font-size: 20px;
        line-height: 1.5;
    }

    .std-card-2 .std-card-title {
        font-size: 22px;
    }

    /* 검수(0720): 탭했을 때만 나오던 설명(불릿)을 3카드 모두 기본으로 항상 노출 */
    .std-card-1 .std-card-bullets,
    .std-card-2 .std-card-bullets,
    .std-card-3 .std-card-bullets {
        display: flex;
        gap: 6px;
        opacity: 0.8; /* 검수 0730: 불릿 opacity 80 — 전 카드 (Figma) */
        visibility: visible;
    }

    /* 검수 0730: 모바일 캐러셀 — 오직 중앙(.is-focus) 카드만 제목·내용·아이콘을 '함께' 노출.
       데스크탑 hover 로직(빈 곳 탭 시 모바일 sticky :hover로 가운데 카드가 풀리던 문제)을
       .is-focus 기준으로 강제 오버라이드(!important). 셋이 같이 나타나고 같이 사라짐. */
    .std-card .std-card-title,
    .std-card .std-card-bullets,
    .std-card .std-card-icon {
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .std-cards .std-card:not(.is-focus) .std-card-title,
    .std-cards .std-card:not(.is-focus) .std-card-bullets,
    .std-cards .std-card:not(.is-focus) .std-card-icon {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .std-cards .std-card.is-focus .std-card-title,
    .std-cards .std-card.is-focus .std-card-icon {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .std-cards .std-card.is-focus .std-card-bullets {
        opacity: 0.8 !important;
        visibility: visible !important;
    }

    .std-card-bullets li {
        gap: 4px;
    }

    .std-dot {
        width: 4px;
        height: 4px;
        margin-top: 10px;
    }

    .std-card-bullets li > span:last-child {
        font-size: 16px;
        line-height: 1.6;
    }

    /* 도트 인디케이터 (8px, 활성 주황) */
    .std-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 12px;
    }

    .std-nav-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #E9E9E9;
        cursor: pointer;
        transition: background 0.2s;
    }

    .std-nav-dot.active {
        background: #F27100;
    }
}

@media (max-width: 767px) {

    /* ── Global (글로벌 네트워크) 모바일: 데스크탑과 동일한 영상 풀스크린 전환.
       오브젝트만 모바일 배치. 영상은 fit(contain) — 세부는 추후 조정 ── */
    /* 모바일: 풀스크린 아님 — 650px 고정 (sticky-wrap도 650으로 스크롤잠금 해제) */
    .global-sticky-wrap {
        height: 650px;
    }

    .global-section {
        height: 650px;
    }

    .global-label {
        top: 40px;
        left: 16px;
        font-size: 18px;
        font-weight: 700;
    }

    .global-title,
    .global-title-2 {
        top: 80px;
        left: 16px;
        font-size: 26px;
        line-height: 1.5;
    }

    /* 확장 전: 328:160 비율 라운드 컨테이너(가로=100vw-32 기준 높이 산출 → 비율 유지 + height 트랜지션 가능).
       세로 영상 소스가 없어 contain으로 표시하고 여백은 배경으로 채움.
       모바일은 변화 폭이 커서 0.8s(PC와 동일)면 급해 보여 1.2s로 완만하게 */
    .global-video-frame {
        top: 232px;
        left: 16px;
        right: 16px;
        bottom: auto;
        height: calc((100vw - 32px) * 160 / 328);
        border-radius: 20px;
        background: #F3EFED;
        transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 컨테이너는 100vw × 100vh로 확장(배경 풀스크린). height를 100vh로 명시해야
       160px → 100vh가 부드럽게 트랜지션됨(auto는 애니메이션 불가라 '확' 튐) */
    .global-video-frame.expanded {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        height: 650px;
        border-radius: 0;
    }

    .global-video-frame video {
        object-fit: contain;   /* 영상 전체 표시(작게), 여백은 주황 배경 */
        margin-top: 0px;       /* 접힘 상태: 0 → 확장 시 -80으로 트랜지션 */
        transition: margin-top 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 확장 시 영상 위로 끌어올림 (-80) */
    .global-video-frame.expanded video {
        margin-top: -80px;
    }

    /* 맵: contain된 영상 밴드(가로 100%, 16:9, 세로중앙)와 일치 → 핀이 영상에 정확히 얹힘 */
    .global-map {
        width: 100%;
        height: auto;
        top: 36%;
    }

    .gmap-orbit-m {
        display: none;
    }

    /* 모바일: 검정핀 가로 10px + 전반적으로 좌상단으로 이동(-3%씩) */
    .gmap-pin {
        width: 10px;
    }

    .gmap-pin-1 { left: 57%; top: 77%; }
    .gmap-pin-2 { left: 50%; top: 61%; }
    .gmap-pin-3 { left: 28%; top: 56%; }
    .gmap-pin-4 { left: 40%; top: 91%; }
    .gmap-pin-5 { left: 25%; top: 85%; }

    .gmap-dk {
        left: 45%;
        top: 71%;
        padding: 6px 8px;
    }

    .gmap-dk-logo {
        width: 32px;
        height: 15.36px;
    }

    .global-card {
        left: 16px;
        right: 16px;
        /* 검수 0724(B)+0806: 카드를 영상 밴드 바로 밑에 붙임(폭 무관 일정 간격).
           밴드 바닥 = 245px(=650/2−80) + 밴드 절반높이. 프레임이 left/right 16px 인셋이라 밴드 폭=100vw−32,
           밴드높이=(100vw−32)*9/16=56.25vw−18 → 절반=28.125vw−9. (이전 +14px는 이 −9 인셋을 빠뜨려
           카드가 밴드보다 ~23px 낮아 패딩/영상 잘림 발생.) 이제 −9 반영 + 5px 간격.
           여백 조정은 마지막 상수(5px)만 바꾸면 됨(작게=위로 붙음). */
        top: calc(245px + 28.125vw - 9px + 5px);
        bottom: auto;
        width: auto;
        padding: 20px 16px;
        gap: 20px;
        border-radius: 16px;
        /* 검수(0716): 블러는 이미 적용돼 있으나 흰 배경 70%가 덮어 티가 안 나므로 모바일은 투명도 낮춰 흐림효과 부각 */
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }

    .gcard-row {
        gap: 10px;
    }

    .gcard-badge {
        padding: 6px 12px;
        font-size: 16px;
    }

    .gcard-value {
        font-size: 20px;
    }

    /* ── Products (모바일): 아코디언 없이 328×184 개별 고정 카드 3개 세로 스택 ── */
    .products-section {
        padding: 40px 16px;
    }

    .products-container {
        flex-direction: column;
        width: 100%;
        height: auto;
        aspect-ratio: auto;   /* base의 1680/808 해제 — 안 풀면 높이가 납작하게 강제돼 카드가 잘림(마스킹) */
        max-width: none;
        gap: 0;
        border-radius: 12px;
        overflow: hidden;
        background: transparent;
    }

    /* 커튼 레이어 숨김 — 모바일은 카드별 개별 이미지 */
    .pc-layer {
        display: none;
    }

    /* 각 카드: 고정 184px, 자체 배경 이미지 */
    .product-card,
    .product-card.expanded {
        flex: none;
        width: 100%;
        height: 184px;
        border-radius: 0;
        transition: none;
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
    }

    .product-card[data-i="1"] {
        border-radius: 12px 12px 0 0;
        background-image: url('../assets/product-center/pc-nickel-v2.png');
    }
    .product-card[data-i="2"] {
        background-image: url('../assets/product-center/pc-cold-v2.png');
    }
    .product-card[data-i="3"] {
        border-radius: 0 0 12px 12px;
        background-image: url('../assets/product-center/pc-heat-v2.png');
    }

    /* 상단 스크림 (Figma: rgba(0,0,0,0.2) → 투명) */
    .product-card::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    }

    /* 콘텐츠: 카드 전체, 제목 중앙 정렬 */
    .pc-content {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 16px;
        box-sizing: border-box;
    }

    /* 제목: 20px Bold 중앙 (Figma label/20_Bold) */
    .pc-text-block,
    .product-card.expanded .pc-text-block {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pc-title-small,
    .product-card:not(.expanded) .pc-title-small,
    .product-card.expanded .pc-title-small {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
        white-space: nowrap;
        transition: none;
        transform: none; /* 검수 0729: 모바일은 고정 20px. base의 scale(0.6)/expanded scale(1)이 남아 냉연·QT만 축소되던 것 제거 */
    }

    /* 설명글은 모바일에서 미노출 */
    .pc-desc,
    .product-card.expanded .pc-desc {
        display: none;
    }

    /* 화살표 버튼: 우하단 아이콘만 (Figma right20/bottom20, 42px, border rgba(255,255,255,0.3)) */
    .pc-btn-group,
    .product-card.expanded .pc-btn-group {
        display: flex;
        position: absolute;
        bottom: 20px;
        right: 20px;
        gap: 0;
        opacity: 1;
        pointer-events: auto;
    }

    .pc-btn-text {
        display: none;
    }

    .pc-btn-icon {
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        background: transparent;
    }





    /* ── BTN TOP ── */
    .btn-top {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }
}

/* ── 태블릿: border-radius 30px → 20px ── */
@media (min-width: 768px) and (max-width: 1439px) {

    .global-video-frame,
    .standard-card {
        border-radius: 20px !important;
    }
}
/* 검수 0730: '검증된 핵심사업…' 제목은 모바일(≤767)에서만 24px. 태블릿(≤1024)은 26px 유지 (Figma 초록=모바일 대상). */
@media (max-width: 767px) {
    .std-title {
        font-size: 24px;
    }
}